@monolith-forensics/monolith-ui 1.3.95 → 1.3.97

package/dist/SelectBox/SelectBox.js

@@ -10,7 +10,9 @@ import { StyledInputContainer, StyledInnerItemContainer, EmptyComponent, GroupTi
 // Re-export for backward compatibility
 export { StyledInputContainer };
 export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
-DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
+DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, 
+// Enhanced focus control props
+triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
     var _a, _b, _c, _d, _e, _f;
     // Component setup and data processing
     const theme = useTheme();
@@ -351,6 +353,26 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         };
     }, [topHeight, bottomHeight, isOpen]);
     // ============================================================================
+    // Enhanced Focus Control Effects
+    // ============================================================================
+    // Handle triggerFocus prop
+    useEffect(() => {
+        if (triggerFocus && inputRef.current) {
+            inputRef.current.focus();
+            onFocused === null || onFocused === void 0 ? void 0 : onFocused();
+        }
+    }, [triggerFocus, onFocused]);
+    // Handle triggerOpen prop
+    useEffect(() => {
+        if (triggerOpen) {
+            setIsOpen(true);
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+            onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+        }
+    }, [triggerOpen, onOpened]);
+    // ============================================================================
     // Render
     // ============================================================================
     return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), renderActionButton()] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
@@ -369,3 +391,4 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
                                     ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => renderOptionItem(item, index))] }, group.label)))
                                     : filteredItems.map((item, index) => renderOptionItem(item, index)) }))] })) }) }))] }));
 };
+SelectBox.displayName = "SelectBox";

package/dist/SelectBox/types.d.ts

@@ -42,4 +42,8 @@ export type SelectBoxProps = {
     onSearch?: (value: string) => void;
     searchFn?: (value: string) => void;
     onItemAdded?: (item: Option | string) => void;
+    triggerFocus?: boolean;
+    triggerOpen?: boolean;
+    onFocused?: () => void;
+    onOpened?: () => void;
 };

package/dist/TextAreaInput/TextAreaInput.d.ts

@@ -1,5 +1,11 @@
+import React from "react";
 import { Size } from "../core";
-interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+import { DropDownItem } from "..";
+export type InsertableItem = {
+    label: string;
+    value: string;
+};
+export interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     variant?: "contained" | "filled" | "outlined" | "text";
     label?: string;
     error?: string;
@@ -9,10 +15,18 @@ interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaEl
     description?: string;
     maxRows?: number;
     minRows?: number;
+    cacheMeasurements?: boolean;
     onHeightChange?: (height: number, meta: {
         rowHeight: number;
     }) => void;
-    cacheMeasurements?: boolean;
+    showActionMenu?: boolean;
+    actionMenuOptions?: Array<{
+        value: string;
+        label: string;
+    }>;
+    onActionMenuSelect?: (item: DropDownItem) => void;
+    insertableItems?: InsertableItem[];
+    onInsertItem?: (item: InsertableItem) => void;
 }
-declare const TextAreaInput: import("react").ForwardRefExoticComponent<TextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaInput;

package/dist/TextAreaInput/TextAreaInput.js

@@ -10,13 +10,129 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextArea, FieldLabel } from "..";
-import { forwardRef } from "react";
-const TextAreaInput = forwardRef((_a, ref) => {
-    var { label, error, required, colSpan = 1, size = "sm", description, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements } = _a, rest = __rest(_a, ["label", "error", "required", "colSpan", "size", "description", "maxRows", "minRows", "onHeightChange", "cacheMeasurements"]);
-    return (_jsxs("div", { style: {
-            gridColumn: `span ${colSpan}`,
-            height: "fit-content",
-        }, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsx(TextArea, Object.assign({ ref: ref, size: size, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange, cacheMeasurements: cacheMeasurements }, rest))] }));
+import styled from "styled-components";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { TextArea, FieldLabel, DropDownMenu, SelectBox, } from "..";
+import { MoreHorizontal } from "lucide-react";
+const DEFAULT_ACTIONS = [
+    { value: "clear", label: "Clear Text" },
+    { value: "insert", label: "Insert Item" },
+];
+const TextAreaWrapper = styled.div `
+  position: relative;
+`;
+const InsertMenuOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  pointer-events: ${({ $visible }) => ($visible ? "auto" : "none")};
+  transform: ${({ $visible }) => $visible ? "translateY(0)" : "translateY(-4px)"};
+  transition: opacity 0.2s ease, transform 0.2s ease;
+`;
+const StyledInsertSelectBox = styled(SelectBox) `
+  width: 100%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid ${({ theme }) => theme.palette.primary.main};
+`;
+const TextAreaInput = forwardRef((props, ref) => {
+    const { 
+    // UI
+    label, error, required, colSpan = 1, size = "sm", description, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements, 
+    // Action menu
+    showActionMenu = false, actionMenuOptions = DEFAULT_ACTIONS, onActionMenuSelect, 
+    // Insertable items
+    insertableItems, onInsertItem } = props, 
+    // Rest of props for TextArea
+    rest = __rest(props, ["label", "error", "required", "colSpan", "size", "description", "maxRows", "minRows", "onHeightChange", "cacheMeasurements", "showActionMenu", "actionMenuOptions", "onActionMenuSelect", "insertableItems", "onInsertItem"]);
+    // State for insert menu visibility
+    const [showInsertMenu, setShowInsertMenu] = useState(false);
+    const [triggerSelectBoxOpen, setTriggerSelectBoxOpen] = useState(false);
+    const textareaRef = useRef(null);
+    const insertMenuRef = useRef(null);
+    // Merge refs
+    const mergedRef = (node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
+    // Handle click outside to close insert menu
+    useEffect(() => {
+        if (!showInsertMenu)
+            return;
+        const handleClickOutside = (event) => {
+            if (insertMenuRef.current &&
+                !insertMenuRef.current.contains(event.target)) {
+                setShowInsertMenu(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [showInsertMenu]);
+    const handleActionSelect = (item) => {
+        if (item.value === "insert" && (insertableItems === null || insertableItems === void 0 ? void 0 : insertableItems.length)) {
+            setShowInsertMenu(true);
+            // Trigger SelectBox to open using the new enhanced props
+            setTriggerSelectBoxOpen(true);
+        }
+        else {
+            onActionMenuSelect === null || onActionMenuSelect === void 0 ? void 0 : onActionMenuSelect(item);
+        }
+    };
+    const handleSelectBoxOpened = () => {
+        // Reset the trigger after SelectBox has opened
+        setTriggerSelectBoxOpen(false);
+    };
+    const handleInsertSelect = (value, option) => {
+        console.log("Selected value:", value, "Selected option:", option); // Debug log
+        // SelectBox passes (value, option) - we want the full option object
+        const item = option;
+        if (!item || !item.value) {
+            console.warn("Invalid item selected:", item);
+            setShowInsertMenu(false);
+            return;
+        }
+        if (onInsertItem) {
+            onInsertItem(item);
+        }
+        else {
+            // Default behavior: insert at current cursor position
+            const textarea = textareaRef.current;
+            if (textarea) {
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                const currentValue = textarea.value;
+                const newValue = currentValue.slice(0, start) + item.value + currentValue.slice(end);
+                textarea.value = newValue;
+                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(MoreHorizontal, { 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)), (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 }) }))] })] }));
 });
+TextAreaInput.displayName = "TextAreaInput";
 export default TextAreaInput;

package/package.json

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