nntc-ui 0.0.87 → 0.0.89

package/{chunk-AV32MYLN.js → chunk-OJNXOQUW.js}

@@ -142,9 +142,7 @@ import { jsx as jsx23 } from "react/jsx-runtime";
 var AlertIcon = (props) => /* @__PURE__ */ jsx23(Icon, { ...props, children: /* @__PURE__ */ jsx23(
   "path",
   {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M23 21.5L12 2.5L1 21.5H23ZM11 18.5V16.5H13V18.5H11ZM11 14.5H13V10.5H11V14.5Z"
+    d: "M23 21.5H1L12 2.5L23 21.5ZM4.47005 19.5H19.53L12 6.48959L4.47005 19.5ZM13 18.5H11V16.5H13V18.5ZM13 10.5V14.5H11V10.5H13Z"
   }
 ) });
 

package/icons/index.js

@@ -39,7 +39,7 @@ import {
   UploadIcon,
   VisibilityIcon,
   WellIcon
-} from "../chunk-AV32MYLN.js";
+} from "../chunk-OJNXOQUW.js";
 export {
   AddIcon,
   AlertIcon,

package/index.js

@@ -19,7 +19,7 @@ import {
   SortDownIcon,
   SortUpIcon,
   __export
-} from "./chunk-AV32MYLN.js";
+} from "./chunk-OJNXOQUW.js";
 
 // src/components/common/Button/Button.tsx
 import classnames from "classnames";
@@ -106,7 +106,7 @@ var Button = forwardRef(function Button2({ variant = "filled", size = "medium",
 
 // src/components/common/Checkbox/Checkbox.tsx
 import classnames3 from "classnames";
-import { useEffect, useId, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { mergeRefs } from "react-merge-refs";
 
 // src/components/view/Typography/Typography.tsx
@@ -178,6 +178,17 @@ var Typography = forwardRef2(function Typography2({ variant = "body2", component
   );
 });
 
+// src/hooks/useCompatId.ts
+import * as React from "react";
+import { useMemo } from "react";
+function useCompatId() {
+  const react = React;
+  if (typeof react.useId === "function") {
+    return react.useId();
+  }
+  return useMemo(() => `nntc-ui-${Math.random().toString(36).slice(2, 11)}`, []);
+}
+
 // src/components/common/Checkbox/checkbox.module.css
 var root2 = "checkbox_root";
 var input = "checkbox_input";
@@ -194,7 +205,7 @@ import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function Checkbox(props) {
   const { label: label10, several: several2, componentSize = "medium", classes, id, ref, ...inputProps } = props;
   const inputRef = useRef(null);
-  const generatedId = useId();
+  const generatedId = useCompatId();
   const inputId = id ?? generatedId;
   useEffect(() => {
     const el = inputRef.current;
@@ -262,7 +273,7 @@ var popover_default = {
 };
 
 // src/components/view/Popover/ui/PopoverContent/PopoverContent.tsx
-import { FloatingFocusManager, FloatingPortal, useId as useId2, useMergeRefs } from "@floating-ui/react";
+import { FloatingFocusManager, FloatingPortal, useId, useMergeRefs } from "@floating-ui/react";
 import { forwardRef as forwardRef3, useContext, useLayoutEffect } from "react";
 
 // src/components/view/Popover/ui/PopoverProvider/constants/PopoverContext.ts
@@ -278,7 +289,7 @@ var PopoverContent = forwardRef3(function PopoverContent2({ styles, style, child
   }
   const { context: floatingContext, ...otherContext } = context;
   const ref = useMergeRefs([otherContext.refs.setFloating, propRef]);
-  const id = useId2();
+  const id = useId();
   useLayoutEffect(() => {
     context.setDescriptionId(id);
     return () => context.setDescriptionId(void 0);
@@ -310,7 +321,7 @@ import {
   useInteractions,
   useRole
 } from "@floating-ui/react";
-import { useMemo, useState } from "react";
+import { useMemo as useMemo2, useState } from "react";
 function usePopover(props = {}) {
   const {
     initialOpen = false,
@@ -347,7 +358,7 @@ function usePopover(props = {}) {
   const dismiss = useDismiss(context);
   const role = useRole(context);
   const interactions = useInteractions([click, dismiss, role]);
-  return useMemo(
+  return useMemo2(
     () => ({
       open,
       setOpen,
@@ -825,7 +836,7 @@ function Select(props) {
 // src/components/common/DateTime/DateTime.tsx
 import classnames7 from "classnames";
 import defaultDayjs2 from "dayjs";
-import { forwardRef as forwardRef5, useCallback as useCallback5, useEffect as useEffect5, useId as useId3, useRef as useRef4, useState as useState5 } from "react";
+import { forwardRef as forwardRef5, useCallback as useCallback5, useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 import { mergeRefs as mergeRefs3 } from "react-merge-refs";
 
 // src/components/common/DateTime/dateTime.module.css
@@ -875,7 +886,7 @@ var dateTime_default = {
 // src/components/common/DateTime/ui/CalendarPopover/CalendarPopover.tsx
 import classNames3 from "classnames";
 import defaultDayjs from "dayjs";
-import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo4, useState as useState4 } from "react";
 
 // src/components/common/DateTime/ui/CalendarPopover/calendarPopover.module.css
 var calendarPopover_exports = {};
@@ -968,7 +979,7 @@ var calendarPopover_default = {
 
 // src/components/common/DateTime/ui/TimeWheelColumn/TimeWheelColumn.tsx
 import classNames2 from "classnames";
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
 
 // src/components/common/DateTime/ui/TimeWheelColumn/timeWheelColumn.module.css
 var timeWheel = "timeWheelColumn_timeWheel";
@@ -985,7 +996,7 @@ function TimeWheelColumn(props) {
   const valuesLength = values.length;
   const centerPosition = (valuesLength + selectedValue) * TIME_ITEM_HEIGHT;
   const containerRef = useRef3(null);
-  const cycledValues = useMemo2(() => {
+  const cycledValues = useMemo3(() => {
     const repeatedValues = [];
     for (let i = 0; i < TIME_CYCLE_REPEAT; i += 1) {
       repeatedValues.push(...values);
@@ -1083,24 +1094,24 @@ function CalendarPopover(props) {
   const [selectedMinute, setSelectedMinute] = useState4(
     isDateTimeSingle && initStartDate ? dayjs3(initStartDate).minute() : 0
   );
-  const hours = useMemo3(() => [...Array(24)].map((__, index) => index), []);
-  const minutes = useMemo3(() => [...Array(60)].map((__, index) => index), []);
-  const startDateDay = useMemo3(
+  const hours = useMemo4(() => [...Array(24)].map((__, index) => index), []);
+  const minutes = useMemo4(() => [...Array(60)].map((__, index) => index), []);
+  const startDateDay = useMemo4(
     () => startDate ? dayjs3(startDate).startOf("D").valueOf() : void 0,
     [startDate, dayjs3]
   );
-  const endDateDay = useMemo3(() => endDate ? dayjs3(endDate).startOf("D").valueOf() : void 0, [endDate, dayjs3]);
-  const startDateMonth = useMemo3(
+  const endDateDay = useMemo4(() => endDate ? dayjs3(endDate).startOf("D").valueOf() : void 0, [endDate, dayjs3]);
+  const startDateMonth = useMemo4(
     () => startDateDay ? dayjs3(startDateDay).startOf("M").valueOf() : void 0,
     [startDateDay, dayjs3]
   );
-  const endDateMonth = useMemo3(
+  const endDateMonth = useMemo4(
     () => endDateDay ? dayjs3(endDateDay).startOf("M").valueOf() : void 0,
     [endDateDay, dayjs3]
   );
-  const startYear = useMemo3(() => startDateDay ? dayjs3(startDateDay).year() : void 0, [startDateDay, dayjs3]);
-  const endYear = useMemo3(() => endDateDay ? dayjs3(endDateDay).year() : void 0, [endDateDay, dayjs3]);
-  const currentDate = useMemo3(
+  const startYear = useMemo4(() => startDateDay ? dayjs3(startDateDay).year() : void 0, [startDateDay, dayjs3]);
+  const endYear = useMemo4(() => endDateDay ? dayjs3(endDateDay).year() : void 0, [endDateDay, dayjs3]);
+  const currentDate = useMemo4(
     () => dayjs3(new Date(currentItem.year, currentItem.month, 1)).startOf(viewType === "month" ? "M" : "y"),
     [currentItem, viewType, dayjs3]
   );
@@ -1231,7 +1242,7 @@ function CalendarPopover(props) {
     },
     [applyTimeToDate, endDate, isDateTimeSingle, isPeriod, selectedHour, selectedMinute, startDate, startDateDay]
   );
-  const yearsRangeStart = useMemo3(() => {
+  const yearsRangeStart = useMemo4(() => {
     const year2 = currentDate.year();
     return Math.floor(year2 / 20) * 20;
   }, [currentDate]);
@@ -1559,7 +1570,7 @@ var DateTime = forwardRef5(
     }, [stateValues]);
     const effectiveValueType = isPeriod && valueType === "dateTime" ? "date" : valueType;
     const inputRef = useRef4(null);
-    const reactId = useId3();
+    const reactId = useCompatId();
     const inputId = id ?? reactId;
     const inputFocusHandler = useCallback5(
       (event) => {
@@ -1834,7 +1845,7 @@ var ColorPicker = (props) => {
 
 // src/components/common/Input/Input.tsx
 import classnames8 from "classnames";
-import { forwardRef as forwardRef6, useId as useId4, useRef as useRef6, useState as useState7 } from "react";
+import { forwardRef as forwardRef6, useRef as useRef6, useState as useState7 } from "react";
 import { mergeRefs as mergeRefs5 } from "react-merge-refs";
 
 // src/components/common/Input/input.module.css
@@ -1904,7 +1915,7 @@ var Input = forwardRef6(
   }, ref) => {
     const inputRef = useRef6(null);
     const [fileName2, setFileName] = useState7("");
-    const reactId = useId4();
+    const reactId = useCompatId();
     const inputId = id ?? reactId;
     const isFile = type === "file";
     const handleFileChange = (e) => {
@@ -2119,7 +2130,7 @@ import classnames12 from "classnames";
 import {
   useCallback as useCallback9,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef8,
   useState as useState9
 } from "react";
@@ -2200,11 +2211,11 @@ var multiSelect_default = {
 
 // src/components/common/MultiSelect/ui/SelectPopover/SelectPopover.tsx
 import classNames5 from "classnames";
-import { useCallback as useCallback8, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo6 } from "react";
 
 // src/components/common/Checklist/Checklist.tsx
 import classnames11 from "classnames";
-import { useCallback as useCallback7, useMemo as useMemo4, useState as useState8 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo5, useState as useState8 } from "react";
 
 // src/components/common/Checklist/checklist.module.css
 var root13 = "checklist_root";
@@ -2231,10 +2242,10 @@ function Checklist(props) {
   const { items: items2, selected: selected6, disableSearch, isDisabled, actionWithSelected, onChangeItem, classes } = props;
   const { t } = useTranslation();
   const [filterSubstring, setFilterSubstring] = useState8("");
-  const filteredItems = useMemo4(() => {
+  const filteredItems = useMemo5(() => {
     return filterItems(items2, filterSubstring, selected6);
   }, [items2, filterSubstring, selected6]);
-  const selectedItemsList = useMemo4(() => {
+  const selectedItemsList = useMemo5(() => {
     return items2.filter((item3) => !!selected6[item3.value]);
   }, [items2, selected6]);
   const handleClick = useCallback7(
@@ -2342,14 +2353,14 @@ function Checklist(props) {
 import { jsx as jsx21 } from "react/jsx-runtime";
 function SelectPopover2(props) {
   const { items: items2, selected: selected6, onSelectedChange, classes, enableSearch = false, disabled: disabled2 } = props;
-  const checklistItems = useMemo5(
+  const checklistItems = useMemo6(
     () => items2.map((item3) => ({
       name: item3.name,
       value: item3.value
     })),
     [items2]
   );
-  const selectedItems = useMemo5(() => {
+  const selectedItems = useMemo6(() => {
     const result = {};
     selected6?.forEach((value) => {
       result[value] = true;
@@ -2446,7 +2457,7 @@ function MultiSelect(props) {
       resizeObserver.disconnect();
     };
   }, []);
-  const activeItems = useMemo6(() => items2.filter((i) => selected6?.includes(i.value)), [selected6, items2]);
+  const activeItems = useMemo7(() => items2.filter((i) => selected6?.includes(i.value)), [selected6, items2]);
   const inputClickHandler = useCallback9(
     (e) => {
       e.preventDefault();
@@ -2462,7 +2473,7 @@ function MultiSelect(props) {
     },
     [onValueChange]
   );
-  const title2 = useMemo6(() => {
+  const title2 = useMemo7(() => {
     if (!activeItems.length)
       return "";
     return getTitle(titleType, activeItems, t);
@@ -2569,7 +2580,7 @@ function MultiSelect(props) {
 
 // src/components/common/RadioButton/RadioButton.tsx
 import classnames13 from "classnames";
-import { useCallback as useCallback10, useEffect as useEffect6, useId as useId5, useRef as useRef9 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect6, useRef as useRef9 } from "react";
 import { mergeRefs as mergeRefs8 } from "react-merge-refs";
 
 // src/components/common/RadioButton/radioButton.module.css
@@ -2588,7 +2599,7 @@ function RadioButton(props) {
   const { label: label10, componentSize = "medium", canUncheck, onUncheck, classes, id, ref, onClick, ...inputProps } = props;
   const inputRef = useRef9(null);
   const wasCheckedRef = useRef9(false);
-  const generatedId = useId5();
+  const generatedId = useCompatId();
   const inputId = id ?? generatedId;
   useEffect6(() => {
     const el = inputRef.current;
@@ -2826,7 +2837,7 @@ import {
   useInteractions as useInteractions2,
   useRole as useRole2
 } from "@floating-ui/react";
-import { useMemo as useMemo7, useState as useState10 } from "react";
+import { useMemo as useMemo8, useState as useState10 } from "react";
 function useTooltip(props = {}) {
   const {
     initialOpen = false,
@@ -2867,7 +2878,7 @@ function useTooltip(props = {}) {
   const dismiss = useDismiss2(context);
   const role = useRole2(context, { role: "tooltip" });
   const interactions = useInteractions2([hover, focus, dismiss, role]);
-  return useMemo7(
+  return useMemo8(
     () => ({
       open,
       setOpen,
@@ -3163,7 +3174,7 @@ import {
   useCallback as useCallback13,
   useEffect as useEffect10,
   useImperativeHandle,
-  useMemo as useMemo9,
+  useMemo as useMemo10,
   useRef as useRef13,
   useState as useState16
 } from "react";
@@ -3450,7 +3461,7 @@ var DefaultColumn = {
 
 // src/components/view/VirtualTable/ui/HeaderDropdown/HeaderDropdown.tsx
 import classnames22 from "classnames";
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 
 // src/components/view/VirtualTable/ui/HeaderDropdown/headerDropdown.module.css
 var root19 = "headerDropdown_root";
@@ -3701,7 +3712,7 @@ function HeaderDropdown(props) {
     rows
   } = props;
   const headerResultName = sortAnotherName ?? headerName;
-  const filterItems2 = useMemo8(() => {
+  const filterItems2 = useMemo9(() => {
     const checklistItems = rows.map(
       (i) => ({
         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 >",
@@ -3725,7 +3736,7 @@ function HeaderDropdown(props) {
     ];
     return uniqueChecklistItems;
   }, [rows, headerResultName, valueFormat, toFixed]);
-  const uniqueRows = useMemo8(
+  const uniqueRows = useMemo9(
     () => Array.from(
       new Set(
         rows.filter((row) => !!row?.[headerResultName]).map((row) => row[headerResultName].payload?.id ?? row[headerResultName].value)
@@ -3733,17 +3744,17 @@ function HeaderDropdown(props) {
     ),
     [rows, headerResultName]
   );
-  const filterSelectedItems = useMemo8(() => {
+  const filterSelectedItems = useMemo9(() => {
     const result = {};
     filterBy.find((fb) => fb.columnName === headerResultName)?.values.forEach((v) => {
       result[v] = true;
     });
     return result;
   }, [filterBy, headerResultName]);
-  const filterNumbers = useMemo8(() => {
+  const filterNumbers = useMemo9(() => {
     return filterBy.find((fb) => fb.columnName === headerResultName && fb.type === "numberRange")?.values;
   }, [filterBy, headerResultName]);
-  const filterDates = useMemo8(() => {
+  const filterDates = useMemo9(() => {
     return filterBy.find((fb) => fb.columnName === headerResultName && fb.type === "dateRange")?.values;
   }, [filterBy, headerResultName]);
   const handleSortClick = (direction) => () => {
@@ -4023,8 +4034,8 @@ var VirtualTable = forwardRef10((props, ref) => {
   const [filterBy, setFilterBy] = useState16(globalFilters ?? []);
   const [sortBy, setSortBy] = useState16([...globalSorts ?? [], { columnName: "isNew", direction: "desc" }]);
   const tableContainerRef = useRef13(null);
-  const rowNumberColumnId = useMemo9(() => showRowsNumbers ? `rowNumber_${uuidv44()}` : null, [showRowsNumbers]);
-  const memoizedColumns = useMemo9(() => {
+  const rowNumberColumnId = useMemo10(() => showRowsNumbers ? `rowNumber_${uuidv44()}` : null, [showRowsNumbers]);
+  const memoizedColumns = useMemo10(() => {
     if (!rowNumberColumnId) {
       return getColumns(columns);
     }
@@ -4038,7 +4049,7 @@ var VirtualTable = forwardRef10((props, ref) => {
     const result = getColumns(nextColumns);
     return result;
   }, [columns, rowNumberColumnId]);
-  const memoizedData = useMemo9(() => {
+  const memoizedData = useMemo10(() => {
     const newRows = [...rows];
     const nextFilterBy = filterBy.filter((filterByItem) => {
       const startDate = filterByItem.type === "dateRange" ? dayjs2(filterByItem.values[0]) : null;
@@ -4065,11 +4076,11 @@ var VirtualTable = forwardRef10((props, ref) => {
     );
     return result;
   }, [rows, sortBy, filterBy, rowNumberColumnId]);
-  const partialFiltered = useMemo9(() => {
+  const partialFiltered = useMemo10(() => {
     const newRows = [...rows];
     return Array.from({ length: filterBy.length + 1 }, (_, i) => recursiveFilter(newRows, filterBy.slice(0, i)));
   }, [rows, filterBy]);
-  const columnsEstimateSize = useMemo9(
+  const columnsEstimateSize = useMemo10(
     () => cellWidth ?? ((index) => rowNumberColumnId && index === 0 ? memoizedData.length.toString().length * 8 + 24 : memoizedColumns[index]?.meta?.width ?? 200),
     [cellWidth, memoizedColumns, memoizedData, rowNumberColumnId]
   );
@@ -4113,11 +4124,11 @@ var VirtualTable = forwardRef10((props, ref) => {
     estimateSize: columnsEstimateSize,
     overscan: 5
   });
-  const fixedColumnsWidth = useMemo9(
+  const fixedColumnsWidth = useMemo10(
     () => [...Array(fixedWithNumbersCount)].reduce((sum, _, index) => sum + columnsEstimateSize(index), 0),
     [fixedWithNumbersCount, columnsEstimateSize]
   );
-  const headerGroupHeight = useMemo9(() => {
+  const headerGroupHeight = useMemo10(() => {
     const delta = headerGroups.length - headerRowHeight.length;
     const result = [...headerRowHeight];
     if (delta > 0) {
@@ -4127,7 +4138,7 @@ var VirtualTable = forwardRef10((props, ref) => {
     }
     return result;
   }, [headerRowHeight, headerGroups]);
-  const summaryHeaderHeight = useMemo9(
+  const summaryHeaderHeight = useMemo10(
     () => headerGroupHeight.reduce(
       (sum, current, currentIndex) => currentIndex < headerGroups.length ? sum + current : sum,
       0
@@ -4194,7 +4205,7 @@ var VirtualTable = forwardRef10((props, ref) => {
   const virtualRows = rowVirtualizer.getVirtualItems();
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const lastVirtualColumnIndex = virtualColumns[virtualColumns.length - 1]?.index;
-  const virtualRowsSizeByIndex = useMemo9(
+  const virtualRowsSizeByIndex = useMemo10(
     () => new Map(virtualRows.map((item3) => [item3.index, item3.size])),
     [virtualRows]
   );
@@ -4235,7 +4246,7 @@ var VirtualTable = forwardRef10((props, ref) => {
     }
     return rowIndex % 2 !== 0 ? "var(--theme-table-even-row)" : "var(--theme-table-background)";
   }, []);
-  const rowZIndexByIndex = useMemo9(() => {
+  const rowZIndexByIndex = useMemo10(() => {
     const rowsCount = rowsFromTable.length;
     const result = /* @__PURE__ */ new Map();
     rowsFromTable.forEach((row, rowIndex) => {
@@ -4249,7 +4260,7 @@ var VirtualTable = forwardRef10((props, ref) => {
     });
     return result;
   }, [rowsFromTable]);
-  const headerBaseZIndex = useMemo9(
+  const headerBaseZIndex = useMemo10(
     () => rowsFromTable.length * rowsFromTable.length + rowsFromTable.length + 10,
     [rowsFromTable.length]
   );
@@ -4555,7 +4566,7 @@ var VirtualTable = forwardRef10((props, ref) => {
 });
 
 // src/components/view/TreeView/TreeView.tsx
-import { memo as memo2, useCallback as useCallback14, useMemo as useMemo10, useState as useState18 } from "react";
+import { memo as memo2, useCallback as useCallback14, useMemo as useMemo11, useState as useState18 } from "react";
 
 // src/components/view/TreeView/treeView.module.css
 var search = "treeView_search";
@@ -4649,7 +4660,7 @@ import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-
 var TreeView_default = memo2(function TreeView({ data, selected: selected6, startIcons, onSelect, withSearch = false }) {
   const [searchValue, setSearchValue] = useState18("");
   const onChangeSearchValue = useCallback14((e) => setSearchValue(e.target.value), []);
-  const selectedValues = useMemo10(
+  const selectedValues = useMemo11(
     () => selected6.reduce(
       (acc, cur) => {
         acc[cur] = true;
@@ -4659,7 +4670,7 @@ var TreeView_default = memo2(function TreeView({ data, selected: selected6, star
     ),
     [selected6]
   );
-  const filteredData = useMemo10(() => {
+  const filteredData = useMemo11(() => {
     return getFilteredTree(data, searchValue);
   }, [data, searchValue]);
   return /* @__PURE__ */ jsxs23(Fragment11, { children: [

package/package.json

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