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

package/dist/QueryFilter/QueryFilter.types.d.ts

@@ -0,0 +1,61 @@
+import type { DropDownItem, DropDownMenuProps } from "../DropDownMenu";
+import type { SuperDatePickerProps } from "../SuperDatePicker";
+export interface UseQueryFilterProps {
+    value?: Query | null;
+    defaultValue?: Query | null;
+    /** @deprecated Use value instead. */
+    filter?: Query | null;
+    /** @deprecated Use defaultValue instead. */
+    defaultFilter?: Query | null;
+    filterDefinitions: FilterDefinition[];
+    showCombinator?: boolean;
+    onFilterChange?: (filter: Query) => 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 type BetweenEditor = "inputs" | "superDatePicker";
+export interface FilterDefinition {
+    dataField: string;
+    label: string;
+    pluralLabel?: string;
+    operators?: Operator[];
+    inputType?: InputType;
+    betweenEditor?: BetweenEditor;
+    resolution?: "day" | "second" | "millisecond";
+    isoString?: boolean;
+    placeholder?: string;
+    selectOptions?: DropDownItem[];
+    superDatePickerProps?: Omit<SuperDatePickerProps, "defaultValue" | "format" | "onChange" | "size" | "value" | "variant" | "width">;
+    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/QueryFilter.types.js

@@ -0,0 +1 @@
+export {};

package/dist/QueryFilter/components/MultiSelectEditor.d.ts

@@ -0,0 +1,7 @@
+import { DropDownItem } from "../../DropDownMenu";
+import { FilterDefinition, Rule } from "../QueryFilter.types";
+export declare const MultiSelectEditor: React.FC<{
+    rule: Rule;
+    filterDef: FilterDefinition;
+    onChange?: (selected: DropDownItem[], diff: DropDownItem[]) => void;
+}>;

package/dist/QueryFilter/components/MultiSelectEditor.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
+import { DropDownMenu } from "../../DropDownMenu";
+import { QUERY_FILTER_SELECT_VALUE_LABEL, } from "../QueryFilter.constants";
+export const MultiSelectEditor = ({ rule, filterDef, onChange }) => {
+    var _a, _b;
+    const theme = useTheme();
+    const handleChange = (selected, diff) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(selected, diff);
+    };
+    const options = [
+        ...((filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) || []),
+        ...(rule.options || []),
+    ];
+    const selected = ((_a = rule.value) === null || _a === void 0 ? void 0 : _a.map((value) => {
+        const option = options.find((o) => o.value == value);
+        return option || { label: value, value };
+    })) || [];
+    let display = selected.map((o) => o.label).join(", ") || QUERY_FILTER_SELECT_VALUE_LABEL;
+    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: QUERY_FILTER_SELECT_VALUE_LABEL,
+            variant: "contained",
+            size: "xxs",
+            style: {
+                padding: "3px 8px",
+                height: 24,
+                borderRadius: 0,
+                backgroundColor: "transparent",
+                borderColor: "transparent",
+                fontFamily: theme.typography.fontFamily,
+                fontSize: 11,
+                fontWeight: "normal",
+                lineHeight: 1,
+                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 }, (_b = filterDef === null || filterDef === void 0 ? void 0 : filterDef.dropDownOptions) === null || _b === void 0 ? void 0 : _b.style),
+        }, value: selected, onChange: handleChange, query: filterDef === null || filterDef === void 0 ? void 0 : filterDef.query, children: display }));
+};

package/dist/QueryFilter/components/RuleChip.d.ts

@@ -0,0 +1,8 @@
+import { FilterDefinition, Operator, Rule } from "../QueryFilter.types";
+export declare const RuleChip: React.FC<{
+    rule: Rule;
+    filterDef: FilterDefinition;
+    onDelete: (rule: Rule) => void;
+    onOperatorChange: (rule: Rule, operator: Operator) => void;
+    onUpdate: (rule: Rule) => void;
+}>;

package/dist/QueryFilter/components/RuleChip.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import styled, { useTheme } from "styled-components";
+import { DropDownMenu } from "../../DropDownMenu";
+import { DefaultOperators } from "../QueryFilter.constants";
+import { operatorRequiresValue } from "../QueryFilter.lib";
+import { CloseLabel, FieldLabel, RuleContainer } from "../QueryFilter.styled";
+import { ValueSelector } from "./ValueSelector";
+const RuleLabel = styled(FieldLabel) `
+  &:hover {
+    background-color: transparent;
+  }
+`;
+export const RuleChip = ({ rule, filterDef, onDelete, onOperatorChange, onUpdate }) => {
+    const theme = useTheme();
+    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(RuleLabel, { children: rule.label }), _jsx(DropDownMenu, { variant: "outlined", data: operatorOptions, size: "xs", buttonProps: {
+                    title: "Select Operator",
+                    variant: "contained",
+                    color: "secondary",
+                    style: {
+                        fontFamily: theme.typography.fontFamily,
+                        fontWeight: "normal",
+                        fontSize: 11,
+                        lineHeight: 1,
+                        padding: "3px 8px",
+                        height: 24,
+                        borderRadius: 0,
+                        backgroundColor: "transparent",
+                        borderColor: "transparent",
+                        color: theme.palette.text.secondary,
+                    },
+                }, onItemSelect: (e) => onOperatorChange(rule, e), dropDownProps: {
+                    style: { width: 150, maxWidth: 400 },
+                }, children: rule.operator.label }), operatorRequiresValue(rule.operator) && (_jsx(ValueSelector, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: onUpdate })), _jsx(CloseLabel, { variant: "contained", onClick: () => onDelete(rule), children: _jsx(XIcon, { size: 16 }) })] }));
+};

package/dist/QueryFilter/components/Rules.d.ts

@@ -0,0 +1,11 @@
+import { FilterDefinition, Rule } from "../QueryFilter.types";
+export interface RulesProps {
+    rules: Rule[];
+    combinator: "and" | "or";
+    showCombinator?: boolean;
+    filterDefinitions: FilterDefinition[];
+    onDelete: (rule: Rule) => void;
+    onUpdate: (rule: Rule) => void;
+    onUpdateRootCombinator: (e: "or" | "and") => void;
+}
+export declare const Rules: React.FC<RulesProps>;

package/dist/QueryFilter/components/Rules.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
+import { DropDownMenu } from "../../DropDownMenu";
+import { QUERY_FILTER_COMBINATOR_OPTIONS, QUERY_FILTER_COMBINATOR_TITLE, } from "../QueryFilter.constants";
+import { updateRuleOperator } from "../QueryFilter.lib";
+import { RuleChip } from "./RuleChip";
+import { UnavailableRuleChip } from "./UnavailableRuleChip";
+export const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDelete, onUpdate, onUpdateRootCombinator, }) => {
+    const theme = useTheme();
+    const handleCombinatorChange = (e) => {
+        onUpdateRootCombinator(e);
+    };
+    const handleOperatorChange = (rule, operator) => {
+        onUpdate(updateRuleOperator(rule, operator));
+    };
+    return (_jsxs(_Fragment, { children: [showCombinator === true && (_jsx(DropDownMenu, { variant: "outlined", data: QUERY_FILTER_COMBINATOR_OPTIONS, size: "xs", buttonProps: {
+                    title: QUERY_FILTER_COMBINATOR_TITLE,
+                    variant: "contained",
+                    color: "secondary",
+                    style: {
+                        fontFamily: theme.typography.fontFamily,
+                        fontWeight: 400,
+                        fontSize: 11,
+                        letterSpacing: 0,
+                        lineHeight: 1,
+                        padding: "3px 8px",
+                        height: 24,
+                        borderRadius: 5,
+                        borderColor: "transparent",
+                        color: theme.palette.text.secondary,
+                    },
+                }, onItemSelect: (e) => handleCombinatorChange(e.value), dropDownProps: {
+                    style: { width: 75 },
+                }, children: combinator.toUpperCase() })), rules.map((rule, index) => {
+                const filterDef = filterDefinitions.find((f) => f.dataField === rule.dataField);
+                if (!filterDef) {
+                    return (_jsx(UnavailableRuleChip, { rule: rule, onDelete: onDelete }, rule.id || `${rule.dataField}-${index}`));
+                }
+                return (_jsx(RuleChip, { rule: rule, filterDef: filterDef, onDelete: onDelete, onOperatorChange: handleOperatorChange, onUpdate: onUpdate }, rule.id || `${rule.dataField}-${index}`));
+            })] }));
+};

package/dist/QueryFilter/components/UnavailableRuleChip.d.ts

@@ -0,0 +1,5 @@
+import { Rule } from "../QueryFilter.types";
+export declare const UnavailableRuleChip: React.FC<{
+    rule: Rule;
+    onDelete: (rule: Rule) => void;
+}>;

package/dist/QueryFilter/components/UnavailableRuleChip.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { QUERY_FILTER_UNAVAILABLE_FILTER_LABEL } from "../QueryFilter.constants";
+import { CloseLabel, FieldLabel, UnavailableRuleContainer, ValueLabel, } from "../QueryFilter.styled";
+export const UnavailableRuleChip = ({ rule, onDelete }) => {
+    return (_jsxs(UnavailableRuleContainer, { "data-rule-id": rule.id, children: [_jsx(FieldLabel, { title: rule.dataField, children: rule.label || rule.dataField }), _jsx(ValueLabel, { children: QUERY_FILTER_UNAVAILABLE_FILTER_LABEL }), _jsx(CloseLabel, { variant: "contained", onClick: () => onDelete(rule), children: _jsx(XIcon, { size: 16 }) })] }));
+};

package/dist/QueryFilter/components/ValueEditor.d.ts

@@ -0,0 +1,7 @@
+import { FilterDefinition, InputType, Rule } from "../QueryFilter.types";
+export declare const ValueEditor: React.FC<{
+    rule: Rule;
+    inputType: InputType;
+    filterDef: FilterDefinition;
+    onChange?: (e: Rule) => void;
+}>;

package/dist/QueryFilter/components/ValueEditor.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { QUERY_FILTER_DATE_FORMATS, QUERY_FILTER_VALUE_PLACEHOLDER, } from "../QueryFilter.constants";
+import { dateFormatResolver, formatRuleTimestampValue, } from "../QueryFilter.lib";
+import { StyledDateInput, StyledInput } from "../QueryFilter.styled";
+import { MultiSelectEditor } from "./MultiSelectEditor";
+export const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
+    var _a, _b, _c;
+    const editorValue = ((_a = rule.value) === null || _a === void 0 ? void 0 : _a[0]) || "";
+    const dateEditorValue = ((_b = rule.value) === null || _b === void 0 ? void 0 : _b[0]) === "" ? undefined : (_c = rule.value) === null || _c === void 0 ? void 0 : _c[0];
+    const [draftValue, setDraftValue] = useState(editorValue);
+    useEffect(() => {
+        setDraftValue(editorValue);
+    }, [editorValue]);
+    const handleInputChange = useDebouncedCallback((value) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: value ? [value] : undefined }));
+    }, 250);
+    const handleDraftInputChange = (e) => {
+        const value = e.target.value;
+        setDraftValue(value);
+        handleInputChange(value);
+    };
+    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) => {
+        const formattedValue = formatRuleTimestampValue(timestamp, filterDef);
+        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: filterDef.placeholder || QUERY_FILTER_VALUE_PLACEHOLDER, value: draftValue, onChange: handleDraftInputChange }));
+        case "number":
+            return (_jsx(StyledInput, { type: "number", placeholder: filterDef.placeholder || QUERY_FILTER_VALUE_PLACEHOLDER, value: draftValue, onChange: handleDraftInputChange }));
+        case "date":
+            return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: QUERY_FILTER_DATE_FORMATS.day, value: dateEditorValue, onChange: handleTimestampChange }));
+        case "datetime":
+            return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: dateFormatResolver(filterDef === null || filterDef === void 0 ? void 0 : filterDef.resolution), value: dateEditorValue, onChange: handleTimestampChange }));
+        case "multiselect":
+            return (_jsx(MultiSelectEditor, { rule: rule, filterDef: filterDef, onChange: handleMultiSelectChange }));
+        default:
+            return (_jsx(StyledInput, { placeholder: filterDef.placeholder || QUERY_FILTER_VALUE_PLACEHOLDER, value: draftValue, onChange: handleDraftInputChange }));
+    }
+};

package/dist/QueryFilter/components/ValueSelector.d.ts

@@ -0,0 +1,7 @@
+import { FilterDefinition, InputType, Rule } from "../QueryFilter.types";
+export declare const ValueSelector: React.FC<{
+    rule: Rule;
+    inputType: InputType;
+    filterDef: FilterDefinition;
+    onChange?: (e: Rule) => void;
+}>;

package/dist/QueryFilter/components/ValueSelector.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import SuperDatePicker from "../../SuperDatePicker";
+import { QUERY_FILTER_DATE_FORMATS } from "../QueryFilter.constants";
+import { dateFormatResolver, getRuleDateRangeValue, getSecondaryRuleValue, isDateInputType, isBetweenOperator, updateRuleDateRangeValue, updateRulePrimaryValue, updateRuleSecondaryValue, } from "../QueryFilter.lib";
+import { FieldLabel } from "../QueryFilter.styled";
+import { ValueEditor } from "./ValueEditor";
+const BetweenAndLabel = styled(FieldLabel) `
+  &:hover {
+    background-color: transparent;
+  }
+`;
+export const ValueSelector = ({ rule, inputType, filterDef, onChange }) => {
+    var _a, _b;
+    const isBetween = isBetweenOperator(rule.operator);
+    const useSuperDatePicker = isBetween &&
+        isDateInputType(inputType) &&
+        filterDef.betweenEditor === "superDatePicker";
+    const handleValueChange = (nextRule) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(updateRulePrimaryValue(rule, nextRule));
+    };
+    const handleSecondaryValueChange = (nextRule) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(updateRuleSecondaryValue(rule, nextRule));
+    };
+    const handleDateRangeChange = (value) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(updateRuleDateRangeValue(rule, value, filterDef));
+    };
+    if (useSuperDatePicker) {
+        return (_jsx(SuperDatePicker, Object.assign({}, filterDef.superDatePickerProps, { clearable: (_b = (_a = filterDef.superDatePickerProps) === null || _a === void 0 ? void 0 : _a.clearable) !== null && _b !== void 0 ? _b : false, format: inputType === "date"
+                ? QUERY_FILTER_DATE_FORMATS.day
+                : dateFormatResolver(filterDef.resolution), size: "xxs", value: getRuleDateRangeValue(rule), variant: "text", width: "auto", onChange: handleDateRangeChange })));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(ValueEditor, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: handleValueChange }), isBetween && (_jsxs(_Fragment, { children: [_jsx(BetweenAndLabel, { children: "and" }), _jsx(ValueEditor, { rule: Object.assign(Object.assign({}, rule), { value: [getSecondaryRuleValue(rule)] }), inputType: inputType, filterDef: filterDef, onChange: handleSecondaryValueChange })] }))] }));
+};

package/dist/QueryFilter/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./MultiSelectEditor";
+export * from "./RuleChip";
+export * from "./Rules";
+export * from "./UnavailableRuleChip";
+export * from "./ValueEditor";
+export * from "./ValueSelector";

package/dist/QueryFilter/components/index.js

@@ -0,0 +1,6 @@
+export * from "./MultiSelectEditor";
+export * from "./RuleChip";
+export * from "./Rules";
+export * from "./UnavailableRuleChip";
+export * from "./ValueEditor";
+export * from "./ValueSelector";

package/dist/QueryFilter/index.d.ts

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

package/dist/QueryFilter/index.js

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

package/dist/QueryFilter/types.d.ts

@@ -1,52 +1 @@
-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 {
-}
+export * from "./QueryFilter.types";

package/dist/QueryFilter/types.js

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

package/dist/QueryFilter/useQueryFilter.d.ts

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

package/dist/QueryFilter/useQueryFilter.js

@@ -1,32 +1,36 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { DEFAULT_QUERY_FILTER } from "./QueryFilter.constants";
 import shortUUID from "short-uuid";
-const defaultFilter = {
-    combinator: "and",
-    rules: [],
-};
 export const useQueryFilter = (args) => {
-    const [filter, setFilter] = useState((args === null || args === void 0 ? void 0 : args.defaultFilter) || defaultFilter);
-    const addRule = (rule) => {
-        if (!rule.id) {
-            rule.id = shortUUID.generate();
+    var _a, _b, _c;
+    const controlledFilter = (_a = args.value) !== null && _a !== void 0 ? _a : args.filter;
+    const defaultValue = (_c = (_b = args.defaultValue) !== null && _b !== void 0 ? _b : args.defaultFilter) !== null && _c !== void 0 ? _c : DEFAULT_QUERY_FILTER;
+    const [internalFilter, setInternalFilter] = useState(defaultValue || DEFAULT_QUERY_FILTER);
+    const isControlled = controlledFilter !== undefined;
+    const filter = isControlled
+        ? controlledFilter || DEFAULT_QUERY_FILTER
+        : internalFilter;
+    const commitFilter = (updater) => {
+        var _a;
+        const nextFilter = updater(filter);
+        if (!isControlled) {
+            setInternalFilter(nextFilter);
         }
-        setFilter(Object.assign(Object.assign({}, filter), { rules: [...filter.rules, rule] }));
+        (_a = args.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(args, nextFilter);
+    };
+    const addRule = (rule) => {
+        const nextRule = Object.assign(Object.assign({}, rule), { id: rule.id || shortUUID.generate() });
+        commitFilter((currentFilter) => (Object.assign(Object.assign({}, currentFilter), { rules: [...currentFilter.rules, nextRule] })));
     };
     const removeRule = (id) => {
-        const rules = filter.rules.filter((r) => r.id !== id);
-        setFilter(Object.assign(Object.assign({}, filter), { rules }));
+        commitFilter((currentFilter) => (Object.assign(Object.assign({}, currentFilter), { rules: currentFilter.rules.filter((r) => r.id !== id) })));
     };
     const updateRule = (rule) => {
-        const rules = filter.rules.map((r) => (r.id === rule.id ? rule : r));
-        setFilter(Object.assign(Object.assign({}, filter), { rules }));
+        commitFilter((currentFilter) => (Object.assign(Object.assign({}, currentFilter), { rules: currentFilter.rules.map((r) => (r.id === rule.id ? rule : r)) })));
     };
     const updateRootCombinator = (combinator) => {
-        setFilter(Object.assign(Object.assign({}, filter), { combinator }));
+        commitFilter((currentFilter) => (Object.assign(Object.assign({}, currentFilter), { combinator })));
     };
-    useEffect(() => {
-        var _a;
-        (_a = args === null || args === void 0 ? void 0 : args.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(args, filter);
-    }, [filter]);
     return {
         filter,
         filterDefinitions: args.filterDefinitions,

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -1,18 +1,13 @@
 import TiptapImage from "@tiptap/extension-image";
 import StarterKit from "@tiptap/starter-kit";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
-import Underline from "@tiptap/extension-underline";
 import TextAlign from "@tiptap/extension-text-align";
-import Table from "@tiptap/extension-table";
-import TableCell from "@tiptap/extension-table-cell";
-import TableHeader from "@tiptap/extension-table-header";
-import TableRow from "@tiptap/extension-table-row";
-import Placeholder from "@tiptap/extension-placeholder";
+import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+import { Focus, Placeholder } from "@tiptap/extensions";
 import { Color } from "@tiptap/extension-color";
-import TextStyle from "@tiptap/extension-text-style";
+import { TextStyle } from "@tiptap/extension-text-style";
 import { InputRule, Extension } from "@tiptap/core";
-import Focus from "@tiptap/extension-focus";
-import { UploadImagesPlugin } from "../Plugins";
+import { ImageActionsPlugin, UploadImagesPlugin, } from "../Plugins";
 import getSlashCommand from "./getSlashCommand";
 import { Extensions } from "../Enums";
 import BubbleMenu from "./BubbleMenuExtension";
@@ -25,7 +20,7 @@ const CustomImage = TiptapImage.extend({
             } });
     },
     addProseMirrorPlugins() {
-        return [UploadImagesPlugin()];
+        return [UploadImagesPlugin(), ImageActionsPlugin(this.editor)];
     },
 });
 const CustomStorage = Extension.create({
@@ -84,11 +79,6 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
             category: "default",
             extension: Color,
         },
-        {
-            name: Extensions.Underline,
-            category: "default",
-            extension: Underline,
-        },
         {
             name: Extensions.TextAlign,
             category: "default",

package/dist/RichTextEditor/Plugins/ImageActionsPlugin.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+export declare const ImageActionsPlugin: (editor: Editor) => Plugin<any>;