fix: support editing listbox title

apis/nucleus/src/components/listbox/ListBoxInline.jsx

@@ -13,6 +13,7 @@ import createListboxSelectionToolbar from './interactions/listbox-selection-tool
 import ActionsToolbar from '../ActionsToolbar';
 import InstanceContext from '../../contexts/InstanceContext';
 import ListBoxSearch from './components/ListBoxSearch';
+import EditableTitle from './components/EditableTitle';
 import { getListboxInlineKeyboardNavigation } from './interactions/listbox-keyboard-navigation';
 import addListboxTheme from './assets/addListboxTheme';
 import useAppSelections from '../../hooks/useAppSelections';
@@ -237,6 +238,13 @@ function ListBoxInline({ options, layout }) {
     containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
   }
 
+  const TitleComponent = constraints?.active ? (
+    <EditableTitle layout={layout} model={model} />
+  ) : (
+    <Title variant="h6" noWrap ref={titleRef} title={layout.title}>
+      {layout.title}
+    </Title>
+  );
   return (
     <>
       {toolbarDetachedOnly && <ActionsToolbar direction={direction} {...getActionToolbarProps(true)} />}
@@ -303,11 +311,7 @@ function ListBoxInline({ options, layout }) {
                 </Grid>
               )}
               <Grid item sx={{ justifyContent: isRtl ? 'flex-end' : 'flex-start' }} className={classes.listBoxHeader}>
-                {showTitle && (
-                  <Title variant="h6" noWrap ref={titleRef} title={layout.title}>
-                    {layout.title}
-                  </Title>
-                )}
+                {showTitle && TitleComponent}
               </Grid>
             </Grid>
             <Grid item xs />

apis/nucleus/src/components/listbox/components/EditableTitle.jsx

@@ -0,0 +1,84 @@
+import React, { useState, useRef } from 'react';
+import { styled } from '@mui/material/styles';
+import { Typography, InputBase } from '@mui/material';
+import useProperties from '../../../hooks/useProperties';
+
+const Title = styled(Typography)(({ theme }) => ({
+  color: theme.listBox?.title?.main?.color,
+  fontSize: theme.listBox?.title?.main?.fontSize,
+  fontFamily: theme.listBox?.title?.main?.fontFamily,
+}));
+
+const StyledInput = styled(InputBase)(({ theme }) => ({
+  color: theme.listBox?.title?.main?.color,
+  fontSize: theme.listBox?.title?.main?.fontSize ?? theme.typography.h6.fontSize,
+  fontFamily: theme.listBox?.title?.main?.fontFamily ?? theme.typography.h6.fontFamily,
+  fontWeight: theme.listBox?.title?.main?.fontWeight ?? theme.typography.h6.fontWeight,
+}));
+
+export default function EditableTitle({ layout, model }) {
+  const [properties] = useProperties(model);
+  const [titleDef, setTitleDef] = useState(
+    properties?.title?.qStringExpression?.qExpr ? `=${properties?.title?.qStringExpression?.qExpr}` : properties?.title
+  );
+  const [isTitleFocused, setIsTitleFocused] = useState(false);
+  const isCanceledChange = useRef(false);
+
+  const confirmChange = () => {
+    if (isCanceledChange.current) {
+      isCanceledChange.current = false;
+      return;
+    }
+    model.setProperties({
+      ...properties,
+      title: titleDef[0] === '=' ? { qStringExpression: { qExpr: titleDef.substr(1) } } : titleDef,
+    });
+    setIsTitleFocused(false);
+  };
+
+  const onClick = () => {
+    setTitleDef(
+      properties?.title?.qStringExpression?.qExpr
+        ? `=${properties?.title?.qStringExpression?.qExpr}`
+        : properties?.title
+    );
+    setIsTitleFocused(true);
+  };
+
+  const onChange = (event) => {
+    setTitleDef(event.target.value);
+  };
+
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case 'Enter':
+        confirmChange();
+        break;
+      case 'Escape':
+        isCanceledChange.current = true;
+        setIsTitleFocused(false);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div>
+      {!isTitleFocused ? (
+        <Title variant="h6" noWrap title={layout.title} onClick={onClick}>
+          {layout.title}
+        </Title>
+      ) : (
+        <StyledInput
+          title={layout.title}
+          autoFocus
+          value={titleDef}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          onBlur={() => confirmChange()}
+        />
+      )}
+    </div>
+  );
+}