@vireocodedev/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { VireoFormFreeSoloAutocompleteMultipleFieldProps } from "./VireoFormFreeSoloAutocompleteMultipleField.types.js";
+type Component = <TOption>(props: VireoFormFreeSoloAutocompleteMultipleFieldProps<TOption> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const VireoFormFreeSoloAutocompleteMultipleField: Component;
+export {};

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

@@ -0,0 +1,5 @@
+export declare const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME = "VireoFormFreeSoloAutocompleteMultipleField";
+export declare const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS: readonly ["root", "textField", "inputLabel", "input", "htmlInput", "loadingIndicator", "clearButton", "clearIcon", "popupButton", "popupIcon", "formHelperText", "popper", "paper", "loadingText", "noOptionsText", "listbox", "option", "group", "groupLabel", "groupList", "selectedOptions", "selectedOption", "selectedOptionDeleteIcon", "hiddenOptionsButton", "optionCheckbox"];
+export declare const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_STATES: readonly ["disabled", "readOnly", "required", "error", "focused", "dirty", "touched", "submitting", "validating", "open", "loading", "hasValue", "hasInputValue", "atSelectionLimit", "hasHiddenOptions"];
+export type VireoFormFreeSoloAutocompleteMultipleFieldSlotName = (typeof VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS)[number];
+export type VireoFormFreeSoloAutocompleteMultipleFieldStateName = (typeof VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_STATES)[number];

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

@@ -0,0 +1,45 @@
+export const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME = "VireoFormFreeSoloAutocompleteMultipleField";
+export const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_SLOTS = [
+    "root",
+    "textField",
+    "inputLabel",
+    "input",
+    "htmlInput",
+    "loadingIndicator",
+    "clearButton",
+    "clearIcon",
+    "popupButton",
+    "popupIcon",
+    "formHelperText",
+    "popper",
+    "paper",
+    "loadingText",
+    "noOptionsText",
+    "listbox",
+    "option",
+    "group",
+    "groupLabel",
+    "groupList",
+    "selectedOptions",
+    "selectedOption",
+    "selectedOptionDeleteIcon",
+    "hiddenOptionsButton",
+    "optionCheckbox",
+];
+export const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_STATES = [
+    "disabled",
+    "readOnly",
+    "required",
+    "error",
+    "focused",
+    "dirty",
+    "touched",
+    "submitting",
+    "validating",
+    "open",
+    "loading",
+    "hasValue",
+    "hasInputValue",
+    "atSelectionLimit",
+    "hasHiddenOptions",
+];

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

@@ -0,0 +1,410 @@
+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 { getVireoFormFreeSoloAutocompleteMultipleFieldUtilityClass, } from "./VireoFormFreeSoloAutocompleteMultipleField.classes.js";
+import { VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME, } from "./VireoFormFreeSoloAutocompleteMultipleField.identity.js";
+import { VireoFormFreeSoloAutocompleteMultipleFieldClearButton, VireoFormFreeSoloAutocompleteMultipleFieldClearIcon, VireoFormFreeSoloAutocompleteMultipleFieldFilledInput, VireoFormFreeSoloAutocompleteMultipleFieldFormHelperText, VireoFormFreeSoloAutocompleteMultipleFieldGroup, VireoFormFreeSoloAutocompleteMultipleFieldGroupLabel, VireoFormFreeSoloAutocompleteMultipleFieldGroupList, VireoFormFreeSoloAutocompleteMultipleFieldHiddenOptionsButton, VireoFormFreeSoloAutocompleteMultipleFieldInputLabel, VireoFormFreeSoloAutocompleteMultipleFieldListbox, VireoFormFreeSoloAutocompleteMultipleFieldLoadingIndicator, VireoFormFreeSoloAutocompleteMultipleFieldLoadingText, VireoFormFreeSoloAutocompleteMultipleFieldNoOptionsText, VireoFormFreeSoloAutocompleteMultipleFieldOption, VireoFormFreeSoloAutocompleteMultipleFieldOptionCheckbox, VireoFormFreeSoloAutocompleteMultipleFieldOutlinedInput, VireoFormFreeSoloAutocompleteMultipleFieldPaper, VireoFormFreeSoloAutocompleteMultipleFieldPopper, VireoFormFreeSoloAutocompleteMultipleFieldPopupButton, VireoFormFreeSoloAutocompleteMultipleFieldPopupIcon, VireoFormFreeSoloAutocompleteMultipleFieldRoot, VireoFormFreeSoloAutocompleteMultipleFieldSelectedOption, VireoFormFreeSoloAutocompleteMultipleFieldSelectedOptionDeleteIcon, VireoFormFreeSoloAutocompleteMultipleFieldSelectedOptions, VireoFormFreeSoloAutocompleteMultipleFieldStandardInput, VireoFormFreeSoloAutocompleteMultipleFieldTextField, } from "./VireoFormFreeSoloAutocompleteMultipleField.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.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"],
+    }, getVireoFormFreeSoloAutocompleteMultipleFieldUtilityClass, classes);
+}
+function validValue(value) {
+    return value.length > 0;
+}
+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 VireoFormFreeSoloAutocompleteMultipleFieldImpl(inProps, forwardedRef) {
+    const props = useThemeProps({
+        props: inProps,
+        name: VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME,
+    });
+    const { className, classes: classesProp, clearIcon, clearLabel = "Clear selections", closeLabel = "Close options", commitOnBlur = true, createOptionLabel = value => `Add “${value}”`, 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}`, groupBy, helperText = " ", hideOptionCheckbox = false, inputRef, inputValue: inputValueProp, isValueEqual = (left, right) => left === right, 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, normalizeValue = value => value.trim(), 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 result = [];
+        for (const option of options) {
+            const value = normalizeValue(getOptionValue(option));
+            if (!validValue(value) || result.some(item => isValueEqual(item.value, value))) {
+                if (process.env.NODE_ENV !== "production")
+                    console.warn(`${VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_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 selections = React.useMemo(() => fieldState.value.map(value => {
+        const current = normalizedOptions.find(item => isValueEqual(item.value, value));
+        if (current)
+            return current;
+        return { value, label: value, custom: true, option: null };
+    }), [fieldState.value, isValueEqual, 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,
+        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) => {
+        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 (validValue(customValue) &&
+            !items.some(item => isValueEqual(item.value, customValue)) &&
+            !fieldState.value.some(value => isValueEqual(value, customValue)))
+            return [...filtered, { value: customValue, label: customValue, custom: true, option: null }];
+        return filtered;
+    };
+    const emitRemove = (selection) => {
+        if (disabled || readOnly)
+            return;
+        const next = fieldState.value.filter(value => !isValueEqual(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 rawChanged = details?.option;
+        const changed = typeof rawChanged === "string"
+            ? { value: normalizeValue(rawChanged), label: rawChanged, custom: true, option: null }
+            : rawChanged;
+        if (!changed)
+            return;
+        const values = next
+            .map(item => normalizeValue(typeof item === "string" ? item : item.value))
+            .filter((value, index, all) => validValue(value) && all.findIndex(item => isValueEqual(item, value)) === index);
+        if (reason === "selectOption" || reason === "createOption") {
+            if (fieldState.value.some(value => isValueEqual(value, changed.value)))
+                return;
+            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
+                onValueChange?.(values, { reason: "createOption", 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 ?? VireoFormFreeSoloAutocompleteMultipleFieldLoadingText;
+    const NoOptionsText = slots.noOptionsText ?? VireoFormFreeSoloAutocompleteMultipleFieldNoOptionsText;
+    const ClearIcon = slots.clearIcon ?? VireoFormFreeSoloAutocompleteMultipleFieldClearIcon;
+    const PopupIcon = slots.popupIcon ?? VireoFormFreeSoloAutocompleteMultipleFieldPopupIcon;
+    const LoadingIndicator = slots.loadingIndicator ?? VireoFormFreeSoloAutocompleteMultipleFieldLoadingIndicator;
+    return (_jsx(VireoFormFreeSoloAutocompleteMultipleFieldRoot, { ...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, multiple: true, value: selections, options: normalizedOptions, disableCloseOnSelect: disableCloseOnSelect, 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)) ||
+                (atSelectionLimit && !fieldState.value.some(value => isValueEqual(value, item.value))), 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 ?? VireoFormFreeSoloAutocompleteMultipleFieldPopper,
+                paper: slots.paper ?? VireoFormFreeSoloAutocompleteMultipleFieldPaper,
+                listbox: slots.listbox ?? VireoFormFreeSoloAutocompleteMultipleFieldListbox,
+                clearIndicator: slots.clearButton ?? VireoFormFreeSoloAutocompleteMultipleFieldClearButton,
+                popupIndicator: slots.popupButton ?? VireoFormFreeSoloAutocompleteMultipleFieldPopupButton,
+            }, 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 ?? VireoFormFreeSoloAutocompleteMultipleFieldSelectedOptions;
+                const SelectedOption = slots.selectedOption ?? VireoFormFreeSoloAutocompleteMultipleFieldSelectedOption;
+                const DeleteIcon = slots.selectedOptionDeleteIcon ?? VireoFormFreeSoloAutocompleteMultipleFieldSelectedOptionDeleteIcon;
+                const HiddenButton = slots.hiddenOptionsButton ?? VireoFormFreeSoloAutocompleteMultipleFieldHiddenOptionsButton;
+                const getRemoveButtonProps = (value) => {
+                    const selection = selections.find(item => isValueEqual(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 ?? VireoFormFreeSoloAutocompleteMultipleFieldOption;
+                const Checkbox = slots.optionCheckbox ?? VireoFormFreeSoloAutocompleteMultipleFieldOptionCheckbox;
+                const unavailable = Boolean(item.option && getOptionDisabled?.(item.option)) || (atSelectionLimit && !state.selected);
+                const content = item.custom
+                    ? createOptionLabel(item.value)
+                    : 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 ?? VireoFormFreeSoloAutocompleteMultipleFieldGroup;
+                const GroupLabel = slots.groupLabel ?? VireoFormFreeSoloAutocompleteMultipleFieldGroupLabel;
+                const GroupList = slots.groupList ?? VireoFormFreeSoloAutocompleteMultipleFieldGroupList;
+                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 ?? VireoFormFreeSoloAutocompleteMultipleFieldTextField;
+                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 ?? VireoFormFreeSoloAutocompleteMultipleFieldInputLabel,
+                        input: slots.input ??
+                            (variant === "filled"
+                                ? VireoFormFreeSoloAutocompleteMultipleFieldFilledInput
+                                : variant === "standard"
+                                    ? VireoFormFreeSoloAutocompleteMultipleFieldStandardInput
+                                    : VireoFormFreeSoloAutocompleteMultipleFieldOutlinedInput),
+                        // 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 ?? VireoFormFreeSoloAutocompleteMultipleFieldFormHelperText,
+                    }, 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 &&
+                            validValue(nextValue) &&
+                            !fieldState.value.some(value => isValueEqual(value, nextValue)) &&
+                            !atSelectionLimit) {
+                            const next = [...fieldState.value, nextValue];
+                            field.handleChange(next);
+                            onValueChange?.(next, { reason: "createOption", value: nextValue });
+                            if (inputValueProp === undefined)
+                                setInternalInputValue("");
+                        }
+                        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 VireoFormFreeSoloAutocompleteMultipleField = React.forwardRef(VireoFormFreeSoloAutocompleteMultipleFieldImpl);
+VireoFormFreeSoloAutocompleteMultipleField.displayName =
+    VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME;

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteMultipleField/VireoFormFreeSoloAutocompleteMultipleField.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 { VireoFormFreeSoloAutocompleteMultipleFieldOwnerState } from "./VireoFormFreeSoloAutocompleteMultipleField.types.js";
+type StyledProps = StyledSlotProps<VireoFormFreeSoloAutocompleteMultipleFieldOwnerState>;
+type StyledComponent<TProps extends object> = StyledSlotComponent<TProps, VireoFormFreeSoloAutocompleteMultipleFieldOwnerState>;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldRoot: StyledComponent<BoxProps>;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldTextField: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldInputLabel: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldOutlinedInput: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldFilledInput: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldStandardInput: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldLoadingIndicator: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldClearButton: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldClearIcon: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldPopupButton: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldPopupIcon: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldFormHelperText: React.ElementType;
+type PopperSlotProps = PopperProps & StyledProps;
+type PaperSlotProps = PaperProps & StyledProps;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldPopper: React.ForwardRefExoticComponent<Omit<PopperSlotProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldPaper: React.ForwardRefExoticComponent<Omit<PaperSlotProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldLoadingText: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldNoOptionsText: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldListbox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & StyledProps & React.RefAttributes<HTMLUListElement>>;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldOption: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldGroup: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldGroupLabel: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldGroupList: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldSelectedOptions: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldSelectedOption: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldSelectedOptionDeleteIcon: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldHiddenOptionsButton: React.ElementType;
+export declare const VireoFormFreeSoloAutocompleteMultipleFieldOptionCheckbox: React.ElementType;
+export {};

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

@@ -0,0 +1,94 @@
+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_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME } from "./VireoFormFreeSoloAutocompleteMultipleField.identity.js";
+const options = (slot) => ({
+    name: VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_MULTIPLE_FIELD_NAME,
+    slot,
+    overridesResolver: (_props, styles) => styles[slot.charAt(0).toLowerCase() + slot.slice(1)],
+});
+export const VireoFormFreeSoloAutocompleteMultipleFieldRoot = styled(Box, {
+    name: VIREO_FORM_FREE_SOLO_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.atSelectionLimit && styles.atSelectionLimit,
+        ownerState.hasHiddenOptions && styles.hasHiddenOptions,
+    ],
+})({ minWidth: 0 });
+export const VireoFormFreeSoloAutocompleteMultipleFieldTextField = styled(TextField, options("TextField"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldInputLabel = styled(InputLabel, options("InputLabel"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldOutlinedInput = styled(OutlinedInput, options("Input"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldFilledInput = styled(FilledInput, options("Input"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldStandardInput = styled(Input, options("Input"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldLoadingIndicator = styled(CircularProgress, options("LoadingIndicator"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldClearButton = styled(IconButton, options("ClearButton"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldClearIcon = styled(Close, options("ClearIcon"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldPopupButton = styled(IconButton, options("PopupButton"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldPopupIcon = styled(ArrowDropDown, options("PopupIcon"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldFormHelperText = styled(FormHelperText, options("FormHelperText"))({});
+const VireoFormFreeSoloAutocompleteMultipleFieldStyledPopper = styled(Popper, options("Popper"))(({ theme }) => ({ zIndex: theme.zIndex.modal }));
+const VireoFormFreeSoloAutocompleteMultipleFieldStyledPaper = styled(Paper, options("Paper"))(({ theme }) => ({ ...theme.typography.body1, overflow: "auto" }));
+export const VireoFormFreeSoloAutocompleteMultipleFieldPopper = React.forwardRef(function VireoFormFreeSoloAutocompleteMultipleFieldPopper(props, ref) {
+    return React.createElement(VireoFormFreeSoloAutocompleteMultipleFieldStyledPopper, { ...props, ref });
+});
+export const VireoFormFreeSoloAutocompleteMultipleFieldPaper = React.forwardRef(function VireoFormFreeSoloAutocompleteMultipleFieldPaper(props, ref) {
+    return React.createElement(VireoFormFreeSoloAutocompleteMultipleFieldStyledPaper, { ...props, ref });
+});
+export const VireoFormFreeSoloAutocompleteMultipleFieldLoadingText = styled("div", options("LoadingText"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldNoOptionsText = styled("div", options("NoOptionsText"))({});
+const VireoFormFreeSoloAutocompleteMultipleFieldStyledListbox = styled("ul", options("Listbox"))({
+    listStyle: "none",
+    margin: 0,
+    maxHeight: "40vh",
+    overflow: "auto",
+    padding: "8px 0",
+    position: "relative",
+});
+export const VireoFormFreeSoloAutocompleteMultipleFieldListbox = React.forwardRef(function VireoFormFreeSoloAutocompleteMultipleFieldListbox(props, ref) {
+    return React.createElement(VireoFormFreeSoloAutocompleteMultipleFieldStyledListbox, { ...props, ref });
+});
+export const VireoFormFreeSoloAutocompleteMultipleFieldOption = 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 VireoFormFreeSoloAutocompleteMultipleFieldGroup = styled("li", options("Group"))({ listStyle: "none" });
+export const VireoFormFreeSoloAutocompleteMultipleFieldGroupLabel = styled(ListSubheader, options("GroupLabel"))(({ theme }) => ({ backgroundColor: theme.palette.background.paper, top: -8 }));
+export const VireoFormFreeSoloAutocompleteMultipleFieldGroupList = styled("ul", options("GroupList"))({ margin: 0, padding: 0, "& .MuiAutocomplete-option": { paddingLeft: 24 } });
+export const VireoFormFreeSoloAutocompleteMultipleFieldSelectedOptions = styled("div", options("SelectedOptions"))({ display: "flex", minWidth: 0, overflow: "hidden", gap: 4, flexWrap: "nowrap" });
+export const VireoFormFreeSoloAutocompleteMultipleFieldSelectedOption = styled(Chip, options("SelectedOption"))({ minWidth: 0, maxWidth: 180, "& .MuiChip-label": { overflow: "hidden", textOverflow: "ellipsis" } });
+export const VireoFormFreeSoloAutocompleteMultipleFieldSelectedOptionDeleteIcon = styled(Cancel, options("SelectedOptionDeleteIcon"))({});
+export const VireoFormFreeSoloAutocompleteMultipleFieldHiddenOptionsButton = styled(Button, options("HiddenOptionsButton"))({ minWidth: 0, flexShrink: 0 });
+export const VireoFormFreeSoloAutocompleteMultipleFieldOptionCheckbox = styled(Checkbox, options("OptionCheckbox"))({ marginRight: 8 });