@monolith-forensics/monolith-ui 1.3.112 → 1.4.0

package/dist/Popover/Popover.context.d.ts

@@ -0,0 +1,23 @@
+import { useFloating, useInteractions } from "@floating-ui/react";
+import { PopoverTransitionProps } from "./Popover.types";
+export interface PopoverContextValue {
+    opened: boolean;
+    refs: ReturnType<typeof useFloating>["refs"];
+    context: ReturnType<typeof useFloating>["context"];
+    floatingStyles: ReturnType<typeof useFloating>["floatingStyles"];
+    getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
+    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
+    withArrow: boolean;
+    arrowSize: number;
+    arrowRadius: number;
+    arrowRef: React.MutableRefObject<HTMLDivElement | null>;
+    withinPortal: boolean;
+    trapFocus: boolean;
+    returnFocus: boolean;
+    keepMounted: boolean;
+    zIndex: number;
+    dropdownId: string;
+    transitionProps: PopoverTransitionProps;
+}
+export declare const PopoverContext: import("react").Context<PopoverContextValue | null>;
+export declare const usePopoverContext: () => PopoverContextValue;

package/dist/Popover/Popover.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const PopoverContext = createContext(null);
+export const usePopoverContext = () => {
+    const context = useContext(PopoverContext);
+    if (!context) {
+        throw new Error("Popover components must be used within Popover");
+    }
+    return context;
+};

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,7 @@
+import { PopoverDropdownProps, PopoverProps, PopoverTargetProps } from "./Popover.types";
+type PopoverCompound = React.FC<PopoverProps> & {
+    Target: React.FC<PopoverTargetProps>;
+    Dropdown: React.FC<PopoverDropdownProps>;
+};
+export declare const Popover: PopoverCompound;
+export {};

package/dist/Popover/Popover.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUncontrolled } from "@mantine/hooks";
+import { arrow, autoUpdate, flip, FloatingDelayGroup, offset, shift, size, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
+import { useId, useMemo, useRef } from "react";
+import { PopoverContext } from "./Popover.context";
+import { PopoverTarget } from "./PopoverTarget";
+import { PopoverDropdown } from "./PopoverDropdown";
+const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigger = "click", disabled = false, position = "bottom", offset: offsetValue = 8, openDelay = 75, closeDelay = 100, closeOnClickOutside = true, closeOnEscape = true, withinPortal = true, trapFocus = false, returnFocus = true, keepMounted = false, withArrow = false, arrowSize = 8, arrowRadius = 2, zIndex = 1500, role = "dialog", width, matchTargetWidth = false, shiftPadding = 8, flipPadding = 8, withDelayGroup = false, delayGroupTimeoutMs = 250, transitionProps = {}, }) => {
+    const [_opened, setOpened] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange,
+    });
+    const arrowRef = useRef(null);
+    const dropdownId = useId();
+    const resolvedArrowSize = Math.max(arrowSize, 6);
+    const { refs, floatingStyles, context } = useFloating({
+        open: _opened,
+        onOpenChange: (nextOpen) => {
+            if (!disabled) {
+                setOpened(nextOpen);
+            }
+        },
+        placement: position,
+        middleware: [
+            offset(offsetValue + (withArrow ? resolvedArrowSize / 2 : 0)),
+            flip({ padding: flipPadding }),
+            shift({ padding: shiftPadding }),
+            size({
+                apply({ rects, elements }) {
+                    if (matchTargetWidth) {
+                        elements.floating.style.width = `${rects.reference.width}px`;
+                    }
+                    if (width !== undefined) {
+                        elements.floating.style.width =
+                            typeof width === "number" ? `${width}px` : width;
+                    }
+                },
+            }),
+            ...(withArrow
+                ? [
+                    arrow({
+                        element: arrowRef,
+                        padding: 8,
+                    }),
+                ]
+                : []),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    const click = useClick(context, {
+        enabled: !disabled && trigger === "click",
+        event: "click",
+        toggle: true,
+    });
+    const hover = useHover(context, {
+        enabled: !disabled && trigger === "hover",
+        delay: { open: openDelay, close: closeDelay },
+        move: false,
+    });
+    const focus = useFocus(context, {
+        enabled: !disabled && trigger === "hover",
+        visibleOnly: true,
+    });
+    const dismiss = useDismiss(context, {
+        enabled: !disabled,
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape,
+    });
+    const roleInteraction = useRole(context, { role });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        hover,
+        focus,
+        dismiss,
+        roleInteraction,
+    ]);
+    const contextValue = useMemo(() => ({
+        opened: _opened,
+        refs,
+        context,
+        floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        withArrow,
+        arrowSize,
+        arrowRadius,
+        arrowRef,
+        withinPortal,
+        trapFocus,
+        returnFocus,
+        keepMounted,
+        zIndex,
+        dropdownId,
+        transitionProps,
+    }), [
+        _opened,
+        refs,
+        context,
+        floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        withArrow,
+        arrowSize,
+        arrowRadius,
+        withinPortal,
+        trapFocus,
+        returnFocus,
+        keepMounted,
+        zIndex,
+        dropdownId,
+        transitionProps,
+    ]);
+    const body = _jsx(PopoverContext.Provider, { value: contextValue, children: children });
+    if (!withDelayGroup) {
+        return body;
+    }
+    return (_jsx(FloatingDelayGroup, { delay: { open: openDelay, close: closeDelay }, timeoutMs: delayGroupTimeoutMs, children: body }));
+};
+export const Popover = Object.assign(PopoverRoot, {
+    Target: PopoverTarget,
+    Dropdown: PopoverDropdown,
+});

package/dist/Popover/Popover.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ARROW_STYLES: Record<"top" | "right" | "bottom" | "left", {
+    clipPath: string;
+    borderTransparent: string[];
+    radiusCorner: string;
+    staticProp: string;
+}>;

package/dist/Popover/Popover.styles.js

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+export const StyledDropdown = styled.div `
+  position: relative;
+  min-width: 180px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  background-color: ${({ theme }) => theme.palette.background.default};
+  color: ${({ theme }) => theme.palette.text.primary};
+  box-shadow:
+    rgba(15, 23, 42, 0.1) 0px 10px 15px -3px,
+    rgba(15, 23, 42, 0.05) 0px 4px 6px -2px;
+  padding: 10px 12px;
+  outline: none;
+`;
+export const ARROW_STYLES = {
+    bottom: {
+        clipPath: "polygon(0 100%, 0 0, 100% 0)",
+        borderTransparent: ["borderBottomColor", "borderRightColor"],
+        radiusCorner: "borderTopLeftRadius",
+        staticProp: "top",
+    },
+    top: {
+        clipPath: "polygon(0 100%, 100% 100%, 100% 0)",
+        borderTransparent: ["borderTopColor", "borderLeftColor"],
+        radiusCorner: "borderBottomRightRadius",
+        staticProp: "bottom",
+    },
+    left: {
+        clipPath: "polygon(100% 0, 0 0, 100% 100%)",
+        borderTransparent: ["borderLeftColor", "borderBottomColor"],
+        radiusCorner: "borderTopRightRadius",
+        staticProp: "right",
+    },
+    right: {
+        clipPath: "polygon(0 100%, 0 0, 100% 100%)",
+        borderTransparent: ["borderRightColor", "borderTopColor"],
+        radiusCorner: "borderBottomLeftRadius",
+        staticProp: "left",
+    },
+};

package/dist/Popover/Popover.transitions.d.ts

@@ -0,0 +1,5 @@
+import { PopoverTransitionProps } from "./Popover.types";
+export declare function usePopoverTransition(opened: boolean, { transition, duration, timingFunction }: PopoverTransitionProps): {
+    mounted: boolean;
+    styles: React.CSSProperties;
+};

package/dist/Popover/Popover.transitions.js

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from "react";
+const TRANSITION_PRESETS = {
+    fade: {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+    },
+    scale: {
+        from: { opacity: 0, scale: "0.85" },
+        to: { opacity: 1, scale: "1" },
+    },
+    "scale-y": {
+        from: { opacity: 0, scale: "1 0.7" },
+        to: { opacity: 1, scale: "1 1" },
+    },
+    pop: {
+        from: { opacity: 0, scale: "0.6" },
+        to: { opacity: 1, scale: "1" },
+    },
+};
+export function usePopoverTransition(opened, { transition = "fade", duration = 150, timingFunction = "ease" }) {
+    const [mounted, setMounted] = useState(opened);
+    const [transitionEnabled, setTransitionEnabled] = useState(false);
+    const [phase, setPhase] = useState(opened ? "enter" : "exit");
+    const frameRef = useRef(0);
+    useEffect(() => {
+        cancelAnimationFrame(frameRef.current);
+        if (opened) {
+            setMounted(true);
+            setTransitionEnabled(false);
+            setPhase("exit");
+            frameRef.current = requestAnimationFrame(() => {
+                frameRef.current = requestAnimationFrame(() => {
+                    setTransitionEnabled(true);
+                    setPhase("enter");
+                });
+            });
+        }
+        else {
+            setTransitionEnabled(true);
+            setPhase("exit");
+            const timer = setTimeout(() => {
+                setMounted(false);
+                setTransitionEnabled(false);
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [opened, duration]);
+    useEffect(() => {
+        return () => cancelAnimationFrame(frameRef.current);
+    }, []);
+    const preset = TRANSITION_PRESETS[transition];
+    const transitionStyles = phase === "enter" ? preset.to : preset.from;
+    const properties = [
+        ...new Set([...Object.keys(preset.from), ...Object.keys(preset.to)]),
+    ];
+    const transitionValue = properties
+        .map((prop) => `${prop} ${duration}ms ${timingFunction}`)
+        .join(", ");
+    return {
+        mounted: mounted || opened,
+        styles: Object.assign(Object.assign({}, transitionStyles), (transitionEnabled ? { transition: transitionValue } : {})),
+    };
+}

package/dist/Popover/Popover.types.d.ts

@@ -0,0 +1,45 @@
+import { Placement } from "@floating-ui/react";
+import { ReactElement, ReactNode } from "react";
+export type PopoverTransition = "fade" | "scale" | "scale-y" | "pop";
+export type PopoverTrigger = "click" | "hover";
+export interface PopoverTransitionProps {
+    transition?: PopoverTransition;
+    duration?: number;
+    timingFunction?: string;
+}
+export interface PopoverProps {
+    children: ReactNode;
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onChange?: (opened: boolean) => void;
+    trigger?: PopoverTrigger;
+    disabled?: boolean;
+    position?: Placement;
+    offset?: number;
+    openDelay?: number;
+    closeDelay?: number;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    withinPortal?: boolean;
+    trapFocus?: boolean;
+    returnFocus?: boolean;
+    keepMounted?: boolean;
+    withArrow?: boolean;
+    arrowSize?: number;
+    arrowRadius?: number;
+    zIndex?: number;
+    role?: "dialog" | "menu" | "tooltip";
+    width?: number | string;
+    matchTargetWidth?: boolean;
+    shiftPadding?: number;
+    flipPadding?: number;
+    withDelayGroup?: boolean;
+    delayGroupTimeoutMs?: number;
+    transitionProps?: PopoverTransitionProps;
+}
+export interface PopoverTargetProps {
+    children: ReactElement;
+}
+export interface PopoverDropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}

package/dist/Popover/Popover.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Popover/PopoverDropdown.d.ts

@@ -0,0 +1,2 @@
+import { PopoverDropdownProps } from "./Popover.types";
+export declare const PopoverDropdown: React.FC<PopoverDropdownProps>;

package/dist/Popover/PopoverDropdown.js

@@ -0,0 +1,52 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
+import { usePopoverContext } from "./Popover.context";
+import { ARROW_STYLES, StyledDropdown } from "./Popover.styles";
+import { usePopoverTransition } from "./Popover.transitions";
+export const PopoverDropdown = (_a) => {
+    var _b, _c;
+    var { children, className, style } = _a, props = __rest(_a, ["children", "className", "style"]);
+    const { opened, refs, context, floatingStyles, getFloatingProps, withArrow, arrowSize, arrowRadius, arrowRef, withinPortal, trapFocus, returnFocus, keepMounted, zIndex, dropdownId, transitionProps: ctxTransitionProps, } = usePopoverContext();
+    const { mounted, styles: transitionStyles } = usePopoverTransition(opened, ctxTransitionProps);
+    const arrowX = (_b = context.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
+    const arrowY = (_c = context.middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
+    const [placementSide, placementAlignment] = context.placement.split("-");
+    const arrowConfig = ARROW_STYLES[placementSide];
+    const originSide = {
+        top: "bottom",
+        bottom: "top",
+        left: "right",
+        right: "left",
+    }[placementSide];
+    const originAlignment = placementAlignment === "start"
+        ? placementSide === "top" || placementSide === "bottom"
+            ? "left"
+            : "top"
+        : placementAlignment === "end"
+            ? placementSide === "top" || placementSide === "bottom"
+                ? "right"
+                : "bottom"
+            : "center";
+    const transformOrigin = `${originSide} ${originAlignment}`;
+    if (!mounted && !keepMounted) {
+        return null;
+    }
+    const dropdown = (_jsx(FloatingFocusManager, { context: context, modal: trapFocus, returnFocus: returnFocus, children: _jsxs(StyledDropdown, Object.assign({}, getFloatingProps(props), { id: dropdownId, ref: refs.setFloating, className: className, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), { transformOrigin }), style), { zIndex }), (keepMounted && !mounted
+                ? { visibility: "hidden", pointerEvents: "none" }
+                : {})), children: [children, withArrow && (_jsx("div", { ref: arrowRef, style: Object.assign(Object.assign(Object.assign({ position: "absolute", width: Math.max(arrowSize, 6), height: Math.max(arrowSize, 6), transform: "rotate(45deg)", background: "inherit", border: "1px solid", borderColor: "inherit", pointerEvents: "none", zIndex: 1 }, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), { [arrowConfig.staticProp]: -Math.max(arrowSize, 6) / 2, [arrowConfig.radiusCorner]: arrowRadius, [arrowConfig.borderTransparent[0]]: "transparent", [arrowConfig.borderTransparent[1]]: "transparent", clipPath: arrowConfig.clipPath }) }))] })) }));
+    if (!withinPortal) {
+        return dropdown;
+    }
+    return _jsx(FloatingPortal, { children: dropdown });
+};

package/dist/Popover/PopoverTarget.d.ts

@@ -0,0 +1,2 @@
+import { PopoverTargetProps } from "./Popover.types";
+export declare const PopoverTarget: React.FC<PopoverTargetProps>;

package/dist/Popover/PopoverTarget.js

@@ -0,0 +1,11 @@
+import { useMergeRefs } from "@floating-ui/react";
+import { cloneElement, isValidElement } from "react";
+import { usePopoverContext } from "./Popover.context";
+export const PopoverTarget = ({ children }) => {
+    const { refs, getReferenceProps, opened, dropdownId } = usePopoverContext();
+    if (!isValidElement(children)) {
+        return null;
+    }
+    const mergedRef = useMergeRefs([refs.setReference, children.ref]);
+    return cloneElement(children, getReferenceProps(Object.assign({ ref: mergedRef, "aria-expanded": opened, "aria-controls": dropdownId, "aria-haspopup": "dialog" }, children.props)));
+};

package/dist/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from "./Popover";
+export type { PopoverProps, PopoverTargetProps, PopoverDropdownProps, PopoverTransition, PopoverTrigger, PopoverTransitionProps, } from "./Popover.types";

package/dist/Popover/index.js

@@ -0,0 +1 @@
+export { Popover } from "./Popover";

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/dist/index.d.ts

@@ -42,3 +42,4 @@ export type { ColumnProps, TableProps } from "./Table";
 export * from "./Tabs";
 export * from "./Divider";
 export * from "./SegmentedControl";
+export * from "./Popover";

package/dist/index.js

@@ -34,3 +34,4 @@ export * from "./Table";
 export * from "./Tabs";
 export * from "./Divider";
 export * from "./SegmentedControl";
+export * from "./Popover";

package/package.json

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