@monolith-forensics/monolith-ui 1.1.91 → 1.2.1

package/dist/DateInput/DateInput.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 import { Size, Variant } from "../core";
 interface DateInputProps {
     className?: string;
+    style?: React.CSSProperties;
     defaultValue?: string | null | undefined;
     format?: FormatOptions;
     label?: string;
@@ -33,5 +34,5 @@ export type Segment = {
     momentType?: moment.unitOfTime.All | moment.unitOfTime.DurationConstructor;
     pattern?: string;
 };
-declare const DateInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DateInputProps, never>> & string & Omit<({ className, defaultValue, format, label, description, arrow, size, variant, clearable, required, onChange, min, max, error, enableCalendar, utc, closeOnSelect, }: DateInputProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
+declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLElement>>;
 export default DateInput;

package/dist/DateInput/DateInput.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import moment from "moment";
 import { useFloating, flip, offset, FloatingPortal, useDismiss, useInteractions, autoUpdate, } from "@floating-ui/react";
-import { useEffect, useMemo, useRef, useState, } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FieldLabel, Calendar } from "..";
 import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
@@ -178,7 +178,7 @@ const InputSegment = styled.div `
                     : "10px"};
   }
 `;
-const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }) => {
+const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }, _ref) => {
     const [value, setValue] = useState(defaultValue);
     const [selectedSegment, setSelectedSegment] = useState();
     const [isOpen, setIsOpen] = useState(false);
@@ -460,15 +460,18 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
             document.removeEventListener("wheel", handleWheelEvent);
         };
     }, [selectedSegment]);
-    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: (ref) => {
+    return (_jsxs("div", { className: "mfui-DateInput", children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: (ref) => {
+                    if (typeof _ref === "function") {
+                        _ref(ref);
+                    }
                     mainRef.current = ref;
                     refs.setReference(ref);
-                }, onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
+                }, className: className, onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
                 }, onBlur: () => {
                     setSelectedSegment(null);
-                }, "data-empty": !value, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, children: [segments.map((segment, i) => {
+                }, "data-empty": !value, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, style: style, children: [segments.map((segment, i) => {
                         if (segment.type === "separator") {
                             return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
                                     e.preventDefault();
@@ -492,5 +495,5 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                                         return isoResult;
                                     });
                                 }, includeTime: false }, 1) }) }) })) }))] }));
-}) ``;
+});
 export default DateInput;

package/dist/DropDownMenu/DropDownMenu.js

@@ -21,6 +21,12 @@ const StyledFloatContainer = styled.div `
   outline: none;
 `;
 const StyledInnerItemContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: hidden;
+`;
+const MenuScrollContainer = styled.div `
   overflow-y: auto;
 
   &[data-scroll-active="true"] {
@@ -247,7 +253,7 @@ const MenuComponent = React.forwardRef((_a, forwardedRef) => {
             tree.events.emit("menuopen", { parentId, nodeId });
         }
     }, [tree, isOpen, nodeId, parentId]);
-    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(MenuItem, Object.assign({ ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, role: isNested ? "menuitem" : undefined, className: isNested ? "MenuItem" : "RootMenu", "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined }, getReferenceProps(parent.getItemProps(Object.assign(Object.assign({}, props), { onFocus(event) {
+    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(MenuItem, Object.assign({ ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, role: isNested ? "menuitem" : undefined, className: isNested ? `MenuItem` : "mfui-DropDownMenu RootMenu", "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined }, getReferenceProps(parent.getItemProps(Object.assign(Object.assign({}, props), { onFocus(event) {
                     var _a;
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
                     setHasFocusInside(false);
@@ -295,41 +301,41 @@ const DropDownMenu = ({ data, children, defaultValue, variant, arrow, size, sear
     };
     const scrollActive = (((_b = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) || 0) >
         (((_c = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
-    return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, children: _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", onChange: handleSearch })), !loading &&
-                    data
-                        .filter((item) => {
-                        var _a, _b, _c;
-                        if (!searchable)
-                            return true;
-                        if (isObjectArray) {
-                            return (((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())) ||
-                                ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchValue.toLowerCase())));
-                        }
-                        return (_c = item.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
-                    })
-                        .map((item, index) => {
-                        const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item));
-                        if (item.items) {
-                            return (_jsx(DropDownMenu, { data: item.items, children: item.label }));
-                        }
-                        return (_jsx(Tooltip, { content: TooltipContent ? _jsx(TooltipContent, { data: item.data }) : null, side: "left", children: _jsxs(MenuItem, { className: "MenuItem", "data-selected": isSelected, leftSection: multiselect && (_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
+    return (_jsx(Menu, { label: children, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", onChange: handleSearch })), _jsx(MenuScrollContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: !loading &&
+                        data
+                            .filter((item) => {
+                            var _a, _b, _c;
+                            if (!searchable)
+                                return true;
+                            if (isObjectArray) {
+                                return (((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())) ||
+                                    ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchValue.toLowerCase())));
+                            }
+                            return (_c = item.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
+                        })
+                            .map((item, index) => {
+                            const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item));
+                            if (item.items) {
+                                return (_jsx(DropDownMenu, { data: item.items, children: item.label }));
+                            }
+                            return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsxs(MenuItem, { className: "MenuItem", "data-selected": isSelected, leftSection: multiselect && (_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
+                                            var _a;
+                                            newValue
+                                                ? handleAddItem(item)
+                                                : handleRemoveItem(item);
+                                            (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
+                                        } })), multiselect: multiselect, size: size, onClick: (e) => {
                                         var _a;
-                                        newValue
-                                            ? handleAddItem(item)
-                                            : handleRemoveItem(item);
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        if (multiselect) {
+                                            isSelected
+                                                ? handleRemoveItem(item)
+                                                : handleAddItem(item);
+                                        }
+                                        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
                                         (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
-                                    } })), multiselect: multiselect, size: size, onClick: (e) => {
-                                    var _a;
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    if (multiselect) {
-                                        isSelected
-                                            ? handleRemoveItem(item)
-                                            : handleAddItem(item);
-                                    }
-                                    onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
-                                    (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
-                                }, children: [(item === null || item === void 0 ? void 0 : item.leftSection) || null, _jsx(_Fragment, { children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (item === null || item === void 0 ? void 0 : item.label) || item }), (item === null || item === void 0 ? void 0 : item.rightSection) || null] }, index) }, index));
-                    })] }) }));
+                                    }, children: [(item === null || item === void 0 ? void 0 : item.leftSection) || null, _jsx(_Fragment, { children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (item === null || item === void 0 ? void 0 : item.label) || item }), (item === null || item === void 0 ? void 0 : item.rightSection) || null] }, index) }, index));
+                        }) })] }) }));
 };
 export default DropDownMenu;

package/dist/Input/Input.d.ts

@@ -6,7 +6,5 @@ export interface InputProps {
     variant?: Variant;
     width?: string | number | null | undefined;
 }
-declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/Input/Input.js

@@ -12,10 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { forwardRef } from "react";
-const Input = styled(forwardRef((_a, ref) => {
-    var { className, size = "sm", variant = "outlined", width } = _a, rest = __rest(_a, ["className", "size", "variant", "width"]);
-    return _jsx("input", Object.assign({ ref: ref, className: className }, rest));
-})) `
+const StyledInput = styled.input `
   font-family: ${({ theme }) => theme.typography.fontFamily};
   pointer-events: "all";
   user-select: "all";
@@ -141,4 +138,8 @@ const Input = styled(forwardRef((_a, ref) => {
     cursor: pointer;
   }
 `;
+const Input = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(StyledInput, Object.assign({ ref: ref, className: className }, props));
+});
 export default Input;

package/dist/Loader/Loader.js

@@ -4,7 +4,6 @@ const Loader = styled(({ className, style }) => {
     return (_jsx("div", { className: className + " mf-Loader", style: style, children: _jsx("span", { className: "mf-Loader-root" }) }));
 }) `
   display: inline-block;
-  margin: auto;
 
   .mf-Loader-root {
     display: inline-block;

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -1,20 +1,144 @@
 import { DefaultTheme } from "styled-components";
 import { Themes } from "../theme";
 import React from "react";
-type ColorScheme = "LIGHT" | "DARK" | "DEFAULT";
+import typography from "../theme/typography";
+export interface MonolithDefaultTheme extends DefaultTheme {
+    name?: Themes;
+    typography?: typeof typography;
+    palette: {
+        mode: Themes;
+        primary: {
+            main: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            contrastText: string;
+        };
+        third: {
+            main: string;
+            contrastText: string;
+        };
+        fourth: {
+            main: string;
+            contrastText: string;
+        };
+        background: {
+            default: string;
+            paper: string;
+            alt: string;
+            secondary: string;
+            gradient: string;
+        };
+        menu: {
+            background: string;
+        };
+        signature: {
+            penColor: string;
+            borderColor: string;
+            backgroundColor: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+        };
+        input: {
+            background: string;
+            border: string;
+            borderHover: string;
+            borderFocus: string;
+            borderError: string;
+            borderDisabled: string;
+            text: string;
+            textDisabled: string;
+            placeholder: string;
+        };
+        textArea: {
+            background: string;
+            border: string;
+            borderHover: string;
+            borderFocus: string;
+            borderError: string;
+            borderDisabled: string;
+            text: string;
+            textDisabled: string;
+            placeholder: string;
+        };
+        dataGrid: {
+            hover: string;
+        };
+        action: {
+            hover: string;
+        };
+        divider: string;
+    };
+    header: {
+        color: string;
+        background: string;
+        search: {
+            color: string;
+        };
+        indicator: {
+            background: string;
+        };
+    };
+    footer: {
+        color: string;
+        background: string;
+    };
+    sidebar: {
+        color: string;
+        background: string;
+        active: string;
+        header: {
+            color: string;
+            background: string;
+            brand: {
+                color: string;
+            };
+        };
+        footer: {
+            color: string;
+            background: string;
+            online: {
+                background: string;
+            };
+        };
+        badge: {
+            color: string;
+            background: string;
+        };
+    };
+    scrollbar: {
+        track: string;
+        thumb: string;
+        thumbHover: string;
+    };
+    mfBorder: {
+        primary: string;
+        secondary: string;
+    };
+    zIndex: {
+        snackbar: number;
+    };
+}
 export interface MonolithUIContextType {
-    theme: DefaultTheme;
+    theme: MonolithDefaultTheme;
     Themes: typeof Themes;
-    colorScheme: ColorScheme;
+    colorScheme: Themes;
     toggleColorScheme: () => void;
-    setColorScheme: React.Dispatch<React.SetStateAction<ColorScheme>>;
+    setColorScheme: React.Dispatch<React.SetStateAction<Themes>>;
 }
 export declare const MonolithUIContext: React.Context<MonolithUIContextType | undefined>;
 interface MonolithUIProviderProps {
     children?: React.ReactNode | React.ReactNode[];
-    theme?: DefaultTheme;
-    defaultColorScheme?: ColorScheme;
-    colorScheme?: ColorScheme;
+    theme?: MonolithDefaultTheme;
+    defaultColorScheme?: Themes;
+    colorScheme?: Themes;
 }
 declare const MonolithUIProvider: ({ children, theme, defaultColorScheme, colorScheme, }: MonolithUIProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default MonolithUIProvider;

package/dist/MonolithUIProvider/MonolithUIProvider.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import merge from "deepmerge";
 import { ThemeProvider } from "styled-components";
-import getTheme, { Themes } from "../theme";
+import { Themes, getTheme } from "../theme";
 import { createContext, useState } from "react";
 import GlobalStyle from "./GlobalStyle";
 export const MonolithUIContext = createContext(undefined);
-const MonolithUIProvider = ({ children, theme = {}, defaultColorScheme = "DARK", colorScheme, }) => {
+const MonolithUIProvider = ({ children, theme, defaultColorScheme = Themes.DARK, colorScheme, }) => {
     const [colorSchemeState, setColorSchemeState] = useState(defaultColorScheme);
     const toggleColorScheme = () => {
-        setColorSchemeState((prev) => (prev === "LIGHT" ? "DARK" : "LIGHT"));
+        setColorSchemeState((prev) => prev === Themes.LIGHT ? Themes.DARK : Themes.LIGHT);
     };
     const _scheme = colorScheme || colorSchemeState;
     const defaultTheme = getTheme(_scheme);
     // override default theme with the provided theme
-    const _theme = merge(defaultTheme, theme);
+    const _theme = merge(defaultTheme, theme || {});
     return (_jsx(MonolithUIContext.Provider, { value: {
             theme: _theme,
             Themes,

package/dist/MonolithUIProvider/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from "./MonolithUIProvider";
 export { default as useMonolithUITheme } from "./useMonolithUITheme";
-export { default as getTheme } from "../theme";
+export { getTheme } from "../theme";

package/dist/MonolithUIProvider/index.js

@@ -1,3 +1,3 @@
 export { default } from "./MonolithUIProvider";
 export { default as useMonolithUITheme } from "./useMonolithUITheme";
-export { default as getTheme } from "../theme";
+export { getTheme } from "../theme";

package/dist/QueryFilter/DefaultOperators.d.ts

@@ -0,0 +1,77 @@
+import { Operator } from "./types";
+export declare const Operators: {
+    Equals: {
+        value: string;
+        label: string;
+    };
+    NotEquals: {
+        value: string;
+        label: string;
+    };
+    LessThan: {
+        value: string;
+        label: string;
+    };
+    GreaterThan: {
+        value: string;
+        label: string;
+    };
+    LessThanOrEqual: {
+        value: string;
+        label: string;
+    };
+    GreaterThanOrEqual: {
+        value: string;
+        label: string;
+    };
+    Contains: {
+        value: string;
+        label: string;
+    };
+    BeginsWith: {
+        value: string;
+        label: string;
+    };
+    EndsWith: {
+        value: string;
+        label: string;
+    };
+    DoesNotContain: {
+        value: string;
+        label: string;
+    };
+    DoesNotBeginWith: {
+        value: string;
+        label: string;
+    };
+    DoesNotEndWith: {
+        value: string;
+        label: string;
+    };
+    IsNull: {
+        value: string;
+        label: string;
+    };
+    IsNotNull: {
+        value: string;
+        label: string;
+    };
+    In: {
+        value: string;
+        label: string;
+    };
+    NIn: {
+        value: string;
+        label: string;
+    };
+    Between: {
+        value: string;
+        label: string;
+    };
+    NotBetween: {
+        value: string;
+        label: string;
+    };
+};
+export declare const DefaultOperators: Operator[];
+export default DefaultOperators;

package/dist/QueryFilter/DefaultOperators.js

@@ -0,0 +1,22 @@
+export const Operators = {
+    Equals: { value: "=", label: "is" },
+    NotEquals: { value: "!=", label: "is not" },
+    LessThan: { value: "<", label: "less than" },
+    GreaterThan: { value: ">", label: "greater than" },
+    LessThanOrEqual: { value: "<=", label: "less than or equal" },
+    GreaterThanOrEqual: { value: ">=", label: "greater than or equal" },
+    Contains: { value: "contains", label: "contains" },
+    BeginsWith: { value: "beginsWith", label: "begins with" },
+    EndsWith: { value: "endsWith", label: "ends with" },
+    DoesNotContain: { value: "doesNotContain", label: "does not contain" },
+    DoesNotBeginWith: { value: "doesNotBeginWith", label: "does not begin with" },
+    DoesNotEndWith: { value: "doesNotEndWith", label: "does not end with" },
+    IsNull: { value: "null", label: "is null" },
+    IsNotNull: { value: "notNull", label: "is not null" },
+    In: { value: "in", label: "is any of" },
+    NIn: { value: "nin", label: "is none of" },
+    Between: { value: "between", label: "between" },
+    NotBetween: { value: "notBetween", label: "not between" },
+};
+export const DefaultOperators = Object.values(Operators);
+export default DefaultOperators;

package/dist/QueryFilter/QueryFilter.d.ts

@@ -0,0 +1,5 @@
+import { QueryFilter as QueryFilterType } from "./types";
+declare const QueryFilter: React.FC<{
+    queryFilter: QueryFilterType;
+}>;
+export default QueryFilter;