@monolith-forensics/monolith-ui 1.8.1-dev.2 → 1.8.1-dev.4

package/dist/QueryFilter/QueryFilter.js

@@ -1,306 +1,6 @@
-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));
-            })] }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Rules } from "./components";
+import { FilterContainer } from "./QueryFilter.styled";
 export const QueryFilter = ({ queryFilter, }) => {
     var _a;
     const { filter, filterDefinitions, showCombinator } = queryFilter;

package/dist/QueryFilter/QueryFilter.lib.d.ts

@@ -0,0 +1,14 @@
+import type { SuperDatePickerValue } from "../SuperDatePicker";
+import type { FilterDefinition, InputType, Operator, Rule } from "./QueryFilter.types";
+export declare const dateFormatResolver: (resolution?: string) => "YYYY-MM-DD" | "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm:ss.SSS";
+export declare const isBetweenOperator: (operator: Operator) => boolean;
+export declare const isDateInputType: (inputType: InputType) => inputType is "date" | "datetime";
+export declare const operatorRequiresValue: (operator: Operator) => boolean;
+export declare const formatRuleTimestampValue: (timestamp: string | null | undefined, filterDef: FilterDefinition) => string | undefined;
+export declare const resolveRuleValueForOperator: (currentValue: Rule["value"], operator: Operator) => string[] | undefined;
+export declare const updateRuleOperator: (rule: Rule, operator: Operator) => Rule;
+export declare const getSecondaryRuleValue: (rule: Rule) => string;
+export declare const getRuleDateRangeValue: (rule: Rule) => SuperDatePickerValue;
+export declare const updateRulePrimaryValue: (rule: Rule, nextRule: Rule) => Rule;
+export declare const updateRuleSecondaryValue: (rule: Rule, nextRule: Rule) => Rule;
+export declare const updateRuleDateRangeValue: (rule: Rule, nextValue: SuperDatePickerValue, filterDef: FilterDefinition) => Rule;

package/dist/QueryFilter/QueryFilter.lib.js

@@ -0,0 +1,84 @@
+import moment from "moment";
+import { QUERY_FILTER_BETWEEN_OPERATORS, QUERY_FILTER_DATE_FORMATS, QUERY_FILTER_VALUELESS_OPERATORS, } from "./QueryFilter.constants";
+export const dateFormatResolver = (resolution) => {
+    switch (resolution) {
+        case "day":
+            return QUERY_FILTER_DATE_FORMATS.day;
+        case "second":
+            return QUERY_FILTER_DATE_FORMATS.second;
+        case "millisecond":
+            return QUERY_FILTER_DATE_FORMATS.millisecond;
+        default:
+            return QUERY_FILTER_DATE_FORMATS.default;
+    }
+};
+export const isBetweenOperator = (operator) => {
+    const value = operator.value.toLowerCase();
+    return QUERY_FILTER_BETWEEN_OPERATORS.includes(value);
+};
+export const isDateInputType = (inputType) => {
+    return inputType === "date" || inputType === "datetime";
+};
+export const operatorRequiresValue = (operator) => {
+    return !QUERY_FILTER_VALUELESS_OPERATORS.includes(operator.value);
+};
+export const formatRuleTimestampValue = (timestamp, filterDef) => {
+    if (!timestamp || !filterDef.resolution) {
+        return timestamp || undefined;
+    }
+    const date = moment(timestamp).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;
+    }
+    return filterDef.isoString
+        ? date.toISOString()
+        : date.format(dateFormatResolver(filterDef.resolution));
+};
+export const resolveRuleValueForOperator = (currentValue, operator) => {
+    if (isBetweenOperator(operator)) {
+        return [(currentValue === null || currentValue === void 0 ? void 0 : currentValue[0]) || "", (currentValue === null || currentValue === void 0 ? void 0 : currentValue[1]) || ""];
+    }
+    return (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) && currentValue.length > 0
+        ? currentValue
+        : undefined;
+};
+export const updateRuleOperator = (rule, operator) => {
+    return Object.assign(Object.assign({}, rule), { operator, value: resolveRuleValueForOperator(rule.value, operator) });
+};
+export const getSecondaryRuleValue = (rule) => {
+    var _a;
+    return ((_a = rule.value) === null || _a === void 0 ? void 0 : _a[1]) || "";
+};
+export const getRuleDateRangeValue = (rule) => {
+    var _a, _b;
+    return {
+        start: ((_a = rule.value) === null || _a === void 0 ? void 0 : _a[0]) || null,
+        end: ((_b = rule.value) === null || _b === void 0 ? void 0 : _b[1]) || null,
+    };
+};
+export const updateRulePrimaryValue = (rule, nextRule) => {
+    var _a, _b;
+    if (isBetweenOperator(rule.operator)) {
+        return Object.assign(Object.assign({}, rule), { value: [((_a = nextRule.value) === null || _a === void 0 ? void 0 : _a[0]) || "", ((_b = rule.value) === null || _b === void 0 ? void 0 : _b[1]) || ""] });
+    }
+    return Object.assign(Object.assign({}, rule), { value: nextRule.value, options: nextRule.options });
+};
+export const updateRuleSecondaryValue = (rule, nextRule) => {
+    var _a, _b;
+    return Object.assign(Object.assign({}, rule), { value: [((_a = rule.value) === null || _a === void 0 ? void 0 : _a[0]) || "", ((_b = nextRule.value) === null || _b === void 0 ? void 0 : _b[0]) || ""], options: nextRule.options });
+};
+export const updateRuleDateRangeValue = (rule, nextValue, filterDef) => {
+    return Object.assign(Object.assign({}, rule), { value: [
+            formatRuleTimestampValue(nextValue.start, filterDef) || "",
+            formatRuleTimestampValue(nextValue.end, filterDef) || "",
+        ] });
+};

package/dist/QueryFilter/QueryFilter.styled.d.ts

@@ -0,0 +1,89 @@
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RuleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const FilterContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: import("react").RefObject<HTMLButtonElement>;
+    children?: import("react").ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: import("../core").Size;
+    variant?: import("../core").Variant;
+    color?: import("../Button").ButtonColor;
+    disabled?: boolean;
+    selected?: boolean;
+    justify?: "start" | "center" | "end";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}, never>> & string & Omit<import("react").FC<import("../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const BaseLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const ValueLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Input/Input").InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Input/Input").InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledDateInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
+    className?: string;
+    style?: React.CSSProperties;
+    defaultValue?: string | null | undefined;
+    value?: string | null | undefined;
+    format?: import("../DateInput/DateInput").FormatOptions;
+    label?: string;
+    description?: import("react").ReactNode;
+    arrow?: boolean;
+    size?: import("../core").Size;
+    variant?: import("../core").Variant;
+    clearable?: boolean;
+    required?: boolean;
+    onChange?: (value?: string | null) => void;
+    min?: Date;
+    max?: Date;
+    error?: string;
+    width?: string;
+    enableCalendar?: boolean;
+    utc?: boolean;
+    closeOnSelect?: boolean;
+    disabled?: boolean;
+}, never>> & string & Omit<import("react").FC<{
+    className?: string;
+    style?: React.CSSProperties;
+    defaultValue?: string | null | undefined;
+    value?: string | null | undefined;
+    format?: import("../DateInput/DateInput").FormatOptions;
+    label?: string;
+    description?: import("react").ReactNode;
+    arrow?: boolean;
+    size?: import("../core").Size;
+    variant?: import("../core").Variant;
+    clearable?: boolean;
+    required?: boolean;
+    onChange?: (value?: string | null) => void;
+    min?: Date;
+    max?: Date;
+    error?: string;
+    width?: string;
+    enableCalendar?: boolean;
+    utc?: boolean;
+    closeOnSelect?: boolean;
+    disabled?: boolean;
+}>, keyof import("react").Component<any, {}, any>>;
+export declare const CloseLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: import("react").RefObject<HTMLButtonElement>;
+    children?: import("react").ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: import("../core").Size;
+    variant?: import("../core").Variant;
+    color?: import("../Button").ButtonColor;
+    disabled?: boolean;
+    selected?: boolean;
+    justify?: "start" | "center" | "end";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}, never>, never>> & string;
+export declare const UnavailableRuleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>, never>> & string;

package/dist/QueryFilter/QueryFilter.styled.js

@@ -0,0 +1,184 @@
+import styled from "styled-components";
+import { Button } from "../Button";
+import Input from "../Input";
+import DateInput from "../DateInput";
+export const StyledContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+`;
+export const RuleContainer = styled(StyledContainer) `
+  gap: 0;
+  align-items: center;
+  overflow: hidden;
+
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background-color: ${({ theme }) => theme.palette.background.subtle};
+
+  & > * {
+    box-shadow: inset -1px 0 0 ${({ theme }) => theme.palette.divider};
+  }
+
+  & > *:last-child {
+    box-shadow: none;
+  }
+
+  button.mfui-DropDownMenu {
+    min-height: 24px;
+    border-color: transparent;
+    border-radius: 0;
+    background-color: transparent;
+    font-family: ${({ theme }) => theme.typography.fontFamily};
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1;
+  }
+
+  button.mfui-DropDownMenu:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover} !important;
+    border-color: transparent;
+  }
+`;
+export const FilterContainer = styled(StyledContainer) `
+  align-items: center;
+  flex-wrap: wrap;
+  row-gap: 6px;
+  column-gap: 6px;
+
+  button.mfui-DropDownMenu {
+    background-color: ${({ theme }) => theme.palette.background.subtle} !important;
+  }
+
+  button.mfui-DropDownMenu:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover} !important;
+  }
+`;
+export const StyledButton = styled(Button) `
+  height: 24px;
+  padding: 3px 7px;
+
+  border-radius: 0;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+export const BaseLabel = styled.div `
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  height: 24px;
+  min-height: 24px;
+
+  padding: 3px 8px;
+  border: 0;
+
+  background-color: transparent;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+`;
+export const FieldLabel = styled(BaseLabel) `
+  font-weight: 400;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+export const ValueLabel = styled(BaseLabel) `
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+export const StyledInput = styled(Input) `
+  height: 24px;
+  min-height: 24px;
+  width: 110px;
+  padding: 3px 8px;
+
+  border-radius: 0;
+  border-color: transparent;
+
+  background-color: transparent;
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1;
+
+  &:hover {
+    border-color: transparent;
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+
+  &:focus {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+export const StyledDateInput = styled(DateInput) `
+  width: auto;
+
+  .input-container {
+    height: 24px;
+
+    border-radius: 0;
+    border-color: transparent;
+
+    background-color: transparent;
+    color: ${({ theme }) => theme.palette.text.primary};
+    font-family: ${({ theme }) => theme.typography.fontFamily};
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1;
+
+    cursor: pointer;
+
+    &:hover {
+      border-color: transparent;
+      background-color: ${({ theme }) => theme.palette.action.hover};
+    }
+  }
+`;
+export const CloseLabel = styled(StyledButton) `
+  width: 22px;
+  min-width: 22px;
+  padding: 2px;
+
+  background-color: transparent;
+  color: ${({ theme }) => theme.palette.text.secondary};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    border-color: transparent;
+  }
+`;
+export const UnavailableRuleContainer = styled(RuleContainer) `
+  border-style: dashed;
+  border-color: ${({ theme }) => theme.alert.warning.border};
+  background-color: ${({ theme }) => theme.palette.background.subtle};
+
+  ${FieldLabel},
+  ${ValueLabel} {
+    background-color: transparent;
+  }
+
+  ${ValueLabel} {
+    color: ${({ theme }) => theme.alert.warning.color};
+  }
+`;