@visns-studio/visns-components 6.17.2 → 6.20.1

package/src/components/DataGrid.jsx

@@ -56,6 +56,7 @@ import {
     isColumnSortable,
 } from '../utils/columnsMetadataUtils';
 import {
+    Ban,
     AlarmClock,
     RotateCcw,
     RefreshCw,
@@ -90,8 +91,20 @@ import {
     // affordance, which a bare Plus does not say on its own.
     ChevronDown,
     ListPlus,
+    // Quick-assign: a person plus a plus sign says "hand this to someone" in a
+    // way a bare User glyph (which reads as "the person who holds it") does not.
+    UserPlus,
+    Search,
+    X,
 } from 'lucide-react';
 import styles from './styles/DataGrid.module.scss';
+import {
+    filterPickerOptions,
+    isPickerRowAction,
+    normalisePickerOptions,
+    pickerOptionsCacheKey,
+    splitSettingEntries,
+} from './utils/rowActionSettings';
 
 /**
  * `ajaxSetting.rowStyles[].style` tokens → the module class that draws them.
@@ -276,6 +289,25 @@ const loadData = async (
 const ROW_HEIGHT = 34;
 const GRID_CHROME = ROW_HEIGHT * 2 + 60; // header + filter row + footer
 
+/**
+ * The fewest data rows' worth of body the grid will render.
+ *
+ * A table with two rows in it should not collapse to a sliver: the empty-state
+ * panel, a loading spinner and the "no records" message all need somewhere to
+ * sit. Five rows is enough for those without being the several-hundred-pixel
+ * void a window-sized grid leaves under a short table.
+ */
+const MIN_VISIBLE_ROWS = 5;
+
+/**
+ * The shortest a data row is assumed to be when sizing the grid to its content.
+ *
+ * Measured at 44px in the default density. Used as a FLOOR rather than a value,
+ * so a density that renders taller rows still gets enough room and a stale or
+ * unavailable measurement can only ever over-allocate.
+ */
+const ROW_PITCH_FLOOR = 44;
+
 /**
  * Column types whose renderer names the grid column `${type}.${id}` instead of
  * the plain field path. Their filter entries must use the same name, otherwise
@@ -303,7 +335,12 @@ const DataGrid = forwardRef(
             ajaxSetting,
             api,
             columns,
-            form,
+            // 24 unguarded `form.*` reads below, the first of them
+            // `form.searchDisable`, so a consumer that omits this optional-
+            // looking prop crashed on mount instead of rendering a read-only
+            // grid. An empty object gives every one of those reads undefined,
+            // which is what they already treat as "not set".
+            form = {},
             gridHeight,
             hoverColor,
             legend,
@@ -463,6 +500,56 @@ const DataGrid = forwardRef(
             ]
         );
 
+        /**
+         * The open quick-assign menu, or null.
+         *
+         * `{ config, row, anchor }` — anchor is the clicked icon's viewport
+         * rect, so the menu can sit under it. Held as one object rather than
+         * three pieces of state so that opening, moving between rows and
+         * closing are each a single update and the menu can never render
+         * against a row it was not opened from.
+         */
+        const [actionPicker, setActionPicker] = useState(null);
+        const [pickerOptions, setPickerOptions] = useState([]);
+        const [pickerLoading, setPickerLoading] = useState(false);
+        const [pickerSearch, setPickerSearch] = useState('');
+        // Options live for the life of the grid mount: the user list behind a
+        // quick-assign menu does not change between two clicks, and refetching
+        // it made the menu flash empty every time it opened.
+        const pickerOptionsCache = useRef({});
+
+        /**
+         * Where a record created from this grid should open, for
+         * `form.openOnCreate`.
+         *
+         * A view that already links its rows to a detail page has told us the
+         * url once, in the column's `link` config — repeating it under the
+         * form would be a second copy to keep in step. So the first column
+         * with a plain `{ key, url }` link wins. Row links that open a file
+         * (`folder`) or a popup are not detail pages, so they are skipped.
+         *
+         * A grid whose columns carry no link can still opt in by giving
+         * `openOnCreate` its own `{ url, key }`; <Form> prefers that over
+         * whatever is derived here.
+         */
+        const openOnCreateLink = useMemo(() => {
+            if (!form?.openOnCreate) {
+                return null;
+            }
+
+            const linked = (columns || []).find(
+                (column) =>
+                    column?.link?.url &&
+                    column.link.key &&
+                    !column.link.folder &&
+                    !column.link.popup
+            );
+
+            return linked
+                ? { url: linked.link.url, key: linked.link.key }
+                : null;
+        }, [columns, form?.openOnCreate]);
+
         /** Group expansion state */
         const [collapsedGroups, setCollapsedGroups] = useState({});
 
@@ -1712,6 +1799,7 @@ const DataGrid = forwardRef(
                 case 'activate':
                 case 'arrowCycle':
                 case 'cloudUpload':
+                case 'ban':
                 case 'envelope':
                 case 'file':
                 case 'image':
@@ -2112,6 +2200,8 @@ const DataGrid = forwardRef(
                     return Edit;
                 case 'envelope':
                     return Mail;
+                case 'ban':
+                    return Ban;
                 case 'file':
                     return File;
                 case 'image':
@@ -2435,6 +2525,7 @@ const DataGrid = forwardRef(
 
         /** Lucide icons an inline row action may name via `icon` */
         const rowActionIcons = {
+            ban: Ban,
             check: Check,
             copy: Copy,
             delete: Trash2,
@@ -2443,6 +2534,7 @@ const DataGrid = forwardRef(
             plus: Plus,
             trash: Trash2,
             undo: RotateCcw,
+            userPlus: UserPlus,
         };
 
         /**
@@ -2462,6 +2554,21 @@ const DataGrid = forwardRef(
                 return false;
             }
 
+            // An inline action declared in the ROOT `settings` array sits in
+            // the same cell as update/delete, so it answers to the same two
+            // gates those do. Dormant for any config that names neither.
+            if (!settingAllowedBySuperAdmin(config)) {
+                return false;
+            }
+
+            if (
+                Array.isArray(config.roles) &&
+                config.roles.length > 0 &&
+                !userHasAnyRole(config.roles)
+            ) {
+                return false;
+            }
+
             if (
                 Array.isArray(config.show) &&
                 !config.show.every((condition) =>
@@ -2493,7 +2600,12 @@ const DataGrid = forwardRef(
                     : String(value);
             });
 
-        const executeRowAction = async (config, row) => {
+        /**
+         * `extraBody` carries the value a picker action collected (e.g.
+         * `{ user_id: 7 }` from the quick-assign menu). A plain confirm action
+         * passes nothing and behaves exactly as before.
+         */
+        const executeRowAction = async (config, row, extraBody = null) => {
             const fetchConfig = config.fetch;
 
             if (!fetchConfig?.url) {
@@ -2514,7 +2626,7 @@ const DataGrid = forwardRef(
                 const result = await CustomFetch(
                     url,
                     fetchConfig.method || 'POST',
-                    { ...fetchConfig.data }
+                    { ...fetchConfig.data, ...(extraBody || {}) }
                 );
 
                 // These endpoints answer 200 with an `error` string rather
@@ -2539,7 +2651,100 @@ const DataGrid = forwardRef(
             }
         };
 
-        const handleRowAction = (config, row) => {
+        /** Open (or re-target, or toggle shut) the quick-assign menu */
+        const openActionPicker = (config, row, anchor) => {
+            setActionPicker((current) => {
+                // Clicking the same row's icon again closes the menu
+                if (
+                    current &&
+                    current.config?.id === config.id &&
+                    current.row === row
+                ) {
+                    return null;
+                }
+
+                return { config, row, anchor };
+            });
+            setPickerSearch('');
+        };
+
+        const closeActionPicker = () => {
+            setActionPicker(null);
+            setPickerSearch('');
+        };
+
+        /**
+         * Fixed-position box under the clicked icon.
+         *
+         * Fixed rather than absolute because the menu is rendered at the root
+         * of the component, outside the grid's own scrolling/overflow-hidden
+         * cells — an absolutely positioned panel would be clipped by the row.
+         * It flips above the icon when there is no room below (the last rows
+         * of a full page) and is clamped inside the viewport horizontally.
+         */
+        const actionPickerStyle = () => {
+            const anchor = actionPicker?.anchor;
+
+            if (!anchor) {
+                return { display: 'none' };
+            }
+
+            const width = 240;
+            const maxHeight = 300;
+            const viewportWidth =
+                typeof window === 'undefined' ? width + 16 : window.innerWidth;
+            const viewportHeight =
+                typeof window === 'undefined' ? maxHeight + 16 : window.innerHeight;
+            // Right-aligned to the icon: the action cell is the last column,
+            // so growing leftwards keeps the menu on screen.
+            const left = Math.max(
+                8,
+                Math.min(anchor.right - width, viewportWidth - width - 8)
+            );
+            const openUpwards =
+                anchor.bottom + 6 + maxHeight > viewportHeight - 8 &&
+                anchor.top > maxHeight;
+
+            return {
+                position: 'fixed',
+                zIndex: 10000,
+                width: `${width}px`,
+                maxHeight: `${maxHeight}px`,
+                left: `${left}px`,
+                ...(openUpwards
+                    ? { bottom: `${viewportHeight - anchor.top + 6}px` }
+                    : { top: `${anchor.bottom + 6}px` }),
+            };
+        };
+
+        /**
+         * A chosen option becomes the action's body and goes through the same
+         * executeRowAction every other inline action uses — so the toast, the
+         * `error`-in-a-200 handling and the grid reload are one implementation.
+         * `option` is null for the "Unassign" entry, which posts an explicit
+         * null (the endpoint validates `present, nullable`).
+         */
+        const handleActionPickerChoice = (option) => {
+            if (!actionPicker) {
+                return;
+            }
+
+            const { config, row } = actionPicker;
+            const bodyKey = config.fetch?.bodyKey || 'value';
+
+            closeActionPicker();
+            executeRowAction(config, row, { [bodyKey]: option?.id ?? null });
+        };
+
+        const handleRowAction = (config, row, anchor) => {
+            // A picker action collects a value first — there is nothing to
+            // confirm until one has been chosen
+            if (isPickerRowAction(config)) {
+                openActionPicker(config, row, anchor);
+
+                return;
+            }
+
             if (!config.confirm) {
                 executeRowAction(config, row);
 
@@ -2576,10 +2781,22 @@ const DataGrid = forwardRef(
             return (
                 <span
                     key={`row-action-${config.id}`}
+                    // Named so the picker's outside-click dismissal can tell a
+                    // click on the trigger from a click on the page: without
+                    // it, mousedown closes the menu a moment before click
+                    // reopens it and the icon can never toggle shut.
+                    className={styles.rowActionTrigger}
                     onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        handleRowAction(config, row);
+                        // The menu variant needs to know where the icon is;
+                        // currentTarget is the icon's own wrapper, so its rect
+                        // survives a click that landed on the svg inside it.
+                        handleRowAction(
+                            config,
+                            row,
+                            e.currentTarget.getBoundingClientRect()
+                        );
                     }}
                 >
                     <IconComponent
@@ -2594,6 +2811,103 @@ const DataGrid = forwardRef(
             );
         };
 
+        /**
+         * Load the open picker's options, once per (url, params) per mount.
+         *
+         * Keyed on the cache key rather than on `actionPicker` itself, so
+         * moving the menu from one row to the next does not refetch — the list
+         * of people you can assign to is the same list on every row.
+         */
+        const pickerCacheKey = actionPicker
+            ? pickerOptionsCacheKey(actionPicker.config)
+            : null;
+
+        useEffect(() => {
+            if (!pickerCacheKey || !actionPicker?.config?.optionsUrl) {
+                return;
+            }
+
+            const cached = pickerOptionsCache.current[pickerCacheKey];
+
+            if (cached) {
+                setPickerOptions(cached);
+                setPickerLoading(false);
+
+                return;
+            }
+
+            let cancelled = false;
+
+            setPickerLoading(true);
+
+            CustomFetch(
+                actionPicker.config.optionsUrl,
+                actionPicker.config.optionsMethod || 'POST',
+                { ...(actionPicker.config.optionsParams || {}) }
+            )
+                .then((res) => {
+                    const options = normalisePickerOptions(res?.data ?? res);
+
+                    pickerOptionsCache.current[pickerCacheKey] = options;
+
+                    if (!cancelled) {
+                        setPickerOptions(options);
+                        setPickerLoading(false);
+                    }
+                })
+                .catch((error) => {
+                    console.error('Row action picker options failed:', error);
+
+                    if (!cancelled) {
+                        setPickerOptions([]);
+                        setPickerLoading(false);
+                    }
+                });
+
+            return () => {
+                cancelled = true;
+            };
+        }, [pickerCacheKey]);
+
+        // The menu is a floating panel with no backdrop, so a click anywhere
+        // else — or Escape, or a scroll that would leave it stranded beside
+        // nothing — dismisses it.
+        useEffect(() => {
+            if (!actionPicker) {
+                return;
+            }
+
+            const onKeyDown = (event) => {
+                if (event.key === 'Escape') {
+                    closeActionPicker();
+                }
+            };
+
+            const onDismiss = (event) => {
+                if (
+                    event?.target?.closest?.(
+                        `.${styles.rowActionPicker}, .${styles.rowActionTrigger}`
+                    )
+                ) {
+                    return;
+                }
+
+                closeActionPicker();
+            };
+
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('mousedown', onDismiss);
+            window.addEventListener('scroll', closeActionPicker, true);
+            window.addEventListener('resize', closeActionPicker);
+
+            return () => {
+                document.removeEventListener('keydown', onKeyDown);
+                document.removeEventListener('mousedown', onDismiss);
+                window.removeEventListener('scroll', closeActionPicker, true);
+                window.removeEventListener('resize', closeActionPicker);
+            };
+        }, [actionPicker]);
+
         // Touch handlers for tooltips
         const handleTouchStart = (e, buttonId, label) => {
             // Clear any existing timer
@@ -2867,6 +3181,17 @@ const DataGrid = forwardRef(
                                                 );
                                             }
                                         }
+                                    } else if (
+                                        rowData === null ||
+                                        rowData === undefined ||
+                                        rowData === ''
+                                    ) {
+                                        // A link column whose key is empty on
+                                        // THIS row has nowhere to go — a task
+                                        // that belongs to a customer directly
+                                        // has no ticket_id, and following the
+                                        // link would open "/tickets/null".
+                                        // The cell is simply inert.
                                     } else {
                                         navigate(`${linkUrl}${rowData}`);
                                     }
@@ -4063,6 +4388,24 @@ const DataGrid = forwardRef(
                                     break;
                                 case 'select':
                                     filterEditor = SelectFilter;
+
+                                    // Inline options: `filter.options` as
+                                    // [{ id, label }].
+                                    //
+                                    // `selectedDataSource` is only ever filled
+                                    // from a URL fetch, so a filter over a
+                                    // fixed set — a status of Active/Completed,
+                                    // a yes/no flag — had nowhere to get its
+                                    // choices and rendered an empty dropdown.
+                                    // Fetching two known values over HTTP would
+                                    // be silly; this lets the column carry them.
+                                    if (
+                                        !selectedDataSource &&
+                                        Array.isArray(column.filter.options)
+                                    ) {
+                                        selectedDataSource = column.filter.options;
+                                    }
+
                                     // Only set filter editor if we have data or it's not a URL-based filter
                                     if (selectedDataSource || !column.filter.url) {
                                         filterEditorProps = {
@@ -5033,9 +5376,18 @@ const DataGrid = forwardRef(
                                     return null;
                                 }
 
+                                // Inline actions first, so update/delete keep
+                                // the end-of-row position muscle memory
+                                // expects them in.
+                                const { inlineActions, standard } =
+                                    splitSettingEntries(memoizedSettings);
+
                                 return (
                                     <div className={styles.tdactions}>
-                                        {memoizedSettings
+                                        {inlineActions.map((config) =>
+                                            renderRowAction(config, data)
+                                        )}
+                                        {standard
                                             .filter(
                                                 (setting) =>
                                                     !actionColumnSettingIds.has(
@@ -5248,6 +5600,15 @@ const DataGrid = forwardRef(
         // after it — which used to be a flat 28px guess that was wrong for any
         // page nesting its grid differently.
         const containerRef = useRef(null);
+
+        /**
+         * The form's own guarded close, published by <Form> once it mounts.
+         *
+         * The dialog shell owns the backdrop and the Escape key; only the form
+         * knows whether anything has been typed. Null until a form is open, in
+         * which case the plain close is correct.
+         */
+        const formCloseRef = useRef(null);
         const measuredHeight = useAvailableHeight(containerRef, {
             bottomGutter: 0,
             measureChrome: true,
@@ -5296,33 +5657,164 @@ const DataGrid = forwardRef(
                 return null;
             }
 
-            const gridEl = root.querySelector('.InovuaReactDataGrid');
-            const body = root.querySelector('.InovuaReactDataGrid__body');
+            // Sum the parts, rather than subtracting the body from the grid.
+            //
+            // `.InovuaReactDataGrid__body` turns out to BE the whole grid in
+            // this build — measured 448px against a 448px grid — so the old
+            // subtraction returned 0, failed its `> 0` guard, and silently
+            // handed back null every single time. The caller then used the
+            // GRID_CHROME constant, and nothing ever revealed that the
+            // measurement had never once worked.
+            const heightOf = (selector) => {
+                const el = root.querySelector(selector);
+
+                return el ? el.getBoundingClientRect().height : 0;
+            };
+
+            const chrome =
+                heightOf('.InovuaReactDataGrid__header-wrapper, .InovuaReactDataGrid__column-header') +
+                heightOf('.InovuaReactDataGrid__column-header__filter-wrapper') +
+                heightOf('.InovuaReactDataGrid__footer-wrapper, .InovuaReactDataGrid__footer') +
+                heightOf('.InovuaReactDataGrid__pagination-toolbar');
+
+            return chrome > 0 ? chrome : null;
+        };
 
-            if (!gridEl || !body) {
+        /**
+         * How tall a data row actually is, measured.
+         *
+         * The density table's `rowUnit` is what the grid is ASKED to use; what
+         * it renders can differ — measured 44px against a rowUnit of 32. Ten
+         * rows costed at 32px each under-allocated the body by 120px, so the
+         * grid was sized too short and clipped its own last rows. Measuring
+         * the rendered pitch removes the assumption entirely.
+         */
+        const measureRowPitch = () => {
+            const root = containerRef.current;
+
+            if (!root || typeof root.querySelectorAll !== 'function') {
                 return null;
             }
 
-            const chrome =
-                gridEl.getBoundingClientRect().height -
-                body.getBoundingClientRect().height;
+            const rows = root.querySelectorAll('.InovuaReactDataGrid__row');
 
-            return chrome > 0 ? chrome : null;
+            if (rows.length >= 2) {
+                const pitch =
+                    rows[1].getBoundingClientRect().top -
+                    rows[0].getBoundingClientRect().top;
+
+                if (pitch > 0) {
+                    return pitch;
+                }
+            }
+
+            if (rows.length === 1) {
+                const single = rows[0].getBoundingClientRect().height;
+
+                if (single > 0) {
+                    return single;
+                }
+            }
+
+            return null;
         };
 
         useEffect(() => {
-            const getMinimumHeight = () => {
-                if (resolvedHeight > 0) return resolvedHeight;
-                return fitToRows(dataCount, window.innerHeight);
+            // TWO heights, and they must not be conflated.
+            //
+            // `availableHeight` is what the window allows, and it is what the
+            // page size is derived from below. `renderedHeight` is what the
+            // grid is actually drawn at, which is the smaller of that and what
+            // the rows need.
+            //
+            // Deriving the page size from the *rendered* height instead would
+            // feed back on itself: a short table shrinks the grid, a shorter
+            // grid asks for fewer rows, and the grid can then never grow back
+            // to discover there was more data. So the request stays sized to
+            // the window and only the painting follows the content.
+            const availableHeight =
+                resolvedHeight > 0
+                    ? resolvedHeight
+                    : fitToRows(dataCount, window.innerHeight);
+
+            // A window-sized grid asks for as many rows as fit — 37 on a 1440p
+            // screen. A table holding four of them rendered the other 33 as
+            // empty body, which is the single most dated thing about an index
+            // page: a thousand pixels of nothing under the last row, with the
+            // pager stranded at the bottom of it.
+            const contentHeight = () => {
+                const chrome = measureGridChrome() ?? GRID_CHROME;
+
+                // ERR HIGH, DELIBERATELY.
+                //
+                // The two errors here are not symmetrical. Over-allocating
+                // leaves a little empty body under the last row, which nobody
+                // notices. Under-allocating CLIPS rows behind the pager, which
+                // everybody notices and which looks like data loss.
+                //
+                // The density table's `rowUnit` is what the grid is asked to
+                // use; measured, rows render at 44px against a rowUnit of 32.
+                // Measurement is preferred when it is available, but it reads
+                // the DOM and the DOM is not always there when this runs — so
+                // there is a floor under whatever it returns.
+                const pitch = Math.max(
+                    measureRowPitch() ?? 0,
+                    grid.rowUnit ?? 0,
+                    ROW_PITCH_FLOOR
+                );
+
+                const rows = Math.max(dataCount || 0, MIN_VISIBLE_ROWS);
+
+                // Plus one row of slack, because sub-pixel heights round down
+                // and rounding down is what clips the last row.
+                return chrome + rows * pitch + pitch;
             };
 
-            const minHeight = getMinimumHeight();
+            // An explicit `gridHeight` is a CEILING, not an exact size.
+            //
+            // This first exempted it, on the reasoning that a page asking for a
+            // height should get it. But look at what the only caller actually
+            // passes: GenericDetail hands every tab `windowHeight * 0.65`, and
+            // its own comment says why — "a detail page stacks several grids
+            // down one tab and they cannot all own the viewport". That is a cap
+            // being expressed, not a measurement. Honouring it literally put
+            // ~975px of empty body under the two rows on a customer's Sites
+            // tab.
+            const renderedHeight = Math.min(availableHeight, contentHeight());
+
+            // Re-measure ONCE MORE after the browser has painted.
+            //
+            // Everything above runs in the same tick as the data change, which
+            // is before the new rows exist in the DOM — so `measureRowPitch`
+            // and `measureGridChrome` are reading the PREVIOUS render. With 10
+            // rows arriving into a grid that had none, the first pass costed
+            // them at the fallback unit and sized the body ~130px short, which
+            // clipped the last two rows behind the pager.
+            //
+            // rAF is the earliest point the real geometry exists. The guard
+            // stops it looping: it only writes when the corrected height
+            // actually differs.
+            const frame = requestAnimationFrame(() => {
+                const corrected = Math.min(availableHeight, contentHeight());
+
+                if (Math.abs(corrected - renderedHeight) > 1) {
+                    setGridStyle((prev) =>
+                        prev.height === corrected
+                            ? prev
+                            : { ...prev, height: corrected, minHeight: corrected }
+                    );
+                }
+            });
+
             setGridStyle((prevState) => ({
                 ...prevState,
-                minHeight,
-                height: minHeight,
+                minHeight: renderedHeight,
+                height: renderedHeight,
             }));
 
+            // Everything below sizes the REQUEST, so it reads availableHeight.
+            const minHeight = availableHeight;
+
             // How many rows to ask for.
             //
             // The rule used to be "if the profile has a rows_per_page, never
@@ -5375,6 +5867,7 @@ const DataGrid = forwardRef(
 
                 setLimit(rowsForHeight(minHeight, chrome, grid.rowUnit));
             }
+            return () => cancelAnimationFrame(frame);
         }, [
             dataCount,
             gridHeight,
@@ -6261,12 +6754,23 @@ const DataGrid = forwardRef(
                 <AudioPlayer audioSource={audioSource} />
                 <StandardModal
                     isOpen={modalShow}
-                    onClose={modalClose}
+                    onClose={() => (formCloseRef.current ?? modalClose)()}
                     title={formData.title || 'Edit Data'}
                     closeOnDocumentClick={false}
                     verticalAlign={formData.verticalAlign || 'center'}
+                    /* A record form is the case a side sheet is for: the list
+                       stays visible behind it, a long form scrolls naturally
+                       instead of stretching the dialog, and the width is fixed
+                       so the fields keep one measure on every monitor. A view
+                       that genuinely wants the centred dialog sets
+                       `form.layout: "modal"`. */
+                    variant={formData.layout === 'modal' ? 'modal' : 'sheet'}
+                    size={formData.modalSize || 'medium'}
                 >
                     <Form
+                        registerClose={(fn) => {
+                            formCloseRef.current = fn;
+                        }}
                         ajaxSetting={ajaxSetting}
                         api={api}
                         closeModal={modalClose}
@@ -6277,6 +6781,7 @@ const DataGrid = forwardRef(
                         gridRef={gridRef}
                         mapbox={mapbox}
                         modalOpen={modalOpen}
+                        openOnCreateLink={openOnCreateLink}
                         paramValue={paramValue}
                         style={style}
                         updateForm={setFormData}
@@ -6298,6 +6803,106 @@ const DataGrid = forwardRef(
                     setLightboxIndex={setLightboxIndex}
                 />
 
+                {/* Quick-assign menu for a picker row action */}
+                {actionPicker && (
+                    <div
+                        className={styles.rowActionPicker}
+                        style={actionPickerStyle()}
+                        role="dialog"
+                        aria-label={actionPicker.config.label || 'Choose'}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <div className={styles.rowActionPickerHeader}>
+                            <Search size={14} strokeWidth={2} />
+                            <input
+                                autoFocus
+                                type="text"
+                                className={styles.rowActionPickerSearch}
+                                placeholder={
+                                    actionPicker.config.searchPlaceholder ||
+                                    'Search…'
+                                }
+                                value={pickerSearch}
+                                onChange={(e) =>
+                                    setPickerSearch(e.target.value)
+                                }
+                            />
+                            <button
+                                type="button"
+                                className={styles.rowActionPickerClose}
+                                aria-label="Close"
+                                onClick={closeActionPicker}
+                            >
+                                <X size={14} strokeWidth={2} />
+                            </button>
+                        </div>
+                        <div className={styles.rowActionPickerList}>
+                            {pickerLoading ? (
+                                <div className={styles.rowActionPickerEmpty}>
+                                    Loading…
+                                </div>
+                            ) : (
+                                (() => {
+                                    const matches = filterPickerOptions(
+                                        pickerOptions,
+                                        pickerSearch
+                                    );
+                                    // The clear-it entry posts an explicit
+                                    // null. Hidden while searching: it is not
+                                    // a name and never matches the term.
+                                    const clearLabel =
+                                        actionPicker.config.emptyOptionLabel ??
+                                        'Unassign';
+
+                                    return (
+                                        <>
+                                            {clearLabel &&
+                                                !pickerSearch.trim() && (
+                                                    <button
+                                                        type="button"
+                                                        className={`${styles.rowActionPickerOption} ${styles.rowActionPickerClear}`}
+                                                        onClick={() =>
+                                                            handleActionPickerChoice(
+                                                                null
+                                                            )
+                                                        }
+                                                    >
+                                                        {clearLabel}
+                                                    </button>
+                                                )}
+                                            {matches.map((option) => (
+                                                <button
+                                                    key={option.id}
+                                                    type="button"
+                                                    className={
+                                                        styles.rowActionPickerOption
+                                                    }
+                                                    onClick={() =>
+                                                        handleActionPickerChoice(
+                                                            option
+                                                        )
+                                                    }
+                                                >
+                                                    {option.label}
+                                                </button>
+                                            ))}
+                                            {matches.length === 0 && (
+                                                <div
+                                                    className={
+                                                        styles.rowActionPickerEmpty
+                                                    }
+                                                >
+                                                    No matches
+                                                </div>
+                                            )}
+                                        </>
+                                    );
+                                })()
+                            )}
+                        </div>
+                    </div>
+                )}
+
                 {/* Touch Tooltip Overlay */}
                 {activeTooltip && (
                     <div