nntc-ui 0.0.84 → 0.0.85

package/index.css

@@ -1900,10 +1900,20 @@
   border-bottom: 1px solid var(--border-color);
 }
 .virtualTable_td {
+  position: relative;
   display: flex;
   align-items: center;
   padding: 0;
 }
+.virtualTable_rowspanContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
 .virtualTable_root.virtualTable_bordersAll .virtualTable_td:nth-child(2),
 .virtualTable_root.virtualTable_root.virtualTable_bordersVertical .virtualTable_td:nth-child(2) {
   border-left: 1px solid var(--border-color);
@@ -2058,6 +2068,9 @@
   font-size: calc(var(--text-body2-size) - 4px);
   line-height: calc(var(--text-body2-height) - 4px);
 }
+.virtualTable_input {
+  border-radius: 0 !important;
+}
 
 /* src/components/view/VirtualTable/ui/HeaderDropdown/headerDropdown.module.css */
 .headerDropdown_root {

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonHTMLAttributes, ReactNode, DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren, JSX, MutableRefObject, ReactElement, CSSProperties, HTMLProps, ElementType } from 'react';
+import { ButtonHTMLAttributes, ReactNode, DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren, HTMLInputTypeAttribute, JSX, MutableRefObject, ReactElement, CSSProperties, HTMLProps, ElementType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Placement } from '@floating-ui/react';
 
@@ -280,6 +280,7 @@ interface TableCell {
     };
     tooltip?: string;
     fill?: 'error' | 'success';
+    rowspan?: number;
 }
 
 interface TableRow {
@@ -333,6 +334,7 @@ interface TableColumn {
     }) => void;
     verticalAlign?: VerticalAlign;
     toFixed?: number;
+    inputType?: HTMLInputTypeAttribute;
 }
 
 interface VirtualTableRef {

package/index.js

@@ -1962,7 +1962,7 @@ var Input = forwardRef6(
               {
                 ref: mergeRefs5([inputRef, ref]),
                 id: inputId,
-                className: fileInput,
+                className: classnames8(fileInput, classes?.fileInput),
                 type: "file",
                 onChange: handleFileChange,
                 ...inputProps
@@ -3175,6 +3175,7 @@ __export(virtualTable_exports, {
   error: () => error2,
   evenRow: () => evenRow,
   firstThRow: () => firstThRow,
+  input: () => input8,
   label: () => label7,
   marginLeftChanging: () => marginLeftChanging,
   medium: () => medium12,
@@ -3182,6 +3183,7 @@ __export(virtualTable_exports, {
   rightBorder: () => rightBorder,
   root: () => root17,
   rowButtonTrigger: () => rowButtonTrigger,
+  rowspanContent: () => rowspanContent,
   selected: () => selected3,
   showInModal: () => showInModal,
   small: () => small12,
@@ -3220,6 +3222,7 @@ var alignRight = "virtualTable_alignRight";
 var alignCenter = "virtualTable_alignCenter";
 var tr = "virtualTable_tr";
 var td = "virtualTable_td";
+var rowspanContent = "virtualTable_rowspanContent";
 var evenRow = "virtualTable_evenRow";
 var selected3 = "virtualTable_selected";
 var sticky = "virtualTable_sticky";
@@ -3240,6 +3243,7 @@ var verticalAlignFlexEnd = "virtualTable_verticalAlignFlexEnd";
 var rowButtonTrigger = "virtualTable_rowButtonTrigger";
 var medium12 = "virtualTable_medium";
 var small12 = "virtualTable_small";
+var input8 = "virtualTable_input";
 var virtualTable_default = {
   root: root17,
   tableContainer,
@@ -3259,6 +3263,7 @@ var virtualTable_default = {
   alignCenter,
   tr,
   td,
+  rowspanContent,
   evenRow,
   selected: selected3,
   sticky,
@@ -3278,7 +3283,8 @@ var virtualTable_default = {
   verticalAlignFlexEnd,
   rowButtonTrigger,
   medium: medium12,
-  small: small12
+  small: small12,
+  input: input8
 };
 
 // src/components/view/VirtualTable/ui/DefaultColumn/DefaultColumn.tsx
@@ -3316,7 +3322,20 @@ var DefaultColumn = {
         {
           label: original[id]?.tooltip ?? "",
           alertType: original[id]?.fill === "error" ? "error" : original[id]?.fill === "success" ? "success" : "default",
-          children: additionalViewResult?.edit !== null && additionalViewResult?.edit !== void 0 ? additionalViewResult.edit(onChange, onBlur) : /* @__PURE__ */ jsx31(Fragment6, { children: /* @__PURE__ */ jsx31("input", { onChange: (e) => onChange(e.target.value), onBlur, value: value ?? "", autoFocus: true }) })
+          children: additionalViewResult?.edit !== null && additionalViewResult?.edit !== void 0 ? additionalViewResult.edit(onChange, onBlur) : /* @__PURE__ */ jsx31(Fragment6, { children: /* @__PURE__ */ jsx31(
+            Input,
+            {
+              classes: { input: input8 },
+              componentSize: "small",
+              variant: "outlined",
+              onChange: (e) => onChange(e.target.value),
+              onBlur,
+              value: value ?? "",
+              type: meta.inputType,
+              fullWidth: true,
+              autoFocus: true
+            }
+          ) })
         }
       );
     }
@@ -3453,7 +3472,7 @@ import { useCallback as useCallback11, useState as useState15 } from "react";
 var root20 = "numberFiltration_root";
 var select = "numberFiltration_select";
 var inputsContainer = "numberFiltration_inputsContainer";
-var input8 = "numberFiltration_input";
+var input9 = "numberFiltration_input";
 
 // src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx
 import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -3521,7 +3540,7 @@ function NumberFiltration(props) {
           componentSize: "small",
           variant: "outlined",
           type: "number",
-          classes: { root: input8 },
+          classes: { root: input9 },
           value: values[0] > -Infinity && values[0] < Infinity ? values[0] : "",
           onChange: (e) => {
             handleChangeNumber("more", e.target.value);
@@ -3541,7 +3560,7 @@ function NumberFiltration(props) {
           componentSize: "small",
           variant: "outlined",
           type: "number",
-          classes: { root: input8 },
+          classes: { root: input9 },
           value: values[1] > -Infinity && values[1] < Infinity ? values[1] : "",
           onChange: (e) => {
             handleChangeNumber("less", e.target.value);
@@ -3561,7 +3580,7 @@ function NumberFiltration(props) {
         componentSize: "small",
         variant: "outlined",
         type: "number",
-        classes: { root: input8 },
+        classes: { root: input9 },
         value: selectedItem.value === "more" ? values[0] > -Infinity && values[0] < Infinity ? values[0] : "" : values[1] > -Infinity && values[1] < Infinity ? values[1] : "",
         onChange: (e) => {
           handleChangeNumber(selectedItem.value, e.target.value);
@@ -3817,7 +3836,8 @@ var createMeta = (column) => {
       onClick: column.onClick,
       label: column.label,
       verticalAlign: column.verticalAlign,
-      toFixed: column.toFixed
+      toFixed: column.toFixed,
+      inputType: column.inputType
     };
   }
 };
@@ -4107,6 +4127,65 @@ var VirtualTable = forwardRef10((props, ref) => {
   const virtualRows = rowVirtualizer.getVirtualItems();
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const lastVirtualColumnIndex = virtualColumns[virtualColumns.length - 1]?.index;
+  const virtualRowsSizeByIndex = useMemo9(
+    () => new Map(virtualRows.map((item3) => [item3.index, item3.size])),
+    [virtualRows]
+  );
+  const getRowSizeByIndex = useCallback12(
+    (index) => virtualRowsSizeByIndex.get(index) ?? bodyRowHeight,
+    [bodyRowHeight, virtualRowsSizeByIndex]
+  );
+  const getRowspanHeight = useCallback12(
+    (rowIndex, rowspan) => {
+      const clampedRowspan = Math.max(1, Math.floor(rowspan));
+      const lastRowIndex = Math.min(rowsFromTable.length - 1, rowIndex + clampedRowspan - 1);
+      const rowsInRange = lastRowIndex - rowIndex + 1;
+      let result = 0;
+      for (let index = rowIndex; index <= lastRowIndex; index += 1) {
+        result += getRowSizeByIndex(index);
+      }
+      const bordersCompensation = borders === "all" || borders === "horizontal" ? Math.max(0, rowsInRange - 1) : 0;
+      return Math.max(0, result - bordersCompensation);
+    },
+    [borders, getRowSizeByIndex, rowsFromTable.length]
+  );
+  const isCellCoveredByRowspan = useCallback12(
+    (rowIndex, columnId) => {
+      for (let index = rowIndex - 1; index >= 0; index -= 1) {
+        const upperCell = rowsFromTable[index]?.original?.[columnId];
+        const upperRowspan = Math.max(1, upperCell?.rowspan ?? 1);
+        if (index + upperRowspan - 1 >= rowIndex) {
+          return true;
+        }
+      }
+      return false;
+    },
+    [rowsFromTable]
+  );
+  const getRowBackgroundColor = useCallback12((row, rowIndex) => {
+    if (row?.isNew?.value === 1) {
+      return "var(--theme-table-selected-row)";
+    }
+    return rowIndex % 2 !== 0 ? "var(--theme-table-even-row)" : "var(--theme-table-background)";
+  }, []);
+  const rowZIndexByIndex = useMemo9(() => {
+    const rowsCount = rowsFromTable.length;
+    const result = /* @__PURE__ */ new Map();
+    rowsFromTable.forEach((row, rowIndex) => {
+      const maxRowspan = row.getAllCells().reduce(
+        (maxSpan, cell2) => Math.max(maxSpan, Math.max(1, row.original?.[cell2.column.id]?.rowspan ?? 1)),
+        1
+      );
+      const spanWeight = maxRowspan - 1;
+      const zIndex = spanWeight * (rowsCount + 1) + (rowsCount - rowIndex + 1);
+      result.set(rowIndex, zIndex);
+    });
+    return result;
+  }, [rowsFromTable]);
+  const headerBaseZIndex = useMemo9(
+    () => rowsFromTable.length * rowsFromTable.length + rowsFromTable.length + 10,
+    [rowsFromTable.length]
+  );
   const renderHeaderNode = (header2) => {
     const metaLabel = header2.column.columnDef.meta?.label;
     if (typeof metaLabel === "string") {
@@ -4155,7 +4234,7 @@ var VirtualTable = forwardRef10((props, ref) => {
                   style: {
                     position: "sticky",
                     top: 0,
-                    zIndex: 2
+                    zIndex: headerBaseZIndex
                   },
                   children: headerGroups.map((headerGroup, hgi) => {
                     const innerCell = (header2) => {
@@ -4222,7 +4301,7 @@ var VirtualTable = forwardRef10((props, ref) => {
                               marginLeftChanging
                             ),
                             style: {
-                              zIndex: 3,
+                              zIndex: headerBaseZIndex + 1,
                               width: `${columnsEstimateSize(index)}px`,
                               height: `${headerGroupHeight[hgi]}px`,
                               transform: `translateX(${Array.from({ length: index }, (_, i) => columnsEstimateSize(i)).reduce(
@@ -4250,7 +4329,7 @@ var VirtualTable = forwardRef10((props, ref) => {
                             (sum, current) => sum + (current.column.columnDef.meta?.width ?? 0),
                             0
                           );
-                          const zIndex = !nextHorizontalHeaders.length && !prevHorizontalHeaders.length ? void 0 : nextHorizontalHeaders.length + 2;
+                          const zIndex = !nextHorizontalHeaders.length && !prevHorizontalHeaders.length ? void 0 : headerBaseZIndex + nextHorizontalHeaders.length + 2;
                           const thHeight = !prevVerticalHeaders.length ? headerGroupHeight[hgi] : headerGroupHeight[hgi] + prevVerticalHeaders.reduce(
                             (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
                             0
@@ -4311,6 +4390,7 @@ var VirtualTable = forwardRef10((props, ref) => {
                       row.original?.isNew?.value === 1 && selected3
                     ),
                     style: {
+                      zIndex: rowZIndexByIndex.get(virtualRow.index) ?? 1,
                       ...!dynamicRowHeight && {
                         height: virtualRow.size
                       },
@@ -4321,6 +4401,10 @@ var VirtualTable = forwardRef10((props, ref) => {
                       virtualColumns.map((virtualCol) => {
                         const cell2 = row.getAllCells()[virtualCol.index];
                         const isSticky = cell2.column.getIsPinned() === "left";
+                        const currentCell = row.original?.[cell2.column.id];
+                        const rowspan = Math.max(1, currentCell?.rowspan ?? 1);
+                        const isCoveredByRowspan = isCellCoveredByRowspan(virtualRow.index, cell2.column.id);
+                        const hasRowspan = rowspan > 1 && !isCoveredByRowspan;
                         return /* @__PURE__ */ jsx35(
                           "div",
                           {
@@ -4333,12 +4417,22 @@ var VirtualTable = forwardRef10((props, ref) => {
                                 // чтобы появился левый бордер
                               },
                               width: `${virtualCol.size}px`,
-                              ...!dynamicRowHeight && {
+                              ...!dynamicRowHeight && !hasRowspan && {
                                 overflow: "hidden"
                               }
                             },
                             "data-index": virtualRow.index,
-                            children: flexRender(cell2.column.columnDef.cell, cell2.getContext())
+                            children: !isCoveredByRowspan && (hasRowspan ? /* @__PURE__ */ jsx35(
+                              "div",
+                              {
+                                className: rowspanContent,
+                                style: {
+                                  height: `${getRowspanHeight(virtualRow.index, rowspan)}px`,
+                                  backgroundColor: getRowBackgroundColor(row.original, virtualRow.index)
+                                },
+                                children: flexRender(cell2.column.columnDef.cell, cell2.getContext())
+                              }
+                            ) : flexRender(cell2.column.columnDef.cell, cell2.getContext()))
                           },
                           `cell-${virtualRow.key}-${virtualCol.key}`
                         );

package/package.json

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