nntc-ui 0.0.37 → 0.0.39

package/index.css

@@ -1775,7 +1775,9 @@
   border-color: var(--theme-error);
 }
 .virtualTable_viewSpan {
+  width: calc(100% - 20px);
   margin: 4px 10px;
+  overflow-wrap: break-word;
 }
 .virtualTable_showInModal {
   position: relative;
@@ -1798,6 +1800,13 @@
   background: var(--theme-table-even-row);
   background: linear-gradient(rgba(0, 0, 0, 0) 0%, var(--theme-table-even-row) 65%);
 }
+.virtualTable_clickable {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dashed;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
 .virtualTable_modalContent {
   width: 500px;
 }

package/index.d.ts

@@ -241,6 +241,9 @@ declare function Tabs<T>(props: UiProps<Props$8<T>>): react_jsx_runtime.JSX.Elem
 
 interface TableCell {
     value?: string | number;
+    payload?: {
+        [key: string]: string;
+    };
     error?: string;
 }
 
@@ -263,6 +266,8 @@ interface FilterBy {
 
 type ColumnAlign = 'Left' | 'Right' | 'Center';
 
+type SortType = 'alphanumeric' | 'locale';
+
 type VerticalAlign = 'FlexStart' | 'Center' | 'FlexEnd';
 
 interface TableColumn {
@@ -272,6 +277,7 @@ interface TableColumn {
     columns?: TableColumn[];
     editable?: boolean;
     sortable?: boolean;
+    sortType?: SortType;
     sortAnotherName?: string;
     filtrationByNumber?: boolean;
     filtrationByDate?: boolean;
@@ -281,6 +287,9 @@ interface TableColumn {
     rowsAlign?: ColumnAlign;
     valueFormat?: (value: string) => string;
     showInModal?: boolean;
+    onClick?: (payload: {
+        [key: string]: string;
+    }) => void;
     verticalAlign?: VerticalAlign;
     toFixed?: number;
 }
@@ -315,6 +324,7 @@ declare function VirtualTable(props: UiProps<Props$7>): react_jsx_runtime.JSX.El
 interface SortBy {
     columnName: string;
     direction: 'asc' | 'desc';
+    sortType?: SortType;
 }
 
 interface Item {

package/index.js

@@ -419,7 +419,7 @@ import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function Popover(props) {
   const {
     description,
-    clickable,
+    clickable: clickable2,
     initialOpen,
     placement,
     wrapTrigger,
@@ -442,8 +442,8 @@ function Popover(props) {
     {
       placement,
       initialOpen,
-      open: open !== void 0 ? open : clickable ? showTooltip : void 0,
-      onOpenChange: onOpenChange !== void 0 ? onOpenChange : clickable ? setShowTooltip : void 0,
+      open: open !== void 0 ? open : clickable2 ? showTooltip : void 0,
+      onOpenChange: onOpenChange !== void 0 ? onOpenChange : clickable2 ? setShowTooltip : void 0,
       containerOffset,
       root: root22,
       children: [
@@ -451,7 +451,7 @@ function Popover(props) {
           PopoverTrigger,
           {
             wrapTrigger,
-            onClick: clickable ? () => setShowTooltip((prev) => !prev) : void 0,
+            onClick: clickable2 ? () => setShowTooltip((prev) => !prev) : void 0,
             className: classnames4(wrapTrigger ? trigger : void 0, classes?.trigger),
             children: children2
           }
@@ -2262,7 +2262,7 @@ import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function Tooltip(props) {
   const {
     label: label7,
-    clickable,
+    clickable: clickable2,
     initialOpen,
     placement,
     withoutArrow,
@@ -2285,8 +2285,8 @@ function Tooltip(props) {
     {
       placement,
       initialOpen,
-      open: clickable ? showTooltip : void 0,
-      onOpenChange: clickable ? setShowTooltip : void 0,
+      open: clickable2 ? showTooltip : void 0,
+      onOpenChange: clickable2 ? setShowTooltip : void 0,
       withoutArrow,
       arrowRef,
       root: root22,
@@ -2295,7 +2295,7 @@ function Tooltip(props) {
           TooltipTrigger,
           {
             wrapTrigger,
-            onClick: clickable ? () => setShowTooltip((prev) => !prev) : void 0,
+            onClick: clickable2 ? () => setShowTooltip((prev) => !prev) : void 0,
             className: wrapTrigger ? classnames16(trigger2, classes?.trigger) : void 0,
             children: children2
           }
@@ -2567,6 +2567,7 @@ __export(virtualTable_exports, {
   bordersHorizontal: () => bordersHorizontal,
   bordersVertical: () => bordersVertical,
   bottomBorder: () => bottomBorder,
+  clickable: () => clickable,
   default: () => virtualTable_default,
   error: () => error2,
   evenRow: () => evenRow,
@@ -2627,6 +2628,7 @@ var viewCell = "virtualTable_viewCell";
 var error2 = "virtualTable_error";
 var viewSpan = "virtualTable_viewSpan";
 var showInModal = "virtualTable_showInModal";
+var clickable = "virtualTable_clickable";
 var modalContent = "virtualTable_modalContent";
 var verticalAlignFlexStart = "virtualTable_verticalAlignFlexStart";
 var verticalAlignCenter = "virtualTable_verticalAlignCenter";
@@ -2663,6 +2665,7 @@ var virtualTable_default = {
   error: error2,
   viewSpan,
   showInModal,
+  clickable,
   modalContent,
   verticalAlignFlexStart,
   verticalAlignCenter,
@@ -2706,6 +2709,7 @@ var DefaultColumn = {
           viewCell,
           !!meta?.rowsAlign ? virtualTable_exports[`align${meta?.rowsAlign}`] : void 0,
           meta?.showInModal ? showInModal : void 0,
+          meta?.onClick && original[id]?.payload ? clickable : void 0,
           original[id]?.error ? error2 : void 0,
           !!meta?.verticalAlign ? virtualTable_exports[`verticalAlign${meta?.verticalAlign}`] : void 0
         ),
@@ -2713,7 +2717,7 @@ var DefaultColumn = {
           setIsEdit(true);
         } : meta?.showInModal ? () => {
           setShowModal(true);
-        } : void 0,
+        } : meta?.onClick && original[id]?.payload ? () => meta?.onClick?.(original[id]?.payload ?? {}) : void 0,
         children: [
           /* @__PURE__ */ jsx30("span", { className: viewSpan, children: shownValue }),
           showModal && /* @__PURE__ */ jsx30(Modal, { open: showModal, onClose: () => closeModalRef.current?.(), children: /* @__PURE__ */ jsx30(Surface, { type: "panel", children: /* @__PURE__ */ jsx30("div", { className: modalContent, children: shownValue }) }) })
@@ -2897,6 +2901,7 @@ function HeaderDropdown(props) {
   const {
     headerMeta: {
       sortable = false,
+      sortType,
       sortAnotherName,
       filtrationByNumber = false,
       filtrationByDate = false,
@@ -2951,7 +2956,7 @@ function HeaderDropdown(props) {
         if (prev.some((p) => p.columnName === headerResultName)) {
           return prev.map((p) => p.columnName === headerResultName ? { ...p, direction } : { ...p });
         } else {
-          return prev.concat([{ columnName: headerResultName, direction }]);
+          return prev.concat([{ columnName: headerResultName, direction, sortType }]);
         }
       }
     });
@@ -3080,6 +3085,7 @@ var createMeta = (column) => {
     return {
       editable: column.editable,
       sortable: column.sortable,
+      sortType: column.sortType,
       sortAnotherName: column.sortAnotherName,
       filtrationByNumber: column.filtrationByNumber,
       filtrationByDate: column.filtrationByDate,
@@ -3089,6 +3095,7 @@ var createMeta = (column) => {
       rowsAlign: column.rowsAlign,
       valueFormat: column.valueFormat,
       showInModal: column.showInModal,
+      onClick: column.onClick,
       label: column.label,
       verticalAlign: column.verticalAlign,
       toFixed: column.toFixed
@@ -3158,6 +3165,32 @@ var recursiveFilter = (rows, filterBy) => {
   return rows;
 };
 
+// src/components/view/VirtualTable/utils/alphanumericCompare.ts
+var alphanumericCompare = (a, b) => {
+  const aParts = a.match(/(\d+|\D+)/g) || [];
+  const bParts = b.match(/(\d+|\D+)/g) || [];
+  const maxLength = Math.max(aParts.length, bParts.length);
+  for (let i = 0; i < maxLength; i++) {
+    const aPart = aParts[i] || "";
+    const bPart = bParts[i] || "";
+    const aIsNumber = /^\d+$/.test(aPart);
+    const bIsNumber = /^\d+$/.test(bPart);
+    if (aIsNumber && bIsNumber) {
+      const numA = parseInt(aPart, 10);
+      const numB = parseInt(bPart, 10);
+      if (numA !== numB) {
+        return numA - numB;
+      }
+    } else {
+      const comparison = aPart.localeCompare(bPart);
+      if (comparison !== 0) {
+        return comparison;
+      }
+    }
+  }
+  return 0;
+};
+
 // src/components/view/VirtualTable/utils/recursiveSort.ts
 var recursiveSort = (items2, sortBy) => {
   if (sortBy.length) {
@@ -3165,6 +3198,10 @@ var recursiveSort = (items2, sortBy) => {
     const sorted = items2.sort((a, b) => {
       const aValue = a[sortByItem.columnName]?.value?.toString() ?? "";
       const bValue = b[sortByItem.columnName]?.value?.toString() ?? "";
+      if (sortByItem.sortType === "alphanumeric") {
+        const compare2 = alphanumericCompare(aValue, bValue);
+        return sortByItem.direction === "asc" ? compare2 : -compare2;
+      }
       const compare = aValue.localeCompare(bValue);
       return sortByItem.direction === "asc" ? compare : -compare;
     });

package/package.json

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