impact-ui 4.0.17 → 5.0.0-alpha.1

package/dist/components/{shared/tableColumnSettings/columnsTabV36.js → TableV36/tableFunctions.js}

@@ -1,34 +1,36 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useMemo, useEffect, useLayoutEffect, useCallback } from "react";
+import { forwardRef, useState, useRef, useMemo, useEffect, useCallback, memo } from "react";
 import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
-import { arrayMove, SortableContext } from "@dnd-kit/sortable";
-import { PersonUser as PersonUser_default, Globe as Globe_default } from "../../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
-import default_1$1 from "../../../node_modules/@mui/icons-material/KeyboardArrowDown.js";
-import default_1$3 from "../../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
-import default_1 from "../../../node_modules/@mui/icons-material/KeyboardArrowUp.js";
-import default_1$2 from "../../../node_modules/@mui/icons-material/Search.js";
-import { getAssetUrl } from "../../../utils/assetBase.js";
-import { applyVisibilityMapToGrid, resolveColumnStateApi } from "./agGridColumnSettingsApi.js";
-import { SortableColumnItem, NestedColumnItem, capitalizeHeader } from "./columnsSettingsColumnRow.js";
-import { flattenColumnRows, SETTINGS_VIRTUALIZE_THRESHOLD, computeSettingsListHeights, buildCheckStateMap, scrollListTowardPointer, VirtualColumnList, FrozenListOuter, ScrollableListOuter } from "./columnsSettingsVirtualList.js";
-import { debounce } from "../../../utils/debounce.js";
-import { isViewNameUnique } from "../../../utils/helper.js";
-import { Badge } from "../../Badge/index.js";
-import { Button } from "../../Button/index.js";
-import { Checkbox } from "../../Checkbox/index.js";
-import { Input } from "../../Input/index.js";
-import { Modal } from "../../Modal/index.js";
-import { Prompt } from "../../Prompt/index.js";
-import { RadioButtonGroup } from "../../RadioButtonGroup/index.js";
-import { Select } from "../../Select/index.js";
-import { useTranslation } from "../../../i18n/useTranslation.js";
-import IconButton from "../../../node_modules/@mui/material/IconButton/IconButton.js";
-import DragIndicator from "../../../node_modules/@mui/icons-material/esm/DragIndicator.js";
+import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { PersonUser as PersonUser_default, Globe as Globe_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
+import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowDown.js";
+import default_1$3 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
+import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowUp.js";
+import default_1$2 from "../../node_modules/@mui/icons-material/Search.js";
+import { getAssetUrl } from "../../utils/assetBase.js";
+import { debounce } from "../../utils/debounce.js";
+import { isViewNameUnique } from "../../utils/helper.js";
+import { Badge } from "../Badge/index.js";
+import { Button } from "../Button/index.js";
+import { Checkbox } from "../Checkbox/index.js";
+import { Input } from "../Input/index.js";
+import { Modal } from "../Modal/index.js";
+import { Prompt } from "../Prompt/index.js";
+import { RadioButtonGroup } from "../RadioButtonGroup/index.js";
+import { Select } from "../Select/index.js";
+import HighlightedText from "./HighlightedText.js";
+import { useTableV36PortalContainerProps } from "./TableV36PortalContext.js";
+import { collectVisibleLeafIds, syncColumnSearchTextToGrid, ensureColumnGroupsExpanded } from "./tableUtils.js";
+import IconButton from "../../node_modules/@mui/material/IconButton/IconButton.js";
+import DragIndicator from "../../node_modules/@mui/icons-material/esm/DragIndicator.js";
 const saveViewIcon = getAssetUrl("icons/saveViewIcon.svg");
 const saveViewEditIcon = getAssetUrl("icons/saveViewEditIcon.svg");
 const saveViewDeleteIcon = getAssetUrl("icons/saveViewDeleteIcon.svg");
 const defaultViewIcon = getAssetUrl("icons/defaultViewIcon.svg");
 const defaultViewActiveIcon = getAssetUrl("icons/defaultViewIconActive.svg");
+const clearIcon = getAssetUrl("icons/close-tags.svg");
+const searchIcon = getAssetUrl("icons/search-table.svg");
 const DEFAULT_VIEW_TYPE_ICONS = {
   global: /* @__PURE__ */ jsx(Globe_default, { height: 16, width: 16 }),
   personal: /* @__PURE__ */ jsx(PersonUser_default, { height: 16, width: 16 })
@@ -38,12 +40,172 @@ const getViewTypeIcon = (viewType, viewTypeOptions) => {
   const customIcon = (_a = viewTypeOptions == null ? void 0 : viewTypeOptions.find((option) => option.value === viewType)) == null ? void 0 : _a.icon;
   return customIcon || DEFAULT_VIEW_TYPE_ICONS[viewType] || null;
 };
+const onColMenuFreezeClick = (params) => {
+  const { pinned } = params.column;
+  if (pinned) {
+    freezeColumn(params, false);
+  } else {
+    freezeColumn(params, true);
+  }
+};
+const getTableMeta = (api) => {
+  if (!api) return null;
+  if (!api.__impactTableMeta) {
+    api.__impactTableMeta = {};
+  }
+  return api.__impactTableMeta;
+};
+const freezeColumn = (params, isPinned) => {
+  const { colId } = params.column;
+  params.api.applyColumnState({
+    state: [{ colId, pinned: isPinned ? "left" : null }]
+  });
+};
+const onColMenuAutoAdjustClick = (params) => {
+  const colDefExtra = { ...params.column.colDef.extra };
+  params.column.colDef.extra = colDefExtra;
+  params.api.autoSizeColumns([params.column]);
+};
+const sortFunc = (columnData, sortBy, api) => {
+  api.api.applyColumnState({
+    state: [{ colId: columnData.colId, sort: sortBy }],
+    defaultState: { sort: null }
+  });
+};
+const getMainMenuItems = (params) => {
+  var _a, _b, _c;
+  if (!(params == null ? void 0 : params.column)) {
+    return [];
+  }
+  const { onFontSizeChange, onNumberFormatChange } = params;
+  const { colDef, pinned, sort, actualWidth } = params.column;
+  const columnMenuItems = [];
+  columnMenuItems.push(
+    {
+      name: "Column Settings",
+      cssClasses: ["settings-main-container"]
+    },
+    "separator"
+  );
+  columnMenuItems.push({
+    name: "Sort",
+    subMenu: [
+      {
+        name: "Sort A to Z",
+        action: () => {
+          sortFunc(params.column, "asc", params);
+        },
+        checked: sort === "asc"
+      },
+      {
+        name: "Sort Z to A",
+        checked: sort === "desc",
+        action: () => {
+          sortFunc(params.column, "desc", params);
+        }
+      },
+      {
+        name: "Reset",
+        action: () => {
+          sortFunc(params.column, null, params);
+        }
+      }
+    ],
+    disabled: !(colDef == null ? void 0 : colDef.sortable)
+  });
+  columnMenuItems.push({
+    name: pinned ? "Unfreeze Column" : "Freeze Column",
+    action: () => {
+      onColMenuFreezeClick(params);
+    }
+  });
+  columnMenuItems.push({
+    name: "Column width",
+    subMenu: [
+      {
+        name: "Auto Adjust",
+        action: () => {
+          onColMenuAutoAdjustClick(params);
+        },
+        // if extra.width property is not present- column is auto adjusted
+        checked: actualWidth !== ((_a = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _a.width)
+      },
+      {
+        name: "Custom width",
+        action: () => {
+          var _a2;
+          params.api.setColumnWidths([
+            { key: params.column.colId, newWidth: (_a2 = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _a2.width }
+          ]);
+        },
+        // if extra.width property is present- column has custom width
+        checked: ((_b = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _b.width) === actualWidth,
+        disabled: !((_c = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _c.width)
+      }
+    ]
+  });
+  columnMenuItems.push({
+    name: "Wrap Text",
+    disabled: true
+  });
+  columnMenuItems.push(
+    {
+      name: "Format",
+      cssClasses: ["format-main-container"]
+    },
+    "separator"
+  );
+  columnMenuItems.push({
+    name: "Numeric Values",
+    subMenu: [
+      {
+        name: "Full Number",
+        action: () => onNumberFormatChange("full")
+      },
+      {
+        name: "In K",
+        action: () => onNumberFormatChange("thousand")
+      },
+      {
+        name: "In Mn",
+        action: () => onNumberFormatChange("million")
+      },
+      {
+        name: "In Bn",
+        action: () => onNumberFormatChange("billion")
+      }
+    ],
+    disabled: !onFontSizeChange
+  });
+  columnMenuItems.push({
+    name: "Font Size",
+    subMenu: [
+      {
+        name: "Small Font",
+        action: () => onFontSizeChange("small")
+      },
+      {
+        name: "Medium Font",
+        action: () => onFontSizeChange("medium")
+      },
+      {
+        name: "Large Font",
+        action: () => onFontSizeChange("large")
+      }
+    ],
+    disabled: !onNumberFormatChange
+  });
+  return columnMenuItems;
+};
 const filterColumnsBySearch = (columns, searchText) => {
   if (!searchText) return columns;
   return columns.map((column) => {
     const matches = column.headerName.toLowerCase().includes(searchText);
+    if (matches) {
+      return column;
+    }
     const filteredChildren = column.children ? filterColumnsBySearch(column.children, searchText) : null;
-    if (matches || (filteredChildren == null ? void 0 : filteredChildren.length) > 0) {
+    if ((filteredChildren == null ? void 0 : filteredChildren.length) > 0) {
       return {
         ...column,
         children: filteredChildren
@@ -109,9 +271,8 @@ const buildOrderedLeafIds = (topLevelColumns, topLevelOrder) => {
     return col ? collectLeafColIds(col) : [id];
   });
 };
-const applyColumnReorderToGrid = (gridApi, { allColumns, frozenOrder, scrollableOrder, pinChanges, childReorder }, gridRef) => {
-  if (!gridApi) return;
-  const stateApi = resolveColumnStateApi(gridApi, gridRef) ?? gridApi;
+const applyColumnReorderToGrid = (api, { allColumns, frozenOrder, scrollableOrder, pinChanges, childReorder }) => {
+  if (!api) return;
   let columns = allColumns;
   if ((childReorder == null ? void 0 : childReorder.parentId) && (childReorder == null ? void 0 : childReorder.siblingOrder)) {
     columns = reorderSiblingsInTree(columns, childReorder.parentId, childReorder.siblingOrder);
@@ -126,7 +287,7 @@ const applyColumnReorderToGrid = (gridApi, { allColumns, frozenOrder, scrollable
         pinState.push({ colId: leafId, pinned });
       });
     });
-    stateApi.applyColumnState({ state: pinState });
+    api.applyColumnState({ state: pinState });
   }
   const orderedLeafIds = [
     ...buildOrderedLeafIds(columns, frozenOrder),
@@ -138,7 +299,7 @@ const applyColumnReorderToGrid = (gridApi, { allColumns, frozenOrder, scrollable
     seen.add(id);
     return true;
   });
-  stateApi.applyColumnState({
+  api.applyColumnState({
     state: uniqueLeafIds.map((colId) => ({ colId })),
     applyOrder: true
   });
@@ -182,35 +343,28 @@ const applyVisibilityToggle = (columns, colId) => {
       children: column.children ? updateChildren(column.children, visibility) : null
     };
   });
-  const update = (cols) => {
-    let changed = false;
-    const next = cols.map((column) => {
-      if (column.colId === colId) {
-        changed = true;
-        const newVisibility = !column.isVisible;
-        visibilityMap.set(column.colId, newVisibility);
-        return {
-          ...column,
-          isVisible: newVisibility,
-          children: column.children ? updateChildren(column.children, newVisibility) : null
-        };
-      }
-      if (column.children) {
-        const updatedChildren = update(column.children);
-        if (updatedChildren === column.children) return column;
-        changed = true;
-        const isAnyChildVisible = updatedChildren.some((child) => child.isVisible);
-        visibilityMap.set(column.colId, isAnyChildVisible);
-        return {
-          ...column,
-          isVisible: isAnyChildVisible,
-          children: updatedChildren
-        };
-      }
-      return column;
-    });
-    return changed ? next : cols;
-  };
+  const update = (cols) => cols.map((column) => {
+    if (column.colId === colId) {
+      const newVisibility = !column.isVisible;
+      visibilityMap.set(column.colId, newVisibility);
+      return {
+        ...column,
+        isVisible: newVisibility,
+        children: column.children ? updateChildren(column.children, newVisibility) : null
+      };
+    }
+    if (column.children) {
+      const updatedChildren = update(column.children);
+      const isAnyChildVisible = updatedChildren.some((child) => child.isVisible);
+      visibilityMap.set(column.colId, isAnyChildVisible);
+      return {
+        ...column,
+        isVisible: isAnyChildVisible,
+        children: updatedChildren
+      };
+    }
+    return column;
+  });
   return { columns: update(columns), visibilityMap };
 };
 const applyVisibilityToAll = (columns, visibility) => {
@@ -225,11 +379,269 @@ const applyVisibilityToAll = (columns, visibility) => {
   });
   return { columns: update(columns), visibilityMap };
 };
+const applyVisibilityMapToGrid = (api, visibilityMap) => {
+  if (!api || !visibilityMap.size) return;
+  const showIds = [];
+  const hideIds = [];
+  visibilityMap.forEach((visible, colId) => {
+    if (visible) showIds.push(colId);
+    else hideIds.push(colId);
+  });
+  if (showIds.length) api.setColumnsVisible(showIds, true);
+  if (hideIds.length) api.setColumnsVisible(hideIds, false);
+};
+const capitalizeHeader = (name) => name ? name.charAt(0).toUpperCase() + name.slice(1) : "";
 const mouseSensorOptions = { activationConstraint: { distance: 5 } };
 const touchSensorOptions = { activationConstraint: { delay: 200, tolerance: 5 } };
-const ColumnsV36 = forwardRef((props, ref) => {
+const ColumnRowContent = memo(function ColumnRowContent2({
+  column,
+  level,
+  isCollapsed,
+  hasChildren,
+  isIndeterminate,
+  checkboxChecked,
+  reserveCollapseSlot,
+  rowClassName,
+  dragIconClass,
+  onToggleCollapse,
+  onToggleVisibility,
+  onKeyboardReorder,
+  dragHandleProps,
+  isOverlay,
+  searchText
+}) {
+  const rowStyle = useMemo(
+    () => ({
+      ["--indent-level"]: level
+    }),
+    [level]
+  );
+  const handleCollapseClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onToggleCollapse == null ? void 0 : onToggleCollapse(column.colId);
+    },
+    [onToggleCollapse, column.colId]
+  );
+  const handleVisibilityChange = useCallback(() => {
+    onToggleVisibility == null ? void 0 : onToggleVisibility(column.colId);
+  }, [onToggleVisibility, column.colId]);
+  const handleRowKeyDown = useCallback(
+    (e) => {
+      var _a, _b, _c, _d;
+      if (isOverlay) return;
+      const current = e.currentTarget;
+      if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+        e.preventDefault();
+        onKeyboardReorder == null ? void 0 : onKeyboardReorder(column.colId, e.key === "ArrowUp" ? -1 : 1);
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = (_b = (_a = current.parentElement) == null ? void 0 : _a.nextElementSibling) == null ? void 0 : _b.querySelector('[role="treeitem"]');
+          next == null ? void 0 : next.focus();
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = (_d = (_c = current.parentElement) == null ? void 0 : _c.previousElementSibling) == null ? void 0 : _d.querySelector('[role="treeitem"]');
+          prev == null ? void 0 : prev.focus();
+          break;
+        }
+        case "ArrowRight": {
+          if (hasChildren && isCollapsed) {
+            e.preventDefault();
+            onToggleCollapse == null ? void 0 : onToggleCollapse(column.colId);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          if (hasChildren && !isCollapsed) {
+            e.preventDefault();
+            onToggleCollapse == null ? void 0 : onToggleCollapse(column.colId);
+          }
+          break;
+        }
+        case "Enter":
+        case " ": {
+          if (column.disabled) break;
+          e.preventDefault();
+          onToggleVisibility == null ? void 0 : onToggleVisibility(column.colId);
+          break;
+        }
+      }
+    },
+    [
+      isOverlay,
+      level,
+      hasChildren,
+      isCollapsed,
+      onToggleCollapse,
+      onToggleVisibility,
+      onKeyboardReorder,
+      column.colId,
+      column.disabled
+    ]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-checked": isIndeterminate ? "mixed" : checkboxChecked,
+      "aria-expanded": hasChildren ? !isCollapsed : void 0,
+      "aria-label": column.headerName,
+      "aria-roledescription": !isOverlay && dragHandleProps ? "sortable column" : void 0,
+      "aria-selected": !!checkboxChecked,
+      className: rowClassName,
+      "data-col-id": column.colId,
+      role: "treeitem",
+      style: rowStyle,
+      tabIndex: isOverlay ? -1 : 0,
+      onKeyDown: handleRowKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "table-setting-column-leading", children: [
+          reserveCollapseSlot && /* @__PURE__ */ jsx("span", { "aria-hidden": !hasChildren, className: "table-setting-column-collapse-slot", children: hasChildren ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": isCollapsed ? "Expand column group" : "Collapse column group",
+              className: "table-setting-column-collapse-btn",
+              onClick: handleCollapseClick,
+              children: isCollapsed ? /* @__PURE__ */ jsx(default_1$3, {}) : /* @__PURE__ */ jsx(default_1, {})
+            }
+          ) : null }),
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: checkboxChecked,
+              disabled: column.disabled || isOverlay,
+              variant: isIndeterminate ? "dashed" : "default",
+              onChange: handleVisibilityChange
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "table-setting-column-trailing", children: [
+          dragHandleProps && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "table-setting-column-drag-handle",
+              ...dragHandleProps,
+              "aria-label": `Reorder ${column.headerName}`,
+              children: /* @__PURE__ */ jsx(DragIndicator, { className: dragIconClass })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HighlightedText,
+            {
+              className: "table-setting-column-name",
+              searchText,
+              text: capitalizeHeader(column.headerName)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+const areSortablePropsEqual = (prev, next) => prev.column.colId === next.column.colId && prev.column.isVisible === next.column.isVisible && prev.column.headerName === next.column.headerName && prev.column.disabled === next.column.disabled && prev.isIndeterminate === next.isIndeterminate && prev.checkboxChecked === next.checkboxChecked && prev.reserveCollapseSlot === next.reserveCollapseSlot && prev.level === next.level && prev.isCollapsed === next.isCollapsed && prev.hasChildren === next.hasChildren && prev.rowClassName === next.rowClassName && prev.dragIconClass === next.dragIconClass && prev.onToggleCollapse === next.onToggleCollapse && prev.onToggleVisibility === next.onToggleVisibility && prev.onKeyboardReorder === next.onKeyboardReorder && prev.searchText === next.searchText && prev.children === next.children;
+const SortableColumnItem = memo(function SortableColumnItem2({
+  column,
+  level,
+  isCollapsed,
+  hasChildren,
+  isIndeterminate,
+  checkboxChecked,
+  reserveCollapseSlot,
+  rowClassName,
+  dragIconClass,
+  onToggleCollapse,
+  onToggleVisibility,
+  onKeyboardReorder,
+  searchText,
+  children
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: column.colId
+  });
+  const style = useMemo(
+    () => ({
+      transform: CSS.Transform.toString(transform),
+      transition,
+      // Placeholder stays in-flow; DragOverlay renders the floating preview
+      opacity: isDragging ? 0 : void 0,
+      zIndex: isDragging ? 0 : void 0
+    }),
+    [transform, transition, isDragging]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: isDragging ? "table-setting-column-sortable--dragging" : void 0,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          ColumnRowContent,
+          {
+            checkboxChecked,
+            column,
+            dragHandleProps: { ...attributes, ...listeners },
+            dragIconClass,
+            hasChildren,
+            isCollapsed,
+            isIndeterminate,
+            level,
+            reserveCollapseSlot,
+            rowClassName,
+            searchText,
+            onKeyboardReorder,
+            onToggleCollapse,
+            onToggleVisibility
+          }
+        ),
+        hasChildren && !isCollapsed && children
+      ]
+    }
+  );
+}, areSortablePropsEqual);
+const NestedColumnItem = memo(function NestedColumnItem2({
+  column,
+  level,
+  isCollapsed,
+  hasChildren,
+  isIndeterminate,
+  checkboxChecked,
+  reserveCollapseSlot,
+  rowClassName,
+  dragIconClass,
+  onToggleCollapse,
+  onToggleVisibility,
+  searchText,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      ColumnRowContent,
+      {
+        checkboxChecked,
+        column,
+        dragIconClass,
+        hasChildren,
+        isCollapsed,
+        isIndeterminate,
+        level,
+        reserveCollapseSlot,
+        rowClassName,
+        searchText,
+        onToggleCollapse,
+        onToggleVisibility
+      }
+    ),
+    hasChildren && !isCollapsed && children
+  ] });
+});
+const Columns = forwardRef((props, ref) => {
   var _a, _b, _c, _d, _e, _f;
-  const { t } = useTranslation();
+  const modalContainerProps = useTableV36PortalContainerProps();
   const [frozenColumn, setFrozenColumn] = useState([]);
   const [scrollableColumn, setScrollableColumn] = useState([]);
   const [searchInputValue, setSearchInputValue] = useState("");
@@ -264,24 +676,15 @@ const ColumnsV36 = forwardRef((props, ref) => {
   const isDraggingRef = useRef(false);
   const isInternalUpdateRef = useRef(false);
   const isColumnPinnedRef = useRef(false);
-  const frozenListRef = useRef(null);
-  const scrollableListRef = useRef(null);
-  const collapseContainerRef = useRef(null);
-  const autoScrollRafRef = useRef(null);
-  const dragPointerYRef = useRef(null);
   const debouncedSetSearchText = useMemo(
     () => debounce((value) => {
       setDebouncedSearchText(value);
-    }, 150),
+    }, 400),
     []
   );
   useEffect(
     () => () => {
       debouncedSetSearchText.cancel();
-      if (autoScrollRafRef.current != null) {
-        cancelAnimationFrame(autoScrollRafRef.current);
-        autoScrollRafRef.current = null;
-      }
     },
     [debouncedSetSearchText]
   );
@@ -293,6 +696,48 @@ const ColumnsV36 = forwardRef((props, ref) => {
     () => filterColumnsBySearch(scrollableColumn, debouncedSearchText),
     [scrollableColumn, debouncedSearchText]
   );
+  const [activeMatchIndex, setActiveMatchIndex] = useState(0);
+  const searchMatchIds = useMemo(() => {
+    if (!debouncedSearchText) return [];
+    return [
+      ...collectVisibleLeafIds(filteredFrozenColumns),
+      ...collectVisibleLeafIds(filteredScrollableColumns)
+    ];
+  }, [debouncedSearchText, filteredFrozenColumns, filteredScrollableColumns]);
+  const searchMatchCount = searchMatchIds.length;
+  const normalizedMatchIndex = searchMatchCount ? (activeMatchIndex % searchMatchCount + searchMatchCount) % searchMatchCount : 0;
+  const activeMatchColId = searchMatchCount ? searchMatchIds[normalizedMatchIndex] : null;
+  useEffect(() => {
+    setActiveMatchIndex(0);
+  }, [debouncedSearchText]);
+  useEffect(() => {
+    var _a2;
+    syncColumnSearchTextToGrid((_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api, debouncedSearchText);
+  }, [debouncedSearchText, ref]);
+  const goToSearchMatch = useCallback((direction) => {
+    setActiveMatchIndex((prev) => prev + direction);
+  }, []);
+  useEffect(() => {
+    var _a2, _b2;
+    if (!activeMatchColId) return;
+    const api = (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.api;
+    ensureColumnGroupsExpanded(api, activeMatchColId);
+    (_b2 = api == null ? void 0 : api.ensureColumnVisible) == null ? void 0 : _b2.call(api, activeMatchColId, "middle");
+    const escaped = CSS.escape ? CSS.escape(activeMatchColId) : activeMatchColId.replace(/"/g, '\\"');
+    const node = document.querySelector(
+      `.table-setting-column-collapse-container [data-col-id="${escaped}"]`
+    );
+    node == null ? void 0 : node.scrollIntoView({ block: "nearest" });
+  }, [activeMatchColId, ref]);
+  const handleSearchKeyDown = useCallback(
+    (e) => {
+      if (e.key !== "Enter") return;
+      e.preventDefault();
+      if (!searchMatchCount) return;
+      goToSearchMatch(e.shiftKey ? -1 : 1);
+    },
+    [goToSearchMatch, searchMatchCount]
+  );
   const frozenColumnOrder = useMemo(
     () => getTopLevelColumnIds(
       filteredFrozenColumns.filter((c) => c.headerName !== "N/A" && c.isVisible !== false)
@@ -313,54 +758,10 @@ const ColumnsV36 = forwardRef((props, ref) => {
     () => getTopLevelColumnIds(scrollableColumn.filter((c) => c.headerName !== "N/A")),
     [scrollableColumn]
   );
-  const frozenRows = useMemo(
-    () => flattenColumnRows(filteredFrozenColumns, collapsedFrozenColumns, "frozen"),
-    [filteredFrozenColumns, collapsedFrozenColumns]
-  );
-  const scrollableRows = useMemo(
-    () => collapsedScrollable ? [] : flattenColumnRows(filteredScrollableColumns, collapsedScrollColumns, "scrollable"),
-    [filteredScrollableColumns, collapsedScrollColumns, collapsedScrollable]
-  );
-  const shouldVirtualize = frozenRows.length + scrollableRows.length > SETTINGS_VIRTUALIZE_THRESHOLD;
-  const [listViewportHeight, setListViewportHeight] = useState(0);
-  useLayoutEffect(() => {
-    const el = collapseContainerRef.current;
-    if (!el || !shouldVirtualize) return void 0;
-    const measure = () => {
-      setListViewportHeight(el.clientHeight);
-    };
-    measure();
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", measure);
-      return () => {
-        window.removeEventListener("resize", measure);
-      };
-    }
-    const observer = new ResizeObserver(measure);
-    observer.observe(el);
-    return () => {
-      observer.disconnect();
-    };
-  }, [shouldVirtualize, collapsedColumn, props.isSaveViewEnabled]);
-  const listHeights = useMemo(
-    () => computeSettingsListHeights({
-      shouldVirtualize,
-      listViewportHeight,
-      frozenRowCount: frozenRows.length,
-      scrollableRowCount: scrollableRows.length
-    }),
-    [shouldVirtualize, listViewportHeight, frozenRows.length, scrollableRows.length]
-  );
-  const checkStateMap = useMemo(
-    () => buildCheckStateMap([filteredFrozenColumns, filteredScrollableColumns]),
-    [filteredFrozenColumns, filteredScrollableColumns]
+  const sortableItems = useMemo(
+    () => [...scrollableColumnOrder, ...frozenColumnOrder],
+    [scrollableColumnOrder, frozenColumnOrder]
   );
-  const sortableItems = useMemo(() => {
-    if (!shouldVirtualize) {
-      return [...scrollableColumnOrder, ...frozenColumnOrder];
-    }
-    return [...scrollableRows, ...frozenRows].filter((row) => row.column.isVisible !== false).map((row) => row.column.colId);
-  }, [shouldVirtualize, scrollableColumnOrder, frozenColumnOrder, scrollableRows, frozenRows]);
   const allColumnsForLookup = useMemo(
     () => [...frozenColumn, ...scrollableColumn],
     [frozenColumn, scrollableColumn]
@@ -473,10 +874,9 @@ const ColumnsV36 = forwardRef((props, ref) => {
     () => debounce(updateColumnState, 100),
     [updateColumnState]
   );
-  const isColumnsPanelOpen = props.showTableSetting ?? props.showMenu;
   useEffect(() => {
     var _a2, _b2, _c2, _d2, _e2, _f2;
-    if (isColumnsPanelOpen || isColumnPinnedRef.current) {
+    if (props.showMenu || isColumnPinnedRef.current) {
       isColumnPinnedRef.current = false;
       updateColumnState();
       const onColumnEvent = () => {
@@ -500,7 +900,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
         }
       };
     }
-  }, [isColumnsPanelOpen, updateColumnState, debouncedUpdateColumnState, ref]);
+  }, [props.showMenu, updateColumnState, debouncedUpdateColumnState, ref]);
   const handleSearchChange = useCallback(
     (e) => {
       const value = e.target.value;
@@ -517,7 +917,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
       setter((prev) => {
         const { columns, visibilityMap } = applyVisibilityToggle(prev, colId);
         isInternalUpdateRef.current = true;
-        applyVisibilityMapToGrid(api, visibilityMap, ref);
+        applyVisibilityMapToGrid(api, visibilityMap);
         queueMicrotask(() => {
           isInternalUpdateRef.current = false;
         });
@@ -563,7 +963,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
         result = applyVisibilityToAll(prev, nextVisible);
       }
       isInternalUpdateRef.current = true;
-      applyVisibilityMapToGrid(api, result.visibilityMap, ref);
+      applyVisibilityMapToGrid(api, result.visibilityMap);
       queueMicrotask(() => {
         isInternalUpdateRef.current = false;
       });
@@ -578,7 +978,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
     const scrollResult = applyVisibilityToAll(scrollableColumn, nextVisible);
     const combinedMap = new Map([...frozenResult.visibilityMap, ...scrollResult.visibilityMap]);
     isInternalUpdateRef.current = true;
-    applyVisibilityMapToGrid(api, combinedMap, ref);
+    applyVisibilityMapToGrid(api, combinedMap);
     setFrozenColumn(frozenResult.columns);
     setScrollableColumn(scrollResult.columns);
     queueMicrotask(() => {
@@ -605,14 +1005,11 @@ const ColumnsV36 = forwardRef((props, ref) => {
       [colId]: !prev[colId]
     }));
   }, []);
-  const announceReorder = useCallback(
-    (colId, direction) => {
-      const el = reorderLiveRegionRef.current;
-      if (!el) return;
-      el.textContent = direction === -1 ? t("table.columns.reorderMovedUp", { name: colId }) : t("table.columns.reorderMovedDown", { name: colId });
-    },
-    [t]
-  );
+  const announceReorder = useCallback((colId, direction) => {
+    const el = reorderLiveRegionRef.current;
+    if (!el) return;
+    el.textContent = `Moved ${colId} ${direction === -1 ? "up" : "down"}`;
+  }, []);
   const commitColumnReorder = useCallback(
     ({ frozenOrder, scrollableOrder, pinChanges, childReorder, announce }) => {
       var _a2;
@@ -620,17 +1017,13 @@ const ColumnsV36 = forwardRef((props, ref) => {
       if (!api) return;
       isInternalUpdateRef.current = true;
       isDraggingRef.current = true;
-      applyColumnReorderToGrid(
-        api,
-        {
-          allColumns: allColumnsForLookup,
-          frozenOrder,
-          scrollableOrder,
-          pinChanges,
-          childReorder
-        },
-        ref
-      );
+      applyColumnReorderToGrid(api, {
+        allColumns: allColumnsForLookup,
+        frozenOrder,
+        scrollableOrder,
+        pinChanges,
+        childReorder
+      });
       updateColumnState();
       if (announce) {
         announceReorder(announce.colId, announce.direction);
@@ -642,49 +1035,17 @@ const ColumnsV36 = forwardRef((props, ref) => {
     },
     [ref, allColumnsForLookup, updateColumnState, announceReorder]
   );
-  const stopSettingsListAutoScroll = useCallback(() => {
-    if (autoScrollRafRef.current != null) {
-      cancelAnimationFrame(autoScrollRafRef.current);
-      autoScrollRafRef.current = null;
-    }
-    dragPointerYRef.current = null;
-  }, []);
-  const tickSettingsListAutoScroll = useCallback(() => {
-    autoScrollRafRef.current = null;
-    const y = dragPointerYRef.current;
-    if (y == null) return;
-    const moved = scrollListTowardPointer(frozenListRef.current, y) || scrollListTowardPointer(scrollableListRef.current, y);
-    if (moved) {
-      autoScrollRafRef.current = requestAnimationFrame(tickSettingsListAutoScroll);
-    }
-  }, []);
   const handleDragStart = useCallback((event) => {
     isDraggingRef.current = true;
     setActiveDragId(event.active.id);
   }, []);
-  const handleDragMove = useCallback(
-    (event) => {
-      var _a2, _b2, _c2, _d2;
-      if (!shouldVirtualize) return;
-      const translated = (_c2 = (_b2 = (_a2 = event.active) == null ? void 0 : _a2.rect) == null ? void 0 : _b2.current) == null ? void 0 : _c2.translated;
-      const y = translated ? translated.top + translated.height / 2 : (_d2 = event.activatorEvent) == null ? void 0 : _d2.clientY;
-      if (y == null) return;
-      dragPointerYRef.current = y;
-      if (autoScrollRafRef.current == null) {
-        autoScrollRafRef.current = requestAnimationFrame(tickSettingsListAutoScroll);
-      }
-    },
-    [shouldVirtualize, tickSettingsListAutoScroll]
-  );
   const handleDragCancel = useCallback(() => {
-    stopSettingsListAutoScroll();
     setActiveDragId(null);
     isDraggingRef.current = false;
-  }, [stopSettingsListAutoScroll]);
+  }, []);
   const handleDragEnd = useCallback(
     (event) => {
       const { active, over } = event;
-      stopSettingsListAutoScroll();
       setActiveDragId(null);
       if (!over || active.id === over.id) {
         isDraggingRef.current = false;
@@ -778,8 +1139,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
       fullScrollableOrder,
       frozenColumnOrder,
       scrollableColumnOrder,
-      commitColumnReorder,
-      stopSettingsListAutoScroll
+      commitColumnReorder
     ]
   );
   const handleKeyboardReorder = useCallback(
@@ -827,16 +1187,14 @@ const ColumnsV36 = forwardRef((props, ref) => {
     (column, level, section) => {
       const isFrozen = section === "frozen";
       const collapsedMap = isFrozen ? collapsedFrozenColumns : collapsedScrollColumns;
-      const isCollapsed = !!collapsedMap[column.colId];
+      const isCollapsed = debouncedSearchText ? false : !!collapsedMap[column.colId];
       const hasChildren = Array.isArray(column.children) && column.children.length > 0;
       const onToggleCollapse = isFrozen ? toggleFrozenColumnCollapse : toggleScrollColumnCollapse;
       const onToggleVisibility = isFrozen ? toggleColumnVisibilityFrozen : toggleColumnVisibilityScroll;
-      const checkState = checkStateMap.get(column.colId) || {
-        checked: !!column.isVisible,
-        indeterminate: false
-      };
+      const checkState = hasChildren ? getCheckState(column.children) : { checked: !!column.isVisible, indeterminate: false };
       const reserveCollapseSlot = isFrozen ? hasChildren : true;
-      const rowClassName = isFrozen ? "table-setting-frozen-columns-list-item" : "table-setting-scroll-inner-column";
+      const isActiveSearchMatch = !!debouncedSearchText && column.colId === activeMatchColId;
+      const rowClassName = `${isFrozen ? "table-setting-frozen-columns-list-item" : "table-setting-scroll-inner-column"}${isActiveSearchMatch ? " table-setting-column-search-match-active" : ""}`;
       const dragIconClass = isFrozen ? "table-setting-frozen-columns-list-drag-icon" : "table-setting-scroll-columns-list-drag-icon";
       const nestedSortableIds = hasChildren ? getDirectColumnIds(
         column.children.filter((c) => c.headerName !== "N/A" && c.isVisible !== false)
@@ -855,6 +1213,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
             level,
             reserveCollapseSlot,
             rowClassName,
+            searchText: debouncedSearchText,
             onKeyboardReorder: handleKeyboardReorder,
             onToggleCollapse,
             onToggleVisibility,
@@ -875,6 +1234,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
           level,
           reserveCollapseSlot,
           rowClassName,
+          searchText: debouncedSearchText,
           onToggleCollapse,
           onToggleVisibility,
           children: childNodes
@@ -883,9 +1243,10 @@ const ColumnsV36 = forwardRef((props, ref) => {
       );
     },
     [
-      checkStateMap,
       collapsedFrozenColumns,
       collapsedScrollColumns,
+      debouncedSearchText,
+      activeMatchColId,
       toggleFrozenColumnCollapse,
       toggleScrollColumnCollapse,
       toggleColumnVisibilityFrozen,
@@ -893,32 +1254,6 @@ const ColumnsV36 = forwardRef((props, ref) => {
       handleKeyboardReorder
     ]
   );
-  const virtualRowHandlers = useMemo(
-    () => ({
-      checkStateMap,
-      onToggleFrozenCollapse: toggleFrozenColumnCollapse,
-      onToggleScrollCollapse: toggleScrollColumnCollapse,
-      onToggleVisibilityFrozen: toggleColumnVisibilityFrozen,
-      onToggleVisibilityScroll: toggleColumnVisibilityScroll,
-      onKeyboardReorder: handleKeyboardReorder
-    }),
-    [
-      checkStateMap,
-      toggleFrozenColumnCollapse,
-      toggleScrollColumnCollapse,
-      toggleColumnVisibilityFrozen,
-      toggleColumnVisibilityScroll,
-      handleKeyboardReorder
-    ]
-  );
-  const frozenItemData = useMemo(
-    () => ({ ...virtualRowHandlers, rows: frozenRows }),
-    [virtualRowHandlers, frozenRows]
-  );
-  const scrollableItemData = useMemo(
-    () => ({ ...virtualRowHandlers, rows: scrollableRows }),
-    [virtualRowHandlers, scrollableRows]
-  );
   const handleSaveAndApply = () => {
     var _a2, _b2;
     if (isEditView) {
@@ -1043,6 +1378,18 @@ const ColumnsV36 = forwardRef((props, ref) => {
     nameConflictExcludeView,
     props.isViewNameUniqueAcrossTypes
   );
+  const onSearchUpArrowClick = () => {
+    goToSearchMatch(-1);
+  };
+  const onSearchDownArrowClick = () => {
+    goToSearchMatch(1);
+  };
+  const clearSearchText = () => {
+    debouncedSetSearchText.cancel();
+    setSearchInputValue("");
+    setDebouncedSearchText("");
+  };
+  const rightIconForSearchInout = searchInputValue.length > 0 ? /* @__PURE__ */ jsx("img", { alt: "Clear", src: clearIcon, onClick: clearSearchText }) : /* @__PURE__ */ jsx("img", { alt: "search", className: "table-settings-search-icon", src: searchIcon });
   return /* @__PURE__ */ jsxs("div", { className: "table-setting-columns-settings", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -1055,13 +1402,13 @@ const ColumnsV36 = forwardRef((props, ref) => {
     props.isSaveViewEnabled && /* @__PURE__ */ jsxs("div", { className: "table-setting-save-view-container", children: [
       savedViewsOptions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "save-view-icon-title", children: [
         /* @__PURE__ */ jsx("img", { alt: "save-view-icon", src: saveViewIcon }),
-        /* @__PURE__ */ jsx("span", { className: "save-view-title", children: t("table.views.none") })
+        /* @__PURE__ */ jsx("span", { className: "save-view-title", children: "No views saved yet" })
       ] }) : /* @__PURE__ */ jsxs("div", { className: "save-view-container-active-view", children: [
         /* @__PURE__ */ jsx(
           Badge,
           {
             color: "success",
-            label: `${((_b = savedViewsOptions.find((view) => view.isActive)) == null ? void 0 : _b.viewName) || t("table.views.notApplicable")}`,
+            label: `${((_b = savedViewsOptions.find((view) => view.isActive)) == null ? void 0 : _b.viewName) || "Not Applicable"}`,
             variant: "stroke"
           }
         ),
@@ -1086,16 +1433,16 @@ const ColumnsV36 = forwardRef((props, ref) => {
           onClick: () => {
             setOpenSaveViewModal(true);
           },
-          children: t("table.views.saveView")
+          children: "Save View"
         }
       )
     ] }),
     openSaveViewMenu && /* @__PURE__ */ jsxs("div", { className: "save-view-menu", children: [
       /* @__PURE__ */ jsxs("div", { className: "save-view-menu-title", children: [
-        /* @__PURE__ */ jsx("span", { children: t("table.views.savedViews") }),
+        /* @__PURE__ */ jsx("span", { children: "Saved views" }),
         /* @__PURE__ */ jsxs("div", { className: "save-view-menu-default-view", children: [
           /* @__PURE__ */ jsx("img", { alt: "default-view-icon", src: defaultViewActiveIcon }),
-          /* @__PURE__ */ jsx("span", { className: "save-view-menu-default-view-text", children: t("table.views.default") })
+          /* @__PURE__ */ jsx("span", { className: "save-view-menu-default-view-text", children: "Default" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "save-view-menu-view-type", children: [
@@ -1103,7 +1450,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
           Badge,
           {
             color: selectedBadge === "All" ? "info" : "default",
-            label: t("table.views.all"),
+            label: "All",
             size: "small",
             variant: "stroke",
             onClick: () => {
@@ -1135,7 +1482,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
         Input,
         {
           leftIcon: /* @__PURE__ */ jsx(default_1$2, {}),
-          placeholder: t("table.views.searchPlaceholder"),
+          placeholder: "Search here...",
           value: saveViewSearchText,
           onChange: handleSaveViewSearchChange
         }
@@ -1145,7 +1492,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            "aria-label": t("table.views.savedViewAria", { name: view.viewName }),
+            "aria-label": `Saved view ${view.viewName}`,
             className: `save-view-menu-view-list-item ${view.isActive ? "active" : ""}`,
             role: "button",
             tabIndex: idx === 0 ? 0 : -1,
@@ -1248,7 +1595,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
               setOpenSaveViewMenu(false);
               setFilteredSavedViewsOptions([...savedViewsOptions]);
             },
-            children: t("common.cancel")
+            children: "Cancel"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1263,7 +1610,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
               updateColumnState();
               setOpenSaveViewMenu(false);
             },
-            children: t("common.apply")
+            children: "Apply"
           }
         )
       ] })
@@ -1274,23 +1621,21 @@ const ColumnsV36 = forwardRef((props, ref) => {
         className: "save-view-modal",
         height: "542px",
         open: openSaveViewModal,
-        primaryButtonLabel: props.isSavingViewLoading ? t("table.views.saving") : t("common.save"),
+        ...modalContainerProps,
+        primaryButtonLabel: props.isSavingViewLoading ? "Saving..." : "Save",
         primaryButtonProps: {
           disabled: (isInputValueEmpty || props.maxSavedViews != null && savedViewsOptions.length >= props.maxSavedViews) && !isReplaceViewSelected || nameConflict || props.isSavingViewLoading,
           loading: props.isSavingViewLoading,
           iconPlacement: "right"
         },
-        secondaryButtonLabel: t("common.cancel"),
-        title: isEditView ? t("table.views.editView") : t("table.views.saveViewTitle"),
+        secondaryButtonLabel: "Cancel",
+        title: isEditView ? "Edit view" : "Save view",
         width: "422px",
         onClose: handleCloseSaveViewModal,
         onPrimaryButtonClick: handleSaveAndApply,
         onSecondaryButtonClick: handleCloseSaveViewModal,
         children: /* @__PURE__ */ jsxs("div", { className: "save-view-modal-children", children: [
-          props.maxSavedViews != null && /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-header", children: /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-header-text", children: t("table.views.remaining", {
-            remaining: props.maxSavedViews - savedViewsOptions.length,
-            max: props.maxSavedViews
-          }) }) }),
+          props.maxSavedViews != null && /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-header", children: /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-header-text", children: `${props.maxSavedViews - savedViewsOptions.length}/${props.maxSavedViews} views remaining` }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1299,12 +1644,12 @@ const ColumnsV36 = forwardRef((props, ref) => {
                 /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-input", children: /* @__PURE__ */ jsx(
                   Input,
                   {
-                    helperText: nameConflict ? t("table.views.nameConflict") : "",
+                    helperText: nameConflict ? "A view with this name already exists" : "",
                     isDisabled: isReplaceViewSelected,
                     isError: nameConflict,
                     isHelperText: nameConflict,
-                    label: t("table.views.newViewName"),
-                    placeholder: t("table.views.enterHere"),
+                    label: "New view name",
+                    placeholder: "Enter here",
                     readOnly: isReplaceViewSelected,
                     value: inputValue,
                     onChange: (e) => {
@@ -1314,7 +1659,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
                   }
                 ) }),
                 !isEditView && /* @__PURE__ */ jsxs("div", { className: "save-view-modal-children-body-radio-group", children: [
-                  /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-body-radio-group-text", children: t("table.views.viewType") }),
+                  /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-body-radio-group-text", children: "View type" }),
                   /* @__PURE__ */ jsx(
                     RadioButtonGroup,
                     {
@@ -1334,14 +1679,14 @@ const ColumnsV36 = forwardRef((props, ref) => {
                   Checkbox,
                   {
                     checked: isDefaultView,
-                    disabled: isReplaceViewSelected,
-                    label: t("table.views.makeDefault"),
+                    disabled: isReplaceViewSelected || isEditView,
+                    label: "Make it default view",
                     onChange: () => {
                       setIsDefaultView(!isDefaultView);
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-replace-view", children: /* @__PURE__ */ jsx("span", { children: t("table.views.orReplace") }) }),
+                /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-replace-view", children: /* @__PURE__ */ jsx("span", { children: "Or replace with saved view" }) }),
                 /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-replace-view-select", children: /* @__PURE__ */ jsx(
                   Select,
                   {
@@ -1351,7 +1696,7 @@ const ColumnsV36 = forwardRef((props, ref) => {
                     initialOptions: currentSaveViewOptions,
                     isDisabled: savedViewsOptions.length === 0 || !isInputValueEmpty && !isReplaceViewSelected || isEditView,
                     isOpen,
-                    label: t("table.views.replaceWith"),
+                    label: "Replace with",
                     minWidth: "100%",
                     selectedOptions: selectedSavedView,
                     setCurrentOptions: setCurrentSaveViewOptions,
@@ -1373,13 +1718,13 @@ const ColumnsV36 = forwardRef((props, ref) => {
           setOpenDeletePrompt(false);
         },
         isOpen: openDeletePrompt,
-        primaryButtonLabel: t("table.views.deleteConfirm"),
+        primaryButtonLabel: "Yes,Delete",
         primaryButtonProps: {
           loading: props.isDeleteViewLoading,
           iconPlacement: "right"
         },
-        secondaryButtonLabel: t("common.cancel"),
-        title: t("table.views.deleteTitle"),
+        secondaryButtonLabel: "Cancel",
+        title: "Delete, Are you sure?",
         variant: "error",
         onPrimaryButtonClick: (e) => {
           var _a2;
@@ -1397,66 +1742,81 @@ const ColumnsV36 = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx("span", { className: "table-setting-column-collapse-slot", children: /* @__PURE__ */ jsx(
         IconButton,
         {
-          "aria-label": collapsedColumn ? t("table.columns.expandColumns") : t("table.columns.collapseColumns"),
+          "aria-label": collapsedColumn ? "Expand columns" : "Collapse columns",
           className: "table-setting-column-collapse-btn",
           onClick: toggleColumnCollapse,
           children: collapsedColumn ? /* @__PURE__ */ jsx(default_1$3, {}) : /* @__PURE__ */ jsx(default_1, {})
         }
       ) }),
       /* @__PURE__ */ jsxs("div", { className: "table-setting-column-search-controls", children: [
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            "aria-label": t("table.columns.toggleAll"),
-            checked: allCheckState.checked,
-            variant: allCheckState.indeterminate ? "dashed" : "default",
-            onChange: onAllColumnCheckBoxChange
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            placeholder: t("common.search"),
-            rightIcon: /* @__PURE__ */ jsx(default_1$2, {}),
-            value: searchInputValue,
-            onChange: handleSearchChange
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "table-settings-lhs", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              "aria-label": "Toggle all columns",
+              checked: allCheckState.checked,
+              variant: allCheckState.indeterminate ? "dashed" : "default",
+              onChange: onAllColumnCheckBoxChange
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              "aria-label": "Search columns",
+              className: "table-settings-input",
+              placeholder: "Search",
+              rightIcon: rightIconForSearchInout,
+              value: searchInputValue,
+              onChange: handleSearchChange,
+              onKeyDown: handleSearchKeyDown
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "table-setting-column-search-nav", role: "status", children: [
+          /* @__PURE__ */ jsx("span", { className: "table-setting-column-search-nav-count", children: searchMatchCount ? `${normalizedMatchIndex + 1}/${searchMatchCount}` : "0/0" }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "Previous match",
+              className: "table-setting-column-search-nav-btn",
+              disabled: !searchMatchCount,
+              onClick: onSearchUpArrowClick,
+              children: /* @__PURE__ */ jsx(default_1, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "Next match",
+              className: "table-setting-column-search-nav-btn",
+              disabled: !searchMatchCount,
+              onClick: onSearchDownArrowClick,
+              children: /* @__PURE__ */ jsx(default_1$1, { fontSize: "small" })
+            }
+          )
+        ] })
       ] })
     ] }),
     !collapsedColumn && /* @__PURE__ */ jsx(
       "div",
       {
-        ref: collapseContainerRef,
-        className: `table-setting-column-collapse-container ${props.isSaveViewEnabled ? "save-view-enabled" : ""} ${shouldVirtualize ? "is-virtualized" : ""}`,
+        className: `table-setting-column-collapse-container ${props.isSaveViewEnabled ? "save-view-enabled" : ""}`,
         children: /* @__PURE__ */ jsxs(
           DndContext,
           {
-            autoScroll: !shouldVirtualize,
             collisionDetection: closestCenter,
             sensors,
             onDragCancel: handleDragCancel,
             onDragEnd: handleDragEnd,
-            onDragMove: handleDragMove,
             onDragStart: handleDragStart,
             children: [
               /* @__PURE__ */ jsxs(SortableContext, { items: sortableItems, children: [
                 frozenColumn.length > 0 && !(frozenColumn.length === 1 && frozenColumn[0].headerName === "N/A") && /* @__PURE__ */ jsxs("div", { className: "table-setting-collapse-columns-container", children: [
-                  /* @__PURE__ */ jsx("h3", { children: t("table.columns.frozen") }),
-                  shouldVirtualize ? /* @__PURE__ */ jsx(
-                    VirtualColumnList,
-                    {
-                      className: "table-setting-frozen-columns-list",
-                      itemData: frozenItemData,
-                      maxHeight: listHeights.frozen,
-                      outerElementType: FrozenListOuter,
-                      outerRef: frozenListRef,
-                      rows: frozenRows
-                    }
-                  ) : /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx("h3", { children: "Frozen columns" }),
+                  /* @__PURE__ */ jsx(
                     "div",
                     {
-                      "aria-label": t("table.columns.frozen"),
+                      "aria-label": "Frozen columns",
                       className: "table-setting-frozen-columns-list",
                       role: "tree",
                       children: filteredFrozenColumns.map(
@@ -1466,14 +1826,14 @@ const ColumnsV36 = forwardRef((props, ref) => {
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-columns-container", children: [
-                  /* @__PURE__ */ jsx("h3", { children: t("table.columns.scrollable") }),
+                  /* @__PURE__ */ jsx("h3", { children: "Scrollable Columns" }),
                   /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-main-column-list", children: [
                     /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-main-column", children: [
                       /* @__PURE__ */ jsxs("div", { className: "table-setting-column-leading", children: [
                         /* @__PURE__ */ jsx("span", { className: "table-setting-column-collapse-slot", children: /* @__PURE__ */ jsx(
                           IconButton,
                           {
-                            "aria-label": collapsedScrollable ? t("table.columns.expandScrollable") : t("table.columns.collapseScrollable"),
+                            "aria-label": collapsedScrollable ? "Expand scrollable columns" : "Collapse scrollable columns",
                             className: "table-setting-column-collapse-btn",
                             onClick: toggleScrollableCollapse,
                             children: collapsedScrollable ? /* @__PURE__ */ jsx(default_1$3, {}) : /* @__PURE__ */ jsx(default_1, {})
@@ -1482,29 +1842,19 @@ const ColumnsV36 = forwardRef((props, ref) => {
                         /* @__PURE__ */ jsx(
                           Checkbox,
                           {
-                            "aria-label": t("table.columns.toggleMain"),
+                            "aria-label": "Toggle main columns",
                             checked: mainCheckState.checked,
                             variant: mainCheckState.indeterminate ? "dashed" : "default",
                             onChange: onMainCheckboxChange
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx("span", { className: "table-setting-column-name", children: t("table.columns.main") })
+                      /* @__PURE__ */ jsx("span", { className: "table-setting-column-name", children: "Main Column" })
                     ] }),
-                    shouldVirtualize ? /* @__PURE__ */ jsx(
-                      VirtualColumnList,
-                      {
-                        className: "table-setting-scroll-inner-column-list",
-                        itemData: scrollableItemData,
-                        maxHeight: listHeights.scrollable,
-                        outerElementType: ScrollableListOuter,
-                        outerRef: scrollableListRef,
-                        rows: scrollableRows
-                      }
-                    ) : /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(
                       "div",
                       {
-                        "aria-label": t("table.columns.scrollable"),
+                        "aria-label": "Scrollable columns",
                         className: "table-setting-scroll-inner-column-list",
                         role: "tree",
                         children: !collapsedScrollable && filteredScrollableColumns.map(
@@ -1526,6 +1876,30 @@ const ColumnsV36 = forwardRef((props, ref) => {
     )
   ] });
 });
+const updateFontSizeOnToolPanel = (fontSizeType) => {
+  let fontSize;
+  switch (fontSizeType) {
+    case "small":
+      fontSize = "12px";
+      break;
+    case "medium":
+      fontSize = "14px";
+      break;
+    case "large":
+      fontSize = "16px";
+      break;
+    default:
+      fontSize = "14px";
+  }
+  return fontSize;
+};
 export {
-  ColumnsV36
+  Columns,
+  freezeColumn,
+  getMainMenuItems,
+  getTableMeta,
+  onColMenuAutoAdjustClick,
+  onColMenuFreezeClick,
+  sortFunc,
+  updateFontSizeOnToolPanel
 };