@monolith-forensics/monolith-ui 1.3.91 → 1.3.92

package/dist/FieldLabel/FieldLabel.d.ts

@@ -7,7 +7,7 @@ interface InfoComponentProps {
     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>>;
-interface FieldLabelProps {
+export interface FieldLabelProps {
     className?: string;
     children?: ReactNode;
     error?: string;
@@ -15,6 +15,7 @@ interface FieldLabelProps {
     size?: Size;
     asterisk?: boolean;
     style?: React.CSSProperties;
+    actionComponent?: ReactNode;
 }
-declare const FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FieldLabelProps, never>> & string & Omit<({ className, children, error, description, size, style, }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FieldLabelProps, never>> & string & Omit<({ className, children, error, description, size, style, actionComponent, }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default FieldLabel;

package/dist/FieldLabel/FieldLabel.js

@@ -24,22 +24,38 @@ export const InfoComponent = styled(({ className, children, description, label }
     margin-bottom: 5px;
   }
 `;
-const FieldLabel = styled(({ className, children, error, description, size = "sm", style, }) => {
-    return (_jsxs("div", { className: className + " FieldLabel", style: style, children: [_jsx(InfoComponent, { description: description, label: children, children: _jsx("div", { className: "label", children: children }) }), error && (_jsx("div", { className: "error", title: error, children: error || "Invalid Value" }))] }));
+const FieldLabel = styled(({ className, children, error, description, size = "sm", style, actionComponent, }) => {
+    return (_jsxs("div", { className: className + " FieldLabel", style: style, children: [_jsxs("div", { className: "label-content", children: [_jsx(InfoComponent, { description: description, label: children, children: _jsx("div", { className: "label", children: children }) }), error && (_jsx("div", { className: "error", title: error, children: error || "Invalid Value" }))] }), actionComponent && (_jsx("div", { className: "action-section", children: actionComponent }))] }));
 }) `
   user-select: none;
-  font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
+  font-family:
+    apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
   user-select: none;
   display: flex;
   flex-direction: row;
-  align-items: baseline;
-  gap: 5px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
 
   min-height: 15px;
   font-weight: 400;
   margin-bottom: 2.5px;
 
+  .label-content {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 5px;
+    flex: 1;
+  }
+
+  .action-section {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+  }
+
   font-size: ${({ size = "sm" }) => size === "xs"
     ? "10px"
     : size === "sm"

package/dist/FieldLabel/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./FieldLabel";
+export type { FieldLabelProps } from "./FieldLabel";

package/dist/SearchableTextArea/SearchableTextArea.d.ts

@@ -0,0 +1,25 @@
+export interface SearchableTextAreaProps {
+    label?: string;
+    data?: Array<{
+        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;
+    textAreaProps?: Record<string, any>;
+    initialValue?: string;
+}
+declare function SearchableTextArea({ label, data, searchable, allowCustomValue, required, error, description, selectProps, value, onChange, textAreaPlaceholder, textAreaMinRows, textAreaMaxRows, textAreaProps, initialValue, }: SearchableTextAreaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SearchableTextArea {
+    var displayName: string;
+}
+export default SearchableTextArea;

package/dist/SearchableTextArea/SearchableTextArea.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import styled from "styled-components";
+import { MoreHorizontal } from "lucide-react";
+import { SelectBox } from "../SelectBox";
+import FieldLabel from "../FieldLabel";
+import DropDownMenu from "../DropDownMenu";
+// Wrapper components for layout
+const CombinedInputWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+`;
+const TextAreaRow = styled.div `
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+`;
+const SelectBoxWrapper = styled.div `
+  position: relative;
+  width: 100%;
+`;
+const StyledSelectBox = styled(SelectBox) `
+  /* Completely hide the SelectBox but keep it functional for dropdown */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  pointer-events: auto; /* Allow interactions for dropdown */
+  z-index: -1;
+`;
+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};
+  border-radius: 4px;
+  padding: 10px;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 13px;
+  background-color: ${({ theme }) => theme.palette.input.background};
+  color: ${({ theme }) => theme.palette.text.primary};
+  resize: none;
+  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;
+  position: relative;
+
+  &:focus {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+    z-index: 3;
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.palette.text.secondary};
+    opacity: 0.5;
+  }
+`;
+function SearchableTextArea({ label, data, searchable, allowCustomValue, required, error, description, selectProps = {}, value, onChange, textAreaPlaceholder, textAreaMinRows = 3, textAreaMaxRows, textAreaProps = {}, initialValue = "", }) {
+    // Use controlled value if provided, otherwise use internal state
+    const [internalValue, setInternalValue] = useState(initialValue);
+    const [selectValue, setSelectValue] = useState(null);
+    const [selectKey, setSelectKey] = useState(0); // Force rerender key
+    // Ref to control the SelectBox dropdown
+    const selectBoxRef = useRef(null);
+    const textAreaValue = value !== undefined ? value : internalValue;
+    // 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);
+        }
+    };
+    // Handle keyboard shortcuts for dropdown
+    const handleTextAreaKeyDown = (event) => {
+        // Ctrl/Cmd + Space to open dropdown
+        if ((event.ctrlKey || event.metaKey) && event.code === "Space") {
+            event.preventDefault();
+            handleSearchClick();
+        }
+    };
+    const handleSearchClick = () => {
+        if (selectBoxRef.current) {
+            const selectInput = selectBoxRef.current.querySelector("input");
+            if (selectInput) {
+                selectInput.focus();
+                selectInput.click();
+            }
+        }
+    };
+    // Used to create red border when zod validation detects errors
+    const hasError = Boolean(error);
+    return (_jsxs(CombinedInputWrapper, { children: [label && (_jsx(StyledFieldLabel, { asterisk: required, error: error, description: description, actionComponent: _jsx(DropDownMenu, { data: [
+                        {
+                            value: "search",
+                            label: "Select Recent Entry",
+                            visible: true,
+                        },
+                    ], variant: "text", size: "xs", arrow: false, onItemSelect: (item) => {
+                        if (item.value === "search") {
+                            handleSearchClick();
+                        }
+                    }, buttonProps: {
+                        style: {
+                            minWidth: "auto",
+                            border: "none",
+                            background: "transparent",
+                            padding: "0",
+                            margin: "0",
+                            height: "16px",
+                            width: "16px",
+                        },
+                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: label })), _jsx(TextAreaRow, { children: _jsx(StyledTextArea, Object.assign({ placeholder: textAreaPlaceholder || "Enter details about the move", "$minRows": textAreaMinRows, "$maxRows": textAreaMaxRows, "$hasError": hasError, value: textAreaValue, onChange: handleTextAreaChange, onKeyDown: handleTextAreaKeyDown }, 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) })] }));
+}
+SearchableTextArea.displayName = "SearchableTextArea";
+export default SearchableTextArea;

package/dist/SearchableTextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./SearchableTextArea";
+export type { SearchableTextAreaProps } from "./SearchableTextArea";

package/dist/SearchableTextArea/index.js

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

package/dist/Table/TableMenu/TableMenu.js

@@ -33,7 +33,7 @@ const TableMenu = () => {
     const inputRef = useRef(null);
     if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
         return null;
-    const { addButtonOptions, filterOptions, tableCountOptions, exportOptions, compactOptions, columnSelectorOptions, actionOptions, searchOptions, children, } = tableMenuOptions;
+    const { addButtonOptions, filterOptions, tableCountOptions, exportOptions, compactOptions, columnSelectorOptions, searchOptions, children, } = tableMenuOptions;
     const queryFilter = useQueryFilter({
         defaultFilter: filterState,
         filterDefinitions: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) || [],
@@ -84,7 +84,7 @@ const TableMenu = () => {
                                 }, onItemSelect: handleSelectFilter, dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },
                                 }, searchable: true, children: "Filter" })), (tableCountOptions === null || tableCountOptions === void 0 ? void 0 : tableCountOptions.recordsTotalEnabled) === true && (_jsx(InfoBadge, { total: totalRecords || data.length })), enableSelection === true &&
-                                (tableCountOptions === null || tableCountOptions === void 0 ? void 0 : tableCountOptions.selectionTotalEnabled) === true && (_jsx(InfoBadge, { total: getCalculatedSelectionTotal(), hint: "Selected Items", icon: CheckSquareIcon })), children] }), _jsxs(FlexedRow, { children: [(actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.enabled) === true && actionOptions.menu, (exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: [
+                                (tableCountOptions === null || tableCountOptions === void 0 ? void 0 : tableCountOptions.selectionTotalEnabled) === true && (_jsx(InfoBadge, { total: getCalculatedSelectionTotal(), hint: "Selected Items", icon: CheckSquareIcon })), children] }), _jsxs(FlexedRow, { children: [(exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: [
                                     {
                                         label: "Export Visible Columns",
                                         value: TableExportOptions.ExportVisible,

package/dist/Table/types.d.ts

@@ -227,10 +227,6 @@ export type TableMenuOptions = {
         recordsTotalEnabled?: boolean;
         selectionTotalEnabled?: boolean;
     };
-    actionOptions?: {
-        enabled?: boolean;
-        menu?: React.ReactNode;
-    };
     searchOptions?: {
         enabled?: boolean;
         placeholder?: string;

package/dist/index.d.ts

@@ -14,6 +14,8 @@ 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 SearchableTextArea } from "./SearchableTextArea";
+export type { SearchableTextAreaProps } from "./SearchableTextArea";
 export { default as TagBox } from "./TagBox";
 export type { TagBoxProps, TagboxOption } from "./TagBox";
 export { default as FieldLabel } from "./FieldLabel";

package/dist/index.js

@@ -8,6 +8,7 @@ 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 SearchableTextArea } from "./SearchableTextArea";
 export { default as TagBox } from "./TagBox";
 export { default as FieldLabel } from "./FieldLabel";
 export { default as Modal } from "./Modal";

package/package.json

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