@monolith-forensics/monolith-ui 1.3.95 → 1.3.96

package/dist/SelectableTextArea/SelectableTextArea.d.ts

@@ -5,26 +5,23 @@ export interface SelectableTextAreaProps {
         label: string;
         value: string;
     }>;
-    searchable?: boolean;
-    allowCustomValue?: boolean;
     required?: boolean;
     error?: string;
     description?: string;
     value?: string;
     onChange?: (value: string) => void;
     selectProps?: Record<string, any>;
-    textAreaPlaceholder?: string;
-    textAreaMinRows?: number;
-    textAreaMaxRows?: number;
+    placeholder?: string;
     textAreaProps?: Record<string, any>;
     initialValue?: string;
+    showActionMenu?: boolean;
     actionMenuData?: Array<{
         label: string;
         value: string;
     }>;
     onActionMenuSelect?: (item: DropDownItem) => void;
 }
-declare function SelectableTextArea({ label, data, searchable, allowCustomValue, required, error, description, selectProps, value, onChange, textAreaPlaceholder, textAreaMinRows, textAreaMaxRows, textAreaProps, initialValue, actionMenuData, onActionMenuSelect, }: SelectableTextAreaProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectableTextArea({ label, data, required, error, description, selectProps, value, onChange, placeholder, textAreaProps, initialValue, showActionMenu, actionMenuData, onActionMenuSelect, }: SelectableTextAreaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SelectableTextArea {
     var displayName: string;
 }

package/dist/SelectableTextArea/SelectableTextArea.js

@@ -57,19 +57,10 @@ const StyledSelectBox = styled(SelectBox) `
     }
   }
 `;
-const StyledFieldLabel = styled(FieldLabel) `
-  .action-section {
-    margin-left: 2px !important; /* Reduce spacing from default 8px */
-  }
-
-  .label-content {
-    gap: 2px !important; /* Reduce gap from default 5px */
-  }
-`;
 // Styled TextArea that is now the primary input
 const StyledTextArea = styled.textarea `
   border: 1px solid
-    ${({ theme, $hasError }) => $hasError ? theme.palette.error.main : theme.palette.input.border};
+    ${({ theme, hasError }) => hasError ? theme.palette.error.main : theme.palette.input.border};
   border-radius: 4px;
   padding: 10px;
   font-family: ${({ theme }) => theme.typography.fontFamily};
@@ -80,8 +71,6 @@ const StyledTextArea = styled.textarea `
   outline: none;
   transition: border-color 0.2s ease;
   width: 100%;
-  min-height: ${({ $minRows = 3 }) => $minRows * 1.5 + 1.5}em;
-  ${({ $maxRows }) => $maxRows && `max-height: ${$maxRows * 1.5 + 1.5}em;`}
   pointer-events: auto;
   user-select: text;
   z-index: 2;
@@ -97,7 +86,7 @@ const StyledTextArea = styled.textarea `
     opacity: 0.5;
   }
 `;
-function SelectableTextArea({ label, data, searchable, allowCustomValue, required, error, description, selectProps = {}, value, onChange, textAreaPlaceholder, textAreaMinRows = 3, textAreaMaxRows, textAreaProps = {}, initialValue = "", actionMenuData, onActionMenuSelect, }) {
+function SelectableTextArea({ label, data, required, error, description, selectProps = {}, value, onChange, placeholder, textAreaProps = {}, initialValue = "", showActionMenu = false, actionMenuData, onActionMenuSelect, }) {
     // Use controlled value if provided, otherwise use internal state
     const [internalValue, setInternalValue] = useState(initialValue);
     const [selectValue, setSelectValue] = useState(null);
@@ -175,7 +164,7 @@ function SelectableTextArea({ label, data, searchable, allowCustomValue, require
             }
         }
     };
-    return (_jsxs(CombinedInputWrapper, { children: [label && (_jsx(StyledFieldLabel, { asterisk: required, error: error, description: description, actionComponent: _jsx(DropDownMenu, { data: menuData, variant: "text", size: "xs", arrow: false, onItemSelect: handleActionMenuSelect, buttonProps: {
+    return (_jsxs(CombinedInputWrapper, { children: [label && (_jsx(FieldLabel, { asterisk: required, error: error, description: description, actionComponent: showActionMenu ? (_jsx(DropDownMenu, { data: menuData, variant: "text", size: "xs", arrow: false, onItemSelect: handleActionMenuSelect, buttonProps: {
                         style: {
                             minWidth: "auto",
                             border: "none",
@@ -185,7 +174,7 @@ function SelectableTextArea({ label, data, searchable, allowCustomValue, require
                             height: "16px",
                             width: "16px",
                         },
-                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: label })), _jsxs(TextAreaRow, { children: [_jsx(StyledTextArea, Object.assign({ placeholder: textAreaPlaceholder || "Enter details about the move", "$minRows": textAreaMinRows, "$maxRows": textAreaMaxRows, "$hasError": hasError, value: textAreaValue, onChange: handleTextAreaChange }, textAreaProps)), _jsx(SelectBoxWrapper, { ref: selectBoxRef, children: _jsx(StyledSelectBox, Object.assign({ data: data, searchable: searchable, allowCustomValue: allowCustomValue, arrow: false, value: selectValue || undefined, onChange: handleSelectChange, hasError: hasError }, selectProps), selectKey) })] })] }));
+                    }, children: _jsx(MoreHorizontal, { size: 16 }) })) : null, children: label })), _jsxs(TextAreaRow, { children: [_jsx(StyledTextArea, Object.assign({ placeholder: placeholder || "Enter details about the move", hasError: hasError, value: textAreaValue, onChange: handleTextAreaChange }, textAreaProps)), _jsx(SelectBoxWrapper, { ref: selectBoxRef, children: _jsx(StyledSelectBox, Object.assign({ data: data, arrow: false, value: selectValue || undefined, onChange: handleSelectChange, hasError: hasError }, selectProps), selectKey) })] })] }));
 }
 SelectableTextArea.displayName = "SelectableTextArea";
 export default SelectableTextArea;

package/dist/TextAreaInput/TextAreaInput.d.ts

@@ -1,5 +1,6 @@
 import { Size } from "../core";
-interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+import { DropDownItem } from "..";
+interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
     variant?: "contained" | "filled" | "outlined" | "text";
     label?: string;
     error?: string;
@@ -13,6 +14,17 @@ interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaEl
         rowHeight: number;
     }) => void;
     cacheMeasurements?: boolean;
+    showActionMenu?: boolean;
+    actionMenuOptions?: Array<{
+        label: string;
+        value: string;
+    }>;
+    onActionMenuSelect?: (item: DropDownItem) => void;
+    onChange?: (value: string) => void;
+    data?: Array<{
+        label: string;
+        value: string;
+    }>;
 }
 declare const TextAreaInput: import("react").ForwardRefExoticComponent<TextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaInput;

package/dist/TextAreaInput/TextAreaInput.js

@@ -10,13 +10,138 @@ 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";
+import styled from "styled-components";
+import { TextArea, FieldLabel, DropDownMenu, SelectBox, } from "..";
+import { forwardRef, useRef, useState } from "react";
+import { MoreHorizontal } from "lucide-react";
+const TextAreaRow = styled.div `
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  z-index: 1; /* Lower than SelectBoxWrapper */
+`;
+const SelectBoxWrapper = styled.div `
+  position: absolute;
+  width: 100%;
+  top: 0; /* Position at the top of the textarea */
+  left: 0;
+  z-index: 10; /* Ensure dropdown appears above textarea */
+`;
+const StyledSelectBox = styled(SelectBox) `
+  /* Completely hide the SelectBox and disable all interactions */
+  position: relative;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none; /* Disable all interactions */
+  height: 0;
+  overflow: hidden;
+
+  /* Hide all child elements */
+  * {
+    opacity: 0;
+    pointer-events: none;
+    height: 0;
+    overflow: hidden;
+  }
+
+  /* Only allow dropdown portal to be visible and interactive when opened programmatically */
+  [data-floating-ui-portal] {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    z-index: 1000 !important;
+
+    * {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+      height: auto !important;
+      overflow: visible !important;
+    }
+  }
+`;
 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"]);
+    var { label, error, required, colSpan = 1, size = "sm", description, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements, defaultValue, showActionMenu = false, actionMenuOptions = [
+        {
+            value: "recent",
+            label: "Select Recent Entry",
+        },
+    ], onActionMenuSelect, data, onChange } = _a, rest = __rest(_a, ["label", "error", "required", "colSpan", "size", "description", "maxRows", "minRows", "onHeightChange", "cacheMeasurements", "defaultValue", "showActionMenu", "actionMenuOptions", "onActionMenuSelect", "data", "onChange"]);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [selectValue, setSelectValue] = useState(null);
+    const [selectKey, setSelectKey] = useState(0); // Force rerender key
+    const hiddenSelectBoxRef = useRef(null);
+    // Handle menu item selection with custom callback or default behavior
+    const handleActionMenuSelect = (item) => {
+        if (onActionMenuSelect) {
+            onActionMenuSelect(item);
+        }
+        else {
+            // Default behavior: if item value is "recent", trigger handleMenuClick
+            if (item.value === "recent") {
+                handleMenuClick();
+            }
+        }
+    };
+    const handleMenuClick = () => {
+        if (hiddenSelectBoxRef.current) {
+            const selectInput = hiddenSelectBoxRef.current.querySelector("input");
+            if (selectInput) {
+                // Temporarily enable interactions to trigger dropdown
+                selectInput.style.pointerEvents = "auto";
+                selectInput.style.opacity = "1";
+                selectInput.style.height = "auto";
+                selectInput.focus();
+                selectInput.click();
+                // Hide again immediately after triggering
+                setTimeout(() => {
+                    selectInput.style.pointerEvents = "none";
+                    selectInput.style.opacity = "0";
+                    selectInput.style.height = "0";
+                }, 50);
+            }
+        }
+    };
+    // Handle SelectBox selection - overrides textarea content then clears selectbox
+    const handleSelectChange = (newValue) => {
+        if (newValue) {
+            // Override textarea content with selected value
+            setInternalValue(newValue);
+            // Also call onChange if provided (for form integration)
+            if (onChange) {
+                onChange(newValue);
+            }
+            setTimeout(() => {
+                setSelectValue(null);
+                setSelectKey((prev) => prev + 1);
+            }, 100);
+        }
+        else {
+            setSelectValue(newValue);
+        }
+    };
+    // Handle textarea changes
+    const handleTextAreaChange = (event) => {
+        const newValue = event.target.value;
+        // Always update internal state for display purposes
+        setInternalValue(newValue);
+        // Also call onChange if provided (for form integration)
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
     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))] }));
+        }, 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: handleActionMenuSelect, buttonProps: {
+                        style: {
+                            minWidth: "auto",
+                            border: "none",
+                            background: "transparent",
+                            padding: "0",
+                            margin: "0",
+                            height: "16px",
+                            width: "16px",
+                        },
+                    }, children: _jsx(MoreHorizontal, { size: 16 }) })) : null, children: label })), _jsxs(TextAreaRow, { children: [_jsx(TextArea, Object.assign({ ref: ref, size: size, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange, cacheMeasurements: cacheMeasurements, value: internalValue, onChange: handleTextAreaChange }, rest)), _jsx(SelectBoxWrapper, { ref: hiddenSelectBoxRef, children: _jsx(StyledSelectBox, { data: data, arrow: false, value: selectValue || undefined, onChange: handleSelectChange, hasError: !!error }, selectKey) })] })] }));
 });
 export default TextAreaInput;

package/package.json

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