@monolith-forensics/monolith-ui 1.8.1-dev.3 → 1.8.1

package/dist/Popover/Popover.transitions.js

@@ -1,37 +1,63 @@
-import { useTransitionStyles } from "@floating-ui/react";
+import { useEffect, useRef, useState } from "react";
 const TRANSITION_PRESETS = {
     fade: {
-        initial: { opacity: 0 },
-        open: { opacity: 1 },
+        from: { opacity: 0 },
+        to: { opacity: 1 },
     },
     scale: {
-        initial: { opacity: 0, transform: "scale(0.85)" },
-        open: { opacity: 1, transform: "scale(1)" },
+        from: { opacity: 0, scale: "0.85" },
+        to: { opacity: 1, scale: "1" },
     },
     "scale-y": {
-        initial: { opacity: 0, transform: "scaleY(0.7)" },
-        open: { opacity: 1, transform: "scaleY(1)" },
+        from: { opacity: 0, scale: "1 0.7" },
+        to: { opacity: 1, scale: "1 1" },
     },
     pop: {
-        initial: { opacity: 0, transform: "scale(0.6)" },
-        open: { opacity: 1, transform: "scale(1)" },
+        from: { opacity: 0, scale: "0.6" },
+        to: { opacity: 1, scale: "1" },
     },
 };
-export function usePopoverTransition(context, { transition = "fade", duration = 150, timingFunction = "ease", }) {
-    var _a;
+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 { isMounted, styles } = useTransitionStyles(context, {
-        duration,
-        initial: preset.initial,
-        open: preset.open,
-        close: (_a = preset.close) !== null && _a !== void 0 ? _a : preset.initial,
-        common: {
-            transitionTimingFunction: timingFunction,
-            willChange: transition === "fade" ? "opacity" : "opacity, transform",
-        },
-    });
+    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: isMounted,
-        styles,
+        mounted: mounted || opened,
+        styles: Object.assign(Object.assign({}, transitionStyles), (transitionEnabled ? { transition: transitionValue } : {})),
     };
 }

package/dist/Popover/PopoverDropdown.js

@@ -12,15 +12,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { usePopoverContext } from "./Popover.context";
-import { StyledArrow, StyledDropdown } from "./Popover.styles";
+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 { refs, context, floatingStyles, getFloatingProps, withArrow, arrowSize, arrowRadius, arrowRef, withinPortal, trapFocus, returnFocus, keepMounted, zIndex, dropdownId, transitionProps: ctxTransitionProps, } = usePopoverContext();
-    const { mounted, styles: transitionStyles } = usePopoverTransition(context, ctxTransitionProps);
-    const resolvedArrowSize = Math.max(arrowSize, 6);
-    const resolvedArrowRadius = Math.min(Math.max(arrowRadius, 0), resolvedArrowSize / 2);
+    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",
@@ -42,7 +44,7 @@ export const PopoverDropdown = (_a) => {
     }
     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(StyledArrow, { ref: arrowRef, context: context, width: resolvedArrowSize * 2, height: resolvedArrowSize, tipRadius: resolvedArrowRadius, strokeWidth: 1, fill: "var(--mf-popover-arrow-fill)", stroke: "var(--mf-popover-arrow-border)" }))] })) }));
+                : {})), 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;
     }

package/dist/Popover/PopoverTarget.js

@@ -2,13 +2,10 @@ 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, role } = usePopoverContext();
+    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": role === "tooltip" ? undefined : role }, children.props)));
+    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/QueryFilter/DefaultOperators.d.ts

@@ -1 +1,76 @@
-export { DefaultOperators, Operators, DEFAULT_QUERY_FILTER_OPERATORS, QUERY_FILTER_OPERATORS, } from "./QueryFilter.constants";
+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;
+    };
+    IsEmpty: {
+        value: string;
+        label: string;
+    };
+    IsNotEmpty: {
+        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[];

package/dist/QueryFilter/DefaultOperators.js

@@ -1 +1,21 @@
-export { DefaultOperators, Operators, DEFAULT_QUERY_FILTER_OPERATORS, QUERY_FILTER_OPERATORS, } from "./QueryFilter.constants";
+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" },
+    IsEmpty: { value: "isEmpty", label: "is empty" },
+    IsNotEmpty: { value: "isNotEmpty", label: "is not empty" },
+    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);

package/dist/QueryFilter/QueryFilter.d.ts

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

package/dist/QueryFilter/QueryFilter.js

@@ -1,6 +1,306 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Rules } from "./components";
-import { FilterContainer } from "./QueryFilter.styled";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { useTheme } from "styled-components";
+import { XIcon } from "lucide-react";
+import { DropDownMenu } from "../DropDownMenu";
+import { Button } from "../Button";
+import { DefaultOperators } from "./DefaultOperators";
+import Input from "../Input";
+import DateInput from "../DateInput";
+import { useDebouncedCallback } from "use-debounce";
+import moment from "moment";
+const StyledContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+`;
+const RuleContainer = styled(StyledContainer) `
+  // first child
+  & > *:first-child {
+    border-radius: 5px 0 0 5px;
+  }
+
+  // last child
+  & > *:last-child {
+    border-radius: 0 5px 5px 0;
+  }
+
+  button.mfui-DropDownMenu {
+    border-color: transparent;
+  }
+
+  button.mfui-DropDownMenu:hover {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const FilterContainer = styled(StyledContainer) `
+  gap: 10px;
+  flex-wrap: wrap;
+
+  button.mfui-DropDownMenu:hover {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const StyledButton = styled(Button) `
+  border-radius: 0;
+  font-size: 12px;
+  height: 20px;
+
+  padding: 3px 5px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const BaseLabel = styled.div `
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  border: 1px solid transparent;
+
+  background-color: ${({ theme }) => theme.button.background.alternate};
+
+  font-size: 12px;
+
+  height: 20px;
+
+  padding: 3px 5px;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+`;
+const FieldLabel = styled(BaseLabel) ``;
+const ValueLabel = styled(BaseLabel) ``;
+const StyledInput = styled(Input) `
+  height: 20px;
+  min-height: 20px;
+  width: 100px;
+  border-radius: 0;
+  font-size: 12px;
+  padding: 3px 5px;
+
+  border-color: transparent;
+  background-color: ${({ theme }) => theme.palette.background.secondary};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const StyledDateInput = styled(DateInput) `
+  width: auto;
+
+  .input-container {
+    height: 20px;
+    font-size: 12px;
+    border-radius: 0;
+    border-color: transparent;
+    background-color: ${({ theme }) => theme.palette.background.secondary};
+
+    cursor: pointer;
+
+    &:hover {
+      border-color: ${({ theme }) => theme.palette.primary.main};
+    }
+  }
+`;
+const dateFormatResolver = (resolution) => {
+    switch (resolution) {
+        case "day":
+            return "YYYY-MM-DD";
+        // case "month":
+        //   return "YYYY-MM";
+        // case "year":
+        //   return "YYYY";
+        // case "hour":
+        //   return "YYYY-MM-DD HH";
+        // case "minute":
+        //   return "YYYY-MM-DD HH:mm";
+        case "second":
+            return "YYYY-MM-DD HH:mm:ss";
+        case "millisecond":
+            return "YYYY-MM-DD HH:mm:ss.SSS";
+        default:
+            return "YYYY-MM-DD HH:mm:ss";
+    }
+};
+const MultiSelectEditor = ({ rule, filterDef, onChange }) => {
+    var _a, _b, _c;
+    const theme = useTheme();
+    const handleChange = (selected, diff) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(selected, diff);
+    };
+    const selected = (_a = rule.options) === null || _a === void 0 ? void 0 : _a.filter((o) => { var _a; return (_a = rule.value) === null || _a === void 0 ? void 0 : _a.includes(o.value); });
+    let display = ((_b = rule.options) === null || _b === void 0 ? void 0 : _b.map((o) => o.label).join(", ")) || "Select Value";
+    if (Array.isArray(rule.value) && rule.value.length > 1) {
+        display = `${rule.value.length} ${(filterDef === null || filterDef === void 0 ? void 0 : filterDef.pluralLabel) || "Values"}`;
+    }
+    return (_jsx(DropDownMenu, { data: (filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) || [], variant: "outlined", multiselect: true, searchable: true, size: "xs", buttonProps: {
+            title: "Select Value",
+            variant: "contained",
+            size: "xxs",
+            style: {
+                padding: "0px 4px",
+                height: 20,
+                borderRadius: 0,
+                backgroundColor: theme.button.background.alternate,
+                fontSize: 11,
+                fontWeight: "normal",
+                color: !!rule.value && Array.isArray(rule.value) && rule.value.length > 0
+                    ? theme.palette.text.primary
+                    : theme.palette.text.secondary,
+            },
+        }, dropDownProps: {
+            style: Object.assign({ width: 200, maxWidth: 400 }, (_c = filterDef === null || filterDef === void 0 ? void 0 : filterDef.dropDownOptions) === null || _c === void 0 ? void 0 : _c.style),
+        }, defaultValue: selected || [], onChange: handleChange, query: filterDef === null || filterDef === void 0 ? void 0 : filterDef.query, children: display }));
+};
+const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const handleInputChange = useDebouncedCallback((e) => {
+        const value = e.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: value ? [value] : undefined }));
+    }, 250);
+    const handleMultiSelectChange = useDebouncedCallback((selected) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: selected.map((s) => s.value), options: selected }));
+    }, 100);
+    const handleTimestampChange = useDebouncedCallback((timestamp) => {
+        let formattedValue = timestamp;
+        if (formattedValue && filterDef.resolution) {
+            const date = moment(formattedValue).utc(true); // utc mode prevents datetime from shifting when using toISOString
+            switch (filterDef.resolution) {
+                case "day":
+                    date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+                    break;
+                case "second":
+                    date.set({ millisecond: 0 });
+                    break;
+                case "millisecond":
+                    break;
+                default:
+                    break;
+            }
+            formattedValue = filterDef.isoString
+                ? date.toISOString()
+                : date.format(dateFormatResolver(filterDef.resolution));
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: formattedValue ? [formattedValue] : undefined }));
+    }, 100);
+    switch (inputType) {
+        case "text":
+            return (_jsx(StyledInput, { placeholder: "Enter Value...", defaultValue: (_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[0], onChange: handleInputChange }));
+        case "number":
+            return (_jsx(StyledInput, { type: "number", placeholder: "Enter Value...", defaultValue: (_b = rule === null || rule === void 0 ? void 0 : rule.value) === null || _b === void 0 ? void 0 : _b[0], onChange: handleInputChange }));
+        case "date":
+            return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: "YYYY-MM-DD", defaultValue: ((_c = rule.value) === null || _c === void 0 ? void 0 : _c[0]) === "" ? undefined : (_d = rule.value) === null || _d === void 0 ? void 0 : _d[0], onChange: handleTimestampChange }));
+        case "datetime":
+            return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: dateFormatResolver(filterDef === null || filterDef === void 0 ? void 0 : filterDef.resolution), defaultValue: ((_e = rule.value) === null || _e === void 0 ? void 0 : _e[0]) === "" ? undefined : (_f = rule.value) === null || _f === void 0 ? void 0 : _f[0], onChange: handleTimestampChange }));
+        case "multiselect":
+            return (_jsx(MultiSelectEditor, { rule: rule, filterDef: filterDef, onChange: handleMultiSelectChange }));
+        default:
+            return (_jsx(StyledInput, { placeholder: "Enter Value...", onChange: handleInputChange }));
+    }
+};
+const ValueSelector = ({ rule, inputType, filterDef, onChange }) => {
+    var _a;
+    const isBetween = rule.operator.value.toLowerCase().includes("between");
+    const handleValueChange = (e) => {
+        const currentValue = rule.value;
+        if (isBetween) {
+            const newValue = (e === null || e === void 0 ? void 0 : e.value) || [""];
+            if (currentValue === null || currentValue === void 0 ? void 0 : currentValue[1]) {
+                newValue.push(currentValue[1]);
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: newValue }));
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: e.value, options: e.options }));
+    };
+    const handleSecondaryValueChange = (e) => {
+        var _a, _b;
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[0]) || "", ((_b = e.value) === null || _b === void 0 ? void 0 : _b[0]) || ""], options: e.options }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ValueEditor, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: handleValueChange }), isBetween && (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { children: "and" }), _jsx(ValueEditor, { rule: Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[1]) || ""] }), inputType: inputType, filterDef: filterDef, onChange: handleSecondaryValueChange })] }))] }));
+};
+const CloseLabel = styled(StyledButton) `
+  padding: 2px;
+
+  background-color: ${({ theme }) => theme.button.background.alternate};
+  color: ${({ theme }) => theme.button.text.alternate};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDelete, onUpdate, onUpdateRootCombinator, }) => {
+    const theme = useTheme();
+    const handleCombinatorChange = (e) => {
+        onUpdateRootCombinator(e);
+    };
+    const handleOperatorChange = (rule, operator) => {
+        const prevValue = rule.value;
+        let newValue;
+        const isBetween = operator.value.toLowerCase().includes("between");
+        if (isBetween) {
+            newValue = [(prevValue === null || prevValue === void 0 ? void 0 : prevValue[0]) || "", (prevValue === null || prevValue === void 0 ? void 0 : prevValue[1]) || ""];
+        }
+        else {
+            newValue =
+                (prevValue === null || prevValue === void 0 ? void 0 : prevValue.length) && prevValue.length > 0 ? prevValue : undefined; // keep existing value if it exists, return undefined if array is empty
+        }
+        onUpdate(Object.assign(Object.assign({}, rule), { operator, value: newValue }));
+    };
+    return (_jsxs(_Fragment, { children: [showCombinator === true && (_jsx(DropDownMenu, { variant: "outlined", data: [
+                    { label: "AND", value: "and" },
+                    { label: "OR", value: "or" },
+                ], size: "xs", buttonProps: {
+                    title: "Chain these query filters together using AND | OR logic",
+                    variant: "contained",
+                    color: "secondary",
+                    style: {
+                        fontWeight: "normal",
+                        fontSize: 12,
+                        padding: "3px 5px",
+                        height: 20,
+                        borderRadius: 4,
+                        backgroundColor: theme.button.background.alternate,
+                        color: theme.button.text.alternate,
+                    },
+                }, onItemSelect: (e) => handleCombinatorChange(e.value), dropDownProps: {
+                    style: { width: 175, maxWidth: 400 },
+                }, children: combinator.toUpperCase() })), rules.map((rule) => {
+                const filterDef = filterDefinitions.find((f) => f.dataField === rule.dataField);
+                if (!filterDef)
+                    throw new Error(`Filter Definition not found for dataField: ${rule.dataField}`);
+                const operatorOptions = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.operators) || DefaultOperators;
+                const inputType = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.inputType) || "text";
+                return (_jsxs(RuleContainer, { "data-rule-id": rule.id, children: [_jsx(FieldLabel, { children: rule.label }), _jsx(DropDownMenu, { variant: "outlined", data: operatorOptions, size: "xs", buttonProps: {
+                                title: "Select Operator",
+                                variant: "contained",
+                                color: "secondary",
+                                style: {
+                                    fontWeight: "normal",
+                                    fontSize: 12,
+                                    padding: "3px 5px",
+                                    height: 20,
+                                    borderRadius: 0,
+                                    backgroundColor: theme.button.background.alternate,
+                                    color: theme.button.text.alternate,
+                                },
+                            }, onItemSelect: (e) => handleOperatorChange(rule, e), dropDownProps: {
+                                style: { width: 175, maxWidth: 400 },
+                            }, children: rule.operator.label }), rule.operator.value != "isEmpty" &&
+                            rule.operator.value != "isNotEmpty" && (_jsx(ValueSelector, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: onUpdate })), _jsx(CloseLabel, { variant: "contained", onClick: () => onDelete(rule), children: _jsx(XIcon, { size: 16 }) })] }, rule.id));
+            })] }));
+};
 export const QueryFilter = ({ queryFilter, }) => {
     var _a;
     const { filter, filterDefinitions, showCombinator } = queryFilter;

package/dist/QueryFilter/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./useQueryFilter";
 export * from "./QueryFilter";
-export * from "./QueryFilter.types";
-export * from "./QueryFilter.constants";
-export * from "./QueryFilter.lib";
+export * from "./types";
+export * from "./DefaultOperators";

package/dist/QueryFilter/index.js

@@ -1,5 +1,4 @@
 export * from "./useQueryFilter";
 export * from "./QueryFilter";
-export * from "./QueryFilter.types";
-export * from "./QueryFilter.constants";
-export * from "./QueryFilter.lib";
+export * from "./types";
+export * from "./DefaultOperators";

package/dist/QueryFilter/types.d.ts

@@ -1 +1,52 @@
-export * from "./QueryFilter.types";
+import { DropDownItem, DropDownMenuProps } from "../DropDownMenu";
+export interface UseQueryFilterProps {
+    defaultFilter?: Query | null;
+    filterDefinitions: FilterDefinition[];
+    showCombinator?: boolean;
+    onFilterChange?: (filter: any) => void;
+}
+export type QueryFilterType = {
+    filter: Query;
+    filterDefinitions: FilterDefinition[];
+    showCombinator?: boolean;
+    addRule: (rule: Rule) => void;
+    removeRule: (id: string) => void;
+    updateRule: (rule: Rule) => void;
+    updateRootCombinator: (combinator: Combinator) => void;
+};
+export type UseQueryFilter = (args: UseQueryFilterProps) => QueryFilterType;
+export type Combinator = "and" | "or";
+export type Operator = {
+    label: string;
+    value: string;
+};
+export type InputType = "text" | "number" | "date" | "datetime" | "multiselect";
+export interface FilterDefinition {
+    dataField: string;
+    label: string;
+    pluralLabel?: string;
+    operators?: Operator[];
+    inputType?: InputType;
+    resolution?: "day" | "second" | "millisecond";
+    isoString?: boolean;
+    placeholder?: string;
+    selectOptions?: DropDownItem[];
+    dropDownOptions?: {
+        style?: React.CSSProperties;
+    };
+    query?: DropDownMenuProps["query"];
+}
+export interface Rule {
+    id?: string;
+    dataField: string;
+    value?: string[];
+    options?: DropDownItem[];
+    operator: Operator;
+    label: string;
+}
+export interface RuleGroup {
+    rules: Rule[];
+    combinator: Combinator;
+}
+export interface Query extends RuleGroup {
+}

package/dist/QueryFilter/types.js

@@ -1 +1 @@
-export * from "./QueryFilter.types";
+export {};

package/dist/QueryFilter/useQueryFilter.d.ts

@@ -1,2 +1,2 @@
-import { UseQueryFilter } from "./QueryFilter.types";
+import { UseQueryFilter } from "./types";
 export declare const useQueryFilter: UseQueryFilter;