nntc-ui 0.0.83 → 0.0.85

package/index.css

@@ -733,11 +733,12 @@
 }
 .dateTime_popoverTarget {
   position: absolute;
-  bottom: 0;
+  top: 0;
   left: 0;
-  z-index: 1;
+  z-index: 0;
   width: 100%;
-  height: 0;
+  height: 100%;
+  pointer-events: none;
 }
 .dateTime_popoverContent {
   max-width: none;
@@ -1899,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);
@@ -2057,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, ChangeEvent, 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';
 
@@ -96,6 +96,7 @@ interface Props$k {
     variant?: Variant$6;
     isPeriod?: boolean;
     valueType?: ValueType;
+    defaultOpen?: boolean;
     componentSize?: Size$9;
     fullWidth?: boolean;
     label?: string;
@@ -279,6 +280,7 @@ interface TableCell {
     };
     tooltip?: string;
     fill?: 'error' | 'success';
+    rowspan?: number;
 }
 
 interface TableRow {
@@ -332,6 +334,7 @@ interface TableColumn {
     }) => void;
     verticalAlign?: VerticalAlign;
     toFixed?: number;
+    inputType?: HTMLInputTypeAttribute;
 }
 
 interface VirtualTableRef {
@@ -347,7 +350,7 @@ interface Props$8 {
     additionalColumnsViews?: (id: string, value: string | number | undefined, payload: {
         [key: string]: string;
     } | undefined) => {
-        edit: ((onChange: (e: ChangeEvent) => void, onBlur: () => void) => JSX.Element | null) | null;
+        edit: ((onChange: (changeValue?: string, withBlur?: boolean) => void, onBlur: () => void) => JSX.Element | null) | null;
         view: JSX.Element | null;
     };
     onChangeCell?: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => void;

package/index.js

@@ -1540,6 +1540,7 @@ var DateTime = forwardRef5(
     variant = "filled",
     isPeriod = false,
     valueType = "date",
+    defaultOpen = false,
     componentSize = "medium",
     fullWidth: fullWidth4,
     label: label9,
@@ -1551,12 +1552,15 @@ var DateTime = forwardRef5(
     dayjs: dayjsFromProps,
     classes,
     id,
+    onFocus,
+    onBlur,
     ...inputProps
   }, ref) => {
     const dayjs3 = dayjsFromProps ?? defaultDayjs2;
     const [stateValues, setStateValues] = useState5(
       values !== void 0 ? values : defaultValues
     );
+    const [isPopoverOpen, setIsPopoverOpen] = useState5(defaultOpen);
     const stateValuesRef = useRef4(stateValues);
     useEffect5(() => {
       if (values !== void 0) {
@@ -1573,16 +1577,48 @@ var DateTime = forwardRef5(
     }, [stateValues]);
     const effectiveValueType = isPeriod && valueType === "dateTime" ? "date" : valueType;
     const inputRef = useRef4(null);
-    const popoverTargetRef = useRef4(null);
     const reactId = useId2();
     const inputId = id ?? reactId;
-    const inputClickHandler = useCallback5(
-      (e) => {
-        e.preventDefault();
-        popoverTargetRef?.current?.click();
+    const inputFocusHandler = useCallback5(
+      (event) => {
+        setIsPopoverOpen(true);
+        onFocus?.(event);
+      },
+      [onFocus]
+    );
+    const inputBlurHandler = useCallback5(
+      (event) => {
+        if (isPopoverOpen) {
+          return;
+        }
+        onBlur?.(event);
+      },
+      [isPopoverOpen, onBlur]
+    );
+    const popoverOpenChangeHandler = useCallback5(
+      (open) => {
+        setIsPopoverOpen(open);
+        if (!open) {
+          const currentValues = stateValuesRef.current;
+          if (currentValues !== void 0) {
+            onValueChange?.(currentValues);
+          }
+          const inputElement = inputRef.current;
+          if (!inputElement) {
+            return;
+          }
+          if (document.activeElement === inputElement) {
+            inputElement.blur();
+            return;
+          }
+          onBlur?.({ target: inputElement, currentTarget: inputElement });
+        }
       },
-      [popoverTargetRef]
+      [onBlur, onValueChange]
     );
+    const iconClickHandler = useCallback5(() => {
+      inputRef.current?.focus();
+    }, []);
     const changeDates = useCallback5(
       (newStartDate, newEndDate) => {
         const newValues = isPeriod ? [newStartDate, newEndDate] : [newStartDate];
@@ -1594,9 +1630,8 @@ var DateTime = forwardRef5(
         }
         stateValuesRef.current = newValues;
         setStateValues(newValues);
-        onValueChange?.(newValues);
       },
-      [isPeriod, onValueChange]
+      [isPeriod]
     );
     return /* @__PURE__ */ jsxs7(
       "div",
@@ -1634,14 +1669,17 @@ var DateTime = forwardRef5(
                 )}` : "",
                 onChange: () => {
                 },
-                onClick: inputClickHandler
+                onFocus: inputFocusHandler,
+                onBlur: inputBlurHandler
               }
             ),
-            /* @__PURE__ */ jsx15("span", { onClick: inputClickHandler, className: classnames7(icon2, classes?.icon), children: /* @__PURE__ */ jsx15(DateRangeIcon, {}) }),
+            /* @__PURE__ */ jsx15("span", { onClick: iconClickHandler, className: classnames7(icon2, classes?.icon), children: /* @__PURE__ */ jsx15(DateRangeIcon, {}) }),
             /* @__PURE__ */ jsx15(
               Popover,
               {
                 placement: "bottom-start",
+                open: isPopoverOpen,
+                onOpenChange: popoverOpenChangeHandler,
                 classes: { ...classes?.popover, content: popoverContent2 },
                 containerOffset: 4,
                 description: /* @__PURE__ */ jsx15(
@@ -1658,7 +1696,7 @@ var DateTime = forwardRef5(
                     onClear
                   }
                 ),
-                children: /* @__PURE__ */ jsx15("div", { ref: popoverTargetRef, className: classnames7(popoverTarget2) })
+                children: /* @__PURE__ */ jsx15("div", { className: classnames7(popoverTarget2) })
               }
             )
           ] })
@@ -1924,7 +1962,7 @@ var Input = forwardRef6(
               {
                 ref: mergeRefs5([inputRef, ref]),
                 id: inputId,
-                className: fileInput,
+                className: classnames8(fileInput, classes?.fileInput),
                 type: "file",
                 onChange: handleFileChange,
                 ...inputProps
@@ -3137,6 +3175,7 @@ __export(virtualTable_exports, {
   error: () => error2,
   evenRow: () => evenRow,
   firstThRow: () => firstThRow,
+  input: () => input8,
   label: () => label7,
   marginLeftChanging: () => marginLeftChanging,
   medium: () => medium12,
@@ -3144,6 +3183,7 @@ __export(virtualTable_exports, {
   rightBorder: () => rightBorder,
   root: () => root17,
   rowButtonTrigger: () => rowButtonTrigger,
+  rowspanContent: () => rowspanContent,
   selected: () => selected3,
   showInModal: () => showInModal,
   small: () => small12,
@@ -3182,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";
@@ -3202,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,
@@ -3221,6 +3263,7 @@ var virtualTable_default = {
   alignCenter,
   tr,
   td,
+  rowspanContent,
   evenRow,
   selected: selected3,
   sticky,
@@ -3240,7 +3283,8 @@ var virtualTable_default = {
   verticalAlignFlexEnd,
   rowButtonTrigger,
   medium: medium12,
-  small: small12
+  small: small12,
+  input: input8
 };
 
 // src/components/view/VirtualTable/ui/DefaultColumn/DefaultColumn.tsx
@@ -3266,15 +3310,32 @@ var DefaultColumn = {
         tableMeta?.updateData(index, id, value, original);
         setIsEdit(false);
       };
-      const onChange = (e) => {
-        setValue(e.target.value);
+      const onChange = (changeValue, withBlur) => {
+        setValue(changeValue);
+        if (withBlur) {
+          tableMeta?.updateData(index, id, changeValue, original);
+          setIsEdit(false);
+        }
       };
       return /* @__PURE__ */ jsx31(
         Tooltip,
         {
           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, 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
+            }
+          ) })
         }
       );
     }
@@ -3411,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";
@@ -3479,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);
@@ -3499,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);
@@ -3519,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);
@@ -3775,7 +3836,8 @@ var createMeta = (column) => {
       onClick: column.onClick,
       label: column.label,
       verticalAlign: column.verticalAlign,
-      toFixed: column.toFixed
+      toFixed: column.toFixed,
+      inputType: column.inputType
     };
   }
 };
@@ -4065,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") {
@@ -4113,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) => {
@@ -4180,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(
@@ -4208,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
@@ -4269,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
                       },
@@ -4279,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",
                           {
@@ -4291,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.83",
+  "version": "0.0.85",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",