@evoke-platform/ui-components 1.8.0-testing.9 → 1.8.0

package/dist/published/components/custom/DataGrid/DataGrid.d.ts

@@ -23,6 +23,7 @@ export type DataGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     hideSearchbar?: boolean;
     loadingOptions?: LoadingOptions;
     hideDownload?: boolean;
+    exportFileName?: string;
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): React.JSX.Element;
 export {};

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

@@ -6,7 +6,7 @@ import LinearProgress from '../../core/LinearProgress';
 import { dateTimeBetweenOperator } from './DateTimeCustomOperator';
 import Toolbar from './Toolbar';
 export default function (props) {
-    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions, hideDownload, ...rest } = props;
+    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions, hideDownload, exportFileName, ...rest } = props;
     const [anchorEl, setAnchorEl] = useState();
     const [loadingMessageIndex, setLoadingMessageIndex] = useState(0);
     const addColumnFilterOperators = (columns) => {
@@ -93,6 +93,7 @@ export default function (props) {
                     bulkAction,
                     hideSearchbar,
                     hideDownload,
+                    exportFileName,
                 },
                 panel: {
                     anchorEl: anchorEl,

package/dist/published/components/custom/DataGrid/Toolbar.d.ts

@@ -11,6 +11,7 @@ export type GridToolbarProps = MuiGridToolbarProps & {
     bulkAction?: BulkAction;
     hideSearchbar?: boolean;
     hideDownload?: boolean;
+    exportFileName?: string;
 };
 declare function Toolbar(props: GridToolbarProps): React.JSX.Element;
 export default Toolbar;

package/dist/published/components/custom/DataGrid/Toolbar.js

@@ -6,7 +6,8 @@ import UIThemeProvider from '../../../theme';
 import { Button, IconButton } from '../../core';
 import { Grid } from '../../layout';
 function Toolbar(props) {
-    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction, hideSearchbar, hideDownload } = props;
+    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction, hideSearchbar, hideDownload, exportFileName } = props;
+    const resolvedFileName = exportFileName ?? 'data';
     const styles = {
         container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
         iconButton: {
@@ -57,7 +58,7 @@ function Toolbar(props) {
                                     '&:hover': { backgroundColor: '#f2f3f5' },
                                     paddingLeft: '10px',
                                     paddingRight: '10px',
-                                }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) }))),
+                                }, printOptions: { disableToolbarButton: true }, csvOptions: { fileName: resolvedFileName }, startIcon: React.createElement(FileDownloadRounded, null) }))),
                         React.createElement(Grid, { item: true },
                             React.createElement(GridToolbarFilterButton, { componentsProps: {
                                     button: {

package/dist/published/components/custom/DataGrid/index.d.ts

@@ -1,3 +1,4 @@
 import DataGrid from './DataGrid';
+export type { GridSortModel } from '@mui/x-data-grid';
 export { DataGrid };
 export default DataGrid;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -3,7 +3,7 @@ import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Close } from '../../../../../icons';
-import { Autocomplete, Button, Dialog, IconButton, Link, Paper, TextField, Tooltip, Typography, } from '../../../../core';
+import { Autocomplete, Button, Dialog, IconButton, Link, ListItem, Paper, TextField, Tooltip, Typography, } from '../../../../core';
 import { Box } from '../../../../layout';
 import { getPrefixedUrl, normalizeDates, transformToWhere } from '../../utils';
 import { RelatedObjectInstance } from './RelatedObjectInstance';
@@ -146,9 +146,27 @@ export const ObjectPropertyInput = (props) => {
         return instance ? template(instance) : undefined;
     };
     const navigationSlug = defaultPages && property.objectId && defaultPages[property.objectId];
+    const dropdownOptions = [
+        ...options.map((o) => ({ label: o.name, value: o.id })),
+        ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === DEFAULT_CREATE_ACTION)
+            ? [
+                {
+                    value: '__new__',
+                    label: '+ Add New',
+                },
+            ]
+            : []),
+    ];
     return (React.createElement(React.Fragment, null,
         displayOption === 'dropdown' ? (React.createElement(React.Fragment, null,
-            React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, componentsProps: {
+            React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, clearIcon: React.createElement(IconButton, { size: "small", disableRipple: true, onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.stopPropagation();
+                        }
+                    }, onClick: (e) => {
+                        setOpenOptions(false);
+                    }, "aria-label": "Clear selection", sx: { padding: 0 } },
+                    React.createElement(Close, { sx: { fontSize: '20px' } })), componentsProps: {
                     popper: {
                         modifiers: [
                             {
@@ -163,6 +181,7 @@ export const ObjectPropertyInput = (props) => {
                             boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
                             '& .MuiAutocomplete-listbox': {
                                 maxHeight: '25vh',
+                                paddingBottom: '0px',
                             },
                             '& .MuiAutocomplete-noOptions': {
                                 fontFamily: 'sans-serif',
@@ -176,20 +195,7 @@ export const ObjectPropertyInput = (props) => {
                                 paddingLeft: '24px',
                                 color: 'rgba(145, 158, 171, 1)',
                             },
-                        } },
-                        children,
-                        mode !== 'existingOnly' &&
-                            relatedObject?.actions?.some((a) => a.id === DEFAULT_CREATE_ACTION) && (React.createElement(Button, { fullWidth: true, sx: {
-                                justifyContent: 'flex-start',
-                                pl: 2,
-                                minHeight: '48px',
-                                borderTop: '1px solid rgba(145, 158, 171, 0.24)',
-                                borderRadius: '0p 0pc 6px 6px',
-                                paddingLeft: '22px',
-                                fontWeight: 400,
-                            }, onMouseDown: (e) => {
-                                setOpenCreateDialog(true);
-                            }, color: 'inherit' }, "+ Add New"))));
+                        } }, children));
                 }, sx: {
                     '& button.MuiButtonBase-root': {
                         ...(!loadingOptions &&
@@ -200,18 +206,14 @@ export const ObjectPropertyInput = (props) => {
                             : {}),
                     },
                 }, noOptionsText: 'No options available', renderOption: (props, option) => {
-                    return (React.createElement("li", { ...props, key: option.id },
+                    const isAddNew = option.value === '__new__';
+                    return (React.createElement(ListItem, { ...props, key: props.id, sx: {
+                            ...(isAddNew ? { borderTop: '1px solid rgba(145, 158, 171, 0.24)' } : {}),
+                        } },
                         React.createElement(Box, null,
                             React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
                             layout?.secondaryTextExpression ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout?.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
-                }, onOpen: () => {
-                    if (instance?.[property.id]?.id || selectedInstance?.id) {
-                        setOpenOptions(false);
-                    }
-                    else {
-                        setOpenOptions(true);
-                    }
-                }, onClose: () => setOpenOptions(false), value: instance?.[property.id]?.id || selectedInstance?.id
+                }, onOpen: () => setOpenOptions(true), onClose: () => setOpenOptions(false), value: instance?.[property.id]?.id || selectedInstance?.id
                     ? {
                         value: instance?.[property.id]?.id ??
                             selectedInstance?.id ??
@@ -225,15 +227,20 @@ export const ObjectPropertyInput = (props) => {
                         return option.value === value;
                     }
                     return option.value === value?.value;
-                }, options: options.map((o) => ({ label: o.name, value: o.id })), getOptionLabel: (option) => {
+                }, options: dropdownOptions, filterOptions: (options) => options, getOptionLabel: (option) => {
                     return typeof option === 'string'
                         ? (options.find((o) => o.id === option)?.name ?? '')
                         : option.label;
-                }, onKeyDownCapture: (e) => {
+                }, onKeyDown: (e) => {
                     // prevents keyboard trap
                     if (e.key === 'Tab') {
                         return;
                     }
+                    if (e.key === 'Enter') {
+                        setOpenOptions(true);
+                        setDropdownInput(undefined);
+                        return;
+                    }
                     if (instance?.[property.id]?.id || selectedInstance?.id) {
                         e.preventDefault();
                     }
@@ -244,31 +251,31 @@ export const ObjectPropertyInput = (props) => {
                         handleChangeObjectProperty(property.id, null);
                         instance[property.id] = null;
                     }
+                    else if (value?.value === '__new__') {
+                        setOpenCreateDialog(true);
+                    }
                     else {
                         const selectedInstance = options.find((o) => o.id === value?.value);
                         setSelectedInstance(selectedInstance);
                         handleChangeObjectProperty(property.id, selectedInstance);
                     }
-                }, selectOnFocus: false, onBlur: () => setDropdownInput(undefined), renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: 'Select', readOnly: !loadingOptions &&
+                }, selectOnFocus: false, onBlur: () => {
+                    if (dropdownInput) {
+                        getDropdownOptions();
+                    }
+                }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: 'Select', readOnly: !loadingOptions &&
                         !!(instance?.[property.id]?.id ||
                             selectedInstance?.id), onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
                         if (navigationSlug &&
                             ['DIV', 'INPUT'].includes(e.target?.nodeName) &&
                             (instance?.[property.id]?.id ||
                                 selectedInstance?.id)) {
-                            navigateTo &&
+                            if (navigateTo) {
+                                setOpenOptions(false);
                                 navigateTo(navigationSlug.replace(':instanceId', instance?.[property.id]?.id ??
                                     selectedInstance?.id ??
                                     ''));
-                        }
-                        if (openOptions &&
-                            e.target?.nodeName === 'svg') {
-                            setOpenOptions(false);
-                        }
-                        else if (!['DIV', 'INPUT'].includes(e.target?.nodeName) &&
-                            !selectedInstance) {
-                            setOptions(options);
-                            setOpenOptions(true);
+                            }
                         }
                     }, sx: {
                         ...(!loadingOptions &&
@@ -349,8 +356,8 @@ export const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add`, disabled: !canUpdateProperty }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout, richTextEditor: richTextEditor })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
-            React.createElement(Typography, { sx: {
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout, richTextEditor: richTextEditor })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose, "aria-labelledby": "add-dialog-title" },
+            React.createElement(Typography, { id: "add-dialog-title", sx: {
                     marginTop: '28px',
                     fontSize: '22px',
                     fontWeight: 700,

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { InfoRounded } from '../../../../../icons';
 import { Alert, Button, FormControlLabel, Radio, RadioGroup } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
-import { Form } from '../../../Form';
+import { Form } from '../../Common/Form';
 import { getPrefixedUrl, normalizeDateTime, normalizeDates } from '../../utils';
 import { InstanceLookup } from './InstanceLookup';
 const styles = {

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ActionDialog.d.ts

@@ -1,4 +1,5 @@
 import { Action, ApiServices, Obj, UserAccount } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
 import React from 'react';
 import { Address, ObjectPropertyInputProps } from '../../types';
 export type ActionDialogProps = {
@@ -20,5 +21,6 @@ export type ActionDialogProps = {
         instanceId: string;
         propertyId: string;
     };
+    richTextEditor?: typeof ReactComponent;
 };
 export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ActionDialog.js

@@ -36,7 +36,7 @@ const styles = {
     },
 };
 export const ActionDialog = (props) => {
-    const { open, onClose, action, instanceInput, handleSubmit, apiServices, object, instanceId, objectInputCommonProps, queryAddresses, associatedObject, user, } = props;
+    const { open, onClose, action, instanceInput, handleSubmit, apiServices, object, instanceId, objectInputCommonProps, queryAddresses, associatedObject, user, richTextEditor, } = props;
     const [updatedObject, setUpdatedObject] = useState();
     const [hasAccess, setHasAccess] = useState(false);
     const [loading, setLoading] = useState(false);
@@ -76,7 +76,7 @@ export const ActionDialog = (props) => {
             React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
                 React.createElement(Close, { fontSize: "small" })),
             action && hasAccess && !loading ? action?.name : ''),
-        React.createElement(DialogContent, null, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } }, (updatedObject || isDeleteAction) && (React.createElement(Form, { actionId: action.id, actionType: action.type, apiServices: objectInputCommonProps.apiServices, object: !isDeleteAction ? updatedObject : object, instance: instanceInput, onSave: async (data, setSubmitting) => handleSubmit(action.type, data, instanceId, setSubmitting), objectInputCommonProps: objectInputCommonProps, closeModal: onClose, queryAddresses: queryAddresses, user: user, submitButtonLabel: isDeleteAction ? 'Delete' : undefined, associatedObject: associatedObject })))) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
+        React.createElement(DialogContent, null, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } }, (updatedObject || isDeleteAction) && (React.createElement(Form, { actionId: action.id, actionType: action.type, apiServices: objectInputCommonProps.apiServices, object: !isDeleteAction ? updatedObject : object, instance: instanceInput, onSave: async (data, setSubmitting) => handleSubmit(action.type, data, instanceId, setSubmitting), objectInputCommonProps: objectInputCommonProps, closeModal: onClose, queryAddresses: queryAddresses, user: user, submitButtonLabel: isDeleteAction ? 'Delete' : undefined, associatedObject: associatedObject, richTextEditor: richTextEditor })))) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }))) : (React.createElement(ErrorComponent, { code: 'AccessDenied', message: 'You do not have permission to perform this action.', styles: { boxShadow: 'none' } })))))));

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.d.ts

@@ -1,4 +1,5 @@
 import { ApiServices, ObjectInstance, Property, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
 import React from 'react';
 import { Address } from '../../types';
 export type ObjectPropertyInputProps = {
@@ -9,6 +10,7 @@ export type ObjectPropertyInputProps = {
     queryAddresses?: (query: string) => Promise<Address[]>;
     user?: UserAccount;
     viewLayout?: ViewLayoutEntityReference;
+    richTextEditor?: typeof ReactComponent;
 };
 declare const RepeatableField: (props: ObjectPropertyInputProps) => React.JSX.Element;
 export default RepeatableField;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -33,7 +33,7 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    const { property, instance, canUpdateProperty, apiServices, queryAddresses, user, viewLayout } = props;
+    const { property, instance, canUpdateProperty, apiServices, queryAddresses, user, viewLayout, richTextEditor } = props;
     const [relatedInstances, setRelatedInstances] = useState([]);
     const [relatedObject, setRelatedObject] = useState();
     const [hasCreateAction, setHasCreateAction] = useState(false);
@@ -433,7 +433,7 @@ const RepeatableField = (props) => {
             objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, queryAddresses: queryAddresses, user: user, associatedObject: instance.id && property.relatedPropertyId
                 ? { instanceId: instance.id, propertyId: property.relatedPropertyId }
-                : undefined })),
+                : undefined, richTextEditor: richTextEditor })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };
 export default RepeatableField;

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserProperty.d.ts

@@ -6,7 +6,7 @@ export type UserPropertyProps = {
     property: Property;
     apiServices: ApiServices;
     user?: UserAccount;
-    handleChangeUserProperty: (user: AutocompleteOption) => void;
+    handleChangeUserProperty: (user: AutocompleteOption | null) => void;
     error?: boolean;
     setSnackbarError?: (snackbarError: {
         showAlert: boolean;

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserProperty.js

@@ -1,6 +1,7 @@
 import { ExpandMore } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
+import { Close } from '../../../../../icons';
+import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../../../core';
 import { getPrefixedUrl } from '../../utils';
 export const UserProperty = (props) => {
     const { id, property, apiServices, handleChangeUserProperty, error, filter, value, user, fieldHeight } = props;
@@ -37,7 +38,16 @@ export const UserProperty = (props) => {
         }
     }, [property, filter]);
     return (options && (React.createElement(React.Fragment, null,
-        React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue ? '' : React.createElement(ExpandMore, null), PaperComponent: ({ children }) => {
+        React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue ? '' : React.createElement(ExpandMore, null), clearIcon: !loadingOptions && userValue ? (React.createElement(IconButton, { size: "small", disableRipple: true, onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.stopPropagation();
+                    }
+                }, onClick: (e) => {
+                    setOpenOptions(false);
+                }, "aria-label": "Clear selection", sx: {
+                    padding: 0,
+                } },
+                React.createElement(Close, { sx: { fontSize: '20px' } }))) : null, PaperComponent: ({ children }) => {
                 return (React.createElement(Paper, { sx: {
                         borderRadius: '12px',
                         boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
@@ -72,9 +82,7 @@ export const UserProperty = (props) => {
                         " ",
                         '',
                         users?.find((user) => option.value === user.id)?.status === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
-            }, onOpen: () => {
-                setOpenOptions(true);
-            }, onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
+            }, onOpen: () => setOpenOptions(true), onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
                 if (typeof option === 'string') {
                     return options.find((o) => o.value === option)?.label ?? '';
                 }
@@ -88,11 +96,15 @@ export const UserProperty = (props) => {
                         }
                     }
                 }
-            }, onKeyDownCapture: (e) => {
+            }, onKeyDown: (e) => {
                 // prevents keyboard trap
                 if (e.key === 'Tab') {
                     return;
                 }
+                if (e.key === 'Enter') {
+                    setOpenOptions(true);
+                    return;
+                }
                 if (value) {
                     e.preventDefault();
                 }

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -1,4 +1,5 @@
 import { ApiServices } from '@evoke-platform/context';
+import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import axios from 'axios';
@@ -8,7 +9,8 @@ import { setupServer } from 'msw/node';
 import React from 'react';
 import { expect, it } from 'vitest';
 import Form from '../Common/Form';
-import { licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
+import { accessibility508Object, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, users, } from './test-data';
+expect.extend(matchers);
 const removePoppers = () => {
     const portalSelectors = ['.MuiAutocomplete-popper'];
     portalSelectors.forEach((selector) => {
@@ -20,7 +22,7 @@ describe('Form component', () => {
     let server;
     let apiServices;
     beforeAll(() => {
-        server = setupServer(http.get('/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/data/objects/license/instances', () => {
+        server = setupServer(http.get('/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('accessManagement/users', () => HttpResponse.json(users)), http.get('/data/objects/license/instances', () => {
             return HttpResponse.json([rnLicense, npLicense]);
         }), http.get('/data/objects/specialtyType/instances', (req) => {
             const filter = new URL(req.request.url).searchParams.get('filter');
@@ -155,4 +157,192 @@ describe('Form component', () => {
             expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).to.be.null;
         });
     });
+    describe('508 accessibility compliance', () => {
+        it('supports keyboard navigation back and forth through Related Object dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            await user.tab();
+            // Name field should be focused
+            expect(screen.getByLabelText('Name')).toHaveFocus();
+            await user.tab();
+            // License should be focused
+            expect(screen.getByLabelText('License')).toHaveFocus();
+            // Check reverse tabbing
+            await user.tab({ shift: true });
+            expect(screen.getByLabelText('Name')).toHaveFocus();
+        });
+        it('supports keyboard navigation back and forth through User dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update2', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            await user.tab();
+            // Name field should be focused
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toHaveFocus();
+            });
+            await user.tab();
+            // User should be focused
+            expect(screen.getByLabelText('User')).toHaveFocus();
+            // Check reverse tabbing
+            await user.tab({ shift: true });
+            expect(screen.getByLabelText('Name')).toHaveFocus();
+        });
+        it('supports keyboard selection of dropdown values using Enter key on Related Objects', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to License field
+            await user.tab();
+            await user.tab();
+            // Open dropdown with Enter
+            await user.keyboard('{Enter}');
+            // Navigate to first option
+            await user.keyboard('{ArrowDown}');
+            // Select option with Enter
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'License' });
+                expect(input).toHaveValue('RN License');
+            });
+        });
+        it('supports keyboard selection of dropdown values using Enter key on Users', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update2', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to License field
+            await user.tab();
+            await user.tab();
+            // Open dropdown with Enter
+            await user.keyboard('{Enter}');
+            // Navigate to first option
+            await user.keyboard('{ArrowDown}');
+            // Select option with Enter
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'User' });
+                expect(input).toHaveValue('User 1');
+            });
+        });
+        it('supports navigating between dropdown options using arrow keys on Related Objects', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to and open dropdown
+            await user.tab();
+            await user.tab();
+            await user.keyboard('{ArrowDown}'); // Open dropdown
+            await user.keyboard('{ArrowDown}'); // First option
+            await user.keyboard('{Enter}');
+            // Verify first selection
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'License' });
+                expect(input).toHaveValue('RN License');
+            });
+        });
+        it('supports navigating between dropdown options using arrow keys on User dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update2', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to and open dropdown
+            await user.tab();
+            await user.tab();
+            await user.keyboard('{ArrowDown}'); // Open dropdown
+            await user.keyboard('{ArrowDown}'); // First option
+            await user.keyboard('{Enter}');
+            // Verify first selection
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'User' });
+                expect(input).toHaveValue('User 1');
+            });
+        });
+        it('supports clearing selection with the clear button on Related Objects', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'accessibility508',
+                    name: 'Test Accessibility 508 Object Instance',
+                    license: {
+                        id: 'rnLicense',
+                        name: 'RN License',
+                    },
+                } }));
+            // Set up a selection first
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'License' });
+                expect(input).toHaveValue('RN License');
+            });
+            // Manually focus the clear button since test environment can't reach it via tab,
+            // even though tabbing works correctly in the actual form
+            const clearButton = screen.getByRole('button', { name: 'Clear selection' });
+            clearButton.focus();
+            expect(clearButton).toHaveFocus();
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'License' });
+                expect(input).toHaveValue('');
+            });
+        });
+        it('supports clearing selection with the clear button on User dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update2', actionType: 'update', object: accessibility508Object, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'accessibility508',
+                    name: 'Test Accessibility 508 Object Instance',
+                    user: {
+                        id: 'user1',
+                        name: 'User 1',
+                    },
+                } }));
+            // Set up a selection first
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'User' });
+                expect(input).toHaveValue('User 1');
+            });
+            // Manually focus the clear button since test environment can't reach it via tab,
+            // even though tabbing works correctly in the actual form
+            const clearButton = screen.getByRole('button', { name: 'Clear selection' });
+            clearButton.focus();
+            expect(clearButton).toHaveFocus();
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'User' });
+                expect(input).toHaveValue('');
+            });
+        });
+        it('supports navigating to Add New option with arrow keys and opens modal', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to and open dropdown
+            await user.tab();
+            await user.tab();
+            await user.keyboard('{Enter}');
+            await user.keyboard('{ArrowUp}'); // Navigate to "Add New" option
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                expect(screen.getByRole('dialog', { name: /add license/i })).toBeInTheDocument();
+            });
+        });
+    });
 });

package/dist/published/components/custom/Form/tests/test-data.d.ts

@@ -1,6 +1,7 @@
 import { Obj, ObjectInstance } from '@evoke-platform/context';
 export declare const licenseObject: Obj;
 export declare const licenseTypeObject: Obj;
+export declare const accessibility508Object: Obj;
 export declare const specialtyObject: Obj;
 export declare const specialtyTypeObject: Obj;
 export declare const rnLicense: ObjectInstance;
@@ -11,3 +12,9 @@ export declare const rnSpecialtyType1: ObjectInstance;
 export declare const rnSpecialtyType2: ObjectInstance;
 export declare const npSpecialtyType1: ObjectInstance;
 export declare const npSpecialtyType2: ObjectInstance;
+export declare const users: {
+    id: string;
+    status: string;
+    email: string;
+    name: string;
+}[];