@vireocodedev/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { type VireoFormActionsProps } from "./VireoFormActions.types.js";
+/**
+ * Keeps form actions in one horizontal row across every containing surface.
+ */
+export declare const VireoFormActions: React.ForwardRefExoticComponent<Omit<VireoFormActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoFormActions integration point. */
+export declare const VIREO_FORM_ACTIONS_NAME = "VireoFormActions";
+/** Canonical public slots exposed by VireoFormActions, in rendered DOM order. */
+export declare const VIREO_FORM_ACTIONS_SLOTS: readonly ["root", "layout"];
+/** Public slot names exposed by VireoFormActions. */
+export type VireoFormActionsSlotName = (typeof VIREO_FORM_ACTIONS_SLOTS)[number];

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

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoFormActions integration point. */
+export const VIREO_FORM_ACTIONS_NAME = "VireoFormActions";
+/** Canonical public slots exposed by VireoFormActions, in rendered DOM order. */
+export const VIREO_FORM_ACTIONS_SLOTS = ["root", "layout"];

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoFormActionsUtilityClass } from "./VireoFormActions.classes.js";
+import { VIREO_FORM_ACTIONS_NAME } from "./VireoFormActions.identity.js";
+import { VireoFormActionsLayout, VireoFormActionsRoot } from "./VireoFormActions.styled.js";
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        layout: ["layout"],
+    }, getVireoFormActionsUtilityClass, classes);
+}
+/**
+ * Keeps form actions in one horizontal row across every containing surface.
+ */
+export const VireoFormActions = React.forwardRef(function VireoFormActions(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_FORM_ACTIONS_NAME });
+    const { children, className, classes: classesProp, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const ownerState = {};
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const resolvedLayoutSlotProps = resolveSlotProps(slotProps.layout, ownerState);
+    const { className: layoutSlotClassName, ...layoutSlotOther } = resolvedLayoutSlotProps;
+    return (_jsx(VireoFormActionsRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: _jsx(VireoFormActionsLayout, { ...layoutSlotOther, as: slots.layout, ownerState: ownerState, className: joinClassNames(classes.layout, layoutSlotClassName), children: children }) }));
+});
+VireoFormActions.displayName = VIREO_FORM_ACTIONS_NAME;

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

@@ -0,0 +1,7 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps } from "@mui/material";
+import { type VireoFormActionsOwnerState } from "./VireoFormActions.types.js";
+type VireoFormActionsStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoFormActionsOwnerState>;
+export declare const VireoFormActionsRoot: VireoFormActionsStyledSlotComponent<BoxProps>;
+export declare const VireoFormActionsLayout: VireoFormActionsStyledSlotComponent<BoxProps>;
+export {};

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

@@ -0,0 +1,31 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_FORM_ACTIONS_NAME } from "./VireoFormActions.identity.js";
+export const VireoFormActionsRoot = styled(Box, {
+    name: VIREO_FORM_ACTIONS_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({
+    minWidth: 0,
+    width: "100%",
+});
+export const VireoFormActionsLayout = styled(Box, {
+    name: VIREO_FORM_ACTIONS_NAME,
+    slot: "Layout",
+    overridesResolver: (_props, styles) => styles.layout,
+})(({ theme }) => ({
+    alignItems: "stretch",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    gap: theme.spacing(1),
+    minWidth: 0,
+    width: "100%",
+    "& > :not(.MuiIconButton-root)": {
+        flex: "1 1 0",
+        minWidth: 0,
+    },
+    "& > .MuiIconButton-root": {
+        flex: "0 0 auto",
+    },
+}));

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

@@ -0,0 +1,39 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { Box, BoxProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoFormActionsClasses, type VireoFormActionsClassKey } from "./VireoFormActions.classes.js";
+import type { VIREO_FORM_ACTIONS_NAME, VireoFormActionsSlotName } from "./VireoFormActions.identity.js";
+export type VireoFormActionsOwnerState = Record<string, never>;
+export interface VireoFormActionsRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormActionsLayoutSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoFormActions}. */
+export type VireoFormActionsSlots = {
+    [TSlotName in VireoFormActionsSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoFormActions}. */
+export type VireoFormActionsSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoFormActionsSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoFormActionsRootSlotPropsOverrides, VireoFormActionsOwnerState>;
+    /** @default Box */
+    layout: SlotProps<typeof Box, VireoFormActionsLayoutSlotPropsOverrides, VireoFormActionsOwnerState>;
+}>;
+/** Props owned by {@link VireoFormActions}. */
+export type VireoFormActionsOwnProps = VireoFormActionsSlotsAndSlotProps & {
+    children: React.ReactNode;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoFormActionsClasses>;
+};
+/** Props VireoFormActions inherits from its default root after excluding component-owned props. */
+export type VireoFormActionsInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+/** Props accepted by {@link VireoFormActions}. */
+export type VireoFormActionsProps = VireoFormActionsOwnProps & VireoFormActionsInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_FORM_ACTIONS_NAME]?: VireoThemeComponent<VireoFormActionsProps, VireoFormActionsClassKey, VireoFormActionsOwnerState, Theme>;
+    }
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_FORM_AUTOCOMPLETE_FIELD_NAME, VIREO_FORM_AUTOCOMPLETE_FIELD_SLOTS, VIREO_FORM_AUTOCOMPLETE_FIELD_STATES, } from "./VireoFormAutocompleteField.identity.js";
+/** Returns the generated utility class name for a VireoFormAutocompleteField slot or state. */
+export function getVireoFormAutocompleteFieldUtilityClass(slot) {
+    return generateUtilityClass(VIREO_FORM_AUTOCOMPLETE_FIELD_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoFormAutocompleteField class key. */
+export const vireoFormAutocompleteFieldClasses = generateUtilityClasses(VIREO_FORM_AUTOCOMPLETE_FIELD_NAME, [...VIREO_FORM_AUTOCOMPLETE_FIELD_SLOTS, ...VIREO_FORM_AUTOCOMPLETE_FIELD_STATES]);

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

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

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

@@ -0,0 +1,5 @@
+export declare const VIREO_FORM_AUTOCOMPLETE_FIELD_NAME = "VireoFormAutocompleteField";
+export declare const VIREO_FORM_AUTOCOMPLETE_FIELD_SLOTS: readonly ["root", "textField", "inputLabel", "input", "htmlInput", "loadingIndicator", "clearButton", "clearIcon", "popupButton", "popupIcon", "formHelperText", "popper", "paper", "loadingText", "noOptionsText", "listbox", "option", "group", "groupLabel", "groupList"];
+export declare const VIREO_FORM_AUTOCOMPLETE_FIELD_STATES: readonly ["disabled", "readOnly", "required", "error", "focused", "dirty", "touched", "submitting", "validating", "open", "loading", "hasValue", "hasInputValue", "hasUnresolvedValue"];
+export type VireoFormAutocompleteFieldSlotName = (typeof VIREO_FORM_AUTOCOMPLETE_FIELD_SLOTS)[number];
+export type VireoFormAutocompleteFieldStateName = (typeof VIREO_FORM_AUTOCOMPLETE_FIELD_STATES)[number];

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

@@ -0,0 +1,39 @@
+export const VIREO_FORM_AUTOCOMPLETE_FIELD_NAME = "VireoFormAutocompleteField";
+export const VIREO_FORM_AUTOCOMPLETE_FIELD_SLOTS = [
+    "root",
+    "textField",
+    "inputLabel",
+    "input",
+    "htmlInput",
+    "loadingIndicator",
+    "clearButton",
+    "clearIcon",
+    "popupButton",
+    "popupIcon",
+    "formHelperText",
+    "popper",
+    "paper",
+    "loadingText",
+    "noOptionsText",
+    "listbox",
+    "option",
+    "group",
+    "groupLabel",
+    "groupList",
+];
+export const VIREO_FORM_AUTOCOMPLETE_FIELD_STATES = [
+    "disabled",
+    "readOnly",
+    "required",
+    "error",
+    "focused",
+    "dirty",
+    "touched",
+    "submitting",
+    "validating",
+    "open",
+    "loading",
+    "hasValue",
+    "hasInputValue",
+    "hasUnresolvedValue",
+];

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

@@ -0,0 +1,301 @@
+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 { getVireoFormAutocompleteFieldUtilityClass, } from "./VireoFormAutocompleteField.classes.js";
+import { VIREO_FORM_AUTOCOMPLETE_FIELD_NAME, } from "./VireoFormAutocompleteField.identity.js";
+import { VireoFormAutocompleteFieldClearButton, VireoFormAutocompleteFieldClearIcon, VireoFormAutocompleteFieldFilledInput, VireoFormAutocompleteFieldFormHelperText, VireoFormAutocompleteFieldGroup, VireoFormAutocompleteFieldGroupLabel, VireoFormAutocompleteFieldGroupList, VireoFormAutocompleteFieldInputLabel, VireoFormAutocompleteFieldListbox, VireoFormAutocompleteFieldLoadingIndicator, VireoFormAutocompleteFieldLoadingText, VireoFormAutocompleteFieldNoOptionsText, VireoFormAutocompleteFieldOption, VireoFormAutocompleteFieldOutlinedInput, VireoFormAutocompleteFieldPaper, VireoFormAutocompleteFieldPopper, VireoFormAutocompleteFieldPopupButton, VireoFormAutocompleteFieldPopupIcon, VireoFormAutocompleteFieldRoot, VireoFormAutocompleteFieldStandardInput, VireoFormAutocompleteFieldTextField, } from "./VireoFormAutocompleteField.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",
+        ],
+        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"],
+    }, getVireoFormAutocompleteFieldUtilityClass, classes);
+}
+function isValidValue(value) {
+    return typeof value === "string" ? value.length > 0 : Number.isFinite(value);
+}
+function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function VireoFormAutocompleteFieldImpl(inProps, forwardedRef) {
+    const props = useThemeProps({
+        props: inProps,
+        name: VIREO_FORM_AUTOCOMPLETE_FIELD_NAME,
+    });
+    const { className, classes: classesProp, clearIcon, clearLabel = "Clear selection", closeLabel = "Close options", defaultInputValue = "", defaultOpen = false, disabled = false, disableClearable = false, error = false, errorDisplay: errorDisplayProp, filterMode = "client", filterOptions: filterOptionsProp, formatError: formatErrorProp, fullWidth = true, getOptionDisabled, getOptionLabel, getOptionValue, getUnresolvedValueLabel, groupBy, helperText = " ", inputRef, inputValue: inputValueProp, label, 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, selectedOption, 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 seen = new Set();
+        const result = [];
+        for (const option of options) {
+            const value = getOptionValue(option);
+            if (!isValidValue(value) || seen.has(value)) {
+                if (process.env.NODE_ENV !== "production")
+                    console.warn(`${VIREO_FORM_AUTOCOMPLETE_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 selected = React.useMemo(() => {
+        if (fieldState.value === null)
+            return null;
+        const current = normalizedOptions.find(item => item.value === fieldState.value);
+        if (current)
+            return current;
+        if (selectedOption && getOptionValue(selectedOption) === fieldState.value) {
+            return { value: fieldState.value, label: getOptionLabel(selectedOption), resolved: true, option: selectedOption };
+        }
+        return {
+            value: fieldState.value,
+            label: getUnresolvedValueLabel?.(fieldState.value) ?? String(fieldState.value),
+            resolved: false,
+            option: null,
+        };
+    }, [fieldState.value, getOptionLabel, getOptionValue, getUnresolvedValueLabel, normalizedOptions, selectedOption]);
+    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: selected?.resolved === false,
+        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) => {
+        if (filterMode === "server")
+            return items;
+        if (!filterOptionsProp)
+            return defaultFilter(items, { ...state, getOptionLabel: item => item.label });
+        const filtered = filterOptionsProp(items.map(item => item.option), state);
+        const allowed = new Set(filtered.map(getOptionValue));
+        return items.filter(item => allowed.has(item.value));
+    };
+    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;
+        }
+        if (next.option) {
+            field.handleChange(next.value);
+            onValueChange?.(next.value, { reason: "selectOption", option: next.option, value: next.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 ?? VireoFormAutocompleteFieldLoadingText;
+    const NoOptionsText = slots.noOptionsText ?? VireoFormAutocompleteFieldNoOptionsText;
+    const ClearIcon = slots.clearIcon ?? VireoFormAutocompleteFieldClearIcon;
+    const PopupIcon = slots.popupIcon ?? VireoFormAutocompleteFieldPopupIcon;
+    const LoadingIndicator = slots.loadingIndicator ?? VireoFormAutocompleteFieldLoadingIndicator;
+    return (_jsx(VireoFormAutocompleteFieldRoot, { ...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, value: selected, options: normalizedOptions, getOptionLabel: item => item.label, getOptionKey: item => item.value, isOptionEqualToValue: (option, value) => option.value === value.value, getOptionDisabled: item => (item.option ? Boolean(getOptionDisabled?.(item.option)) : 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, 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 ?? VireoFormAutocompleteFieldPopper,
+                paper: slots.paper ?? VireoFormAutocompleteFieldPaper,
+                listbox: slots.listbox ?? VireoFormAutocompleteFieldListbox,
+                clearIndicator: slots.clearButton ?? VireoFormAutocompleteFieldClearButton,
+                popupIndicator: slots.popupButton ?? VireoFormAutocompleteFieldPopupButton,
+            }, 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 ?? VireoFormAutocompleteFieldOption;
+                const content = 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 ?? VireoFormAutocompleteFieldGroup;
+                const GroupLabel = slots.groupLabel ?? VireoFormAutocompleteFieldGroupLabel;
+                const GroupList = slots.groupList ?? VireoFormAutocompleteFieldGroupList;
+                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 ?? VireoFormAutocompleteFieldTextField;
+                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 ?? VireoFormAutocompleteFieldInputLabel,
+                        input: slots.input ??
+                            (variant === "filled"
+                                ? VireoFormAutocompleteFieldFilledInput
+                                : variant === "standard"
+                                    ? VireoFormAutocompleteFieldStandardInput
+                                    : VireoFormAutocompleteFieldOutlinedInput),
+                        // 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 ?? VireoFormAutocompleteFieldFormHelperText,
+                    }, 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,
+                            ...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 VireoFormAutocompleteField = React.forwardRef(VireoFormAutocompleteFieldImpl);
+VireoFormAutocompleteField.displayName = VIREO_FORM_AUTOCOMPLETE_FIELD_NAME;

package/dist/capabilities/forms/components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.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 { VireoFormAutocompleteFieldOwnerState } from "./VireoFormAutocompleteField.types.js";
+type StyledProps = StyledSlotProps<VireoFormAutocompleteFieldOwnerState>;
+type StyledComponent<TProps extends object> = StyledSlotComponent<TProps, VireoFormAutocompleteFieldOwnerState>;
+export declare const VireoFormAutocompleteFieldRoot: StyledComponent<BoxProps>;
+export declare const VireoFormAutocompleteFieldTextField: React.ElementType;
+export declare const VireoFormAutocompleteFieldInputLabel: React.ElementType;
+export declare const VireoFormAutocompleteFieldOutlinedInput: React.ElementType;
+export declare const VireoFormAutocompleteFieldFilledInput: React.ElementType;
+export declare const VireoFormAutocompleteFieldStandardInput: React.ElementType;
+export declare const VireoFormAutocompleteFieldLoadingIndicator: React.ElementType;
+export declare const VireoFormAutocompleteFieldClearButton: React.ElementType;
+export declare const VireoFormAutocompleteFieldClearIcon: React.ElementType;
+export declare const VireoFormAutocompleteFieldPopupButton: React.ElementType;
+export declare const VireoFormAutocompleteFieldPopupIcon: React.ElementType;
+export declare const VireoFormAutocompleteFieldFormHelperText: React.ElementType;
+type PopperSlotProps = PopperProps & StyledProps;
+type PaperSlotProps = PaperProps & StyledProps;
+export declare const VireoFormAutocompleteFieldPopper: React.ForwardRefExoticComponent<Omit<PopperSlotProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoFormAutocompleteFieldPaper: React.ForwardRefExoticComponent<Omit<PaperSlotProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoFormAutocompleteFieldLoadingText: React.ElementType;
+export declare const VireoFormAutocompleteFieldNoOptionsText: React.ElementType;
+export declare const VireoFormAutocompleteFieldListbox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & StyledProps & React.RefAttributes<HTMLUListElement>>;
+export declare const VireoFormAutocompleteFieldOption: React.ElementType;
+export declare const VireoFormAutocompleteFieldGroup: React.ElementType;
+export declare const VireoFormAutocompleteFieldGroupLabel: React.ElementType;
+export declare const VireoFormAutocompleteFieldGroupList: React.ElementType;
+export {};