@chris-c-brine/rhf-mui-kit 0.1.4 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -13,8 +13,8 @@ A specialized component library that extends React Hook Form with Material UI in
13
13
 
14
14
  ## Components
15
15
 
16
- - **AutocompleteDisplayElement**: Enhanced autocomplete with view-only mode support
17
- - **ObjectDisplayElement**: Autocomplete for complex objects with key/label extraction
16
+ - **AutocompleteElementDisplay**: Enhanced autocomplete with view-only mode support
17
+ - **ObjectElementDisplay**: Autocomplete for complex objects with key/label extraction
18
18
  - **ValidationElement**: Hidden form field with validation support
19
19
 
20
20
  ## Hooks
@@ -38,13 +38,13 @@ npm install @chris-c-brine/rhf-mui-kit
38
38
  ## Basic Usage
39
39
 
40
40
  ```tsx
41
- import { ObjectDisplayElement } from '@chris-c-brine/rhf-mui-kit';
41
+ import { ObjectElementDisplay } from '@chris-c-brine/rhf-mui-kit';
42
42
  import { FormContainer } from 'react-hook-form-mui';
43
43
 
44
44
  // Example with object values
45
45
  const MyForm = () => (
46
46
  <FormContainer defaultValues={{ user: null }}>
47
- <ObjectDisplayElement
47
+ <ObjectElementDisplay
48
48
  name="user"
49
49
  label="Select User"
50
50
  options={users}
@@ -2,10 +2,8 @@ import { type AutocompleteElementProps } from "react-hook-form-mui";
2
2
  import { type ChipTypeMap } from "@mui/material";
3
3
  import type { FieldPath, FieldValues } from "react-hook-form";
4
4
  import { type ElementType } from "react";
5
- 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;
6
- 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;
7
- type Viewable = {
5
+ 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> & {
8
6
  viewOnly?: boolean;
9
7
  disableUnderline?: boolean;
10
8
  };
11
- export {};
9
+ 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;
@@ -2,30 +2,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { AutocompleteElement } from "react-hook-form-mui";
3
3
  import { useMemo } from "react";
4
4
  import lodash from "lodash";
5
+ import { getTextElementDisplayProps } from "../utils";
5
6
  const { merge } = lodash;
6
- export const AutocompleteElementDisplay = ({ viewOnly, disableUnderline, textFieldProps, autocompleteProps, ...props }) => {
7
+ export const AutocompleteElementDisplay = ({ viewOnly = undefined, disableUnderline, textFieldProps, autocompleteProps, ...props }) => {
7
8
  const autocompleteAdjustedProps = useMemo(() => merge({
8
9
  readOnly: viewOnly,
9
- disableClearable: viewOnly,
10
+ disableClearable: autocompleteProps?.disableClearable || viewOnly,
10
11
  disabled: viewOnly,
11
- slotProps: {
12
- input: { disableUnderline },
13
- chip: {
14
- disabled: false,
15
- },
16
- },
17
12
  }, autocompleteProps, viewOnly
18
13
  ? {
19
14
  sx: {
20
- ".MuiAutocomplete-endAdornment": {
21
- display: "none",
22
- },
23
15
  ".MuiAutocomplete-tag": {
24
- opacity: "1 !important"
16
+ opacity: "1 !important",
25
17
  },
26
18
  },
27
19
  }
28
- : {}), [autocompleteProps, viewOnly, disableUnderline]);
29
- const textFieldAdjustedProps = useMemo(() => merge(viewOnly ? { variant: "standard" } : {}, textFieldProps), [viewOnly, textFieldProps]);
30
- return (_jsx(AutocompleteElement, { ...props, autocompleteProps: autocompleteAdjustedProps, textFieldProps: textFieldAdjustedProps }));
20
+ : {}), [autocompleteProps, viewOnly]);
21
+ const textFieldAdjustedProps = useMemo(() => getTextElementDisplayProps(textFieldProps, viewOnly, disableUnderline), [textFieldProps, viewOnly, disableUnderline]);
22
+ return (_jsx(AutocompleteElement, { autocompleteProps: autocompleteAdjustedProps, textFieldProps: textFieldAdjustedProps, ...props }));
31
23
  };
@@ -1,9 +1,9 @@
1
- import { type ElementType, ReactNode } from "react";
2
- import { type ChipProps, type ChipTypeMap } from "@mui/material";
1
+ import { type ElementType } from "react";
2
+ import { type ChipProps, type ChipTypeMap, type ListItemProps } from "@mui/material";
3
3
  import type { FieldPath, FieldValues } from "react-hook-form";
4
4
  import { type AutocompleteElementDisplayProps } from "./AutocompleteElementDisplay";
5
5
  /**
6
- * Extends DisplayAutocompleteProps with additional properties for handling object values.
6
+ * Extends AutocompleteElementDisplayProps with additional properties for handling object values.
7
7
  *
8
8
  * @template TValue - The type of the option values
9
9
  * @template Multiple - Boolean flag indicating if multiple selections are allowed
@@ -13,7 +13,7 @@ import { type AutocompleteElementDisplayProps } from "./AutocompleteElementDispl
13
13
  * @template TFieldValues - The type of the form values
14
14
  * @template TName - The type of the field name
15
15
  */
16
- export type DisplayObjectCompleteProps<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>> = AutocompleteElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName> & {
16
+ export type ObjectElementDisplayProps<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>> = AutocompleteElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName> & {
17
17
  /**
18
18
  * Function to extract a unique key from an option value.
19
19
  * Used for option comparison and deduplication.
@@ -27,9 +27,17 @@ export type DisplayObjectCompleteProps<TValue, Multiple extends boolean | undefi
27
27
  * Can return any ReactNode for custom rendering.
28
28
  *
29
29
  * @param value - The option value or null
30
- * @returns A ReactNode to display as the option label
30
+ * @returns A string to display as the option label
31
31
  */
32
- getItemLabel: (value: TValue | null) => ReactNode;
32
+ getItemLabel: (value: TValue | null) => string;
33
+ /**
34
+ * Function to get additional props for an option list item.
35
+ * Used for customizing the rendering of the option.
36
+ *
37
+ * @param value - The option value or null
38
+ * @returns Additional props to apply to the list item
39
+ */
40
+ getOptionProps?: (value: TValue | null) => ListItemProps;
33
41
  /**
34
42
  * Function to convert a free text input string to a TValue object.
35
43
  * Required when freeSolo is true to create new items from text input.
@@ -54,10 +62,18 @@ export type DisplayObjectCompleteProps<TValue, Multiple extends boolean | undefi
54
62
  value: TValue;
55
63
  index: number;
56
64
  }) => Partial<ChipProps> | undefined;
65
+ /**
66
+ * Optional function to transform the value before it's updated in the form.
67
+ * This allows for custom processing or enrichment of the selected value.
68
+ *
69
+ * @param value - The value that would normally be sent to the form
70
+ * @returns The transformed value to be stored in the form
71
+ */
72
+ transformValue?: Multiple extends true ? (value: TValue[]) => TFieldValues : (value: TValue | null) => TFieldValues | null;
57
73
  };
58
74
  /**
59
75
  * A form component that displays a searchable dropdown for selecting object values.
60
- * Extends AutocompleteDisplayElement with object-specific functionality.
76
+ * Extends AutocompleteElementDisplay with object-specific functionality.
61
77
  *
62
78
  * Features:
63
79
  * - Works with complex object values instead of just primitive types
@@ -76,4 +92,4 @@ export type DisplayObjectCompleteProps<TValue, Multiple extends boolean | undefi
76
92
  *
77
93
  * @returns A React component for selecting object values
78
94
  */
79
- export declare const ObjectDisplayElement: <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 }: DisplayObjectCompleteProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
95
+ 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;
@@ -0,0 +1,234 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createElement as _createElement } from "react";
3
+ import { useMemo, useState, useEffect } from "react";
4
+ import { Checkbox, Chip, ListItem, } from "@mui/material";
5
+ import { AutocompleteElementDisplay, } from "./AutocompleteElementDisplay";
6
+ import { getAutocompleteTypedValue, isNonNullableString } from "../utils";
7
+ import { useController } from "react-hook-form-mui";
8
+ import { merge } from "lodash";
9
+ /**
10
+ * A form component that displays a searchable dropdown for selecting object values.
11
+ * Extends AutocompleteElementDisplay with object-specific functionality.
12
+ *
13
+ * Features:
14
+ * - Works with complex object values instead of just primitive types
15
+ * - Supports both single and multiple selection modes
16
+ * - Supports free-solo mode for creating new items from text input
17
+ * - Handles initial values that aren't in the default options
18
+ * - Deduplicates options based on item keys
19
+ *
20
+ * @template TValue - The type of the option values
21
+ * @template Multiple - Boolean flag indicating if multiple selections are allowed
22
+ * @template DisableClearable - Boolean flag indicating if clearing the selection is disabled
23
+ * @template FreeSolo - Boolean flag indicating if free text input is allowed
24
+ * @template ChipComponent - The component type used for rendering chips in multiple selection mode
25
+ * @template TFieldValues - The type of the form values
26
+ * @template TName - The type of the field name
27
+ *
28
+ * @returns A React component for selecting object values
29
+ */
30
+ export const ObjectElementDisplay = ({ options, autocompleteProps, getItemKey, getItemLabel, getChipProps, stringToNewItem, transformValue, name, freeSolo, control, getOptionProps, ...props }) => {
31
+ /**
32
+ * Access to the form field controller
33
+ */
34
+ const { field } = useController({ name, control });
35
+ /**
36
+ * State for storing dynamically added options that aren't in the original options list
37
+ * Includes both default values and values added during freeSolo mode
38
+ */
39
+ const [newOptions, setNewOptions] = useState(() => {
40
+ if (!field.value)
41
+ return [];
42
+ // Convert field value to array for consistent handling
43
+ const fieldValues = Array.isArray(field.value) ? field.value : [field.value];
44
+ // Keep only object values that don't exist in the options array
45
+ return fieldValues.filter((value) => typeof value !== "string" &&
46
+ !options.some((option) => getItemKey(option) === getItemKey(value)));
47
+ });
48
+ /**
49
+ * Update newOptions when field.value changes
50
+ * This ensures that any new values added to the field after rendering
51
+ * are properly included in newOptions and displayed
52
+ */
53
+ useEffect(() => {
54
+ if (!field.value)
55
+ return;
56
+ const fieldValues = Array.isArray(field.value) ? field.value : [field.value];
57
+ const newFieldOptions = fieldValues.filter((value) => typeof value !== "string" &&
58
+ ![...options, ...newOptions].some((option) => getItemKey(option) === getItemKey(value)));
59
+ // Only update newOptions if there are new values to add
60
+ if (newFieldOptions.length > 0) {
61
+ setNewOptions((prevOptions) => [...prevOptions, ...newFieldOptions]);
62
+ }
63
+ }, [field.value, options, newOptions, getItemKey]);
64
+ /**
65
+ * Combined list of all available options (original + dynamically added)
66
+ */
67
+ const allOptions = useMemo(() => [...options, ...newOptions], [options, newOptions]);
68
+ return (_jsx(AutocompleteElementDisplay, { name: name, control: control, options: allOptions, ...props, autocompleteProps: {
69
+ /**
70
+ * Determines if two options should be considered equal
71
+ * Uses the getItemKey function to compare option values
72
+ */
73
+ isOptionEqualToValue: (o, v) => getItemKey(o) === getItemKey(v),
74
+ /**
75
+ * Filters options based on the input value
76
+ * Checks if the option key or label contains the input value (case-insensitive)
77
+ * For freeSolo mode, adds a special "Add [value]" option when there's no exact match
78
+ */
79
+ filterOptions: (options, { inputValue }) => {
80
+ if (!inputValue)
81
+ return options;
82
+ const searchValue = inputValue.toLowerCase();
83
+ // Filter options that match the input value (by key or label)
84
+ const filteredOptions = options.filter((option) => {
85
+ const key = getItemKey(option).toLowerCase();
86
+ const label = String(getItemLabel(option)).toLowerCase();
87
+ return key.includes(searchValue) || label.includes(searchValue);
88
+ });
89
+ // For freeSolo mode, add "Add [value]" option if no exact match exists
90
+ if (freeSolo && stringToNewItem && inputValue.length > 0) {
91
+ const hasExactMatch = filteredOptions.some((option) => String(getItemLabel(option)).toLowerCase() === searchValue);
92
+ if (!hasExactMatch) {
93
+ // Create a special option with a __isAddOption flag
94
+ const addOption = {
95
+ __isAddOption: true,
96
+ inputValue,
97
+ ...stringToNewItem(inputValue), // Include properties for type compatibility
98
+ };
99
+ return [addOption, ...filteredOptions];
100
+ }
101
+ }
102
+ return filteredOptions;
103
+ },
104
+ freeSolo, // Allowed to enter own string value
105
+ autoComplete: true,
106
+ autoHighlight: true, // The first option is highlighted by default
107
+ openOnFocus: true, // Opens the menu when tabbed into
108
+ /**
109
+ * Custom rendering for each option in the dropdown list
110
+ * Handles both regular options and special "Add" options in freeSolo mode
111
+ */
112
+ renderOption: (liProps, option, { selected }, ownerState) => {
113
+ const itemProps = merge(liProps, getOptionProps?.(option) ?? {});
114
+ // Handles the special "Add" option in freeSolo mode
115
+ if (ownerState?.freeSolo &&
116
+ typeof option === "object" &&
117
+ option !== null &&
118
+ "__isAddOption" in option) {
119
+ const inputValue = option.inputValue;
120
+ return (_createElement(ListItem, { ...itemProps, key: `${name}-add-option-${inputValue}` },
121
+ "Add: '",
122
+ inputValue,
123
+ "'"));
124
+ }
125
+ // Handle regular option
126
+ return (_createElement(ListItem, { ...itemProps, key: `${name}-option-${getItemKey(option)}` },
127
+ (props?.showCheckbox && ownerState?.multiple) && (_jsx(Checkbox, { sx: { marginRight: 1 }, checked: selected })),
128
+ typeof option === "string" ? option : getItemLabel(option)));
129
+ },
130
+ onChange: (event, value, reason, details) => {
131
+ /**
132
+ * Helper function to apply transformValue if provided, otherwise return the original value
133
+ */
134
+ const applyTransform = (val) => {
135
+ return transformValue && val !== null
136
+ ? field.onChange(transformValue(val))
137
+ : field.onChange(val);
138
+ };
139
+ /**
140
+ * Helper function to add a new item to newOptions if it doesn't exist already
141
+ */
142
+ const addToNewOptions = (item) => {
143
+ const itemKey = getItemKey(item);
144
+ const itemExists = [...options, ...newOptions].some((option) => getItemKey(option) === itemKey);
145
+ if (!itemExists) {
146
+ setNewOptions((prev) => [...prev, item]);
147
+ }
148
+ };
149
+ /**
150
+ * Helper function to extract input value from string or AddOption
151
+ */
152
+ const getInputValue = (item) => {
153
+ if (typeof item === "string" && item.length > 0) {
154
+ return item;
155
+ }
156
+ if (typeof item === "object" && item !== null && "__isAddOption" in item) {
157
+ return item.inputValue;
158
+ }
159
+ return null;
160
+ };
161
+ // Handle freeSolo mode with stringToNewItem function
162
+ if (freeSolo && stringToNewItem) {
163
+ // Handle special add option selection or string input
164
+ const inputValue = getInputValue(value);
165
+ if (inputValue) {
166
+ const newItem = stringToNewItem(inputValue);
167
+ if (props.multiple) {
168
+ // For multiple selection, add the new item to the current values
169
+ const currentValues = Array.isArray(field.value) ? field.value : [];
170
+ const newValues = [...currentValues, newItem];
171
+ applyTransform(newValues);
172
+ }
173
+ else {
174
+ // For single selection, just use the new item
175
+ applyTransform(newItem);
176
+ }
177
+ addToNewOptions(newItem);
178
+ return;
179
+ }
180
+ // Handle array values (multiple selection)
181
+ if (Array.isArray(value) && props.multiple) {
182
+ // Convert any string values to objects and handle special add options
183
+ const newValues = value?.map((item) => {
184
+ const inputVal = getInputValue(item);
185
+ return inputVal ? stringToNewItem(inputVal) : item;
186
+ }) ?? [];
187
+ applyTransform(newValues);
188
+ // Add any new items to newOptions
189
+ const allOptionsKeys = [...options, ...newOptions].map((option) => getItemKey(option));
190
+ const newItems = newValues.filter((item) => typeof item !== "string" && !allOptionsKeys.includes(getItemKey(item)));
191
+ if (newItems.length > 0) {
192
+ setNewOptions((prev) => [...prev, ...newItems]);
193
+ }
194
+ return;
195
+ }
196
+ }
197
+ // Default behavior for non-freeSolo cases
198
+ if (transformValue && value !== null) {
199
+ applyTransform(value);
200
+ }
201
+ else {
202
+ autocompleteProps?.onChange?.(event, value, reason, details);
203
+ }
204
+ },
205
+ /**
206
+ * Custom rendering for the selected value(s)
207
+ * For multiple selection, renders a Chip for each selected value
208
+ * For single selection, renders the value as text
209
+ * Uses getItemLabel to render the value labels
210
+ */
211
+ renderValue: (value, getItemProps, ownerState) => {
212
+ const typedValue = getAutocompleteTypedValue(value, ownerState);
213
+ // Handle array values (multiple selection)
214
+ if (Array.isArray(typedValue)) {
215
+ return typedValue.map((v, index) => {
216
+ // @ts-expect-error a key is returned, and the linter doesn't pick this up
217
+ const { key, ...chipProps } = getItemProps({ index });
218
+ // Get the label - use string directly or extract from object
219
+ const label = typeof v === "string" ? v : getItemLabel(v);
220
+ // Get additional chip props if available
221
+ const valueSpecificProps = typeof v !== "string" && getChipProps ? getChipProps({ value: v, index }) : {};
222
+ return (_jsx(Chip, { ...valueSpecificProps, ...chipProps, label: label }, `${name}-chip-${key}`));
223
+ });
224
+ }
225
+ // Handles single value - return string or extracted label
226
+ return isNonNullableString(typedValue)
227
+ ? typedValue
228
+ : typedValue
229
+ ? getItemLabel(typedValue)
230
+ : "";
231
+ },
232
+ ...autocompleteProps,
233
+ } }));
234
+ };
@@ -0,0 +1,18 @@
1
+ import { type TextFieldElementProps } from "react-hook-form-mui";
2
+ import { type FieldPath, type FieldValues } from "react-hook-form";
3
+ export type TextElementDisplayProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TextFieldElementProps<TFieldValues, TName> & Viewable;
4
+ /**
5
+ * A form component that displays a text field with view-only capabilities.
6
+ * Extends TextFieldElement with view-only functionality.
7
+ *
8
+ * @template TFieldValues - The type of the form values
9
+ * @template TName - The type of the field name
10
+ *
11
+ * @returns A React component for text input with view-only support
12
+ */
13
+ 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;
14
+ type Viewable = {
15
+ viewOnly?: boolean;
16
+ disableUnderline?: boolean;
17
+ };
18
+ export {};
@@ -0,0 +1,17 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { TextFieldElement } from "react-hook-form-mui";
3
+ import { useMemo } from "react";
4
+ import { getTextElementDisplayProps } from "../utils";
5
+ /**
6
+ * A form component that displays a text field with view-only capabilities.
7
+ * Extends TextFieldElement with view-only functionality.
8
+ *
9
+ * @template TFieldValues - The type of the form values
10
+ * @template TName - The type of the field name
11
+ *
12
+ * @returns A React component for text input with view-only support
13
+ */
14
+ export const TextElementDisplay = ({ viewOnly, disableUnderline, ...props }) => {
15
+ const adjustedProps = useMemo(() => getTextElementDisplayProps(props, viewOnly, disableUnderline), [props, viewOnly, disableUnderline]);
16
+ return _jsx(TextFieldElement, { ...adjustedProps });
17
+ };
@@ -1,3 +1,4 @@
1
1
  export * from "./AutocompleteElementDisplay";
2
- export * from "./ObjectDisplayElement";
2
+ export * from "./ObjectElementDisplay";
3
+ export * from "./TextElementDisplay";
3
4
  export * from "./ValidationElement";
@@ -1,3 +1,4 @@
1
1
  export * from "./AutocompleteElementDisplay";
2
- export * from "./ObjectDisplayElement";
2
+ export * from "./ObjectElementDisplay";
3
+ export * from "./TextElementDisplay";
3
4
  export * from "./ValidationElement";
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "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.ObjectDisplayElement=Q;exports.ValidationElement=W;exports.useFormError=P;exports.useOnMount=S;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),T=require("react-hook-form-mui"),h=require("react"),V=require("lodash"),M=require("@mui/material"),B=require("react-hook-form"),{merge:R}=V;function L(e,n){return n?.multiple,n?.freeSolo,e}const $=(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 z(e){return e!=null&&typeof e=="string"}const{merge:G}=V,P=({viewOnly:e=void 0,disableUnderline:n,textFieldProps:r,autocompleteProps:i,...E})=>{const f=h.useMemo(()=>G({readOnly:e,disableClearable:i?.disableClearable||e,disabled:e},i,e?{sx:{".MuiAutocomplete-tag":{opacity:"1 !important"}}}:{}),[i,e]),A=h.useMemo(()=>$(r,e,n),[r,e,n]);return y.jsx(T.AutocompleteElement,{autocompleteProps:f,textFieldProps:A,...E})},J=({options:e,autocompleteProps:n,getItemKey:r,getItemLabel:i,getChipProps:E,stringToNewItem:f,transformValue:A,name:C,freeSolo:F,control:q,getOptionProps:_,...O})=>{const{field:c}=T.useController({name:C,control:q}),[b,k]=h.useState(()=>c.value?(Array.isArray(c.value)?c.value:[c.value]).filter(t=>typeof t!="string"&&!e.some(l=>r(l)===r(t))):[]);h.useEffect(()=>{if(!c.value)return;const t=(Array.isArray(c.value)?c.value:[c.value]).filter(l=>typeof l!="string"&&![...e,...b].some(o=>r(o)===r(l)));t.length>0&&k(l=>[...l,...t])},[c.value,e,b,r]);const H=h.useMemo(()=>[...e,...b],[e,b]);return y.jsx(P,{name:C,control:q,options:H,...O,autocompleteProps:{isOptionEqualToValue:(a,t)=>r(a)===r(t),filterOptions:(a,{inputValue:t})=>{if(!t)return a;const l=t.toLowerCase(),o=a.filter(u=>{const d=r(u).toLowerCase(),j=String(i(u)).toLowerCase();return d.includes(l)||j.includes(l)});return F&&f&&t.length>0&&!o.some(d=>String(i(d)).toLowerCase()===l)?[{__isAddOption:!0,inputValue:t,...f(t)},...o]:o},freeSolo:F,autoComplete:!0,autoHighlight:!0,openOnFocus:!0,renderOption:(a,t,{selected:l},o)=>{const u=V.merge(a,_?.(t)??{});if(o?.freeSolo&&typeof t=="object"&&t!==null&&"__isAddOption"in t){const d=t.inputValue;return h.createElement(M.ListItem,{...u,key:`${C}-add-option-${d}`},"Add: '",d,"'")}return h.createElement(M.ListItem,{...u,key:`${C}-option-${r(t)}`},O?.showCheckbox&&o?.multiple&&y.jsx(M.Checkbox,{sx:{marginRight:1},checked:l}),typeof t=="string"?t:i(t))},onChange:(a,t,l,o)=>{const u=s=>A&&s!==null?c.onChange(A(s)):c.onChange(s),d=s=>{const p=r(s);[...e,...b].some(x=>r(x)===p)||k(x=>[...x,s])},j=s=>typeof s=="string"&&s.length>0?s:typeof s=="object"&&s!==null&&"__isAddOption"in s?s.inputValue:null;if(F&&f){const s=j(t);if(s){const p=f(s);if(O.multiple){const x=[...Array.isArray(c.value)?c.value:[],p];u(x)}else u(p);d(p);return}if(Array.isArray(t)&&O.multiple){const p=t?.map(m=>{const D=j(m);return D?f(D):m})??[];u(p);const g=[...e,...b].map(m=>r(m)),x=p.filter(m=>typeof m!="string"&&!g.includes(r(m)));x.length>0&&k(m=>[...m,...x]);return}}A&&t!==null?u(t):n?.onChange?.(a,t,l,o)},renderValue:(a,t,l)=>{const o=L(a,l);return Array.isArray(o)?o.map((u,d)=>{const{key:j,...s}=t({index:d}),p=typeof u=="string"?u:i(u),g=typeof u!="string"&&E?E({value:u,index:d}):{};return y.jsx(M.Chip,{...g,...s,label:p},`${C}-chip-${j}`)}):z(o)?o:o?i(o):""},...n}})},N=({viewOnly:e,disableUnderline:n,...r})=>{const i=h.useMemo(()=>$(r,e,n),[r,e,n]);return y.jsx(T.TextFieldElement,{...i})},{get:Q}=V;function S(e,n){const r=Q(e,n);return{error:!!r,helperText:r?.message||""}}function W(e){const n=h.useRef(!1);h.useEffect(()=>(n.current||(e(),n.current=!0),()=>{n.current=!0}),[])}const X=({name:e,rules:n,formControlProps:r={}})=>{const{register:i,formState:{errors:E}}=B.useFormContext(),{error:f,helperText:A}=S(E,e);return y.jsxs(M.FormControl,{error:f,...r,children:[y.jsx("input",{type:"hidden",...i(e,n)}),f&&y.jsx(M.FormHelperText,{children:A})]})};exports.AutocompleteElementDisplay=P;exports.ObjectElementDisplay=J;exports.TextElementDisplay=N;exports.ValidationElement=X;exports.useFormError=S;exports.useOnMount=W;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/components/AutocompleteElementDisplay.tsx","../src/utils.ts","../src/hooks/useFormError.ts","../src/hooks/useOnMount.ts","../src/components/ObjectDisplayElement.tsx","../src/components/ValidationElement.tsx"],"sourcesContent":["import { AutocompleteElement, type AutocompleteElementProps } from \"react-hook-form-mui\";\r\nimport { type ChipTypeMap } from \"@mui/material\";\r\nimport type { FieldPath, FieldValues } from \"react-hook-form\";\r\nimport { type ElementType, useMemo } from \"react\";\r\nimport lodash from \"lodash\";\r\nconst { merge } = lodash;\r\n\r\nexport type AutocompleteElementDisplayProps<\r\n TValue,\r\n Multiple extends boolean | undefined,\r\n DisableClearable extends boolean | undefined,\r\n FreeSolo extends boolean | undefined,\r\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = AutocompleteElementProps<\r\n TValue,\r\n Multiple,\r\n DisableClearable,\r\n FreeSolo,\r\n ChipComponent,\r\n TFieldValues,\r\n TName\r\n> &\r\n Viewable;\r\n\r\nexport const AutocompleteElementDisplay = <\r\n TValue,\r\n Multiple extends boolean | undefined,\r\n DisableClearable extends boolean | undefined,\r\n FreeSolo extends boolean | undefined,\r\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n>({\r\n viewOnly,\r\n disableUnderline,\r\n textFieldProps,\r\n autocompleteProps,\r\n ...props\r\n}: AutocompleteElementDisplayProps<\r\n TValue,\r\n Multiple,\r\n DisableClearable,\r\n FreeSolo,\r\n ChipComponent,\r\n TFieldValues,\r\n TName\r\n>) => {\r\n const autocompleteAdjustedProps: AutocompleteElementDisplayProps<\r\n TValue,\r\n Multiple,\r\n DisableClearable,\r\n FreeSolo,\r\n ChipComponent,\r\n TFieldValues,\r\n TName\r\n >['autocompleteProps'] = useMemo(\r\n () =>\r\n merge(\r\n {\r\n readOnly: viewOnly,\r\n disableClearable: viewOnly,\r\n disabled: viewOnly,\r\n slotProps: {\r\n input: { disableUnderline },\r\n chip: {\r\n disabled: false,\r\n },\r\n },\r\n },\r\n autocompleteProps,\r\n viewOnly\r\n ? {\r\n sx: {\r\n \".MuiAutocomplete-endAdornment\": {\r\n display: \"none\",\r\n },\r\n \".MuiAutocomplete-tag\": {\r\n opacity: \"1 !important\"\r\n },\r\n },\r\n }\r\n : {},\r\n ),\r\n [autocompleteProps, viewOnly, disableUnderline],\r\n );\r\n\r\n const textFieldAdjustedProps = useMemo(\r\n () => merge(viewOnly ? { variant: \"standard\" } : {}, textFieldProps),\r\n [viewOnly, textFieldProps],\r\n );\r\n\r\n return (\r\n <AutocompleteElement\r\n {...props}\r\n autocompleteProps={autocompleteAdjustedProps}\r\n textFieldProps={textFieldAdjustedProps}\r\n />\r\n );\r\n};\r\n\r\ntype Viewable = {\r\n viewOnly?: boolean;\r\n disableUnderline?: boolean;\r\n};\r\n","import type { AutocompleteOwnerState, AutocompleteRenderValue, ChipTypeMap } from \"@mui/material\";\r\nimport type { ElementType } from \"react\";\r\n\r\nexport function getAutocompleteRenderValue<\r\n TValue,\r\n Multiple extends boolean | undefined,\r\n DisableClearable extends boolean | undefined,\r\n FreeSolo extends boolean | undefined,\r\n ChipComponent extends ElementType = ChipTypeMap['defaultComponent']\r\n>(value: AutocompleteRenderValue<TValue, Multiple, FreeSolo>, ownerState: AutocompleteOwnerState<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent>) {\r\n if (ownerState.multiple) {\r\n if(ownerState?.freeSolo) return value as Array<TValue | string>;\r\n return value as TValue[];\r\n } else if (ownerState?.freeSolo) {\r\n return value as NonNullable<TValue | string>;\r\n }\r\n return value as NonNullable<TValue>;\r\n}","import { FieldError, FieldErrors, FieldValues } from 'react-hook-form';\r\nimport lodash from 'lodash';\r\nconst { get } = lodash;\r\n\r\n/**\r\n * A hook to get the error message for a field from react-hook-form\r\n * @param errors The errors object from react-hook-form\r\n * @param name The name of the field (supports dot notation for nested fields)\r\n * @returns An object with error and helperText properties\r\n */\r\nexport function useFormError<T extends FieldValues>(\r\n errors: FieldErrors<T>,\r\n name: string\r\n): { error: boolean; helperText: string } {\r\n // Get the error for the field, supporting nested paths with dot notation\r\n const fieldError = get(errors, name) as FieldError | undefined;\r\n\r\n // Return error state and helper text\r\n return {\r\n error: !!fieldError,\r\n helperText: fieldError?.message || '',\r\n };\r\n}\r\n","// src/hooks/useOnMount.ts\r\nimport { useEffect, useRef } from \"react\";\r\n\r\n/**\r\n * Runs a provided callback function once on the first component mount.\r\n *\r\n * @param callback - The function to run on first mount.\r\n */\r\nexport function useOnMount(callback: () => void): void {\r\n const hasMounted = useRef(false);\r\n\r\n useEffect(() => {\r\n if (!hasMounted.current) {\r\n callback();\r\n hasMounted.current = true;\r\n }\r\n\r\n // Cleanup to prevent callback logic from running during cleanup\r\n return () => {\r\n hasMounted.current = true;\r\n };\r\n \r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n}\r\n\r\n","import { type ElementType, ReactNode, useMemo, useState } from \"react\";\nimport { Checkbox, Chip, Typography, type ChipProps, type ChipTypeMap } from \"@mui/material\";\nimport type { FieldPath, FieldValues } from \"react-hook-form\";\nimport {\n AutocompleteElementDisplay,\n type AutocompleteElementDisplayProps,\n} from \"./AutocompleteElementDisplay\";\nimport { getAutocompleteRenderValue } from \"../utils\";\nimport { useController } from \"react-hook-form-mui\";\nimport { useOnMount } from \"../hooks\";\nimport lodash from \"lodash\";\nconst { omit } = lodash;\n\n/**\n * Extends DisplayAutocompleteProps with additional properties for handling object values.\n *\n * @template TValue - The type of the option values\n * @template Multiple - Boolean flag indicating if multiple selections are allowed\n * @template DisableClearable - Boolean flag indicating if clearing the selection is disabled\n * @template FreeSolo - Boolean flag indicating if free text input is allowed\n * @template ChipComponent - The component type used for rendering chips in multiple selection mode\n * @template TFieldValues - The type of the form values\n * @template TName - The type of the field name\n */\nexport type DisplayObjectCompleteProps<\n TValue,\n Multiple extends boolean | undefined,\n DisableClearable extends boolean | undefined,\n FreeSolo extends boolean | undefined,\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = AutocompleteElementDisplayProps<\n TValue,\n Multiple,\n DisableClearable,\n FreeSolo,\n ChipComponent,\n TFieldValues,\n TName\n> & {\n /**\n * Function to extract a unique key from an option value.\n * Used for option comparison and deduplication.\n *\n * @param value - The option value or null\n * @returns A unique string key for the value\n */\n getItemKey: (value: TValue | null) => string;\n\n /**\n * Function to generate a display label for an option value.\n * Can return any ReactNode for custom rendering.\n *\n * @param value - The option value or null\n * @returns A ReactNode to display as the option label\n */\n getItemLabel: (value: TValue | null) => ReactNode;\n\n /**\n * Function to convert a free text input string to a TValue object.\n * Required when freeSolo is true to create new items from text input.\n *\n * @param value - The string value entered by the user\n * @returns A new TValue object created from the string\n */\n stringToNewItem?: (value: string) => TValue;\n\n /**\n * Whether the input allows free text entry.\n * When true, users can enter values that are not in the options.\n */\n freeSolo?: FreeSolo;\n\n /**\n * Optional function that returns additional chip props based on the value.\n * This allows for customizing chip appearance and behavior based on the value it represents.\n *\n * @param value - The option value being rendered as a chip\n * @returns Additional props to apply to the Chip component\n */\n getChipProps?: (props: { value: TValue; index: number }) => Partial<ChipProps> | undefined;\n};\n\n/**\n * A form component that displays a searchable dropdown for selecting object values.\n * Extends AutocompleteDisplayElement with object-specific functionality.\n *\n * Features:\n * - Works with complex object values instead of just primitive types\n * - Supports both single and multiple selection modes\n * - Supports free-solo mode for creating new items from text input\n * - Handles initial values that aren't in the default options\n * - Deduplicates options based on item keys\n *\n * @template TValue - The type of the option values\n * @template Multiple - Boolean flag indicating if multiple selections are allowed\n * @template DisableClearable - Boolean flag indicating if clearing the selection is disabled\n * @template FreeSolo - Boolean flag indicating if free text input is allowed\n * @template ChipComponent - The component type used for rendering chips in multiple selection mode\n * @template TFieldValues - The type of the form values\n * @template TName - The type of the field name\n *\n * @returns A React component for selecting object values\n */\nexport const ObjectDisplayElement = <\n TValue,\n Multiple extends boolean | undefined,\n DisableClearable extends boolean | undefined,\n FreeSolo extends boolean | undefined,\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n options,\n autocompleteProps,\n getItemKey,\n getItemLabel,\n getChipProps,\n stringToNewItem,\n name,\n freeSolo,\n control,\n ...props\n}: DisplayObjectCompleteProps<\n TValue,\n Multiple,\n DisableClearable,\n FreeSolo,\n ChipComponent,\n TFieldValues,\n TName\n>) => {\n /**\n * Access to the form field controller\n */\n const { field } = useController({ name, control });\n\n /**\n * State for the current text input in free-solo mode\n */\n const [freeSoloValue, setFreeSoloValue] = useState(\"\");\n\n /**\n * State for storing dynamically added options that aren't in the original options list\n */\n const [newOptions, setNewOptions] = useState<TValue[]>([]);\n\n /**\n * On component mount, handle initial field values that aren't in the options\n * This is important for loading saved data that might reference items not in the current options\n */\n useOnMount(() => {\n if (!freeSolo || !field.value) return;\n\n // Handle both single and multiple selection modes\n const fieldValues: TValue[] = Array.isArray(field.value) ? field.value : [field.value];\n\n // Filter out values that are already in options\n const newFieldOptions = fieldValues.filter((value) => {\n // Skip string values as they're handled differently\n if (typeof value === \"string\") return false;\n\n // Check if this value exists in options\n return !options.some((option) => getItemKey(option) === getItemKey(value));\n });\n\n // Add new values to newOptions if any were found\n if (newFieldOptions.length > 0) setNewOptions(newFieldOptions);\n });\n\n /**\n * Creates a new item from the current free-solo text input\n * Returns undefined if:\n * - Free-solo mode is disabled\n * - No stringToNewItem converter is provided\n * - Input is empty\n * - An item with the same key already exists in options or newOptions\n *\n * @returns The new item created from the free-solo input, or undefined\n */\n const freeSoloItem = useMemo(() => {\n if (!freeSolo || !stringToNewItem || !freeSoloValue.length) return undefined;\n const item = stringToNewItem(freeSoloValue);\n const itemKey = getItemKey(item);\n if (options.some((option) => getItemKey(option) === itemKey)) return undefined;\n if (newOptions.some((option) => getItemKey(option) === itemKey)) return undefined;\n return item;\n }, [stringToNewItem, freeSoloValue, newOptions, freeSolo, options, getItemKey]);\n\n /**\n * Creates a combined and deduplicated list of all available options\n * Includes:\n * - Original options from props\n * - Dynamically added options from newOptions\n * - Current free-solo item if it exists\n *\n * @returns Array of all available options with duplicates removed\n */\n const allOptions = useMemo(() => {\n if (!freeSolo) return options;\n\n // Combine all options and deduplicate by key\n const combinedOptions = [...options, ...newOptions];\n if (freeSoloItem) combinedOptions.push(freeSoloItem);\n\n // Deduplicate using getItemKey\n const uniqueKeys = new Set();\n return combinedOptions.filter((option) => {\n const key = getItemKey(option);\n if (uniqueKeys.has(key)) return false;\n uniqueKeys.add(key);\n return true;\n });\n }, [options, newOptions, freeSolo, freeSoloItem, getItemKey]);\n\n // console.log({ allOptions });\n\n return (\n <AutocompleteElementDisplay\n name={name}\n control={control}\n options={allOptions}\n {...props}\n autocompleteProps={{\n /**\n * Determines if two options should be considered equal\n * Uses the getItemKey function to compare option values\n */\n isOptionEqualToValue: (o, v) => getItemKey(o) === getItemKey(v),\n\n /**\n * Filters options based on the input value\n * Checks if the option key contains the input value (case-insensitive)\n */\n filterOptions: (options, { inputValue }) =>\n options.filter((option) =>\n getItemKey(option).toLowerCase().includes(inputValue.toLowerCase()),\n ),\n freeSolo, // Allowed to enter own string value\n autoComplete: true,\n autoHighlight: true, // The first option is highlighted by default\n openOnFocus: true, // Opens the menu when tabbed into\n\n /**\n * Custom rendering for each option in the dropdown list\n * Displays a checkbox for multiple selection if showCheckbox is true\n * Uses getItemLabel to render the option label\n */\n renderOption: (liProps, option, { selected }) => (\n <li {...liProps} key={`${name}-option-${getItemKey(option)}`}>\n {props?.showCheckbox && <Checkbox sx={{ marginRight: 1 }} checked={selected} />}\n {typeof option === \"string\" ? option : getItemLabel(option)}\n </li>\n ),\n\n /**\n * Handles changes to the selected value(s)\n * In free-solo mode, adds the new item to newOptions when selected\n * Delegates to the original onChange handler if provided\n */\n onChange: (event, value, reason, details) => {\n if (freeSolo && freeSoloItem) {\n if (stringToNewItem == undefined) {\n throw new Error(\"Must implement stringToNewItem with freeSolo!\");\n }\n setNewOptions((prev) => [...prev, freeSoloItem]);\n setFreeSoloValue(\"\");\n }\n\n autocompleteProps?.onChange?.(event, value, reason, details);\n },\n\n /**\n * Handles changes to the input text\n * Updates freeSoloValue state with the current input\n * Delegates to the original onInputChange handler if provided\n */\n onInputChange: (event, value, reason) => {\n // event.preventDefault();\n setFreeSoloValue(value);\n\n // Call the original onInputChange if it exists\n autocompleteProps?.onInputChange?.(event, value, reason);\n },\n\n /**\n * Custom rendering for the selected value(s)\n * For multiple selection, renders a Chip for each selected value\n * For single selection, renders the value as text\n * Uses getItemLabel to render the value labels\n */\n renderValue: (value, getItemProps, ownerState) => {\n const typedValue = getAutocompleteRenderValue(value, ownerState);\n\n if (Array.isArray(typedValue)) {\n return typedValue.map((v, index) => {\n // @ts-expect-error a key is returned, and the linter doesn't pick this up\n const { key, ...chipProps } = getItemProps({ index });\n // const { key, ...rawChipProps } = getItemProps({ index });\n // const chipProps = omit(rawChipProps, \"onDelete\");\n\n const label = typeof v === \"string\" ? v : getItemLabel(v);\n\n // Get additional chip props based on the value if the function is provided\n const valueSpecificProps =\n typeof v !== \"string\" && getChipProps ? getChipProps({ value: v, index }) : {};\n return (\n <Chip\n key={`${name}-chip-${key}`}\n label={label}\n {...valueSpecificProps}\n {...chipProps}\n />\n );\n });\n }\n\n // @ts-expect-error a key is returned, and the linter doesn't pick this up\n // const { key, ...rawChipProps } = getItemProps({ index: 0 });\n const { key, ...rawChipProps } = getItemProps({ index: 0 });\n const itemProps = omit(rawChipProps, \"onDelete\");\n return (\n <Typography\n component={\"span\"}\n key={`${name}-value-${key}`}\n color={\"text.primary\"}\n {...(props?.viewOnly ? omit(itemProps, \"disabled\") : itemProps)}\n >\n {(typeof typedValue === \"string\") ? typedValue : getItemLabel(typedValue as NonNullable<TValue>)}\n </Typography>\n );\n },\n ...autocompleteProps,\n }}\n />\n );\n};\n","import type { JSX } from \"react\";\r\nimport { FormControl, FormHelperText } from \"@mui/material\";\r\nimport type { FormControlProps } from \"@mui/material\";\r\nimport { useFormContext, type RegisterOptions, type FieldValues, type Path } from \"react-hook-form\";\r\nimport { useFormError } from \"../hooks\";\r\n\r\n/**\r\n * Props for the RHFHiddenInput component\r\n */\r\nexport interface ValidationElementProps<TFieldValues extends FieldValues> {\r\n /**\r\n * Name of the field in the form\r\n */\r\n name: Path<TFieldValues>;\r\n /**\r\n * Optional validation rules\r\n */\r\n rules: RegisterOptions<TFieldValues>;\r\n /**\r\n * Props to pass to the FormControl component\r\n */\r\n formControlProps?: Omit<FormControlProps, \"error\">;\r\n}\r\n\r\nexport const ValidationElement = <TFieldValues extends FieldValues = FieldValues>({\r\n name,\r\n rules,\r\n formControlProps = {},\r\n}: ValidationElementProps<TFieldValues>): JSX.Element => {\r\n const {\r\n register,\r\n formState: { errors },\r\n } = useFormContext<TFieldValues>();\r\n\r\n const { error, helperText } = useFormError(errors, name);\r\n\r\n return (\r\n <FormControl error={error} {...formControlProps}>\r\n <input type=\"hidden\" {...register(name, rules)} />\r\n {error && <FormHelperText>{helperText}</FormHelperText>}\r\n </FormControl>\r\n );\r\n};\r\n"],"names":["merge","lodash","AutocompleteElementDisplay","viewOnly","disableUnderline","textFieldProps","autocompleteProps","props","autocompleteAdjustedProps","useMemo","textFieldAdjustedProps","jsx","AutocompleteElement","getAutocompleteRenderValue","value","ownerState","get","useFormError","errors","name","fieldError","useOnMount","callback","hasMounted","useRef","useEffect","omit","ObjectDisplayElement","options","getItemKey","getItemLabel","getChipProps","stringToNewItem","freeSolo","control","field","useController","freeSoloValue","setFreeSoloValue","useState","newOptions","setNewOptions","newFieldOptions","option","freeSoloItem","item","itemKey","allOptions","combinedOptions","uniqueKeys","key","v","inputValue","liProps","selected","createElement","Checkbox","event","reason","details","prev","getItemProps","typedValue","index","chipProps","label","valueSpecificProps","Chip","rawChipProps","itemProps","Typography","ValidationElement","rules","formControlProps","register","useFormContext","error","helperText","jsxs","FormControl","FormHelperText"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/utils.ts","../src/components/AutocompleteElementDisplay.tsx","../src/components/ObjectElementDisplay.tsx","../src/components/TextElementDisplay.tsx","../src/hooks/useFormError.ts","../src/hooks/useOnMount.ts","../src/components/ValidationElement.tsx"],"sourcesContent":["import type {\r\n AutocompleteOwnerState,\r\n AutocompleteRenderValue,\r\n AutocompleteValue,\r\n ChipTypeMap,\r\n TextFieldProps,\r\n} from \"@mui/material\";\r\nimport { ElementType } from \"react\";\r\n\r\nimport lodash from \"lodash\";\r\n\r\nconst { merge } = lodash;\r\n\r\nexport function getAutocompleteTypedValue<\r\n TValue,\r\n Multiple extends boolean | undefined,\r\n DisableClearable extends boolean | undefined,\r\n FreeSolo extends boolean | undefined,\r\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\r\n>(\r\n value:\r\n | AutocompleteRenderValue<TValue, Multiple, FreeSolo>\r\n | AutocompleteValue<TValue, Multiple, DisableClearable, FreeSolo>,\r\n ownerState?: AutocompleteOwnerState<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent>,\r\n) {\r\n if (ownerState?.multiple) {\r\n if (ownerState?.freeSolo) return value as Array<TValue | string>;\r\n return value as TValue[];\r\n } else if (ownerState?.freeSolo) {\r\n return value as NonNullable<TValue | string>;\r\n }\r\n return value as NonNullable<TValue>;\r\n}\r\n\r\n// Apply view-only properties directly to the TextFieldElement props\r\nexport const getTextElementDisplayProps = <PropType>(\r\n props: PropType,\r\n viewOnly = false,\r\n disableUnderline = false,\r\n) =>\r\n merge<PropType, Partial<TextFieldProps>>(\r\n props,\r\n viewOnly\r\n ? {\r\n disabled: true,\r\n variant: \"standard\",\r\n sx: {\r\n \"& .MuiAutocomplete-endAdornment\": {\r\n display: \"none\",\r\n },\r\n // Hide the underline without using slotProps.input.disableUnderline which clears out chips\r\n ...(disableUnderline && {\r\n \"& .MuiInput-underline:before\": { borderBottom: \"none\" },\r\n \"& .MuiInput-underline:after\": { borderBottom: \"none\" },\r\n \"& .MuiInput-underline:hover:not(.Mui-disabled):before\": { borderBottom: \"none\" },\r\n }),\r\n },\r\n }\r\n : {},\r\n ) as PropType;\r\n\r\nexport function isNonNullableString(value: any): value is NonNullable<string> {\r\n return value != null && typeof value === 'string';\r\n}","import { AutocompleteElement, type AutocompleteElementProps } from \"react-hook-form-mui\";\r\nimport { type ChipTypeMap } from \"@mui/material\";\r\nimport type { FieldPath, FieldValues } from \"react-hook-form\";\r\nimport { type ElementType, useMemo } from \"react\";\r\nimport lodash from \"lodash\";\r\nimport { getTextElementDisplayProps } from \"../utils\";\r\n\r\nconst { merge } = lodash;\r\n\r\nexport type AutocompleteElementDisplayProps<\r\n TValue,\r\n Multiple extends boolean | undefined,\r\n DisableClearable extends boolean | undefined,\r\n FreeSolo extends boolean | undefined,\r\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = AutocompleteElementProps<\r\n TValue,\r\n Multiple,\r\n DisableClearable,\r\n FreeSolo,\r\n ChipComponent,\r\n TFieldValues,\r\n TName\r\n> & {\r\n viewOnly?: boolean;\r\n disableUnderline?: boolean;\r\n}\r\n\r\nexport const AutocompleteElementDisplay = <\r\n TValue,\r\n Multiple extends boolean | undefined,\r\n DisableClearable extends boolean | undefined,\r\n FreeSolo extends boolean | undefined,\r\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\r\n TFieldValues extends FieldValues = FieldValues,\r\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n>({\r\n viewOnly = undefined as boolean | undefined,\r\n disableUnderline,\r\n textFieldProps,\r\n autocompleteProps,\r\n ...props\r\n}: AutocompleteElementDisplayProps<\r\n TValue,\r\n Multiple,\r\n DisableClearable,\r\n FreeSolo,\r\n ChipComponent,\r\n TFieldValues,\r\n TName\r\n>) => {\r\n const autocompleteAdjustedProps: AutocompleteElementDisplayProps<\r\n TValue,\r\n Multiple,\r\n DisableClearable,\r\n FreeSolo,\r\n ChipComponent,\r\n TFieldValues,\r\n TName\r\n >[\"autocompleteProps\"] = useMemo(\r\n () =>\r\n merge<\r\n AutocompleteElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName>[\"autocompleteProps\"],\r\n AutocompleteElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName>[\"autocompleteProps\"],\r\n AutocompleteElementDisplayProps<TValue, Multiple, DisableClearable, FreeSolo, ChipComponent, TFieldValues, TName>[\"autocompleteProps\"]\r\n >(\r\n {\r\n readOnly: viewOnly,\r\n disableClearable: autocompleteProps?.disableClearable || viewOnly as DisableClearable,\r\n disabled: viewOnly,\r\n\r\n },\r\n autocompleteProps,\r\n viewOnly\r\n ? {\r\n sx: {\r\n \".MuiAutocomplete-tag\": {\r\n opacity: \"1 !important\",\r\n },\r\n },\r\n }\r\n : {},\r\n ),\r\n [autocompleteProps, viewOnly],\r\n );\r\n\r\n const textFieldAdjustedProps= useMemo(\r\n () => getTextElementDisplayProps(textFieldProps, viewOnly, disableUnderline),\r\n [textFieldProps, viewOnly, disableUnderline],\r\n );\r\n\r\n return (\r\n <AutocompleteElement\r\n autocompleteProps={autocompleteAdjustedProps}\r\n textFieldProps={textFieldAdjustedProps}\r\n {...props}\r\n />\r\n );\r\n};\r\n\r\n\r\n","import { type ElementType, useMemo, useState, useEffect } from \"react\";\nimport {\n Checkbox,\n Chip,\n ListItem,\n type ChipProps,\n type ChipTypeMap,\n type ListItemProps,\n} from \"@mui/material\";\nimport type { FieldPath, FieldValues } from \"react-hook-form\";\nimport {\n AutocompleteElementDisplay,\n type AutocompleteElementDisplayProps,\n} from \"./AutocompleteElementDisplay\";\nimport { getAutocompleteTypedValue, isNonNullableString } from \"../utils\";\nimport { useController } from \"react-hook-form-mui\";\nimport { merge } from \"lodash\";\n\n/**\n * Interface for special \"add option\" objects used in freeSolo mode\n * These objects represent a new item that can be created from user input\n */\ninterface AddOptionType {\n __isAddOption: true;\n inputValue: string;\n\n [key: string]: any; // Allow for additional properties from stringToNewItem\n}\n\n/**\n * Extends AutocompleteElementDisplayProps with additional properties for handling object values.\n *\n * @template TValue - The type of the option values\n * @template Multiple - Boolean flag indicating if multiple selections are allowed\n * @template DisableClearable - Boolean flag indicating if clearing the selection is disabled\n * @template FreeSolo - Boolean flag indicating if free text input is allowed\n * @template ChipComponent - The component type used for rendering chips in multiple selection mode\n * @template TFieldValues - The type of the form values\n * @template TName - The type of the field name\n */\nexport type ObjectElementDisplayProps<\n TValue,\n Multiple extends boolean | undefined,\n DisableClearable extends boolean | undefined,\n FreeSolo extends boolean | undefined,\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = AutocompleteElementDisplayProps<\n TValue,\n Multiple,\n DisableClearable,\n FreeSolo,\n ChipComponent,\n TFieldValues,\n TName\n> & {\n /**\n * Function to extract a unique key from an option value.\n * Used for option comparison and deduplication.\n *\n * @param value - The option value or null\n * @returns A unique string key for the value\n */\n getItemKey: (value: TValue | null) => string;\n\n /**\n * Function to generate a display label for an option value.\n * Can return any ReactNode for custom rendering.\n *\n * @param value - The option value or null\n * @returns A string to display as the option label\n */\n getItemLabel: (value: TValue | null) => string;\n\n /**\n * Function to get additional props for an option list item.\n * Used for customizing the rendering of the option.\n *\n * @param value - The option value or null\n * @returns Additional props to apply to the list item\n */\n getOptionProps?: (value: TValue | null) => ListItemProps;\n\n /**\n * Function to convert a free text input string to a TValue object.\n * Required when freeSolo is true to create new items from text input.\n *\n * @param value - The string value entered by the user\n * @returns A new TValue object created from the string\n */\n stringToNewItem?: (value: string) => TValue;\n\n /**\n * Whether the input allows free text entry.\n * When true, users can enter values that are not in the options.\n */\n freeSolo?: FreeSolo;\n\n /**\n * Optional function that returns additional chip props based on the value.\n * This allows for customizing chip appearance and behavior based on the value it represents.\n *\n * @param value - The option value being rendered as a chip\n * @returns Additional props to apply to the Chip component\n */\n getChipProps?: (props: { value: TValue; index: number }) => Partial<ChipProps> | undefined;\n\n /**\n * Optional function to transform the value before it's updated in the form.\n * This allows for custom processing or enrichment of the selected value.\n *\n * @param value - The value that would normally be sent to the form\n * @returns The transformed value to be stored in the form\n */\n transformValue?: Multiple extends true\n ? (value: TValue[]) => TFieldValues\n : (value: TValue | null) => TFieldValues | null;\n};\n\n/**\n * A form component that displays a searchable dropdown for selecting object values.\n * Extends AutocompleteElementDisplay with object-specific functionality.\n *\n * Features:\n * - Works with complex object values instead of just primitive types\n * - Supports both single and multiple selection modes\n * - Supports free-solo mode for creating new items from text input\n * - Handles initial values that aren't in the default options\n * - Deduplicates options based on item keys\n *\n * @template TValue - The type of the option values\n * @template Multiple - Boolean flag indicating if multiple selections are allowed\n * @template DisableClearable - Boolean flag indicating if clearing the selection is disabled\n * @template FreeSolo - Boolean flag indicating if free text input is allowed\n * @template ChipComponent - The component type used for rendering chips in multiple selection mode\n * @template TFieldValues - The type of the form values\n * @template TName - The type of the field name\n *\n * @returns A React component for selecting object values\n */\nexport const ObjectElementDisplay = <\n TValue,\n Multiple extends boolean | undefined,\n DisableClearable extends boolean | undefined,\n FreeSolo extends boolean | undefined,\n ChipComponent extends ElementType = ChipTypeMap[\"defaultComponent\"],\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n options,\n autocompleteProps,\n getItemKey,\n getItemLabel,\n getChipProps,\n stringToNewItem,\n transformValue,\n name,\n freeSolo,\n control,\n getOptionProps,\n ...props\n}: ObjectElementDisplayProps<\n TValue,\n Multiple,\n DisableClearable,\n FreeSolo,\n ChipComponent,\n TFieldValues,\n TName\n>) => {\n /**\n * Access to the form field controller\n */\n const { field } = useController({ name, control });\n\n /**\n * State for storing dynamically added options that aren't in the original options list\n * Includes both default values and values added during freeSolo mode\n */\n const [newOptions, setNewOptions] = useState<TValue[]>(() => {\n if (!field.value) return [];\n\n // Convert field value to array for consistent handling\n const fieldValues: TValue[] = Array.isArray(field.value) ? field.value : [field.value];\n\n // Keep only object values that don't exist in the options array\n return fieldValues.filter(\n (value) =>\n typeof value !== \"string\" &&\n !options.some((option) => getItemKey(option) === getItemKey(value)),\n );\n });\n\n /**\n * Update newOptions when field.value changes\n * This ensures that any new values added to the field after rendering\n * are properly included in newOptions and displayed\n */\n useEffect(() => {\n if (!field.value) return;\n\n const fieldValues: TValue[] = Array.isArray(field.value) ? field.value : [field.value];\n const newFieldOptions = fieldValues.filter(\n (value) =>\n typeof value !== \"string\" &&\n ![...options, ...newOptions].some((option) => getItemKey(option) === getItemKey(value)),\n );\n\n // Only update newOptions if there are new values to add\n if (newFieldOptions.length > 0) {\n setNewOptions((prevOptions) => [...prevOptions, ...newFieldOptions]);\n }\n }, [field.value, options, newOptions, getItemKey]);\n\n /**\n * Combined list of all available options (original + dynamically added)\n */\n const allOptions = useMemo(() => [...options, ...newOptions], [options, newOptions]);\n\n return (\n <AutocompleteElementDisplay\n name={name}\n control={control}\n options={allOptions}\n {...props}\n autocompleteProps={{\n /**\n * Determines if two options should be considered equal\n * Uses the getItemKey function to compare option values\n */\n isOptionEqualToValue: (o, v) => getItemKey(o) === getItemKey(v),\n\n /**\n * Filters options based on the input value\n * Checks if the option key or label contains the input value (case-insensitive)\n * For freeSolo mode, adds a special \"Add [value]\" option when there's no exact match\n */\n filterOptions: (options, { inputValue }) => {\n if (!inputValue) return options;\n\n const searchValue = inputValue.toLowerCase();\n\n // Filter options that match the input value (by key or label)\n const filteredOptions = options.filter((option) => {\n const key = getItemKey(option).toLowerCase();\n const label = String(getItemLabel(option)).toLowerCase();\n return key.includes(searchValue) || label.includes(searchValue);\n });\n\n // For freeSolo mode, add \"Add [value]\" option if no exact match exists\n if (freeSolo && stringToNewItem && inputValue.length > 0) {\n const hasExactMatch = filteredOptions.some(\n (option) => String(getItemLabel(option)).toLowerCase() === searchValue,\n );\n\n if (!hasExactMatch) {\n // Create a special option with a __isAddOption flag\n const addOption: AddOptionType = {\n __isAddOption: true,\n inputValue,\n ...stringToNewItem(inputValue), // Include properties for type compatibility\n };\n\n return [addOption as unknown as TValue, ...filteredOptions];\n }\n }\n\n return filteredOptions;\n },\n freeSolo, // Allowed to enter own string value\n autoComplete: true,\n autoHighlight: true, // The first option is highlighted by default\n openOnFocus: true, // Opens the menu when tabbed into\n\n /**\n * Custom rendering for each option in the dropdown list\n * Handles both regular options and special \"Add\" options in freeSolo mode\n */\n renderOption: (liProps, option, { selected }, ownerState) => {\n const itemProps = merge(liProps, getOptionProps?.(option) ?? {});\n\n // Handles the special \"Add\" option in freeSolo mode\n if (\n ownerState?.freeSolo &&\n typeof option === \"object\" &&\n option !== null &&\n \"__isAddOption\" in option\n ) {\n const inputValue = (option as unknown as AddOptionType).inputValue;\n return (\n <ListItem {...itemProps} key={`${name}-add-option-${inputValue}`}>\n Add: '{inputValue}'\n </ListItem>\n );\n }\n\n // Handle regular option\n return (\n <ListItem {...itemProps} key={`${name}-option-${getItemKey(option)}`}>\n {(props?.showCheckbox && ownerState?.multiple) && (\n <Checkbox sx={{ marginRight: 1 }} checked={selected} />\n )}\n {typeof option === \"string\" ? option : getItemLabel(option)}\n </ListItem>\n );\n },\n\n onChange: (event, value, reason, details) => {\n /**\n * Helper function to apply transformValue if provided, otherwise return the original value\n */\n const applyTransform = (val: any) => {\n return transformValue && val !== null\n ? field.onChange(transformValue(val))\n : field.onChange(val);\n };\n\n /**\n * Helper function to add a new item to newOptions if it doesn't exist already\n */\n const addToNewOptions = (item: TValue) => {\n const itemKey = getItemKey(item);\n const itemExists = [...options, ...newOptions].some(\n (option) => getItemKey(option) === itemKey,\n );\n\n if (!itemExists) {\n setNewOptions((prev) => [...prev, item]);\n }\n };\n\n /**\n * Helper function to extract input value from string or AddOption\n */\n const getInputValue = (item: any): string | null => {\n if (typeof item === \"string\" && item.length > 0) {\n return item;\n }\n if (typeof item === \"object\" && item !== null && \"__isAddOption\" in item) {\n return (item as unknown as AddOptionType).inputValue;\n }\n return null;\n };\n\n // Handle freeSolo mode with stringToNewItem function\n if (freeSolo && stringToNewItem) {\n // Handle special add option selection or string input\n const inputValue = getInputValue(value);\n\n if (inputValue) {\n const newItem = stringToNewItem(inputValue);\n\n if (props.multiple) {\n // For multiple selection, add the new item to the current values\n const currentValues = Array.isArray(field.value) ? field.value : [];\n const newValues = [...currentValues, newItem];\n applyTransform(newValues);\n } else {\n // For single selection, just use the new item\n applyTransform(newItem);\n }\n\n addToNewOptions(newItem);\n return;\n }\n\n // Handle array values (multiple selection)\n if (Array.isArray(value) && props.multiple) {\n // Convert any string values to objects and handle special add options\n const newValues =\n value?.map((item) => {\n const inputVal = getInputValue(item);\n return inputVal ? stringToNewItem(inputVal) : item;\n }) ?? [];\n\n applyTransform(newValues);\n\n // Add any new items to newOptions\n const allOptionsKeys = [...options, ...newOptions].map((option) =>\n getItemKey(option),\n );\n const newItems = newValues.filter(\n (item) => typeof item !== \"string\" && !allOptionsKeys.includes(getItemKey(item)),\n );\n\n if (newItems.length > 0) {\n setNewOptions((prev) => [...prev, ...newItems]);\n }\n return;\n }\n }\n\n // Default behavior for non-freeSolo cases\n if (transformValue && value !== null) {\n applyTransform(value as TValue | TValue[]);\n } else {\n autocompleteProps?.onChange?.(event, value, reason, details);\n }\n },\n\n /**\n * Custom rendering for the selected value(s)\n * For multiple selection, renders a Chip for each selected value\n * For single selection, renders the value as text\n * Uses getItemLabel to render the value labels\n */\n renderValue: (value, getItemProps, ownerState) => {\n const typedValue = getAutocompleteTypedValue(value, ownerState);\n\n // Handle array values (multiple selection)\n if (Array.isArray(typedValue)) {\n return typedValue.map((v, index) => {\n // @ts-expect-error a key is returned, and the linter doesn't pick this up\n const { key, ...chipProps } = getItemProps({ index });\n\n // Get the label - use string directly or extract from object\n const label = typeof v === \"string\" ? v : getItemLabel(v);\n\n // Get additional chip props if available\n const valueSpecificProps =\n typeof v !== \"string\" && getChipProps ? getChipProps({ value: v, index }) : {};\n\n return (\n <Chip\n key={`${name}-chip-${key}`}\n {...valueSpecificProps}\n {...chipProps}\n label={label}\n />\n );\n });\n }\n\n // Handles single value - return string or extracted label\n return isNonNullableString(typedValue)\n ? typedValue\n : typedValue\n ? getItemLabel(typedValue as NonNullable<TValue>)\n : \"\";\n },\n ...autocompleteProps,\n }}\n />\n );\n};\n","import { TextFieldElement, type TextFieldElementProps } from \"react-hook-form-mui\";\nimport { type FieldPath, type FieldValues } from \"react-hook-form\";\nimport { useMemo } from \"react\";\nimport { getTextElementDisplayProps } from \"../utils\";\n\nexport type TextElementDisplayProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = TextFieldElementProps<TFieldValues, TName> & Viewable;\n\n/**\n * A form component that displays a text field with view-only capabilities.\n * Extends TextFieldElement with view-only functionality.\n *\n * @template TFieldValues - The type of the form values\n * @template TName - The type of the field name\n *\n * @returns A React component for text input with view-only support\n */\nexport const TextElementDisplay = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n viewOnly,\n disableUnderline,\n ...props\n}: TextElementDisplayProps<TFieldValues, TName>) => {\n\n const adjustedProps = useMemo(\n () => getTextElementDisplayProps(props, viewOnly, disableUnderline),\n [props, viewOnly, disableUnderline],\n );\n\n return <TextFieldElement {...adjustedProps} />;\n};\n\ntype Viewable = {\n viewOnly?: boolean;\n disableUnderline?: boolean;\n};\n","import { FieldError, FieldErrors, FieldValues } from 'react-hook-form';\r\nimport lodash from 'lodash';\r\nconst { get } = lodash;\r\n\r\n/**\r\n * A hook to get the error message for a field from react-hook-form\r\n * @param errors The errors object from react-hook-form\r\n * @param name The name of the field (supports dot notation for nested fields)\r\n * @returns An object with error and helperText properties\r\n */\r\nexport function useFormError<T extends FieldValues>(\r\n errors: FieldErrors<T>,\r\n name: string\r\n): { error: boolean; helperText: string } {\r\n // Get the error for the field, supporting nested paths with dot notation\r\n const fieldError = get(errors, name) as FieldError | undefined;\r\n\r\n // Return error state and helper text\r\n return {\r\n error: !!fieldError,\r\n helperText: fieldError?.message || '',\r\n };\r\n}\r\n","// src/hooks/useOnMount.ts\r\nimport { useEffect, useRef } from \"react\";\r\n\r\n/**\r\n * Runs a provided callback function once on the first component mount.\r\n *\r\n * @param callback - The function to run on first mount.\r\n */\r\nexport function useOnMount(callback: () => void): void {\r\n const hasMounted = useRef(false);\r\n\r\n useEffect(() => {\r\n if (!hasMounted.current) {\r\n callback();\r\n hasMounted.current = true;\r\n }\r\n\r\n // Cleanup to prevent callback logic from running during cleanup\r\n return () => {\r\n hasMounted.current = true;\r\n };\r\n \r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n}\r\n\r\n","import type { JSX } from \"react\";\r\nimport { FormControl, FormHelperText } from \"@mui/material\";\r\nimport type { FormControlProps } from \"@mui/material\";\r\nimport { useFormContext, type RegisterOptions, type FieldValues, type Path } from \"react-hook-form\";\r\nimport { useFormError } from \"../hooks\";\r\n\r\n/**\r\n * Props for the RHFHiddenInput component\r\n */\r\nexport interface ValidationElementProps<TFieldValues extends FieldValues> {\r\n /**\r\n * Name of the field in the form\r\n */\r\n name: Path<TFieldValues>;\r\n /**\r\n * Optional validation rules\r\n */\r\n rules: RegisterOptions<TFieldValues>;\r\n /**\r\n * Props to pass to the FormControl component\r\n */\r\n formControlProps?: Omit<FormControlProps, \"error\">;\r\n}\r\n\r\nexport const ValidationElement = <TFieldValues extends FieldValues = FieldValues>({\r\n name,\r\n rules,\r\n formControlProps = {},\r\n}: ValidationElementProps<TFieldValues>): JSX.Element => {\r\n const {\r\n register,\r\n formState: { errors },\r\n } = useFormContext<TFieldValues>();\r\n\r\n const { error, helperText } = useFormError(errors, name);\r\n\r\n return (\r\n <FormControl error={error} {...formControlProps}>\r\n <input type=\"hidden\" {...register(name, rules)} />\r\n {error && <FormHelperText>{helperText}</FormHelperText>}\r\n </FormControl>\r\n );\r\n};\r\n"],"names":["merge","lodash","getAutocompleteTypedValue","value","ownerState","getTextElementDisplayProps","props","viewOnly","disableUnderline","isNonNullableString","AutocompleteElementDisplay","textFieldProps","autocompleteProps","autocompleteAdjustedProps","useMemo","textFieldAdjustedProps","jsx","AutocompleteElement","ObjectElementDisplay","options","getItemKey","getItemLabel","getChipProps","stringToNewItem","transformValue","name","freeSolo","control","getOptionProps","field","useController","newOptions","setNewOptions","useState","option","useEffect","newFieldOptions","prevOptions","allOptions","o","v","inputValue","searchValue","filteredOptions","key","label","liProps","selected","itemProps","createElement","ListItem","Checkbox","event","reason","details","applyTransform","val","addToNewOptions","item","itemKey","prev","getInputValue","newItem","newValues","inputVal","allOptionsKeys","newItems","getItemProps","typedValue","index","chipProps","valueSpecificProps","Chip","TextElementDisplay","adjustedProps","TextFieldElement","get","useFormError","errors","fieldError","useOnMount","callback","hasMounted","useRef","ValidationElement","rules","formControlProps","register","useFormContext","error","helperText","jsxs","FormControl","FormHelperText"],"mappings":"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"}