@monolith-forensics/monolith-ui 1.3.113 → 1.4.0

package/dist/TextAreaInput/TextAreaInput.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { Size } from "../core";
 import { DropDownItem } from "..";
+import { DropDownMenuProps } from "../DropDownMenu/types";
 export type InsertableItem = {
     label: string;
     value: string;
+    group?: string;
 };
 export interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     variant?: "contained" | "filled" | "outlined" | "text";
@@ -20,13 +22,28 @@ export interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTex
         rowHeight: number;
     }) => void;
     showActionMenu?: boolean;
+    /**
+     * Visual style of the action menu trigger.
+     * - `"ellipsis"` renders a minimal `...` icon button (default).
+     * - `"dropdown"` renders an outlined button with a label and arrow, similar to the Table Filter menu.
+     */
+    actionMenuVariant?: "ellipsis" | "dropdown";
     actionMenuOptions?: Array<{
         value: string;
         label: string;
     }>;
     onActionMenuSelect?: (item: DropDownItem) => void;
+    /** Label displayed on the actions dropdown button. Only used when `actionMenuVariant` is `"dropdown"`. Defaults to "Actions". */
+    actionMenuLabel?: string;
+    /** Icon rendered in the left section of the actions dropdown button. Only used when `actionMenuVariant` is `"dropdown"`. Defaults to MoreHorizontal. */
+    actionMenuIcon?: React.ReactNode;
+    /** Whether the actions dropdown is searchable. Only used when `actionMenuVariant` is `"dropdown"`. Defaults to false. */
+    actionMenuSearchable?: boolean;
+    /** Additional props forwarded to the DropDownMenu component. Only used when `actionMenuVariant` is `"dropdown"`. */
+    actionMenuProps?: Partial<DropDownMenuProps>;
     insertableItems?: InsertableItem[];
     onInsertItem?: (item: InsertableItem) => void;
+    groupInsertableItems?: boolean;
 }
 declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaInput;

package/dist/TextAreaInput/TextAreaInput.js

@@ -50,11 +50,11 @@ const TextAreaInput = forwardRef((props, ref) => {
     // UI
     label, error, required, colSpan = 1, size = "sm", description, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements, 
     // Action menu
-    showActionMenu = false, actionMenuOptions = DEFAULT_ACTIONS, onActionMenuSelect, 
+    showActionMenu = false, actionMenuVariant = "ellipsis", actionMenuOptions = DEFAULT_ACTIONS, onActionMenuSelect, actionMenuLabel = "Actions", actionMenuIcon, actionMenuSearchable = false, actionMenuProps, 
     // Insertable items
-    insertableItems, onInsertItem } = props, 
+    insertableItems, onInsertItem, groupInsertableItems } = props, 
     // Rest of props for TextArea
-    rest = __rest(props, ["label", "error", "required", "colSpan", "size", "description", "maxRows", "minRows", "onHeightChange", "cacheMeasurements", "showActionMenu", "actionMenuOptions", "onActionMenuSelect", "insertableItems", "onInsertItem"]);
+    rest = __rest(props, ["label", "error", "required", "colSpan", "size", "description", "maxRows", "minRows", "onHeightChange", "cacheMeasurements", "showActionMenu", "actionMenuVariant", "actionMenuOptions", "onActionMenuSelect", "actionMenuLabel", "actionMenuIcon", "actionMenuSearchable", "actionMenuProps", "insertableItems", "onInsertItem", "groupInsertableItems"]);
     // State for insert menu visibility
     const [showInsertMenu, setShowInsertMenu] = useState(false);
     const [triggerSelectBoxOpen, setTriggerSelectBoxOpen] = useState(false);
@@ -75,10 +75,16 @@ const TextAreaInput = forwardRef((props, ref) => {
         if (!showInsertMenu)
             return;
         const handleClickOutside = (event) => {
-            if (insertMenuRef.current &&
-                !insertMenuRef.current.contains(event.target)) {
-                setShowInsertMenu(false);
-            }
+            var _a, _b, _c;
+            const target = event.target;
+            // Ignore clicks inside the insert menu container
+            if ((_a = insertMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            // Ignore clicks inside the SelectBox floating portal dropdown
+            const floatingEl = (_c = (_b = target).closest) === null || _c === void 0 ? void 0 : _c.call(_b, ".mfFloating");
+            if (floatingEl)
+                return;
+            setShowInsertMenu(false);
         };
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
@@ -86,6 +92,7 @@ const TextAreaInput = forwardRef((props, ref) => {
         };
     }, [showInsertMenu]);
     const handleActionSelect = (item) => {
+        var _a;
         if (item.value === "insert" && (insertableItems === null || insertableItems === void 0 ? void 0 : insertableItems.length)) {
             setShowInsertMenu(true);
             // Trigger SelectBox to open using the new enhanced props
@@ -95,11 +102,10 @@ const TextAreaInput = forwardRef((props, ref) => {
             // Built-in clear functionality
             const textarea = textareaRef.current;
             if (textarea) {
-                textarea.value = "";
+                const nativeSet = (_a = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")) === null || _a === void 0 ? void 0 : _a.set;
+                nativeSet === null || nativeSet === void 0 ? void 0 : nativeSet.call(textarea, "");
+                textarea.dispatchEvent(new Event("input", { bubbles: true }));
                 textarea.focus();
-                // Trigger change event so controlled components update
-                const event = new Event("input", { bubbles: true });
-                textarea.dispatchEvent(event);
             }
             onActionMenuSelect === null || onActionMenuSelect === void 0 ? void 0 : onActionMenuSelect(item);
         }
@@ -112,6 +118,7 @@ const TextAreaInput = forwardRef((props, ref) => {
         setTriggerSelectBoxOpen(false);
     };
     const handleInsertSelect = (value, option) => {
+        var _a;
         console.log("Selected value:", value, "Selected option:", option); // Debug log
         // SelectBox passes (value, option) - we want the full option object
         const item = option;
@@ -131,28 +138,40 @@ const TextAreaInput = forwardRef((props, ref) => {
                 const end = textarea.selectionEnd;
                 const currentValue = textarea.value;
                 const newValue = currentValue.slice(0, start) + item.value + currentValue.slice(end);
-                textarea.value = newValue;
+                // Use the native setter so React's synthetic event system
+                // recognises the change on controlled inputs
+                const nativeSet = (_a = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")) === null || _a === void 0 ? void 0 : _a.set;
+                nativeSet === null || nativeSet === void 0 ? void 0 : nativeSet.call(textarea, newValue);
+                // Dispatch as a bubbling event so React's onChange fires
+                textarea.dispatchEvent(new Event("input", { bubbles: true }));
                 textarea.focus();
                 textarea.setSelectionRange(start + item.value.length, start + item.value.length);
-                // Trigger change event
-                const event = new Event("input", { bubbles: true });
-                textarea.dispatchEvent(event);
             }
         }
         setShowInsertMenu(false);
     };
-    return (_jsxs("div", { style: { gridColumn: `span ${colSpan}`, height: "fit-content" }, children: [label && (_jsx(FieldLabel, { asterisk: required, error: error, description: description, size: size, actionComponent: showActionMenu ? (_jsx(DropDownMenu, { data: actionMenuOptions, variant: "text", size: "xs", arrow: false, onItemSelect: handleActionSelect, buttonProps: {
-                        "aria-label": "Open actions",
-                        style: {
-                            minWidth: "auto",
-                            border: "none",
-                            background: "transparent",
-                            padding: 0,
-                            margin: 0,
-                            height: 16,
-                            width: 16,
-                        },
-                    }, children: _jsx(StyledMoreHorizontal, { size: 16 }) })) : null, children: label })), _jsxs(TextAreaWrapper, { children: [_jsx(TextArea, Object.assign({ ref: mergedRef, size: size, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange, cacheMeasurements: cacheMeasurements }, rest)), showInsertMenu && (insertableItems === null || insertableItems === void 0 ? void 0 : insertableItems.length) && (_jsx(InsertMenuOverlay, { ref: insertMenuRef, "$visible": showInsertMenu, children: _jsx(StyledInsertSelectBox, { data: insertableItems, placeholder: "Select item to insert...", searchable: true, clearable: false, arrow: false, focused: showInsertMenu, openOnFocus: true, triggerOpen: triggerSelectBoxOpen, onOpened: handleSelectBoxOpened, onChange: handleInsertSelect, size: size }) }))] })] }));
+    return (_jsxs("div", { style: { gridColumn: `span ${colSpan}`, height: "fit-content" }, children: [label && (_jsx(FieldLabel, { asterisk: required, error: error, description: description, size: size, actionComponent: showActionMenu
+                    ? actionMenuVariant === "dropdown"
+                        ? (_jsx(DropDownMenu, Object.assign({ data: actionMenuOptions, variant: "outlined", size: "xs", arrow: true, searchable: actionMenuSearchable, onItemSelect: handleActionSelect, buttonProps: {
+                                title: actionMenuLabel,
+                                size: "xxs",
+                                leftSection: actionMenuIcon,
+                            }, dropDownProps: {
+                                style: { width: 175, maxWidth: 400 },
+                            } }, actionMenuProps, { children: actionMenuLabel })))
+                        : (_jsx(DropDownMenu, { data: actionMenuOptions, variant: "text", size: "xs", arrow: false, onItemSelect: handleActionSelect, buttonProps: {
+                                "aria-label": "Open actions",
+                                style: {
+                                    minWidth: "auto",
+                                    border: "none",
+                                    background: "transparent",
+                                    padding: 0,
+                                    margin: 0,
+                                    height: 16,
+                                    width: 16,
+                                },
+                            }, children: _jsx(StyledMoreHorizontal, { size: 16 }) }))
+                    : null, children: label })), _jsxs(TextAreaWrapper, { children: [_jsx(TextArea, Object.assign({ ref: mergedRef, size: size, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange, cacheMeasurements: cacheMeasurements }, rest)), showInsertMenu && (insertableItems === null || insertableItems === void 0 ? void 0 : insertableItems.length) && (_jsx(InsertMenuOverlay, { ref: insertMenuRef, "$visible": showInsertMenu, children: _jsx(StyledInsertSelectBox, { data: insertableItems, grouped: groupInsertableItems, searchable: true, clearable: false, arrow: false, focused: showInsertMenu, openOnFocus: true, triggerOpen: triggerSelectBoxOpen, onOpened: handleSelectBoxOpened, onChange: handleInsertSelect, size: size }) }))] })] }));
 });
 TextAreaInput.displayName = "TextAreaInput";
 export default TextAreaInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.113",
+  "version": "1.4.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",