pixel-virtual-tree 1.0.0 → 1.0.2

package/lib/components/TableTreeFn/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
-interface NewNode {
+export interface NewNode {
     sourceId?: string;
     payloadSourceId?: string;
     action?: 'addAbove' | 'addBelow' | 'addInside';
@@ -94,20 +94,9 @@ export interface TableRowProps {
     addModuleSelectWidth?: number;
     disableEditLabelConfirmIcon?: boolean;
 }
-export interface Column {
-    name: string | JSX;
-    accessor: string;
-    width: string;
-    isClickable?: boolean;
-    cell?: (row: any) => JSX;
-    actions?: (row: any, treeRowRef?: React.RefObject<HTMLDivElement | null>) => JSX;
-    isTree?: boolean;
-    defaultValue?: string;
-    defaultActions?: () => JSX;
-}
-export interface TreeTableProps {
+export interface GridProps {
     treeData: any;
-    columnsData: Column[];
+    columnsData: GridColumn[];
     selected?: string[];
     select?: 'radio' | 'checkbox' | 'none';
     onChange?: (e: any, node: string[] | any) => void;
@@ -140,6 +129,20 @@ export interface TreeTableProps {
     scrollThreshold?: number;
     showHeader?: boolean;
 }
+export type TreeTableProps = GridProps;
+export interface GridColumn {
+    name: string | JSX;
+    accessor: string;
+    width: string;
+    isClickable?: boolean;
+    cell?: (row: any) => JSX;
+    actions?: (row: any, treeRowRef?: React.RefObject<HTMLDivElement | null>) => JSX;
+    isTree?: boolean;
+    defaultValue?: string;
+    defaultActions?: () => JSX;
+}
+export interface Column extends GridColumn {
+}
 type OptionValue = any;
 export interface Option {
     [key: string]: OptionValue;

package/lib/components/TableTreeFn/worker/gridWorker.d.ts

@@ -0,0 +1,18 @@
+export interface WorkerMessage {
+    type: 'PROCESS_DATA' | 'SORT_DATA' | 'FILTER_DATA';
+    payload: {
+        data: any[];
+        sortConfig?: {
+            key: string;
+            direction: 'asc' | 'desc';
+        };
+        filterQuery?: string;
+    };
+}
+export interface WorkerResponse {
+    type: 'DATA_READY' | 'ERROR';
+    payload: any[] | {
+        message: string;
+    };
+}
+export declare const workerCode = "\n  self.onmessage = function(e) {\n    const { type, payload } = e.data;\n\n    try {\n      if (type === 'PROCESS_DATA') {\n        const { data, sortConfig, filterQuery } = payload;\n        let processedData = [...data]; // Create a copy to avoid mutations\n\n        // 1. Heavy Filtering O(N)\n        if (filterQuery && filterQuery.trim()) {\n          const query = filterQuery.toLowerCase();\n          processedData = processedData.filter(row => \n            Object.values(row).some(val => \n              String(val).toLowerCase().includes(query)\n            )\n          );\n        }\n\n        // 2. Heavy Sorting O(N log N) - Merge Sort implementation\n        if (sortConfig && sortConfig.key) {\n          const { key, direction } = sortConfig;\n          processedData.sort((a, b) => {\n            const aVal = a[key];\n            const bVal = b[key];\n            \n            // Handle undefined/null values\n            if (aVal == null && bVal == null) return 0;\n            if (aVal == null) return direction === 'asc' ? -1 : 1;\n            if (bVal == null) return direction === 'asc' ? 1 : -1;\n            \n            // String comparison\n            if (typeof aVal === 'string' && typeof bVal === 'string') {\n              const comparison = aVal.localeCompare(bVal);\n              return direction === 'asc' ? comparison : -comparison;\n            }\n            \n            // Numeric comparison\n            if (typeof aVal === 'number' && typeof bVal === 'number') {\n              return direction === 'asc' ? aVal - bVal : bVal - aVal;\n            }\n            \n            // Default comparison\n            const aStr = String(aVal);\n            const bStr = String(bVal);\n            const comparison = aStr.localeCompare(bStr);\n            return direction === 'asc' ? comparison : -comparison;\n          });\n        }\n\n        // Post processed data back to main thread\n        self.postMessage({ \n          type: 'DATA_READY', \n          payload: processedData \n        });\n      }\n    } catch (error) {\n      self.postMessage({ \n        type: 'ERROR', \n        payload: { message: error.message } \n      });\n    }\n  };\n";

package/lib/components/TableTreeFn/worker/gridWorker.js

@@ -0,0 +1,68 @@
+// Web Worker for high-performance data processing
+// Uses Blob Worker Pattern for NPM compatibility
+// We export the worker code as a string to create a Blob later
+export const workerCode = `
+  self.onmessage = function(e) {
+    const { type, payload } = e.data;
+
+    try {
+      if (type === 'PROCESS_DATA') {
+        const { data, sortConfig, filterQuery } = payload;
+        let processedData = [...data]; // Create a copy to avoid mutations
+
+        // 1. Heavy Filtering O(N)
+        if (filterQuery && filterQuery.trim()) {
+          const query = filterQuery.toLowerCase();
+          processedData = processedData.filter(row => 
+            Object.values(row).some(val => 
+              String(val).toLowerCase().includes(query)
+            )
+          );
+        }
+
+        // 2. Heavy Sorting O(N log N) - Merge Sort implementation
+        if (sortConfig && sortConfig.key) {
+          const { key, direction } = sortConfig;
+          processedData.sort((a, b) => {
+            const aVal = a[key];
+            const bVal = b[key];
+            
+            // Handle undefined/null values
+            if (aVal == null && bVal == null) return 0;
+            if (aVal == null) return direction === 'asc' ? -1 : 1;
+            if (bVal == null) return direction === 'asc' ? 1 : -1;
+            
+            // String comparison
+            if (typeof aVal === 'string' && typeof bVal === 'string') {
+              const comparison = aVal.localeCompare(bVal);
+              return direction === 'asc' ? comparison : -comparison;
+            }
+            
+            // Numeric comparison
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+              return direction === 'asc' ? aVal - bVal : bVal - aVal;
+            }
+            
+            // Default comparison
+            const aStr = String(aVal);
+            const bStr = String(bVal);
+            const comparison = aStr.localeCompare(bStr);
+            return direction === 'asc' ? comparison : -comparison;
+          });
+        }
+
+        // Post processed data back to main thread
+        self.postMessage({ 
+          type: 'DATA_READY', 
+          payload: processedData 
+        });
+      }
+    } catch (error) {
+      self.postMessage({ 
+        type: 'ERROR', 
+        payload: { message: error.message } 
+      });
+    }
+  };
+`;
+//# sourceMappingURL=gridWorker.js.map

package/lib/components/TableTreeFn/worker/gridWorker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridWorker.js","sourceRoot":"","sources":["../../../../src/components/TableTreeFn/worker/gridWorker.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,iDAAiD;AAmBjD,+DAA+D;AAC/D,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DzB,CAAC"}

package/lib/index.d.ts

@@ -2281,7 +2281,7 @@ type RootNode$1 = {
     cell?: (row: any) => JSX$2;
     actions?: (row: any, treeRowRef?: React.RefObject<HTMLDivElement | null>) => JSX$2;
 };
-interface Column$1 {
+interface Column {
     name: string | JSX$2;
     accessor: string;
     width: string;
@@ -2292,9 +2292,9 @@ interface Column$1 {
     defaultValue?: string;
     defaultActions?: () => JSX$2;
 }
-interface TreeTableProps$1 {
+interface TreeTableProps {
     treeData: any;
-    columnsData: Column$1[];
+    columnsData: Column[];
     selected?: string[];
     select?: 'radio' | 'checkbox' | 'none';
     onChange?: (e: any, node: string[] | any) => void;
@@ -2327,7 +2327,7 @@ interface Option$3 {
     [key: string]: OptionValue$2;
 }
 
-declare const TreeTable: React__default.ForwardRefExoticComponent<TreeTableProps$1 & React__default.RefAttributes<HTMLDivElement>>;
+declare const TreeTable: React__default.ForwardRefExoticComponent<TreeTableProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface TabsProps$1 {
     /**
@@ -4547,20 +4547,9 @@ type RootNode = {
     cell?: (row: any) => JSX$1;
     actions?: (row: any, treeRowRef?: React.RefObject<HTMLDivElement | null>) => JSX$1;
 };
-interface Column {
-    name: string | JSX$1;
-    accessor: string;
-    width: string;
-    isClickable?: boolean;
-    cell?: (row: any) => JSX$1;
-    actions?: (row: any, treeRowRef?: React.RefObject<HTMLDivElement | null>) => JSX$1;
-    isTree?: boolean;
-    defaultValue?: string;
-    defaultActions?: () => JSX$1;
-}
-interface TreeTableProps {
+interface GridProps {
     treeData: any;
-    columnsData: Column[];
+    columnsData: GridColumn[];
     selected?: string[];
     select?: 'radio' | 'checkbox' | 'none';
     onChange?: (e: any, node: string[] | any) => void;
@@ -4593,12 +4582,28 @@ interface TreeTableProps {
     scrollThreshold?: number;
     showHeader?: boolean;
 }
+interface GridColumn {
+    name: string | JSX$1;
+    accessor: string;
+    width: string;
+    isClickable?: boolean;
+    cell?: (row: any) => JSX$1;
+    actions?: (row: any, treeRowRef?: React.RefObject<HTMLDivElement | null>) => JSX$1;
+    isTree?: boolean;
+    defaultValue?: string;
+    defaultActions?: () => JSX$1;
+}
 type OptionValue = any;
 interface Option$1 {
     [key: string]: OptionValue;
 }
 
-declare const TableTreeFnVirtual: React__default.ForwardRefExoticComponent<TreeTableProps & React__default.RefAttributes<HTMLDivElement>>;
+/**
+ * High-Performance Virtualized Data Grid Component
+ * Replaces TableTreeFn with modern virtualization architecture
+ * Maintains 100% backward compatibility with existing API
+ */
+declare const DataGrid: React__default.ForwardRefExoticComponent<GridProps & React__default.RefAttributes<HTMLDivElement>>;
 
 type valueType$1 = any;
 declare const checkEmpty: (value: valueType$1) => boolean;
@@ -5781,5 +5786,5 @@ declare const useDeviceType: () => {
 
 declare const copyToClipboard: (text: string) => boolean;
 
-export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHABET_WITH_SPACES_ONLY_REGEX, ALPHANUMERIC_PARENTHESIS_REGEX, ALPHANUMERIC_REGEX, ALPHANUMERIC_WITH_DOT_REGEX, ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, ALPHA_NUM_EXTENDED_REGEX, ALPHA_NUM_REGEX, Accordion, AddContentButton, AddResourceButton, AiToggle, AllProjectsDropdown, AnimatedSetting, AppHeader, AttachMedia, AttachmentButton, Avatar, BASE64_REGEX, BIG_END_WHITESPACE, BINARY_NUMBER_REGEX, BODY_TAG_TYPE_VALIDATION, BarChart, Card as Box, BrowserTabs, Button, CAMEL_CASE_REGEX, CERTIFICATES_NAME_REGEX, CHECK_CAMEL_CASE, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, ChatModal, ChatModalAi, Checkbox, Chip, ChipWithCount, ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, ContentCard, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DYNAMIC_VALUE_PATTERN_REGEX, DYNAMIC_VALUE_TYPE_REGEX, DYNAMIC_VALUE_WITH_VALID_BRACKETS_REGEX, DYNAMIC_VALUE__PLACEHOLDER_REGEX, DashboardDonutChart, CustomDatePicker as DatePicker, DebugToolsPanel, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, EMAIL_VALIDATION_REGEX, EXCEL_SPACING_REGEX, EditLabel, EditTextField, Editor, ErrorBoundary, ExcelFile as Excel, ExpandableMenu, FILENAME_VALIDATION_REGEX, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_FILE_TYPE_VALIDATION, HTML_TAG_REGEX, HighlightText, HistoryCard, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, JAVASCRIPT_FILE_TYPE_VALIDATION, LINKEDIN_PROFILE_REGEX, LINK_VALIDATION_REGEX, LabelEditTextField, LineChart, LineLoader, Link, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MediaPreview, MediaViewerModal as MediaViewerModel, MenuOption, MessageBox, MiniModal, MobileSkin, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NO_LEADING_TRAILING_SPACE_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, NoDataContent, OsTree, OtpVerification, OverviewModal, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, PrePostTable, ProgressBar, Prompt, PromptContainer, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, Row, SCRIPT_REGEX, SERVER_HOST_REGEX, SSN_REGEX, START_END_WHITESPACE_REGEX, STEP_GROUP_NAME_REGEX, ScriptGenerationLoader, ScriptSwitchButton, Search, Select, SequentialConnectingBranch, SessionDropdown, SessionManager, StateDropdown, StatusBadge, StatusButton, StatusCard, StatusIndicator, StepLandingTable, StepResultStats, SwitchButton, TIME_REGEX, TWITTER_HANDLE_REGEX, Table, TreeTable as TableTree, TableTreeFnVirtual as TableTreeFn, TableWithAccordion, Tabs, TabsWithSilder, Textarea as TextArea, TextEditor, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, TruncatedTooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, VariableSuggestionInputDropDown, WHITESPACE_REGEX, XML_FILE_TYPE_VALIDATION, addPrePostStepGroup, addStepGroup, autoScrollToTableLastRow, capitalize, checkEmpty, checkMicrophoneAccess, clearStore, compareArrays, compareObjects, convertFormDataToObject, convertToBytes, convertToGB, convertToISO, copyToClipboard, debounce, deleteStoreValue, ffid, findAndInsert, formatDate, formatResponseDate, getEncryptedData, getExtension, getExtensionWithPeriod, getNavigateToKey, getSequentialPayload, getStoreValue, getTopVisibleNodeKey, getTreeDetails, handleTimeZoneChange, handleTreeExpandAllCollapseAll, handleTreeNodeExpandCollapse, handleTreeNodeSect, handleUnCheckAllTreeNodesWithUpdates, hasDuplicateFile, isEmptyObject, isTextTruncated, nlpInputDelay, rearrangeDragItem, saveFileFromBlob, scrollToView, setStoreValue, throttle, toCamelCase, toast, toggleShowHideEntity, truncateText, updateTreeState, useBeforeUnload, useClickOutside, useDeviceType, useFileDropzone, useKeyboardActions, useTheme, useTriggerControl };
+export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHABET_WITH_SPACES_ONLY_REGEX, ALPHANUMERIC_PARENTHESIS_REGEX, ALPHANUMERIC_REGEX, ALPHANUMERIC_WITH_DOT_REGEX, ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, ALPHA_NUM_EXTENDED_REGEX, ALPHA_NUM_REGEX, Accordion, AddContentButton, AddResourceButton, AiToggle, AllProjectsDropdown, AnimatedSetting, AppHeader, AttachMedia, AttachmentButton, Avatar, BASE64_REGEX, BIG_END_WHITESPACE, BINARY_NUMBER_REGEX, BODY_TAG_TYPE_VALIDATION, BarChart, Card as Box, BrowserTabs, Button, CAMEL_CASE_REGEX, CERTIFICATES_NAME_REGEX, CHECK_CAMEL_CASE, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, ChatModal, ChatModalAi, Checkbox, Chip, ChipWithCount, ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, ContentCard, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DYNAMIC_VALUE_PATTERN_REGEX, DYNAMIC_VALUE_TYPE_REGEX, DYNAMIC_VALUE_WITH_VALID_BRACKETS_REGEX, DYNAMIC_VALUE__PLACEHOLDER_REGEX, DashboardDonutChart, DataGrid, CustomDatePicker as DatePicker, DebugToolsPanel, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, EMAIL_VALIDATION_REGEX, EXCEL_SPACING_REGEX, EditLabel, EditTextField, Editor, ErrorBoundary, ExcelFile as Excel, ExpandableMenu, FILENAME_VALIDATION_REGEX, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_FILE_TYPE_VALIDATION, HTML_TAG_REGEX, HighlightText, HistoryCard, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, JAVASCRIPT_FILE_TYPE_VALIDATION, LINKEDIN_PROFILE_REGEX, LINK_VALIDATION_REGEX, LabelEditTextField, LineChart, LineLoader, Link, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MediaPreview, MediaViewerModal as MediaViewerModel, MenuOption, MessageBox, MiniModal, MobileSkin, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NO_LEADING_TRAILING_SPACE_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, NoDataContent, OsTree, OtpVerification, OverviewModal, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, PrePostTable, ProgressBar, Prompt, PromptContainer, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, Row, SCRIPT_REGEX, SERVER_HOST_REGEX, SSN_REGEX, START_END_WHITESPACE_REGEX, STEP_GROUP_NAME_REGEX, ScriptGenerationLoader, ScriptSwitchButton, Search, Select, SequentialConnectingBranch, SessionDropdown, SessionManager, StateDropdown, StatusBadge, StatusButton, StatusCard, StatusIndicator, StepLandingTable, StepResultStats, SwitchButton, TIME_REGEX, TWITTER_HANDLE_REGEX, Table, TreeTable as TableTree, DataGrid as TableTreeFn, TableWithAccordion, Tabs, TabsWithSilder, Textarea as TextArea, TextEditor, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, TruncatedTooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, VariableSuggestionInputDropDown, WHITESPACE_REGEX, XML_FILE_TYPE_VALIDATION, addPrePostStepGroup, addStepGroup, autoScrollToTableLastRow, capitalize, checkEmpty, checkMicrophoneAccess, clearStore, compareArrays, compareObjects, convertFormDataToObject, convertToBytes, convertToGB, convertToISO, copyToClipboard, debounce, deleteStoreValue, ffid, findAndInsert, formatDate, formatResponseDate, getEncryptedData, getExtension, getExtensionWithPeriod, getNavigateToKey, getSequentialPayload, getStoreValue, getTopVisibleNodeKey, getTreeDetails, handleTimeZoneChange, handleTreeExpandAllCollapseAll, handleTreeNodeExpandCollapse, handleTreeNodeSect, handleUnCheckAllTreeNodesWithUpdates, hasDuplicateFile, isEmptyObject, isTextTruncated, nlpInputDelay, rearrangeDragItem, saveFileFromBlob, scrollToView, setStoreValue, throttle, toCamelCase, toast, toggleShowHideEntity, truncateText, updateTreeState, useBeforeUnload, useClickOutside, useDeviceType, useFileDropzone, useKeyboardActions, useTheme, useTriggerControl };
 export type { RootNode$1 as RootNode, TreeNodeProps };