@danikokonn/yarik-frontend-lib 2.0.3-3.legacy.test8 → 2.0.4-9.test4

package/dist/components/RichFilterTextField/RichFilterTextField.js

@@ -1,74 +1,70 @@
-import React, { useEffect, useRef, useState, } from "react";
-import Stack from "@mui/material/Stack";
+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 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 ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import Typography from "@mui/material/Typography";
+import React, { useRef, useState } from "react";
+import { useSnackbarContext } from "../../providers";
+import FilterHistoryMenu from "./FilterHistoryMenu";
 import HintOptionsMenu from "./HintOptionsMenu";
 import { getHints, insertInStrPos } from "./utils";
-import { useSnackbarContext } from "../../providers";
-import { useDebounce } from "../../utils";
-const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, onChange, }) => {
+const RichFilterTextField = ({ filterExpr, filterExprHist: searchHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }) => {
     const { enqueueSnackbar } = useSnackbarContext();
     const [search, setSearch] = useState(filterExpr);
-    const [searchHist, setSearchHist] = useState(filterExprHist);
-    const [searchHistMenuAnchor, setSearchHistMenuAnchor] = useState(null);
-    const [inputAnchor, setInputAnchor] = useState(null);
     const [cursorPos, setCursorPos] = useState(null);
-    const [currentHintOptions, setCurrentHintOptions] = useState(() => new Map());
     const [focusIdx, setFocusIdx] = useState(0);
     const inputRef = useRef(null);
     const textFieldRef = useRef(null);
-    const updateHints = useDebounce(() => {
-        if (cursorPos == null)
-            return;
-        const hints = getHints(search, cursorPos, fields, operators);
-        setCurrentHintOptions(hints);
+    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;
+    if (prevFilterExpr.current !== filterExpr && filterExpr !== search) {
+        setSearch(filterExpr);
+        setCursorPos(null);
         setFocusIdx(0);
-        setInputAnchor(hints?.size > 0 ? textFieldRef.current : null);
-    }, 20);
-    useEffect(() => {
-        if (cursorPos == null)
-            return;
-        if (inputRef.current && cursorPos !== inputRef.current.selectionStart) {
-            inputRef.current.selectionStart = cursorPos;
-            inputRef.current.selectionEnd = cursorPos;
-        }
-        updateHints();
-    }, [cursorPos]);
-    const handleChange = (value) => {
+        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 /*(v: unknown) => setSearchHist(v as string[])*/);
     };
     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) {
@@ -86,16 +82,24 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, on
                     const focusedHint = currentHintOptions.entries().toArray()[focusIdx][0];
                     insertHint(focusedHint);
                 }
+                else {
+                    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);
             }
         }
     };
@@ -105,8 +109,12 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, on
             case "ArrowRight":
             case "Space":
             case "Backspace": {
-                setInputAnchor(null);
-                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": {
@@ -139,57 +147,65 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, on
             }
             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) => handleChange(e.target.value), onClick: () => setCursorPos(inputRef.current?.selectionStart ?? null), onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, slotProps: {
+        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);
+                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);
+                                    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) => {
-                                setSearch("");
-                                onChange("", (v) => setSearchHist(v));
+                                handleChange("");
+                                setCursorPos(null);
+                                setFocusIdx(0);
                                 e.stopPropagation();
                             } },
                             React.createElement(ClearIcon, null)))),
-                    startAdornment: (React.createElement(InputAdornment, { position: "start" },
-                        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(HintOptionsMenu, { inputAnchor: inputAnchor, inputRef: inputRef, textFieldRef: textFieldRef, options: currentHintOptions, focusIdx: focusIdx, onSelectHint: insertHint, onClose: () => {
-                setInputAnchor(null);
                 setCursorPos(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: () => handleChange(el), 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();
-                            enqueueSnackbar("Предустановка фильтра скопирована в буфер обмена", "default");
-                        } },
-                        React.createElement(ContentCopy, { fontSize: "small" })))))))));
+                setFocusIdx(0);
+            } })));
 };
 export default RichFilterTextField;

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

@@ -1,3 +1,4 @@
+import React from "react";
 export interface FilterField {
     /**
      * Название поля. Используется при подстановке. Должно оканчиваться двоеточием
@@ -62,6 +63,9 @@ export default interface RichFilterTextFieldProps {
      * Список операторов фильтрации
      */
     operators: FilterOperator[];
+    instant?: boolean;
+    additionalComponents?: React.JSX.Element[];
     onChange(value: string, onSuccess?: (v: unknown) => void): void;
+    onSelectFromHistory?(value: string, idx: number): void;
 }
 //# sourceMappingURL=RichFilterTextFieldProps.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichFilterTextFieldProps.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/RichFilterTextFieldProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAwB;IAC/C;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB;;OAEG;IACH,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB;;OAEG;IACH,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,GAAG,IAAI,CAAC;CACjE"}
+{"version":3,"file":"RichFilterTextFieldProps.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/RichFilterTextFieldProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAwB;IAC/C;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB;;OAEG;IACH,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB;;OAEG;IACH,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,GAAG,IAAI,CAAC;IAChE,mBAAmB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACxD"}

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;AAepC,eAAO,MAAM,QAAQ,GACnB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,QAAQ,WAAW,EAAE,EACrB,WAAW,cAAc,EAAE,oCAyE5B,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,5 @@
 const getSingleMatch = (token, fields) => {
-    const matchedFields = fields.filter((v) => v.name.startsWith(token));
+    const matchedFields = fields.filter((v) => v.name.toLowerCase().startsWith(token.toLowerCase()));
     if (matchedFields.length !== 1)
         return undefined;
     return matchedFields[0];
@@ -52,7 +52,7 @@ export const getHints = (search, cursorPos, fields, operators) => {
                 if (fieldHasValues && validToken) {
                     return getMapOf(matchedField?.values || []);
                 }
-                return getMapOf(fields.filter((v) => v.name.startsWith(token)));
+                return getMapOf(fields.filter((v) => v.name.toLowerCase().startsWith(token.toLowerCase())));
             }
         }
     }

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

@@ -1,18 +1,34 @@
-import React, { ReactNode } from "react";
 import { SxProps, Theme } from "@mui/material";
+import React, { 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;
+} = {
+    row: T;
 }> {
     row: T;
-    columns: Column<T>[];
+    columns: Column<T, S>[];
     onDoubleClick?(rowId: string | number | null): void;
     onSelectRow(rowId: string | number | null): void;
-    controlComponent?(row: T): ReactNode;
+    ControlComponent?: ComponentType<P>;
+    ControlComponentProps?: Omit<P, "row">;
     controlComponentColSx?: SxProps<Theme>;
 }
-export default function RowContent<T>({ row, columns, onSelectRow, onDoubleClick, controlComponent, controlComponentColSx, }: RowContentProps<T & {
+declare function RowContent<T extends {
     id: string | number;
-}>): React.JSX.Element;
-export {};
+}, P extends {
+    row: T;
+}, S extends {
+    row: T;
+}>({ row, columns, onSelectRow, onDoubleClick, ControlComponent, ControlComponentProps, controlComponentColSx, }: RowContentProps<T, P, S>): React.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;AAEzC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAY,MAAM,eAAe,CAAC;AAGzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,UAAU,eAAe,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CAAE;IAC1D,GAAG,EAAE,CAAC,CAAC;IACP,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,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,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,GAAG;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CAAE,CAAC,qBAiE/C"}
+{"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,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,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,qBAwF1B;wBAIwC,OAAO,UAAU;AAA1D,wBAA2D"}

package/dist/components/SmartTable/RowContent.js

@@ -1,7 +1,7 @@
-import React from "react";
 import { useTheme } from "@mui/material";
 import TableCell from "@mui/material/TableCell";
-import { JSONTree } from 'react-json-tree';
+import React from "react";
+import { JSONTree } from "react-json-tree";
 const hiddenTextStyle = {
     whiteSpace: "nowrap",
     overflow: "hidden",
@@ -9,47 +9,63 @@ const hiddenTextStyle = {
     paddingTop: "0.25rem",
     paddingBottom: "0.25rem",
 };
-export default function RowContent({ row, columns, onSelectRow, onDoubleClick, controlComponent, controlComponentColSx, }) {
+function RowContent({ row, columns, onSelectRow, onDoubleClick, ControlComponent, ControlComponentProps, controlComponentColSx, }) {
     const theme = useTheme();
     const treeTheme = {
-        scheme: 'google',
-        author: 'seth wright (http://sethawright.com)',
-        base00: theme.palette.background.paper, // background
-        base01: theme.palette.background.default, // lighter background
+        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.palette.text.disabled || "#9e9e9e",
-        base04: theme.palette.text.secondary,
-        base05: theme.palette.text.primary,
+        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.palette.error.main,
-        base09: theme.palette.warning.main,
-        base0A: theme.palette.info.main,
-        base0B: theme.palette.success.main,
-        base0C: theme.palette.secondary.main,
-        base0D: theme.palette.primary.main,
-        base0E: theme.palette.secondary.main,
-        base0F: "#8d6e63" // обычно brown / deprecated
+        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 (React.createElement(React.Fragment, null,
         columns.map((col, idx) => (React.createElement(TableCell, { sx: {
                 ...hiddenTextStyle,
                 ...col.colSx,
                 "& > ul": {
-                    overflowX: "auto"
+                    overflowX: "auto",
+                },
+            }, key: idx, 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);
                 }
-            }, key: idx, onClick: (_) => {
-                const selection = window.getSelection();
-                if (selection && selection.toString().length > 0)
-                    return;
-                onSelectRow(row.id);
-            }, onDoubleClick: (_) => (onDoubleClick || (() => { }))(row.id) }, col.cellContentComponent
-            ? col.cellContentComponent(row)
-            : typeof Object(row)[col.name] === "object" && Object(row)[col.name] != null ? (React.createElement(JSONTree /*invertTheme={invertTheme}*/, { theme: treeTheme, shouldExpandNodeInitially: () => false, data: Object(row)[col.name] })) : Object(row)[col.name] || "N/A"))),
-        controlComponent && (React.createElement(TableCell, { sx: {
+            }, onDoubleClick: typeof onDoubleClick !== "undefined"
+                ? (_) => onDoubleClick(Object(row).id)
+                : undefined }, col.CellContentComponent ? (React.createElement(col.CellContentComponent, { ...{ row, ...col.CellContentComponentProps } })) : typeof Object(row)[col.name] === "object" &&
+            Object(row)[col.name] != null ? (React.createElement(JSONTree
+        /*invertTheme={invertTheme}*/ , { 
+            /*invertTheme={invertTheme}*/ theme: treeTheme, shouldExpandNodeInitially: () => false, data: Object(row)[col.name] })) : (Object(row)[col.name] || "N/A")))),
+        ControlComponent && (React.createElement(TableCell, { sx: {
                 textAlign: "center",
                 cursor: "default",
                 p: 0,
                 ...controlComponentColSx,
-            } }, controlComponent(row)))));
+            } },
+            React.createElement(ControlComponent, { ...{ row, ...ControlComponentProps } })))));
 }
+// Memoize to prevent re-renders when row/columns/props haven't changed
+// This is critical for scroll performance with heavy cellContentComponent renders
+export default React.memo(RowContent);

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

@@ -1,4 +1,12 @@
 import React from "react";
 import SmartTableProps from "./SmartTableProps";
-export default function SmartTable<T>({ rows, columns, pageN, numPages, perPage, loading, minWidth, width, rowStyles, selectable, selectedRow, sx, disablePerPageSelector, globalSearch, columnAutoWidth, globalSearchComponent, ContentWrapper, onRowDoubleClick, onSelectRow, controlComponent: ControlComponent, onToggleSort, onInputSearch, onPageSelect, onChangePerPage, controlComponentColSx, }: SmartTableProps<T>): React.JSX.Element;
+export default function SmartTable<T extends {
+    id: string | number;
+} = {
+    id: string | number;
+}, P extends {
+    row: T;
+} = {
+    row: T;
+}>({ rows, columns, pageN, numPages, perPage, loading, minWidth, width, rowStyles, selectable, selectedRow, sx, disablePerPageSelector, globalSearch, columnAutoWidth, error, globalSearchComponent, ContentWrapper, ControlComponent, ControlComponentProps, virtuosoRef, controlComponentColSx, perPageOptions, onToggleSort, onInputSearch, onPageSelect, onChangePerPage, onSelectRow, onRowDoubleClick, }: SmartTableProps<T, P>): React.JSX.Element;
 //# sourceMappingURL=SmartTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/SmartTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAiBxD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAMhD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,EAAE,EACpC,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,EAAE,EACF,sBAAsB,EACtB,YAAY,EACZ,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,qBAAqB,GACtB,EAAE,eAAe,CAAC,CAAC,CAAC,qBAgQpB"}
+{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/SmartTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAgFhD,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,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,EACA,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,EAAE,EACF,sBAAsB,EACtB,YAAY,EACZ,eAAe,EACf,KAAK,EACL,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAgB,GACjB,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,qBAiUvB"}