nntc-ui 0.0.32 → 0.0.34

package/index.css

@@ -1550,12 +1550,9 @@ button[disabled] {
 .tabs_tab.tabs_disabled .tabs_tabIcon {
   color: var(--theme-text-inactive);
 }
-.tabs_tabs-story-wrapper {
-  width: 600px;
-}
 
 /* src/components/view/Modal/modal.module.css */
-.modal_root {
+.modal_overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -1566,7 +1563,7 @@ button[disabled] {
   width: 100%;
   height: 100%;
   padding: 16px;
-  background-color: var(--theme-modal-shadow-background);
+  background-color: var(--theme-modal-shadow-background, rgba(0, 0, 0, 0.5));
 }
 .modal_modal {
   min-width: 200px;

package/index.d.ts

@@ -384,8 +384,12 @@ interface Props$1 {
 declare const Typography: React.ForwardRefExoticComponent<Omit<HTMLProps<HTMLParagraphElement> & Props$1, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 
 interface Props {
-    close: () => void;
+    open: boolean;
+    onClose?: () => void;
+    root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
 }
-declare function Modal(props: PropsWithChildren<UiProps<Props>>): react_jsx_runtime.JSX.Element;
+declare const Modal: React.ForwardRefExoticComponent<Omit<PropsWithChildren<Props & {
+    classes?: PropsObject;
+} & HTMLProps<HTMLDivElement>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 export { type AdditionalButton, Button, ButtonsGroup, Card, Checkbox, Checklist, type Item$3 as ChecklistItem, type SelectedItems as ChecklistSelectedItems, ColorPicker, type ColumnAlign, DateTime, type FilterBy, Input, Layout, Menu, type Divider as MenuDivider, type Item$2 as MenuItem, Modal, MultiSelect, type Item$4 as MultiSelectItem, type TitleVariant as MultiSelectTitleVariant, type Pair, Pairs, Popover, SearchInput, Select, type Divider$1 as SelectDivider, type Item$5 as SelectItem, type SortBy, Surface, type TableCell, type TableColumn, type TableRow, Tabs, type Item$1 as TabsItem, Tooltip, _default as TreeView, type Item as TreeViewItem, Typography, type VerticalAlign, VirtualTable, WrapForLabel };

package/index.js

@@ -333,7 +333,7 @@ function usePopover(props = {}) {
     initialOpen = false,
     placement = "bottom",
     modal: modal3,
-    root: root23,
+    root: root22,
     open: controlledOpen,
     onOpenChange: setControlledOpen,
     containerOffset = 12
@@ -371,11 +371,11 @@ function usePopover(props = {}) {
       ...interactions,
       ...data,
       modal: modal3,
-      root: root23,
+      root: root22,
       descriptionId,
       setDescriptionId
     }),
-    [open, setOpen, interactions, data, modal3, root23, descriptionId]
+    [open, setOpen, interactions, data, modal3, root22, descriptionId]
   );
 }
 
@@ -417,7 +417,7 @@ var PopoverTrigger = forwardRef4(
 // src/components/view/Popover/Popover.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function Popover(props) {
-  const { description, clickable, initialOpen, placement, wrapTrigger, containerOffset, root: root23, children: children2, classes } = props;
+  const { description, clickable, initialOpen, placement, wrapTrigger, containerOffset, root: root22, children: children2, classes } = props;
   const [showTooltip, setShowTooltip] = useState2(false);
   if (!children2) {
     return null;
@@ -433,7 +433,7 @@ function Popover(props) {
       open: clickable ? showTooltip : void 0,
       onOpenChange: clickable ? setShowTooltip : void 0,
       containerOffset,
-      root: root23,
+      root: root22,
       children: [
         /* @__PURE__ */ jsx7(
           PopoverTrigger,
@@ -2102,7 +2102,7 @@ function useTooltip(props = {}) {
     onOpenChange: setControlledOpen,
     withoutArrow,
     arrowRef,
-    root: root23
+    root: root22
   } = props;
   const [uncontrolledOpen, setUncontrolledOpen] = useState8(initialOpen);
   const open = controlledOpen ?? uncontrolledOpen;
@@ -2140,11 +2140,11 @@ function useTooltip(props = {}) {
       setOpen,
       withoutArrow,
       arrowRef,
-      root: root23,
+      root: root22,
       ...interactions,
       ...data
     }),
-    [open, setOpen, interactions, data, root23]
+    [open, setOpen, interactions, data, root22]
   );
 }
 
@@ -2194,7 +2194,7 @@ function Tooltip(props) {
     withoutArrow,
     wrapTrigger,
     alertType = "default",
-    root: root23,
+    root: root22,
     children: children2,
     classes
   } = props;
@@ -2215,7 +2215,7 @@ function Tooltip(props) {
       onOpenChange: clickable ? setShowTooltip : void 0,
       withoutArrow,
       arrowRef,
-      root: root23,
+      root: root22,
       children: [
         /* @__PURE__ */ jsx27(
           TooltipTrigger,
@@ -2259,7 +2259,6 @@ __export(tabs_exports, {
   tabIcon: () => tabIcon,
   tabTitle: () => tabTitle,
   tabVertical: () => tabVertical,
-  "tabs-story-wrapper": () => tabs_story_wrapper,
   vertical: () => vertical
 });
 var root16 = "tabs_root";
@@ -2279,7 +2278,6 @@ var selected2 = "tabs_selected";
 var tabBorderVertical = "tabs_tabBorderVertical";
 var tabIcon = "tabs_tabIcon";
 var disabled = "tabs_disabled";
-var tabs_story_wrapper = "tabs_tabs-story-wrapper";
 var tabs_default = {
   root: root16,
   vertical,
@@ -2297,8 +2295,7 @@ var tabs_default = {
   selected: selected2,
   tabBorderVertical,
   tabIcon,
-  disabled,
-  "tabs-story-wrapper": tabs_story_wrapper
+  disabled
 };
 
 // src/components/navigation/Tabs/Tabs.tsx
@@ -2425,9 +2422,9 @@ function Tabs(props) {
 // src/components/view/VirtualTable/VirtualTable.tsx
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
-import classnames23 from "classnames";
+import classnames22 from "classnames";
 import dayjs4 from "dayjs";
-import { Fragment as Fragment7, useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef10, useState as useState14 } from "react";
+import { Fragment as Fragment7, useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef11, useState as useState14 } from "react";
 
 // src/utils/toFirstLetterUpperCase.ts
 var toFirstLetterUpperCase = (name) => {
@@ -2438,40 +2435,53 @@ var toFirstLetterUpperCase = (name) => {
 var defaultRowHeight = 32;
 
 // src/components/view/VirtualTable/ui/DefaultColumn/DefaultColumn.tsx
-import classnames19 from "classnames";
-import { useEffect as useEffect7, useMemo as useMemo5, useState as useState11 } from "react";
-import { createPortal } from "react-dom";
+import classnames18 from "classnames";
+import { useEffect as useEffect6, useRef as useRef10, useState as useState11 } from "react";
 
 // src/components/view/Modal/Modal.tsx
-import classnames18 from "classnames";
-import { useEffect as useEffect6, useRef as useRef9 } from "react";
+import { forwardRef as forwardRef7, useRef as useRef9 } from "react";
+import { createPortal } from "react-dom";
 
 // src/components/view/Modal/modal.module.css
-var root17 = "modal_root";
+var overlay = "modal_overlay";
 var modal2 = "modal_modal";
 
 // src/components/view/Modal/Modal.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
-function Modal(props) {
-  const { close, children: children2, classes } = props;
-  const rootRef = useRef9(null);
-  useEffect6(() => {
-    const clickListener = function(e) {
-      if (e.target === rootRef?.current) {
-        close();
+var Modal = forwardRef7(
+  function Modal2({ open, onClose, root: root22 = document.body, children: children2, ...props }, propRef) {
+    const overlayRef = useRef9(null);
+    const modalRef = useRef9(null);
+    const handleOverlayClick = (e) => {
+      if (e.target === overlayRef.current || !modalRef.current?.contains(e.target)) {
+        e.stopPropagation();
+        onClose?.();
       }
     };
-    if (rootRef?.current) {
-      rootRef.current.addEventListener("click", clickListener);
+    if (!open || !children2) {
+      return null;
     }
-    return () => {
-      if (rootRef?.current) {
-        rootRef.current.removeEventListener("click", clickListener);
+    const modalContent2 = /* @__PURE__ */ jsx29("div", { ref: overlayRef, className: overlay, onClick: handleOverlayClick, ...props, children: /* @__PURE__ */ jsx29(
+      "div",
+      {
+        ref: (node) => {
+          if (node) {
+            modalRef.current = node;
+          }
+          if (typeof propRef === "function") {
+            propRef(node);
+          } else if (propRef) {
+            propRef.current = node;
+          }
+        },
+        className: modal2,
+        onClick: (e) => e.stopPropagation(),
+        children: children2
       }
-    };
-  }, [rootRef]);
-  return /* @__PURE__ */ jsx29("div", { ref: rootRef, className: classnames18(root17, classes?.root), children: /* @__PURE__ */ jsx29("div", { className: classnames18(modal2, classes?.modal), children: children2 }) });
-}
+    ) });
+    return createPortal(modalContent2, root22);
+  }
+);
 
 // src/components/view/VirtualTable/virtualTable.module.css
 var virtualTable_exports = {};
@@ -2492,7 +2502,7 @@ __export(virtualTable_exports, {
   medium: () => medium11,
   modalContent: () => modalContent,
   rightBorder: () => rightBorder,
-  root: () => root18,
+  root: () => root17,
   rowButtonTrigger: () => rowButtonTrigger,
   selected: () => selected3,
   showInModal: () => showInModal,
@@ -2513,7 +2523,7 @@ __export(virtualTable_exports, {
   viewCell: () => viewCell,
   viewSpan: () => viewSpan
 });
-var root18 = "virtualTable_root";
+var root17 = "virtualTable_root";
 var tableContainer = "virtualTable_tableContainer";
 var small11 = "virtualTable_small";
 var table = "virtualTable_table";
@@ -2549,7 +2559,7 @@ var verticalAlignCenter = "virtualTable_verticalAlignCenter";
 var verticalAlignFlexEnd = "virtualTable_verticalAlignFlexEnd";
 var rowButtonTrigger = "virtualTable_rowButtonTrigger";
 var virtualTable_default = {
-  root: root18,
+  root: root17,
   tableContainer,
   small: small11,
   table,
@@ -2596,10 +2606,13 @@ var DefaultColumn = {
     const [value, setValue] = useState11(initialValue);
     const [isEdit, setIsEdit] = useState11(false);
     const [showModal, setShowModal] = useState11(false);
-    useEffect7(() => {
+    const closeModalRef = useRef10();
+    closeModalRef.current = () => {
+      setShowModal(false);
+    };
+    useEffect6(() => {
       setValue(initialValue);
     }, [initialValue]);
-    const modalPortal = useMemo5(() => document.getElementById("modal-portal"), []);
     const additionalViewResult = tableMeta?.additionalColumnsViews?.(id, initialValue);
     if (isEdit && meta?.editable) {
       const onBlur = () => {
@@ -2615,7 +2628,7 @@ var DefaultColumn = {
     return /* @__PURE__ */ jsx30(Tooltip, { label: original[id]?.error, alertType: "error", children: /* @__PURE__ */ jsxs16(
       "div",
       {
-        className: classnames19(
+        className: classnames18(
           viewCell,
           !!meta?.rowsAlign ? virtualTable_exports[`align${meta?.rowsAlign}`] : void 0,
           meta?.showInModal ? showInModal : void 0,
@@ -2629,10 +2642,7 @@ var DefaultColumn = {
         } : void 0,
         children: [
           /* @__PURE__ */ jsx30("span", { className: viewSpan, children: shownValue }),
-          showModal && modalPortal && createPortal(
-            /* @__PURE__ */ jsx30(Modal, { close: () => setShowModal(false), children: /* @__PURE__ */ jsx30(Surface, { type: "panel", children: /* @__PURE__ */ jsx30("div", { className: modalContent, children: shownValue }) }) }),
-            modalPortal
-          )
+          showModal && /* @__PURE__ */ jsx30(Modal, { open: showModal, onClose: () => closeModalRef.current?.(), children: /* @__PURE__ */ jsx30(Surface, { type: "panel", children: /* @__PURE__ */ jsx30("div", { className: modalContent, children: shownValue }) }) })
         ]
       }
     ) });
@@ -2640,19 +2650,19 @@ var DefaultColumn = {
 };
 
 // src/components/view/VirtualTable/ui/HeaderDropdown/HeaderDropdown.tsx
-import classnames22 from "classnames";
-import { useMemo as useMemo6 } from "react";
+import classnames21 from "classnames";
+import { useMemo as useMemo5 } from "react";
 
 // src/components/view/VirtualTable/ui/HeaderDropdown/headerDropdown.module.css
-var root19 = "headerDropdown_root";
+var root18 = "headerDropdown_root";
 var checklistWrap = "headerDropdown_checklistWrap";
 
 // src/components/view/VirtualTable/ui/DateFiltration/DateFiltration.tsx
-import classnames20 from "classnames";
-import { useEffect as useEffect8, useState as useState12 } from "react";
+import classnames19 from "classnames";
+import { useEffect as useEffect7, useState as useState12 } from "react";
 
 // src/components/view/VirtualTable/ui/DateFiltration/dateFiltration.module.css
-var root20 = "dateFiltration_root";
+var root19 = "dateFiltration_root";
 
 // src/components/view/VirtualTable/ui/DateFiltration/DateFiltration.tsx
 import { jsx as jsx31 } from "react/jsx-runtime";
@@ -2662,10 +2672,10 @@ function DateFiltration(props) {
   const handleChangeDates = (newValues) => {
     setValues(newValues);
   };
-  useEffect8(() => {
+  useEffect7(() => {
     actionWithSelected(values);
   }, [values]);
-  return /* @__PURE__ */ jsx31("div", { className: classnames20(root20), children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx31("div", { className: classnames19(root19), children: /* @__PURE__ */ jsx31(
     DateTime,
     {
       componentSize: "small",
@@ -2679,11 +2689,11 @@ function DateFiltration(props) {
 }
 
 // src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx
-import classnames21 from "classnames";
+import classnames20 from "classnames";
 import { useState as useState13 } from "react";
 
 // src/components/view/VirtualTable/ui/NumberFiltration/numberFiltration.module.css
-var root21 = "numberFiltration_root";
+var root20 = "numberFiltration_root";
 var select = "numberFiltration_select";
 var inputsContainer = "numberFiltration_inputsContainer";
 var input8 = "numberFiltration_input";
@@ -2730,7 +2740,7 @@ function NumberFiltration(props) {
       (prev) => type === "equal" ? [value.length ? +value : -Infinity, value.length ? +value : Infinity] : type === "more" ? [value.length ? +value : -Infinity, prev[1]] : [prev[0], value.length ? +value : Infinity]
     );
   };
-  return /* @__PURE__ */ jsxs17("div", { className: classnames21(root21), children: [
+  return /* @__PURE__ */ jsxs17("div", { className: classnames20(root20), children: [
     /* @__PURE__ */ jsx32(
       Select,
       {
@@ -2743,7 +2753,7 @@ function NumberFiltration(props) {
         tabIndex: -1
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: classnames21(inputsContainer), children: selectedItem.value === "range" ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    /* @__PURE__ */ jsx32("div", { className: classnames20(inputsContainer), children: selectedItem.value === "range" ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
       /* @__PURE__ */ jsx32(
         Input,
         {
@@ -2831,7 +2841,7 @@ function HeaderDropdown(props) {
     children: children2
   } = props;
   const headerResultName = sortAnotherName ?? headerName;
-  const filterItems2 = useMemo6(() => {
+  const filterItems2 = useMemo5(() => {
     const checklistItems = items2.filter((i) => Object.keys(i).includes(headerResultName)).map(
       (i) => ({
         name: valueFormat ? valueFormat(i[headerResultName].value?.toString() ?? "") : toFixed !== void 0 && !Number.isNaN(parseFloat(i[headerResultName].value)) ? parseFloat(Number(i[headerResultName].value).toFixed(toFixed)) : i[headerResultName].value,
@@ -2846,17 +2856,17 @@ function HeaderDropdown(props) {
     ];
     return uniqueChecklistItems;
   }, [items2, headerResultName]);
-  const filterSelectedItems = useMemo6(() => {
+  const filterSelectedItems = useMemo5(() => {
     const result = {};
     filterBy.find((fb) => fb.columnName === headerResultName)?.values.forEach((v) => {
       result[v] = true;
     });
     return result;
   }, [filterBy, headerResultName]);
-  const filterNumbers = useMemo6(() => {
+  const filterNumbers = useMemo5(() => {
     return filterBy.find((fb) => fb.columnName === headerResultName && fb.type === "numberRange")?.values;
   }, [filterBy, headerResultName]);
-  const filterDates = useMemo6(() => {
+  const filterDates = useMemo5(() => {
     return filterBy.find((fb) => fb.columnName === headerResultName && fb.type === "dateRange")?.values;
   }, [filterBy, headerResultName]);
   const handleSortClick = (direction) => () => {
@@ -2931,7 +2941,7 @@ function HeaderDropdown(props) {
   };
   const hasAnyFilter = Object.keys(filterSelectedItems).length || sortBy.some((sb) => sb.columnName === headerResultName);
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs18("div", { className: classnames22(root19), children: [
+  return /* @__PURE__ */ jsxs18("div", { className: classnames21(root18), children: [
     children2?.(showUniqueValuesCount && /* @__PURE__ */ jsx33("div", { children: `(${filterItems2.length})` })),
     (sortable || filtrationByValue || filtrationByDate || filtrationByNumber) && /* @__PURE__ */ jsx33(
       Popover,
@@ -2942,7 +2952,7 @@ function HeaderDropdown(props) {
         description: /* @__PURE__ */ jsxs18(Fragment6, { children: [
           filtrationByNumber && /* @__PURE__ */ jsx33(NumberFiltration, { defaultValues: filterNumbers, actionWithSelected: actionWithSelectedNumbers }),
           filtrationByDate && /* @__PURE__ */ jsx33(DateFiltration, { defaultValues: filterDates, actionWithSelected: actionWithSelectedDates }),
-          filtrationByValue && /* @__PURE__ */ jsx33("div", { className: classnames22(checklistWrap), children: /* @__PURE__ */ jsx33(
+          filtrationByValue && /* @__PURE__ */ jsx33("div", { className: classnames21(checklistWrap), children: /* @__PURE__ */ jsx33(
             Checklist,
             {
               items: filterItems2,
@@ -3115,9 +3125,9 @@ function VirtualTable(props) {
   } = props;
   const [filterBy, setFilterBy] = useState14([]);
   const [sortBy, setSortBy] = useState14([{ columnName: "isNew", direction: "desc" }]);
-  const tableContainerRef = useRef10(null);
-  const memoizedColumns = useMemo7(() => getColumns(columns), [columns]);
-  const memoizedData = useMemo7(() => {
+  const tableContainerRef = useRef11(null);
+  const memoizedColumns = useMemo6(() => getColumns(columns), [columns]);
+  const memoizedData = useMemo6(() => {
     const newRows = [...rows];
     const nextFilterBy = filterBy.filter((filterByItem) => {
       const startDate = filterByItem.type === "dateRange" ? dayjs4(filterByItem.values[0]) : null;
@@ -3133,7 +3143,7 @@ function VirtualTable(props) {
     const sorted = sortBy.length ? recursiveSort(filtered, sortBy) : filtered;
     return sorted;
   }, [rows, sortBy, filterBy]);
-  const columnsEstimateSize = useMemo7(
+  const columnsEstimateSize = useMemo6(
     () => cellWidth ?? ((index) => memoizedColumns[index]?.meta?.width ?? 200),
     [cellWidth, memoizedColumns]
   );
@@ -3176,11 +3186,11 @@ function VirtualTable(props) {
     estimateSize: columnsEstimateSize,
     overscan: 5
   });
-  const fixedColumnsWidth = useMemo7(
+  const fixedColumnsWidth = useMemo6(
     () => [...Array(fixedColumnsCount)].reduce((sum, _, index) => sum + columnsEstimateSize(index), 0),
     [fixedColumnsCount, columnsEstimateSize]
   );
-  const headerGroupHeight = useMemo7(() => {
+  const headerGroupHeight = useMemo6(() => {
     const delta = headerGroups.length - headerRowHeight.length;
     const result = [...headerRowHeight];
     if (delta > 0) {
@@ -3190,7 +3200,7 @@ function VirtualTable(props) {
     }
     return result;
   }, [headerRowHeight, headerGroups]);
-  const summaryHeaderHeight = useMemo7(
+  const summaryHeaderHeight = useMemo6(
     () => headerGroupHeight.reduce(
       (sum, current, currentIndex) => currentIndex < headerGroups.length ? sum + current : sum,
       0
@@ -3203,7 +3213,7 @@ function VirtualTable(props) {
   );
   const rowsTotalSize = rowVirtualizer.getTotalSize();
   const columnsTotalSize = columnVirtualizer.getTotalSize();
-  useEffect9(() => {
+  useEffect8(() => {
     if (tableContainerRef?.current) {
       const container = tableContainerRef?.current;
       const rightBorderElement = container.querySelector(`.${rightBorder}`);
@@ -3214,7 +3224,7 @@ function VirtualTable(props) {
       }
     }
   }, [tableContainerRef?.current?.clientWidth, columnsTotalSize, rowButtons, rowActionWidth]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (tableContainerRef?.current) {
       const container = tableContainerRef?.current;
       const bottomBorderElement = container.querySelector(`.${bottomBorder}`);
@@ -3225,7 +3235,7 @@ function VirtualTable(props) {
       }
     }
   }, [tableContainerRef?.current?.clientHeight, rowsTotalSize]);
-  useEffect9(() => {
+  useEffect8(() => {
     const scrollListener = function() {
       const marginLeftChangingElements = this.querySelectorAll(`.${marginLeftChanging}`);
       marginLeftChangingElements?.forEach(
@@ -3254,14 +3264,14 @@ function VirtualTable(props) {
   return /* @__PURE__ */ jsx34(
     "div",
     {
-      className: classnames23(
-        root18,
+      className: classnames22(
+        root17,
         virtualTable_exports[size],
         virtualTable_exports[`borders${toFirstLetterUpperCase(borders)}`],
         classes?.root
       ),
       style: height ? { height } : void 0,
-      children: /* @__PURE__ */ jsxs19("div", { ref: tableContainerRef, className: classnames23(tableContainer, "styledScroll"), children: [
+      children: /* @__PURE__ */ jsxs19("div", { ref: tableContainerRef, className: classnames22(tableContainer, "styledScroll"), children: [
         /* @__PURE__ */ jsxs19(
           "div",
           {
@@ -3282,7 +3292,7 @@ function VirtualTable(props) {
                   children: headerGroups.map((headerGroup, hgi) => {
                     const innerCell = (header2) => {
                       const headerMeta = header2.column.columnDef.meta;
-                      return /* @__PURE__ */ jsx34("div", { className: classnames23(thCell), children: header2.column.columnDef.id === header2.column.columnDef["accessorKey"] && (headerMeta?.sortable || headerMeta?.filtrationByValue || headerMeta?.filtrationByDate || headerMeta?.filtrationByNumber || headerMeta && showUniqueValuesCount) ? /* @__PURE__ */ jsx34(
+                      return /* @__PURE__ */ jsx34("div", { className: classnames22(thCell), children: header2.column.columnDef.id === header2.column.columnDef["accessorKey"] && (headerMeta?.sortable || headerMeta?.filtrationByValue || headerMeta?.filtrationByDate || headerMeta?.filtrationByNumber || headerMeta && showUniqueValuesCount) ? /* @__PURE__ */ jsx34(
                         HeaderDropdown,
                         {
                           headerMeta,
@@ -3297,7 +3307,7 @@ function VirtualTable(props) {
                           children: (afterNode) => /* @__PURE__ */ jsxs19(
                             "div",
                             {
-                              className: classnames23(
+                              className: classnames22(
                                 label6,
                                 !!headerMeta?.headerAlign ? virtualTable_exports[`align${headerMeta?.headerAlign}`] : alignLeft
                               ),
@@ -3311,7 +3321,7 @@ function VirtualTable(props) {
                       ) : /* @__PURE__ */ jsx34(
                         "div",
                         {
-                          className: classnames23(
+                          className: classnames22(
                             label6,
                             !!headerMeta?.headerAlign ? virtualTable_exports[`align${headerMeta?.headerAlign}`] : alignLeft
                           ),
@@ -3331,7 +3341,7 @@ function VirtualTable(props) {
                         return /* @__PURE__ */ jsx34(
                           "div",
                           {
-                            className: classnames23(
+                            className: classnames22(
                               th,
                               hgi === 0 ? firstThRow : void 0,
                               !nextVerticalHeaders.length && index !== headerGroup.headers.length - 1 && thRightBorder,
@@ -3377,7 +3387,7 @@ function VirtualTable(props) {
                           return /* @__PURE__ */ jsx34(
                             "div",
                             {
-                              className: classnames23(
+                              className: classnames22(
                                 th,
                                 hgi === 0 && firstThRow,
                                 !nextVerticalHeaders.length && column.index !== headerGroup.headers.length - 1 && thRightBorder,
@@ -3401,7 +3411,7 @@ function VirtualTable(props) {
                       !!rowButtons && /* @__PURE__ */ jsx34(
                         "div",
                         {
-                          className: classnames23(th, hgi === 0 ? firstThRow : void 0),
+                          className: classnames22(th, hgi === 0 ? firstThRow : void 0),
                           style: {
                             width: `${rowActionWidth}px`,
                             height: `${headerGroupHeight[hgi]}px`,
@@ -3420,7 +3430,7 @@ function VirtualTable(props) {
                   {
                     "data-index": virtualRow.index,
                     ref: dynamicRowHeight ? rowVirtualizer.measureElement : void 0,
-                    className: classnames23(
+                    className: classnames22(
                       tr,
                       virtualRow.index % 2 !== 0 && evenRow,
                       row.original?.isNew?.value === 1 && selected3
@@ -3440,7 +3450,7 @@ function VirtualTable(props) {
                           "div",
                           {
                             "data-col-index": virtualCol.index,
-                            className: classnames23(td, isSticky && sticky),
+                            className: classnames22(td, isSticky && sticky),
                             style: {
                               ...isSticky && {
                                 left: virtualCol.start,
@@ -3461,7 +3471,7 @@ function VirtualTable(props) {
                       !!rowButtons && /* @__PURE__ */ jsx34(
                         "div",
                         {
-                          className: classnames23(td),
+                          className: classnames22(td),
                           style: {
                             width: `${rowActionWidth}px`,
                             justifyContent: "flex-start",
@@ -3509,14 +3519,14 @@ function VirtualTable(props) {
 }
 
 // src/components/view/TreeView/TreeView.tsx
-import { memo as memo2, useCallback as useCallback8, useMemo as useMemo8, useState as useState16 } from "react";
+import { memo as memo2, useCallback as useCallback8, useMemo as useMemo7, useState as useState16 } from "react";
 
 // src/components/view/TreeView/treeView.module.css
 var search = "treeView_search";
 
 // src/components/view/TreeView/ui/TreeViewItem/TreeViewItem.tsx
 import classNames4 from "classnames";
-import { memo, useEffect as useEffect10, useState as useState15 } from "react";
+import { memo, useEffect as useEffect9, useState as useState15 } from "react";
 
 // src/components/view/TreeView/ui/TreeViewItem/treeViewItem.module.css
 var item2 = "treeViewItem_item";
@@ -3540,7 +3550,7 @@ var TreeViewItem_default = memo(function TreeViewItem({
   children: children2
 }) {
   const [isOpen, setIsOpen] = useState15(false);
-  useEffect10(() => {
+  useEffect9(() => {
     setIsOpen(!!searchValue);
   }, [searchValue]);
   const hasChildren = !!children2?.length;
@@ -3603,7 +3613,7 @@ import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-r
 var TreeView_default = memo2(function TreeView({ data, selected: selected5, startIcons, onSelect, withSearch = false }) {
   const [searchValue, setSearchValue] = useState16("");
   const onChangeSearchValue = useCallback8((e) => setSearchValue(e.target.value), []);
-  const selectedValues = useMemo8(
+  const selectedValues = useMemo7(
     () => selected5.reduce(
       (acc, cur) => {
         acc[cur] = true;
@@ -3613,7 +3623,7 @@ var TreeView_default = memo2(function TreeView({ data, selected: selected5, star
     ),
     [selected5]
   );
-  const filteredData = useMemo8(() => {
+  const filteredData = useMemo7(() => {
     return getFilteredTree(data, searchValue);
   }, [data, searchValue]);
   return /* @__PURE__ */ jsxs21(Fragment9, { children: [
@@ -3726,7 +3736,7 @@ function Pairs(props) {
 import classNames6 from "classnames";
 
 // src/components/view/Card/card.module.css
-var root22 = "card_root";
+var root21 = "card_root";
 var header = "card_header";
 var actions = "card_actions";
 
@@ -3734,7 +3744,7 @@ var actions = "card_actions";
 import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 function Card(props) {
   const { surfaceType = "primary", title: title2, actions: actions2, children: children2, classes } = props;
-  return /* @__PURE__ */ jsxs23(Surface, { type: surfaceType, classes: { root: classNames6(root22, classes?.root) }, children: [
+  return /* @__PURE__ */ jsxs23(Surface, { type: surfaceType, classes: { root: classNames6(root21, classes?.root) }, children: [
     (!!title2 || !!actions2) && /* @__PURE__ */ jsxs23("div", { className: header, children: [
       title2 ?? /* @__PURE__ */ jsx39("div", {}),
       !!actions2 && /* @__PURE__ */ jsx39("div", { className: classNames6(actions, classes?.actions), children: actions2 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",

package/styles/themes/dark.css

@@ -10,7 +10,6 @@
 
   --theme-modal-shadow-background: rgba(81, 81, 81, 0.5);
   --theme-modal-background: #515151;
-  --theme-modal-translucent-background: #515151aa;
 
   --theme-divider: rgba(255, 255, 255, 0.24);
 

package/styles/themes/light.css

@@ -10,7 +10,6 @@
 
   --theme-modal-shadow-background: rgba(255, 255, 255, 0.5);
   --theme-modal-background: #ffffff;
-  --theme-modal-translucent-background: #515151aa;
 
   --theme-divider: rgba(0, 0, 0, 0.12);