@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.js

@@ -0,0 +1,322 @@
+import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useVireoFormContext } from "../../../../../capabilities/forms/contexts/VireoFormContext/VireoFormContext.js";
+import { useVireoFieldContext } from "../../../../../capabilities/forms/contexts/VireoFormHookContexts/VireoFormHookContexts.js";
+import { formatFirstVireoFormError, shouldDisplayVireoFormError } from "../../../../../capabilities/forms/utils/vireoFormErrors.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { Autocomplete, createFilterOptions, unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import { useStore } from "@tanstack/react-form";
+import React from "react";
+import { getVireoFormFreeSoloAutocompleteFieldUtilityClass, } from "./VireoFormFreeSoloAutocompleteField.classes.js";
+import { VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME, } from "./VireoFormFreeSoloAutocompleteField.identity.js";
+import { VireoFormFreeSoloAutocompleteFieldClearButton, VireoFormFreeSoloAutocompleteFieldClearIcon, VireoFormFreeSoloAutocompleteFieldFilledInput, VireoFormFreeSoloAutocompleteFieldFormHelperText, VireoFormFreeSoloAutocompleteFieldGroup, VireoFormFreeSoloAutocompleteFieldGroupLabel, VireoFormFreeSoloAutocompleteFieldGroupList, VireoFormFreeSoloAutocompleteFieldInputLabel, VireoFormFreeSoloAutocompleteFieldListbox, VireoFormFreeSoloAutocompleteFieldLoadingIndicator, VireoFormFreeSoloAutocompleteFieldLoadingText, VireoFormFreeSoloAutocompleteFieldNoOptionsText, VireoFormFreeSoloAutocompleteFieldOption, VireoFormFreeSoloAutocompleteFieldOutlinedInput, VireoFormFreeSoloAutocompleteFieldPaper, VireoFormFreeSoloAutocompleteFieldPopper, VireoFormFreeSoloAutocompleteFieldPopupButton, VireoFormFreeSoloAutocompleteFieldPopupIcon, VireoFormFreeSoloAutocompleteFieldRoot, VireoFormFreeSoloAutocompleteFieldStandardInput, VireoFormFreeSoloAutocompleteFieldTextField, } from "./VireoFormFreeSoloAutocompleteField.styled.js";
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: [
+            "root",
+            ownerState.disabled && "disabled",
+            ownerState.readOnly && "readOnly",
+            ownerState.required && "required",
+            ownerState.error && "error",
+            ownerState.focused && "focused",
+            ownerState.dirty && "dirty",
+            ownerState.touched && "touched",
+            ownerState.submitting && "submitting",
+            ownerState.validating && "validating",
+            ownerState.open && "open",
+            ownerState.loading && "loading",
+            ownerState.hasValue && "hasValue",
+            ownerState.hasInputValue && "hasInputValue",
+        ],
+        textField: ["textField"],
+        inputLabel: ["inputLabel"],
+        input: ["input"],
+        htmlInput: ["htmlInput"],
+        loadingIndicator: ["loadingIndicator"],
+        clearButton: ["clearButton"],
+        clearIcon: ["clearIcon"],
+        popupButton: ["popupButton"],
+        popupIcon: ["popupIcon"],
+        formHelperText: ["formHelperText"],
+        popper: ["popper"],
+        paper: ["paper"],
+        loadingText: ["loadingText"],
+        noOptionsText: ["noOptionsText"],
+        listbox: ["listbox"],
+        option: ["option"],
+        group: ["group"],
+        groupLabel: ["groupLabel"],
+        groupList: ["groupList"],
+    }, getVireoFormFreeSoloAutocompleteFieldUtilityClass, classes);
+}
+function isValidValue(value) {
+    return value.length > 0;
+}
+function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function VireoFormFreeSoloAutocompleteFieldImpl(inProps, forwardedRef) {
+    const props = useThemeProps({
+        props: inProps,
+        name: VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME,
+    });
+    const { className, classes: classesProp, clearIcon, clearLabel = "Clear selection", closeLabel = "Close options", commitOnBlur = true, createOptionLabel = value => `Add “${value}”`, defaultInputValue = "", defaultOpen = false, disabled = false, disableClearable = false, error = false, errorDisplay: errorDisplayProp, filterMode = "client", filterOptions: filterOptionsProp, formatError: formatErrorProp, fullWidth = true, getOptionDisabled, getOptionLabel, getOptionValue, groupBy, helperText = " ", inputRef, inputValue: inputValueProp, label, isValueEqual = (left, right) => left === right, loading = false, loadingText = "Loading…", noOptionsText = "No options", onBlur, onClose, onInputValueChange, onOpen, onValueChange, open: openProp, openLabel = "Open options", options, placeholder, popupIcon, readOnly = false, renderGroupLabel, renderOption, required = false, normalizeValue = value => value.trim(), slotProps = {}, slots = {}, style, sx, variant = "outlined", size, color, margin, ...other } = props;
+    const field = useVireoFieldContext();
+    const formContext = useVireoFormContext();
+    const fieldState = useStore(field.store, current => ({
+        dirty: current.meta.isDirty,
+        errors: current.meta.errors,
+        invalid: !current.meta.isValid,
+        touched: current.meta.isTouched,
+        validating: current.meta.isValidating,
+        value: current.value,
+    }));
+    const submitting = useStore(field.form.store, current => current.isSubmitting);
+    const [internalInputValue, setInternalInputValue] = React.useState(defaultInputValue);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const [focused, setFocused] = React.useState(false);
+    const effectiveInputValue = inputValueProp ?? internalInputValue;
+    const effectiveOpen = openProp ?? internalOpen;
+    const normalizedOptions = React.useMemo(() => {
+        const result = [];
+        for (const option of options) {
+            const value = normalizeValue(getOptionValue(option));
+            if (!isValidValue(value) || result.some(item => isValueEqual(item.value, value))) {
+                if (process.env.NODE_ENV !== "production")
+                    console.warn(`${VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME}: normalized option values must be unique non-empty strings.`, value);
+                continue;
+            }
+            result.push({ value, label: getOptionLabel(option), custom: false, option });
+        }
+        return result;
+    }, [getOptionLabel, getOptionValue, isValueEqual, normalizeValue, options]);
+    const selected = React.useMemo(() => {
+        if (fieldState.value === null)
+            return null;
+        const current = normalizedOptions.find(item => isValueEqual(item.value, fieldState.value));
+        if (current)
+            return current;
+        return {
+            value: fieldState.value,
+            label: fieldState.value,
+            custom: true,
+            option: null,
+        };
+    }, [fieldState.value, isValueEqual, normalizedOptions]);
+    const errorDisplay = errorDisplayProp ?? formContext.errorDisplay;
+    const errorVisible = fieldState.invalid &&
+        shouldDisplayVireoFormError(errorDisplay, {
+            submissionAttempts: formContext.submissionAttempts,
+            touched: fieldState.touched,
+        });
+    const effectiveError = error || errorVisible;
+    const effectiveHelperText = errorVisible
+        ? formatFirstVireoFormError(fieldState.errors, formatErrorProp ?? formContext.formatError)
+        : helperText;
+    const ownerState = {
+        dirty: fieldState.dirty,
+        disabled,
+        error: effectiveError,
+        focused,
+        hasInputValue: effectiveInputValue.length > 0,
+        hasValue: selected !== null,
+        loading,
+        open: effectiveOpen,
+        readOnly,
+        required,
+        submitting,
+        touched: fieldState.touched,
+        validating: fieldState.validating,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolved = Object.fromEntries(Object.entries(slotProps).map(([key, value]) => [key, resolveSlotProps(value, ownerState)]));
+    const rootSlotProps = resolved.root ?? {};
+    const { className: rootClassName, ref: rootSlotRef, style: rootStyle, sx: rootSx, ...rootOther } = rootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const htmlInputSlotProps = resolved.htmlInput ?? {};
+    const combinedInputRef = useForkRef(inputRef, htmlInputSlotProps.ref);
+    const defaultFilter = React.useMemo(() => createFilterOptions(), []);
+    const filterOptions = (items, state) => {
+        const filtered = filterMode === "server"
+            ? items
+            : !filterOptionsProp
+                ? defaultFilter(items, { ...state, getOptionLabel: item => item.label })
+                : (() => {
+                    const allowed = filterOptionsProp(items.map(item => item.option), state);
+                    return items.filter(item => allowed.includes(item.option));
+                })();
+        const customValue = normalizeValue(state.inputValue);
+        if (isValidValue(customValue) && !items.some(item => isValueEqual(item.value, customValue)))
+            return [...filtered, { value: customValue, label: customValue, custom: true, option: null }];
+        return filtered;
+    };
+    const handleInputChange = (_event, value, reason) => {
+        if (inputValueProp === undefined)
+            setInternalInputValue(value);
+        onInputValueChange?.(value, reason);
+    };
+    const handleChange = (_event, next, reason) => {
+        if (readOnly || disabled)
+            return;
+        const previousValue = fieldState.value;
+        if (reason === "clear" || next === null) {
+            field.handleChange(null);
+            onValueChange?.(null, { reason: "clear", previousValue });
+            return;
+        }
+        const selection = typeof next === "string" ? { value: normalizeValue(next), custom: true, option: null } : next;
+        if (!isValidValue(selection.value))
+            return;
+        field.handleChange(selection.value);
+        if (inputValueProp === undefined)
+            setInternalInputValue(selection.value);
+        if (selection.option)
+            onValueChange?.(selection.value, {
+                reason: "selectOption",
+                option: selection.option,
+                value: selection.value,
+            });
+        else
+            onValueChange?.(selection.value, { reason: "createOption", value: selection.value });
+    };
+    const handleOpen = () => {
+        if (openProp === undefined)
+            setInternalOpen(true);
+        onOpen?.();
+    };
+    const handleClose = (event, reason) => {
+        if (openProp === undefined)
+            setInternalOpen(false);
+        onClose?.(event, reason);
+    };
+    const LoadingText = slots.loadingText ?? VireoFormFreeSoloAutocompleteFieldLoadingText;
+    const NoOptionsText = slots.noOptionsText ?? VireoFormFreeSoloAutocompleteFieldNoOptionsText;
+    const ClearIcon = slots.clearIcon ?? VireoFormFreeSoloAutocompleteFieldClearIcon;
+    const PopupIcon = slots.popupIcon ?? VireoFormFreeSoloAutocompleteFieldPopupIcon;
+    const LoadingIndicator = slots.loadingIndicator ?? VireoFormFreeSoloAutocompleteFieldLoadingIndicator;
+    return (_jsx(VireoFormFreeSoloAutocompleteFieldRoot, { ...rootOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootClassName), style: { ...style, ...rootStyle }, sx: mergeSx(sx, rootSx), children: _jsx(Autocomplete, { ...other, freeSolo: true, value: selected, options: normalizedOptions, getOptionLabel: item => (typeof item === "string" ? item : item.label), getOptionKey: item => (typeof item === "string" ? item : item.value), isOptionEqualToValue: (option, value) => typeof value !== "string" && isValueEqual(option.value, value.value), getOptionDisabled: item => Boolean(item.option && getOptionDisabled?.(item.option)), filterOptions: filterOptions, groupBy: groupBy ? item => (item.option ? groupBy(item.option) : "") : undefined, disabled: disabled, readOnly: readOnly, disableClearable: disableClearable, loading: loading, fullWidth: fullWidth, open: effectiveOpen, onOpen: handleOpen, onClose: handleClose, inputValue: effectiveInputValue, onInputChange: handleInputChange, onChange: handleChange, clearText: clearLabel, openText: openLabel, closeText: closeLabel, clearIcon: clearIcon ?? (_jsx(ClearIcon, { ...resolved.clearIcon, className: joinClassNames(classes.clearIcon, resolved.clearIcon?.className), ownerState: ownerState })), popupIcon: popupIcon ?? (_jsx(PopupIcon, { ...resolved.popupIcon, className: joinClassNames(classes.popupIcon, resolved.popupIcon?.className), ownerState: ownerState })), loadingText: _jsx(LoadingText, { ...resolved.loadingText, className: joinClassNames(classes.loadingText, resolved.loadingText?.className), ownerState: ownerState, children: loadingText }), noOptionsText: _jsx(NoOptionsText, { ...resolved.noOptionsText, className: joinClassNames(classes.noOptionsText, resolved.noOptionsText?.className), ownerState: ownerState, children: noOptionsText }), slots: {
+                popper: slots.popper ?? VireoFormFreeSoloAutocompleteFieldPopper,
+                paper: slots.paper ?? VireoFormFreeSoloAutocompleteFieldPaper,
+                listbox: slots.listbox ?? VireoFormFreeSoloAutocompleteFieldListbox,
+                clearIndicator: slots.clearButton ?? VireoFormFreeSoloAutocompleteFieldClearButton,
+                popupIndicator: slots.popupButton ?? VireoFormFreeSoloAutocompleteFieldPopupButton,
+            }, slotProps: {
+                popper: {
+                    ...resolved.popper,
+                    className: joinClassNames(classes.popper, resolved.popper?.className),
+                    ownerState,
+                },
+                paper: {
+                    ...resolved.paper,
+                    className: joinClassNames(classes.paper, resolved.paper?.className),
+                    ownerState,
+                },
+                listbox: {
+                    ...resolved.listbox,
+                    className: joinClassNames(classes.listbox, resolved.listbox?.className),
+                    ownerState,
+                },
+                clearIndicator: {
+                    ...resolved.clearButton,
+                    className: joinClassNames(classes.clearButton, resolved.clearButton?.className),
+                },
+                popupIndicator: {
+                    ...resolved.popupButton,
+                    className: joinClassNames(classes.popupButton, resolved.popupButton?.className),
+                },
+            }, renderOption: (optionProps, item, state) => {
+                const Option = slots.option ?? VireoFormFreeSoloAutocompleteFieldOption;
+                const content = item.custom
+                    ? createOptionLabel(item.value)
+                    : item.option && renderOption
+                        ? renderOption(item.option, {
+                            inputValue: state.inputValue,
+                            selected: state.selected,
+                            disabled: item.option ? Boolean(getOptionDisabled?.(item.option)) : true,
+                            index: state.index,
+                        })
+                        : item.label;
+                return (_createElement(Option, { ...resolved.option, ...optionProps, key: item.value, className: joinClassNames(classes.option, resolved.option?.className, optionProps.className), ownerState: ownerState }, content));
+            }, renderGroup: params => {
+                const Group = slots.group ?? VireoFormFreeSoloAutocompleteFieldGroup;
+                const GroupLabel = slots.groupLabel ?? VireoFormFreeSoloAutocompleteFieldGroupLabel;
+                const GroupList = slots.groupList ?? VireoFormFreeSoloAutocompleteFieldGroupList;
+                return (_createElement(Group, { ...resolved.group, key: params.key, className: joinClassNames(classes.group, resolved.group?.className), ownerState: ownerState },
+                    _jsx(GroupLabel, { ...resolved.groupLabel, className: joinClassNames(classes.groupLabel, resolved.groupLabel?.className), ownerState: ownerState, children: renderGroupLabel?.(params.group) ?? params.group }),
+                    _jsx(GroupList, { ...resolved.groupList, className: joinClassNames(classes.groupList, resolved.groupList?.className), ownerState: ownerState, children: params.children })));
+            }, renderInput: params => {
+                const TextField = slots.textField ?? VireoFormFreeSoloAutocompleteFieldTextField;
+                const loadingAdornment = loading ? (_jsx(LoadingIndicator, { ...resolved.loadingIndicator, size: 18, className: joinClassNames(classes.loadingIndicator, resolved.loadingIndicator?.className), ownerState: ownerState })) : null;
+                const autocompleteInputRef = params.slotProps.htmlInput.ref;
+                return (_jsx(TextField, { ...params, ...resolved.textField, label: label, required: required, error: effectiveError, helperText: effectiveHelperText, fullWidth: fullWidth, placeholder: placeholder, variant: variant, size: size, color: color, margin: margin, className: joinClassNames(classes.textField, resolved.textField?.className), slots: {
+                        inputLabel: slots.inputLabel ?? VireoFormFreeSoloAutocompleteFieldInputLabel,
+                        input: slots.input ??
+                            (variant === "filled"
+                                ? VireoFormFreeSoloAutocompleteFieldFilledInput
+                                : variant === "standard"
+                                    ? VireoFormFreeSoloAutocompleteFieldStandardInput
+                                    : VireoFormFreeSoloAutocompleteFieldOutlinedInput),
+                        // Keep MUI's internal InputBaseInput unless the consumer replaces this slot.
+                        // It owns the native-input reset required by every TextField variant.
+                        htmlInput: slots.htmlInput,
+                        formHelperText: slots.formHelperText ?? VireoFormFreeSoloAutocompleteFieldFormHelperText,
+                    }, onFocus: (event) => {
+                        setFocused(true);
+                        resolved.textField?.onFocus?.(event);
+                    }, onBlur: (event) => {
+                        resolved.textField?.onBlur?.(event);
+                        if (event.defaultPrevented)
+                            return;
+                        onBlur?.(event);
+                        if (event.defaultPrevented)
+                            return;
+                        const nextValue = normalizeValue(effectiveInputValue);
+                        if (commitOnBlur &&
+                            !disabled &&
+                            !readOnly &&
+                            isValidValue(nextValue) &&
+                            !(selected && effectiveInputValue === selected.label) &&
+                            !isValueEqual(nextValue, fieldState.value ?? "")) {
+                            field.handleChange(nextValue);
+                            onValueChange?.(nextValue, { reason: "createOption", value: nextValue });
+                        }
+                        setFocused(false);
+                        field.handleBlur();
+                    }, slotProps: {
+                        inputLabel: {
+                            ...params.slotProps.inputLabel,
+                            ...resolved.inputLabel,
+                            className: joinClassNames(classes.inputLabel, resolved.inputLabel?.className),
+                        },
+                        input: {
+                            ...params.slotProps.input,
+                            ...resolved.input,
+                            className: joinClassNames(classes.input, params.slotProps.input.className, resolved.input?.className),
+                            endAdornment: (_jsxs(_Fragment, { children: [loadingAdornment, params.slotProps.input.endAdornment] })),
+                        },
+                        htmlInput: {
+                            ...params.slotProps.htmlInput,
+                            ...htmlInputSlotProps,
+                            name: field.name,
+                            ref: (node) => {
+                                assignRef(autocompleteInputRef, node);
+                                assignRef(combinedInputRef, node);
+                            },
+                            className: joinClassNames(classes.htmlInput, params.slotProps.htmlInput.className, htmlInputSlotProps.className),
+                            "aria-invalid": effectiveError || undefined,
+                        },
+                        formHelperText: {
+                            ...resolved.formHelperText,
+                            className: joinClassNames(classes.formHelperText, resolved.formHelperText?.className),
+                        },
+                    } }));
+            } }) }));
+}
+export const VireoFormFreeSoloAutocompleteField = React.forwardRef(VireoFormFreeSoloAutocompleteFieldImpl);
+VireoFormFreeSoloAutocompleteField.displayName =
+    VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME;

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.styled.d.ts

@@ -0,0 +1,30 @@
+import { type StyledSlotComponent, type StyledSlotProps } from "../../../../../core/public.js";
+import { type BoxProps, type PaperProps, type PopperProps } from "@mui/material";
+import React from "react";
+import type { VireoFormFreeSoloAutocompleteFieldOwnerState } from "./VireoFormFreeSoloAutocompleteField.types.js";
+type StyledProps = StyledSlotProps<VireoFormFreeSoloAutocompleteFieldOwnerState>;
+type StyledComponent<TProps extends object> = StyledSlotComponent<TProps, VireoFormFreeSoloAutocompleteFieldOwnerState>;
+export declare const VireoFormFreeSoloAutocompleteFieldRoot: StyledComponent<BoxProps>;
+export declare const VireoFormFreeSoloAutocompleteFieldTextField: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldInputLabel: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldOutlinedInput: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldFilledInput: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldStandardInput: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldLoadingIndicator: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldClearButton: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldClearIcon: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldPopupButton: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldPopupIcon: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldFormHelperText: React.ElementType;
+type PopperSlotProps = PopperProps & StyledProps;
+type PaperSlotProps = PaperProps & StyledProps;
+export declare const VireoFormFreeSoloAutocompleteFieldPopper: React.ForwardRefExoticComponent<Omit<PopperSlotProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoFormFreeSoloAutocompleteFieldPaper: React.ForwardRefExoticComponent<Omit<PaperSlotProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoFormFreeSoloAutocompleteFieldLoadingText: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldNoOptionsText: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldListbox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & StyledProps & React.RefAttributes<HTMLUListElement>>;
+export declare const VireoFormFreeSoloAutocompleteFieldOption: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldGroup: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldGroupLabel: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteFieldGroupList: React.ElementType;
+export {};

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.styled.js

@@ -0,0 +1,86 @@
+import Close from "@mui/icons-material/Close";
+import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
+import { Box, CircularProgress, FilledInput, FormHelperText, IconButton, Input, InputLabel, ListSubheader, OutlinedInput, Paper, Popper, TextField, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import React from "react";
+import { VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME } from "./VireoFormFreeSoloAutocompleteField.identity.js";
+const options = (slot) => ({
+    name: VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME,
+    slot,
+    overridesResolver: (_props, styles) => styles[slot.charAt(0).toLowerCase() + slot.slice(1)],
+});
+export const VireoFormFreeSoloAutocompleteFieldRoot = styled(Box, {
+    name: VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME,
+    slot: "Root",
+    overridesResolver: ({ ownerState }, styles) => [
+        styles.root,
+        ownerState.disabled && styles.disabled,
+        ownerState.readOnly && styles.readOnly,
+        ownerState.required && styles.required,
+        ownerState.error && styles.error,
+        ownerState.focused && styles.focused,
+        ownerState.dirty && styles.dirty,
+        ownerState.touched && styles.touched,
+        ownerState.submitting && styles.submitting,
+        ownerState.validating && styles.validating,
+        ownerState.open && styles.open,
+        ownerState.loading && styles.loading,
+        ownerState.hasValue && styles.hasValue,
+        ownerState.hasInputValue && styles.hasInputValue,
+    ],
+})({ minWidth: 0 });
+export const VireoFormFreeSoloAutocompleteFieldTextField = styled(TextField, options("TextField"))({});
+export const VireoFormFreeSoloAutocompleteFieldInputLabel = styled(InputLabel, options("InputLabel"))({});
+export const VireoFormFreeSoloAutocompleteFieldOutlinedInput = styled(OutlinedInput, options("Input"))({});
+export const VireoFormFreeSoloAutocompleteFieldFilledInput = styled(FilledInput, options("Input"))({});
+export const VireoFormFreeSoloAutocompleteFieldStandardInput = styled(Input, options("Input"))({});
+export const VireoFormFreeSoloAutocompleteFieldLoadingIndicator = styled(CircularProgress, options("LoadingIndicator"))({});
+export const VireoFormFreeSoloAutocompleteFieldClearButton = styled(IconButton, options("ClearButton"))({});
+export const VireoFormFreeSoloAutocompleteFieldClearIcon = styled(Close, options("ClearIcon"))({});
+export const VireoFormFreeSoloAutocompleteFieldPopupButton = styled(IconButton, options("PopupButton"))({});
+export const VireoFormFreeSoloAutocompleteFieldPopupIcon = styled(ArrowDropDown, options("PopupIcon"))({});
+export const VireoFormFreeSoloAutocompleteFieldFormHelperText = styled(FormHelperText, options("FormHelperText"))({});
+const VireoFormFreeSoloAutocompleteFieldStyledPopper = styled(Popper, options("Popper"))(({ theme }) => ({ zIndex: theme.zIndex.modal }));
+const VireoFormFreeSoloAutocompleteFieldStyledPaper = styled(Paper, options("Paper"))(({ theme }) => ({ ...theme.typography.body1, overflow: "auto" }));
+export const VireoFormFreeSoloAutocompleteFieldPopper = React.forwardRef(function VireoFormFreeSoloAutocompleteFieldPopper(props, ref) {
+    return React.createElement(VireoFormFreeSoloAutocompleteFieldStyledPopper, { ...props, ref });
+});
+export const VireoFormFreeSoloAutocompleteFieldPaper = React.forwardRef(function VireoFormFreeSoloAutocompleteFieldPaper(props, ref) {
+    return React.createElement(VireoFormFreeSoloAutocompleteFieldStyledPaper, { ...props, ref });
+});
+export const VireoFormFreeSoloAutocompleteFieldLoadingText = styled("div", options("LoadingText"))({});
+export const VireoFormFreeSoloAutocompleteFieldNoOptionsText = styled("div", options("NoOptionsText"))({});
+const VireoFormFreeSoloAutocompleteFieldStyledListbox = styled("ul", options("Listbox"))({
+    listStyle: "none",
+    margin: 0,
+    maxHeight: "40vh",
+    overflow: "auto",
+    padding: "8px 0",
+    position: "relative",
+});
+export const VireoFormFreeSoloAutocompleteFieldListbox = React.forwardRef(function VireoFormFreeSoloAutocompleteFieldListbox(props, ref) {
+    return React.createElement(VireoFormFreeSoloAutocompleteFieldStyledListbox, { ...props, ref });
+});
+export const VireoFormFreeSoloAutocompleteFieldOption = styled("li", options("Option"))(({ theme }) => ({
+    alignItems: "center",
+    boxSizing: "border-box",
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "flex-start",
+    minHeight: 48,
+    outline: 0,
+    overflow: "hidden",
+    padding: "6px 16px",
+    WebkitTapHighlightColor: "transparent",
+    [theme.breakpoints.up("sm")]: { minHeight: "auto" },
+    "&.Mui-focused": { backgroundColor: theme.palette.action.hover },
+    "&.Mui-focusVisible": { backgroundColor: theme.palette.action.focus },
+    '&[aria-disabled="true"]': {
+        opacity: theme.palette.action.disabledOpacity,
+        pointerEvents: "none",
+    },
+    '&[aria-selected="true"]': { backgroundColor: theme.palette.action.selected },
+}));
+export const VireoFormFreeSoloAutocompleteFieldGroup = styled("li", options("Group"))({ listStyle: "none" });
+export const VireoFormFreeSoloAutocompleteFieldGroupLabel = styled(ListSubheader, options("GroupLabel"))(({ theme }) => ({ backgroundColor: theme.palette.background.paper, top: -8 }));
+export const VireoFormFreeSoloAutocompleteFieldGroupList = styled("ul", options("GroupList"))({ margin: 0, padding: 0, "& .MuiAutocomplete-option": { paddingLeft: 24 } });

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.types.d.ts

@@ -0,0 +1,162 @@
+import type { VireoFormErrorDisplay, VireoFormErrorFormatter } from "../../../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { AutocompleteProps, Box, CircularProgress, FormHelperText, IconButton, InputLabel, ListSubheader, Paper, Popper, TextField, TextFieldProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import type { VireoFormFreeSoloAutocompleteFieldClasses, VireoFormFreeSoloAutocompleteFieldClassKey } from "./VireoFormFreeSoloAutocompleteField.classes.js";
+import type { VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME } from "./VireoFormFreeSoloAutocompleteField.identity.js";
+export type VireoFormFreeSoloAutocompleteFieldInputChangeReason = "input" | "reset" | "clear" | "blur" | "selectOption" | "removeOption";
+export type VireoFormFreeSoloAutocompleteFieldSelection<TOption> = {
+    value: string;
+    label: string;
+    custom: boolean;
+    option: TOption | null;
+};
+export type VireoFormFreeSoloAutocompleteFieldValueChangeDetails<TOption> = {
+    reason: "selectOption";
+    option: TOption;
+    value: string;
+} | {
+    reason: "createOption";
+    value: string;
+} | {
+    reason: "clear";
+    previousValue: string | null;
+};
+export type VireoFormFreeSoloAutocompleteFieldRenderOptionState = {
+    inputValue: string;
+    selected: boolean;
+    disabled: boolean;
+    index: number;
+};
+export type VireoFormFreeSoloAutocompleteFieldFilterState = {
+    inputValue: string;
+};
+export type VireoFormFreeSoloAutocompleteFieldOwnerState = {
+    dirty: boolean;
+    disabled: boolean;
+    error: boolean;
+    focused: boolean;
+    hasInputValue: boolean;
+    hasValue: boolean;
+    loading: boolean;
+    open: boolean;
+    readOnly: boolean;
+    required: boolean;
+    submitting: boolean;
+    touched: boolean;
+    validating: boolean;
+};
+export interface VireoFormFreeSoloAutocompleteFieldSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoFormFreeSoloAutocompleteFieldSlots = {
+    root: React.ElementType;
+    textField: React.ElementType;
+    inputLabel: React.ElementType;
+    input: React.ElementType;
+    htmlInput: React.ElementType;
+    loadingIndicator: React.ElementType;
+    clearButton: React.ElementType;
+    clearIcon: React.ElementType;
+    popupButton: React.ElementType;
+    popupIcon: React.ElementType;
+    formHelperText: React.ElementType;
+    popper: React.ElementType;
+    paper: React.ElementType;
+    loadingText: React.ElementType;
+    noOptionsText: React.ElementType;
+    listbox: React.ElementType;
+    option: React.ElementType;
+    group: React.ElementType;
+    groupLabel: React.ElementType;
+    groupList: React.ElementType;
+};
+type CommonSlotProps<T extends React.ElementType> = SlotProps<T, VireoFormFreeSoloAutocompleteFieldSlotPropsOverrides, VireoFormFreeSoloAutocompleteFieldOwnerState>;
+export type VireoFormFreeSoloAutocompleteFieldSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoFormFreeSoloAutocompleteFieldSlots, {
+    root: CommonSlotProps<typeof Box>;
+    textField: CommonSlotProps<typeof TextField>;
+    inputLabel: CommonSlotProps<typeof InputLabel>;
+    input: CommonSlotProps<"div">;
+    htmlInput: CommonSlotProps<"input">;
+    loadingIndicator: CommonSlotProps<typeof CircularProgress>;
+    clearButton: CommonSlotProps<typeof IconButton>;
+    clearIcon: CommonSlotProps<"svg">;
+    popupButton: CommonSlotProps<typeof IconButton>;
+    popupIcon: CommonSlotProps<"svg">;
+    formHelperText: CommonSlotProps<typeof FormHelperText>;
+    popper: CommonSlotProps<typeof Popper>;
+    paper: CommonSlotProps<typeof Paper>;
+    loadingText: CommonSlotProps<"div">;
+    noOptionsText: CommonSlotProps<"div">;
+    listbox: CommonSlotProps<"ul">;
+    option: CommonSlotProps<"li">;
+    group: CommonSlotProps<"li">;
+    groupLabel: CommonSlotProps<typeof ListSubheader>;
+    groupList: CommonSlotProps<"ul">;
+}>;
+type OwnedAutocompleteProp = "clearIcon" | "defaultValue" | "disabled" | "disableClearable" | "filterOptions" | "freeSolo" | "getOptionDisabled" | "getOptionKey" | "getOptionLabel" | "groupBy" | "inputValue" | "isOptionEqualToValue" | "loading" | "loadingText" | "multiple" | "noOptionsText" | "onBlur" | "onChange" | "onHighlightChange" | "onInputChange" | "options" | "onClose" | "onOpen" | "open" | "readOnly" | "renderGroup" | "renderInput" | "renderOption" | "renderTags" | "renderValue" | "slotProps" | "slots" | "value";
+export type VireoFormFreeSoloAutocompleteFieldInheritedProps<TOption> = Omit<AutocompleteProps<TOption, false, false, true>, OwnedAutocompleteProp>;
+type FilterContract<TOption> = {
+    filterMode?: "client";
+    filterOptions?: (options: readonly TOption[], state: VireoFormFreeSoloAutocompleteFieldFilterState) => readonly TOption[];
+} | {
+    filterMode: "server";
+    filterOptions?: never;
+};
+export type VireoFormFreeSoloAutocompleteFieldOwnProps<TOption> = VireoFormFreeSoloAutocompleteFieldSlotsAndSlotProps & FilterContract<TOption> & {
+    label: React.ReactNode;
+    options: readonly TOption[];
+    getOptionValue: (option: TOption) => string;
+    getOptionLabel: (option: TOption) => string;
+    getOptionDisabled?: (option: TOption) => boolean;
+    renderOption?: (option: TOption, state: VireoFormFreeSoloAutocompleteFieldRenderOptionState) => React.ReactNode;
+    createOptionLabel?: (value: string) => React.ReactNode;
+    normalizeValue?: (value: string) => string;
+    isValueEqual?: (left: string, right: string) => boolean;
+    commitOnBlur?: boolean;
+    groupBy?: (option: TOption) => string;
+    renderGroupLabel?: (group: string) => React.ReactNode;
+    classes?: Partial<VireoFormFreeSoloAutocompleteFieldClasses>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    error?: boolean;
+    errorDisplay?: VireoFormErrorDisplay;
+    formatError?: VireoFormErrorFormatter;
+    /** Defaults to a reserved line; pass `null` to remove it. @default ' ' */
+    helperText?: React.ReactNode;
+    fullWidth?: boolean;
+    placeholder?: string;
+    variant?: TextFieldProps["variant"];
+    size?: TextFieldProps["size"];
+    color?: TextFieldProps["color"];
+    margin?: TextFieldProps["margin"];
+    inputRef?: React.Ref<HTMLInputElement>;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onInputValueChange?: (value: string, reason: VireoFormFreeSoloAutocompleteFieldInputChangeReason) => void;
+    onValueChange?: (value: string | null, details: VireoFormFreeSoloAutocompleteFieldValueChangeDetails<TOption>) => void;
+    loading?: boolean;
+    loadingText?: React.ReactNode;
+    noOptionsText?: React.ReactNode;
+    disableClearable?: boolean;
+    clearOnEscape?: boolean;
+    clearLabel?: string;
+    openLabel?: string;
+    closeLabel?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: NonNullable<AutocompleteProps<TOption, false, false, true>["onClose"]>;
+    clearIcon?: React.ReactNode;
+    popupIcon?: React.ReactNode;
+};
+export type VireoFormFreeSoloAutocompleteFieldProps<TOption = string> = VireoFormFreeSoloAutocompleteFieldOwnProps<TOption> & VireoFormFreeSoloAutocompleteFieldInheritedProps<TOption>;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME]?: VireoThemeComponent<VireoFormFreeSoloAutocompleteFieldProps, VireoFormFreeSoloAutocompleteFieldClassKey, VireoFormFreeSoloAutocompleteFieldOwnerState, Theme>;
+    }
+}
+export {};

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoFormFreeSoloAutocompleteField.js";
+export * from "./VireoFormFreeSoloAutocompleteField.classes.js";
+export * from "./VireoFormFreeSoloAutocompleteField.types.js";

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoFormFreeSoloAutocompleteField.js";
+export * from "./VireoFormFreeSoloAutocompleteField.classes.js";
+export * from "./VireoFormFreeSoloAutocompleteField.types.js";

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteMultipleField/VireoFormFreeSoloAutocompleteMultipleField.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoFormFreeSoloAutocompleteMultipleFieldSlotName, type VireoFormFreeSoloAutocompleteMultipleFieldStateName } from "./VireoFormFreeSoloAutocompleteMultipleField.identity.js";
+/** Utility classes available to VireoFormFreeSoloAutocompleteMultipleField. */
+export type VireoFormFreeSoloAutocompleteMultipleFieldClasses = Record<VireoFormFreeSoloAutocompleteMultipleFieldSlotName | VireoFormFreeSoloAutocompleteMultipleFieldStateName, string>;
+/** Valid keys for VireoFormFreeSoloAutocompleteMultipleField utility classes and theme style overrides. */
+export type VireoFormFreeSoloAutocompleteMultipleFieldClassKey = keyof VireoFormFreeSoloAutocompleteMultipleFieldClasses;
+/** Returns the generated utility class name for a VireoFormFreeSoloAutocompleteMultipleField slot or state. */
+export declare function getVireoFormFreeSoloAutocompleteMultipleFieldUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoFormFreeSoloAutocompleteMultipleField class key. */
+export declare const vireoFormFreeSoloAutocompleteMultipleFieldClasses: VireoFormFreeSoloAutocompleteMultipleFieldClasses;

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteMultipleField/VireoFormFreeSoloAutocompleteMultipleField.classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME, VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS, VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_STATES, } from "./VireoFormFreeSoloAutocompleteMultipleField.identity.js";
+/** Returns the generated utility class name for a VireoFormFreeSoloAutocompleteMultipleField slot or state. */
+export function getVireoFormFreeSoloAutocompleteMultipleFieldUtilityClass(slot) {
+    return generateUtilityClass(VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoFormFreeSoloAutocompleteMultipleField class key. */
+export const vireoFormFreeSoloAutocompleteMultipleFieldClasses = generateUtilityClasses(VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME, [
+    ...VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS,
+    ...VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_STATES,
+]);