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

package/dist/DropDownMenu/components/MenuItemList.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef, useState, } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FixedSizeList, VariableSizeList } from "react-window";
 import { Plus } from "lucide-react";
@@ -22,6 +22,7 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { useDebouncedCallback } from "use-debounce";
 import { SearchInput } from "./SearchInput";
 import Loader from "../../Loader";
+const getItemKey = (item) => item && typeof item === "object" && "value" in item ? item.value : item;
 const filterMenuItems = (menuItems, searchValue) => {
     return menuItems.filter((item) => {
         var _a, _b, _c;
@@ -55,6 +56,28 @@ const buildGroupedDisplayList = (items) => {
 const ListViewPort = styled.div.attrs({ className: "ListViewPort" }) `
   display: flex;
   flex-direction: column;
+  width: 100%;
+`;
+const ListScroller = styled.div `
+  scrollbar-color: ${({ theme }) => `${theme.scrollbar.thumb} ${theme.scrollbar.track}`};
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${(props) => props.theme.scrollbar.track};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${(props) => props.theme.scrollbar.thumb};
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${(props) => props.theme.scrollbar.thumbHover};
+  }
 `;
 const GroupHeader = styled.div `
   display: flex;
@@ -98,13 +121,14 @@ const MeasuredRow = ({ children, index, setItemSize, style }) => {
     }, [children, index, setItemSize]);
     return (_jsx("div", { style: Object.assign(Object.assign({}, style), { overflow: "visible" }), children: _jsx("div", { ref: rowRef, children: children }) }));
 };
-export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dynamicOptionHeight, selected, TooltipContent, multiselect, grouped, onAddNew, size, handleAddItem, handleRemoveItem, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
-    var _a;
+export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dynamicOptionHeight, selected, TooltipContent, multiselect, enableSelectAll, grouped, onAddNew, size, handleAddItem, handleRemoveItem, handleSetSelected, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
     const [searchValue, setSearchValue] = useState("");
-    const _b = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _b, rest = __rest(_b, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
+    const _a = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _a, rest = __rest(_a, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
     const targetElm = useRef(null);
     const listElm = useRef(null);
+    const fixedListRef = useRef(null);
     const variableListRef = useRef(null);
+    const hasHandledInitialSelectedScroll = useRef(false);
     const itemSizeMap = useRef({});
     const [viewPortDimensions, setViewPortDimensions] = useState({
         width: 0,
@@ -128,6 +152,9 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         if (multiselect) {
             isSelected ? handleRemoveItem(item) : handleAddItem(item);
         }
+        else {
+            handleAddItem(item);
+        }
         onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
         (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
     };
@@ -158,7 +185,23 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         }
         return items;
     })();
-    const isObjectArray = (_a = Object.keys((visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
+    const selectedKeys = useMemo(() => new Set((selected || []).map(getItemKey)), [selected]);
+    const isItemSelected = (item) => selectedKeys.has(getItemKey(item));
+    const selectableItems = useMemo(() => displayItems.filter((item) => !item._isGroupHeader &&
+        !item._isAddNew &&
+        !item.disabled &&
+        !item.items), [displayItems]);
+    const selectableKeys = useMemo(() => new Set(selectableItems.map(getItemKey)), [selectableItems]);
+    const selectedSelectableItems = useMemo(() => selectableItems.filter((item) => selectedKeys.has(getItemKey(item))), [selectableItems, selectedKeys]);
+    const allSelectableItemsSelected = selectableItems.length > 0 &&
+        selectedSelectableItems.length === selectableItems.length;
+    const someSelectableItemsSelected = selectedSelectableItems.length > 0 && !allSelectableItemsSelected;
+    const selectedDisplayIndex = displayItems.findIndex((item) => {
+        if (item._isGroupHeader || item._isAddNew)
+            return false;
+        return isItemSelected(item);
+    });
+    const selectedDisplayKey = selected === null || selected === void 0 ? void 0 : selected.map(getItemKey).join("|");
     const isLoading = isLoadingInfiniteQuery;
     const handleOnScroll = useCallback((event) => {
         const scrollTolerance = 15;
@@ -172,6 +215,18 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
             debouncedFetchNextPage();
         }
     }, [debouncedFetchNextPage, onScroll, onScrollToBottom, onScrollToTop]);
+    const handleToggleSelectAll = () => {
+        if (selectableItems.length === 0)
+            return;
+        const currentSelected = selected || [];
+        if (allSelectableItemsSelected) {
+            const nextSelected = currentSelected.filter((selectedItem) => !selectableKeys.has(getItemKey(selectedItem)));
+            handleSetSelected(nextSelected, selectedSelectableItems);
+            return;
+        }
+        const itemsToAdd = selectableItems.filter((item) => !isItemSelected(item));
+        handleSetSelected([...currentSelected, ...itemsToAdd], itemsToAdd);
+    };
     useLayoutEffect(() => {
         const list = listElm.current;
         if (!list)
@@ -211,7 +266,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         : estimatedHeight < 200
             ? estimatedHeight
             : 200;
-    const width = viewPortDimensions.width || 188;
+    const width = "100%";
     const setItemSize = useCallback((index, measuredSize) => {
         var _a;
         if (itemSizeMap.current[index] === measuredSize)
@@ -226,6 +281,30 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         (_a = variableListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(0, true);
         setMeasurementRevision((revision) => revision + 1);
     }, [displayItemsKey, dynamicListEnabled]);
+    useLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        if (multiselect) {
+            if (hasHandledInitialSelectedScroll.current || itemCount === 0) {
+                return;
+            }
+            hasHandledInitialSelectedScroll.current = true;
+            if (selectedDisplayIndex < 0)
+                return;
+            (_a = fixedListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(selectedDisplayIndex, "smart");
+            (_b = variableListRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(selectedDisplayIndex, "smart");
+            return;
+        }
+        if (selectedDisplayIndex < 0)
+            return;
+        (_c = fixedListRef.current) === null || _c === void 0 ? void 0 : _c.scrollToItem(selectedDisplayIndex, "smart");
+        (_d = variableListRef.current) === null || _d === void 0 ? void 0 : _d.scrollToItem(selectedDisplayIndex, "smart");
+    }, [
+        displayItemsKey,
+        itemCount,
+        multiselect,
+        selectedDisplayIndex,
+        selectedDisplayKey,
+    ]);
     const renderDisplayItem = (item, index, style) => {
         if (item._isGroupHeader) {
             return (_jsxs(GroupHeader, { "$size": size, style: style, children: [_jsx("span", { className: "group-line" }), _jsx("span", { className: "group-label", children: item.label }), _jsx("span", { className: "group-line" })] }, item.value));
@@ -237,13 +316,11 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                     onAddNew === null || onAddNew === void 0 ? void 0 : onAddNew(item.value);
                 }, style: style, children: item.label }, "__add_new__"));
         }
-        const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => {
-            return isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item;
-        }));
+        const isSelected = isItemSelected(item);
         if (item.items) {
             return (_jsx(DropDownMenu, { data: item.items, size: size, buttonProps: style ? Object.assign({ style }, item) : Object.assign({}, item), disabled: item.disabled, dynamicOptionHeight: dynamicListEnabled, children: item.label }));
         }
-        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
+        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": !multiselect && isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
                             var _a;
                             newValue ? handleAddItem(item) : handleRemoveItem(item);
                             (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
@@ -260,7 +337,11 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                         handleSearch(e);
                     }
                     onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
-                } })), isLoading && (_jsxs("div", { style: {
+                } })), multiselect && enableSelectAll && selectableItems.length > 0 && (_jsx(MenuItem, { className: "MenuItem", size: size, leftSection: _jsx(CheckBox, { value: allSelectableItemsSelected, partialCheck: someSelectableItemsSelected, size: size, onChange: handleToggleSelectAll }), onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleToggleSelectAll();
+                }, children: "Select all" })), isLoading && (_jsxs("div", { style: {
                     display: "flex",
                     flexDirection: "column",
                     gap: "10px",
@@ -268,12 +349,12 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                     alignItems: "center",
                     height: "100%",
                     padding: "10px 0",
-                }, children: [_jsx("div", { style: { fontSize: `${sizeTokens.supportingFontSize}px` }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: dynamicListEnabled ? (_jsx(VariableSizeList, { ref: variableListRef, itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: getDynamicItemSize, outerRef: listElm, children: ({ data, index, style }) => {
+                }, children: [_jsx("div", { style: { fontSize: `${sizeTokens.supportingFontSize}px` }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: dynamicListEnabled ? (_jsx(VariableSizeList, { ref: variableListRef, itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: getDynamicItemSize, outerElementType: ListScroller, outerRef: listElm, children: ({ data, index, style }) => {
                         const item = data === null || data === void 0 ? void 0 : data[index];
                         if (!item)
                             return null;
                         return (_jsx(MeasuredRow, { index: index, setItemSize: setItemSize, style: style, children: renderDisplayItem(item, index) }));
-                    } })) : (_jsx(FixedSizeList, { itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerRef: listElm, children: ({ data, index, style }) => {
+                    } })) : (_jsx(FixedSizeList, { ref: fixedListRef, itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerElementType: ListScroller, outerRef: listElm, children: ({ data, index, style }) => {
                         const item = data === null || data === void 0 ? void 0 : data[index];
                         if (!item)
                             return null;

package/dist/DropDownMenu/components/StyledContent.js

@@ -7,8 +7,7 @@ export const StyledContent = styled.div `
   overflow-y: hidden;
   overflow-x: hidden;
 
-  width: 200px;
-  min-width: 150px;
+  width: var(--mfui-dropdown-reference-width, 150px);
   max-width: 400px;
   max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
     ? `${maxDropdownHeight}px`

package/dist/DropDownMenu/types.d.ts

@@ -31,6 +31,7 @@ export type DropDownMenuProps = {
     defaultValue?: DropDownItem[];
     value?: DropDownItem[];
     multiselect?: boolean;
+    enableSelectAll?: boolean;
     size?: Size;
     title?: string;
     TooltipContent?: ComponentType<any>;

package/dist/FileViewer/viewers/ImageViewer.js

@@ -1,15 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import Loader from "../../Loader";
+const IMAGE_VIEWER_PADDING = 10;
 const ImageViewerContainer = styled.div `
+  box-sizing: border-box;
   height: 100%;
-
-  text-align: center;
-  padding: 10px;
+  padding: ${IMAGE_VIEWER_PADDING}px;
+  overflow: auto;
+`;
+const ImageCanvas = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: 100%;
+  min-height: 100%;
 `;
-// Updated Image styled-component to remove max-width and max-height
 const Image = styled.img `
+  box-sizing: border-box;
+  display: block;
+  flex: 0 0 auto;
   object-fit: contain;
 
   // set orientation
@@ -26,33 +37,79 @@ const StyledLoader = styled.div `
   height: 100%;
 `;
 export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
+    const containerRef = useRef(null);
     const [imageLoaded, setImageLoaded] = useState(false);
+    const [containerSize, setContainerSize] = useState({
+        width: 0,
+        height: 0,
+    });
     const [originalDimensions, setOriginalDimensions] = useState({
         naturalWidth: 0,
         naturalHeight: 0,
-        width: 0,
-        height: 0,
     });
-    const handleImageLoad = (e) => {
-        setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { width: e.target.clientWidth, height: e.target.offsetHeight })));
-    };
-    const loadImage = () => {
+    const fittedDimensions = useMemo(() => {
+        const { naturalWidth, naturalHeight } = originalDimensions;
+        if (naturalWidth === 0 ||
+            naturalHeight === 0 ||
+            containerSize.width === 0 ||
+            containerSize.height === 0) {
+            return {
+                width: naturalWidth,
+                height: naturalHeight,
+            };
+        }
+        const fitScale = Math.min(containerSize.width / naturalWidth, containerSize.height / naturalHeight);
+        return {
+            width: naturalWidth * fitScale * zoomFactor,
+            height: naturalHeight * fitScale * zoomFactor,
+        };
+    }, [containerSize, originalDimensions, zoomFactor]);
+    useEffect(() => {
         if (!file.url)
             return;
+        let loading = true;
+        setImageLoaded(false);
         const img = document.createElement("img");
         img.src = file.url;
         img.onload = () => {
-            setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight })));
+            if (!loading)
+                return;
+            setOriginalDimensions({
+                naturalWidth: img.naturalWidth,
+                naturalHeight: img.naturalHeight,
+            });
             setImageLoaded(true);
         };
-    };
-    useEffect(() => {
-        loadImage();
+        return () => {
+            loading = false;
+        };
     }, [file.url]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const updateContainerSize = () => {
+            setContainerSize({
+                width: Math.max(0, container.clientWidth - IMAGE_VIEWER_PADDING * 2),
+                height: Math.max(0, container.clientHeight - IMAGE_VIEWER_PADDING * 2),
+            });
+        };
+        updateContainerSize();
+        const resizeObserver = new ResizeObserver(updateContainerSize);
+        resizeObserver.observe(container);
+        return () => resizeObserver.disconnect();
+    }, []);
+    const showImage = imageLoaded && containerSize.width > 0 && containerSize.height > 0;
     if (isPending) {
         return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
     }
-    return (_jsxs(ImageViewerContainer, { className: "mfui-ImageViewer", children: [!imageLoaded && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), imageLoaded && (_jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", zoomFactor: zoomFactor, onLoad: handleImageLoad, height: zoomFactor === 1 ? "100%" : originalDimensions.height * zoomFactor, onClick: (e) => {
-                    e.stopPropagation();
-                } }))] }));
+    return (_jsxs(ImageViewerContainer, { ref: containerRef, className: "mfui-ImageViewer", children: [!showImage && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), showImage && (_jsx(ImageCanvas, { style: {
+                    width: fittedDimensions.width,
+                    height: fittedDimensions.height,
+                }, children: _jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", style: {
+                        width: fittedDimensions.width,
+                        height: fittedDimensions.height,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                    } }) }))] }));
 };

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -38,6 +38,7 @@ export interface MonolithDefaultTheme {
             alt: string;
             secondary: string;
             gradient: string;
+            subtle: string;
         };
         menu: {
             background: string;

package/dist/QueryFilter/DefaultOperators.d.ts

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

package/dist/QueryFilter/DefaultOperators.js

@@ -1,21 +1 @@
-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);
+export { DefaultOperators, Operators, DEFAULT_QUERY_FILTER_OPERATORS, QUERY_FILTER_OPERATORS, } from "./QueryFilter.constants";

package/dist/QueryFilter/QueryFilter.constants.d.ts

@@ -0,0 +1,134 @@
+import type { DropDownItem } from "../DropDownMenu";
+import type { Operator, Query } from "./QueryFilter.types";
+export declare const DEFAULT_QUERY_FILTER: Query;
+export declare const QUERY_FILTER_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;
+    };
+    DoesNotContain: {
+        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 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;
+    };
+    DoesNotContain: {
+        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 DEFAULT_QUERY_FILTER_OPERATORS: Operator[];
+export declare const DefaultOperators: Operator[];
+export declare const QUERY_FILTER_VALUE_PLACEHOLDER = "Enter Value...";
+export declare const QUERY_FILTER_SELECT_VALUE_LABEL = "Select Value";
+export declare const QUERY_FILTER_UNAVAILABLE_FILTER_LABEL = "Unavailable filter";
+export declare const QUERY_FILTER_COMBINATOR_TITLE = "Chain these query filters together using AND | OR logic";
+export declare const QUERY_FILTER_DATE_FORMATS: {
+    readonly day: "YYYY-MM-DD";
+    readonly second: "YYYY-MM-DD HH:mm:ss";
+    readonly millisecond: "YYYY-MM-DD HH:mm:ss.SSS";
+    readonly default: "YYYY-MM-DD HH:mm:ss";
+};
+export declare const QUERY_FILTER_BETWEEN_OPERATORS: string[];
+export declare const QUERY_FILTER_VALUELESS_OPERATORS: string[];
+export declare const QUERY_FILTER_COMBINATOR_OPTIONS: DropDownItem[];

package/dist/QueryFilter/QueryFilter.constants.js

@@ -0,0 +1,39 @@
+export const DEFAULT_QUERY_FILTER = {
+    combinator: "and",
+    rules: [],
+};
+export const QUERY_FILTER_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" },
+    DoesNotContain: { value: "doesNotContain", label: "does not contain" },
+    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 Operators = QUERY_FILTER_OPERATORS;
+export const DEFAULT_QUERY_FILTER_OPERATORS = Object.values(QUERY_FILTER_OPERATORS);
+export const DefaultOperators = DEFAULT_QUERY_FILTER_OPERATORS;
+export const QUERY_FILTER_VALUE_PLACEHOLDER = "Enter Value...";
+export const QUERY_FILTER_SELECT_VALUE_LABEL = "Select Value";
+export const QUERY_FILTER_UNAVAILABLE_FILTER_LABEL = "Unavailable filter";
+export const QUERY_FILTER_COMBINATOR_TITLE = "Chain these query filters together using AND | OR logic";
+export const QUERY_FILTER_DATE_FORMATS = {
+    day: "YYYY-MM-DD",
+    second: "YYYY-MM-DD HH:mm:ss",
+    millisecond: "YYYY-MM-DD HH:mm:ss.SSS",
+    default: "YYYY-MM-DD HH:mm:ss",
+};
+export const QUERY_FILTER_BETWEEN_OPERATORS = ["between", "notbetween"];
+export const QUERY_FILTER_VALUELESS_OPERATORS = ["isEmpty", "isNotEmpty"];
+export const QUERY_FILTER_COMBINATOR_OPTIONS = [
+    { label: "AND", value: "and" },
+    { label: "OR", value: "or" },
+];

package/dist/QueryFilter/QueryFilter.d.ts

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