nntc-ui 0.0.34 → 0.0.36

package/index.css

@@ -144,12 +144,19 @@
 .button_textSecondary.button_active > span > svg {
   fill: var(--theme-focus) !important;
 }
-button:disabled,
-button[disabled] {
+.button_root:disabled,
+.button_root[disabled] {
   color: var(--theme-text-inactive);
   pointer-events: none;
   -webkit-user-select: none;
   user-select: none;
+}
+.button_tonal:disabled,
+.button_tonal[disabled],
+.button_elevated:disabled,
+.button_elevated[disabled],
+.button_filled:disabled,
+.button_filled[disabled] {
   background-color: var(--theme-grey-700);
 }
 
@@ -1260,9 +1267,36 @@ button[disabled] {
   width: 100%;
   height: 0;
 }
+.multiSelect_input:disabled,
+.multiSelect_input[disabled],
+.multiSelect_input:disabled + .multiSelect_arrow,
+.multiSelect_input[disabled] + .multiSelect_arrow {
+  color: var(--theme-text-inactive);
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.multiSelect_outlined:hover > .multiSelect_input:disabled,
+.multiSelect_outlined:hover > .multiSelect_input.multiSelect_input[disabled] {
+  outline-color: var(--theme-input-border);
+}
+.multiSelect_filled .multiSelect_input:disabled,
+.multiSelect_filled .multiSelect_input[disabled] {
+  background-color: var(--theme-grey-700);
+}
 .multiSelect_popoverContent {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-right: 16px;
+  padding-bottom: 16px;
+}
+.multiSelect_menuWrapper {
   max-height: 250px;
-  overflow: auto scroll;
+}
+.multiSelect_searchInputRoot {
+  padding: 0 8px;
+  margin-top: 8px;
 }
 
 /* src/components/common/Checklist/checklist.module.css */

package/index.d.ts

@@ -138,6 +138,8 @@ interface Props$e {
     onValueChange?: (newItem: string[] | null) => void;
     selected: string[] | null;
     titleType?: TitleVariant;
+    enableSearch?: boolean;
+    popoverInComponent?: boolean;
 }
 declare function MultiSelect(props: UiProps<Props$e> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
@@ -352,6 +354,8 @@ interface Props$4 {
     wrapTrigger?: boolean;
     containerOffset?: number;
     root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare function Popover(props: PropsWithChildren<UiProps<Props$4>>): string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null;
 

package/index.js

@@ -417,7 +417,19 @@ 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: root22, children: children2, classes } = props;
+  const {
+    description,
+    clickable,
+    initialOpen,
+    placement,
+    wrapTrigger,
+    containerOffset,
+    root: root22,
+    open,
+    onOpenChange,
+    children: children2,
+    classes
+  } = props;
   const [showTooltip, setShowTooltip] = useState2(false);
   if (!children2) {
     return null;
@@ -430,8 +442,8 @@ function Popover(props) {
     {
       placement,
       initialOpen,
-      open: clickable ? showTooltip : void 0,
-      onOpenChange: clickable ? setShowTooltip : void 0,
+      open: open !== void 0 ? open : clickable ? showTooltip : void 0,
+      onOpenChange: onOpenChange !== void 0 ? onOpenChange : clickable ? setShowTooltip : void 0,
       containerOffset,
       root: root22,
       children: [
@@ -1553,7 +1565,12 @@ var WrapForLabel = (props) => {
 
 // src/components/common/MultiSelect/MultiSelect.tsx
 import classnames11 from "classnames";
-import { useCallback as useCallback6, useMemo as useMemo3, useRef as useRef7 } from "react";
+import {
+  useCallback as useCallback6,
+  useMemo as useMemo3,
+  useRef as useRef7,
+  useState as useState8
+} from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { mergeRefs as mergeRefs7 } from "react-merge-refs";
 import { v4 as uuidv45 } from "uuid";
@@ -1570,10 +1587,12 @@ __export(multiSelect_exports, {
   itemIcon: () => itemIcon3,
   label: () => label5,
   medium: () => medium9,
+  menuWrapper: () => menuWrapper,
   outlined: () => outlined7,
   popoverContent: () => popoverContent3,
   popoverTarget: () => popoverTarget4,
   root: () => root12,
+  searchInputRoot: () => searchInputRoot,
   small: () => small9,
   withIcon: () => withIcon4,
   withItemIcon: () => withItemIcon2,
@@ -1595,6 +1614,8 @@ var clear = "multiSelect_clear";
 var arrow3 = "multiSelect_arrow";
 var popoverTarget4 = "multiSelect_popoverTarget";
 var popoverContent3 = "multiSelect_popoverContent";
+var menuWrapper = "multiSelect_menuWrapper";
+var searchInputRoot = "multiSelect_searchInputRoot";
 var multiSelect_default = {
   root: root12,
   medium: medium9,
@@ -1611,33 +1632,68 @@ var multiSelect_default = {
   clear,
   arrow: arrow3,
   popoverTarget: popoverTarget4,
-  popoverContent: popoverContent3
+  popoverContent: popoverContent3,
+  menuWrapper,
+  searchInputRoot
 };
 
 // src/components/common/MultiSelect/ui/SelectPopover/SelectPopover.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-function SelectPopover2(props) {
-  const { items: items2, componentSize, selected: selected5, changeSelectedItem, classes } = props;
-  return /* @__PURE__ */ jsx19(
-    Menu,
-    {
-      size: componentSize,
-      classes: classes?.menu,
-      items: items2.map(
-        (i) => ({
-          type: "item",
-          name: i.name,
-          description: i.description,
-          disabled: i.disabled,
-          selected: selected5?.includes(i.value),
-          onClick: () => {
-            changeSelectedItem(i);
-          },
-          withCheckbox: true
-        })
-      )
-    }
+import classNames4 from "classnames";
+import { useState as useState7 } from "react";
+
+// src/components/common/MultiSelect/utils/filterItems.ts
+var filterItems = (items2, filterText) => {
+  if (!filterText) {
+    return items2;
+  }
+  const searchText = filterText.toUpperCase();
+  return items2.filter(
+    (item3) => item3.name.toUpperCase().includes(searchText) || item3.description && item3.description.toUpperCase().includes(searchText)
   );
+};
+
+// src/components/common/MultiSelect/ui/SelectPopover/SelectPopover.tsx
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+function SelectPopover2(props) {
+  const { items: items2, componentSize, selected: selected5, changeSelectedItem, classes, enableSearch = false } = props;
+  const [searchValue, setSearchValue] = useState7("");
+  const filteredItems = enableSearch ? filterItems(items2, searchValue) : items2;
+  const handleSearchChange = (e) => {
+    setSearchValue(e.target.value);
+  };
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    enableSearch && /* @__PURE__ */ jsx19(
+      SearchInput,
+      {
+        variant: "outlined",
+        componentSize,
+        value: searchValue,
+        fullWidth: true,
+        classes: classes?.searchInput,
+        onChange: handleSearchChange
+      }
+    ),
+    /* @__PURE__ */ jsx19("div", { className: classNames4(classes?.menuWrapper), children: /* @__PURE__ */ jsx19(
+      Menu,
+      {
+        size: componentSize,
+        classes: classes?.menu,
+        items: filteredItems.map(
+          (i) => ({
+            type: "item",
+            name: i.name,
+            description: i.description,
+            disabled: i.disabled,
+            selected: selected5?.includes(i.value),
+            onClick: () => {
+              changeSelectedItem(i);
+            },
+            withCheckbox: true
+          })
+        )
+      }
+    ) })
+  ] });
 }
 
 // src/components/common/MultiSelect/utils/getTitle.ts
@@ -1656,7 +1712,7 @@ var getTitle = (titleType, activeItems, t) => {
 };
 
 // src/components/common/MultiSelect/MultiSelect.tsx
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function MultiSelect(props) {
   const {
     variant = "filled",
@@ -1673,19 +1729,24 @@ function MultiSelect(props) {
     disabled: disabled2,
     id,
     titleType = "allValue",
+    enableSearch = false,
+    popoverInComponent = false,
     ...inputProps
   } = props;
   const { t } = useTranslation2();
+  const wrapperRef = useRef7(null);
   const inputRef = useRef7(null);
   const popoverTargetRef = useRef7(null);
+  const [isPopoverOpen, setIsPopoverOpen] = useState8(false);
   const activeItems = useMemo3(() => items2.filter((i) => selected5?.includes(i.value)), [selected5, items2]);
   const inputClickHandler = useCallback6(
     (e) => {
       e.preventDefault();
-      if (!disabled2)
-        popoverTargetRef?.current?.click();
+      if (!disabled2) {
+        setIsPopoverOpen((prev) => !prev);
+      }
     },
-    [popoverTargetRef]
+    [disabled2]
   );
   const changeSelectedItem = (item3) => {
     const newValue = selected5 ?? [];
@@ -1704,7 +1765,7 @@ function MultiSelect(props) {
     onValueChange?.(null);
   };
   const inputId = id ?? uuidv45();
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: classnames11(root12, multiSelect_exports[componentSize], classes?.root),
@@ -1723,9 +1784,10 @@ function MultiSelect(props) {
             children: label7
           }
         ),
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsxs12(
           "div",
           {
+            ref: wrapperRef,
             className: classnames11(
               wrapper4,
               multiSelect_exports[variant],
@@ -1754,19 +1816,30 @@ function MultiSelect(props) {
                 Popover,
                 {
                   placement: "bottom-start",
+                  open: isPopoverOpen,
+                  onOpenChange: setIsPopoverOpen,
                   classes: {
-                    content: classnames11(popoverContent3, "styledScroll", classes?.popoverContent),
+                    content: classnames11(popoverContent3, classes?.popoverContent),
                     ...classes?.popover
                   },
                   containerOffset: 4,
+                  root: popoverInComponent ? wrapperRef.current : void 0,
                   description: /* @__PURE__ */ jsx20(
                     SelectPopover2,
                     {
                       items: items2,
-                      classes,
+                      classes: {
+                        searchInput: {
+                          root: searchInputRoot,
+                          ...classes?.selectPopover?.searchInput
+                        },
+                        menuWrapper: classnames11(menuWrapper, "styledScroll"),
+                        ...classes?.selectPopover
+                      },
                       componentSize,
                       selected: selected5,
-                      changeSelectedItem
+                      changeSelectedItem,
+                      enableSearch
                     }
                   ),
                   children: /* @__PURE__ */ jsx20("div", { ref: popoverTargetRef, className: classnames11(popoverTarget4) })
@@ -1782,7 +1855,7 @@ function MultiSelect(props) {
 
 // src/components/common/Checklist/Checklist.tsx
 import classnames12 from "classnames";
-import { useState as useState7 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/common/Checklist/checklist.module.css
 var root13 = "checklist_root";
@@ -1790,7 +1863,7 @@ var scrolled = "checklist_scrolled";
 var actionWrap = "checklist_actionWrap";
 
 // src/components/common/Checklist/utils/filterItems.ts
-var filterItems = (items2, filterText, selectedItems) => {
+var filterItems2 = (items2, filterText, selectedItems) => {
   if (!filterText) {
     return items2.filter((item3) => !selectedItems[item3.value]);
   }
@@ -1804,13 +1877,13 @@ var filterItems = (items2, filterText, selectedItems) => {
 };
 
 // src/components/common/Checklist/Checklist.tsx
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs13 } 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 [selectedItems, setSelectedItems] = useState7(selected5);
-  const filteredItems = filterItems(items2, filterSubstring, selectedItems);
+  const [filterSubstring, setFilterSubstring] = useState9("");
+  const [selectedItems, setSelectedItems] = useState9(selected5);
+  const filteredItems = filterItems2(items2, filterSubstring, selectedItems);
   const handleClick = (item3) => {
     const value = !selected5[item3.value];
     if (onChangeItem) {
@@ -1833,7 +1906,7 @@ function Checklist(props) {
     setSelectedItems(newSelected);
     actionWithSelected(newSelected);
   };
-  return /* @__PURE__ */ jsxs12("div", { className: classnames12(root13, classes?.root), children: [
+  return /* @__PURE__ */ jsxs13("div", { className: classnames12(root13, classes?.root), children: [
     !disableSearch && /* @__PURE__ */ jsx21(
       SearchInput,
       {
@@ -1845,9 +1918,9 @@ function Checklist(props) {
         onChange: (e) => setFilterSubstring(e.target.value)
       }
     ),
-    /* @__PURE__ */ jsxs12("div", { className: classnames12(scrolled, "styledScroll"), children: [
-      items2.some((item3) => !!selectedItems[item3.value]) && /* @__PURE__ */ jsxs12(Fragment3, { children: [
-        /* @__PURE__ */ jsxs12("div", { className: classnames12(actionWrap, classes?.actionWrap), children: [
+    /* @__PURE__ */ jsxs13("div", { className: classnames12(scrolled, "styledScroll"), children: [
+      items2.some((item3) => !!selectedItems[item3.value]) && /* @__PURE__ */ jsxs13(Fragment4, { children: [
+        /* @__PURE__ */ jsxs13("div", { className: classnames12(actionWrap, classes?.actionWrap), children: [
           /* @__PURE__ */ jsx21(Typography, { className: classnames12(classes?.typography), children: t("\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0435") }),
           /* @__PURE__ */ jsx21(
             Button,
@@ -1951,11 +2024,11 @@ function Layout(props) {
 
 // src/components/navigation/Tabs/Tabs.tsx
 import classnames17 from "classnames";
-import { useEffect as useEffect5, useState as useState10 } 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 useState9 } from "react";
+import { useRef as useRef8, useState as useState11 } from "react";
 
 // src/components/view/Tooltip/tooltip.module.css
 var tooltip_exports = {};
@@ -2008,7 +2081,7 @@ import { createContext as createContext2 } from "react";
 var TooltipContext = createContext2(null);
 
 // src/components/view/Tooltip/ui/TooltipContent/TooltipContent.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var TooltipContent = forwardRef5(function TooltipContent2({ styles, style, children: children2, ...props }, propRef) {
   const context = useContext5(TooltipContext);
   if (!context) {
@@ -2049,7 +2122,7 @@ var TooltipContent = forwardRef5(function TooltipContent2({ styles, style, child
     default:
       break;
   }
-  return /* @__PURE__ */ jsx24(FloatingPortal2, { root: otherContext.root, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx24(FloatingPortal2, { root: otherContext.root, children: /* @__PURE__ */ jsxs14(
     "div",
     {
       ref,
@@ -2093,7 +2166,7 @@ import {
   useInteractions as useInteractions2,
   useRole as useRole2
 } from "@floating-ui/react";
-import { useMemo as useMemo4, useState as useState8 } from "react";
+import { useMemo as useMemo4, useState as useState10 } from "react";
 function useTooltip(props = {}) {
   const {
     initialOpen = false,
@@ -2104,7 +2177,7 @@ function useTooltip(props = {}) {
     arrowRef,
     root: root22
   } = props;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState8(initialOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState10(initialOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
   const data = useFloating2({
@@ -2184,7 +2257,7 @@ var TooltipTrigger = forwardRef6(
 );
 
 // src/components/view/Tooltip/Tooltip.tsx
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function Tooltip(props) {
   const {
     label: label7,
@@ -2198,7 +2271,7 @@ function Tooltip(props) {
     children: children2,
     classes
   } = props;
-  const [showTooltip, setShowTooltip] = useState9(false);
+  const [showTooltip, setShowTooltip] = useState11(false);
   const arrowRef = useRef8(null);
   if (!label7) {
     return children2;
@@ -2206,7 +2279,7 @@ function Tooltip(props) {
   if (!children2) {
     return null;
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     TooltipProvider,
     {
       placement,
@@ -2299,7 +2372,7 @@ var tabs_default = {
 };
 
 // src/components/navigation/Tabs/Tabs.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function Tabs(props) {
   const {
     items: items2,
@@ -2315,8 +2388,8 @@ function Tabs(props) {
     value,
     classes
   } = props;
-  const [isMounted, setIsMounted] = useState10(false);
-  const [selectedTab, setSelectedTab] = useState10(defaultSelected);
+  const [isMounted, setIsMounted] = useState12(false);
+  const [selectedTab, setSelectedTab] = useState12(defaultSelected);
   const currentValue = useExternalState ? value : selectedTab;
   const handleClick = (item3) => () => {
     if (item3.isDisabled) {
@@ -2362,7 +2435,7 @@ function Tabs(props) {
       children: items2.map((item3) => {
         const isButton = !!item3.onClick;
         const isSelected = !isButton && currentValue === item3.value;
-        const tabContent = /* @__PURE__ */ jsxs15(
+        const tabContent = /* @__PURE__ */ jsxs16(
           "div",
           {
             className: classnames17(
@@ -2379,7 +2452,7 @@ function Tabs(props) {
             ),
             onClick: handleClick(item3),
             children: [
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs16(
                 "div",
                 {
                   className: classnames17(
@@ -2424,7 +2497,7 @@ import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-tabl
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import classnames22 from "classnames";
 import dayjs4 from "dayjs";
-import { Fragment as Fragment7, useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef11, useState as useState14 } from "react";
+import { Fragment as Fragment8, useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef11, useState as useState16 } from "react";
 
 // src/utils/toFirstLetterUpperCase.ts
 var toFirstLetterUpperCase = (name) => {
@@ -2436,7 +2509,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 useState11 } 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";
@@ -2597,15 +2670,15 @@ var virtualTable_default = {
 };
 
 // src/components/view/VirtualTable/ui/DefaultColumn/DefaultColumn.tsx
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs17 } 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] = useState11(initialValue);
-    const [isEdit, setIsEdit] = useState11(false);
-    const [showModal, setShowModal] = useState11(false);
+    const [value, setValue] = useState13(initialValue);
+    const [isEdit, setIsEdit] = useState13(false);
+    const [showModal, setShowModal] = useState13(false);
     const closeModalRef = useRef10();
     closeModalRef.current = () => {
       setShowModal(false);
@@ -2622,10 +2695,10 @@ 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(Fragment4, { children: /* @__PURE__ */ jsx30("input", { onChange, onBlur, value: value ?? "", autoFocus: true }) }) });
+      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 }) }) });
     }
     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(
+    return /* @__PURE__ */ jsx30(Tooltip, { label: original[id]?.error, alertType: "error", children: /* @__PURE__ */ jsxs17(
       "div",
       {
         className: classnames18(
@@ -2659,7 +2732,7 @@ var checklistWrap = "headerDropdown_checklistWrap";
 
 // src/components/view/VirtualTable/ui/DateFiltration/DateFiltration.tsx
 import classnames19 from "classnames";
-import { useEffect as useEffect7, useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState14 } from "react";
 
 // src/components/view/VirtualTable/ui/DateFiltration/dateFiltration.module.css
 var root19 = "dateFiltration_root";
@@ -2668,7 +2741,7 @@ var root19 = "dateFiltration_root";
 import { jsx as jsx31 } from "react/jsx-runtime";
 function DateFiltration(props) {
   const { defaultValues = [void 0, void 0], actionWithSelected } = props;
-  const [values, setValues] = useState12(defaultValues);
+  const [values, setValues] = useState14(defaultValues);
   const handleChangeDates = (newValues) => {
     setValues(newValues);
   };
@@ -2690,7 +2763,7 @@ function DateFiltration(props) {
 
 // src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx
 import classnames20 from "classnames";
-import { useState as useState13 } from "react";
+import { useState as useState15 } from "react";
 
 // src/components/view/VirtualTable/ui/NumberFiltration/numberFiltration.module.css
 var root20 = "numberFiltration_root";
@@ -2699,7 +2772,7 @@ var inputsContainer = "numberFiltration_inputsContainer";
 var input8 = "numberFiltration_input";
 
 // src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, 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" },
@@ -2708,10 +2781,10 @@ var items = [
 ];
 function NumberFiltration(props) {
   const { defaultValues = [-Infinity, Infinity], actionWithSelected } = props;
-  const [selectedItem, setSelectedItem] = useState13(
+  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] = useState13(defaultValues);
+  const [values, setValues] = useState15(defaultValues);
   const handleSelect = (item3) => {
     if (!!item3) {
       const newValues = [...values];
@@ -2740,7 +2813,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: classnames20(root20), children: [
+  return /* @__PURE__ */ jsxs18("div", { className: classnames20(root20), children: [
     /* @__PURE__ */ jsx32(
       Select,
       {
@@ -2753,7 +2826,7 @@ function NumberFiltration(props) {
         tabIndex: -1
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: classnames20(inputsContainer), children: selectedItem.value === "range" ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    /* @__PURE__ */ jsx32("div", { className: classnames20(inputsContainer), children: selectedItem.value === "range" ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
       /* @__PURE__ */ jsx32(
         Input,
         {
@@ -2818,7 +2891,7 @@ function NumberFiltration(props) {
 }
 
 // src/components/view/VirtualTable/ui/HeaderDropdown/HeaderDropdown.tsx
-import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function HeaderDropdown(props) {
   const {
     headerMeta: {
@@ -2841,7 +2914,7 @@ function HeaderDropdown(props) {
     children: children2
   } = props;
   const headerResultName = sortAnotherName ?? headerName;
-  const filterItems2 = useMemo5(() => {
+  const filterItems3 = 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,
@@ -2941,21 +3014,21 @@ function HeaderDropdown(props) {
   };
   const hasAnyFilter = Object.keys(filterSelectedItems).length || sortBy.some((sb) => sb.columnName === headerResultName);
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs18("div", { className: classnames21(root18), children: [
-    children2?.(showUniqueValuesCount && /* @__PURE__ */ jsx33("div", { children: `(${filterItems2.length})` })),
+  return /* @__PURE__ */ jsxs19("div", { className: classnames21(root18), children: [
+    children2?.(showUniqueValuesCount && /* @__PURE__ */ jsx33("div", { children: `(${filterItems3.length})` })),
     (sortable || filtrationByValue || filtrationByDate || filtrationByNumber) && /* @__PURE__ */ jsx33(
       Popover,
       {
         placement: "bottom-end",
         wrapTrigger: true,
         root: containerRef,
-        description: /* @__PURE__ */ jsxs18(Fragment6, { children: [
+        description: /* @__PURE__ */ jsxs19(Fragment7, { 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(
             Checklist,
             {
-              items: filterItems2,
+              items: filterItems3,
               selected: filterSelectedItems,
               actionWithSelected: actionWithSelectedObjects
             }
@@ -3100,7 +3173,7 @@ var recursiveSort = (items2, sortBy) => {
 };
 
 // src/components/view/VirtualTable/VirtualTable.tsx
-import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 function VirtualTable(props) {
   const {
     rows,
@@ -3123,8 +3196,8 @@ function VirtualTable(props) {
     showUniqueValuesCount = false
     // globalFilters,
   } = props;
-  const [filterBy, setFilterBy] = useState14([]);
-  const [sortBy, setSortBy] = useState14([{ columnName: "isNew", direction: "desc" }]);
+  const [filterBy, setFilterBy] = useState16([]);
+  const [sortBy, setSortBy] = useState16([{ columnName: "isNew", direction: "desc" }]);
   const tableContainerRef = useRef11(null);
   const memoizedColumns = useMemo6(() => getColumns(columns), [columns]);
   const memoizedData = useMemo6(() => {
@@ -3271,8 +3344,8 @@ function VirtualTable(props) {
         classes?.root
       ),
       style: height ? { height } : void 0,
-      children: /* @__PURE__ */ jsxs19("div", { ref: tableContainerRef, className: classnames22(tableContainer, "styledScroll"), children: [
-        /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs20("div", { ref: tableContainerRef, className: classnames22(tableContainer, "styledScroll"), children: [
+        /* @__PURE__ */ jsxs20(
           "div",
           {
             className: table,
@@ -3304,7 +3377,7 @@ function VirtualTable(props) {
                           headerName: header2.column.columnDef.id ?? header2.id,
                           containerRef: useTableContainerAsRootForPopup ? tableContainerRef : void 0,
                           showUniqueValuesCount,
-                          children: (afterNode) => /* @__PURE__ */ jsxs19(
+                          children: (afterNode) => /* @__PURE__ */ jsxs20(
                             "div",
                             {
                               className: classnames22(
@@ -3329,7 +3402,7 @@ function VirtualTable(props) {
                         }
                       ) });
                     };
-                    return /* @__PURE__ */ jsxs19(Fragment7, { children: [
+                    return /* @__PURE__ */ jsxs20(Fragment8, { children: [
                       [...Array(fixedColumnsCount)].map((_, index) => {
                         const header2 = headerGroup.headers[index];
                         const nextHorizontalHeaders = getNextHorizontalHeaders(
@@ -3425,7 +3498,7 @@ function VirtualTable(props) {
               ),
               virtualRows.map((virtualRow) => {
                 const row = rowsFromTable[virtualRow.index];
-                return /* @__PURE__ */ jsxs19(
+                return /* @__PURE__ */ jsxs20(
                   "div",
                   {
                     "data-index": virtualRow.index,
@@ -3480,7 +3553,7 @@ function VirtualTable(props) {
                               overflow: "hidden"
                             }
                           },
-                          children: rowButtons?.(row.original)?.map((ab) => /* @__PURE__ */ jsx34(Fragment7, { children: ab.template ? ab.template(ab) : /* @__PURE__ */ jsx34(
+                          children: rowButtons?.(row.original)?.map((ab) => /* @__PURE__ */ jsx34(Fragment8, { children: ab.template ? ab.template(ab) : /* @__PURE__ */ jsx34(
                             Tooltip,
                             {
                               label: ab.title,
@@ -3509,7 +3582,7 @@ function VirtualTable(props) {
             ]
           }
         ),
-        borders !== "none" && /* @__PURE__ */ jsxs19(Fragment8, { children: [
+        borders !== "none" && /* @__PURE__ */ jsxs20(Fragment9, { children: [
           /* @__PURE__ */ jsx34("div", { className: rightBorder, style: { height: `${rowsTotalSize + summaryHeaderHeight}px` } }),
           /* @__PURE__ */ jsx34("div", { className: bottomBorder, style: { width: `${columnsTotalSize}px` } })
         ] })
@@ -3519,14 +3592,14 @@ function VirtualTable(props) {
 }
 
 // src/components/view/TreeView/TreeView.tsx
-import { memo as memo2, useCallback as useCallback8, useMemo as useMemo7, useState as useState16 } from "react";
+import { memo as memo2, useCallback as useCallback8, useMemo as useMemo7, 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 classNames4 from "classnames";
-import { memo, useEffect as useEffect9, useState as useState15 } from "react";
+import classNames5 from "classnames";
+import { memo, useEffect as useEffect9, useState as useState17 } from "react";
 
 // src/components/view/TreeView/ui/TreeViewItem/treeViewItem.module.css
 var item2 = "treeViewItem_item";
@@ -3537,7 +3610,7 @@ var selected4 = "treeViewItem_selected";
 var selectIcon = "treeViewItem_selectIcon";
 
 // src/components/view/TreeView/ui/TreeViewItem/TreeViewItem.tsx
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var TreeViewItem_default = memo(function TreeViewItem({
   title: title2,
   value,
@@ -3549,7 +3622,7 @@ var TreeViewItem_default = memo(function TreeViewItem({
   startIcons,
   children: children2
 }) {
-  const [isOpen, setIsOpen] = useState15(false);
+  const [isOpen, setIsOpen] = useState17(false);
   useEffect9(() => {
     setIsOpen(!!searchValue);
   }, [searchValue]);
@@ -3563,10 +3636,10 @@ var TreeViewItem_default = memo(function TreeViewItem({
     }
   };
   const isSelected = selected5[value];
-  return /* @__PURE__ */ jsxs20("div", { children: [
-    /* @__PURE__ */ jsxs20("div", { className: classNames4(item2, { [selectable]: isSelectable }), onClick: handleClick, children: [
+  return /* @__PURE__ */ jsxs21("div", { children: [
+    /* @__PURE__ */ jsxs21("div", { className: classNames5(item2, { [selectable]: isSelectable }), onClick: handleClick, children: [
       hasChildren && /* @__PURE__ */ jsx35(KeyboardArrowDownIcon, {}),
-      /* @__PURE__ */ jsxs20("div", { className: classNames4(title, { [selected4]: isSelected }), children: [
+      /* @__PURE__ */ jsxs21("div", { className: classNames5(title, { [selected4]: isSelected }), children: [
         startIcon,
         /* @__PURE__ */ jsx35(Typography, { variant: "subtitle2", children: title2 }),
         isSelectable && /* @__PURE__ */ jsx35("span", { className: selectIcon, children: isSelected ? /* @__PURE__ */ jsx35(DoneIcon, {}) : /* @__PURE__ */ jsx35(AddIcon, {}) })
@@ -3609,9 +3682,9 @@ var getFilteredTree = (tree, search2) => {
 };
 
 // src/components/view/TreeView/TreeView.tsx
-import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, 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] = useState16("");
+  const [searchValue, setSearchValue] = useState18("");
   const onChangeSearchValue = useCallback8((e) => setSearchValue(e.target.value), []);
   const selectedValues = useMemo7(
     () => selected5.reduce(
@@ -3626,7 +3699,7 @@ var TreeView_default = memo2(function TreeView({ data, selected: selected5, star
   const filteredData = useMemo7(() => {
     return getFilteredTree(data, searchValue);
   }, [data, searchValue]);
-  return /* @__PURE__ */ jsxs21(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment10, { children: [
     withSearch && /* @__PURE__ */ jsx36(
       SearchInput,
       {
@@ -3656,7 +3729,7 @@ var TreeView_default = memo2(function TreeView({ data, selected: selected5, star
 });
 
 // src/components/view/Pairs/Pairs.tsx
-import classNames5 from "classnames";
+import classNames6 from "classnames";
 
 // src/components/view/Pairs/pairs.module.css
 var rowContainerBorders = "pairs_rowContainerBorders";
@@ -3667,11 +3740,11 @@ var valuesWithBorders = "pairs_valuesWithBorders";
 var dimTypography = "pairs_dimTypography";
 
 // src/components/view/Pairs/ui/TypographyWithTooltip.tsx
-import { useState as useState17 } from "react";
+import { useState as useState19 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function TypographyWithTooltip(props) {
   const { label: label7 } = props;
-  const [tooltip, setTooltip] = useState17(label7);
+  const [tooltip, setTooltip] = useState19(label7);
   return /* @__PURE__ */ jsx37(Tooltip, { label: tooltip, children: /* @__PURE__ */ jsx37(
     Typography,
     {
@@ -3689,21 +3762,21 @@ function TypographyWithTooltip(props) {
 }
 
 // src/components/view/Pairs/Pairs.tsx
-import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment11, 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: classNames5(classes?.root), children: pairs.map((pair, i) => /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx38("div", { className: classNames6(classes?.root), children: pairs.map((pair, i) => /* @__PURE__ */ jsx38(
     "div",
     {
       style: { minHeight: minRowHeight, display: "flex" },
-      className: classNames5(classes?.rowContainer, {
+      className: classNames6(classes?.rowContainer, {
         [rowContainerBorders]: showBorder
       }),
-      children: pair && /* @__PURE__ */ jsxs22(Fragment10, { children: [
+      children: pair && /* @__PURE__ */ jsxs23(Fragment11, { children: [
         /* @__PURE__ */ jsx38(
           "div",
           {
-            className: classNames5(labelsContainer, classes?.labelsContainer, {
+            className: classNames6(labelsContainer, classes?.labelsContainer, {
               [labelsWithBorders]: showBorder
             }),
             style: {
@@ -3720,7 +3793,7 @@ function Pairs(props) {
               width: column2Width,
               minWidth: column2Width
             },
-            className: classNames5(valuesContainer, classes?.valuesContainer, {
+            className: classNames6(valuesContainer, classes?.valuesContainer, {
               [valuesWithBorders]: showBorder
             }),
             children: /* @__PURE__ */ jsx38(TypographyWithTooltip, { label: pair.value })
@@ -3733,7 +3806,7 @@ function Pairs(props) {
 }
 
 // src/components/view/Card/Card.tsx
-import classNames6 from "classnames";
+import classNames7 from "classnames";
 
 // src/components/view/Card/card.module.css
 var root21 = "card_root";
@@ -3741,15 +3814,15 @@ var header = "card_header";
 var actions = "card_actions";
 
 // src/components/view/Card/Card.tsx
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs24 } 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(root21, classes?.root) }, children: [
-    (!!title2 || !!actions2) && /* @__PURE__ */ jsxs23("div", { className: header, children: [
+  return /* @__PURE__ */ jsxs24(Surface, { type: surfaceType, classes: { root: classNames7(root21, classes?.root) }, children: [
+    (!!title2 || !!actions2) && /* @__PURE__ */ jsxs24("div", { className: header, children: [
       title2 ?? /* @__PURE__ */ jsx39("div", {}),
-      !!actions2 && /* @__PURE__ */ jsx39("div", { className: classNames6(actions, classes?.actions), children: actions2 })
+      !!actions2 && /* @__PURE__ */ jsx39("div", { className: classNames7(actions, classes?.actions), children: actions2 })
     ] }),
-    /* @__PURE__ */ jsx39("div", { className: classNames6(classes?.body), children: children2 })
+    /* @__PURE__ */ jsx39("div", { className: classNames7(classes?.body), children: children2 })
   ] });
 }
 export {

package/package.json

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