@danikokonn/yarik-frontend-lib 2.0.58-test9 → 2.1.0

package/dist/components/RichFilterTextField/FilterHistoryMenu.js

@@ -1,43 +1,29 @@
-import React, { useState } from "react";
-import Stack from "@mui/material/Stack";
-import IconButton from "@mui/material/IconButton";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import ContentCopy from "@mui/icons-material/ContentCopy";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import HistoryIcon from "@mui/icons-material/History";
-import ContentCopy from "@mui/icons-material/ContentCopy";
 import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
+import { useState } from "react";
 const FilterHistoryMenu = ({ searchHist, onChange, onCopy, }) => {
     const [searchHistMenuAnchor, setSearchHistMenuAnchor] = useState(null);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { color: "secondary", title: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0438\u0441\u0442\u043E\u0440\u0438\u044E \u0444\u0438\u043B\u044C\u0442\u0440\u043E\u0432", disabled: searchHist.length === 0, onClick: (e) => {
-                setSearchHistMenuAnchor(e.currentTarget);
-                e.stopPropagation();
-            } },
-            React.createElement(FilterListIcon, null)),
-        React.createElement(Menu, { anchorEl: searchHistMenuAnchor, open: Boolean(searchHistMenuAnchor), onClose: () => setSearchHistMenuAnchor(null), onClick: () => setSearchHistMenuAnchor(null) },
-            React.createElement(Stack, { direction: "row", spacing: 1, sx: {
-                    px: 2,
-                    py: 1,
-                    alignItems: "center",
-                } },
-                React.createElement(HistoryIcon, null),
-                React.createElement(Typography, { variant: "h5" }, "\u0418\u0441\u0442\u043E\u0440\u0438\u044F \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C\u0441\u043A\u0438\u0445 \u0444\u0438\u043B\u044C\u0442\u0440\u043E\u0432")),
-            React.createElement(Divider, null),
-            searchHist.map((el, idx) => (React.createElement(MenuItem, { key: idx + 1, onClick: () => onChange(el, idx), title: el },
-                React.createElement(ListItemText, { sx: { overflow: "hidden" } },
-                    idx + 1,
-                    ". ",
-                    el),
-                React.createElement(ListItemIcon, null,
-                    React.createElement(IconButton, { onClick: (e) => {
-                            navigator.clipboard.writeText(el);
-                            e.stopPropagation();
-                            onCopy();
-                        } },
-                        React.createElement(ContentCopy, { fontSize: "small" })))))))));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "secondary", title: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0438\u0441\u0442\u043E\u0440\u0438\u044E \u0444\u0438\u043B\u044C\u0442\u0440\u043E\u0432", disabled: searchHist.length === 0, onClick: (e) => {
+                    setSearchHistMenuAnchor(e.currentTarget);
+                    e.stopPropagation();
+                }, children: _jsx(FilterListIcon, {}) }), _jsxs(Menu, { anchorEl: searchHistMenuAnchor, open: Boolean(searchHistMenuAnchor), onClose: () => setSearchHistMenuAnchor(null), onClick: () => setSearchHistMenuAnchor(null), children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: {
+                            px: 2,
+                            py: 1,
+                            alignItems: "center",
+                        }, children: [_jsx(HistoryIcon, {}), _jsx(Typography, { variant: "h5", children: "\u0418\u0441\u0442\u043E\u0440\u0438\u044F \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C\u0441\u043A\u0438\u0445 \u0444\u0438\u043B\u044C\u0442\u0440\u043E\u0432" })] }), _jsx(Divider, {}), searchHist.map((el, idx) => (_jsxs(MenuItem, { onClick: () => onChange(el, idx), title: el, children: [_jsxs(ListItemText, { sx: { overflow: "hidden" }, children: [idx + 1, ". ", el] }), _jsx(ListItemIcon, { children: _jsx(IconButton, { onClick: (e) => {
+                                        navigator.clipboard.writeText(el);
+                                        e.stopPropagation();
+                                        onCopy();
+                                    }, children: _jsx(ContentCopy, { fontSize: "small" }) }) })] }, idx + 1)))] })] }));
 };
 export default FilterHistoryMenu;

package/dist/components/RichFilterTextField/HintOptionsMenu.d.ts

@@ -1,12 +1,12 @@
-import React, { MutableRefObject } from "react";
+import { RefObject } from "react";
 declare const HintOptionsMenu: ({ inputAnchor, inputRef, textFieldRef, options, focusIdx, onSelectHint, onClose, }: {
     inputAnchor: Element;
-    inputRef: MutableRefObject<HTMLTextAreaElement>;
-    textFieldRef: MutableRefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLTextAreaElement>;
+    textFieldRef: RefObject<HTMLDivElement>;
     options: Map<string, string | undefined>;
     focusIdx: number;
     onSelectHint(hint: string): void;
     onClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default HintOptionsMenu;
 //# sourceMappingURL=HintOptionsMenu.d.ts.map

package/dist/components/RichFilterTextField/HintOptionsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HintOptionsMenu.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/HintOptionsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,gBAAgB,EAAqB,MAAM,OAAO,CAAC;AAMnE,QAAA,MAAM,eAAe,GAAI,oFAQtB;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAChD,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,sBA6EA,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"HintOptionsMenu.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/HintOptionsMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD,QAAA,MAAM,eAAe,GAAI,oFAQtB;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACzC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,4CA4EA,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/RichFilterTextField/HintOptionsMenu.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import ListItemText from "@mui/material/ListItemText";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import ListItemText from "@mui/material/ListItemText";
+import { useEffect, useRef } from "react";
 const HintOptionsMenu = ({ inputAnchor, inputRef, textFieldRef, options, focusIdx, onSelectHint, onClose, }) => {
     const focusRef = useRef(null);
     useEffect(() => {
@@ -9,15 +10,12 @@ const HintOptionsMenu = ({ inputAnchor, inputRef, textFieldRef, options, focusId
             return;
         focusRef.current.scrollIntoView({ behavior: "smooth" });
     }, [focusRef.current]);
-    const menuOptions = () => options
-        ?.entries()
-        .toArray()
-        .map((opt, idx) => (React.createElement(MenuItem, { key: idx + 1, onClick: () => onSelectHint(opt[0]), className: focusIdx === idx ? "Mui-focusVisible" : "", ref: focusIdx === idx ? focusRef : null },
-        React.createElement(ListItemText, { sx: { overflow: "hidden" }, secondary: opt[1], slotProps: {
+    const optsArr = Array.from(options?.entries());
+    const menuOptions = () => optsArr.map((opt, idx) => (_jsx(MenuItem, { onClick: () => onSelectHint(opt[0]), className: focusIdx === idx ? "Mui-focusVisible" : "", ref: focusIdx === idx ? focusRef : null, children: _jsx(ListItemText, { sx: { overflow: "hidden" }, secondary: opt[1], slotProps: {
                 primary: { variant: "subtitle2" },
                 secondary: { variant: "caption" },
-            } }, opt[0]))));
-    return (React.createElement(Menu, { sx: { mt: "5px" }, open: Boolean(inputAnchor), anchorEl: inputAnchor, onClose: (_e, r) => {
+            }, children: opt[0] }) }, idx + 1)));
+    return (_jsx(Menu, { sx: { mt: "5px" }, open: Boolean(inputAnchor), anchorEl: inputAnchor, onClose: (_e, r) => {
             if (r === "escapeKeyDown")
                 onClose();
         }, onClick: onClose, anchorOrigin: {
@@ -45,6 +43,6 @@ const HintOptionsMenu = ({ inputAnchor, inputRef, textFieldRef, options, focusId
                     },
                 },
             },
-        }, onFocus: () => inputRef.current.focus(), disableAutoFocus: true, disableEnforceFocus: true, disableRestoreFocus: true }, menuOptions()));
+        }, onFocus: () => inputRef.current.focus(), disableAutoFocus: true, disableEnforceFocus: true, disableRestoreFocus: true, children: menuOptions() }));
 };
 export default HintOptionsMenu;

package/dist/components/RichFilterTextField/RichFilterTextField.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
 import RichFilterTextFieldProps from "./RichFilterTextFieldProps";
-declare const RichFilterTextField: ({ filterExpr, filterExprHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }: RichFilterTextFieldProps) => React.JSX.Element;
+declare const RichFilterTextField: ({ filterExpr, filterExprHist: searchHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }: RichFilterTextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default RichFilterTextField;
 //# sourceMappingURL=RichFilterTextField.d.ts.map

package/dist/components/RichFilterTextField/RichFilterTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichFilterTextField.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/RichFilterTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAUf,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAKlE,QAAA,MAAM,mBAAmB,GAAI,4HAS1B,wBAAwB,sBAyP1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"RichFilterTextField.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/RichFilterTextField.tsx"],"names":[],"mappings":"AAUA,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAGlE,QAAA,MAAM,mBAAmB,GAAI,wIAS1B,wBAAwB,4CAkS1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/RichFilterTextField/RichFilterTextField.js

@@ -1,73 +1,71 @@
-import React, { useEffect, useRef, useState, } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import ClearIcon from "@mui/icons-material/Clear";
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
+import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
-import ClearIcon from "@mui/icons-material/Clear";
-import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
-import HintOptionsMenu from "./HintOptionsMenu";
-import { getHints, insertInStrPos } from "./utils";
+import { useRef, useState } from "react";
 import { useSnackbarContext } from "../../providers";
 import FilterHistoryMenu from "./FilterHistoryMenu";
-import { Stack } from "@mui/material";
-const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }) => {
+import HintOptionsMenu from "./HintOptionsMenu";
+import { getHints, insertInStrPos } from "./utils";
+const RichFilterTextField = ({ filterExpr, filterExprHist: searchHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }) => {
     const { enqueueSnackbar } = useSnackbarContext();
     const [search, setSearch] = useState(filterExpr);
-    const instant = _instant ?? true;
-    const [searchHist, setSearchHist] = useState(filterExprHist);
-    // const [inputAnchor, setInputAnchor] = useState<HTMLDivElement | null>(null);
     const [cursorPos, setCursorPos] = useState(null);
-    // const [currentHintOptions, setCurrentHintOptions] = useState<
-    //   Map<string, string | undefined>
-    // >(() => new Map());
     const [focusIdx, setFocusIdx] = useState(0);
     const inputRef = useRef(null);
     const textFieldRef = useRef(null);
+    const prevFilterExpr = useRef(filterExpr);
+    const instant = _instant ?? true;
     const currentHintOptions = (cursorPos != null
         ? getHints(search, cursorPos, fields, operators)
         : null) ?? new Map();
     const inputAnchor = currentHintOptions?.size > 0 ? textFieldRef.current : null;
-    useEffect(() => {
-        if (cursorPos == null)
-            return;
-        if (currentHintOptions === getHints(search, cursorPos, fields, operators))
-            return;
+    if (prevFilterExpr.current !== filterExpr && filterExpr !== search) {
+        setSearch(filterExpr);
+        setCursorPos(null);
         setFocusIdx(0);
-        // setInputAnchor(currentHintOptions?.size > 0 ? textFieldRef.current : null);
-    }, [search, cursorPos]);
-    useEffect(() => {
-        if (cursorPos == null)
-            return;
-        if (inputRef.current && cursorPos !== inputRef.current.selectionStart) {
-            inputRef.current.selectionStart = cursorPos;
-            inputRef.current.selectionEnd = cursorPos;
-        }
-    }, [cursorPos]);
-    // Принудительное изменение состояния, если изменился пропс
-    // useEffect(() => setSearch(filterExpr), [filterExpr]);
+        prevFilterExpr.current = filterExpr;
+    }
+    if (cursorPos != null &&
+        inputRef.current &&
+        cursorPos !== inputRef.current.selectionStart) {
+        inputRef.current.selectionStart = cursorPos;
+        inputRef.current.selectionEnd = cursorPos;
+    }
     const handleChange = (value, _idx) => {
         setSearch(value);
-        onChange(value, (v) => setSearchHist(v));
+        if (cursorPos &&
+            getHints(value, cursorPos, fields, operators) !== currentHintOptions)
+            setFocusIdx(0);
+        onChange(value);
     };
     const insertHint = (hint) => {
         if (cursorPos == null)
             return;
-        if (hint.includes("[")) {
-            hint = "[]";
-        }
-        else if (hint.includes("(")) {
-            hint = "()";
-        }
-        else if (hint.includes("regex")) {
-            hint = hint.replace("regex", "");
+        if ((hint.includes("[") && hint.endsWith("]")) ||
+            (hint.includes("(") && hint.endsWith(")")) ||
+            ((hint.match(/\//g) || []).length === 2 && hint.endsWith("/"))) {
+            hint = hint
+                .replace(/\[.*?\]/g, "[]")
+                .replace(/\(.*?\)/g, "()")
+                .replace(/\/.*?\//g, "//");
         }
         const { newSearch, newPos } = insertInStrPos(search, cursorPos, hint, fields);
-        handleChange(newSearch);
+        setSearch(newSearch);
+        if (instant)
+            onChange(newSearch);
+        let newCursorPos = newPos;
         if (hint.includes("[") || hint.includes("(") || hint.includes("/")) {
-            setCursorPos(newPos - 1);
-        }
-        else {
-            setCursorPos(newPos);
+            newCursorPos--;
         }
+        setCursorPos(newCursorPos);
+        if (newCursorPos &&
+            getHints(newSearch, newCursorPos, fields, operators) !==
+                currentHintOptions)
+            setFocusIdx(0);
     };
     const handleKeyUp = (e) => {
         switch (e.code) {
@@ -82,22 +80,28 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
             case "Enter": {
                 e.preventDefault();
                 if (inputAnchor) {
-                    const focusedHint = currentHintOptions.entries().toArray()[focusIdx][0];
-                    insertHint(focusedHint);
+                    const focusedHint = Array.from(currentHintOptions.entries())[focusIdx]?.[0];
+                    if (focusedHint)
+                        insertHint(focusedHint);
                 }
                 else {
-                    onChange(search, (v) => setSearchHist(v));
+                    onChange(search);
+                    inputRef.current?.blur();
                 }
                 break;
             }
             case "Escape":
             case "Tab": {
-                // setInputAnchor(null);
                 setCursorPos(null);
                 break;
             }
             default: {
-                setCursorPos(inputRef.current?.selectionStart ?? null);
+                const newCursorPos = inputRef.current?.selectionStart ?? null;
+                setCursorPos(newCursorPos);
+                if (newCursorPos &&
+                    getHints(search, newCursorPos, fields, operators) !==
+                        currentHintOptions)
+                    setFocusIdx(0);
             }
         }
     };
@@ -107,7 +111,12 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
             case "ArrowRight":
             case "Space":
             case "Backspace": {
-                setCursorPos(inputRef.current?.selectionStart ?? null);
+                const newCursorPos = inputRef.current?.selectionStart ?? null;
+                setCursorPos(newCursorPos);
+                if (newCursorPos &&
+                    getHints(search, newCursorPos, fields, operators) !==
+                        currentHintOptions)
+                    setFocusIdx(0);
                 return;
             }
             case "ArrowDown": {
@@ -140,50 +149,56 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
             }
             case "Escape":
             case "Tab": {
-                // setInputAnchor(null);
                 setCursorPos(null);
+                setFocusIdx(0);
                 break;
             }
             default: {
-                setCursorPos(inputRef.current?.selectionStart ?? null);
+                const newCursorPos = inputRef.current?.selectionStart ?? null;
+                setCursorPos(newCursorPos);
+                if (newCursorPos &&
+                    getHints(search, newCursorPos, fields, operators) !==
+                        currentHintOptions)
+                    setFocusIdx(0);
             }
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, { ref: textFieldRef, inputRef: inputRef, fullWidth: true, size: "small", value: search, title: search, multiline: true, maxRows: 1, onChange: (e) => (instant ? handleChange : setSearch)(e.target.value), 
-            // onClick={(e) => {
-            //   if (e.target !== e.currentTarget) return;
-            //   setCursorPos(inputRef.current?.selectionStart ?? null);
-            // }}
-            onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, slotProps: {
-                htmlInput: {
-                    onClick: (e) => {
-                        if (Object(e).target !== Object(e).currentTarget)
-                            return;
-                        setCursorPos(inputRef.current?.selectionStart ?? null);
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { ref: textFieldRef, inputRef: inputRef, fullWidth: true, size: "small", value: search, title: search, multiline: true, maxRows: 1, onChange: (e) => {
+                    (instant ? handleChange : setSearch)(e.target.value);
+                    const newCursorPos = inputRef.current?.selectionStart ?? null;
+                    setCursorPos(newCursorPos);
+                    if (newCursorPos &&
+                        getHints(e.target.value, newCursorPos, fields, operators) !==
+                            currentHintOptions)
+                        setFocusIdx(0);
+                }, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, slotProps: {
+                    htmlInput: {
+                        onClick: (e) => {
+                            if (Object(e).target !== Object(e).currentTarget)
+                                return;
+                            const newCursorPos = inputRef.current?.selectionStart ?? null;
+                            setCursorPos(newCursorPos);
+                            if (newCursorPos &&
+                                getHints(search, newCursorPos, fields, operators) !==
+                                    currentHintOptions)
+                                setFocusIdx(0);
+                        },
                     },
-                },
-                input: {
-                    startAdornment: (React.createElement(InputAdornment, { position: "start" },
-                        React.createElement(Stack, { direction: "row", sx: { alignItems: "center" } },
-                            !instant && (React.createElement(IconButton, { onClick: (e) => {
-                                    onChange(search, (v) => setSearchHist(v));
+                    input: {
+                        startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsxs(Stack, { direction: "row", sx: { alignItems: "center" }, children: [!instant && (_jsx(IconButton, { onClick: (e) => {
+                                            onChange(search);
+                                            e.stopPropagation();
+                                        }, title: "\u041F\u043E\u0438\u0441\u043A", children: _jsx(SearchRoundedIcon, {}) })), _jsx(FilterHistoryMenu, { searchHist: searchHist, onChange: onSelectFromHistory || handleChange, onCopy: () => enqueueSnackbar("Предустановка фильтра скопирована в буфер обмена", "default") }), additionalComponents] }) })),
+                        endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { title: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B", disabled: !search, onClick: (e) => {
+                                    handleChange("");
+                                    setCursorPos(null);
+                                    setFocusIdx(0);
                                     e.stopPropagation();
-                                }, title: "\u041F\u043E\u0438\u0441\u043A" },
-                                React.createElement(SearchRoundedIcon, null))),
-                            React.createElement(FilterHistoryMenu, { searchHist: searchHist, onChange: onSelectFromHistory || handleChange, onCopy: () => enqueueSnackbar("Предустановка фильтра скопирована в буфер обмена", "default") }),
-                            additionalComponents))),
-                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        React.createElement(IconButton, { title: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B", disabled: !search, onClick: (e) => {
-                                handleChange("");
-                                e.stopPropagation();
-                            } },
-                            React.createElement(ClearIcon, null)))),
-                },
-            } }),
-        React.createElement(HintOptionsMenu, { inputAnchor: inputAnchor, inputRef: inputRef, textFieldRef: textFieldRef, options: currentHintOptions, focusIdx: focusIdx, onSelectHint: insertHint, onClose: () => {
-                // setInputAnchor(null);
-                setCursorPos(null);
-            } })));
+                                }, children: _jsx(ClearIcon, {}) }) })),
+                    },
+                } }), _jsx(HintOptionsMenu, { inputAnchor: inputAnchor, inputRef: inputRef, textFieldRef: textFieldRef, options: currentHintOptions, focusIdx: focusIdx, onSelectHint: insertHint, onClose: () => {
+                    setCursorPos(null);
+                    setFocusIdx(0);
+                } })] }));
 };
 export default RichFilterTextField;

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

@@ -1,5 +1,5 @@
-export { default } from "./RichFilterTextField";
 export * from "./RichFilterTextField";
-export { default as RichFilterTextFieldProps } from "./RichFilterTextFieldProps";
+export { default } from "./RichFilterTextField";
 export * from "./RichFilterTextFieldProps";
+export { type default as RichFilterTextFieldProps } from "./RichFilterTextFieldProps";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/RichFilterTextField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,KAAK,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/RichFilterTextField/index.js

@@ -1,3 +1,3 @@
-export { default } from "./RichFilterTextField";
 export * from "./RichFilterTextField";
+export { default } from "./RichFilterTextField";
 export * from "./RichFilterTextFieldProps";

package/dist/components/RichFilterTextField/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EAEf,MAAM,4BAA4B,CAAC;AAapC,eAAO,MAAM,QAAQ,GACnB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,QAAQ,WAAW,EAAE,EACrB,WAAW,cAAc,EAAE,oCAqE5B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,MAAM,MAAM,EACZ,QAAQ,WAAW,EAAE;;;CAoFtB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EAEf,MAAM,4BAA4B,CAAC;AAgBpC,eAAO,MAAM,QAAQ,GACnB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,QAAQ,WAAW,EAAE,EACrB,WAAW,cAAc,EAAE,oCA+E5B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,MAAM,MAAM,EACZ,QAAQ,WAAW,EAAE;;;CAoFtB,CAAC"}

package/dist/components/RichFilterTextField/utils.js

@@ -1,5 +1,7 @@
 const getSingleMatch = (token, fields) => {
-    const matchedFields = fields.filter((v) => v.name.startsWith(token));
+    if (!token)
+        return undefined;
+    const matchedFields = fields.filter((v) => v.name.toLowerCase().startsWith(token.toLowerCase()));
     if (matchedFields.length !== 1)
         return undefined;
     return matchedFields[0];
@@ -44,15 +46,21 @@ export const getHints = (search, cursorPos, fields, operators) => {
             if (typeof charAfter === "undefined" || charAfter === " ") {
                 const tokensBeforeCursor = search.substring(0, cursorPos).split(" ");
                 const token = tokensBeforeCursor[tokensBeforeCursor.length - 1];
-                const [tokenField, tokenOperator] = token.split(":");
-                const matchedField = getSingleMatch(`${tokenField}:`, fields);
+                const [tokenField, tokenOperator] = token
+                    ? token.split(":")
+                    : [undefined, undefined];
+                const matchedField = tokenField
+                    ? getSingleMatch(`${tokenField}:`, fields)
+                    : undefined;
                 const fieldHasValues = Boolean(matchedField?.values);
                 const validToken = Boolean(tokenOperator &&
                     operators.find((v) => v.name === tokenOperator) != null);
                 if (fieldHasValues && validToken) {
                     return getMapOf(matchedField?.values || []);
                 }
-                return getMapOf(fields.filter((v) => v.name.startsWith(token)));
+                return token
+                    ? getMapOf(fields.filter((v) => v.name.toLowerCase().startsWith(token.toLowerCase())))
+                    : new Map();
             }
         }
     }
@@ -68,7 +76,7 @@ export const insertInStrPos = (search, cursorPos, hint, fields) => {
     const charBefore = search[cursorPos - 1];
     const tokensBeforeCursor = search.substring(0, cursorPos).split(" ");
     const token = tokensBeforeCursor[tokensBeforeCursor.length - 1];
-    const [tokenField, _tokenOperator] = token.split(":");
+    const [tokenField] = token ? token.split(":") : [undefined, undefined];
     const matchedField = getSingleMatch(tokenField, fields);
     switch (charBefore) {
         case " ":

package/dist/components/SmartTable/RowContent.d.ts

@@ -1,14 +1,34 @@
-import React, { ReactNode } from "react";
-import { Column } from "../../types";
 import { SxProps, Theme } from "@mui/material";
-interface RowContentProps<T> {
+import { ComponentType } from "react";
+import { Column } from "../../types";
+interface RowContentProps<T extends {
+    id: string | number;
+} = {
+    id: string | number;
+}, P extends {
+    row: T;
+} = {
+    row: T;
+}, S extends {
     row: T;
-    columns: Column<T>[];
-    onDoubleClick?(rowId: string | null): void;
-    onSelectRow(rowId: string | null): void;
-    controlComponent?(row: T): ReactNode;
+} = {
+    row: T;
+}> {
+    row: T;
+    columns: Column<T, S>[];
+    onDoubleClick?(rowId: string | number | null): void;
+    onSelectRow(rowId: string | number | null): void;
+    ControlComponent?: ComponentType<P>;
+    ControlComponentProps?: Omit<P, "row">;
     controlComponentColSx?: SxProps<Theme>;
 }
-export default function RowContent<T>({ row, columns, onSelectRow, onDoubleClick, controlComponent, controlComponentColSx, }: RowContentProps<T>): React.JSX.Element;
-export {};
+declare function RowContent<T extends {
+    id: string | number;
+}, P extends {
+    row: T;
+}, S extends {
+    row: T;
+}>({ row, columns, onSelectRow, onDoubleClick, ControlComponent, ControlComponentProps, controlComponentColSx, }: RowContentProps<T, P, S>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof RowContent;
+export default _default;
 //# sourceMappingURL=RowContent.d.ts.map

package/dist/components/SmartTable/RowContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowContent.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/RowContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE/C,UAAU,eAAe,CAAC,CAAC;IACzB,GAAG,EAAE,CAAC,CAAC;IACP,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3C,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,SAAS,CAAC;IACrC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACxC;AAUD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,EAAE,EACpC,GAAG,EACH,OAAO,EACP,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,qBAAqB,GACtB,EAAE,eAAe,CAAC,CAAC,CAAC,qBAoCpB"}
+{"version":3,"file":"RowContent.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/RowContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAY,MAAM,eAAe,CAAC;AAEzD,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,UAAU,eAAe,CACvB,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC3D,CAAC,SAAS;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE,GAAG;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE,EACjC,CAAC,SAAS;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE,GAAG;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE;IAEjC,GAAG,EAAE,CAAC,CAAC;IACP,OAAO,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACpD,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACpC,qBAAqB,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACxC;AAUD,iBAAS,UAAU,CACjB,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EACjC,CAAC,SAAS;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE,EACpB,CAAC,SAAS;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE,EACpB,EACA,GAAG,EACH,OAAO,EACP,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EAErB,qBAAqB,GACtB,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA0F1B;wBAEwC,OAAO,UAAU;AAA1D,wBAA2D"}

package/dist/components/SmartTable/RowContent.js

@@ -1,5 +1,9 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
 import TableCell from "@mui/material/TableCell";
+import React from "react";
+import { JSONTree } from "react-json-tree";
+import { prettyDatetime } from "../../utils";
 const hiddenTextStyle = {
     whiteSpace: "nowrap",
     overflow: "hidden",
@@ -7,23 +11,58 @@ const hiddenTextStyle = {
     paddingTop: "0.25rem",
     paddingBottom: "0.25rem",
 };
-export default function RowContent({ row, columns, onSelectRow, onDoubleClick, controlComponent, controlComponentColSx, }) {
-    return (React.createElement(React.Fragment, null,
-        columns.map((col, idx) => (React.createElement(TableCell, { sx: {
-                ...hiddenTextStyle,
-                ...col.colSx,
-            }, key: idx, onClick: (_) => {
-                const selection = window.getSelection();
-                if (selection && selection.toString().length > 0)
-                    return;
-                onSelectRow(Object(row).id);
-            }, onDoubleClick: (_) => (onDoubleClick || (() => { }))(Object(row).id) }, col.cellContentComponent
-            ? col.cellContentComponent(row)
-            : Object(row)[col.name] || "N/A"))),
-        controlComponent && (React.createElement(TableCell, { sx: {
-                textAlign: "center",
-                cursor: "default",
-                p: 0,
-                ...controlComponentColSx,
-            } }, controlComponent(row)))));
+function RowContent({ row, columns, onSelectRow, onDoubleClick, ControlComponent, ControlComponentProps, controlComponentColSx, }) {
+    const theme = useTheme();
+    const treeTheme = {
+        scheme: "google",
+        author: "seth wright (http://sethawright.com)",
+        base00: theme.vars?.palette.background.paper || theme.palette.background.paper, // background
+        base01: theme.vars?.palette.background.default ||
+            theme.palette.background.default, // lighter background
+        base02: "#e0e0e0", // selection (можно взять divider)
+        base03: theme.vars?.palette.text.disabled ||
+            theme.palette.text.disabled ||
+            "#9e9e9e",
+        base04: theme.vars?.palette.text.secondary || theme.palette.text.secondary,
+        base05: theme.vars?.palette.text.primary || theme.palette.text.primary,
+        base06: "#eeeeee",
+        base07: "#ffffff",
+        base08: theme.vars?.palette.error.main || theme.palette.error.main,
+        base09: theme.vars?.palette.warning.main || theme.palette.warning.main,
+        base0A: theme.vars?.palette.info.main || theme.palette.info.main,
+        base0B: theme.vars?.palette.success.main || theme.palette.success.main,
+        base0C: theme.vars?.palette.secondary.main || theme.palette.secondary.main,
+        base0D: theme.vars?.palette.primary.main || theme.palette.primary.main,
+        base0E: theme.vars?.palette.secondary.main || theme.palette.secondary.main,
+        base0F: "#8d6e63", // обычно brown / deprecated
+    };
+    return (_jsxs(_Fragment, { children: [columns.map((col, idx) => (_jsx(TableCell, { sx: {
+                    ...hiddenTextStyle,
+                    ...col.colSx,
+                    "& > ul": {
+                        overflowX: "auto",
+                    },
+                }, onClick: (e) => {
+                    if (typeof col.onClick !== "undefined") {
+                        if (e.target === e.currentTarget)
+                            col.onClick(row);
+                    }
+                    else {
+                        const selection = window.getSelection();
+                        if (selection && selection.toString().length > 0)
+                            return;
+                        onSelectRow(Object(row).id);
+                    }
+                }, onDoubleClick: typeof onDoubleClick !== "undefined"
+                    ? (_) => onDoubleClick(Object(row).id)
+                    : undefined, children: col.CellContentComponent ? (_jsx(col.CellContentComponent, { ...{ row, ...col.CellContentComponentProps } })) : typeof Object(row)[col.name] === "object" &&
+                    Object(row)[col.name] != null ? (_jsx(JSONTree
+                /*invertTheme={invertTheme}*/ , { 
+                    /*invertTheme={invertTheme}*/ theme: treeTheme, shouldExpandNodeInitially: () => false, data: Object(row)[col.name] })) : col.type === "datetime" ? (prettyDatetime(Object(row)[col.name])) : (Object(row)[col.name] || "N/A") }, idx))), ControlComponent && (_jsx(TableCell, { sx: {
+                    textAlign: "center",
+                    cursor: "default",
+                    p: 0,
+                    ...controlComponentColSx,
+                }, children: _jsx(ControlComponent, { ...{ row, ...ControlComponentProps } }) }))] }));
 }
+export default React.memo(RowContent);