@monolith-forensics/monolith-ui 1.3.96 → 1.3.103

package/dist/TextAreaInput/TextAreaInput.js

@@ -11,137 +11,136 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
+import { forwardRef, useState, useRef, useEffect } from "react";
 import { TextArea, FieldLabel, DropDownMenu, SelectBox, } from "..";
-import { forwardRef, useRef, useState } from "react";
 import { MoreHorizontal } from "lucide-react";
-const TextAreaRow = styled.div `
+const DEFAULT_ACTIONS = [
+    { value: "clear", label: "Clear Text" },
+    { value: "insert", label: "Insert Item" },
+];
+const TextAreaWrapper = styled.div `
   position: relative;
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  z-index: 1; /* Lower than SelectBoxWrapper */
 `;
-const SelectBoxWrapper = styled.div `
+const InsertMenuOverlay = styled.div `
   position: absolute;
-  width: 100%;
-  top: 0; /* Position at the top of the textarea */
+  top: 0;
   left: 0;
-  z-index: 10; /* Ensure dropdown appears above textarea */
+  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 StyledSelectBox = styled(SelectBox) `
-  /* Completely hide the SelectBox and disable all interactions */
-  position: relative;
+const StyledInsertSelectBox = styled(SelectBox) `
   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;
-    }
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid ${({ theme }) => theme.palette.primary.main};
+`;
+const StyledMoreHorizontal = styled(MoreHorizontal) `
+  color: ${({ theme }) => theme.palette.text.secondary};
+  &:hover {
+    color: ${({ theme }) => theme.palette.text.primary};
   }
 `;
-const TextAreaInput = forwardRef((_a, ref) => {
-    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);
+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 {
-            // Default behavior: if item value is "recent", trigger handleMenuClick
-            if (item.value === "recent") {
-                handleMenuClick();
-            }
+        else if (ref) {
+            ref.current = node;
         }
     };
-    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 click outside to close insert menu
+    useEffect(() => {
+        if (!showInsertMenu)
+            return;
+        const handleClickOutside = (event) => {
+            if (insertMenuRef.current &&
+                !insertMenuRef.current.contains(event.target)) {
+                setShowInsertMenu(false);
             }
-        }
-    };
-    // 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);
+        };
+        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 {
-            setSelectValue(newValue);
+            onActionMenuSelect === null || onActionMenuSelect === void 0 ? void 0 : onActionMenuSelect(item);
         }
     };
-    // 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);
+    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: handleActionMenuSelect, buttonProps: {
+    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: "16px",
-                            width: "16px",
+                            padding: 0,
+                            margin: 0,
+                            height: 16,
+                            width: 16,
                         },
-                    }, 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) })] })] }));
+                    }, 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)), (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/dist/index.d.ts

@@ -8,14 +8,13 @@ export * from "./Grid";
 export * from "./TextInput";
 export * from "./SelectBox";
 export * from "./Button";
+export * from "./DropDownMenu";
+export * from "./Switch";
+export * from "./Alert";
 export { default as IconButton } from "./IconButton";
-export { default as DropDownMenu } from "./DropDownMenu";
-export type { DropDownItem } from "./DropDownMenu";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";
-export { default as SelectableTextArea } from "./SelectableTextArea";
-export type { SelectableTextAreaProps } from "./SelectableTextArea";
 export { default as TagBox } from "./TagBox";
 export type { TagBoxProps, TagboxOption } from "./TagBox";
 export { default as FieldLabel } from "./FieldLabel";
@@ -23,7 +22,6 @@ export { default as Modal } from "./Modal";
 export { default as Flyout } from "./Flyout";
 export { FlyoutHeader, FlyoutTitle } from "./Flyout";
 export { default as FileInputField } from "./FileInputField";
-export { default as Switch } from "./Switch";
 export { default as CheckBox } from "./CheckBox";
 export { default as Input } from "./Input";
 export { default as Tooltip } from "./Tooltip";

package/dist/index.js

@@ -3,19 +3,19 @@ export * from "./Grid";
 export * from "./TextInput";
 export * from "./SelectBox";
 export * from "./Button";
+export * from "./DropDownMenu";
+export * from "./Switch";
+export * from "./Alert";
 export { default as IconButton } from "./IconButton";
-export { default as DropDownMenu } from "./DropDownMenu";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";
-export { default as SelectableTextArea } from "./SelectableTextArea";
 export { default as TagBox } from "./TagBox";
 export { default as FieldLabel } from "./FieldLabel";
 export { default as Modal } from "./Modal";
 export { default as Flyout } from "./Flyout";
 export { FlyoutHeader, FlyoutTitle } from "./Flyout";
 export { default as FileInputField } from "./FileInputField";
-export { default as Switch } from "./Switch";
 export { default as CheckBox } from "./CheckBox";
 export { default as Input } from "./Input";
 export { default as Tooltip } from "./Tooltip";

package/dist/theme/variants.js

@@ -173,8 +173,43 @@ const lightVariant = {
             default: "transparent",
             primary: customBlue[500],
             secondary: "#a1a1a1",
+            alternate: "#f0f0f0",
             error: "#f44336",
         },
+        text: {
+            default: "#000",
+            primary: customBlue[500],
+            error: "#f44336",
+            secondary: "#a1a1a1",
+            alternate: "#000",
+        },
+    },
+    alert: {
+        info: {
+            background: "#3f88de25",
+            border: "#3f88de50",
+            color: "#357fff",
+        },
+        success: {
+            background: "#4bef2a25",
+            border: "#4bef2a90",
+            color: "#2eb333",
+        },
+        warning: {
+            background: "#eaa82425",
+            border: "#eaa82450",
+            color: "#d18f0b",
+        },
+        error: {
+            background: "#ee1d1d25",
+            border: "#ee1d1d50",
+            color: "#e41a1a",
+        },
+        default: {
+            background: "#fff",
+            border: "#cacaca",
+            color: "#000000",
+        },
     },
 };
 const darkVariant = merge(lightVariant, {
@@ -282,11 +317,41 @@ const darkVariant = merge(lightVariant, {
             default: "transparent",
             primary: customBlue[500],
             secondary: "#3f3f3f",
+            alternate: "#3f3f3f",
             error: "#f44336",
         },
         text: {
-            primary: "rgba(255, 255, 255, 0.95)",
+            primary: customBlue[500],
+            error: "#f44336",
             secondary: "rgba(255, 255, 255, 0.6)",
+            alternate: "rgba(255, 255, 255, 0.6)",
+        },
+    },
+    alert: {
+        info: {
+            background: "#3f88de25",
+            border: "#3f88de50",
+            color: "#75a8ff",
+        },
+        success: {
+            background: "#4bef2a25",
+            border: "#4bef2a50",
+            color: "#5fd964",
+        },
+        warning: {
+            background: "#eaa82425",
+            border: "#eaa82450",
+            color: "#da9c21",
+        },
+        error: {
+            background: "#ee1d1d25",
+            border: "#ee1d1d50",
+            color: "#e41a1a",
+        },
+        default: {
+            background: "#222222",
+            border: "rgba(255, 255, 255, 0.15)",
+            color: "#ffffff99",
         },
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.96",
+  "version": "1.3.103",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -56,7 +56,6 @@
     "moment": "^2.29.1",
     "overlayscrollbars": "^2.6.0",
     "overlayscrollbars-react": "^0.5.6",
-    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-pdf": "^9.1.1",
@@ -71,7 +70,8 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.59.16",
-    "react": "18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@tanstack/react-query": "5.59.16",

package/dist/QueryFilter/useFilterHelper.d.ts

@@ -1,20 +0,0 @@
-import { UseQueryOptions } from "@tanstack/react-query";
-import { FilterDefinition } from "./types";
-import { DropDownItem } from "../DropDownMenu";
-/** Override Filters Type
- * some properties have been overridden to allow for partial overrides
- */
-type FilterDefinitionOverride = Partial<Omit<FilterDefinition, "query" | "dataField">> & {
-    dataField: string;
-    query?: Omit<Partial<UseQueryOptions>, "select" | "queryKey"> & {
-        select?: (data: unknown) => DropDownItem[];
-        queryKey?: UseQueryOptions["queryKey"];
-    };
-};
-export interface UseFilterHelperParams {
-    filterDef: FilterDefinition[];
-    overrides?: FilterDefinitionOverride[];
-}
-export type UseFilterHelperType = (p: UseFilterHelperParams) => FilterDefinition[];
-export declare const useFilterHelper: UseFilterHelperType;
-export {};

package/dist/QueryFilter/useFilterHelper.js

@@ -1,61 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useQueries } from "@tanstack/react-query";
-const mergeOverrides = (filterDef, overrides) => {
-    return filterDef.map((f) => {
-        var _a, _b, _c;
-        const override = overrides.find((o) => o.dataField === f.dataField);
-        if (!override) {
-            return f;
-        }
-        const { query, dropDownOptions } = override, rest = __rest(override, ["query", "dropDownOptions"]);
-        // Handle merge directly on query and dropDownOptions
-        // prevents overriding the entire query object
-        // allows user to override specific properties
-        if (query) {
-            f.query = Object.assign(Object.assign(Object.assign({}, f.query), query), { queryFn: query.queryFn || ((_a = f === null || f === void 0 ? void 0 : f.query) === null || _a === void 0 ? void 0 : _a.queryFn) || (() => { }), queryKey: query.queryKey || ((_b = f === null || f === void 0 ? void 0 : f.query) === null || _b === void 0 ? void 0 : _b.queryKey) || [], select: query.select || ((_c = f === null || f === void 0 ? void 0 : f.query) === null || _c === void 0 ? void 0 : _c.select) || (() => []) });
-        }
-        if (dropDownOptions) {
-            f.dropDownOptions = Object.assign(Object.assign({}, f.dropDownOptions), dropDownOptions);
-        }
-        // Merge override with original filter def
-        return Object.assign(Object.assign({}, f), rest);
-    });
-};
-export const useFilterHelper = ({ filterDef, overrides, }) => {
-    let _filterDef = filterDef;
-    if (!!overrides) {
-        _filterDef = mergeOverrides(filterDef, overrides);
-    }
-    // Keeps track of filters that have queries
-    const queryIndex = [];
-    // Get query options from filter defs
-    const queries = filterDef
-        .filter((f, i) => {
-        // Track array index of filter def that has a query
-        const hasQuery = f.query !== undefined;
-        hasQuery && queryIndex.push(i);
-        return hasQuery;
-    })
-        .map((filter) => filter.query);
-    // run queries from filter defs
-    const result = useQueries({
-        queries,
-    });
-    // Add useQueries result data to filter def as options
-    queryIndex.forEach((index, i) => {
-        var _a;
-        // User query index to add useQueries result data to filter def as options
-        filterDef[index].selectOptions = (_a = result[i]) === null || _a === void 0 ? void 0 : _a.data;
-    });
-    return filterDef;
-};

package/dist/SelectableTextArea/SelectableTextArea.d.ts

@@ -1,28 +0,0 @@
-import type { DropDownItem } from "../DropDownMenu";
-export interface SelectableTextAreaProps {
-    label?: string;
-    data?: Array<{
-        label: string;
-        value: string;
-    }>;
-    required?: boolean;
-    error?: string;
-    description?: string;
-    value?: string;
-    onChange?: (value: string) => void;
-    selectProps?: Record<string, any>;
-    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, 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;
-}
-export default SelectableTextArea;