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

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};
+  }
+`;

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";