@vireocodedev/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,389 @@
+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 { getVireoFormAutocompleteMultipleFieldUtilityClass, } from "./VireoFormAutocompleteMultipleField.classes.js";
+import { VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME, } from "./VireoFormAutocompleteMultipleField.identity.js";
+import { VireoFormAutocompleteMultipleFieldClearButton, VireoFormAutocompleteMultipleFieldClearIcon, VireoFormAutocompleteMultipleFieldFilledInput, VireoFormAutocompleteMultipleFieldFormHelperText, VireoFormAutocompleteMultipleFieldGroup, VireoFormAutocompleteMultipleFieldGroupLabel, VireoFormAutocompleteMultipleFieldGroupList, VireoFormAutocompleteMultipleFieldHiddenOptionsButton, VireoFormAutocompleteMultipleFieldInputLabel, VireoFormAutocompleteMultipleFieldListbox, VireoFormAutocompleteMultipleFieldLoadingIndicator, VireoFormAutocompleteMultipleFieldLoadingText, VireoFormAutocompleteMultipleFieldNoOptionsText, VireoFormAutocompleteMultipleFieldOption, VireoFormAutocompleteMultipleFieldOptionCheckbox, VireoFormAutocompleteMultipleFieldOutlinedInput, VireoFormAutocompleteMultipleFieldPaper, VireoFormAutocompleteMultipleFieldPopper, VireoFormAutocompleteMultipleFieldPopupButton, VireoFormAutocompleteMultipleFieldPopupIcon, VireoFormAutocompleteMultipleFieldRoot, VireoFormAutocompleteMultipleFieldSelectedOption, VireoFormAutocompleteMultipleFieldSelectedOptionDeleteIcon, VireoFormAutocompleteMultipleFieldSelectedOptions, VireoFormAutocompleteMultipleFieldStandardInput, VireoFormAutocompleteMultipleFieldTextField, } from "./VireoFormAutocompleteMultipleField.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",
+            ownerState.hasUnresolvedValue && "hasUnresolvedValue",
+            ownerState.atSelectionLimit && "atSelectionLimit",
+            ownerState.hasHiddenOptions && "hasHiddenOptions",
+        ],
+        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"],
+        selectedOptions: ["selectedOptions"],
+        selectedOption: ["selectedOption"],
+        selectedOptionDeleteIcon: ["selectedOptionDeleteIcon"],
+        hiddenOptionsButton: ["hiddenOptionsButton"],
+        optionCheckbox: ["optionCheckbox"],
+    }, getVireoFormAutocompleteMultipleFieldUtilityClass, classes);
+}
+function validValue(value) {
+    return typeof value === "string" ? value.length > 0 : Number.isFinite(value);
+}
+function normalizedNonNegative(value, fallback) {
+    return value === undefined || !Number.isFinite(value) ? fallback : Math.max(0, Math.floor(value));
+}
+function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function VireoFormAutocompleteMultipleFieldImpl(inProps, forwardedRef) {
+    const props = useThemeProps({
+        props: inProps,
+        name: VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME,
+    });
+    const { className, classes: classesProp, clearIcon, clearLabel = "Clear selections", closeLabel = "Close options", defaultInputValue = "", defaultOpen = false, disabled = false, disableClearable = false, disableCloseOnSelect = true, error = false, errorDisplay: errorDisplayProp, filterMode = "client", filterOptions: filterOptionsProp, formatError: formatErrorProp, fullWidth = true, getHiddenOptionsLabel = count => `${count} more selected options`, getHiddenOptionsText = count => `+${count}`, getOptionDisabled, getOptionLabel, getOptionValue, getRemoveOptionLabel = selection => `Remove ${selection.label}`, getUnresolvedValueLabel, groupBy, helperText = " ", hideOptionCheckbox = false, inputRef, inputValue: inputValueProp, label, loading = false, loadingText = "Loading…", margin, maxDisplayedOptions: maxDisplayedOptionsProp = 2, maxSelectedOptions: maxSelectedOptionsProp, noOptionsText = "No options", onBlur, onClose, onInputValueChange, onKeyDown, onOpen, onValueChange, open: openProp, openLabel = "Open options", options, placeholder, popupIcon, readOnly = false, removeOnBackspace = false, renderGroupLabel, renderOption, renderSelectedOptions, required = false, selectedOptions = [], size, color, slotProps = {}, slots = {}, style, sx, variant = "outlined", ...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 maxDisplayedOptions = normalizedNonNegative(maxDisplayedOptionsProp, 2);
+    const maxSelectedOptions = maxSelectedOptionsProp === undefined ? undefined : normalizedNonNegative(maxSelectedOptionsProp, 0);
+    const normalizedOptions = React.useMemo(() => {
+        const seen = new Set();
+        const result = [];
+        for (const option of options) {
+            const value = getOptionValue(option);
+            if (!validValue(value) || seen.has(value)) {
+                if (process.env.NODE_ENV !== "production")
+                    console.warn(`${VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME}: option values must be unique non-empty strings or finite numbers.`, value);
+                continue;
+            }
+            seen.add(value);
+            result.push({ value, label: getOptionLabel(option), resolved: true, option });
+        }
+        return result;
+    }, [getOptionLabel, getOptionValue, options]);
+    const fallbackByValue = React.useMemo(() => new Map(selectedOptions.map(option => [getOptionValue(option), option])), [getOptionValue, selectedOptions]);
+    const selections = React.useMemo(() => fieldState.value.map(value => {
+        const current = normalizedOptions.find(item => item.value === value);
+        if (current)
+            return current;
+        const fallback = fallbackByValue.get(value);
+        if (fallback)
+            return { value, label: getOptionLabel(fallback), resolved: true, option: fallback };
+        return { value, label: getUnresolvedValueLabel?.(value) ?? String(value), resolved: false, option: null };
+    }), [fallbackByValue, fieldState.value, getOptionLabel, getUnresolvedValueLabel, normalizedOptions]);
+    const displayedSelections = selections.slice(0, maxDisplayedOptions);
+    const hiddenCount = selections.length - displayedSelections.length;
+    const atSelectionLimit = maxSelectedOptions !== undefined && selections.length >= maxSelectedOptions;
+    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,
+        hasUnresolvedValue: selections.some(item => !item.resolved),
+        hasValue: selections.length > 0,
+        loading,
+        open: effectiveOpen,
+        readOnly,
+        required,
+        submitting,
+        touched: fieldState.touched,
+        validating: fieldState.validating,
+        atSelectionLimit,
+        hasHiddenOptions: hiddenCount > 0,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolved = Object.fromEntries(Object.entries(slotProps).map(([key, value]) => [key, resolveSlotProps(value, ownerState)]));
+    const rootProps = resolved.root ?? {};
+    const { className: rootClassName, ref: rootSlotRef, style: rootStyle, sx: rootSx, ...rootOther } = rootProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const htmlInputProps = resolved.htmlInput ?? {};
+    const combinedInputRef = useForkRef(inputRef, htmlInputProps.ref);
+    const defaultFilter = React.useMemo(() => createFilterOptions(), []);
+    const filterOptions = (items, state) => {
+        if (filterMode === "server")
+            return items;
+        if (!filterOptionsProp)
+            return defaultFilter(items, { ...state, getOptionLabel: item => item.label });
+        const allowed = new Set(filterOptionsProp(items.map(item => item.option), state).map(getOptionValue));
+        return items.filter(item => allowed.has(item.value));
+    };
+    const emitRemove = (selection) => {
+        if (disabled || readOnly)
+            return;
+        const next = fieldState.value.filter(value => value !== selection.value);
+        field.handleChange(next);
+        onValueChange?.(next, { reason: "removeOption", option: selection.option, value: selection.value });
+    };
+    const handleChange = (_event, next, reason, details) => {
+        if (disabled || readOnly)
+            return;
+        if (reason === "clear") {
+            const previousValues = [...fieldState.value];
+            field.handleChange([]);
+            onValueChange?.([], { reason: "clear", previousValues });
+            return;
+        }
+        const changed = details?.option;
+        if (!changed)
+            return;
+        const values = next.map(item => item.value);
+        if (reason === "selectOption") {
+            if (atSelectionLimit && !fieldState.value.includes(changed.value))
+                return;
+            field.handleChange(values);
+            if (changed.option)
+                onValueChange?.(values, { reason: "selectOption", option: changed.option, value: changed.value });
+        }
+        else if (reason === "removeOption") {
+            field.handleChange(values);
+            onValueChange?.(values, { reason: "removeOption", option: changed.option, value: changed.value });
+        }
+    };
+    const handleInputChange = (_event, value, reason) => {
+        if (inputValueProp === undefined)
+            setInternalInputValue(value);
+        onInputValueChange?.(value, reason);
+    };
+    const handleOpen = () => {
+        if (openProp === undefined)
+            setInternalOpen(true);
+        onOpen?.();
+    };
+    const handleClose = (event, reason) => {
+        if (openProp === undefined)
+            setInternalOpen(false);
+        onClose?.(event, reason);
+    };
+    const LoadingText = slots.loadingText ?? VireoFormAutocompleteMultipleFieldLoadingText;
+    const NoOptionsText = slots.noOptionsText ?? VireoFormAutocompleteMultipleFieldNoOptionsText;
+    const ClearIcon = slots.clearIcon ?? VireoFormAutocompleteMultipleFieldClearIcon;
+    const PopupIcon = slots.popupIcon ?? VireoFormAutocompleteMultipleFieldPopupIcon;
+    const LoadingIndicator = slots.loadingIndicator ?? VireoFormAutocompleteMultipleFieldLoadingIndicator;
+    return (_jsx(VireoFormAutocompleteMultipleFieldRoot, { ...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, multiple: true, value: selections, options: normalizedOptions, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: item => item.label, getOptionKey: item => item.value, isOptionEqualToValue: (option, value) => option.value === value.value, getOptionDisabled: item => item.option
+                ? Boolean(getOptionDisabled?.(item.option)) || (atSelectionLimit && !fieldState.value.includes(item.value))
+                : true, 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, onKeyDown: event => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented)
+                    return;
+                if (!removeOnBackspace && event.key === "Backspace" && effectiveInputValue === "")
+                    event.defaultMuiPrevented = true;
+            }, 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 ?? VireoFormAutocompleteMultipleFieldPopper,
+                paper: slots.paper ?? VireoFormAutocompleteMultipleFieldPaper,
+                listbox: slots.listbox ?? VireoFormAutocompleteMultipleFieldListbox,
+                clearIndicator: slots.clearButton ?? VireoFormAutocompleteMultipleFieldClearButton,
+                popupIndicator: slots.popupButton ?? VireoFormAutocompleteMultipleFieldPopupButton,
+            }, 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),
+                },
+            }, renderValue: () => {
+                const SelectedOptions = slots.selectedOptions ?? VireoFormAutocompleteMultipleFieldSelectedOptions;
+                const SelectedOption = slots.selectedOption ?? VireoFormAutocompleteMultipleFieldSelectedOption;
+                const DeleteIcon = slots.selectedOptionDeleteIcon ?? VireoFormAutocompleteMultipleFieldSelectedOptionDeleteIcon;
+                const HiddenButton = slots.hiddenOptionsButton ?? VireoFormAutocompleteMultipleFieldHiddenOptionsButton;
+                const getRemoveButtonProps = (value) => {
+                    const selection = selections.find(item => item.value === value);
+                    return {
+                        "aria-label": getRemoveOptionLabel(selection),
+                        disabled: disabled || readOnly,
+                        onClick: (event) => {
+                            event.stopPropagation();
+                            emitRemove(selection);
+                        },
+                    };
+                };
+                if (renderSelectedOptions)
+                    return (_jsx(SelectedOptions, { ...resolved.selectedOptions, className: joinClassNames(classes.selectedOptions, resolved.selectedOptions?.className), ownerState: ownerState, children: renderSelectedOptions({
+                            selections,
+                            displayedSelections,
+                            hiddenCount,
+                            maxDisplayedOptions,
+                            getRemoveButtonProps,
+                        }) }));
+                return (_jsxs(SelectedOptions, { ...resolved.selectedOptions, className: joinClassNames(classes.selectedOptions, resolved.selectedOptions?.className), ownerState: ownerState, children: [displayedSelections.map(selection => (_createElement(SelectedOption, { ...resolved.selectedOption, key: selection.value, label: selection.label, title: selection.label, "aria-label": getRemoveOptionLabel(selection), className: joinClassNames(classes.selectedOption, resolved.selectedOption?.className), ownerState: ownerState, onDelete: disabled || readOnly
+                                ? undefined
+                                : (event) => {
+                                    resolved.selectedOption?.onDelete?.(event);
+                                    if (event.defaultPrevented)
+                                        return;
+                                    emitRemove(selection);
+                                }, onClick: disabled || readOnly
+                                ? undefined
+                                : (event) => {
+                                    resolved.selectedOption?.onClick?.(event);
+                                    if (event.defaultPrevented)
+                                        return;
+                                    emitRemove(selection);
+                                }, deleteIcon: _jsx(DeleteIcon, { ...resolved.selectedOptionDeleteIcon, "aria-label": getRemoveOptionLabel(selection), role: "button", className: joinClassNames(classes.selectedOptionDeleteIcon, resolved.selectedOptionDeleteIcon?.className), ownerState: ownerState }) }))), hiddenCount > 0 && (_jsx(HiddenButton, { ...resolved.hiddenOptionsButton, type: "button", "aria-label": getHiddenOptionsLabel(hiddenCount), className: joinClassNames(classes.hiddenOptionsButton, resolved.hiddenOptionsButton?.className), ownerState: ownerState, onClick: (event) => {
+                                resolved.hiddenOptionsButton?.onClick?.(event);
+                                if (event.defaultPrevented)
+                                    return;
+                                event.stopPropagation();
+                                handleOpen();
+                            }, children: getHiddenOptionsText(hiddenCount) }))] }));
+            }, renderOption: (optionProps, item, state) => {
+                const Option = slots.option ?? VireoFormAutocompleteMultipleFieldOption;
+                const Checkbox = slots.optionCheckbox ?? VireoFormAutocompleteMultipleFieldOptionCheckbox;
+                const unavailable = item.option
+                    ? Boolean(getOptionDisabled?.(item.option)) || (atSelectionLimit && !state.selected)
+                    : true;
+                const content = item.option && renderOption
+                    ? renderOption(item.option, {
+                        inputValue: state.inputValue,
+                        selected: state.selected,
+                        disabled: unavailable,
+                        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 },
+                    !hideOptionCheckbox && (_jsx(Checkbox, { ...resolved.optionCheckbox, checked: state.selected, tabIndex: -1, disableRipple: true, slotProps: { input: { "aria-hidden": true } }, className: joinClassNames(classes.optionCheckbox, resolved.optionCheckbox?.className), ownerState: ownerState })),
+                    content));
+            }, renderGroup: params => {
+                const Group = slots.group ?? VireoFormAutocompleteMultipleFieldGroup;
+                const GroupLabel = slots.groupLabel ?? VireoFormAutocompleteMultipleFieldGroupLabel;
+                const GroupList = slots.groupList ?? VireoFormAutocompleteMultipleFieldGroupList;
+                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 ?? VireoFormAutocompleteMultipleFieldTextField;
+                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 ?? VireoFormAutocompleteMultipleFieldInputLabel,
+                        input: slots.input ??
+                            (variant === "filled"
+                                ? VireoFormAutocompleteMultipleFieldFilledInput
+                                : variant === "standard"
+                                    ? VireoFormAutocompleteMultipleFieldStandardInput
+                                    : VireoFormAutocompleteMultipleFieldOutlinedInput),
+                        // 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 ?? VireoFormAutocompleteMultipleFieldFormHelperText,
+                    }, onFocus: (event) => {
+                        setFocused(true);
+                        resolved.textField?.onFocus?.(event);
+                    }, onBlur: (event) => {
+                        resolved.textField?.onBlur?.(event);
+                        if (event.defaultPrevented)
+                            return;
+                        onBlur?.(event);
+                        if (event.defaultPrevented)
+                            return;
+                        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,
+                            ...htmlInputProps,
+                            name: field.name,
+                            ref: (node) => {
+                                assignRef(autocompleteInputRef, node);
+                                assignRef(combinedInputRef, node);
+                            },
+                            className: joinClassNames(classes.htmlInput, params.slotProps.htmlInput.className, htmlInputProps.className),
+                            "aria-invalid": effectiveError || undefined,
+                        },
+                        formHelperText: {
+                            ...resolved.formHelperText,
+                            className: joinClassNames(classes.formHelperText, resolved.formHelperText?.className),
+                        },
+                    } }));
+            } }) }));
+}
+export const VireoFormAutocompleteMultipleField = React.forwardRef(VireoFormAutocompleteMultipleFieldImpl);
+VireoFormAutocompleteMultipleField.displayName =
+    VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME;

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

@@ -0,0 +1,35 @@
+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 { VireoFormAutocompleteMultipleFieldOwnerState } from "./VireoFormAutocompleteMultipleField.types.js";
+type StyledProps = StyledSlotProps<VireoFormAutocompleteMultipleFieldOwnerState>;
+type StyledComponent<TProps extends object> = StyledSlotComponent<TProps, VireoFormAutocompleteMultipleFieldOwnerState>;
+export declare const VireoFormAutocompleteMultipleFieldRoot: StyledComponent<BoxProps>;
+export declare const VireoFormAutocompleteMultipleFieldTextField: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldInputLabel: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldOutlinedInput: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldFilledInput: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldStandardInput: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldLoadingIndicator: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldClearButton: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldClearIcon: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldPopupButton: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldPopupIcon: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldFormHelperText: React.ElementType;
+type PopperSlotProps = PopperProps & StyledProps;
+type PaperSlotProps = PaperProps & StyledProps;
+export declare const VireoFormAutocompleteMultipleFieldPopper: React.ForwardRefExoticComponent<Omit<PopperSlotProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoFormAutocompleteMultipleFieldPaper: React.ForwardRefExoticComponent<Omit<PaperSlotProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoFormAutocompleteMultipleFieldLoadingText: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldNoOptionsText: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldListbox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & StyledProps & React.RefAttributes<HTMLUListElement>>;
+export declare const VireoFormAutocompleteMultipleFieldOption: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldGroup: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldGroupLabel: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldGroupList: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldSelectedOptions: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldSelectedOption: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldSelectedOptionDeleteIcon: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldHiddenOptionsButton: React.ElementType;
+export declare const VireoFormAutocompleteMultipleFieldOptionCheckbox: React.ElementType;
+export {};

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

@@ -0,0 +1,95 @@
+import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
+import Cancel from "@mui/icons-material/Cancel";
+import Close from "@mui/icons-material/Close";
+import { Box, Button, Checkbox, Chip, 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_AUTOCOMPLETE_MULTIPLE_FIELD_NAME } from "./VireoFormAutocompleteMultipleField.identity.js";
+const options = (slot) => ({
+    name: VIREO_FORM_AUTOCOMPLETE_MULTIPLE_FIELD_NAME,
+    slot,
+    overridesResolver: (_props, styles) => styles[slot.charAt(0).toLowerCase() + slot.slice(1)],
+});
+export const VireoFormAutocompleteMultipleFieldRoot = styled(Box, {
+    name: VIREO_FORM_AUTOCOMPLETE_MULTIPLE_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,
+        ownerState.hasUnresolvedValue && styles.hasUnresolvedValue,
+        ownerState.atSelectionLimit && styles.atSelectionLimit,
+        ownerState.hasHiddenOptions && styles.hasHiddenOptions,
+    ],
+})({ minWidth: 0 });
+export const VireoFormAutocompleteMultipleFieldTextField = styled(TextField, options("TextField"))({});
+export const VireoFormAutocompleteMultipleFieldInputLabel = styled(InputLabel, options("InputLabel"))({});
+export const VireoFormAutocompleteMultipleFieldOutlinedInput = styled(OutlinedInput, options("Input"))({});
+export const VireoFormAutocompleteMultipleFieldFilledInput = styled(FilledInput, options("Input"))({});
+export const VireoFormAutocompleteMultipleFieldStandardInput = styled(Input, options("Input"))({});
+export const VireoFormAutocompleteMultipleFieldLoadingIndicator = styled(CircularProgress, options("LoadingIndicator"))({});
+export const VireoFormAutocompleteMultipleFieldClearButton = styled(IconButton, options("ClearButton"))({});
+export const VireoFormAutocompleteMultipleFieldClearIcon = styled(Close, options("ClearIcon"))({});
+export const VireoFormAutocompleteMultipleFieldPopupButton = styled(IconButton, options("PopupButton"))({});
+export const VireoFormAutocompleteMultipleFieldPopupIcon = styled(ArrowDropDown, options("PopupIcon"))({});
+export const VireoFormAutocompleteMultipleFieldFormHelperText = styled(FormHelperText, options("FormHelperText"))({});
+const VireoFormAutocompleteMultipleFieldStyledPopper = styled(Popper, options("Popper"))(({ theme }) => ({ zIndex: theme.zIndex.modal }));
+const VireoFormAutocompleteMultipleFieldStyledPaper = styled(Paper, options("Paper"))(({ theme }) => ({ ...theme.typography.body1, overflow: "auto" }));
+export const VireoFormAutocompleteMultipleFieldPopper = React.forwardRef(function VireoFormAutocompleteMultipleFieldPopper(props, ref) {
+    return React.createElement(VireoFormAutocompleteMultipleFieldStyledPopper, { ...props, ref });
+});
+export const VireoFormAutocompleteMultipleFieldPaper = React.forwardRef(function VireoFormAutocompleteMultipleFieldPaper(props, ref) {
+    return React.createElement(VireoFormAutocompleteMultipleFieldStyledPaper, { ...props, ref });
+});
+export const VireoFormAutocompleteMultipleFieldLoadingText = styled("div", options("LoadingText"))({});
+export const VireoFormAutocompleteMultipleFieldNoOptionsText = styled("div", options("NoOptionsText"))({});
+const VireoFormAutocompleteMultipleFieldStyledListbox = styled("ul", options("Listbox"))({
+    listStyle: "none",
+    margin: 0,
+    maxHeight: "40vh",
+    overflow: "auto",
+    padding: "8px 0",
+    position: "relative",
+});
+export const VireoFormAutocompleteMultipleFieldListbox = React.forwardRef(function VireoFormAutocompleteMultipleFieldListbox(props, ref) {
+    return React.createElement(VireoFormAutocompleteMultipleFieldStyledListbox, { ...props, ref });
+});
+export const VireoFormAutocompleteMultipleFieldOption = 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 VireoFormAutocompleteMultipleFieldGroup = styled("li", options("Group"))({ listStyle: "none" });
+export const VireoFormAutocompleteMultipleFieldGroupLabel = styled(ListSubheader, options("GroupLabel"))(({ theme }) => ({ backgroundColor: theme.palette.background.paper, top: -8 }));
+export const VireoFormAutocompleteMultipleFieldGroupList = styled("ul", options("GroupList"))({ margin: 0, padding: 0, "& .MuiAutocomplete-option": { paddingLeft: 24 } });
+export const VireoFormAutocompleteMultipleFieldSelectedOptions = styled("div", options("SelectedOptions"))({ display: "flex", minWidth: 0, overflow: "hidden", gap: 4, flexWrap: "nowrap" });
+export const VireoFormAutocompleteMultipleFieldSelectedOption = styled(Chip, options("SelectedOption"))({ minWidth: 0, maxWidth: 180, "& .MuiChip-label": { overflow: "hidden", textOverflow: "ellipsis" } });
+export const VireoFormAutocompleteMultipleFieldSelectedOptionDeleteIcon = styled(Cancel, options("SelectedOptionDeleteIcon"))({});
+export const VireoFormAutocompleteMultipleFieldHiddenOptionsButton = styled(Button, options("HiddenOptionsButton"))({ minWidth: 0, flexShrink: 0 });
+export const VireoFormAutocompleteMultipleFieldOptionCheckbox = styled(Checkbox, options("OptionCheckbox"))({ marginRight: 8 });