nntc-ui 0.0.80 → 0.0.82

package/index.css

@@ -1009,6 +1009,36 @@
 .input_outlined > .input_input:focus {
   outline-color: var(--theme-focus);
 }
+.input_fileInput {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
+}
+.input_fileDisplay {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.input_fileName {
+  flex: 1;
+  overflow: hidden;
+  color: var(--theme-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.input_fileName.input_placeholder {
+  color: var(--theme-text-inactive);
+}
+.input_fileDisplay > .input_attachIcon {
+  flex-shrink: 0;
+  margin-left: 8px;
+  color: var(--theme-text-secondary);
+}
 
 /* src/components/common/SearchInput/searchInput.module.css */
 .searchInput_root {
@@ -1638,12 +1668,6 @@
 .virtualTable_tableContainer {
   height: calc(100% + 16px);
 }
-.virtualTable_root.virtualTable_small .virtualTable_table {
-  font-size: var(--text-body2-size);
-}
-.virtualTable_root.virtualTable_medium .virtualTable_table {
-  font-size: var(--text-body1-size);
-}
 .virtualTable_table {
   position: relative;
   color: var(--theme-text-primary);
@@ -1752,6 +1776,18 @@
 .virtualTable_marginLeftChanging {
   background-color: var(--theme-table-header);
 }
+.virtualTable_sticky::before,
+.virtualTable_marginLeftChanging::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-color: var(--theme-overlay-4);
+}
 .virtualTable_rightBorder {
   position: absolute;
   top: 0;
@@ -1792,8 +1828,18 @@
   justify-content: center;
   text-align: center;
 }
+.virtualTable_viewCell.virtualTable_success {
+  color: var(--theme-success);
+  background-color: var(--theme-table-success);
+}
 .virtualTable_viewCell.virtualTable_error {
+  color: var(--theme-error);
   background-color: var(--theme-table-error);
+}
+.virtualTable_viewCell.virtualTable_editable.virtualTable_success {
+  border-color: var(--theme-success);
+}
+.virtualTable_viewCell.virtualTable_editable.virtualTable_error {
   border-color: var(--theme-error);
 }
 .virtualTable_viewSpan {
@@ -1847,6 +1893,18 @@
 .virtualTable_rowButtonTrigger {
   height: auto !important;
 }
+.virtualTable_root.virtualTable_medium .virtualTable_table {
+  font-size: var(--text-body2-size);
+  line-height: var(--text-body2-height);
+}
+.virtualTable_root.virtualTable_small .virtualTable_table {
+  font-size: calc(var(--text-body2-size) - 2px);
+  line-height: calc(var(--text-body2-height) - 2px);
+}
+.virtualTable_root.virtualTable_small .virtualTable_th {
+  font-size: calc(var(--text-body2-size) - 4px);
+  line-height: calc(var(--text-body2-height) - 4px);
+}
 
 /* src/components/view/VirtualTable/ui/HeaderDropdown/headerDropdown.module.css */
 .headerDropdown_root {

package/index.d.ts

@@ -264,7 +264,8 @@ interface TableCell {
     payload?: {
         [key: string]: string;
     };
-    error?: string;
+    tooltip?: string;
+    fill?: 'error' | 'success';
 }
 
 interface TableRow {
@@ -311,7 +312,7 @@ interface TableColumn {
     width?: number;
     headerAlign?: ColumnAlign;
     rowsAlign?: ColumnAlign;
-    valueFormat?: (value: string) => string;
+    valueFormat?: (value: string | number | undefined) => string;
     showInModal?: boolean;
     onClick?: (payload: {
         [key: string]: string;
@@ -339,7 +340,7 @@ interface Props$8 {
     onChangeCell?: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => void;
     cellWidth?: (columnIndex: number) => number;
     rowButtons?: ((original: TableRow) => AdditionalButton[]) | undefined;
-    fixedColumnsCount?: 0 | 1 | 2;
+    fixedColumnsCount?: number;
     headerRowHeight?: number[];
     bodyRowHeight?: number;
     rowActionWidth?: number;

package/index.js

@@ -2,6 +2,7 @@ import {
   AddIcon,
   ArrowDropDownIcon,
   ArrowDropUpIcon,
+  AttachIcon,
   CheckboxDeselectedIcon,
   CheckboxIcon,
   CheckboxSeveralIcon,
@@ -722,7 +723,7 @@ function Select(props) {
     icon: icon7,
     fullWidth: fullWidth2,
     label: label8,
-    placeholder,
+    placeholder: placeholder2,
     items: items2,
     defaultValue,
     onValueChange,
@@ -797,7 +798,7 @@ function Select(props) {
                   ref: mergeRefs2([inputRef, ref]),
                   id: inputId,
                   className: classnames6(input2, classes?.input),
-                  placeholder,
+                  placeholder: placeholder2,
                   ...inputProps,
                   value: selectedItem?.name ?? "",
                   onChange: () => {
@@ -1350,7 +1351,7 @@ function DateTime(props) {
     valueType = "date",
     componentSize = "medium",
     fullWidth: fullWidth2,
-    placeholder,
+    placeholder: placeholder2,
     defaultValues,
     values,
     onClear,
@@ -1406,7 +1407,7 @@ function DateTime(props) {
           {
             ref: mergeRefs3([inputRef, ref]),
             className: classnames7(input3, classes?.input),
-            placeholder,
+            placeholder: placeholder2,
             ...inputProps,
             value: stateValues?.[0] ? isPeriod && stateValues[1] ? `${dayjs3(stateValues[0]).format(valueType === "year" ? "YYYY" : "DD.MM.YYYY")} - ${dayjs3(
               stateValues[1]
@@ -1502,7 +1503,7 @@ var ColorPicker = (props) => {
     fullWidth: fullWidth2,
     label: label8,
     classes,
-    placeholder,
+    placeholder: placeholder2,
     ref,
     disabled: disabled2,
     defaultValue,
@@ -1552,7 +1553,7 @@ var ColorPicker = (props) => {
               ref: mergeRefs4([inputRef, ref]),
               id: inputId,
               className: classNames3(input4, classes?.input),
-              placeholder,
+              placeholder: placeholder2,
               ...inputProps,
               value: color,
               onChange: () => {
@@ -1591,18 +1592,23 @@ var ColorPicker = (props) => {
 
 // src/components/common/Input/Input.tsx
 import classnames8 from "classnames";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef5, useState as useState7 } from "react";
 import { mergeRefs as mergeRefs5 } from "react-merge-refs";
 import { v4 as uuidv44 } from "uuid";
 
 // src/components/common/Input/input.module.css
 var input_exports = {};
 __export(input_exports, {
+  attachIcon: () => attachIcon,
   default: () => input_default,
+  fileDisplay: () => fileDisplay,
+  fileInput: () => fileInput,
+  fileName: () => fileName,
   input: () => input5,
   label: () => label4,
   medium: () => medium6,
   outlined: () => outlined5,
+  placeholder: () => placeholder,
   root: () => root9,
   small: () => small6,
   wrapper: () => wrapper3
@@ -1614,6 +1620,11 @@ var label4 = "input_label";
 var wrapper3 = "input_wrapper";
 var input5 = "input_input";
 var outlined5 = "input_outlined";
+var fileInput = "input_fileInput";
+var fileDisplay = "input_fileDisplay";
+var fileName = "input_fileName";
+var placeholder = "input_placeholder";
+var attachIcon = "input_attachIcon";
 var input_default = {
   root: root9,
   medium: medium6,
@@ -1621,11 +1632,16 @@ var input_default = {
   label: label4,
   wrapper: wrapper3,
   input: input5,
-  outlined: outlined5
+  outlined: outlined5,
+  fileInput,
+  fileDisplay,
+  fileName,
+  placeholder,
+  attachIcon
 };
 
 // src/components/common/Input/Input.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var Input = (props) => {
   const {
     variant = "outlined",
@@ -1633,13 +1649,22 @@ var Input = (props) => {
     fullWidth: fullWidth2,
     label: label8,
     classes,
-    placeholder,
+    placeholder: placeholder2,
     ref,
     id,
+    type,
+    onChange,
     ...inputProps
   } = props;
   const inputRef = useRef5(null);
+  const [fileName2, setFileName] = useState7("");
   const inputId = id ?? uuidv44();
+  const isFile = type === "file";
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    setFileName(file?.name ?? "");
+    onChange?.(e);
+  };
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -1658,14 +1683,39 @@ var Input = (props) => {
             children: label8
           }
         ),
-        /* @__PURE__ */ jsx16("div", { className: classnames8(wrapper3, input_exports[variant], classes?.wrapper), children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx16("div", { className: classnames8(wrapper3, input_exports[variant], classes?.wrapper), children: isFile ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
+          /* @__PURE__ */ jsx16(
+            "input",
+            {
+              ref: mergeRefs5([inputRef, ref]),
+              id: inputId,
+              className: fileInput,
+              type: "file",
+              onChange: handleFileChange,
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsxs9(
+            "div",
+            {
+              className: classnames8(input5, fileDisplay, classes?.input),
+              onClick: () => inputRef.current?.click(),
+              children: [
+                /* @__PURE__ */ jsx16("span", { className: classnames8(fileName, !fileName2 && placeholder), children: fileName2 || placeholder2 }),
+                /* @__PURE__ */ jsx16(AttachIcon, { size: 20, className: attachIcon })
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx16(
           "input",
           {
             ref: mergeRefs5([inputRef, ref]),
             id: inputId,
             className: classnames8(input5, classes?.input),
-            placeholder,
+            placeholder: placeholder2,
+            type,
             autoComplete: "off",
+            onChange,
             ...inputProps
           }
         ) })
@@ -1719,7 +1769,7 @@ function SearchInput(props) {
     componentSize = "medium",
     disableIcon,
     fullWidth: fullWidth2,
-    placeholder,
+    placeholder: placeholder2,
     classes,
     ref,
     ...inputProps
@@ -1755,7 +1805,7 @@ function SearchInput(props) {
           {
             ref: mergeRefs6([inputRef, ref]),
             className: classnames9(input6, classes?.input),
-            placeholder: placeholder ?? t("\u041F\u043E\u0438\u0441\u043A..."),
+            placeholder: placeholder2 ?? t("\u041F\u043E\u0438\u0441\u043A..."),
             ...inputProps
           }
         )
@@ -1798,7 +1848,7 @@ import {
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo5,
   useRef as useRef7,
-  useState as useState8
+  useState as useState9
 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { mergeRefs as mergeRefs7 } from "react-merge-refs";
@@ -1881,7 +1931,7 @@ import { useCallback as useCallback7, useMemo as useMemo4 } from "react";
 
 // src/components/common/Checklist/Checklist.tsx
 import classnames11 from "classnames";
-import { useCallback as useCallback6, useMemo as useMemo3, useState as useState7 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo3, useState as useState8 } from "react";
 
 // src/components/common/Checklist/checklist.module.css
 var root13 = "checklist_root";
@@ -1903,11 +1953,11 @@ var filterItems = (items2, filterText, selectedItems) => {
 };
 
 // src/components/common/Checklist/Checklist.tsx
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function Checklist(props) {
   const { items: items2, selected: selected5, disableSearch, isDisabled, actionWithSelected, onChangeItem, classes } = props;
   const { t } = useTranslation();
-  const [filterSubstring, setFilterSubstring] = useState7("");
+  const [filterSubstring, setFilterSubstring] = useState8("");
   const filteredItems = useMemo3(() => {
     return filterItems(items2, filterSubstring, selected5);
   }, [items2, filterSubstring, selected5]);
@@ -1962,7 +2012,7 @@ function Checklist(props) {
       }
     ),
     /* @__PURE__ */ jsxs11("div", { className: classnames11(scrolled, "styledScroll", classes?.scrolled), children: [
-      selectedItemsList.length > 0 && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      selectedItemsList.length > 0 && /* @__PURE__ */ jsxs11(Fragment4, { children: [
         /* @__PURE__ */ jsxs11("div", { className: classnames11(actionWrap, classes?.actionWrap), children: [
           /* @__PURE__ */ jsx19(Typography, { className: classnames11(classes?.typography), children: t("\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0435") }),
           /* @__PURE__ */ jsx19(
@@ -2086,7 +2136,7 @@ function MultiSelect(props) {
     icon: icon7,
     fullWidth: fullWidth2,
     label: label8,
-    placeholder,
+    placeholder: placeholder2,
     items: items2,
     onValueChange,
     selected: selected5,
@@ -2103,8 +2153,8 @@ function MultiSelect(props) {
   const wrapperRef = useRef7(null);
   const inputRef = useRef7(null);
   const popoverTargetRef = useRef7(null);
-  const [isPopoverOpen, setIsPopoverOpen] = useState8(false);
-  const [popoverWidth, setPopoverWidth] = useState8();
+  const [isPopoverOpen, setIsPopoverOpen] = useState9(false);
+  const [popoverWidth, setPopoverWidth] = useState9();
   useLayoutEffect2(() => {
     const element = wrapperRef.current;
     if (!element) {
@@ -2186,7 +2236,7 @@ function MultiSelect(props) {
                   ref: mergeRefs7([inputRef, ref]),
                   id: inputId,
                   className: classnames12(input7, classes?.input),
-                  placeholder,
+                  placeholder: placeholder2,
                   ...inputProps,
                   value: title2,
                   onClick: inputClickHandler,
@@ -2290,11 +2340,11 @@ function Layout(props) {
 
 // src/components/navigation/Tabs/Tabs.tsx
 import classnames17 from "classnames";
-import { useEffect as useEffect5, useState as useState11 } from "react";
+import { useEffect as useEffect5, useState as useState12 } from "react";
 
 // src/components/view/Tooltip/Tooltip.tsx
 import classnames16 from "classnames";
-import { useRef as useRef8, useState as useState10 } from "react";
+import { useRef as useRef8, useState as useState11 } from "react";
 
 // src/components/view/Tooltip/tooltip.module.css
 var tooltip_exports = {};
@@ -2432,7 +2482,7 @@ import {
   useInteractions as useInteractions2,
   useRole as useRole2
 } from "@floating-ui/react";
-import { useMemo as useMemo6, useState as useState9 } from "react";
+import { useMemo as useMemo6, useState as useState10 } from "react";
 function useTooltip(props = {}) {
   const {
     initialOpen = false,
@@ -2443,7 +2493,7 @@ function useTooltip(props = {}) {
     arrowRef,
     root: root23
   } = props;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState9(initialOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState10(initialOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
   const data = useFloating2({
@@ -2523,7 +2573,7 @@ var TooltipTrigger = forwardRef6(
 );
 
 // src/components/view/Tooltip/Tooltip.tsx
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function Tooltip(props) {
   const {
     label: label8,
@@ -2537,10 +2587,10 @@ function Tooltip(props) {
     children: children2,
     classes
   } = props;
-  const [showTooltip, setShowTooltip] = useState10(false);
+  const [showTooltip, setShowTooltip] = useState11(false);
   const arrowRef = useRef8(null);
   if (!label8) {
-    return children2 ? /* @__PURE__ */ jsx27(Fragment4, { children: children2 }) : null;
+    return children2 ? /* @__PURE__ */ jsx27(Fragment5, { children: children2 }) : null;
   }
   if (!children2) {
     return null;
@@ -2654,8 +2704,8 @@ function Tabs(props) {
     value,
     classes
   } = props;
-  const [isMounted, setIsMounted] = useState11(false);
-  const [selectedTab, setSelectedTab] = useState11(defaultSelected);
+  const [isMounted, setIsMounted] = useState12(false);
+  const [selectedTab, setSelectedTab] = useState12(defaultSelected);
   const currentValue = useExternalState ? value : selectedTab;
   const handleClick = (item3) => () => {
     if (item3.isDisabled) {
@@ -2764,14 +2814,14 @@ import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import classnames22 from "classnames";
 import dayjs2 from "dayjs";
 import {
-  Fragment as Fragment8,
+  Fragment as Fragment9,
   forwardRef as forwardRef8,
   useCallback as useCallback11,
   useEffect as useEffect8,
   useImperativeHandle,
   useMemo as useMemo8,
   useRef as useRef11,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { v4 as uuidv46 } from "uuid";
 
@@ -2785,7 +2835,7 @@ var defaultRowHeight = 32;
 
 // src/components/view/VirtualTable/ui/DefaultColumn/DefaultColumn.tsx
 import classnames18 from "classnames";
-import { useEffect as useEffect6, useRef as useRef10, useState as useState12 } from "react";
+import { useEffect as useEffect6, useRef as useRef10, useState as useState13 } from "react";
 
 // src/components/view/Modal/Modal.tsx
 import { forwardRef as forwardRef7, useRef as useRef9 } from "react";
@@ -2844,6 +2894,7 @@ __export(virtualTable_exports, {
   bottomBorder: () => bottomBorder,
   clickable: () => clickable,
   default: () => virtualTable_default,
+  editable: () => editable,
   error: () => error2,
   evenRow: () => evenRow,
   firstThRow: () => firstThRow,
@@ -2858,6 +2909,7 @@ __export(virtualTable_exports, {
   showInModal: () => showInModal,
   small: () => small11,
   sticky: () => sticky,
+  success: () => success2,
   table: () => table,
   tableContainer: () => tableContainer,
   td: () => td,
@@ -2875,9 +2927,7 @@ __export(virtualTable_exports, {
 });
 var root17 = "virtualTable_root";
 var tableContainer = "virtualTable_tableContainer";
-var small11 = "virtualTable_small";
 var table = "virtualTable_table";
-var medium11 = "virtualTable_medium";
 var th = "virtualTable_th";
 var bordersAll = "virtualTable_bordersAll";
 var bordersHorizontal = "virtualTable_bordersHorizontal";
@@ -2900,7 +2950,9 @@ var marginLeftChanging = "virtualTable_marginLeftChanging";
 var rightBorder = "virtualTable_rightBorder";
 var bottomBorder = "virtualTable_bottomBorder";
 var viewCell = "virtualTable_viewCell";
+var success2 = "virtualTable_success";
 var error2 = "virtualTable_error";
+var editable = "virtualTable_editable";
 var viewSpan = "virtualTable_viewSpan";
 var showInModal = "virtualTable_showInModal";
 var clickable = "virtualTable_clickable";
@@ -2909,12 +2961,12 @@ var verticalAlignFlexStart = "virtualTable_verticalAlignFlexStart";
 var verticalAlignCenter = "virtualTable_verticalAlignCenter";
 var verticalAlignFlexEnd = "virtualTable_verticalAlignFlexEnd";
 var rowButtonTrigger = "virtualTable_rowButtonTrigger";
+var medium11 = "virtualTable_medium";
+var small11 = "virtualTable_small";
 var virtualTable_default = {
   root: root17,
   tableContainer,
-  small: small11,
   table,
-  medium: medium11,
   th,
   bordersAll,
   bordersHorizontal,
@@ -2937,7 +2989,9 @@ var virtualTable_default = {
   rightBorder,
   bottomBorder,
   viewCell,
+  success: success2,
   error: error2,
+  editable,
   viewSpan,
   showInModal,
   clickable,
@@ -2945,19 +2999,21 @@ var virtualTable_default = {
   verticalAlignFlexStart,
   verticalAlignCenter,
   verticalAlignFlexEnd,
-  rowButtonTrigger
+  rowButtonTrigger,
+  medium: medium11,
+  small: small11
 };
 
 // src/components/view/VirtualTable/ui/DefaultColumn/DefaultColumn.tsx
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var DefaultColumn = {
   cell: ({ getValue, row: { index, original }, column: { id, columnDef }, table: table2 }) => {
     const initialValue = getValue();
     const { meta } = columnDef;
     const tableMeta = table2.options.meta;
-    const [value, setValue] = useState12(initialValue);
-    const [isEdit, setIsEdit] = useState12(false);
-    const [showModal, setShowModal] = useState12(false);
+    const [value, setValue] = useState13(initialValue);
+    const [isEdit, setIsEdit] = useState13(false);
+    const [showModal, setShowModal] = useState13(false);
     const closeModalRef = useRef10();
     closeModalRef.current = () => {
       setShowModal(false);
@@ -2974,39 +3030,54 @@ var DefaultColumn = {
       const onChange = (e) => {
         setValue(e.target.value);
       };
-      return /* @__PURE__ */ jsx30(Tooltip, { label: original[id]?.error ?? "", alertType: "error", children: additionalViewResult?.edit !== null && additionalViewResult?.edit !== void 0 ? additionalViewResult.edit(onChange, onBlur) : /* @__PURE__ */ jsx30(Fragment5, { children: /* @__PURE__ */ jsx30("input", { onChange, onBlur, value: value ?? "", autoFocus: true }) }) });
+      return /* @__PURE__ */ jsx30(
+        Tooltip,
+        {
+          label: original[id]?.tooltip ?? "",
+          alertType: original[id]?.fill === "error" ? "error" : original[id]?.fill === "success" ? "success" : "default",
+          children: additionalViewResult?.edit !== null && additionalViewResult?.edit !== void 0 ? additionalViewResult.edit(onChange, onBlur) : /* @__PURE__ */ jsx30(Fragment6, { children: /* @__PURE__ */ jsx30("input", { onChange, onBlur, value: value ?? "", autoFocus: true }) })
+        }
+      );
     }
-    const shownValue = additionalViewResult?.view !== null && additionalViewResult?.view !== void 0 ? additionalViewResult.view : meta?.valueFormat ? meta.valueFormat(initialValue?.toString() ?? "") : meta?.toFixed !== void 0 && !Number.isNaN(parseFloat(initialValue)) ? parseFloat(Number(initialValue).toFixed(meta.toFixed)) : initialValue;
-    return /* @__PURE__ */ jsx30(Tooltip, { label: original[id]?.error, alertType: "error", children: /* @__PURE__ */ jsxs16(
-      "div",
+    const shownValue = additionalViewResult?.view !== null && additionalViewResult?.view !== void 0 ? additionalViewResult.view : meta?.valueFormat ? meta.valueFormat(initialValue) : meta?.toFixed !== void 0 && !Number.isNaN(parseFloat(initialValue)) ? parseFloat(Number(initialValue).toFixed(meta.toFixed)) : initialValue;
+    return /* @__PURE__ */ jsx30(
+      Tooltip,
       {
-        className: classnames18(
-          viewCell,
-          !!meta?.rowsAlign ? virtualTable_exports[`align${meta?.rowsAlign}`] : void 0,
-          meta?.showInModal ? showInModal : void 0,
-          meta?.onClick && original[id]?.payload ? clickable : void 0,
-          original[id]?.error ? error2 : void 0,
-          !!meta?.verticalAlign ? virtualTable_exports[`verticalAlign${meta?.verticalAlign}`] : void 0
-        ),
-        onClick: meta?.editable ? () => {
-          setIsEdit(true);
-        } : meta?.showInModal ? () => {
-          setShowModal(true);
-        } : meta?.onClick && original[id]?.payload ? () => meta?.onClick?.(original[id]?.payload ?? {}) : void 0,
-        children: [
-          /* @__PURE__ */ jsx30("span", { className: viewSpan, children: shownValue }),
-          showModal && /* @__PURE__ */ jsx30(
-            Modal,
-            {
-              root: tableMeta?.tableContainerRef?.current,
-              open: showModal,
-              onClose: () => closeModalRef.current?.(),
-              children: /* @__PURE__ */ jsx30(Surface, { type: "panel", children: /* @__PURE__ */ jsx30("div", { className: modalContent, children: shownValue }) })
-            }
-          )
-        ]
+        label: original[id]?.tooltip ?? "",
+        alertType: original[id]?.fill === "error" ? "error" : original[id]?.fill === "success" ? "success" : "default",
+        children: /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            className: classnames18(
+              viewCell,
+              !!meta?.rowsAlign ? virtualTable_exports[`align${meta?.rowsAlign}`] : void 0,
+              meta?.showInModal ? showInModal : void 0,
+              meta?.onClick && original[id]?.payload ? clickable : void 0,
+              !!original[id]?.fill ? virtualTable_exports[original[id].fill] : void 0,
+              !!meta?.editable ? editable : void 0,
+              !!meta?.verticalAlign ? virtualTable_exports[`verticalAlign${meta?.verticalAlign}`] : void 0
+            ),
+            onClick: meta?.editable ? () => {
+              setIsEdit(true);
+            } : meta?.showInModal ? () => {
+              setShowModal(true);
+            } : meta?.onClick && original[id]?.payload ? () => meta?.onClick?.(original[id]?.payload ?? {}) : void 0,
+            children: [
+              /* @__PURE__ */ jsx30("span", { className: viewSpan, children: shownValue }),
+              showModal && /* @__PURE__ */ jsx30(
+                Modal,
+                {
+                  root: tableMeta?.tableContainerRef?.current,
+                  open: showModal,
+                  onClose: () => closeModalRef.current?.(),
+                  children: /* @__PURE__ */ jsx30(Surface, { type: "panel", children: /* @__PURE__ */ jsx30("div", { className: modalContent, children: shownValue }) })
+                }
+              )
+            ]
+          }
+        )
       }
-    ) });
+    );
   }
 };
 
@@ -3046,7 +3117,7 @@ var alphanumericCompare = (a, b) => {
 
 // src/components/view/VirtualTable/ui/DateFiltration/DateFiltration.tsx
 import classnames19 from "classnames";
-import { useCallback as useCallback9, useEffect as useEffect7, useState as useState13 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect7, useState as useState14 } from "react";
 
 // src/components/view/VirtualTable/ui/DateFiltration/dateFiltration.module.css
 var root19 = "dateFiltration_root";
@@ -3055,7 +3126,7 @@ var root19 = "dateFiltration_root";
 import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 function DateFiltration(props) {
   const { defaultValues = [void 0, void 0], actionWithSelected } = props;
-  const [values, setValues] = useState13(defaultValues);
+  const [values, setValues] = useState14(defaultValues);
   const handleChangeDates = (newValues) => {
     setValues(newValues);
   };
@@ -3095,7 +3166,7 @@ function DateFiltration(props) {
 
 // src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx
 import classnames20 from "classnames";
-import { useCallback as useCallback10, useState as useState14 } from "react";
+import { useCallback as useCallback10, useState as useState15 } from "react";
 
 // src/components/view/VirtualTable/ui/NumberFiltration/numberFiltration.module.css
 var root20 = "numberFiltration_root";
@@ -3104,7 +3175,7 @@ var inputsContainer = "numberFiltration_inputsContainer";
 var input8 = "numberFiltration_input";
 
 // src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx
-import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var items = [
   { type: "item", name: "\u041E\u0442 \u2014 \u0434\u043E", value: "range" },
   { type: "item", name: "\u0411\u043E\u043B\u044C\u0448\u0435", value: "more" },
@@ -3113,10 +3184,10 @@ var items = [
 ];
 function NumberFiltration(props) {
   const { defaultValues = [-Infinity, Infinity], actionWithSelected } = props;
-  const [selectedItem, setSelectedItem] = useState14(
+  const [selectedItem, setSelectedItem] = useState15(
     defaultValues[0] === -Infinity && defaultValues[1] === Infinity ? items[0] : defaultValues[0] === defaultValues[1] ? items[3] : defaultValues[0] === -Infinity ? items[2] : defaultValues[1] === Infinity ? items[1] : items[0]
   );
-  const [values, setValues] = useState14(defaultValues);
+  const [values, setValues] = useState15(defaultValues);
   const handleSelect = (item3) => {
     if (!!item3) {
       const newValues = [...values];
@@ -3162,7 +3233,7 @@ function NumberFiltration(props) {
         tabIndex: -1
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: classnames20(inputsContainer), children: selectedItem.value === "range" ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
+    /* @__PURE__ */ jsx32("div", { className: classnames20(inputsContainer), children: selectedItem.value === "range" ? /* @__PURE__ */ jsxs18(Fragment7, { children: [
       /* @__PURE__ */ jsx32(
         Input,
         {
@@ -3238,7 +3309,7 @@ function NumberFiltration(props) {
 }
 
 // src/components/view/VirtualTable/ui/HeaderDropdown/HeaderDropdown.tsx
-import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function HeaderDropdown(props) {
   const {
     headerMeta: {
@@ -3266,7 +3337,7 @@ function HeaderDropdown(props) {
   const filterItems2 = useMemo7(() => {
     const checklistItems = rows.map(
       (i) => ({
-        name: i[headerResultName] ? valueFormat ? valueFormat(i[headerResultName].value?.toString() || "") : toFixed !== void 0 && !Number.isNaN(parseFloat(i[headerResultName].value)) ? parseFloat(Number(i[headerResultName].value).toFixed(toFixed)).toString() : i[headerResultName].value?.toString() || "< \u043D\u0435\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F >" : "< \u043D\u0435\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F >",
+        name: i[headerResultName] ? valueFormat ? valueFormat(i[headerResultName].value) : toFixed !== void 0 && !Number.isNaN(parseFloat(i[headerResultName].value)) ? parseFloat(Number(i[headerResultName].value).toFixed(toFixed)).toString() : i[headerResultName].value?.toString() || "< \u043D\u0435\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F >" : "< \u043D\u0435\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F >",
         value: i[headerResultName]?.value?.toString() || ""
       })
     ).sort((a, b) => {
@@ -3395,7 +3466,7 @@ function HeaderDropdown(props) {
         placement: "bottom-end",
         wrapTrigger: true,
         root: containerRef,
-        description: /* @__PURE__ */ jsxs19(Fragment7, { children: [
+        description: /* @__PURE__ */ jsxs19(Fragment8, { children: [
           filtrationByNumber && /* @__PURE__ */ jsx33(NumberFiltration, { defaultValues: filterNumbers, actionWithSelected: actionWithSelectedNumbers }),
           filtrationByDate && /* @__PURE__ */ jsx33(DateFiltration, { defaultValues: filterDates, actionWithSelected: actionWithSelectedDates }),
           filtrationByValue && /* @__PURE__ */ jsx33("div", { className: classnames21(checklistWrap), children: /* @__PURE__ */ jsx33(
@@ -3552,7 +3623,7 @@ var recursiveSort = (items2, sortBy) => {
 };
 
 // src/components/view/VirtualTable/VirtualTable.tsx
-import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var VirtualTable = forwardRef8((props, ref) => {
   const {
     rows,
@@ -3581,8 +3652,8 @@ var VirtualTable = forwardRef8((props, ref) => {
     showRowsNumbers
   } = props;
   const fixedWithNumbersCount = fixedColumnsCount + (showRowsNumbers ? 1 : 0);
-  const [filterBy, setFilterBy] = useState15(globalFilters ?? []);
-  const [sortBy, setSortBy] = useState15([...globalSorts ?? [], { columnName: "isNew", direction: "desc" }]);
+  const [filterBy, setFilterBy] = useState16(globalFilters ?? []);
+  const [sortBy, setSortBy] = useState16([...globalSorts ?? [], { columnName: "isNew", direction: "desc" }]);
   const tableContainerRef = useRef11(null);
   const rowNumberColumnId = useMemo8(() => showRowsNumbers ? `rowNumber_${uuidv46()}` : null, [showRowsNumbers]);
   const memoizedColumns = useMemo8(() => {
@@ -3755,6 +3826,19 @@ var VirtualTable = forwardRef8((props, ref) => {
   const virtualRows = rowVirtualizer.getVirtualItems();
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const lastVirtualColumnIndex = virtualColumns[virtualColumns.length - 1]?.index;
+  const renderHeaderNode = (header2) => {
+    const metaLabel = header2.column.columnDef.meta?.label;
+    if (typeof metaLabel === "string") {
+      const headerLines = metaLabel.split(/\r\n|\\r\\n|\n|\\n/);
+      if (headerLines.length > 1) {
+        return /* @__PURE__ */ jsx34(Fragment10, { children: headerLines.map((line, index) => /* @__PURE__ */ jsxs20(Fragment9, { children: [
+          line,
+          index < headerLines.length - 1 && /* @__PURE__ */ jsx34("br", {})
+        ] }, `${header2.id}_${index}`)) });
+      }
+    }
+    return flexRender(header2.column.columnDef.header, header2.getContext());
+  };
   const [before, after] = virtualColumns.length > 0 ? [
     fixedWithNumbersCount && virtualColumns[fixedWithNumbersCount].index !== fixedWithNumbersCount ? virtualColumns[fixedWithNumbersCount].start - fixedColumnsWidth : virtualColumns[0].start,
     columnsTotalSize - virtualColumns[virtualColumns.length - 1].end
@@ -3791,7 +3875,6 @@ var VirtualTable = forwardRef8((props, ref) => {
                     position: "sticky",
                     top: 0,
                     zIndex: 2
-                    // marginLeft: 1,
                   },
                   children: headerGroups.map((headerGroup, hgi) => {
                     const innerCell = (header2) => {
@@ -3820,7 +3903,7 @@ var VirtualTable = forwardRef8((props, ref) => {
                                 !!headerMeta?.headerAlign ? virtualTable_exports[`align${headerMeta?.headerAlign}`] : alignLeft
                               ),
                               children: [
-                                flexRender(header2.column.columnDef.header, header2.getContext()),
+                                renderHeaderNode(header2),
                                 afterNode
                               ]
                             }
@@ -3833,12 +3916,12 @@ var VirtualTable = forwardRef8((props, ref) => {
                             label6,
                             !!headerMeta?.headerAlign ? virtualTable_exports[`align${headerMeta?.headerAlign}`] : alignLeft
                           ),
-                          children: flexRender(header2.column.columnDef.header, header2.getContext())
+                          children: renderHeaderNode(header2)
                         }
                       ) });
                     };
-                    return /* @__PURE__ */ jsxs20(Fragment8, { children: [
-                      [...Array(fixedWithNumbersCount)].map((_, index) => {
+                    return /* @__PURE__ */ jsxs20(Fragment9, { children: [
+                      [...Array(fixedWithNumbersCount)].map((_a, index) => {
                         const header2 = headerGroup.headers[index];
                         const nextHorizontalHeaders = getNextHorizontalHeaders(
                           headerGroup.headers,
@@ -3861,7 +3944,10 @@ var VirtualTable = forwardRef8((props, ref) => {
                               zIndex: 3,
                               width: `${columnsEstimateSize(index)}px`,
                               height: `${headerGroupHeight[hgi]}px`,
-                              transform: `translateX(${index > 0 ? columnsEstimateSize(index - 1) : 0}px) translateY(${headerGroupY(hgi)}px)`
+                              transform: `translateX(${Array.from({ length: index }, (_, i) => columnsEstimateSize(i)).reduce(
+                                (sum, w) => sum + w,
+                                0
+                              )}px) translateY(${headerGroupY(hgi)}px)`
                             },
                             children: innerCell(header2)
                           },
@@ -3906,7 +3992,7 @@ var VirtualTable = forwardRef8((props, ref) => {
                                 width: `${thWidth}px`,
                                 zIndex,
                                 height: `${thHeight}px`,
-                                transform: `translateX(${column.start + (!!fixedWithNumbersCount ? -2 : 0)}px) translateY(${translateY}px)`,
+                                transform: `translateX(${column.start + (!!fixedWithNumbersCount ? -1 : 0)}px) translateY(${translateY}px)`,
                                 borderTop: borders !== "none" && translateY === 0 ? "1px solid var(--border-color)" : void 0
                               },
                               children: innerCell(header2)
@@ -3962,7 +4048,7 @@ var VirtualTable = forwardRef8((props, ref) => {
                             style: {
                               ...isSticky && {
                                 left: virtualCol.start,
-                                marginLeft: -1
+                                marginLeft: virtualCol.index === 0 ? -1 : 0
                                 // чтобы появился левый бордер
                               },
                               width: `${virtualCol.size}px`,
@@ -3988,7 +4074,7 @@ var VirtualTable = forwardRef8((props, ref) => {
                               overflow: "hidden"
                             }
                           },
-                          children: rowButtons?.(row.original)?.map((ab) => /* @__PURE__ */ jsx34(Fragment8, { children: ab.template ? ab.template(ab) : /* @__PURE__ */ jsx34(
+                          children: rowButtons?.(row.original)?.map((ab) => /* @__PURE__ */ jsx34(Fragment9, { children: ab.template ? ab.template(ab) : /* @__PURE__ */ jsx34(
                             Tooltip,
                             {
                               label: ab.title,
@@ -4017,7 +4103,7 @@ var VirtualTable = forwardRef8((props, ref) => {
             ]
           }
         ),
-        borders !== "none" && /* @__PURE__ */ jsxs20(Fragment9, { children: [
+        borders !== "none" && /* @__PURE__ */ jsxs20(Fragment10, { children: [
           /* @__PURE__ */ jsx34("div", { className: rightBorder, style: { height: `${rowsTotalSize + summaryHeaderHeight}px` } }),
           /* @__PURE__ */ jsx34("div", { className: bottomBorder, style: { width: `${columnsTotalSize}px` } })
         ] })
@@ -4027,14 +4113,14 @@ var VirtualTable = forwardRef8((props, ref) => {
 });
 
 // src/components/view/TreeView/TreeView.tsx
-import { memo as memo2, useCallback as useCallback12, useMemo as useMemo9, useState as useState17 } from "react";
+import { memo as memo2, useCallback as useCallback12, useMemo as useMemo9, useState as useState18 } from "react";
 
 // src/components/view/TreeView/treeView.module.css
 var search = "treeView_search";
 
 // src/components/view/TreeView/ui/TreeViewItem/TreeViewItem.tsx
 import classNames5 from "classnames";
-import { memo, useEffect as useEffect9, useState as useState16 } from "react";
+import { memo, useEffect as useEffect9, useState as useState17 } from "react";
 
 // src/components/view/TreeView/ui/TreeViewItem/treeViewItem.module.css
 var item2 = "treeViewItem_item";
@@ -4057,7 +4143,7 @@ var TreeViewItem_default = memo(function TreeViewItem({
   startIcons,
   children: children2
 }) {
-  const [isOpen, setIsOpen] = useState16(false);
+  const [isOpen, setIsOpen] = useState17(false);
   useEffect9(() => {
     setIsOpen(!!searchValue);
   }, [searchValue]);
@@ -4117,9 +4203,9 @@ var getFilteredTree = (tree, search2) => {
 };
 
 // src/components/view/TreeView/TreeView.tsx
-import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 var TreeView_default = memo2(function TreeView({ data, selected: selected5, startIcons, onSelect, withSearch = false }) {
-  const [searchValue, setSearchValue] = useState17("");
+  const [searchValue, setSearchValue] = useState18("");
   const onChangeSearchValue = useCallback12((e) => setSearchValue(e.target.value), []);
   const selectedValues = useMemo9(
     () => selected5.reduce(
@@ -4134,7 +4220,7 @@ var TreeView_default = memo2(function TreeView({ data, selected: selected5, star
   const filteredData = useMemo9(() => {
     return getFilteredTree(data, searchValue);
   }, [data, searchValue]);
-  return /* @__PURE__ */ jsxs22(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment11, { children: [
     withSearch && /* @__PURE__ */ jsx36(
       SearchInput,
       {
@@ -4175,11 +4261,11 @@ var valuesWithBorders = "pairs_valuesWithBorders";
 var dimTypography = "pairs_dimTypography";
 
 // src/components/view/Pairs/ui/TypographyWithTooltip.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function TypographyWithTooltip(props) {
   const { label: label8 } = props;
-  const [tooltip, setTooltip] = useState18(label8);
+  const [tooltip, setTooltip] = useState19(label8);
   return /* @__PURE__ */ jsx37(Tooltip, { label: tooltip, children: /* @__PURE__ */ jsx37(
     Typography,
     {
@@ -4197,7 +4283,7 @@ function TypographyWithTooltip(props) {
 }
 
 // src/components/view/Pairs/Pairs.tsx
-import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 function Pairs(props) {
   const { pairs, column1Width = "50%", column2Width = "50%", showBorder, minRowHeight, classes } = props;
   return /* @__PURE__ */ jsx38("div", { className: classNames6(classes?.root), children: pairs.map((pair, i) => /* @__PURE__ */ jsx38(
@@ -4207,7 +4293,7 @@ function Pairs(props) {
       className: classNames6(classes?.rowContainer, {
         [rowContainerBorders]: showBorder
       }),
-      children: pair && /* @__PURE__ */ jsxs23(Fragment11, { children: [
+      children: pair && /* @__PURE__ */ jsxs23(Fragment12, { children: [
         /* @__PURE__ */ jsx38(
           "div",
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",
@@ -118,4 +118,4 @@
     "vite-plugin-svgr": "^4.5.0",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}

package/styles/themes/dark.css

@@ -27,7 +27,8 @@
   --theme-accent: #7bd3f6;
 
   --theme-success: #4caf50;
-  --theme-warning: #ee7918;
+  --theme-warning: #ff9800;
+  --theme-info: #03a9f4;
   --theme-error: #ef5350;
   --theme-focus: #7bd3f6;
 
@@ -37,7 +38,8 @@
   --theme-table-hover-row: #494949;
   --theme-table-selected-row: rgba(3, 169, 244, 0.08);
   --theme-table-hover-selected-row: rgba(3, 169, 244, 0.16);
-  --theme-table-error: rgba(211, 47, 47, 0.3);
+  --theme-table-success: rgba(76, 175, 80, 0.08);
+  --theme-table-error: rgba(239, 83, 80, 0.08);
 
   --theme-tooltip-background: rgba(40, 40, 40, 0.9);
 

package/styles/themes/light.css

@@ -26,9 +26,10 @@
 
   --theme-accent: #03a9f4;
 
-  --theme-success: #2e7d32;
-  --theme-warning: #ee7918;
-  --theme-error: #d32f2f;
+  --theme-success: #4caf50;
+  --theme-warning: #ff9800;
+  --theme-info: #03a9f4;
+  --theme-error: #ef5350;
   --theme-focus: #03a9f4;
 
   --theme-table-background: #ffffff;
@@ -37,7 +38,8 @@
   --theme-table-hover-row: #f5f5f5;
   --theme-table-selected-row: rgba(3, 169, 244, 0.08);
   --theme-table-hover-selected-row: rgba(3, 169, 244, 0.16);
-  --theme-table-error: rgba(211, 47, 47, 0.3);
+  --theme-table-success: rgba(76, 175, 80, 0.08);
+  --theme-table-error: rgba(239, 83, 80, 0.08);
 
   --theme-tooltip-background: rgba(215, 215, 215, 0.9);