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

package/dist/index.cjs.map

@@ -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/ObjectElementDisplay.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 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 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 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  name,\n  freeSolo,\n  control,\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 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\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 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","ObjectElementDisplay","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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"}
+{"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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"}

package/dist/index.js

@@ -1,126 +1,129 @@
-import { jsx as p, jsxs as H } from "react/jsx-runtime";
-import { AutocompleteElement as S, useController as z } from "react-hook-form-mui";
-import { useMemo as x, useRef as B, useEffect as G, useState as $, createElement as J } from "react";
-import V from "lodash";
-import { Chip as L, Typography as Q, Checkbox as W, FormControl as X, FormHelperText as Y } from "@mui/material";
-import { useFormContext as Z } from "react-hook-form";
-const { merge: g } = V, _ = ({
-  viewOnly: r,
-  disableUnderline: o,
+import { jsx as x, jsxs as H } from "react/jsx-runtime";
+import { AutocompleteElement as R, useController as q, TextFieldElement as L } from "react-hook-form-mui";
+import { useMemo as O, useState as z, useEffect as P, createElement as T, useRef as G } from "react";
+import F, { merge as J } from "lodash";
+import { Chip as N, ListItem as _, Checkbox as Q, FormControl as W, FormHelperText as X } from "@mui/material";
+import { useFormContext as Y } from "react-hook-form";
+const { merge: Z } = F;
+function w(e, n) {
+  return n?.multiple, n?.freeSolo, e;
+}
+const D = (e, n = !1, t = !1) => Z(
+  e,
+  n ? {
+    disabled: !0,
+    variant: "standard",
+    sx: {
+      "& .MuiAutocomplete-endAdornment": {
+        display: "none"
+      },
+      // Hide the underline without using slotProps.input.disableUnderline which clears out chips
+      ...t && {
+        "& .MuiInput-underline:before": { borderBottom: "none" },
+        "& .MuiInput-underline:after": { borderBottom: "none" },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before": { borderBottom: "none" }
+      }
+    }
+  } : {}
+);
+function U(e) {
+  return e != null && typeof e == "string";
+}
+const { merge: v } = F, K = ({
+  viewOnly: e = void 0,
+  disableUnderline: n,
   textFieldProps: t,
-  autocompleteProps: c,
-  ...f
+  autocompleteProps: i,
+  ...y
 }) => {
-  const u = x(
-    () => g(
+  const d = O(
+    () => v(
       {
-        readOnly: r,
-        disableClearable: r,
-        disabled: r,
-        slotProps: {
-          input: { disableUnderline: o },
-          chip: {
-            disabled: !1
-          }
-        }
+        readOnly: e,
+        disableClearable: i?.disableClearable || e,
+        disabled: e
       },
-      c,
-      r ? {
+      i,
+      e ? {
         sx: {
-          ".MuiAutocomplete-endAdornment": {
-            display: "none"
-          },
           ".MuiAutocomplete-tag": {
             opacity: "1 !important"
           }
         }
       } : {}
     ),
-    [c, r, o]
-  ), l = x(
-    () => g(r ? { variant: "standard" } : {}, t),
-    [r, t]
+    [i, e]
+  ), A = O(
+    () => D(t, e, n),
+    [t, e, n]
   );
-  return /* @__PURE__ */ p(
-    S,
+  return /* @__PURE__ */ x(
+    R,
     {
-      ...f,
-      autocompleteProps: u,
-      textFieldProps: l
+      autocompleteProps: d,
+      textFieldProps: A,
+      ...y
     }
   );
-};
-function N(r, o) {
-  return o.multiple, o?.freeSolo, r;
-}
-const { get: U } = V;
-function v(r, o) {
-  const t = U(r, o);
-  return {
-    error: !!t,
-    helperText: t?.message || ""
-  };
-}
-function K(r) {
-  const o = B(!1);
-  G(() => (o.current || (r(), o.current = !0), () => {
-    o.current = !0;
-  }), []);
-}
-const { omit: j } = V, sr = ({
-  options: r,
-  autocompleteProps: o,
+}, le = ({
+  options: e,
+  autocompleteProps: n,
   getItemKey: t,
-  getItemLabel: c,
-  getChipProps: f,
-  stringToNewItem: u,
-  name: l,
-  freeSolo: a,
-  control: k,
-  ...A
+  getItemLabel: i,
+  getChipProps: y,
+  stringToNewItem: d,
+  transformValue: A,
+  name: b,
+  freeSolo: M,
+  control: $,
+  getOptionProps: S,
+  ...V
 }) => {
-  const { field: m } = z({ name: l, control: k }), [y, F] = $(""), [C, b] = $([]);
-  K(() => {
-    if (!a || !m.value) return;
-    const e = (Array.isArray(m.value) ? m.value : [m.value]).filter((s) => typeof s == "string" ? !1 : !r.some((i) => t(i) === t(s)));
-    e.length > 0 && b(e);
-  });
-  const d = x(() => {
-    if (!a || !u || !y.length) return;
-    const n = u(y), e = t(n);
-    if (!r.some((s) => t(s) === e) && !C.some((s) => t(s) === e))
-      return n;
-  }, [u, y, C, a, r, t]), P = x(() => {
-    if (!a) return r;
-    const n = [...r, ...C];
-    d && n.push(d);
-    const e = /* @__PURE__ */ new Set();
-    return n.filter((s) => {
-      const i = t(s);
-      return e.has(i) ? !1 : (e.add(i), !0);
-    });
-  }, [r, C, a, d, t]);
-  return /* @__PURE__ */ p(
-    _,
+  const { field: c } = q({ name: b, control: $ }), [C, j] = z(() => c.value ? (Array.isArray(c.value) ? c.value : [c.value]).filter(
+    (r) => typeof r != "string" && !e.some((l) => t(l) === t(r))
+  ) : []);
+  P(() => {
+    if (!c.value) return;
+    const r = (Array.isArray(c.value) ? c.value : [c.value]).filter(
+      (l) => typeof l != "string" && ![...e, ...C].some((s) => t(s) === t(l))
+    );
+    r.length > 0 && j((l) => [...l, ...r]);
+  }, [c.value, e, C, t]);
+  const B = O(() => [...e, ...C], [e, C]);
+  return /* @__PURE__ */ x(
+    K,
     {
-      name: l,
-      control: k,
-      options: P,
-      ...A,
+      name: b,
+      control: $,
+      options: B,
+      ...V,
       autocompleteProps: {
         /**
          * Determines if two options should be considered equal
          * Uses the getItemKey function to compare option values
          */
-        isOptionEqualToValue: (n, e) => t(n) === t(e),
+        isOptionEqualToValue: (a, r) => t(a) === t(r),
         /**
          * 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: (n, { inputValue: e }) => n.filter(
-          (s) => t(s).toLowerCase().includes(e.toLowerCase())
-        ),
-        freeSolo: a,
+        filterOptions: (a, { inputValue: r }) => {
+          if (!r) return a;
+          const l = r.toLowerCase(), s = a.filter((u) => {
+            const f = t(u).toLowerCase(), E = String(i(u)).toLowerCase();
+            return f.includes(l) || E.includes(l);
+          });
+          return M && d && r.length > 0 && !s.some(
+            (f) => String(i(f)).toLowerCase() === l
+          ) ? [{
+            __isAddOption: !0,
+            inputValue: r,
+            ...d(r)
+            // Include properties for type compatibility
+          }, ...s] : s;
+        },
+        freeSolo: M,
         // Allowed to enter own string value
         autoComplete: !0,
         autoHighlight: !0,
@@ -129,30 +132,51 @@ const { omit: j } = V, sr = ({
         // 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
+         * Handles both regular options and special "Add" options in freeSolo mode
          */
-        renderOption: (n, e, { selected: s }) => /* @__PURE__ */ J("li", { ...n, key: `${l}-option-${t(e)}` }, A?.showCheckbox && /* @__PURE__ */ p(W, { sx: { marginRight: 1 }, checked: s }), typeof e == "string" ? e : c(e)),
-        /**
-         * 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
-         */
-        onChange: (n, e, s, i) => {
-          if (a && d) {
-            if (u == null)
-              throw new Error("Must implement stringToNewItem with freeSolo!");
-            b((E) => [...E, d]), F("");
+        renderOption: (a, r, { selected: l }, s) => {
+          const u = J(a, S?.(r) ?? {});
+          if (s?.freeSolo && typeof r == "object" && r !== null && "__isAddOption" in r) {
+            const f = r.inputValue;
+            return /* @__PURE__ */ T(_, { ...u, key: `${b}-add-option-${f}` }, "Add: '", f, "'");
           }
-          o?.onChange?.(n, e, s, i);
+          return /* @__PURE__ */ T(_, { ...u, key: `${b}-option-${t(r)}` }, V?.showCheckbox && s?.multiple && /* @__PURE__ */ x(Q, { sx: { marginRight: 1 }, checked: l }), typeof r == "string" ? r : i(r));
         },
-        /**
-         * Handles changes to the input text
-         * Updates freeSoloValue state with the current input
-         * Delegates to the original onInputChange handler if provided
-         */
-        onInputChange: (n, e, s) => {
-          F(e), o?.onInputChange?.(n, e, s);
+        onChange: (a, r, l, s) => {
+          const u = (o) => A && o !== null ? c.onChange(A(o)) : c.onChange(o), f = (o) => {
+            const p = t(o);
+            [...e, ...C].some(
+              (m) => t(m) === p
+            ) || j((m) => [...m, o]);
+          }, E = (o) => typeof o == "string" && o.length > 0 ? o : typeof o == "object" && o !== null && "__isAddOption" in o ? o.inputValue : null;
+          if (M && d) {
+            const o = E(r);
+            if (o) {
+              const p = d(o);
+              if (V.multiple) {
+                const m = [...Array.isArray(c.value) ? c.value : [], p];
+                u(m);
+              } else
+                u(p);
+              f(p);
+              return;
+            }
+            if (Array.isArray(r) && V.multiple) {
+              const p = r?.map((h) => {
+                const k = E(h);
+                return k ? d(k) : h;
+              }) ?? [];
+              u(p);
+              const g = [...e, ...C].map(
+                (h) => t(h)
+              ), m = p.filter(
+                (h) => typeof h != "string" && !g.includes(t(h))
+              );
+              m.length > 0 && j((h) => [...h, ...m]);
+              return;
+            }
+          }
+          A && r !== null ? u(r) : n?.onChange?.(a, r, l, s);
         },
         /**
          * Custom rendering for the selected value(s)
@@ -160,56 +184,69 @@ const { omit: j } = V, sr = ({
          * For single selection, renders the value as text
          * Uses getItemLabel to render the value labels
          */
-        renderValue: (n, e, s) => {
-          const i = N(n, s);
-          if (Array.isArray(i))
-            return i.map((h, M) => {
-              const { key: R, ...T } = e({ index: M }), q = typeof h == "string" ? h : c(h), w = typeof h != "string" && f ? f({ value: h, index: M }) : {};
-              return /* @__PURE__ */ p(
-                L,
-                {
-                  label: q,
-                  ...w,
-                  ...T
-                },
-                `${l}-chip-${R}`
-              );
-            });
-          const { key: E, ...D } = e({ index: 0 }), O = j(D, "onDelete");
-          return /* @__PURE__ */ p(
-            Q,
-            {
-              component: "span",
-              color: "text.primary",
-              ...A?.viewOnly ? j(O, "disabled") : O,
-              children: typeof i == "string" ? i : c(i)
-            },
-            `${l}-value-${E}`
-          );
+        renderValue: (a, r, l) => {
+          const s = w(a, l);
+          return Array.isArray(s) ? s.map((u, f) => {
+            const { key: E, ...o } = r({ index: f }), p = typeof u == "string" ? u : i(u), g = typeof u != "string" && y ? y({ value: u, index: f }) : {};
+            return /* @__PURE__ */ x(
+              N,
+              {
+                ...g,
+                ...o,
+                label: p
+              },
+              `${b}-chip-${E}`
+            );
+          }) : U(s) ? s : s ? i(s) : "";
         },
-        ...o
+        ...n
       }
     }
   );
-}, ir = ({
-  name: r,
-  rules: o,
+}, ie = ({
+  viewOnly: e,
+  disableUnderline: n,
+  ...t
+}) => {
+  const i = O(
+    () => D(t, e, n),
+    [t, e, n]
+  );
+  return /* @__PURE__ */ x(L, { ...i });
+}, { get: I } = F;
+function ee(e, n) {
+  const t = I(e, n);
+  return {
+    error: !!t,
+    helperText: t?.message || ""
+  };
+}
+function ce(e) {
+  const n = G(!1);
+  P(() => (n.current || (e(), n.current = !0), () => {
+    n.current = !0;
+  }), []);
+}
+const ae = ({
+  name: e,
+  rules: n,
   formControlProps: t = {}
 }) => {
   const {
-    register: c,
-    formState: { errors: f }
-  } = Z(), { error: u, helperText: l } = v(f, r);
-  return /* @__PURE__ */ H(X, { error: u, ...t, children: [
-    /* @__PURE__ */ p("input", { type: "hidden", ...c(r, o) }),
-    u && /* @__PURE__ */ p(Y, { children: l })
+    register: i,
+    formState: { errors: y }
+  } = Y(), { error: d, helperText: A } = ee(y, e);
+  return /* @__PURE__ */ H(W, { error: d, ...t, children: [
+    /* @__PURE__ */ x("input", { type: "hidden", ...i(e, n) }),
+    d && /* @__PURE__ */ x(X, { children: A })
   ] });
 };
 export {
-  _ as AutocompleteElementDisplay,
-  sr as ObjectElementDisplay,
-  ir as ValidationElement,
-  v as useFormError,
-  K as useOnMount
+  K as AutocompleteElementDisplay,
+  le as ObjectElementDisplay,
+  ie as TextElementDisplay,
+  ae as ValidationElement,
+  ee as useFormError,
+  ce as useOnMount
 };
 //# sourceMappingURL=index.js.map