@linzjs/step-ag-grid 16.0.0 → 17.0.0

package/dist/GridTheme.scss

@@ -1,106 +1,138 @@
-@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
-
-// These break if we use urls so ignore stylelint
-/* stylelint-disable-next-line */
-@import "ag-grid-community/src/styles/ag-grid";
-/* stylelint-disable-next-line */
-@import "ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
-
-.ag-theme-alpine {
-  // AG Grid themes can be customized using theme parameters, which are arguments that change its appearance. Refer to
-  // https://www.ag-grid.com/javascript-data-grid/themes-customising/#full-list-of-theme-parameters for a full list of
-  // the available theme parameters, which should be used whenever possible.
-  @include ag-theme-alpine(
-    (
-      alpine-active-color: lui.$sea,
-      foreground-color: lui.$charcoal,
-      data-color: lui.$charcoal,
-      // ag-grid-community >=28
-      selected-row-background-color: lui.$polar,
-      header-foreground-color: lui.$surfie,
-      background-color: lui.$white,
-      odd-row-background-color: lui.$white,
-      header-background-color: lui.$white,
-      border-color: lui.$lily,
-      secondary-border-color: lui.$lily,
-      cell-horizontal-border: solid ag-derived(secondary-border-color),
-      cell-horizontal-padding: 12,
-      row-hover-color: lui.$hint,
-      font-family: (
-        "Open Sans",
-        system-ui,
-        sans-serif,
-      ),
-      font-size: 1rem !important,
-      borders: false,
-      borders-critical: true,
-      borders-secondary: false,
-    )
-  );
-
-  // Fix that when you click below checkbox it doesn't process a click
-  .ag-cell[col-id="selection"] {
-    display: flex;
-  }
-
-  // Fix that when you click below checkbox it doesn't process a click
-  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
-    height: auto;
-  }
-
-  .ag-row:last-of-type {
-    border-bottom: 1px solid lui.$lily;
-  }
-
-  // ag-grid-community 27.x.x needs this vs 28 using the selected-row-background-color above
-  // You can set a background _color_ with theme parameters, but for something like a gradient, you need to override CSS.
-  .ag-row-selected {
-    background-color: lui.$polar;
-  }
-
-  .ag-header-cell {
-    font-weight: 600;
-    padding: 7px 11px;
-
-    .LuiIcon {
-      fill: lui.$surfie;
-    }
-  }
-
-  .ag-cell {
-    padding-left: 11px;
-    padding-right: 11px;
-    display: flex;
-    align-items: center;
-  }
-
-  .ag-cell-wrap-text {
-    word-break: break-word;
-  }
-
-  .ag-cell.ag-cell-popup-editing,
-  .ag-cell.ag-selected-for-edit,
-  .ag-cell-inline-editing {
-    padding-left: 9px;
-    padding-right: 9px;
-    background: rgb(72 160 244 / 20%);
-    // These are important, it needs to override ag-grid to work
-    border: 3px solid #48a0f4 !important;
-    border-right: 3px solid #48a0f4 !important;
-  }
-
-  .ag-row .ag-cell-data-changed {
-    // ag-grid natively has !important on this style so we have to use it here :(
-    background-color: lightgoldenrodyellow !important;
-  }
-
-  .ag-center-cols-clipper {
-    // when using domLayout={"autoHeight"}, ag grid has a default min-height set to 150px so the !important is necessary here
-    min-height: 40px !important;
-  }
-
-  .ag-body-horizontal-scroll-viewport {
-    // It's set to scroll by default, but this causes issues with selecting the last row
-    overflow-x: auto;
-  }
-}
+@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "node_modules/ag-grid-community/styles" as ag;
+
+// ag-grid likes to add 1px to this, so we subtract to compensate
+$grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
+
+// GridTheme that support ag-grid v29 new SASS API
+@include ag.grid-styles(
+  (
+    themes: (
+      step-compact: (
+        extend-theme: alpine,
+        --ag-row-height: 36px,
+        --ag-header-height: 36px,
+        --ag-font-size: calc($grid-base-font-size - 2px),
+      ),
+      step-default: (
+        extend-theme: alpine,
+        --ag-row-height: 40px,
+        --ag-header-height: 40px,
+        --ag-font-size: calc($grid-base-font-size),
+      ),
+    ),
+
+    alpine-active-color: lui.$sea,
+    background-color: lui.$white,
+    border-color: lui.$dew,
+    borders: false,
+    borders-critical: true,
+    borders-secondary: false,
+    cell-horizontal-border: solid lui.$dew,
+    cell-horizontal-padding: lui.$unit-sm,
+    data-color: lui.$charcoal,
+    foreground-color: lui.$charcoal,
+    font-family: (
+      "Open Sans",
+      system-ui,
+      sans-serif,
+    ),
+    font-size: 1rem,
+    header-background-color: lui.$white,
+    header-foreground-color: lui.$surfie,
+    odd-row-background-color: lui.$white,
+    row-hover-color: lui.$hint,
+    secondary-border-color: lui.$dew,
+    selected-row-background-color: lui.$polar,
+  )
+);
+
+// Fix that when you click below checkbox it doesn't process a click
+.ag-cell[col-id="selection"] {
+  display: flex;
+}
+
+// Fix that when you click below checkbox it doesn't process a click
+.ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
+  height: auto;
+}
+
+.ag-row:last-of-type {
+  border-bottom: 1px solid lui.$dew;
+}
+
+.ag-header-cell {
+  font-size: 14px;
+  font-weight: 600;
+
+  // fix: Display descender line
+  padding: 0 11px;
+
+  .LuiIcon {
+    fill: lui.$surfie;
+  }
+}
+
+.ag-cell-label-container {
+  padding: 8px 0;
+
+  // Help ag-grid to calculate column height in react portal
+  height: fit-content;
+}
+
+.ag-header .ag-header-cell[aria-colindex="1"] {
+  padding-left: lui.$unit-rg;
+}
+
+.ag-cell[role="gridcell"] {
+  border-right: none;
+  border-left: 1px var(--ag-cell-horizontal-border);
+}
+
+.ag-cell[aria-colindex="1"] {
+  border-left: none;
+  padding-left: lui.$unit-rg;
+}
+
+.ag-cell {
+  padding-left: 11px;
+  padding-right: 11px;
+  display: flex;
+  align-items: center;
+}
+
+.ag-cell-wrap-text {
+  word-break: break-word;
+}
+
+.ag-cell.ag-cell-popup-editing,
+.ag-cell.ag-selected-for-edit,
+.ag-cell-inline-editing {
+  padding-left: 9px;
+  padding-right: 9px;
+  background: rgb(72 160 244 / 20%);
+
+  // These are important, it needs to override ag-grid to work
+  border: 3px solid #48a0f4 !important;
+  border-right: 3px solid #48a0f4 !important;
+}
+
+.ag-row .ag-cell-data-changed {
+  // ag-grid natively has !important on this style so we have to use it here :(
+  background-color: lightgoldenrodyellow;
+}
+
+.ag-center-cols-clipper {
+  // when using domLayout={"autoHeight"}, ag grid has a default min-height
+  // set to 150px so the !important is necessary here
+  min-height: 40px !important;
+}
+
+.ag-body-horizontal-scroll-viewport {
+  // It's set to scroll by default, but this causes issues with selecting the last row
+  overflow-x: auto;
+}
+
+.Grid-container .ag-cell {
+  font-weight: 400;
+}

package/dist/index.css

@@ -183,10 +183,7 @@
 
 .ComponentLoadingWrapper-saveOverlay {
   position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0;
   background-color: rgba(64, 64, 64, 0.1);
   z-index: 1000;
 }
@@ -409,10 +406,6 @@
   color: #6b6966;
 }
 
-.Grid-container.ag-theme-alpine .ag-cell {
-  font-weight: 400;
-}
-
 .Grid-container.ag-theme-alpine .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
   visibility: hidden;
 }

package/dist/node_modules/@linzjs/lui/dist/assets/svg-content.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type LuiIconName = string | 'ic_account_circle' | 'ic_add' | 'ic_add_adopt' | 'ic_add_area_interest' | 'ic_add_circle' | 'ic_add_circle_outline' | 'ic_add_irregular_image' | 'ic_add_multiple' | 'ic_add_to_list' | 'ic_added_to_list' | 'ic_alias' | 'ic_alias_unselected' | 'ic_annotations' | 'ic_apps' | 'ic_arrow_back' | 'ic_arrow_back_ios' | 'ic_arrow_back_left' | 'ic_arrow_drop_down' | 'ic_arrow_drop_right' | 'ic_arrow_drop_up' | 'ic_arrow_forward_ios' | 'ic_arrow_forward_right' | 'ic_attach_file' | 'ic_attachment' | 'ic_auth_and_instruct' | 'ic_balance_parcel' | 'ic_basemap_off' | 'ic_blackwhite_greyscale' | 'ic_blocked' | 'ic_border_color' | 'ic_cancel_clear' | 'ic_cancel_outline' | 'ic_cart_view' | 'ic_certify_and_sign' | 'ic_change_password' | 'ic_check' | 'ic_check_circle' | 'ic_check_circle_outline' | 'ic_checklist' | 'ic_clear' | 'ic_close_list' | 'ic_columns' | 'ic_control_point' | 'ic_copy' | 'ic_corporate_fare' | 'ic_create' | 'ic_create_new_list' | 'ic_csv_file' | 'ic_data_display_threshold' | 'ic_data_display_threshold_high_urban' | 'ic_data_display_threshold_low_large_rural' | 'ic_data_display_threshold_medium_rural' | 'ic_dealings' | 'ic_delete_forever' | 'ic_delete_outline' | 'ic_delete_solid' | 'ic_dollar_round' | 'ic_double_arrow_left' | 'ic_double_arrow_right' | 'ic_double_tick' | 'ic_drag_handle' | 'ic_drag_indicator' | 'ic_draw_irregular_line' | 'ic_email' | 'ic_enabled_users' | 'ic_error' | 'ic_error_outline' | 'ic_expand_less' | 'ic_expand_more' | 'ic_feedback_lightbulb' | 'ic_feedback_lightbulb_alt' | 'ic_file_attached' | 'ic_file_attached_outline' | 'ic_filter_list' | 'ic_flag' | 'ic_forward' | 'ic_fullscreen_frame' | 'ic_grid_view' | 'ic_help_outline' | 'ic_history' | 'ic_hourglass' | 'ic_info' | 'ic_info_outline' | 'ic_insert_invitation' | 'ic_insert_photo' | 'ic_instruments_roles' | 'ic_keyboard_arrow_down' | 'ic_keyboard_arrow_left' | 'ic_keyboard_arrow_right' | 'ic_keyboard_arrow_up' | 'ic_labels_off' | 'ic_labels_on' | 'ic_launch_modal' | 'ic_launch_new window_open' | 'ic_layers' | 'ic_layers_user_defined' | 'ic_left' | 'ic_left_col' | 'ic_line_arc' | 'ic_line_irregular' | 'ic_line_vector' | 'ic_link' | 'ic_list_add' | 'ic_list_clear' | 'ic_list_notepad' | 'ic_list_view' | 'ic_lists_folder' | 'ic_locate' | 'ic_lock' | 'ic_lock_alt' | 'ic_log_out' | 'ic_manage_adjust' | 'ic_maori_land' | 'ic_mark_linking' | 'ic_marks' | 'ic_memorials' | 'ic_menu' | 'ic_message_received' | 'ic_minimise' | 'ic_misclose_error' | 'ic_more_vert' | 'ic_multi_factor_authentication_mfa' | 'ic_navigate_before' | 'ic_navigate_next' | 'ic_note_add' | 'ic_notice_of_change' | 'ic_numbered_list' | 'ic_office_building_corporate' | 'ic_order_history' | 'ic_package' | 'ic_parcels_existing' | 'ic_parcels_new' | 'ic_pdf' | 'ic_pen_and_paper_sign' | 'ic_people_outline' | 'ic_person' | 'ic_person_add' | 'ic_picker' | 'ic_placeholder' | 'ic_plus_one' | 'ic_polygon_selection' | 'ic_pop_back' | 'ic_pre_validation' | 'ic_print' | 'ic_product_list' | 'ic_publish' | 'ic_refresh' | 'ic_regenerate' | 'ic_release' | 'ic_remove_circle' | 'ic_remove_circle_outline' | 'ic_request' | 'ic_requisitions' | 'ic_restore' | 'ic_round_selection' | 'ic_save' | 'ic_save_as' | 'ic_save_download' | 'ic_saved_area_interest' | 'ic_search' | 'ic_send' | 'ic_send_email_dart' | 'ic_separator' | 'ic_settings' | 'ic_sorting_down_arrow_up' | 'ic_sorting_up_arrow_up' | 'ic_square_selection' | 'ic_subdirectory_arrow_right' | 'ic_submit' | 'ic_summary_open' | 'ic_survey' | 'ic_survey_report' | 'ic_ta_request_sent' | 'ic_table_columns' | 'ic_tax_statement' | 'ic_tick' | 'ic_tick_and_cross' | 'ic_timeline' | 'ic_title_allocation_swap' | 'ic_tune_setting_configure' | 'ic_unlink' | 'ic_unlock' | 'ic_upload' | 'ic_vector' | 'ic_vector_sequence' | 'ic_view' | 'ic_view_list' | 'ic_view_quilt' | 'ic_view_sidebar' | 'ic_view_week' | 'ic_visiblity_off' | 'ic_warning' | 'ic_warning_outline' | 'ic_waves' | 'ic_whats_new_updates' | 'ic_xml_file' | 'ic_zoom_centre' | 'ic_zoom_out' | 'ic_zoom_previous';
+type IconNameElementMap = {
+    [key in LuiIconName]?: JSX.Element;
+};
+export declare const ICONS: IconNameElementMap;
+export {};

package/dist/src/components/ComponentLoadingWrapper.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
+import { PropsWithChildren, ReactElement } from "react";
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
  */
-export declare const ComponentLoadingWrapper: (props: {
+export declare const ComponentLoadingWrapper: (props: PropsWithChildren<{
     loading?: boolean;
     saving?: boolean;
-    children: JSX.Element | undefined;
     className: string | undefined;
-}) => JSX.Element;
+}>) => ReactElement;

package/dist/src/components/Grid.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { ColDef } from "ag-grid-community";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
+import { ReactElement } from "react";
 import { GridContextMenuComponent } from "./gridHook";
 export interface GridBaseRow {
     id: string | number;
@@ -67,4 +67,4 @@ export interface GridProps {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, ...params }: GridProps) => JSX.Element;
+export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, ...params }: GridProps) => ReactElement;

package/dist/src/components/GridCell.d.ts

@@ -1,27 +1,27 @@
-/// <reference types="react" />
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { ReactElement } from "react";
 import { GridBaseRow } from "./Grid";
 import { GenericCellColDef, RowValueFormatterParams, RowValueGetterParams } from "./gridRender";
 export interface GenericCellEditorProps<E> {
     multiEdit?: boolean;
-    editor?: (editorProps: E) => JSX.Element;
+    editor?: (editorProps: E) => ReactElement;
     editorParams?: E;
 }
 export declare const GridCellRenderer: (props: ICellRendererParams) => import("react/jsx-runtime").JSX.Element;
 export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
     _?: RowType;
-    editor?: (editorProps: any) => JSX.Element;
+    editor?: (editorProps: any) => ReactElement;
 }
 export declare const suppressCellKeyboardEvents: (e: SuppressKeyboardEventParams) => any;
 export declare const generateFilterGetter: <RowType extends GridBaseRow>(field: string | undefined, filterValueGetter: string | ((params: RowValueGetterParams<RowType>) => string) | undefined, valueFormatter: string | ((params: RowValueFormatterParams<RowType>) => string) | undefined) => string | ((params: RowValueGetterParams<RowType>) => string) | undefined;
 export declare const GridCell: <RowType extends GridBaseRow, Props extends CellEditorCommon>(props: GenericCellColDef<RowType>, custom?: {
     multiEdit?: boolean | undefined;
     preventAutoEdit?: boolean | undefined;
-    editor?: ((editorProps: Props) => JSX.Element) | undefined;
+    editor?: ((editorProps: Props) => ReactElement) | undefined;
     editorParams?: Props | undefined;
 } | undefined) => ColDefT<RowType>;
 export interface CellEditorCommon {
     className?: string | undefined;
 }
-export declare const GenericCellEditorComponentWrapper: (editor?: ((props: any) => JSX.Element) | undefined) => import("react").ForwardRefExoticComponent<ICellEditorParams & import("react").RefAttributes<unknown>>;
+export declare const GenericCellEditorComponentWrapper: (editor?: ((props: any) => ReactElement) | undefined) => import("react").ForwardRefExoticComponent<ICellEditorParams<any, any, any> & import("react").RefAttributes<unknown>>;

package/dist/src/components/GridCellMultiEditor.d.ts

@@ -1,10 +1,10 @@
 import { CellEditorSelectorResult } from "ag-grid-community/dist/lib/entities/colDef";
 import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
-import { ComponentProps } from "react";
+import { ComponentProps, ReactElement } from "react";
 import { GridBaseRow } from "./Grid";
 import { ColDefT } from "./GridCell";
 import { GenericCellColDef } from "./gridRender";
-export declare const Editor: <FN extends (param: any) => JSX.Element>(props: {
+export declare const Editor: <FN extends (param: any) => ReactElement>(props: {
     multiEdit: boolean;
     editor: FN;
     editorParams: ComponentProps<FN>;

package/dist/src/components/GridNoRowsOverlay.d.ts

@@ -1,5 +1,6 @@
-export declare const GridNoRowsOverlay: (params: {
+export interface GridNoRowsOverlayProps {
     rowCount: number | undefined | null;
     filteredRowCount: number;
     noRowsOverlayText: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const GridNoRowsOverlay: (params: GridNoRowsOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/GridPopoverHook.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { GridBaseRow } from "./Grid";
 export interface GridPopoverHookProps<RowType> {
     className: string | undefined;
-    invalid?: () => Promise<JSX.Element | boolean | string | null | undefined> | JSX.Element | boolean | string | null | undefined;
+    invalid?: () => Promise<ReactElement | boolean | string | null | undefined> | ReactElement | boolean | string | null | undefined;
     save?: (selectedRows: RowType[]) => Promise<boolean>;
     dontSaveOnExternalClick?: boolean;
 }
 export declare const useGridPopoverHook: <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
-    popoverWrapper: (children: JSX.Element) => import("react/jsx-runtime").JSX.Element;
+    popoverWrapper: (children: ReactElement) => import("react/jsx-runtime").JSX.Element;
     triggerSave: (reason?: string) => Promise<void>;
 };

package/dist/src/components/GridWrapper.d.ts

@@ -1,6 +1,5 @@
-import { ReactNode } from "react";
+import { PropsWithChildren } from "react";
 export interface GridWrapperProps {
-    children: ReactNode;
     maxHeight?: number | string;
 }
-export declare const GridWrapper: ({ children, maxHeight }: GridWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GridWrapper: ({ children, maxHeight }: PropsWithChildren<GridWrapperProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/PostSortRowsHook.d.ts

@@ -1,4 +1,4 @@
-import { PostSortRowsParams } from "ag-grid-community/dist/lib/entities/iCallbackParams";
+import { PostSortRowsParams } from "ag-grid-community/dist/lib/interfaces/iCallbackParams";
 interface PostSortRowsHookProps {
     setStaleGrid: (stale: boolean) => void;
 }

package/dist/src/components/gridFilter/GridFilterButtons.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ClassValue } from "clsx";
+import { ReactElement } from "react";
 import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
 import { GridFilterExternal } from "../../contexts/GridContext";
 import { GridBaseRow } from "../Grid";
@@ -13,4 +13,4 @@ export type GridFilterButtonsProps<RowType extends GridBaseRow> = {
     luiButtonProps?: Partial<LuiButtonProps>;
     options: GridFilterButtonsOption<RowType>[];
 };
-export declare const GridFilterButtons: <RowType extends GridBaseRow>({ className, luiButtonProps, options, }: GridFilterButtonsProps<RowType>) => JSX.Element;
+export declare const GridFilterButtons: <RowType extends GridBaseRow>({ className, luiButtonProps, options, }: GridFilterButtonsProps<RowType>) => ReactElement;

package/dist/src/components/gridFilter/GridFilterColumnsToggle.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 export interface GridFilterColumnsToggleProps {
     saveState?: boolean;
 }
-export declare const GridFilterColumnsToggle: ({ saveState }: GridFilterColumnsToggleProps) => JSX.Element;
+export declare const GridFilterColumnsToggle: ({ saveState }: GridFilterColumnsToggleProps) => ReactElement;

package/dist/src/components/gridFilter/GridFilters.d.ts

@@ -1,5 +1,2 @@
-import { ReactNode } from "react";
-export interface GridFiltersProps {
-    children: ReactNode;
-}
-export declare const GridFilters: ({ children }: GridFiltersProps) => import("react/jsx-runtime").JSX.Element;
+import { PropsWithChildren } from "react";
+export declare const GridFilters: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/gridForm/GridFormDropDown.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 export interface GridPopoutEditDropDownSelectedItem<RowType> {
@@ -8,7 +8,7 @@ export interface GridPopoutEditDropDownSelectedItem<RowType> {
 }
 interface FinalSelectOption {
     value: any;
-    label?: JSX.Element | string;
+    label?: ReactElement | string;
     disabled?: boolean | string;
     subComponent?: (props: any, ref: any) => any;
 }

package/dist/src/components/gridForm/GridFormMessage.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 export interface GridFormMessageProps<RowType extends GridBaseRow> extends CellEditorCommon {
-    message: (selectedRows: RowType[]) => Promise<string | JSX.Element> | string | JSX.Element;
+    message: (selectedRows: RowType[]) => Promise<string | ReactElement> | string | ReactElement;
 }
 export declare const GridFormMessage: <RowType extends GridBaseRow>(props: GridFormMessageProps<RowType>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/gridForm/GridFormMultiSelect.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 export interface MultiSelectOption {
     value: any;
     label?: string;
-    subComponent?: (props: any) => JSX.Element;
+    subComponent?: (props: any) => ReactElement;
     subValue?: any;
     filter?: string;
     checked?: boolean;

package/dist/src/components/gridForm/GridFormPopoverMenu.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 export interface GridFormPopoverMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
@@ -18,14 +18,14 @@ export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends M
     subValue: any;
 }
 export interface MenuOption<RowType extends GridBaseRow> {
-    label: JSX.Element | string | MenuSeparatorType;
+    label: ReactElement | string | MenuSeparatorType;
     action?: (props: {
         selectedRows: RowType[];
         menuOption: SelectedMenuOptionResult<RowType>;
     }) => Promise<void>;
     disabled?: string | boolean;
     hidden?: boolean;
-    subComponent?: (props: any) => JSX.Element;
+    subComponent?: (props: any) => ReactElement;
 }
 /**
  * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because

package/dist/src/components/gridForm/GridFormSubComponentTextArea.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { TextInputValidatorProps } from "../../utils/textValidator";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
@@ -9,4 +9,4 @@ export interface GridSubComponentTextAreaProps<RowType extends GridBaseRow> exte
     className?: string;
     helpText?: string;
 }
-export declare const GridFormSubComponentTextArea: <RowType extends GridBaseRow>(props: GridSubComponentTextAreaProps<RowType>) => JSX.Element;
+export declare const GridFormSubComponentTextArea: <RowType extends GridBaseRow>(props: GridSubComponentTextAreaProps<RowType>) => ReactElement;

package/dist/src/components/gridForm/GridFormSubComponentTextInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { TextInputValidatorProps } from "../../utils/textValidator";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
@@ -8,4 +8,4 @@ export interface GridFormSubComponentTextInputProps<RowType extends GridBaseRow>
     defaultValue: string;
     helpText?: string;
 }
-export declare const GridFormSubComponentTextInput: <RowType extends GridBaseRow>(props: GridFormSubComponentTextInputProps<RowType>) => JSX.Element;
+export declare const GridFormSubComponentTextInput: <RowType extends GridBaseRow>(props: GridFormSubComponentTextInputProps<RowType>) => ReactElement;

package/dist/src/components/gridForm/GridFormTextArea.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { TextInputValidatorProps } from "../../utils/textValidator";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
@@ -11,4 +11,4 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends Text
     }) => Promise<boolean>;
     helpText?: string;
 }
-export declare const GridFormTextArea: <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => JSX.Element;
+export declare const GridFormTextArea: <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => ReactElement;

package/dist/src/components/gridRender/GridRenderGenericCell.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { ICellRendererParams } from "ag-grid-community";
 import { EditableCallbackParams, SuppressKeyboardEventParams, ValueFormatterParams, ValueGetterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { ReactElement } from "react";
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
@@ -29,7 +29,7 @@ export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<
 }
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
     singleClickEdit?: boolean;
-    rightHoverElement?: JSX.Element | undefined;
+    rightHoverElement?: ReactElement | undefined;
     editAction?: (selectedRows: RowType[]) => void;
     shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
     warning?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;

package/dist/src/contexts/GridContext.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { ColDef, ColumnApi, GridApi, IRowNode } from "ag-grid-community";
 import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { ColDefT, GridBaseRow } from "../components";
-export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
+export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: IRowNode) => boolean;
 export interface AutoSizeColumnsProps {
     skipHeader?: boolean;
     colIds?: Set<string> | string[];
@@ -47,14 +47,14 @@ export interface GridContextType<RowType extends GridBaseRow> {
         selectedRows: GridBaseRow[];
         field?: string;
     }, fnUpdate: (selectedRows: any[]) => Promise<boolean>, setSaving?: (saving: boolean) => void, tabDirection?: 1 | 0 | -1) => Promise<boolean>;
-    redrawRows: (rowNodes?: RowNode[]) => void;
+    redrawRows: (rowNodes?: IRowNode[]) => void;
     externallySelectedItemsAreInSync: boolean;
     setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
     waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
     addExternalFilter: (filter: GridFilterExternal<RowType>) => void;
     removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
     isExternalFilterPresent: () => boolean;
-    doesExternalFilterPass: (node: RowNode) => boolean;
+    doesExternalFilterPass: (node: IRowNode) => boolean;
     invisibleColumnIds: string[] | undefined;
     setInvisibleColumnIds: (colIds: string[]) => void;
     downloadCsv: (csvExportParams?: CsvExportParams) => void;

package/dist/src/contexts/GridContextProvider.d.ts

@@ -1,19 +1,15 @@
 import { ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
-import { ReactElement, ReactNode } from "react";
+import { PropsWithChildren, ReactElement } from "react";
 import { GridBaseRow } from "../components";
-interface GridContextProps {
-    children: ReactNode;
-}
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
-export declare const GridContextProvider: <RowType extends GridBaseRow>(props: GridContextProps) => ReactElement;
+export declare const GridContextProvider: <RowType extends GridBaseRow>(props: PropsWithChildren) => ReactElement;
 /**
  * Aggrid defaults to using getters and ignores formatters.
  * step-ag-grid by default has a valueFormatter for every column that defaults to the getter if no valueFormatter
  * This function uses valueFormatter by default
  */
 export declare const downloadCsvUseValueFormattersProcessCellCallback: (params: ProcessCellForExportParams) => string;
-export {};

package/dist/src/contexts/GridPopoverContextProvider.d.ts

@@ -1,8 +1,7 @@
 import { ICellEditorParams } from "ag-grid-community";
-import { ReactNode } from "react";
+import { PropsWithChildren } from "react";
 interface GridPopoverContextProps {
     props: ICellEditorParams;
-    children: ReactNode;
 }
-export declare const GridPopoverContextProvider: ({ props, children }: GridPopoverContextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GridPopoverContextProvider: ({ props, children }: PropsWithChildren<GridPopoverContextProps>) => import("react/jsx-runtime").JSX.Element;
 export {};