@evoke-platform/ui-components 1.9.0-dev.0 → 1.9.0-dev.1

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

@@ -1,7 +1,7 @@
 import cleanDeep from 'clean-deep';
 import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Close } from '../../../../../icons';
 import { Autocomplete, Button, Dialog, IconButton, Link, ListItem, Paper, TextField, Tooltip, Typography, } from '../../../../core';
 import { Box } from '../../../../layout';
@@ -18,6 +18,7 @@ export const ObjectPropertyInput = (props) => {
     const [openOptions, setOpenOptions] = useState(false);
     const [layout, setLayout] = useState();
     const [layoutLoaded, setLayoutLoaded] = useState(false);
+    const listboxRef = useRef(null);
     const DEFAULT_CREATE_ACTION = '_create';
     const hasValue = instance?.[property.id]?.id || selectedInstance?.id;
     useEffect(() => {
@@ -208,17 +209,31 @@ export const ObjectPropertyInput = (props) => {
                 }, noOptionsText: 'No options available', renderOption: (props, option) => {
                     const isAddNew = option.value === '__new__';
                     return (React.createElement(ListItem, { ...props, key: props.id, sx: {
-                            ...(isAddNew ? { borderTop: '1px solid rgba(145, 158, 171, 0.24)' } : {}),
+                            ...(isAddNew
+                                ? {
+                                    borderTop: '1px solid rgba(145, 158, 171, 0.24)',
+                                    position: 'sticky',
+                                    bottom: 0,
+                                    backgroundColor: 'white',
+                                    '&:hover': {
+                                        backgroundColor: '#f5f5f5 !important',
+                                    },
+                                    '&.Mui-focused': {
+                                        backgroundColor: '#f5f5f5 !important',
+                                    },
+                                }
+                                : {}),
                         } },
                         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)));
+                            layout?.secondaryTextExpression && !isAddNew ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout?.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
                 }, onOpen: (e) => {
                     // Don't open the options if there is a value that links to another page
                     if (!(navigationSlug &&
                         navigateTo &&
                         ['DIV', 'INPUT'].includes(e.target?.nodeName) &&
-                        hasValue)) {
+                        hasValue &&
+                        (!('key' in e) || (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')))) {
                         setOpenOptions(true);
                     }
                 }, onClose: () => setOpenOptions(false), value: hasValue
@@ -239,6 +254,36 @@ export const ObjectPropertyInput = (props) => {
                     return typeof option === 'string'
                         ? (options.find((o) => o.id === option)?.name ?? '')
                         : option.label;
+                }, ListboxProps: {
+                    ref: listboxRef,
+                }, onHighlightChange: (e, option) => {
+                    if (!option || !e || !('key' in e) || !listboxRef.current)
+                        return;
+                    const highlightedIndex = dropdownOptions.findIndex((opt) => opt.value === option.value);
+                    // Only handle regular options (not the "Add New" button)
+                    if (highlightedIndex >= options.length)
+                        return;
+                    const listbox = listboxRef.current;
+                    const items = listbox.querySelectorAll('li');
+                    const highlightedElement = items[highlightedIndex];
+                    const addNewButton = mode !== 'existingOnly' &&
+                        relatedObject?.actions?.some((a) => a.id === DEFAULT_CREATE_ACTION)
+                        ? items[items.length - 1]
+                        : undefined;
+                    if (!highlightedElement || !addNewButton)
+                        return;
+                    const buttonHeight = addNewButton.offsetHeight;
+                    const elementTop = highlightedElement.offsetTop;
+                    const elementHeight = highlightedElement.offsetHeight;
+                    const listboxScrollTop = listbox.scrollTop;
+                    const listboxHeight = listbox.clientHeight;
+                    // Check if element is hidden below the sticky button
+                    const elementBottom = elementTop + elementHeight;
+                    const visibleBottom = listboxScrollTop + listboxHeight - buttonHeight;
+                    if (elementBottom > visibleBottom) {
+                        // Scroll just enough to show the element above the sticky button
+                        listbox.scrollTop = elementBottom - listboxHeight + buttonHeight;
+                    }
                 }, onKeyDown: (e) => {
                     // prevents keyboard trap
                     if (e.key === 'Tab') {

package/package.json

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