@evoke-platform/ui-components 1.10.1-dev.0 → 1.10.1-dev.2

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -1,5 +1,4 @@
 import { AddRounded, UnfoldMore } from '@mui/icons-material';
-import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -7,7 +6,7 @@ import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestI
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
 import { TrashCan } from '../../../icons/custom';
-import { Autocomplete, Button, IconButton } from '../../core';
+import { Autocomplete, Button, IconButton, Typography } from '../../core';
 import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
 import { difference } from '../util';
@@ -181,7 +180,7 @@ const customSelector = (props) => {
         });
         handleOnChange(propertyId);
     };
-    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
+    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, propertyTreeMap: context.propertyTreeMap ?? {}, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return opts.find((o) => option === o.name)?.label || option;
             }
@@ -264,6 +263,18 @@ export const valueEditor = (props) => {
     }
     return ValueEditor(props);
 };
+const getAllRuleIds = (rules) => {
+    const ids = [];
+    rules.forEach((rule) => {
+        if ('rules' in rule) {
+            ids.push(...getAllRuleIds(rule.rules));
+        }
+        else {
+            ids.push(rule.field);
+        }
+    });
+    return ids;
+};
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
     const [propertyTreeMap, setPropertyTreeMap] = useState();
@@ -299,18 +310,7 @@ const CriteriaBuilder = (props) => {
             // they are then used in the custom query builder components to determine the input type etc
             const updatePropertyTreeMap = async () => {
                 const newQuery = parseMongoDB(criteria || originalCriteria || {});
-                const ids = [];
-                const traverseRulesForIds = (rules) => {
-                    rules.forEach((rule) => {
-                        if ('rules' in rule) {
-                            traverseRulesForIds(rule.rules);
-                        }
-                        else {
-                            ids.push(rule.field);
-                        }
-                    });
-                };
-                traverseRulesForIds(newQuery.rules);
+                const ids = getAllRuleIds(newQuery.rules);
                 let newPropertyTreeMap = {};
                 const newPropertyTreeMapPromises = [];
                 for (const id of ids) {

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.d.ts

@@ -1,10 +1,12 @@
+import { Property } from '@evoke-platform/context';
 import React from 'react';
 import { EvokeObject } from '../../../types';
 type PropertyTreeProps = {
     fetchObject: (id: string) => Promise<EvokeObject | undefined>;
     rootObject: EvokeObject;
-    handleTreePropertySelect: (propertyId: string) => void;
+    handleTreePropertySelect: (propertyId: string) => Promise<void>;
     value: string | undefined;
+    propertyTreeMap: Record<string, Property>;
 };
-declare const PropertyTree: ({ fetchObject, handleTreePropertySelect, rootObject, value }: PropertyTreeProps) => React.JSX.Element;
+declare const PropertyTree: (props: PropertyTreeProps) => React.JSX.Element;
 export default PropertyTree;

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.js

@@ -1,160 +1,83 @@
-import { ChevronRight, ExpandMore } from '@mui/icons-material';
+import { ClickAwayListener } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, MenuItem, TreeView } from '../../core';
+import { Autocomplete, RichTreeView } from '../../core';
+import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
-import PropertyTreeItem from './PropertyTreeItem';
-import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
-const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
-    const [expandedNodes, setExpandedNodes] = useState([]);
-    const [objectPropertyNamePathMap, setObjectPropertyNamePathMap] = useState({});
-    const [objectProperties, setObjectProperties] = useState(rootObject.properties ?? []);
-    const [propertyOptions, setPropertyOptions] = useState([]);
-    const NAME_PATH_LIMIT = 35;
-    const originalValue = value ?? '';
-    const flattenObjectProperties = (properties) => {
-        let result = [];
-        properties.forEach((property) => {
-            const { children, ...rest } = property;
-            const fullId = property.id;
-            const fullName = property.name;
-            const newProperty = {
-                ...rest,
-                id: fullId,
-                name: fullName,
-            };
-            result.push(newProperty);
-            // If the property has children, recursively process them
-            if (children && children.length > 0) {
-                const childProperties = flattenObjectProperties(children);
-                result = result.concat(childProperties);
-            }
-        });
-        return result;
-    };
+import { PropertyTreeItem } from './PropertyTreeItem';
+import { findTreeItemById, truncateNamePath, updateTreeNode } from './utils';
+const NAME_PATH_LIMIT = 35;
+const PropertyTree = (props) => {
+    const { fetchObject, handleTreePropertySelect, rootObject, value, propertyTreeMap } = props;
+    const [options, setOptions] = useState([]);
+    const [expandedItems, setExpandedItems] = useState([]);
+    const [openDropdown, setOpenDropdown] = useState(false);
     useEffect(() => {
-        const flattendProperties = flattenObjectProperties(objectProperties);
-        setPropertyOptions(flattendProperties);
-        if (objectProperties) {
-            const fetchDisplayNames = async () => {
-                const results = await Promise.all(flattendProperties.map(async (property) => {
-                    const objectPropertyNamePath = await fetchDisplayNamePath(property.id, rootObject, fetchObject);
-                    return { [property.id]: objectPropertyNamePath };
-                }));
-                let newObjectPropertyNamePathMap = {};
-                results.forEach((result) => {
-                    newObjectPropertyNamePathMap = { ...newObjectPropertyNamePathMap, ...result };
-                });
-                setObjectPropertyNamePathMap(newObjectPropertyNamePathMap);
-                //Fetch the display name path for the original value
-                if (originalValue) {
-                    if (originalValue.includes('.')) {
-                        const parts = originalValue.split('.');
-                        if (parts.length >= 2) {
-                            if (!newObjectPropertyNamePathMap[originalValue]) {
-                                const fieldNamePath = await fetchDisplayNamePath(originalValue, rootObject, fetchObject);
-                                newObjectPropertyNamePathMap = {
-                                    ...newObjectPropertyNamePathMap,
-                                    [originalValue]: fieldNamePath,
-                                };
-                                setObjectPropertyNamePathMap(newObjectPropertyNamePathMap);
-                            }
-                        }
-                    }
-                }
-            };
-            fetchDisplayNames();
-        }
-    }, [originalValue, rootObject, objectProperties, fetchObject]);
-    const handleNodeToggle = (event, nodeIds) => {
-        const newlyExpandedNodes = nodeIds.filter((id) => !expandedNodes.includes(id));
-        newlyExpandedNodes.forEach((nodeId) => {
-            handleLoadData(nodeId);
-        });
-        setExpandedNodes(nodeIds);
+        // Transform rootObject properties to TreeItem format
+        setOptions(rootObject.properties.map((property) => ({
+            id: property.id,
+            label: property.name,
+            value: property.id,
+            type: property.type,
+            objectId: property.objectId,
+            children: property.children
+                ? property.children.map((child) => ({
+                    id: child.id,
+                    label: child.name,
+                    value: child.id,
+                    type: child.type,
+                    objectId: child.objectId,
+                }))
+                : undefined,
+        })));
+        setExpandedItems([]);
+    }, [rootObject.properties]);
+    const handleExpandedItemsChange = (e, itemIds) => {
+        setExpandedItems(itemIds);
     };
-    const updateObjectProperties = (nodeId, newChildren) => {
-        setObjectProperties((prevProperties) => updateTreeNode(prevProperties, nodeId, (node) => ({ ...node, children: newChildren })));
+    const handleUpdateNodeChildren = (nodeId, children) => {
+        setOptions((prevOptions) => updateTreeNode(prevOptions, nodeId, (node) => ({ ...node, children })));
     };
-    const handleLoadData = async (nodeId) => {
-        const availableProperty = findPropertyById(objectProperties, nodeId);
-        if (!availableProperty || !availableProperty.objectId)
-            return;
-        const object = await fetchObject(availableProperty.objectId);
-        if (object?.properties) {
-            const properties = object.properties.filter((prop) => !['collection', 'image', 'documents'].includes(prop.type));
-            // this step adds path specific ids to the user and address fields
-            const newChildren = setIdPaths(properties, nodeId);
-            updateObjectProperties(availableProperty.id, newChildren);
-        }
-    };
-    const handleNodeSelect = (event, nodeId) => {
-        const node = findPropertyById(objectProperties, nodeId);
-        if (node?.children) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    const handleTreeItemClick = (propertyId) => {
-        const property = findPropertyById(objectProperties, propertyId);
-        // this prevents the selection of a parent node
-        if (property && !property.children) {
-            handleTreePropertySelect(property.id);
-        }
-    };
-    return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: {
-            width: '37%',
-        }, disableClearable: true, options: propertyOptions.map((property) => {
-            return {
-                label: objectPropertyNamePathMap[property.id],
-                value: property.id,
-            };
-        }), componentsProps: {
-            paper: {
-                sx: {
-                    '& .MuiAutocomplete-option': {
-                        '&.Mui-focused': {
-                            '&:has(.MuiTreeItem-group)': {
-                                backgroundColor: 'transparent', // Remove background color if child of TreeView
-                            },
-                        },
-                    },
-                },
-            },
-        }, getOptionLabel: (option) => {
+    return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: { width: '37%' }, size: "small", disableClearable: true, options: options, open: openDropdown, onBlur: (e) => {
+            const targetComponents = e.relatedTarget?.getAttribute('id')?.split('-');
+            // If the user clicks on tree component with children, don't close the menu.
+            if (targetComponents?.[targetComponents.length - 1]) {
+                const treeItem = findTreeItemById(options, targetComponents[targetComponents.length - 1]);
+                // Only keep dropdown open if the clicked item has children AND was not selected
+                if (!treeItem?.children) {
+                    setOpenDropdown(false);
+                }
+            }
+            else {
+                setOpenDropdown(false);
+            }
+        }, onOpen: () => setOpenDropdown(true), onClose: (e, reason) => {
+            // Only close if user clicked the caret close icon
+            if (reason === 'toggleInput') {
+                setOpenDropdown(false);
+            }
+        }, onFocus: () => setOpenDropdown(true), getOptionLabel: (option) => {
             // Retrieve the full name path from the map
             const namePath = typeof option === 'string'
-                ? (objectPropertyNamePathMap[option] ?? '')
-                : (objectPropertyNamePathMap[option.value] ?? '');
+                ? ((propertyTreeMap[option] ?? '')?.name ?? option)
+                : (propertyTreeMap[option.value]?.name ?? option.value);
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
-            const fullDisplayName = value && objectPropertyNamePathMap[value];
-            return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, size: "small", placeholder: "Select a property", variant: "outlined" }));
-        }, isOptionEqualToValue: (option, val) => {
-            if (typeof val === 'string') {
-                return option.value === val;
-            }
-            return option.value === val?.value;
-        }, renderOption: (props, option) => {
-            // Find the corresponding property in objectProperties
-            const property = objectProperties.find((prop) => prop.id === option.value);
-            if (property) {
-                if (property.type === 'object') {
-                    return (React.createElement("li", { ...props },
-                        React.createElement(TreeView, { role: "menu", "aria-label": "Property Tree", defaultCollapseIcon: React.createElement(ExpandMore, null), defaultExpandIcon: React.createElement(ChevronRight, null), onNodeToggle: handleNodeToggle, expanded: expandedNodes, onNodeSelect: handleNodeSelect, sx: { width: '100%' } },
-                            React.createElement(PropertyTreeItem, { key: option.value, treeData: objectProperties, property: property, fetchObject: fetchObject, onClick: handleTreeItemClick }))));
-                }
-                // top level items
-                return (React.createElement(MenuItem, { sx: {
-                        '&:hover': {
-                            backgroundColor: 'transparent',
-                        },
-                        '.MuiTreeItem-group &': {
-                            '&:hover': {
-                                backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                            },
-                        },
-                    }, onClick: () => handleTreeItemClick(property?.id), key: property.id, value: property.id }, property.name));
-            }
+            const fullDisplayName = value && propertyTreeMap[value]?.name;
+            return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, placeholder: "Select a property" }));
+        }, ListboxComponent: (props) => {
+            return (React.createElement(ClickAwayListener, { onClickAway: (e) => {
+                    // Close the dropdown when clicking outside but don't close when clicking to the autocomplete input
+                    if (!e.target.closest('.MuiAutocomplete-root')) {
+                        setOpenDropdown(false);
+                    }
+                } },
+                React.createElement(Box, { ...props },
+                    React.createElement(RichTreeView, { sx: { width: '100%', paddingLeft: 0 }, role: "menu", "aria-label": "Property Tree", expandedItems: expandedItems, onExpandedItemsChange: handleExpandedItemsChange, items: options, slots: {
+                            item: (itemProps) => (React.createElement(PropertyTreeItem, { ...itemProps, items: options, expanded: expandedItems, setExpanded: setExpandedItems, fetchObject: fetchObject, updateNodeChildren: handleUpdateNodeChildren, handleTreePropertySelect: async (propertyId) => {
+                                    await handleTreePropertySelect(propertyId);
+                                    setOpenDropdown(false);
+                                } })),
+                        } }))));
         } }));
 };
 export default PropertyTree;

package/dist/published/components/custom/CriteriaBuilder/PropertyTreeItem.d.ts

@@ -1,10 +1,14 @@
+import { TreeItemProps } from '@mui/x-tree-view';
 import React from 'react';
-import { ExpandedProperty, Obj } from '../../../types';
-type PropertyTreeItemProps = {
-    property: ExpandedProperty | undefined;
+import { Obj } from '../../../types';
+import { TreeItem } from './types';
+type PropertyTreeItemProps = TreeItemProps & {
+    items: TreeItem[];
+    expanded: string[];
+    setExpanded: (expanded: string[]) => void;
+    updateNodeChildren: (nodeId: string, children: TreeItem[]) => void;
     fetchObject: (id: string) => Promise<Obj | undefined>;
-    treeData: ExpandedProperty[];
-    onClick: (property: string) => void;
+    handleTreePropertySelect: (propertyId: string) => Promise<void>;
 };
-declare const PropertyTreeItem: ({ property, fetchObject, treeData, onClick }: PropertyTreeItemProps) => React.JSX.Element | null;
-export default PropertyTreeItem;
+export declare const PropertyTreeItem: (props: PropertyTreeItemProps) => React.JSX.Element;
+export {};

package/dist/published/components/custom/CriteriaBuilder/PropertyTreeItem.js

@@ -1,43 +1,45 @@
-import { TreeItem } from '@mui/lab';
-import { MenuItem } from '@mui/material';
 import React from 'react';
-const PropertyTreeItem = ({ property, fetchObject, treeData, onClick }) => {
-    if (!property) {
-        return null;
-    }
-    const hasChildren = property.children && property.children.length > 0;
-    if (hasChildren) {
-        // Parent node
-        return (React.createElement(TreeItem, { nodeId: property.id, role: "menu", label: property.name, onClick: () => onClick(property.id), sx: {
-                paddingTop: '6px',
-                paddingBottom: '6px',
-                '.MuiCollapse-root': {
-                    'MuiTreeItem-group': {
-                        width: '100%',
-                    },
-                },
-                '& .MuiTreeItem-content': {
-                    '&:hover': {
-                        backgroundColor: 'transparent',
-                    },
-                },
-                '& .MuiTreeItem-group .MuiTreeItem-content:hover': {
-                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                },
-            } }, property.children?.map((child) => (React.createElement(PropertyTreeItem, { onClick: onClick, treeData: treeData, key: child.id, property: child, fetchObject: fetchObject })))));
-    }
-    else {
-        // Leaf node, render as MenuItem
-        return (React.createElement(MenuItem, { sx: {
-                '&:hover': {
-                    backgroundColor: 'transparent',
-                },
-                '.MuiTreeItem-group &': {
-                    '&:hover': {
-                        backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                    },
-                },
-            }, onClick: () => onClick(property.id), key: property.id, value: property.id }, property.name));
-    }
+import { RichTreeItem } from '../../core';
+import { findTreeItemById } from './utils';
+export const PropertyTreeItem = (props) => {
+    const { itemId, label, items, setExpanded, expanded, children, updateNodeChildren, fetchObject, handleTreePropertySelect, } = props;
+    const onClick = async (e) => {
+        // If the item is already expanded, collapse it.
+        if (expanded.includes(itemId)) {
+            e.stopPropagation();
+            setExpanded(expanded.filter((id) => id !== itemId));
+            return;
+        }
+        const item = findTreeItemById(items, itemId);
+        if (item?.type === 'object') {
+            e.stopPropagation();
+            // If the item has an associated "objectId", fetch the properties of the object and expand the item.
+            if (item.objectId && item.children?.length === 1 && item.children[0].type === 'loading') {
+                const object = item.objectId ? await fetchObject(item.objectId) : undefined;
+                if (object) {
+                    updateNodeChildren(itemId, (object.properties ?? []).map((prop) => ({
+                        id: `${itemId}.${prop.id}`,
+                        label: prop.name,
+                        value: `${itemId}.${prop.id}`,
+                        type: prop.type,
+                        objectId: prop.objectId,
+                        children: prop.type === 'object'
+                            ? [
+                                {
+                                    id: `${itemId}.${prop.id}-loading`,
+                                    label: 'Loading...',
+                                    value: `${itemId}.${prop.id}-loading`,
+                                    type: 'loading',
+                                },
+                            ]
+                            : undefined,
+                    })));
+                }
+            }
+            setExpanded([...expanded, itemId]);
+            return;
+        }
+        await handleTreePropertySelect(itemId);
+    };
+    return React.createElement(RichTreeItem, { itemId: itemId, label: label, children: children, onClick: onClick });
 };
-export default PropertyTreeItem;

package/dist/published/components/custom/CriteriaBuilder/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BaseSelectorProps } from 'react-querybuilder';
 import { ExpandedProperty } from '../../../types';
-import { AutocompleteOption } from '../../core';
+import { AutocompleteOption, TreeViewBaseItem } from '../../core';
 export type ObjectProperty = {
     id: string;
     name: string;
@@ -51,3 +51,10 @@ export type MongoDBQueryValue = null | string | boolean | {
     $in?: unknown[];
     $nin?: unknown[];
 };
+export type TreeItem = TreeViewBaseItem<{
+    id: string;
+    label: string;
+    value: string;
+    type?: string;
+    objectId?: string;
+}>;

package/dist/published/components/custom/CriteriaBuilder/utils.d.ts

@@ -1,23 +1,16 @@
 import { Property } from '@evoke-platform/context';
 import { RuleGroupType } from 'react-querybuilder';
-import { ExpandedProperty, Obj, ObjectProperty } from '../../../types';
+import { Obj, ObjectProperty } from '../../../types';
+import { TreeItem } from './types';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
- * @param {ExpandedProperty[]} tree - The tree structure to update.
+ * @param {TreeItem[]} tree - The tree structure to update.
  * @param {string} nodeId - The ID of the node to update.
- * @param {(node: ExpandedProperty) => ExpandedProperty} updater - The function to apply to the node.
- * @returns {ExpandedProperty[]} - The updated tree structure.
+ * @param {(node: TreeItem) => TreeItem} updater - The function to apply to the node.
+ * @returns {TreeItem[]} - The updated tree structure.
  */
-export declare const updateTreeNode: (tree: ExpandedProperty[], nodeId: string, updater: (node: ExpandedProperty) => ExpandedProperty) => ExpandedProperty[];
-/**
- * Recursively searches for a property in a tree structure by its ID.
- *
- * @param {ExpandedProperty[]} properties - The tree structure to search.
- * @param {string} id - The ID of the property to find.
- * @returns {ExpandedProperty | null} - The found property or null if not found.
- */
-export declare const findPropertyById: (properties: ExpandedProperty[], id: string) => ExpandedProperty | null;
+export declare const updateTreeNode: (tree: TreeItem[], nodeId: string, updater: (node: TreeItem) => TreeItem) => TreeItem[];
 type FetchObjectFunction = (id: string) => Promise<Obj | undefined>;
 /**
  * Fetches the display name path for a given property ID within an object hierarchy.
@@ -74,4 +67,5 @@ export declare const ALL_OPERATORS: {
  * @returns {string} The resulting query string.
  */
 export declare const getReadableQuery: (mongoQuery?: Record<string, unknown>, properties?: Property[]) => string;
+export declare const findTreeItemById: (nodes: TreeItem[], nodeId: string) => TreeItem | null;
 export {};

package/dist/published/components/custom/CriteriaBuilder/utils.js

@@ -2,10 +2,10 @@ import { isArray, isEmpty, startCase } from 'lodash';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
- * @param {ExpandedProperty[]} tree - The tree structure to update.
+ * @param {TreeItem[]} tree - The tree structure to update.
  * @param {string} nodeId - The ID of the node to update.
- * @param {(node: ExpandedProperty) => ExpandedProperty} updater - The function to apply to the node.
- * @returns {ExpandedProperty[]} - The updated tree structure.
+ * @param {(node: TreeItem) => TreeItem} updater - The function to apply to the node.
+ * @returns {TreeItem[]} - The updated tree structure.
  */
 export const updateTreeNode = (tree, nodeId, updater) => {
     return tree.map((node) => {
@@ -20,26 +20,6 @@ export const updateTreeNode = (tree, nodeId, updater) => {
         }
     });
 };
-/**
- * Recursively searches for a property in a tree structure by its ID.
- *
- * @param {ExpandedProperty[]} properties - The tree structure to search.
- * @param {string} id - The ID of the property to find.
- * @returns {ExpandedProperty | null} - The found property or null if not found.
- */
-export const findPropertyById = (properties, id) => {
-    for (const prop of properties) {
-        if (prop.id === id) {
-            return prop;
-        }
-        else if (prop.children) {
-            const result = findPropertyById(prop.children, id);
-            if (result)
-                return result;
-        }
-    }
-    return null;
-};
 /**
  * Fetches the display name path for a given property ID within an object hierarchy.
  *
@@ -359,3 +339,13 @@ export const getReadableQuery = (mongoQuery, properties) => {
     const parsedQuery = parseMongoDB(mongoQuery);
     return buildQueryString(parsedQuery);
 };
+export const findTreeItemById = (nodes, nodeId) => {
+    for (const node of nodes) {
+        if (node.id === nodeId)
+            return node;
+        const found = node.children && findTreeItemById(node.children, nodeId);
+        if (found)
+            return found;
+    }
+    return null;
+};

package/dist/published/components/custom/FormField/Select/Select.js

@@ -2,12 +2,14 @@ import { createFilterOptions, List, ListSubheader } from '@mui/material';
 import { uniq } from 'lodash';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { Clear } from '../../../../icons';
+import { useFormContext } from '../../../../theme/hooks';
 import { Autocomplete, FormControl, FormControlLabel, IconButton, Radio, RadioGroup, TextField, Typography, } from '../../../core';
 import { Box } from '../../../layout';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const filter = createFilterOptions();
 const Select = (props) => {
     const { id, property, defaultValue, error, errorMessage, onBlur, onChange, readOnly, isCombobox, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
+    const { onAutosave } = useFormContext();
     const otherInputRef = useRef(null);
     const [isOther, setIsOther] = useState(!!isCombobox &&
         !!defaultValue &&
@@ -32,7 +34,7 @@ const Select = (props) => {
         setValue(defaultValue);
     }, [defaultValue]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleChange = (event, selected) => {
+    const handleChange = async (event, selected) => {
         if (Array.isArray(selected)) {
             const newValues = selected.map((option) => option.value ?? option);
             setValue(uniq(newValues));
@@ -56,6 +58,12 @@ const Select = (props) => {
                 onChange && onChange(property.id, selected, property);
             }
         }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleInputValueChange = (event, selectValue) => {
@@ -121,22 +129,29 @@ const Select = (props) => {
                             }
                             setIsOtherFocused(false);
                         } })))))),
-        displayOption === 'radioButton' && onChange && !readOnly && value && (React.createElement(Box, { sx: {
+        onChange && !readOnly && value && (React.createElement(Box, { sx: {
                 ':hover': { cursor: 'pointer' },
                 marginTop: '4px',
                 display: 'flex',
                 alignItems: 'center',
             } },
-            React.createElement(IconButton, { "aria-label": `Clear`, onClick: () => {
+            React.createElement(IconButton, { "aria-label": `Clear`, onClick: async () => {
                     setValue('');
                     property && onChange(property.id, '');
                     setIsOther(false);
+                    // Trigger autosave immediately when clearing radio selection
+                    try {
+                        await onAutosave?.(id);
+                    }
+                    catch (error) {
+                        console.error('Autosave failed:', error);
+                    }
                 }, sx: { padding: '3px', marginRight: '6px' } },
                 React.createElement(Clear, { sx: {
                         color: '#637381',
                         fontSize: '1.2rem',
                     } })),
-            React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
+            React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array', id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
                 ...params.inputProps,
                 'aria-describedby': isCombobox ? `${id}-instructions` : undefined,
             } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
@@ -169,6 +184,10 @@ const Select = (props) => {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },
+        }, slotProps: {
+            clearIndicator: {
+                'data-testid': 'autocomplete-clear-button',
+            },
         }, forcePopupIcon: true, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
 };
 export default Select;

package/dist/published/components/custom/FormV2/tests/FormRendererContainer.test.js

@@ -326,12 +326,7 @@ describe('FormRendererContainer', () => {
             await user.clear(cityField);
             await user.type(cityField, 'Cambridge');
             await user.tab(); // Blur the field
-            // Verify autosave was eventually called and the final call contains the updated city
-            await waitFor(() => {
-                expect(autosaveActionSpy).toHaveBeenCalled();
-            });
-            const lastCall = autosaveActionSpy.mock.lastCall?.[0];
-            expect(lastCall).toEqual(expect.objectContaining({
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
                 input: expect.objectContaining({
                     address: expect.objectContaining({
                         city: 'Cambridge',
@@ -448,15 +443,7 @@ describe('FormRendererContainer', () => {
             // Wait for and select the autocomplete option
             const autocompleteOption = await screen.findByText('456 Oak Street');
             await user.click(autocompleteOption);
-            // Verify autosave was eventually called and the final call contains the expected address values
-            await waitFor(() => {
-                expect(autosaveActionSpy).toHaveBeenCalled();
-            });
-            // The autosave is triggered twice when selecting the autocomplete option,
-            // once by the selection and once by the onBlur event. We want to verify the last call
-            // has the correct data.
-            const lastCall = autosaveActionSpy.mock.lastCall?.[0];
-            expect(lastCall).toEqual(expect.objectContaining({
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
                 input: expect.objectContaining({
                     address: expect.objectContaining({
                         line1: '456 Oak Street',
@@ -531,6 +518,484 @@ describe('FormRendererContainer', () => {
             // Verify autosave was not triggered
             expect(autosaveActionSpy).not.toHaveBeenCalled();
         });
+        it('should trigger autosave immediately when a radio button is selected', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            // Create a form with a status field displayed as radio buttons
+            const licenseFormWithRadioButtons = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: {
+                            label: 'License Number',
+                        },
+                    },
+                    {
+                        parameterId: 'status',
+                        type: 'input',
+                        display: {
+                            label: 'Status',
+                            choicesDisplay: {
+                                type: 'radioButton',
+                            },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    status: 'Active',
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json(licenseFormWithRadioButtons);
+            }), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    status: body.input.status,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Wait for the form to load and the radio buttons to appear
+            const inactiveRadio = await screen.findByRole('radio', { name: 'Inactive' });
+            // Click the "Inactive" radio button
+            await user.click(inactiveRadio);
+            // Verify autosave was triggered immediately with the new status
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                    actionId: '_autosave',
+                    input: expect.objectContaining({
+                        status: 'Inactive',
+                    }),
+                }));
+            });
+        });
+        it('should trigger autosave when the selection is cleared', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithRadioButtons = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: {
+                            label: 'License Number',
+                        },
+                    },
+                    {
+                        parameterId: 'status',
+                        type: 'input',
+                        display: {
+                            label: 'Status',
+                            choicesDisplay: {
+                                type: 'radioButton',
+                            },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => {
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    status: 'Active',
+                });
+            }), http.get('/api/data/objects/license/instances/test-license/object', () => {
+                return HttpResponse.json(licenseObject);
+            }), http.get('/api/data/forms/licenseForm', () => {
+                return HttpResponse.json(licenseFormWithRadioButtons);
+            }), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    status: body.input.status,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            const clearButton = await screen.findByRole('button', { name: 'Clear' });
+            await user.click(clearButton);
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    status: null,
+                }),
+            }));
+        });
+        it('should trigger autosave immediately when a dropdown option is selected', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithDropdown = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        parameterId: 'status',
+                        type: 'input',
+                        display: {
+                            label: 'Status',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({ id: 'test-license', name: 'RN-123456', status: 'Active' })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithDropdown)), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({ id: 'test-license', name: 'RN-123456', status: body.input.status });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the dropdown/combobox and choose an option
+            const combobox = await screen.findByRole('combobox', { name: 'Status' });
+            await user.click(combobox);
+            const inactiveOption = await screen.findByRole('option', { name: 'Inactive' });
+            await user.click(inactiveOption);
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    status: 'Inactive',
+                }),
+            });
+        });
+        it('should trigger autosave when dropdown selection is cleared', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithDropdown = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        parameterId: 'status',
+                        type: 'input',
+                        display: {
+                            label: 'Status',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({ id: 'test-license', name: 'RN-123456', status: 'Active' })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithDropdown)), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({ id: 'test-license', name: 'RN-123456', status: body.input.status });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            const combobox = await screen.findByRole('combobox', { name: 'Status' });
+            await user.click(combobox);
+            // Clear button has tabindex="-1" so find it via testid
+            const clearButton = await screen.findByTestId('autocomplete-clear-button');
+            await user.click(clearButton);
+            expect(autosaveActionSpy).toHaveBeenCalledWith(expect.objectContaining({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    status: null,
+                }),
+            }));
+        });
+        it('should trigger autosave for multi-select when selecting an option', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            const licenseInstanceInitial = { id: 'test-license', name: 'RN-123456' };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json(licenseInstanceInitial)), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: body.input.name ?? 'RN-123456',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the multi-select combobox and choose an additional option
+            const combobox = await screen.findByRole('combobox', { name: 'Categories' });
+            await user.click(combobox);
+            const plumbingOption = await screen.findByRole('option', { name: 'Electrical' });
+            await user.click(plumbingOption);
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({ categories: ['Electrical'] }),
+            });
+        });
+        it('should trigger autosave for multi-select when adding an option', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            const licenseInstanceInitial = { id: 'test-license', name: 'RN-123456', categories: ['Electrical'] };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json(licenseInstanceInitial)), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: body.input.name ?? 'RN-123456',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the multi-select combobox and choose an additional option
+            const combobox = await screen.findByRole('combobox', { name: 'Categories' });
+            await user.click(combobox);
+            const plumbingOption = await screen.findByRole('option', { name: 'Plumbing' });
+            await user.click(plumbingOption);
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    categories: expect.arrayContaining(['Electrical', 'Plumbing']),
+                }),
+            });
+        });
+        it('should trigger autosave when a multi-select option is removed', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({
+                id: 'test-license',
+                name: 'RN-123456',
+                categories: ['Electrical', 'Plumbing'],
+            })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            const electricalChipLabel = await screen.findByRole('button', { name: 'Electrical' });
+            // Mui autoamtically provides a test id.
+            const deleteIcon = await within(electricalChipLabel).findByTestId('CancelIcon');
+            await user.click(deleteIcon);
+            // Autosave should be called with only Plumbing remaining
+            await waitFor(() => {
+                expect(autosaveActionSpy).toHaveBeenCalledWith({
+                    actionId: '_autosave',
+                    input: expect.objectContaining({
+                        categories: ['Plumbing'],
+                    }),
+                });
+            });
+        });
+        it('should trigger autosave when a single multi-select option is removed via the dropdown', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({
+                id: 'test-license',
+                name: 'RN-123456',
+                categories: ['Electrical', 'Plumbing'],
+            })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the multi-select combobox and unselect the 'Plumbing' option
+            const combobox = await screen.findByRole('combobox', { name: 'Categories' });
+            await user.click(combobox);
+            // Click the option to toggle/unselect it (initially selected)
+            const plumbingOption = await screen.findByRole('option', { name: 'Plumbing' });
+            await user.click(plumbingOption);
+            // Expect autosave called with categories array no longer containing 'Plumbing'
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({ categories: ['Electrical'] }),
+            });
+        });
+        it('should trigger autosave when multi-select is cleared', async () => {
+            const user = userEvent.setup();
+            const autosaveActionSpy = vi.fn();
+            const licenseFormWithMultiSelect = {
+                id: 'licenseForm',
+                name: 'License Form',
+                objectId: 'license',
+                actionId: '_update',
+                autosaveActionId: '_autosave',
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: { label: 'License Number' },
+                    },
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'categories',
+                            type: 'array',
+                            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+                        },
+                        display: {
+                            label: 'Categories',
+                            choicesDisplay: { type: 'dropdown' },
+                        },
+                    },
+                ],
+            };
+            server.use(http.get('/api/data/objects/license/instances/test-license', () => HttpResponse.json({
+                id: 'test-license',
+                name: 'RN-123456',
+                categories: ['Electrical', 'Plumbing'],
+            })), http.get('/api/data/objects/license/instances/test-license/object', () => HttpResponse.json(licenseObject)), http.get('/api/data/forms/licenseForm', () => HttpResponse.json(licenseFormWithMultiSelect)), http.post('/api/data/objects/license/instances/test-license/actions', async ({ request }) => {
+                const body = (await request.json());
+                autosaveActionSpy(body);
+                return HttpResponse.json({
+                    id: 'test-license',
+                    name: 'RN-123456',
+                    categories: body.input.categories,
+                });
+            }));
+            render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
+            // Open the multi-select combobox and click the clear button
+            const combobox = await screen.findByRole('combobox', { name: 'Categories' });
+            await user.click(combobox);
+            // Clear button has tabindex="-1" so find via testid
+            const clearButton = await screen.findByTestId('autocomplete-clear-button');
+            await user.click(clearButton);
+            expect(autosaveActionSpy).toHaveBeenCalledWith({
+                actionId: '_autosave',
+                input: expect.objectContaining({
+                    categories: expect.arrayContaining([]),
+                }),
+            });
+        });
     });
     it('should display a submit button', async () => {
         const form = {

package/dist/published/components/custom/FormV2/tests/test-data.js

@@ -160,6 +160,12 @@ export const licenseObject = {
             type: 'string',
             enum: ['Active', 'Inactive'],
         },
+        {
+            id: 'categories',
+            name: 'Categories',
+            type: 'array',
+            enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
+        },
         {
             id: 'licenseType',
             name: 'License Type',
@@ -188,6 +194,13 @@ export const licenseObject = {
                     id: 'status',
                     name: 'Status',
                     type: 'string',
+                    enum: ['Active', 'Inactive'],
+                },
+                {
+                    id: 'categories',
+                    name: 'Categories',
+                    type: 'array',
+                    enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
                 },
                 {
                     id: 'address.line1',
@@ -236,6 +249,13 @@ export const licenseObject = {
                     id: 'status',
                     name: 'Status',
                     type: 'string',
+                    enum: ['Active', 'Inactive'],
+                },
+                {
+                    id: 'categories',
+                    name: 'Categories',
+                    type: 'array',
+                    enum: ['Electrical', 'Plumbing', 'Mechanical', 'Other'],
                 },
                 {
                     id: 'address.line1',

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -255,6 +255,21 @@ CriteriaBuilderRelatedObject.args = {
                                 },
                             ],
                         },
+                        {
+                            id: 'dynamic.id',
+                            name: 'Dynamic ID',
+                            type: 'string',
+                        },
+                        {
+                            id: 'dynamic.name',
+                            name: 'Dynamic Name',
+                            type: 'string',
+                        },
+                        {
+                            id: 'dynamic.objectId',
+                            name: 'Dynamic Object ID',
+                            type: 'string',
+                        },
                         {
                             id: 'name',
                             name: 'Name',
@@ -526,6 +541,21 @@ CriteriaBuilderRelatedObject.args = {
                     type: 'string',
                     required: false,
                 },
+                {
+                    id: 'dynamic.id',
+                    name: 'Dynamic ID',
+                    type: 'string',
+                },
+                {
+                    id: 'dynamic.name',
+                    name: 'Dynamic Name',
+                    type: 'string',
+                },
+                {
+                    id: 'dynamic.objectId',
+                    name: 'Dynamic Object Id',
+                    type: 'string',
+                },
             ],
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.1-dev.0",
+    "version": "1.10.1-dev.2",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",