playbook_ui 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6486 → 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.14.0"
-  VERSION = "14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6486"
+  VERSION = "14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6486
+  version: 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-05 00:00:00.000000000 Z
+date: 2025-02-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -257,27 +257,18 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx
 - app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx
 - app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx
 - app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx
 - app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx
 - app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/TablePagination.tsx
 - app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx
 - app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx
-- app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts
-- app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts
 - app/pb_kits/playbook/pb_advanced_table/README.md
 - app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx
 - app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts
 - app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts
-- app/pb_kits/playbook/pb_advanced_table/Utilities/TableContainerStyles.ts
 - app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts
 - app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
 - app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
@@ -309,7 +300,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
@@ -350,7 +340,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
-- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_with_id.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_pagination_mock_data.json
@@ -1213,21 +1202,14 @@ files:
 - app/pb_kits/playbook/pb_drawer/_drawer.tsx
 - app/pb_kits/playbook/pb_drawer/_drawer_context.tsx
 - app/pb_kits/playbook/pb_drawer/context.ts
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx
 - app/pb_kits/playbook/pb_drawer/docs/example.yml
 - app/pb_kits/playbook/pb_drawer/docs/index.js
@@ -1236,7 +1218,6 @@ files:
 - app/pb_kits/playbook/pb_drawer/drawer.test.jsx
 - app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx
 - app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx
-- app/pb_kits/playbook/pb_drawer/index.js
 - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/context/index.tsx
@@ -2138,23 +2119,16 @@ files:
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md
 - app/pb_kits/playbook/pb_overlay/docs/example.yml
 - app/pb_kits/playbook/pb_overlay/docs/index.js
-- app/pb_kits/playbook/pb_overlay/index.js
 - app/pb_kits/playbook/pb_overlay/overlay.html.erb
 - app/pb_kits/playbook/pb_overlay/overlay.rb
 - app/pb_kits/playbook/pb_overlay/overlay.test.jsx
@@ -3110,12 +3084,9 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx
@@ -3129,7 +3100,6 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/example.yml
 - app/pb_kits/playbook/pb_tooltip/docs/index.js
-- app/pb_kits/playbook/pb_tooltip/floating_ui.js
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
@@ -3176,10 +3146,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
@@ -3386,11 +3352,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-BBL6ThPp.js
-- dist/chunks/_weekday_stacked-CF_V6Rbs.js
+- dist/chunks/_typeahead-PqkcDf1H.js
+- dist/chunks/_weekday_stacked-BrSrpj7J.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-Dmay5Z6U.js
-- dist/chunks/pb_form_validation-DdP7BnVX.js
+- dist/chunks/lib-D3us1bGD.js
+- dist/chunks/pb_form_validation-BpihMSOQ.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -1,127 +0,0 @@
-import React, { useContext } from "react"
-import classnames from "classnames"
-import { flexRender, Row, Cell } from "@tanstack/react-table"
-
-import { GenericObject } from "../../types"
-import { isChrome } from "../Utilities/BrowserCheck"
-
-import LoadingInline from "../../pb_loading_inline/_loading_inline"
-import Checkbox from "../../pb_checkbox/_checkbox"
-
-import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
-import { LoadingCell } from "../Components/LoadingCell"
-import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
-
-import AdvancedTableContext from "../Context/AdvancedTableContext"
-
-type RegularTableViewProps = {
-  collapsibleTrail?: boolean
-  subRowHeaders?: string[]
-}
-
-export const RegularTableView = ({
-  collapsibleTrail = true,
-  subRowHeaders,
-}: RegularTableViewProps) => {
-  const {
-    enableToggleExpansion,
-    handleExpandOrCollapse,
-    inlineRowLoading,
-    loading,
-    responsive,
-    table,
-    selectableRows,
-    hasAnySubRows,
-    isPinnedLeft = false,
-  } = useContext(AdvancedTableContext)
-
-  const columnPinning = table.getState().columnPinning || { left: [] };
-  const columnDefinitions = table.options.meta?.columnDefinitions || [];
-
-  return (
-    <>
-      {table.getRowModel().rows.map((row: Row<GenericObject>) => {
-        const isExpandable = row.getIsExpanded();
-        const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
-        const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
-        const numberOfColumns = table.getAllFlatColumns().length;
-        const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
-        const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
-        const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
-
-        return (
-          <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
-            {isFirstChildofSubrow && subRowHeaders && (
-              <SubRowHeaderRow
-                  collapsibleTrail={collapsibleTrail}
-                  enableToggleExpansion={enableToggleExpansion}
-                  onClick={handleExpandOrCollapse}
-                  row={row}
-                  subRowHeaders={subRowHeaders}
-                  table={table}
-              />
-            )}
-
-            <tr
-                className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
-                id={`${row.index}-${row.id}-${row.depth}-row`}
-            >
-              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
-              {selectableRows && !hasAnySubRows && (
-                <td className="checkbox-cell">
-                  <Checkbox
-                      checked={row.getIsSelected()}
-                      disabled={!row.getCanSelect()}
-                      indeterminate={row.getIsSomeSelected()}
-                      name={row.id}
-                      onChange={row.getToggleSelectedHandler()}
-                  />
-                </td>
-              )}
-
-              {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
-                const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-                const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
-
-                return (
-                  <td
-                      align="right"
-                      className={classnames(
-                        `${cell.id}-cell position_relative`,
-                        isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left',
-                        isLastCell && 'last-cell',
-                      )}
-                      key={`${cell.id}-data`}
-                  >
-                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
-                    <span id={`${cell.id}-span`}>
-                      {loading ? (
-                        <LoadingCell />
-                      ) : (
-                        flexRender(cell.column.columnDef.cell, cell.getContext())
-                      )}
-                    </span>
-                  </td>
-                );
-              })}
-            </tr>
-
-            {/* Display LoadingInline if Row Data is querying and there are no children already */}
-            {isDataLoading && (
-              <tr key={`${row.id}-row`}>
-                <td colSpan={numberOfColumns}
-                    style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
-                >
-                  <LoadingInline />
-                </td>
-              </tr>
-            )}
-          </React.Fragment>
-        );
-      })}
-    </>
-  );
-}
-
-export default RegularTableView;

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -1,55 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import Card from "../../pb_card/_card";
-import Caption from "../../pb_caption/_caption";
-import Flex from "../../pb_flex/_flex";
-import FlexItem from "../../pb_flex/_flex_item";
-import { showActionBar, hideActionBar } from "../Utilities/ActionBarAnimationHelper";
-
-interface TableActionBarProps {
-  isVisible: boolean;
-  selectedCount: number;
-  actions?: React.ReactNode[] | React.ReactNode;
-}
-
-const TableActionBar: React.FC<TableActionBarProps> = ({
-  isVisible,
-  selectedCount,
-  actions
-}) => {
-  const cardRef = useRef(null);
-
-  useEffect(() => {
-    if (cardRef.current) {
-      if (isVisible) {
-        showActionBar(cardRef.current);
-      } else {
-        hideActionBar(cardRef.current);
-      }
-    }
-  }, [isVisible]);
-
-  return (
-    <Card
-        borderNone={!isVisible}
-        className={`${isVisible && "show-action-card row-selection-actions-card"}`}
-        htmlOptions={{ ref: cardRef as any }}
-        padding={`${isVisible ? "xs" : "none"}`}
-    >
-      <Flex
-          alignItems="center"
-          justify="between"
-      >
-        <Caption
-            color="light"
-            paddingLeft="xs"
-            size="xs"
-        >
-          {selectedCount} Selected
-        </Caption>
-        <FlexItem>{actions}</FlexItem>
-      </Flex>
-    </Card>
-  );
-};
-
-export default TableActionBar;

data/app/pb_kits/playbook/pb_advanced_table/Components/TablePagination.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import Pagination from "../../pb_pagination/_pagination";
-
-interface TablePaginationProps {
-  table: any;
-  onChange: (page: number) => void;
-  position: "top" | "bottom";
-  range?: number;
-}
-
-const TablePagination: React.FC<TablePaginationProps> = ({
-  table,
-  onChange,
-  position,
-  range = 5
-}) => {
-  const current = table.getState().pagination.pageIndex + 1;
-  const total = table.getPageCount();
-
-  return (
-    <Pagination
-        current={current}
-        key={`pagination-${position}-${current}`}
-        marginBottom={position === "top" ? "xs" : undefined}
-        marginTop={position === "bottom" ? "xs" : undefined}
-        onChange={onChange}
-        range={range}
-        total={total}
-    />
-  );
-};
-
-export default TablePagination;

data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx

@@ -1,275 +0,0 @@
-import React, { useContext, useLayoutEffect, useState, useEffect } from "react"
-import classnames from "classnames"
-import { flexRender, Cell } from "@tanstack/react-table"
-import { VirtualItem } from "@tanstack/react-virtual"
-
-import { GenericObject } from "../../types"
-
-import { isChrome } from "../Utilities/BrowserCheck"
-import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
-
-import LoadingInline from "../../pb_loading_inline/_loading_inline"
-import Checkbox from "../../pb_checkbox/_checkbox"
-
-import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
-import { LoadingCell } from "../Components/LoadingCell"
-import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
-
-import AdvancedTableContext from "../Context/AdvancedTableContext"
-
-type VirtualizedTableViewProps = {
-  collapsibleTrail?: boolean
-  subRowHeaders?: string[]
-}
-
-export const VirtualizedTableView = ({
-  collapsibleTrail = true,
-  subRowHeaders,
-}: VirtualizedTableViewProps) => {
-  const {
-    enableToggleExpansion,
-    handleExpandOrCollapse,
-    inlineRowLoading,
-    loading,
-    table,
-    selectableRows,
-    hasAnySubRows,
-    virtualizer,
-    flattenedItems,
-  } = useContext(AdvancedTableContext)
-
-  const columnPinning = table.getState().columnPinning || { left: [] };
-  const sortingState = JSON.stringify(table.getState().sorting || []);
-  
-  // Store column widths extracted from header
-  const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
-  
-  // Function to get header cell widths
-  const getHeaderCellWidths = () => {
-    const widths: {[key: string]: string} = {};
-
-    // Get all header cells
-    const headerCells = document.querySelectorAll('.table-header-cells, .table-header-cells-custom');
-
-    // If checkbox is present in header
-    if (selectableRows && !hasAnySubRows && headerCells.length > 0) {
-      widths['checkbox'] = `${headerCells[0].getBoundingClientRect().width}px`;
-    }
-
-    // Process regular header cells
-    table.getFlatHeaders().forEach((header: any, index: number) => {
-      // Adjust index if checkbox column exists
-      const headerIndex = (selectableRows && !hasAnySubRows) ? index + 1 : index;
-
-      if (headerCells[headerIndex]) {
-        const width = headerCells[headerIndex].getBoundingClientRect().width;
-        widths[header.id] = `${width}px`;
-      }
-    });
-
-    return widths;
-  };
-
-  // Debounce function to prevent too many updates during resize
-  const debounce = <T extends (...args: any[]) => any>(func: T, wait: number): ((...args: Parameters<T>) => void) => {
-    let timeout: ReturnType<typeof setTimeout>;
-    return function executedFunction(...args: Parameters<T>) {
-      const later = () => {
-        clearTimeout(timeout);
-        func(...args);
-      };
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    };
-  };
-
-  // Update column widths when component mounts and when sorting changes
-  useLayoutEffect(() => {
-    // Apply widths after a small delay to ensure header is rendered
-    const timer = setTimeout(() => {
-      setColumnWidths(getHeaderCellWidths());
-    }, 0);
-
-    return () => clearTimeout(timer);
-  }, [table, selectableRows, hasAnySubRows, sortingState]);
-
-  // Add window resize listener to update widths on window resize
-  useEffect(() => {
-    // Create debounced version of the width measurement function
-    const handleResize = debounce(() => {
-      setColumnWidths(getHeaderCellWidths());
-    }, 0);
-
-    // Add the event listener
-    window.addEventListener('resize', handleResize);
-
-    // Cleanup
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [table, selectableRows, hasAnySubRows]);
-
-  // Safety check
-  if (!virtualizer || !flattenedItems) {
-    return (
-      <tr>
-        <td colSpan={table.getAllFlatColumns().length || 1}>
-          No data to display.
-        </td>
-      </tr>
-    );
-  }
-
-  // Get virtual items
-  let virtualItems: VirtualItem[] = [];
-  try {
-    virtualItems = virtualizer.getVirtualItems();
-  } catch (err) {
-    return (
-      <tr>
-        <td colSpan={table.getAllFlatColumns().length || 1}>
-          Error loading virtualized data.
-        </td>
-      </tr>
-    );
-  }
-
-  if (!virtualItems.length) {
-    return (
-      <tr>
-        <td colSpan={table.getAllFlatColumns().length || 1}>
-          No items to display.
-        </td>
-      </tr>
-    );
-  }
-
-  return (
-    <>
-      {virtualItems.map((virtualRow: VirtualItem) => {
-        const item = flattenedItems[virtualRow.index];
-        if (!item) return null;
-
-        // Use consistent row styling
-        const virtualItemStyle = getVirtualizedRowStyle(virtualRow.start);
-
-        if (item.type === 'header') {
-          return (
-            <tr
-                className="virtualized-table-row virtualized-header-row"
-                key={`header-${item.id}-sort-${sortingState}`}
-                style={virtualItemStyle}
-            >
-              <td colSpan={table.getAllFlatColumns().length}>
-                <SubRowHeaderRow
-                    collapsibleTrail={collapsibleTrail}
-                    enableToggleExpansion={enableToggleExpansion}
-                    onClick={handleExpandOrCollapse}
-                    row={item.row}
-                    subRowHeaders={subRowHeaders}
-                    table={table}
-                />
-              </td>
-            </tr>
-          );
-        }
-
-        if (item.type === 'row') {
-          const row = item.row;
-          const isExpandable = row.getIsExpanded();
-          const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
-          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
-          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
-
-          return (
-            <tr
-                className={`virtualized-table-row ${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
-                data-index={virtualRow.index}
-                key={`row-${item.id}-sort-${sortingState}`}
-                ref={(node) => {
-                  if (node) {
-                    try {
-                      virtualizer.measureElement(node);
-                    } catch (err) {
-                      // Silent error handling
-                    }
-                  }
-                }}
-                style={virtualItemStyle}
-            >
-              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
-              {selectableRows && !hasAnySubRows && (
-                <td
-                    className="checkbox-cell"
-                    style={{ width: columnWidths['checkbox'] || 'auto' }}
-                >
-                  <Checkbox
-                      checked={row.getIsSelected()}
-                      disabled={!row.getCanSelect()}
-                      indeterminate={row.getIsSomeSelected()}
-                      name={row.id}
-                      onChange={row.getToggleSelectedHandler()}
-                  />
-                </td>
-              )}
-
-              {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
-                const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-                const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
-                const cellWidth = columnWidths[cell.column.id] || 'auto';
-
-                return (
-                  <td
-                      align="right"
-                      className={classnames(
-                        `${cell.id}-cell position_relative`,
-                        isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left',
-                        isLastCell && 'last-cell',
-                      )}
-                      key={`${cell.id}-data`}
-                      style={{ width: cellWidth }}
-                  >
-                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
-                    <span id={`${cell.id}-span`}>
-                      {loading ? (
-                        <LoadingCell />
-                      ) : (
-                        flexRender(cell.column.columnDef.cell, cell.getContext())
-                      )}
-                    </span>
-                  </td>
-                );
-              })}
-            </tr>
-          );
-        }
-
-        if (item.type === 'loading') {
-          // Render loading indicator
-          const row = item.row;
-          const numberOfColumns = table.getAllFlatColumns().length;
-
-          return (
-            <tr
-                className="virtualized-table-row virtualized-loading-row"
-                key={`loading-${item.id}-sort-${sortingState}`}
-                style={virtualItemStyle}
-            >
-              <td
-                  colSpan={numberOfColumns}
-                  style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
-              >
-                <LoadingInline />
-              </td>
-            </tr>
-          );
-        }
-
-        return null;
-      })}
-    </>
-  );
-}
-
-export default VirtualizedTableView;