@monolith-forensics/monolith-ui 1.3.96 → 1.3.103

package/dist/SelectBox/SelectBox.js

@@ -10,7 +10,9 @@ import { StyledInputContainer, StyledInnerItemContainer, EmptyComponent, GroupTi
 // Re-export for backward compatibility
 export { StyledInputContainer };
 export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
-DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
+DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, 
+// Enhanced focus control props
+triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
     var _a, _b, _c, _d, _e, _f;
     // Component setup and data processing
     const theme = useTheme();
@@ -193,6 +195,8 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
     }, [onChange]);
     const handleKeyDown = (e) => {
         var _a;
+        if (disabled)
+            return;
         // Escape key
         if (e.key === KEYBOARD_KEYS.ESCAPE) {
             const reference = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
@@ -336,6 +340,10 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             item.scrollIntoView({ block: "nearest" });
         }
     }, [_value]);
+    // ensure that the input value is updated when the value changes when in controlled mode
+    useEffect(() => {
+        setInputValue((_value === null || _value === void 0 ? void 0 : _value.label) || "");
+    }, [_value === null || _value === void 0 ? void 0 : _value.label]);
     useEffect(() => {
         if (bottomHeight < DEFAULT_DROPDOWN_HEIGHT) {
             setPlacement("top-start");
@@ -351,9 +359,29 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         };
     }, [topHeight, bottomHeight, isOpen]);
     // ============================================================================
+    // Enhanced Focus Control Effects
+    // ============================================================================
+    // Handle triggerFocus prop
+    useEffect(() => {
+        if (triggerFocus && inputRef.current) {
+            inputRef.current.focus();
+            onFocused === null || onFocused === void 0 ? void 0 : onFocused();
+        }
+    }, [triggerFocus, onFocused]);
+    // Handle triggerOpen prop
+    useEffect(() => {
+        if (triggerOpen) {
+            setIsOpen(true);
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+            onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+        }
+    }, [triggerOpen, onOpened]);
+    // ============================================================================
     // Render
     // ============================================================================
-    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), renderActionButton()] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
+    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, tabIndex: disabled ? -1 : 0, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, disabled: disabled, tabIndex: disabled ? -1 : 0, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), renderActionButton()] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
                         containerRef.current = ref;
                         refs.setFloating(ref);
                     }, style: floatingStyles, className: "mfFloating", children: _jsxs(StyledContent, Object.assign({ className: "mfFloatingContent", style: {
@@ -369,3 +397,4 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
                                     ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => renderOptionItem(item, index))] }, group.label)))
                                     : filteredItems.map((item, index) => renderOptionItem(item, index)) }))] })) }) }))] }));
 };
+SelectBox.displayName = "SelectBox";

package/dist/SelectBox/select-box.styled-components.js

@@ -40,6 +40,11 @@ export const StyledInputContainer = styled.div `
       pointer-events: none;
     }
   }
+
+  input[disabled] {
+    opacity: 1 !important;
+    pointer-events: none !important;
+  }
 `;
 export const StyledInnerItemContainer = styled.div `
   overflow-y: auto;
@@ -159,7 +164,7 @@ export const StyledItem = styled.div `
     color: ${(props) => props.theme.palette.text.primary};
   }
 
-  &[data-disabled] {
+  &[data-disabled="true"] {
     color: ${(props) => props.theme.palette.text.secondary};
     opacity: 0.5;
     pointer-events: none;

package/dist/SelectBox/types.d.ts

@@ -42,4 +42,8 @@ export type SelectBoxProps = {
     onSearch?: (value: string) => void;
     searchFn?: (value: string) => void;
     onItemAdded?: (item: Option | string) => void;
+    triggerFocus?: boolean;
+    triggerOpen?: boolean;
+    onFocused?: () => void;
+    onOpened?: () => void;
 };

package/dist/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from "react";
 import { Size } from "../core";
-interface SwitchProps {
+export type SwitchProps = {
     className?: string;
     onChange: (e: any) => void;
     size?: Size;
@@ -13,6 +13,5 @@ interface SwitchProps {
     defaultValue?: boolean;
     value?: boolean;
     style?: CSSProperties;
-}
-declare const Switch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SwitchProps, never>> & string & Omit<({ className, onChange, size, label, labelPosition, description, error, required, disabled, defaultValue, value, style, ...other }: SwitchProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export default Switch;
+};
+export declare const Switch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SwitchProps, never>> & string & Omit<({ className, onChange, size, label, labelPosition, description, error, required, disabled, defaultValue, value, style, ...other }: SwitchProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/Switch/Switch.js

@@ -118,7 +118,7 @@ const StyledThumb = styled(RadixSwitch.Thumb) `
                     : "translateX(17px)"};
   }
 `;
-const Switch = styled((_a) => {
+export const Switch = styled((_a) => {
     var { className, onChange, size = "xs", label, labelPosition = "right", description, error, required, disabled = false, defaultValue, value, style = {} } = _a, other = __rest(_a, ["className", "onChange", "size", "label", "labelPosition", "description", "error", "required", "disabled", "defaultValue", "value", "style"]);
     return (_jsxs("div", { className: className, children: [label && labelPosition === "left" && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, style: { margin: 0 }, children: label })), _jsx(StyledRoot, Object.assign({ size: size, className: "SwitchRoot", onCheckedChange: onChange, defaultChecked: defaultValue, checked: value, disabled: disabled, style: style }, other, { children: _jsx(StyledThumb, { size: size, className: "SwitchThumb" }) })), label && labelPosition === "right" && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, style: { margin: 0 }, children: label }))] }));
 }) `
@@ -127,4 +127,3 @@ const Switch = styled((_a) => {
   align-items: center;
   gap: 10px;
 `;
-export default Switch;

package/dist/Switch/index.d.ts

@@ -1 +1 @@
-export { default } from "./Switch";
+export * from "./Switch";

package/dist/Switch/index.js

@@ -1 +1 @@
-export { default } from "./Switch";
+export * from "./Switch";

package/dist/Table/TableComponents.js

@@ -29,6 +29,22 @@ export const TR = styled.div `
     visibility: visible;
   }
 
+  &[data-focused="true"] {
+    border: 1px solid transparent;
+    outline: 1px solid ${({ theme }) => theme.palette.primary.main};
+    outline-offset: -1px;
+
+    .mfui-td {
+      border-bottom: 1px solid transparent;
+      background-color: ${({ theme }) => theme.palette.primary.main}20;
+    }
+  }
+
+  // Select the row above the focused row
+  &:has(+ .mfui-tr[data-focused="true"]) .mfui-td {
+    border-bottom: 1px solid transparent;
+  }
+
   &:hover > .mfui-td {
     background-color: ${({ theme }) => theme.palette.action.hover};
   }

package/dist/Table/TableMenu/TableMenu.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Button } from "../../Button";
 import { TextInput } from "../../TextInput";
 import { CheckSquareIcon, Columns3Icon, DownloadIcon, FilterIcon, Rows3Icon, Rows4Icon, } from "lucide-react";
-import DropDownMenu from "../../DropDownMenu";
+import { DropDownMenu } from "../../DropDownMenu";
 import useTable from "../useTable";
 import { TableExportOptions } from "../enums";
 import { useDebouncedCallback } from "use-debounce";
@@ -12,6 +12,7 @@ import { QueryFilter, useQueryFilter, } from "../../QueryFilter";
 import shortUUID from "short-uuid";
 import { DefaultOperators } from "../../QueryFilter";
 import { useEffect, useRef } from "react";
+import { Switch } from "../..";
 const StyledContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -33,7 +34,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, searchOptions, children, } = tableMenuOptions;
+    const { addButtonOptions, filterOptions, tableCountOptions, exportOptions, compactOptions, columnSelectorOptions, searchOptions, children, customMenuItems, } = tableMenuOptions;
     const queryFilter = useQueryFilter({
         defaultFilter: filterState,
         filterDefinitions: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) || [],
@@ -61,6 +62,19 @@ const TableMenu = () => {
             label: item.label,
         });
     };
+    const renderCustomMenuItems = (args) => {
+        return customMenuItems === null || customMenuItems === void 0 ? void 0 : customMenuItems.filter((item) => (item.position || "left") === args.position).map((item, index) => {
+            if (item.type === "button") {
+                return _jsx(Button, Object.assign({ size: "xxs" }, item.options), index);
+            }
+            if (item.type === "menu") {
+                return (_jsx(DropDownMenu, Object.assign({ size: "xxs", arrow: true }, item.options), index));
+            }
+            if (item.type === "switch") {
+                return _jsx(Switch, Object.assign({ size: "xs" }, item.options), index);
+            }
+        });
+    };
     // simultate
     useEffect(() => {
         if (inputRef.current && searchState === "") {
@@ -83,8 +97,8 @@ const TableMenu = () => {
                                     leftSection: _jsx(FilterIcon, { size: 12 }),
                                 }, 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: [(exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: [
+                                }, searchable: true, children: "Filter" })), renderCustomMenuItems({ position: "left" }), (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: [renderCustomMenuItems({ position: "right" }), (exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: [
                                     {
                                         label: "Export Visible Columns",
                                         value: TableExportOptions.ExportVisible,