nntc-ui 0.0.52 → 0.0.54

package/index.d.ts

@@ -304,7 +304,9 @@ type Borders = 'all' | 'horizontal' | 'vertical' | 'none';
 interface Props$7 {
     rows: TableRow[];
     columns: TableColumn[];
-    additionalColumnsViews?: (id: string, value: string | number | undefined) => {
+    additionalColumnsViews?: (id: string, value: string | number | undefined, payload: {
+        [key: string]: string;
+    } | undefined) => {
         edit: ((onChange: (e: ChangeEvent) => void, onBlur: () => void) => JSX.Element | null) | null;
         view: JSX.Element | null;
     };

package/index.js

@@ -1566,9 +1566,9 @@ var WrapForLabel = (props) => {
 // src/components/common/MultiSelect/MultiSelect.tsx
 import classnames12 from "classnames";
 import {
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo4,
+  useMemo as useMemo5,
   useRef as useRef7,
   useState as useState8
 } from "react";
@@ -1649,11 +1649,11 @@ var multiSelect_default = {
 
 // src/components/common/MultiSelect/ui/SelectPopover/SelectPopover.tsx
 import classNames4 from "classnames";
-import { useCallback as useCallback6, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo4 } from "react";
 
 // src/components/common/Checklist/Checklist.tsx
 import classnames11 from "classnames";
-import { useState as useState7 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo3, useState as useState7 } from "react";
 
 // src/components/common/Checklist/checklist.module.css
 var root13 = "checklist_root";
@@ -1680,30 +1680,47 @@ 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 handleClick = (item3) => {
-    const value = !selected5[item3.value];
-    if (onChangeItem) {
-      onChangeItem?.(item3);
-    }
-    const newSelected = { ...selected5, [item3.value]: value };
-    setSelectedItems(newSelected);
-    actionWithSelected(newSelected);
-  };
-  const onSelectAll = () => {
-    let newSelected = { ...selected5 };
+  const filteredItems = useMemo3(() => {
+    return filterItems(items2, filterSubstring, selected5);
+  }, [items2, filterSubstring, selected5]);
+  const selectedItemsList = useMemo3(() => {
+    return items2.filter((item3) => !!selected5[item3.value]);
+  }, [items2, selected5]);
+  const handleClick = useCallback6(
+    (item3) => {
+      const value = !selected5[item3.value];
+      if (onChangeItem) {
+        onChangeItem(item3);
+      }
+      const newSelected = { ...selected5, [item3.value]: value };
+      actionWithSelected(newSelected);
+    },
+    [selected5, onChangeItem, actionWithSelected]
+  );
+  const onSelectAll = useCallback6(() => {
+    const newSelected = { ...selected5 };
     filteredItems.forEach((item3) => {
-      newSelected = { ...newSelected, [item3.value]: true };
+      newSelected[item3.value] = true;
     });
-    setSelectedItems(newSelected);
     actionWithSelected(newSelected);
-  };
-  const onUnSelectAll = () => {
-    const newSelected = {};
-    setSelectedItems(newSelected);
+  }, [selected5, filteredItems, actionWithSelected]);
+  const onUnSelectAll = useCallback6(() => {
+    const newSelected = { ...selected5 };
+    selectedItemsList.forEach((item3) => {
+      delete newSelected[item3.value];
+    });
     actionWithSelected(newSelected);
-  };
+  }, [selected5, selectedItemsList, actionWithSelected]);
+  const handleFilterChange = useCallback6((e) => {
+    setFilterSubstring(e.target.value);
+  }, []);
+  const handleCheckboxChange = useCallback6(
+    (item3) => (e) => {
+      e.stopPropagation();
+      handleClick(item3);
+    },
+    [handleClick]
+  );
   return /* @__PURE__ */ jsxs11("div", { className: classnames11(root13, classes?.root), children: [
     !disableSearch && /* @__PURE__ */ jsx19(
       SearchInput,
@@ -1713,11 +1730,11 @@ function Checklist(props) {
         value: filterSubstring,
         fullWidth: true,
         classes: classes?.searchInput,
-        onChange: (e) => setFilterSubstring(e.target.value)
+        onChange: handleFilterChange
       }
     ),
     /* @__PURE__ */ jsxs11("div", { className: classnames11(scrolled, "styledScroll", classes?.scrolled), children: [
-      items2.some((item3) => !!selectedItems[item3.value]) && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      selectedItemsList.length > 0 && /* @__PURE__ */ jsxs11(Fragment3, { 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(
@@ -1732,15 +1749,12 @@ function Checklist(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx19("div", { children: items2.filter((item3) => !!selectedItems[item3.value]).map((item3) => /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx19("div", { children: selectedItemsList.map((item3) => /* @__PURE__ */ jsx19(
           Checkbox,
           {
             label: item3.name,
-            defaultChecked: !!selected5[item3.value],
-            onClick: (e) => {
-              e.stopPropagation();
-              handleClick(item3);
-            },
+            checked: !!selected5[item3.value],
+            onChange: handleCheckboxChange(item3),
             disabled: isDisabled,
             classes: classes?.checkbox
           },
@@ -1762,11 +1776,8 @@ function Checklist(props) {
         Checkbox,
         {
           label: item3.name,
-          defaultChecked: !!selected5[item3.value],
-          onClick: (e) => {
-            e.stopPropagation();
-            handleClick(item3);
-          },
+          checked: !!selected5[item3.value],
+          onChange: handleCheckboxChange(item3),
           disabled: isDisabled,
           classes: classes?.checkbox
         },
@@ -1780,21 +1791,21 @@ function Checklist(props) {
 import { jsx as jsx20 } from "react/jsx-runtime";
 function SelectPopover2(props) {
   const { items: items2, selected: selected5, onSelectedChange, classes, enableSearch = false, disabled: disabled2 } = props;
-  const checklistItems = useMemo3(
+  const checklistItems = useMemo4(
     () => items2.map((item3) => ({
       name: item3.name,
       value: item3.value
     })),
     [items2]
   );
-  const selectedItems = useMemo3(() => {
+  const selectedItems = useMemo4(() => {
     const result = {};
     selected5?.forEach((value) => {
       result[value] = true;
     });
     return result;
   }, [selected5]);
-  const handleActionWithSelected = useCallback6(
+  const handleActionWithSelected = useCallback7(
     (newSelected) => {
       const values = Object.entries(newSelected).reduce((acc, [value, isSelected]) => {
         if (isSelected) {
@@ -1881,8 +1892,8 @@ function MultiSelect(props) {
       resizeObserver.disconnect();
     };
   }, []);
-  const activeItems = useMemo4(() => items2.filter((i) => selected5?.includes(i.value)), [selected5, items2]);
-  const inputClickHandler = useCallback7(
+  const activeItems = useMemo5(() => items2.filter((i) => selected5?.includes(i.value)), [selected5, items2]);
+  const inputClickHandler = useCallback8(
     (e) => {
       e.preventDefault();
       if (!disabled2) {
@@ -1891,13 +1902,13 @@ function MultiSelect(props) {
     },
     [disabled2]
   );
-  const handleSelectedChange = useCallback7(
+  const handleSelectedChange = useCallback8(
     (newValues) => {
       onValueChange?.(newValues);
     },
     [onValueChange]
   );
-  const title2 = useMemo4(() => {
+  const title2 = useMemo5(() => {
     if (!activeItems.length)
       return "";
     return getTitle(titleType, activeItems, t);
@@ -2190,7 +2201,7 @@ import {
   useInteractions as useInteractions2,
   useRole as useRole2
 } from "@floating-ui/react";
-import { useMemo as useMemo5, useState as useState9 } from "react";
+import { useMemo as useMemo6, useState as useState9 } from "react";
 function useTooltip(props = {}) {
   const {
     initialOpen = false,
@@ -2231,7 +2242,7 @@ function useTooltip(props = {}) {
   const dismiss = useDismiss2(context);
   const role = useRole2(context, { role: "tooltip" });
   const interactions = useInteractions2([hover, focus, dismiss, role]);
-  return useMemo5(
+  return useMemo6(
     () => ({
       open,
       setOpen,
@@ -2521,7 +2532,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 useCallback8, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef11, useState as useState15 } from "react";
+import { Fragment as Fragment7, useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef11, useState as useState15 } from "react";
 
 // src/utils/toFirstLetterUpperCase.ts
 var toFirstLetterUpperCase = (name) => {
@@ -2713,7 +2724,7 @@ var DefaultColumn = {
     useEffect6(() => {
       setValue(initialValue);
     }, [initialValue]);
-    const additionalViewResult = tableMeta?.additionalColumnsViews?.(id, initialValue);
+    const additionalViewResult = tableMeta?.additionalColumnsViews?.(id, initialValue, original[id]?.payload);
     if (isEdit && meta?.editable) {
       const onBlur = () => {
         tableMeta?.updateData(index, id, value, original);
@@ -2752,7 +2763,7 @@ var DefaultColumn = {
 
 // src/components/view/VirtualTable/ui/HeaderDropdown/HeaderDropdown.tsx
 import classnames21 from "classnames";
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/components/view/VirtualTable/ui/HeaderDropdown/headerDropdown.module.css
 var root18 = "headerDropdown_root";
@@ -2971,7 +2982,7 @@ function HeaderDropdown(props) {
     rows
   } = props;
   const headerResultName = sortAnotherName ?? headerName;
-  const filterItems2 = useMemo6(() => {
+  const filterItems2 = useMemo7(() => {
     const checklistItems = items2.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 >",
@@ -2995,7 +3006,7 @@ function HeaderDropdown(props) {
     ];
     return uniqueChecklistItems;
   }, [items2, headerResultName]);
-  const uniqueRows = useMemo6(
+  const uniqueRows = useMemo7(
     () => Array.from(
       new Set(
         rows.filter((i) => !!i?.[headerResultName]).map((i) => i[headerResultName].payload?.id ?? i[headerResultName].value)
@@ -3003,17 +3014,17 @@ function HeaderDropdown(props) {
     ),
     [rows, headerResultName]
   );
-  const filterSelectedItems = useMemo6(() => {
+  const filterSelectedItems = useMemo7(() => {
     const result = {};
     filterBy.find((fb) => fb.columnName === headerResultName)?.values.forEach((v) => {
       result[v] = true;
     });
     return result;
   }, [filterBy, headerResultName]);
-  const filterNumbers = useMemo6(() => {
+  const filterNumbers = useMemo7(() => {
     return filterBy.find((fb) => fb.columnName === headerResultName && fb.type === "numberRange")?.values;
   }, [filterBy, headerResultName]);
-  const filterDates = useMemo6(() => {
+  const filterDates = useMemo7(() => {
     return filterBy.find((fb) => fb.columnName === headerResultName && fb.type === "dateRange")?.values;
   }, [filterBy, headerResultName]);
   const handleSortClick = (direction) => () => {
@@ -3284,8 +3295,8 @@ function VirtualTable(props) {
   const [filterBy, setFilterBy] = useState15(globalFilters ?? []);
   const [sortBy, setSortBy] = useState15([...globalSorts ?? [], { columnName: "isNew", direction: "desc" }]);
   const tableContainerRef = useRef11(null);
-  const memoizedColumns = useMemo7(() => getColumns(columns), [columns]);
-  const memoizedData = useMemo7(() => {
+  const memoizedColumns = useMemo8(() => getColumns(columns), [columns]);
+  const memoizedData = useMemo8(() => {
     const newRows = [...rows];
     const nextFilterBy = filterBy.filter((filterByItem) => {
       const startDate = filterByItem.type === "dateRange" ? dayjs4(filterByItem.values[0]) : null;
@@ -3306,7 +3317,7 @@ function VirtualTable(props) {
     );
     return sorted;
   }, [rows, sortBy, filterBy]);
-  const columnsEstimateSize = useMemo7(
+  const columnsEstimateSize = useMemo8(
     () => cellWidth ?? ((index) => memoizedColumns[index]?.meta?.width ?? 200),
     [cellWidth, memoizedColumns]
   );
@@ -3340,7 +3351,7 @@ function VirtualTable(props) {
   const columnVirtualizer = useVirtualizer({
     horizontal: true,
     count: headerGroups[0]?.headers.length ?? 1,
-    rangeExtractor: useCallback8((range) => {
+    rangeExtractor: useCallback9((range) => {
       const stickyIndexes = [...Array(fixedColumnsCount)].map((_, index) => index);
       const next = /* @__PURE__ */ new Set([...stickyIndexes, ...defaultRangeExtractor(range)]);
       return [...next].sort((a, b) => a - b);
@@ -3349,11 +3360,11 @@ function VirtualTable(props) {
     estimateSize: columnsEstimateSize,
     overscan: 5
   });
-  const fixedColumnsWidth = useMemo7(
+  const fixedColumnsWidth = useMemo8(
     () => [...Array(fixedColumnsCount)].reduce((sum, _, index) => sum + columnsEstimateSize(index), 0),
     [fixedColumnsCount, columnsEstimateSize]
   );
-  const headerGroupHeight = useMemo7(() => {
+  const headerGroupHeight = useMemo8(() => {
     const delta = headerGroups.length - headerRowHeight.length;
     const result = [...headerRowHeight];
     if (delta > 0) {
@@ -3363,14 +3374,14 @@ function VirtualTable(props) {
     }
     return result;
   }, [headerRowHeight, headerGroups]);
-  const summaryHeaderHeight = useMemo7(
+  const summaryHeaderHeight = useMemo8(
     () => headerGroupHeight.reduce(
       (sum, current, currentIndex) => currentIndex < headerGroups.length ? sum + current : sum,
       0
     ),
     [headerGroupHeight, headerGroups]
   );
-  const headerGroupY = useCallback8(
+  const headerGroupY = useCallback9(
     (headerIndex) => headerGroupHeight.reduce((sum, current, currentIndex) => currentIndex < headerIndex ? sum + current : sum, 0),
     [headerGroupHeight, headerGroups]
   );
@@ -3690,7 +3701,7 @@ function VirtualTable(props) {
 }
 
 // src/components/view/TreeView/TreeView.tsx
-import { memo as memo2, useCallback as useCallback9, useMemo as useMemo8, useState as useState17 } from "react";
+import { memo as memo2, useCallback as useCallback10, useMemo as useMemo9, useState as useState17 } from "react";
 
 // src/components/view/TreeView/treeView.module.css
 var search = "treeView_search";
@@ -3783,8 +3794,8 @@ var getFilteredTree = (tree, search2) => {
 import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var TreeView_default = memo2(function TreeView({ data, selected: selected5, startIcons, onSelect, withSearch = false }) {
   const [searchValue, setSearchValue] = useState17("");
-  const onChangeSearchValue = useCallback9((e) => setSearchValue(e.target.value), []);
-  const selectedValues = useMemo8(
+  const onChangeSearchValue = useCallback10((e) => setSearchValue(e.target.value), []);
+  const selectedValues = useMemo9(
     () => selected5.reduce(
       (acc, cur) => {
         acc[cur] = true;
@@ -3794,7 +3805,7 @@ var TreeView_default = memo2(function TreeView({ data, selected: selected5, star
     ),
     [selected5]
   );
-  const filteredData = useMemo8(() => {
+  const filteredData = useMemo9(() => {
     return getFilteredTree(data, searchValue);
   }, [data, searchValue]);
   return /* @__PURE__ */ jsxs21(Fragment9, { children: [

package/package.json

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