@linzjs/step-ag-grid 23.0.1 → 24.0.0

package/src/components/GridCell.tsx

@@ -1,22 +1,22 @@
-import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
+import { ColDef, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
 import {
+  EditableCallbackParams,
   SuppressKeyboardEventParams,
   ValueFormatterFunc,
   ValueFormatterParams,
   ValueGetterFunc,
   ValueGetterParams,
-  EditableCallbackParams,
-} from "ag-grid-community";
-import { forwardRef, ReactElement, useContext } from "react";
-
-import { GridPopoverContextProvider } from "../contexts/GridPopoverContextProvider";
-import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
-import { fnOrVar } from "../utils/util";
-import { GridBaseRow } from "./Grid";
-import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
-import { GridIcon } from "./GridIcon";
-import { GridLoadableCell } from "./GridLoadableCell";
-import { GenericCellColDef, GenericCellRendererParams } from "./gridRender";
+} from 'ag-grid-community';
+import { forwardRef, ReactElement, useContext } from 'react';
+
+import { GridPopoverContextProvider } from '../contexts/GridPopoverContextProvider';
+import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
+import { fnOrVar } from '../utils/util';
+import { GridBaseRow } from './Grid';
+import { GridCellMultiSelectClassRules } from './GridCellMultiSelectClassRules';
+import { GridIcon } from './GridIcon';
+import { GridLoadableCell } from './GridLoadableCell';
+import { GenericCellColDef, GenericCellRendererParams } from './gridRender';
 
 export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;
@@ -25,7 +25,7 @@ export interface GenericCellEditorProps<E> {
 }
 
 export interface SAICellRendererParams<TData = any, TValue = any, TContext = any>
-  extends Omit<ICellRendererParams<TData, TValue, TContext>, "data"> {
+  extends Omit<ICellRendererParams<TData, TValue, TContext>, 'data'> {
   data: TData;
 }
 
@@ -38,18 +38,18 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   let warningText = props.data !== undefined && warningFn ? warningFn(props) : undefined;
   const infoFn = rendererParams?.info;
   let infoText = props.data !== undefined && infoFn ? infoFn(props) : undefined;
-  if (Array.isArray(warningText)) warningText = warningText.join("\n");
-  if (Array.isArray(infoText)) infoText = infoText.join("\n");
+  if (Array.isArray(warningText)) warningText = warningText.join('\n');
+  if (Array.isArray(infoText)) infoText = infoText.join('\n');
 
-  return checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id) ? (
+  return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (
     <GridLoadableCell />
   ) : (
     <>
       {!!warningText && (
-        <GridIcon icon={"ic_warning_outline"} title={typeof warningText === "string" ? warningText : "Warning"} />
+        <GridIcon icon={'ic_warning_outline'} title={typeof warningText === 'string' ? warningText : 'Warning'} />
       )}
-      {!!infoText && <GridIcon icon={"ic_info_outline"} title={typeof infoText === "string" ? infoText : "Info"} />}
-      <div className={"GridCell-container"}>
+      {!!infoText && <GridIcon icon={'ic_info_outline'} title={typeof infoText === 'string' ? infoText : 'Info'} />}
+      <div className={'GridCell-container'}>
         {colDef.cellRendererParams?.originalCellRenderer ? (
           <colDef.cellRendererParams.originalCellRenderer {...props} />
         ) : (
@@ -57,13 +57,13 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
         )}
       </div>
       {fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (
-        <div className={"GridCell-hoverRight"}>{rendererParams?.rightHoverElement}</div>
+        <div className={'GridCell-hoverRight'}>{rendererParams?.rightHoverElement}</div>
       )}
     </>
   );
 };
 
-export interface SAValueGetterParams<TData = any, TValue = any> extends Omit<ValueGetterParams<TData, TValue>, "data"> {
+export interface SAValueGetterParams<TData = any, TValue = any> extends Omit<ValueGetterParams<TData, TValue>, 'data'> {
   data: TData;
   getValue: (field: string) => any;
 }
@@ -73,7 +73,7 @@ export interface SAValueGetterFunc<TData = any, TValue = any> {
 }
 
 export interface SAEditableCallbackParams<TData = any, TValue = any>
-  extends Omit<EditableCallbackParams<TData, TValue>, "data"> {
+  extends Omit<EditableCallbackParams<TData, TValue>, 'data'> {
   data: TData;
 }
 
@@ -82,7 +82,7 @@ export interface SAEditableCallback<TData = any, TValue = any> {
 }
 
 export interface SAValueFormatterParams<TData = any, TValue = any>
-  extends Omit<ValueFormatterParams<TData, TValue>, "data" | "value"> {
+  extends Omit<ValueFormatterParams<TData, TValue>, 'data' | 'value'> {
   data: TData;
   value: TValue;
 }
@@ -92,7 +92,7 @@ export interface SAValueFormatterFunc<TData = any, TValue = any> {
 }
 
 // This is so that typescript retains the row type to pass to the GridCells
-// @ts-ignore
+// @ts-expect-error types
 export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {
   _?: TData;
   editable?: boolean | SAEditableCallback<TData, ValueType>;
@@ -116,13 +116,13 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
 export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
   const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
   const exec = shortcutKeys[e.event.key];
-  if (exec && !e.editing && !e.event.repeat && e.event.type === "keydown") {
+  if (exec && !e.editing && !e.event.repeat && e.event.type === 'keydown') {
     const editable = fnOrVar(e.colDef?.editable, e);
     return editable ? (exec(e) ?? true) : true;
   }
   // It's important that aggrid doesn't trigger edit on enter
   // as the incorrect selected rows will be returned
-  return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " ", "Home", "End", "PageUp", "PageDown"].includes(
+  return !['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp', 'Tab', ' ', 'Home', 'End', 'PageUp', 'PageDown'].includes(
     e.event.key,
   );
 };
@@ -134,17 +134,17 @@ export const generateFilterGetter = <TData extends GridBaseRow, ValueType>(
 ): string | SAValueGetterFunc<TData, ValueType> | undefined => {
   if (filterValueGetter) return filterValueGetter;
   // aggrid will default to valueGetter
-  if (typeof valueFormatter !== "function" || !field) return undefined;
+  if (typeof valueFormatter !== 'function' || !field) return undefined;
 
   return (params: ValueGetterParams<TData, ValueType>): any => {
     const value = params.getValue(field);
     let formattedValue = valueFormatter({ ...params, value });
     // Search for null values using standard dash
-    if (formattedValue === "–") formattedValue += " -";
+    if (formattedValue === '–') formattedValue += ' -';
     // Search by raw value as well as formatted
-    const gotValue = ["string", "number"].includes(typeof value) ? value : undefined;
-    return (formattedValue + (gotValue != null && formattedValue != gotValue ? " " + gotValue : "")) //
-      .replace(/\s+/g, " ")
+    const gotValue = ['string', 'number'].includes(typeof value) ? value : undefined;
+    return (formattedValue + (gotValue != null && formattedValue != gotValue ? ' ' + gotValue : '')) //
+      .replace(/\s+/g, ' ')
       .trim();
   };
 };
@@ -196,13 +196,13 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
     filterValueGetter: filterValueGetter as any,
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
-      if (params.value == null) return "–";
-      const types = ["number", "boolean", "string"];
+      if (params.value == null) return '–';
+      const types = ['number', 'boolean', 'string'];
       if (types.includes(typeof params.value)) return `${params.value}`;
       else return JSON.stringify(params.value);
     },
     ...props,
-    cellRenderer: typeof props.cellRenderer === "string" ? props.cellRenderer : GridCellRenderer,
+    cellRenderer: typeof props.cellRenderer === 'string' ? props.cellRenderer : GridCellRenderer,
     cellRendererParams: {
       originalCellRenderer: props.cellRenderer,
       ...props.cellRendererParams,
@@ -223,17 +223,19 @@ export const GenericCellEditorComponentWrapper = (editor?: (props: any) => React
   return forwardRef(function GenericCellEditorComponentFr(cellEditorParams: ICellEditorParams, _) {
     const valueFormatted = cellEditorParams.formatValue
       ? cellEditorParams.formatValue(cellEditorParams.value)
-      : "Missing formatter";
+      : 'Missing formatter';
     return (
       <GridPopoverContextProvider props={cellEditorParams}>
-        {
-          <cellEditorParams.colDef.cellRenderer
-            {...cellEditorParams}
-            valueFormatted={valueFormatted}
-            {...cellEditorParams.colDef.cellRendererParams}
-          />
-        }
-        {obj.editor && <obj.editor {...cellEditorParams} />}
+        <>
+          {
+            <cellEditorParams.colDef.cellRenderer
+              {...cellEditorParams}
+              valueFormatted={valueFormatted}
+              {...cellEditorParams.colDef.cellRendererParams}
+            />
+          }
+          {obj.editor && <obj.editor {...cellEditorParams} />}
+        </>
       </GridPopoverContextProvider>
     );
   });

package/src/components/GridCellFiller.tsx

@@ -1,12 +1,13 @@
-import { ColDef } from "ag-grid-community";
-import { GridBaseRow } from "./Grid";
+import { ColDef } from 'ag-grid-community';
 
-export const GridCellFillerColId = "gridCellFiller";
+import { GridBaseRow } from './Grid';
+
+export const GridCellFillerColId = 'gridCellFiller';
 
 export const isGridCellFiller = (col: ColDef) => col.colId === GridCellFillerColId;
 
 export const GridCellFiller = <TData extends GridBaseRow>(): ColDef<TData, any> => ({
   colId: GridCellFillerColId,
-  headerName: "",
+  headerName: '',
   flex: 1,
 });

package/src/components/GridCellMultiEditor.tsx

@@ -1,11 +1,11 @@
-import { CellEditorSelectorResult } from "ag-grid-community";
-import { ICellEditorParams } from "ag-grid-community";
-import { ComponentProps, ReactElement } from "react";
+import { CellEditorSelectorResult } from 'ag-grid-community';
+import { ICellEditorParams } from 'ag-grid-community';
+import { ComponentProps, ReactElement } from 'react';
 
-import { GridBaseRow } from "./Grid";
-import { ColDefT, GenericCellEditorComponentWrapper, GridCell } from "./GridCell";
-import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
-import { GenericCellColDef } from "./gridRender";
+import { GridBaseRow } from './Grid';
+import { ColDefT, GenericCellEditorComponentWrapper, GridCell } from './GridCell';
+import { GridCellMultiSelectClassRules } from './GridCellMultiSelectClassRules';
+import { GenericCellColDef } from './gridRender';
 
 export const Editor = <FN extends (param: any) => ReactElement>(props: {
   multiEdit: boolean;

package/src/components/GridCellMultiSelectClassRules.tsx

@@ -1,8 +1,8 @@
-import { CellClassParams, CellClassRules } from "ag-grid-community";
-import { ICellEditorParams } from "ag-grid-community";
+import { CellClassParams, CellClassRules } from 'ag-grid-community';
+import { ICellEditorParams } from 'ag-grid-community';
 
 export const GridCellMultiSelectClassRules: CellClassRules = {
-  "ag-selected-for-edit": (params: CellClassParams) => {
+  'ag-selected-for-edit': (params: CellClassParams) => {
     const { api, node, colDef } = params;
     const cep = colDef.cellEditorSelector
       ? colDef.cellEditorSelector(params as ICellEditorParams)?.params

package/src/components/GridIcon.tsx

@@ -1,8 +1,7 @@
-import clsx from "clsx";
-import { ReactElement } from "react";
-
-import { LuiIcon } from "@linzjs/lui";
-import { IconName, IconSize } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { LuiIcon } from '@linzjs/lui';
+import { IconName, IconSize } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import clsx from 'clsx';
+import { ReactElement } from 'react';
 
 export const GridIcon = (props: {
   icon: IconName;
@@ -15,11 +14,11 @@ export const GridIcon = (props: {
     name={props.icon}
     title={props.title}
     alt={props.title}
-    size={props.size ?? "md"}
+    size={props.size ?? 'md'}
     className={clsx(
       `AgGridGenericCellRenderer-${props.icon}Icon`,
       props.className,
-      props.disabled && "GridIcon-disabled",
+      props.disabled && 'GridIcon-disabled',
     )}
   />
 );

package/src/components/GridLoadableCell.tsx

@@ -1,8 +1,8 @@
-import { LuiMiniSpinner } from "@linzjs/lui";
+import { LuiMiniSpinner } from '@linzjs/lui';
 
 export const GridLoadableCell = () => (
   <LuiMiniSpinner
     size={22}
-    divProps={{ className: "GridLoadableCell-container", role: "status", "aria-label": "Loading" }}
+    divProps={{ className: 'GridLoadableCell-container', role: 'status', 'aria-label': 'Loading' }}
   />
 );

package/src/components/GridNoRowsOverlay.tsx

@@ -1,5 +1,5 @@
-import { LuiStatusSpinner } from "@linzjs/lui";
-import { ForwardedRef, forwardRef } from "react";
+import { LuiStatusSpinner } from '@linzjs/lui';
+import { ForwardedRef, forwardRef } from 'react';
 
 const GridLoadingOverlayComponentFr = (
   props: { headerRowHeight: number },
@@ -12,12 +12,12 @@ const GridLoadingOverlayComponentFr = (
       top: 0,
       bottom: 0,
       right: 0,
-      position: "absolute",
-      backgroundColor: "rgba(255,255,255,0.5)",
+      position: 'absolute',
+      backgroundColor: 'rgba(255,255,255,0.5)',
     }}
   >
-    <div style={{ height: "100%", position: "relative" }}>
-      <div style={{ position: "absolute", left: 0, top: props.headerRowHeight, right: 0, bottom: 0 }}>
+    <div style={{ height: '100%', position: 'relative' }}>
+      <div style={{ position: 'absolute', left: 0, top: props.headerRowHeight, right: 0, bottom: 0 }}>
         <LuiStatusSpinner />
       </div>
     </div>
@@ -40,10 +40,10 @@ export const GridNoRowsOverlayFr = (props: GridNoRowsOverlayProps, externalRef:
     return <GridLoadingOverlayComponent ref={externalRef} headerRowHeight={props.headerRowHeight} />;
   }
   if (props.rowCount === 0) {
-    return <div ref={externalRef}>{props.noRowsOverlayText ?? "There are currently no rows"}</div>;
+    return <div ref={externalRef}>{props.noRowsOverlayText ?? 'There are currently no rows'}</div>;
   }
   if (props.filteredRowCount === 0) {
-    return <div ref={externalRef}>{props.noRowsMatchingOverlayText ?? "All rows have been filtered"}</div>;
+    return <div ref={externalRef}>{props.noRowsMatchingOverlayText ?? 'All rows have been filtered'}</div>;
   }
   return <div ref={externalRef} />;
 };

package/src/components/GridPopoverHook.tsx

@@ -1,11 +1,11 @@
-import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react';
 
-import { GridContext } from "../contexts/GridContext";
-import { useGridPopoverContext } from "../contexts/GridPopoverContext";
-import { ControlledMenu } from "../react-menu3";
-import { MenuCloseEvent } from "../react-menu3/types";
-import { CloseReason } from "../react-menu3/utils";
-import { GridBaseRow } from "./Grid";
+import { GridContext } from '../contexts/GridContext';
+import { useGridPopoverContext } from '../contexts/GridPopoverContext';
+import { ControlledMenu } from '../react-menu3';
+import { MenuCloseEvent } from '../react-menu3/types';
+import { CloseReason } from '../react-menu3/utils';
+import { GridBaseRow } from './Grid';
 
 export interface GridPopoverHookProps<TData> {
   className: string | undefined;
@@ -64,36 +64,36 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
         <>
           {anchorRef.current && (
             <ControlledMenu
-              state={isOpen ? "open" : "closed"}
+              state={isOpen ? 'open' : 'closed'}
               portal={true}
               unmountOnClose={true}
               anchorRef={anchorRef}
               saveButtonRef={saveButtonRef}
-              menuClassName={"step-ag-grid-react-menu"}
+              menuClassName={'step-ag-grid-react-menu'}
               onClose={(event: MenuCloseEvent) => {
                 // Prevent menu from closing when modals are invoked
                 if (event.reason === CloseReason.BLUR) return;
-                triggerSave(event.reason).then();
+                void triggerSave(event.reason);
               }}
-              viewScroll={"auto"}
+              viewScroll={'auto'}
               dontShrinkIfDirectionIsTop={true}
               className={props.className}
             >
               {saving && ( // This is the overlay that prevents editing when the editor is saving
-                <div className={"ComponentLoadingWrapper-saveOverlay"} />
+                <div className={'ComponentLoadingWrapper-saveOverlay'} />
               )}
               {children}
               <button
                 ref={saveButtonRef}
-                data-reason={""}
+                data-reason={''}
                 onClick={(e) => {
-                  let reason = e.currentTarget.getAttribute("data-reason") ?? undefined;
+                  let reason = e.currentTarget.getAttribute('data-reason') ?? undefined;
                   if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
                     reason = CloseReason.CANCEL;
                   }
-                  triggerSave(reason).then();
+                  void triggerSave(reason);
                 }}
-                style={{ display: "none" }}
+                style={{ display: 'none' }}
               />
             </ControlledMenu>
           )}

package/src/components/GridWrapper.tsx

@@ -1,11 +1,11 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 
 export interface GridWrapperProps {
   maxHeight?: number | string;
 }
 
 export const GridWrapper = ({ children, maxHeight }: PropsWithChildren<GridWrapperProps>) => (
-  <div className={"Grid-wrapper"} style={{ maxHeight }}>
+  <div className={'Grid-wrapper'} style={{ maxHeight }}>
     {children}
   </div>
 );

package/src/components/PostSortRowsHook.ts

@@ -1,10 +1,10 @@
-import { IRowNode } from "ag-grid-community";
-import { ColumnState } from "ag-grid-community";
-import { PostSortRowsParams } from "ag-grid-community";
-import { isEmpty } from "lodash-es";
-import { useCallback, useContext, useRef } from "react";
+import { IRowNode } from 'ag-grid-community';
+import { ColumnState } from 'ag-grid-community';
+import { PostSortRowsParams } from 'ag-grid-community';
+import { isEmpty } from 'lodash-es';
+import { useCallback, useContext, useRef } from 'react';
 
-import { GridContext } from "../contexts/GridContext";
+import { GridContext } from '../contexts/GridContext';
 
 interface PostSortRowsHookProps {
   setStaleGrid: (stale: boolean) => void;
@@ -22,7 +22,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
   const initialised = useRef(false);
 
   // Used to detect sort order has changed since last run
-  const lastSortOrderHash = useRef<string>("");
+  const lastSortOrderHash = useRef<string>('');
 
   // Used to detect if sort order was the same, has the direction changed
   const previousRowSortIndexRef = useRef<Record<string, { index: number; hash: string } | undefined>>({});
@@ -35,7 +35,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
   // As a sort on a stale row should just resort, not change sort direction
   const previousColSort = useRef<ColumnState[]>([]);
 
-  const previousQuickFilter = useRef("");
+  const previousQuickFilter = useRef('');
 
   return useCallback(
     ({ api, nodes }: PostSortRowsParams) => {
@@ -45,7 +45,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
       const previousRowSortIndex = previousRowSortIndexRef.current;
 
       const hashNode = (node: IRowNode | undefined) => {
-        return node ? JSON.stringify(node.data) : "";
+        return node ? JSON.stringify(node.data) : '';
       };
 
       const copyCurrentSortSettings = (): ColumnState[] =>
@@ -83,7 +83,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
 
       const quickFilter = api.getQuickFilter();
       if (previousQuickFilter.current != quickFilter) {
-        previousQuickFilter.current = quickFilter ?? "";
+        previousQuickFilter.current = quickFilter ?? '';
         sortOrderChanged = true;
       }
 
@@ -110,7 +110,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
           setStaleGrid(false);
 
           // trigger a recapture of sort order
-          lastSortOrderHash.current = "";
+          lastSortOrderHash.current = '';
           restorePreviousSortColumnState();
         } else {
           // Sort was on a different column so clear sort and sort like normal

package/src/components/clickInputWhenContainingCellClicked.tsx

@@ -1,4 +1,4 @@
-import { CellClickedEvent } from "ag-grid-community";
+import { CellClickedEvent } from 'ag-grid-community';
 
 /**
  * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
@@ -11,13 +11,13 @@ export const clickInputWhenContainingCellClicked = (params: CellClickedEvent) =>
   const element = event.target as Element;
   // Already handled
   if (
-    element.closest(".GridCell-readonly") ||
-    (["BUTTON", "INPUT"].includes(element?.tagName) && element.closest(".ag-cell-inline-editing"))
+    element.closest('.GridCell-readonly') ||
+    (['BUTTON', 'INPUT'].includes(element?.tagName) && element.closest('.ag-cell-inline-editing'))
   ) {
     return;
   }
 
-  const row = element.closest("[row-id]");
+  const row = element.closest('[row-id]');
   if (!row) return;
 
   const colId = colDef.colId;
@@ -27,7 +27,7 @@ export const clickInputWhenContainingCellClicked = (params: CellClickedEvent) =>
     const cell = row.querySelector(`[col-id='${colId}']`);
     if (!cell) return;
 
-    const input = cell.querySelector("input, button");
+    const input = cell.querySelector('input, button');
     if (!input) return;
 
     input?.dispatchEvent(event);

package/src/components/gridFilter/GridFilterButtons.tsx

@@ -1,12 +1,11 @@
-import clsx, { ClassValue } from "clsx";
-import { ReactElement, useMemo, useState } from "react";
+import { LuiButton, LuiButtonGroup } from '@linzjs/lui';
+import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
+import clsx, { ClassValue } from 'clsx';
+import { ReactElement, useMemo, useState } from 'react';
 
-import { LuiButton, LuiButtonGroup } from "@linzjs/lui";
-import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
-
-import { GridFilterExternal } from "../../contexts/GridContext";
-import { GridBaseRow } from "../Grid";
-import { useGridFilter } from "./useGridFilter";
+import { GridFilterExternal } from '../../contexts/GridContext';
+import { GridBaseRow } from '../Grid';
+import { useGridFilter } from './useGridFilter';
 
 export interface GridFilterButtonsOption<TData extends GridBaseRow> {
   defaultSelected?: boolean;
@@ -32,7 +31,7 @@ export const GridFilterButtons = <TData extends GridBaseRow>({
   useGridFilter(filter);
 
   return (
-    <div className={clsx(className, "flex-col-center")}>
+    <div className={clsx(className, 'flex-col-center')}>
       <LuiButtonGroup>
         {options.map((option, index) => (
           <LuiButton