@gridsuite/commons-ui 0.77.2 → 0.79.0

package/dist/components/customAGGrid/customAggrid.js

@@ -15,7 +15,7 @@ const onColumnResized = (params) => {
   if (column && colDefinedMinWidth && finished) {
     const newWidth = column == null ? void 0 : column.getActualWidth();
     if (newWidth < colDefinedMinWidth) {
-      column == null ? void 0 : column.setActualWidth(colDefinedMinWidth, params.source);
+      params.api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, params.source);
     }
   }
 };
@@ -48,9 +48,9 @@ const CustomAGGrid = React.forwardRef((props, ref) => {
         {
           ref,
           getLocaleText,
-          suppressPropertyNamesCheck: true,
           onColumnResized,
           enableCellTextSelection: true,
+          theme: "legacy",
           ...agGridReactProps
         }
       )

package/dist/components/filter/explicitNaming/ExplicitNamingFilterForm.js

@@ -6,7 +6,7 @@ import { Box } from "@mui/material";
 import { v4 } from "uuid";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import "../../../utils/yupConfig.js";
-import { ROW_DRAGGING_SELECTION_COLUMN_DEF, CustomAgGridTable } from "../../inputs/reactHookForm/agGridTable/CustomAgGridTable.js";
+import { CustomAgGridTable } from "../../inputs/reactHookForm/agGridTable/CustomAgGridTable.js";
 import { SelectInput } from "../../inputs/reactHookForm/selectInputs/SelectInput.js";
 import { Generator, Load } from "../../../utils/types/equipmentTypes.js";
 import { NumericEditor } from "../../inputs/reactHookForm/agGridTable/cellEditors/numericEditor.js";
@@ -86,11 +86,11 @@ function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversion }) {
   }, [sourceFilterForExplicitNamingConversion, setValue]);
   const columnDefs = useMemo(() => {
     const newColumnDefs = [
-      ...ROW_DRAGGING_SELECTION_COLUMN_DEF,
       {
         headerName: intl.formatMessage({
           id: FieldConstants.EQUIPMENT_ID
         }),
+        rowDrag: true,
         field: FieldConstants.EQUIPMENT_ID,
         editable: true,
         singleClickEdit: true,
@@ -200,7 +200,12 @@ function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversion }) {
         makeDefaultRowData,
         pagination: true,
         paginationPageSize: 100,
-        suppressRowClickSelection: true,
+        rowSelection: {
+          mode: "multiRow",
+          enableClickSelection: false,
+          checkboxes: true,
+          headerCheckbox: true
+        },
         alwaysShowVerticalScroll: true,
         stopEditingWhenCellsLoseFocus: true,
         csvProps: {

package/dist/components/index.d.ts

@@ -14,7 +14,6 @@ export * from './elementSearch';
 export * from './filter';
 export * from './flatParameters';
 export * from './inputs';
-export * from './muiVirtualizedTable';
 export * from './multipleSelectionDialog';
 export * from './overflowableText';
 export * from './snackbarProvider';

package/dist/components/index.js

@@ -42,7 +42,7 @@ import { SelectClearable } from "./inputs/SelectClearable.js";
 import { DirectoryItemsInput, NAME } from "./inputs/reactHookForm/DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "./inputs/reactHookForm/RawReadOnlyInput.js";
 import { BottomRightButtons } from "./inputs/reactHookForm/agGridTable/BottomRightButtons.js";
-import { CustomAgGridTable, ROW_DRAGGING_SELECTION_COLUMN_DEF } from "./inputs/reactHookForm/agGridTable/CustomAgGridTable.js";
+import { CustomAgGridTable } from "./inputs/reactHookForm/agGridTable/CustomAgGridTable.js";
 import { NumericEditor } from "./inputs/reactHookForm/agGridTable/cellEditors/numericEditor.js";
 import { CsvUploader } from "./inputs/reactHookForm/agGridTable/csvUploader/CsvUploader.js";
 import { AutocompleteInput } from "./inputs/reactHookForm/autocompleteInputs/AutocompleteInput.js";
@@ -90,8 +90,6 @@ import { GroupValueEditor } from "./inputs/reactQueryBuilder/compositeRuleEditor
 import { RuleValueEditor } from "./inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.js";
 import { useConvertValue } from "./inputs/reactQueryBuilder/hooks/useConvertValue.js";
 import { useValid } from "./inputs/reactQueryBuilder/hooks/useValid.js";
-import { ChangeWays, KeyedColumnsRowIndexer, collectibleHelper, forTesting, getHelper, noOpHelper } from "./muiVirtualizedTable/KeyedColumnsRowIndexer.js";
-import { DEFAULT_CELL_PADDING, DEFAULT_HEADER_HEIGHT, DEFAULT_ROW_HEIGHT, MuiVirtualizedTable, generateMuiVirtualizedTableClass } from "./muiVirtualizedTable/MuiVirtualizedTable.js";
 import { MultipleSelectionDialog } from "./multipleSelectionDialog/MultipleSelectionDialog.js";
 import { OverflowableText } from "./overflowableText/OverflowableText.js";
 import { SnackbarProvider } from "./snackbarProvider/SnackbarProvider.js";
@@ -118,7 +116,6 @@ export {
   CUSTOM_AGGRID_THEME,
   CancelButton,
   CardErrorBoundary,
-  ChangeWays,
   CheckBoxList,
   CheckboxInput,
   CombinatorSelector,
@@ -133,10 +130,7 @@ export {
   CustomFormProvider,
   CustomMuiDialog,
   CustomReactQueryBuilder,
-  DEFAULT_CELL_PADDING,
-  DEFAULT_HEADER_HEIGHT,
   DEFAULT_RANGE_VALUE,
-  DEFAULT_ROW_HEIGHT,
   DISTRIBUTION_KEY,
   DataType,
   DescriptionField,
@@ -173,7 +167,6 @@ export {
   GroupValueEditor,
   InputWithPopupConfirmation,
   IntegerInput,
-  KeyedColumnsRowIndexer,
   LOAD_TYPE_OPTIONS,
   Login,
   LogoText,
@@ -181,7 +174,6 @@ export {
   MidFormError,
   ModifyElementSelection,
   MuiSelectInput,
-  MuiVirtualizedTable,
   MultipleAutocompleteInput,
   MultipleSelectionDialog,
   NAME,
@@ -197,7 +189,6 @@ export {
   PropertyValueEditor,
   RATIO_REGULATION_MODE_OPTIONS,
   REGULATION_TYPE_OPTIONS,
-  ROW_DRAGGING_SELECTION_COLUMN_DEF,
   RULES,
   RadioInput,
   RangeInput,
@@ -227,23 +218,19 @@ export {
   UserManagerMock,
   ValueEditor,
   ValueSelector,
-  collectibleHelper,
   countRules,
   dispatchUser,
   expertFilterSchema,
   explicitNamingFilterSchema,
   exportExpertRules,
   extractDefault,
-  forTesting,
   genHelperError,
   genHelperPreviousValue,
-  generateMuiVirtualizedTableClass,
   generateTreeViewFinderClass,
   getCriteriaBasedFormData,
   getCriteriaBasedSchema,
   getExpertFilterEmptyFormData,
   getExplicitNamingFilterEmptyFormData,
-  getHelper,
   getNumberOfSiblings,
   getOperators,
   getPreLoginPath,
@@ -260,7 +247,6 @@ export {
   isIntegerNumber,
   login,
   logout,
-  noOpHelper,
   queryValidator,
   recursiveRemove,
   rqbQuerySchemaValidator,

package/dist/components/inputs/index.js

@@ -2,7 +2,7 @@ import { SelectClearable } from "./SelectClearable.js";
 import { DirectoryItemsInput, NAME } from "./reactHookForm/DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "./reactHookForm/RawReadOnlyInput.js";
 import { BottomRightButtons } from "./reactHookForm/agGridTable/BottomRightButtons.js";
-import { CustomAgGridTable, ROW_DRAGGING_SELECTION_COLUMN_DEF } from "./reactHookForm/agGridTable/CustomAgGridTable.js";
+import { CustomAgGridTable } from "./reactHookForm/agGridTable/CustomAgGridTable.js";
 import { NumericEditor } from "./reactHookForm/agGridTable/cellEditors/numericEditor.js";
 import { CsvUploader } from "./reactHookForm/agGridTable/csvUploader/CsvUploader.js";
 import { AutocompleteInput } from "./reactHookForm/autocompleteInputs/AutocompleteInput.js";
@@ -84,7 +84,6 @@ export {
   NAME,
   NumericEditor,
   PropertyValueEditor,
-  ROW_DRAGGING_SELECTION_COLUMN_DEF,
   RadioInput,
   RangeInput,
   RangeType,

package/dist/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.d.ts

@@ -1,10 +1,5 @@
+import { AgGridReactProps } from 'ag-grid-react';
 
-export declare const ROW_DRAGGING_SELECTION_COLUMN_DEF: {
-    rowDrag: boolean;
-    headerCheckboxSelection: boolean;
-    checkboxSelection: boolean;
-    maxWidth: number;
-}[];
 export interface CustomAgGridTableProps {
     name: string;
     columnDefs: any;
@@ -14,8 +9,8 @@ export interface CustomAgGridTableProps {
     defaultColDef: unknown;
     pagination: boolean;
     paginationPageSize: number;
-    suppressRowClickSelection: boolean;
+    rowSelection?: AgGridReactProps['rowSelection'];
     alwaysShowVerticalScroll: boolean;
     stopEditingWhenCellsLoseFocus: boolean;
 }
-export declare function CustomAgGridTable({ name, columnDefs, makeDefaultRowData, csvProps, cssProps, defaultColDef, pagination, paginationPageSize, suppressRowClickSelection, alwaysShowVerticalScroll, stopEditingWhenCellsLoseFocus, ...props }: CustomAgGridTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomAgGridTable({ name, columnDefs, makeDefaultRowData, csvProps, cssProps, defaultColDef, pagination, paginationPageSize, rowSelection, alwaysShowVerticalScroll, stopEditingWhenCellsLoseFocus, ...props }: Readonly<CustomAgGridTableProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.js

@@ -8,14 +8,6 @@ import { useTheme, Box } from "@mui/material";
 import { useIntl } from "react-intl";
 import { BottomRightButtons } from "./BottomRightButtons.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
-const ROW_DRAGGING_SELECTION_COLUMN_DEF = [
-  {
-    rowDrag: true,
-    headerCheckboxSelection: true,
-    checkboxSelection: true,
-    maxWidth: 50
-  }
-];
 const style = (customProps) => ({
   grid: (theme) => ({
     width: "auto",
@@ -80,7 +72,7 @@ function CustomAgGridTable({
   defaultColDef,
   pagination,
   paginationPageSize,
-  suppressRowClickSelection,
+  rowSelection,
   alwaysShowVerticalScroll,
   stopEditingWhenCellsLoseFocus,
   ...props
@@ -190,11 +182,10 @@ function CustomAgGridTable({
         onGridReady,
         getLocaleText,
         cacheOverflowSize: 10,
-        rowSelection: "multiple",
+        rowSelection: rowSelection ?? "multiple",
         rowDragEntireRow: true,
         rowDragManaged: true,
         onRowDragEnd: (e) => move(getIndex(e.node.data), e.overIndex),
-        suppressBrowserResizeObserver: true,
         columnDefs,
         detailRowAutoHeight: true,
         onSelectionChanged: () => {
@@ -206,9 +197,9 @@ function CustomAgGridTable({
         getRowId: (row) => row.data[FieldConstants.AG_GRID_ROW_UUID],
         pagination,
         paginationPageSize,
-        suppressRowClickSelection,
         alwaysShowVerticalScroll,
         stopEditingWhenCellsLoseFocus,
+        theme: "legacy",
         ...props
       }
     ) }),
@@ -230,6 +221,5 @@ function CustomAgGridTable({
   ] });
 }
 export {
-  CustomAgGridTable,
-  ROW_DRAGGING_SELECTION_COLUMN_DEF
+  CustomAgGridTable
 };

package/dist/components/inputs/reactHookForm/agGridTable/index.js

@@ -1,11 +1,10 @@
 import { BottomRightButtons } from "./BottomRightButtons.js";
-import { CustomAgGridTable, ROW_DRAGGING_SELECTION_COLUMN_DEF } from "./CustomAgGridTable.js";
+import { CustomAgGridTable } from "./CustomAgGridTable.js";
 import { NumericEditor } from "./cellEditors/numericEditor.js";
 import { CsvUploader } from "./csvUploader/CsvUploader.js";
 export {
   BottomRightButtons,
   CsvUploader,
   CustomAgGridTable,
-  NumericEditor,
-  ROW_DRAGGING_SELECTION_COLUMN_DEF
+  NumericEditor
 };

package/dist/components/inputs/reactHookForm/index.js

@@ -1,7 +1,7 @@
 import { DirectoryItemsInput, NAME } from "./DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
 import { BottomRightButtons } from "./agGridTable/BottomRightButtons.js";
-import { CustomAgGridTable, ROW_DRAGGING_SELECTION_COLUMN_DEF } from "./agGridTable/CustomAgGridTable.js";
+import { CustomAgGridTable } from "./agGridTable/CustomAgGridTable.js";
 import { NumericEditor } from "./agGridTable/cellEditors/numericEditor.js";
 import { CsvUploader } from "./agGridTable/csvUploader/CsvUploader.js";
 import { AutocompleteInput } from "./autocompleteInputs/AutocompleteInput.js";
@@ -59,7 +59,6 @@ export {
   MultipleAutocompleteInput,
   NAME,
   NumericEditor,
-  ROW_DRAGGING_SELECTION_COLUMN_DEF,
   RadioInput,
   RangeInput,
   RangeType,

package/dist/index.js

@@ -43,7 +43,7 @@ import { SelectClearable } from "./components/inputs/SelectClearable.js";
 import { DirectoryItemsInput, NAME } from "./components/inputs/reactHookForm/DirectoryItemsInput.js";
 import { RawReadOnlyInput } from "./components/inputs/reactHookForm/RawReadOnlyInput.js";
 import { BottomRightButtons } from "./components/inputs/reactHookForm/agGridTable/BottomRightButtons.js";
-import { CustomAgGridTable, ROW_DRAGGING_SELECTION_COLUMN_DEF } from "./components/inputs/reactHookForm/agGridTable/CustomAgGridTable.js";
+import { CustomAgGridTable } from "./components/inputs/reactHookForm/agGridTable/CustomAgGridTable.js";
 import { NumericEditor } from "./components/inputs/reactHookForm/agGridTable/cellEditors/numericEditor.js";
 import { CsvUploader } from "./components/inputs/reactHookForm/agGridTable/csvUploader/CsvUploader.js";
 import { AutocompleteInput } from "./components/inputs/reactHookForm/autocompleteInputs/AutocompleteInput.js";
@@ -91,8 +91,6 @@ import { GroupValueEditor } from "./components/inputs/reactQueryBuilder/composit
 import { RuleValueEditor } from "./components/inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.js";
 import { useConvertValue } from "./components/inputs/reactQueryBuilder/hooks/useConvertValue.js";
 import { useValid } from "./components/inputs/reactQueryBuilder/hooks/useValid.js";
-import { ChangeWays, KeyedColumnsRowIndexer, collectibleHelper, forTesting, getHelper, noOpHelper } from "./components/muiVirtualizedTable/KeyedColumnsRowIndexer.js";
-import { DEFAULT_CELL_PADDING, DEFAULT_HEADER_HEIGHT, DEFAULT_ROW_HEIGHT, MuiVirtualizedTable, generateMuiVirtualizedTableClass } from "./components/muiVirtualizedTable/MuiVirtualizedTable.js";
 import { MultipleSelectionDialog } from "./components/multipleSelectionDialog/MultipleSelectionDialog.js";
 import { OverflowableText } from "./components/overflowableText/OverflowableText.js";
 import { SnackbarProvider } from "./components/snackbarProvider/SnackbarProvider.js";
@@ -200,7 +198,6 @@ export {
   CUSTOM_AGGRID_THEME,
   CancelButton,
   CardErrorBoundary,
-  ChangeWays,
   CheckBoxList,
   CheckboxInput,
   CombinatorSelector,
@@ -216,10 +213,7 @@ export {
   CustomMuiDialog,
   CustomReactQueryBuilder,
   DARK_THEME,
-  DEFAULT_CELL_PADDING,
-  DEFAULT_HEADER_HEIGHT,
   DEFAULT_RANGE_VALUE,
-  DEFAULT_ROW_HEIGHT,
   DEGREE,
   DISTRIBUTION_KEY,
   DanglingLine,
@@ -270,7 +264,6 @@ export {
   KILO_AMPERE,
   KILO_METER,
   KILO_VOLT,
-  KeyedColumnsRowIndexer,
   LANG_ENGLISH,
   LANG_FRENCH,
   LANG_SYSTEM,
@@ -293,7 +286,6 @@ export {
   ModificationType,
   ModifyElementSelection,
   MuiSelectInput,
-  MuiVirtualizedTable,
   MultipleAutocompleteInput,
   MultipleSelectionDialog,
   NAME,
@@ -313,7 +305,6 @@ export {
   RATIO_REGULATION_MODE_OPTIONS,
   REGULATION_TYPE_OPTIONS,
   RESET_AUTHENTICATION_ROUTER_ERROR,
-  ROW_DRAGGING_SELECTION_COLUMN_DEF,
   RULES,
   RadioInput,
   RangeInput,
@@ -364,7 +355,6 @@ export {
   cardErrorBoundaryEn,
   cardErrorBoundaryFr,
   catchErrorHandler,
-  collectibleHelper,
   commonButtonEn,
   commonButtonFr,
   convertInputValue,
@@ -409,10 +399,8 @@ export {
   filterFr,
   flatParametersEn,
   flatParametersFr,
-  forTesting,
   genHelperError,
   genHelperPreviousValue,
-  generateMuiVirtualizedTableClass,
   generateTreeViewFinderClass,
   getComputedLanguage,
   getCriteriaBasedFormData,
@@ -421,7 +409,6 @@ export {
   getExpertFilterEmptyFormData,
   getExplicitNamingFilterEmptyFormData,
   getFileIcon,
-  getHelper,
   getNumberOfSiblings,
   getOperators,
   getPreLoginPath,
@@ -459,7 +446,6 @@ export {
   multipleSelectionDialogFr,
   networkModificationsEn,
   networkModificationsFr,
-  noOpHelper,
   queryValidator,
   recursiveRemove,
   reportViewerEn,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.77.2",
+    "version": "0.79.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": ">=9",
@@ -42,7 +42,6 @@
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-querybuilder": "^7.2.0",
-        "react-virtualized": "^9.22.5",
         "reconnecting-websocket": "^4.4.0",
         "uuid": "^9.0.1"
     },
@@ -55,8 +54,8 @@
         "@mui/material": "^5.15.14",
         "@mui/system": "^5.15.15",
         "@mui/x-tree-view": "^6.17.0",
-        "ag-grid-community": "^31.0.0",
-        "ag-grid-react": "^31.2.0",
+        "ag-grid-community": "^33.0.3",
+        "ag-grid-react": "^33.0.3",
         "notistack": "^3.0.1",
         "papaparse": "^5.4.1",
         "react": "^18.2.0",
@@ -97,14 +96,13 @@
         "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.2.24",
         "@types/react-resizable": "^3.0.7",
-        "@types/react-virtualized": "^9.21.29",
         "@types/utf-8-validate": "^5.0.2",
         "@types/uuid": "^9.0.8",
         "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^7.0.0",
         "@vitejs/plugin-react": "^4.2.1",
-        "ag-grid-community": "^31.0.0",
-        "ag-grid-react": "^31.2.0",
+        "ag-grid-community": "^33.0.3",
+        "ag-grid-react": "^33.0.3",
         "babel-eslint": "^10.1.0",
         "babel-preset-airbnb": "^5.0.0",
         "babel-preset-vite": "^1.1.3",

package/dist/components/muiVirtualizedTable/ColumnHeader.d.ts

@@ -1,26 +0,0 @@
-import { BoxProps, Theme } from '@mui/material';
-import { FilterAltOutlined as FilterAltOutlinedIcon } from '@mui/icons-material';
-import { ComponentProps, ReactNode } from 'react';
-
-interface SortButtonProps {
-    signedRank?: number;
-    headerHovered: boolean;
-    hovered?: boolean;
-    onClick: BoxProps['onClick'];
-}
-interface FilterButtonProps {
-    filterLevel: number;
-    headerHovered: boolean;
-    onClick: ComponentProps<typeof FilterAltOutlinedIcon>['onClick'];
-}
-export interface ColumnHeaderProps extends BoxProps {
-    label: ReactNode;
-    numeric: boolean;
-    sortSignedRank: SortButtonProps['signedRank'];
-    filterLevel: FilterButtonProps['filterLevel'];
-    onSortClick: SortButtonProps['onClick'];
-    onFilterClick: FilterButtonProps['onClick'];
-}
-export declare const ColumnHeaderComponent: import('react').ForwardRefExoticComponent<Omit<ColumnHeaderProps, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", Theme>>>>;
-export declare const ColumnHeader: import('@emotion/styled').StyledComponent<Omit<ColumnHeaderProps, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", Theme>>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
-export {};

package/dist/components/muiVirtualizedTable/ColumnHeader.js

@@ -1,108 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback, useRef, useMemo } from "react";
-import { ArrowUpward, ArrowDownward, FilterAltOutlined } from "@mui/icons-material";
-import { styled } from "@mui/system";
-import { Box } from "@mui/material";
-import { mergeSx } from "../../utils/styles.js";
-const styles = {
-  label: {
-    fontWeight: "bold",
-    fontSize: "0.875rem"
-    // to mimic TableCellRoot 'binding'
-  },
-  divFlex: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    height: "100%"
-  },
-  divNum: {
-    flexDirection: "row-reverse",
-    textAlign: "right"
-  },
-  sortDiv: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  },
-  sortButton: {
-    fill: "currentcolor"
-  },
-  filterButton: {
-    stroke: "currentcolor"
-  },
-  filterTooLossy: (theme) => ({
-    stroke: theme.palette.secondary.main
-  }),
-  transparent: {
-    opacity: 0
-  },
-  hovered: {
-    opacity: 0.5
-  }
-};
-function SortButton({ signedRank = 0, ...props }) {
-  const sortRank = Math.abs(signedRank);
-  const visibilityStyle = (!signedRank || void 0) && (props.headerHovered ? styles.hovered : styles.transparent);
-  return /* @__PURE__ */ jsxs(Box, { sx: styles.sortDiv, onClick: props.onClick, children: [
-    signedRank >= 0 ? /* @__PURE__ */ jsx(ArrowUpward, { sx: visibilityStyle }) : /* @__PURE__ */ jsx(ArrowDownward, { sx: visibilityStyle }),
-    sortRank > 1 && !props.hovered && /* @__PURE__ */ jsx("sub", { children: sortRank })
-  ] });
-}
-function FilterButton(props) {
-  const { filterLevel, headerHovered, onClick } = props;
-  const visibilityStyle = !filterLevel && (headerHovered ? styles.hovered : styles.transparent);
-  return /* @__PURE__ */ jsx(
-    FilterAltOutlined,
-    {
-      onClick,
-      sx: mergeSx(
-        styles.filterButton,
-        // @ts-ignore type incompatibility of styles
-        filterLevel > 1 && styles.filterTooLossy,
-        visibilityStyle
-      )
-    }
-  );
-}
-const ColumnHeaderComponent = forwardRef((props, ref) => {
-  const { className, label, numeric, sortSignedRank, filterLevel, onSortClick, onFilterClick, onContextMenu, style } = props;
-  const [hovered, setHovered] = useState(false);
-  const onHover = useCallback((evt) => {
-    setHovered(evt.type === "mouseenter");
-  }, []);
-  const topmostDiv = useRef();
-  const handleFilterClick = useMemo(() => {
-    if (!onFilterClick) {
-      return void 0;
-    }
-    return (evt) => {
-      onFilterClick(evt);
-    };
-  }, [onFilterClick]);
-  return (
-    // @ts-ignore it does not let us define Box with onMouseEnter/onMouseLeave attributes with 'div' I think, not sure though
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        ref: topmostDiv,
-        onMouseEnter: onHover,
-        onMouseLeave: onHover,
-        sx: mergeSx(styles.divFlex, numeric ? styles.divNum : void 0),
-        className,
-        style,
-        onContextMenu,
-        children: [
-          /* @__PURE__ */ jsx(Box, { ref, sx: styles.label, children: label }),
-          onSortClick && /* @__PURE__ */ jsx(SortButton, { headerHovered: hovered, onClick: onSortClick, signedRank: sortSignedRank }),
-          handleFilterClick && /* @__PURE__ */ jsx(FilterButton, { headerHovered: hovered, onClick: handleFilterClick, filterLevel })
-        ]
-      }
-    )
-  );
-});
-const ColumnHeader = styled(ColumnHeaderComponent)({});
-export {
-  ColumnHeader,
-  ColumnHeaderComponent
-};