nntc-ui 0.0.38 → 0.0.40

package/index.d.ts

@@ -266,6 +266,8 @@ interface FilterBy {
 
 type ColumnAlign = 'Left' | 'Right' | 'Center';
 
+type SortType = 'alphanumeric' | 'locale';
+
 type VerticalAlign = 'FlexStart' | 'Center' | 'FlexEnd';
 
 interface TableColumn {
@@ -275,6 +277,7 @@ interface TableColumn {
     columns?: TableColumn[];
     editable?: boolean;
     sortable?: boolean;
+    sortType?: SortType;
     sortAnotherName?: string;
     filtrationByNumber?: boolean;
     filtrationByDate?: boolean;
@@ -321,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 {
@@ -402,4 +406,4 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<PropsWithChildren<Prop
     classes?: PropsObject;
 } & HTMLProps<HTMLDivElement>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-export { type AdditionalButton, Button, ButtonsGroup, Card, Checkbox, Checklist, type Item$3 as ChecklistItem, type SelectedItems as ChecklistSelectedItems, ColorPicker, type ColumnAlign, DateTime, type FilterBy, Input, Layout, Menu, type Divider as MenuDivider, type Item$2 as MenuItem, Modal, MultiSelect, type Item$4 as MultiSelectItem, type TitleVariant as MultiSelectTitleVariant, type Pair, Pairs, Popover, SearchInput, Select, type Divider$1 as SelectDivider, type Item$5 as SelectItem, type SortBy, Surface, type TableCell, type TableColumn, type TableRow, Tabs, type Item$1 as TabsItem, Tooltip, _default as TreeView, type Item as TreeViewItem, Typography, type VerticalAlign, VirtualTable, WrapForLabel };
+export { type AdditionalButton, Button, ButtonsGroup, Card, Checkbox, Checklist, type Item$3 as ChecklistItem, type SelectedItems as ChecklistSelectedItems, ColorPicker, type ColumnAlign, DateTime, type FilterBy, Input, Layout, Menu, type Divider as MenuDivider, type Item$2 as MenuItem, Modal, MultiSelect, type Item$4 as MultiSelectItem, type TitleVariant as MultiSelectTitleVariant, type Pair, Pairs, Popover, SearchInput, Select, type Divider$1 as SelectDivider, type Item$5 as SelectItem, type SortBy, type SortType, Surface, type TableCell, type TableColumn, type TableRow, Tabs, type Item$1 as TabsItem, Tooltip, _default as TreeView, type Item as TreeViewItem, Typography, type VerticalAlign, VirtualTable, WrapForLabel };

package/index.js

@@ -2901,6 +2901,7 @@ function HeaderDropdown(props) {
   const {
     headerMeta: {
       sortable = false,
+      sortType,
       sortAnotherName,
       filtrationByNumber = false,
       filtrationByDate = false,
@@ -2955,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 }]);
         }
       }
     });
@@ -3084,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,
@@ -3163,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) {
@@ -3170,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.38",
+  "version": "0.0.40",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",