@monolith-forensics/monolith-ui 1.4.2 → 1.4.3

package/dist/DateInput/DateInput.d.ts

@@ -1,4 +1,5 @@
 import moment from "moment";
+import { ReactNode } from "react";
 import { Size, Variant } from "../core";
 type DateInputProps = {
     className?: string;
@@ -7,7 +8,7 @@ type DateInputProps = {
     value?: string | null | undefined;
     format?: FormatOptions;
     label?: string;
-    description?: string;
+    description?: ReactNode;
     arrow?: boolean;
     size?: Size;
     variant?: Variant;

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
-export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
+export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, searchable, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, renderOption, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
     var _a;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const [selected, setSelected] = useState(defaultValue || []);
@@ -25,5 +25,5 @@ export const DropDownMenu = ({ data, children, defaultValue, variant, arrow, siz
     const handleScrollToBottom = (e) => {
         onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(e);
     };
-    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
+    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, onSearch: onSearch, manualSearch: manualSearch, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
 };

package/dist/DropDownMenu/components/MenuItemList.d.ts

@@ -10,8 +10,6 @@ export declare const MenuItemList: React.FC<{
     selected?: DropDownItem[];
     TooltipContent?: ComponentType<any>;
     multiselect?: boolean;
-    grouped?: boolean;
-    onAddNew?: (value: string) => void;
     size?: Size;
     handleAddItem: (item: DropDownItem) => void;
     handleRemoveItem: (item: DropDownItem) => void;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -13,7 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useLayoutEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { FixedSizeList } from "react-window";
-import { Plus } from "lucide-react";
 import CheckBox from "../../CheckBox";
 import { DropDownMenu } from "../DropDownMenu";
 import { MenuItem } from "./MenuItem";
@@ -31,71 +30,11 @@ const filterMenuItems = (menuItems, searchValue) => {
         return (_c = item.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
     });
 };
-const buildGroupedDisplayList = (items) => {
-    const groups = {};
-    for (const item of items) {
-        const key = item.group || "Other";
-        if (!groups[key])
-            groups[key] = [];
-        groups[key].push(item);
-    }
-    const sortedKeys = Object.keys(groups).sort((a, b) => a.localeCompare(b));
-    const result = [];
-    for (const key of sortedKeys) {
-        result.push({
-            _isGroupHeader: true,
-            label: key,
-            value: `__group__${key}`,
-        });
-        result.push(...groups[key]);
-    }
-    return result;
-};
 const ListViewPort = styled.div.attrs({ className: "ListViewPort" }) `
   display: flex;
   flex-direction: column;
 `;
-const GroupHeader = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: ${(props) => props.theme.palette.text.secondary};
-  font-weight: 500;
-  user-select: none;
-  padding: ${({ $size }) => $size === "xs"
-    ? "2px 8px"
-    : $size === "sm"
-        ? "4px 10px"
-        : $size === "md"
-            ? "4px 12px"
-            : $size === "lg"
-                ? "5px 14px"
-                : $size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
-  font-size: ${({ $size }) => $size === "xs"
-    ? "10px"
-    : $size === "sm"
-        ? "11px"
-        : $size === "md"
-            ? "13px"
-            : $size === "lg"
-                ? "15px"
-                : $size === "xl"
-                    ? "17px"
-                    : "10px"};
-
-  .group-line {
-    border-top: 1px solid ${(props) => props.theme.palette.divider};
-    flex: 1;
-  }
-
-  .group-label {
-    white-space: nowrap;
-    min-width: fit-content;
-  }
-`;
-export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, selected, TooltipContent, multiselect, grouped, onAddNew, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
+export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, selected, TooltipContent, multiselect, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
     var _a;
     const [searchValue, setSearchValue] = useState("");
     const _b = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _b, rest = __rest(_b, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
@@ -130,29 +69,6 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
     const filteredItems = searchable
         ? filterMenuItems(visibleItems, searchValue)
         : visibleItems;
-    const hasExactMatch = searchValue.trim() !== "" &&
-        filteredItems.some((item) => {
-            var _a, _b;
-            return ((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === searchValue.trim().toLowerCase() ||
-                ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase()) ===
-                    searchValue.trim().toLowerCase();
-        });
-    const displayItems = (() => {
-        let items = grouped
-            ? buildGroupedDisplayList(filteredItems)
-            : filteredItems;
-        if (onAddNew && searchValue.trim() && !hasExactMatch) {
-            items = [
-                ...items,
-                {
-                    _isAddNew: true,
-                    label: `Add "${searchValue.trim()}"`,
-                    value: searchValue.trim(),
-                },
-            ];
-        }
-        return items;
-    })();
     const isObjectArray = (_a = Object.keys((visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const isLoading = isLoadingInfiniteQuery;
     const handleOnScroll = (event) => {
@@ -198,7 +114,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
     }, [targetElm.current, isLoading]);
     const overscanCount = 10;
     const itemHeight = 25;
-    const itemCount = (displayItems === null || displayItems === void 0 ? void 0 : displayItems.length) || 0;
+    const itemCount = (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.length) || 0;
     const height = viewPortDimensions.height
         ? viewPortDimensions.height
         : itemCount * itemHeight < 200
@@ -218,20 +134,8 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
                     alignItems: "center",
                     height: "100%",
                     padding: "10px 0",
-                }, children: [_jsx("div", { style: { fontSize: "12px" }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: _jsx(FixedSizeList, { itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerRef: listElm, children: ({ data, index, style }) => {
-                        const item = data === null || data === void 0 ? void 0 : data[index];
-                        if (!item)
-                            return null;
-                        if (item._isGroupHeader) {
-                            return (_jsxs(GroupHeader, { "$size": size, style: style, children: [_jsx("span", { className: "group-line" }), _jsx("span", { className: "group-label", children: item.label }), _jsx("span", { className: "group-line" })] }, item.value));
-                        }
-                        if (item._isAddNew) {
-                            return (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(Plus, { size: 14 }), onClick: (e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    onAddNew === null || onAddNew === void 0 ? void 0 : onAddNew(item.value);
-                                }, style: style, children: item.label }, "__add_new__"));
-                        }
+                }, children: [_jsx("div", { style: { fontSize: "12px" }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: _jsx(FixedSizeList, { itemData: filteredItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerRef: listElm, children: ({ data, index, style }) => {
+                        const item = (data === null || data === void 0 ? void 0 : data[index]) || {};
                         const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => {
                             return isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item;
                         }));

package/dist/DropDownMenu/types.d.ts

@@ -15,7 +15,6 @@ export type DropDownItem = {
     rightSection?: React.ReactNode;
     disabled?: boolean;
     visible?: boolean;
-    group?: string;
 };
 export type SearchInputProps = React.ComponentPropsWithoutRef<typeof Input>;
 export type StyledContentProps = {
@@ -43,8 +42,6 @@ export type DropDownMenuProps = {
     onSearch?: (value: string) => void;
     searchable?: boolean;
     manualSearch?: boolean;
-    grouped?: boolean;
-    onAddNew?: (value: string) => void;
     loading?: boolean;
     arrow?: boolean;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;

package/dist/FieldLabel/FieldLabel.d.ts

@@ -3,7 +3,7 @@ import { Size } from "../core";
 interface InfoComponentProps {
     className?: string;
     children?: ReactNode;
-    description?: string;
+    description?: ReactNode;
     label?: string | ReactNode;
 }
 export declare const InfoComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<InfoComponentProps, never>> & string & Omit<({ className, children, description, label }: InfoComponentProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined, keyof import("react").Component<any, {}, any>>;
@@ -11,7 +11,7 @@ export interface FieldLabelProps {
     className?: string;
     children?: ReactNode;
     error?: string;
-    description?: string;
+    description?: ReactNode;
     size?: Size;
     asterisk?: boolean;
     style?: React.CSSProperties;

package/dist/SelectBox/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { Size, Variant } from "../core";
 export type Option = {
     label: string;
@@ -23,7 +24,7 @@ export type SelectBoxProps = {
     searchable?: boolean;
     clearable?: boolean;
     label?: string;
-    description?: string;
+    description?: ReactNode;
     required?: boolean;
     error?: string;
     openOnFocus?: boolean;

package/dist/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { Size } from "../core";
 export type SwitchProps = {
     className?: string;
@@ -6,7 +6,7 @@ export type SwitchProps = {
     size?: Exclude<Size, "xxs">;
     label?: string;
     labelPosition?: "left" | "right";
-    description?: string;
+    description?: ReactNode;
     error?: string;
     required?: boolean;
     disabled?: boolean;

package/dist/TagBox/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { Size, Variant } from "../core";
 export type Option = {
     label: string;
@@ -22,7 +23,7 @@ export interface TagBoxProps {
     searchable?: boolean;
     clearable?: boolean;
     label?: string;
-    description?: string;
+    description?: ReactNode;
     required?: boolean;
     error?: string;
     openOnFocus?: boolean;

package/dist/TextAreaInput/TextAreaInput.d.ts

@@ -1,10 +1,9 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { Size } from "../core";
-import { DropDownMenuProps } from "../DropDownMenu/types";
+import { DropDownItem } from "..";
 export type InsertableItem = {
     label: string;
     value: string;
-    group?: string;
 };
 export interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     variant?: "contained" | "filled" | "outlined" | "text";
@@ -13,28 +12,21 @@ export interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTex
     required?: boolean;
     colSpan?: number;
     size?: Size;
-    description?: string;
+    description?: ReactNode;
     maxRows?: number;
     minRows?: number;
     cacheMeasurements?: boolean;
     onHeightChange?: (height: number, meta: {
         rowHeight: number;
     }) => void;
+    showActionMenu?: boolean;
+    actionMenuOptions?: Array<{
+        value: string;
+        label: string;
+    }>;
+    onActionMenuSelect?: (item: DropDownItem) => void;
     insertableItems?: InsertableItem[];
     onInsertItem?: (item: InsertableItem) => void;
-    groupInsertableItems?: boolean;
-    /** Callback when the user creates a new item by typing a value in the search box that doesn't match any existing option. */
-    onAddNewItem?: (value: string) => void;
-    /**
-     * Visual style of the insert menu trigger.
-     * - `"ellipsis"` renders a minimal `...` icon button.
-     * - `"dropdown"` renders an outlined button with a label and arrow (default).
-     */
-    insertMenuVariant?: "ellipsis" | "dropdown";
-    /** Label for the insert dropdown trigger button. Only used when `insertMenuVariant` is `"dropdown"`. Defaults to "Insert". */
-    insertMenuLabel?: string;
-    /** Additional props forwarded to the DropDownMenu component. */
-    insertMenuProps?: Partial<DropDownMenuProps>;
 }
 declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaInput;

package/dist/TextAreaInput/TextAreaInput.js

@@ -11,9 +11,34 @@ 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, useRef, useMemo } from "react";
-import { TextArea, FieldLabel, DropDownMenu } from "..";
+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 StyledMoreHorizontal = styled(MoreHorizontal) `
   color: ${({ theme }) => theme.palette.text.secondary};
   &:hover {
@@ -21,8 +46,21 @@ const StyledMoreHorizontal = styled(MoreHorizontal) `
   }
 `;
 const TextAreaInput = forwardRef((props, ref) => {
-    const { label, error, required, colSpan = 1, size = "sm", description, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements, insertableItems, onInsertItem, groupInsertableItems, onAddNewItem, insertMenuVariant = "dropdown", insertMenuLabel = "Insert", insertMenuProps } = props, rest = __rest(props, ["label", "error", "required", "colSpan", "size", "description", "maxRows", "minRows", "onHeightChange", "cacheMeasurements", "insertableItems", "onInsertItem", "groupInsertableItems", "onAddNewItem", "insertMenuVariant", "insertMenuLabel", "insertMenuProps"]);
+    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") {
@@ -32,50 +70,79 @@ const TextAreaInput = forwardRef((props, ref) => {
             ref.current = node;
         }
     };
-    const dropdownData = useMemo(() => (insertableItems || []).map((item) => ({
-        label: item.label,
-        value: item.value,
-        group: item.group,
-    })), [insertableItems]);
-    const insertAtCursor = (text) => {
-        var _a;
-        const textarea = textareaRef.current;
-        if (!textarea)
+    // Handle click outside to close insert menu
+    useEffect(() => {
+        if (!showInsertMenu)
             return;
-        const start = textarea.selectionStart;
-        const end = textarea.selectionEnd;
-        const currentValue = textarea.value;
-        const newValue = currentValue.slice(0, start) + text + currentValue.slice(end);
-        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);
-        textarea.dispatchEvent(new Event("input", { bubbles: true }));
-        textarea.focus();
-        textarea.setSelectionRange(start + text.length, start + text.length);
-    };
-    const handleItemSelect = (item) => {
-        const insertable = {
-            label: item.label,
-            value: String(item.value),
-            group: item.group,
+        const handleClickOutside = (event) => {
+            if (insertMenuRef.current &&
+                !insertMenuRef.current.contains(event.target)) {
+                setShowInsertMenu(false);
+            }
         };
-        if (onInsertItem) {
-            onInsertItem(insertable);
+        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 if (item.value === "clear") {
+            // Built-in clear functionality
+            const textarea = textareaRef.current;
+            if (textarea) {
+                textarea.value = "";
+                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);
         }
         else {
-            insertAtCursor(insertable.value);
+            onActionMenuSelect === null || onActionMenuSelect === void 0 ? void 0 : onActionMenuSelect(item);
         }
     };
-    const handleAddNew = (value) => {
-        if (onAddNewItem) {
-            onAddNewItem(value);
+    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 {
-            insertAtCursor(value);
+            // 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);
     };
-    const hasInsertableItems = !!dropdownData.length;
-    return (_jsxs("div", { style: { gridColumn: `span ${colSpan}`, height: "fit-content" }, children: [label && (_jsx(FieldLabel, { asterisk: required, error: error, description: description, size: size, actionComponent: hasInsertableItems ? (insertMenuVariant === "ellipsis" ? (_jsx(DropDownMenu, Object.assign({ data: dropdownData, variant: "text", size: "xs", arrow: false, searchable: true, grouped: groupInsertableItems, onAddNew: handleAddNew, onItemSelect: handleItemSelect, buttonProps: {
-                        "aria-label": "Insert item",
+    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",
@@ -85,14 +152,7 @@ const TextAreaInput = forwardRef((props, ref) => {
                             height: 16,
                             width: 16,
                         },
-                    }, dropDownProps: {
-                        style: { width: 200, maxWidth: 400 },
-                    } }, insertMenuProps, { children: _jsx(StyledMoreHorizontal, { size: 16 }) }))) : (_jsx(DropDownMenu, Object.assign({ data: dropdownData, variant: "outlined", size: "xs", arrow: true, searchable: true, grouped: groupInsertableItems, onAddNew: handleAddNew, onItemSelect: handleItemSelect, buttonProps: {
-                        title: insertMenuLabel,
-                        size: "xxs",
-                    }, dropDownProps: {
-                        style: { width: 200, maxWidth: 400 },
-                    } }, insertMenuProps, { children: insertMenuLabel })))) : null, children: label })), _jsx(TextArea, Object.assign({ ref: mergedRef, size: size, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange, cacheMeasurements: cacheMeasurements }, rest))] }));
+                    }, 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 }) }))] })] }));
 });
 TextAreaInput.displayName = "TextAreaInput";
 export default TextAreaInput;

package/dist/TextInput/TextInput.d.ts

@@ -1,5 +1,6 @@
 import { InputProps } from "../Input/Input";
 import { Size } from "../core";
+import { ReactNode } from "react";
 export type TextInputProps = InputProps & {
     className?: string;
     label?: string;
@@ -7,7 +8,7 @@ export type TextInputProps = InputProps & {
     required?: boolean;
     size?: Size;
     colSpan?: number;
-    description?: string;
+    description?: ReactNode;
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     style?: React.CSSProperties;
     password?: boolean;

package/package.json

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