@linzjs/step-ag-grid 1.1.1

package/src/components/GridPopoutHook.tsx

@@ -0,0 +1,118 @@
+import { ICellEditorParams } from "ag-grid-community";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { GridContext } from "../contexts/GridContext";
+import { ControlledMenu } from "@szhsin/react-menu";
+import { GridFormProps } from "./GridCell";
+import { hasParentClass } from "../utils/util";
+import { GridBaseRow } from "./Grid";
+
+export const useGridPopoutHook = <RowType extends GridBaseRow>(
+  props: GridFormProps<RowType>,
+  save?: (selectedRows: any[]) => Promise<boolean>,
+) => {
+  const { cellEditorParams, saving, updateValue } = props;
+  const { eGridCell } = cellEditorParams as ICellEditorParams;
+  const { stopEditing } = useContext(GridContext);
+  const saveButtonRef = useRef<HTMLButtonElement>(null);
+  const anchorRef = useRef(eGridCell);
+  anchorRef.current = eGridCell;
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    setOpen(true);
+  }, []);
+
+  const triggerSave = useCallback(
+    async (reason?: string) => {
+      if (reason == "cancel" || !save || (await updateValue(save))) {
+        setOpen(false);
+        stopEditing();
+      }
+    },
+    [save, stopEditing, updateValue],
+  );
+
+  const clickIsWithinMenu = useCallback((ev: MouseEvent) => {
+    return hasParentClass("szh-menu--state-open", ev.target as Node);
+  }, []);
+
+  const handleScreenMouseDown = useCallback(
+    (ev: MouseEvent) => {
+      if (!clickIsWithinMenu(ev)) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        // There's an issue in React17
+        // the cell doesn't refresh during update if save is invoked from a native event
+        // This doesn't happen in React18
+        // To work around it, I invoke the save by clicking on an invisible button in the dropdown
+        saveButtonRef.current?.click();
+      }
+    },
+    [clickIsWithinMenu],
+  );
+
+  const handleScreenMouseEvent = useCallback(
+    (ev: MouseEvent) => {
+      if (!clickIsWithinMenu(ev)) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    },
+    [clickIsWithinMenu],
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousedown", handleScreenMouseDown, true);
+      document.addEventListener("mouseup", handleScreenMouseEvent, true);
+      document.addEventListener("click", handleScreenMouseEvent, true);
+      return () => {
+        document.removeEventListener("mousedown", handleScreenMouseDown, true);
+        document.removeEventListener("mouseup", handleScreenMouseEvent, true);
+        document.removeEventListener("click", handleScreenMouseEvent, true);
+      };
+    }
+    return () => {};
+  }, [handleScreenMouseDown, handleScreenMouseEvent, isOpen]);
+
+  const popoutWrapper = useCallback(
+    (children: JSX.Element) => {
+      return (
+        <>
+          {anchorRef.current && (
+            <ControlledMenu
+              state={isOpen ? "open" : "closed"}
+              portal={true}
+              unmountOnClose={true}
+              anchorRef={anchorRef}
+              menuClassName={"lui-menu"}
+              onClose={(event) => triggerSave(event.reason).then()}
+            >
+              {saving && (
+                <div
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    right: 0,
+                    backgroundColor: "rgba(64,64,64,0.1)",
+                    zIndex: 1000,
+                  }}
+                />
+              )}
+              {children}
+              <button ref={saveButtonRef} onClick={() => triggerSave().then()} style={{ display: "none" }} />
+            </ControlledMenu>
+          )}
+        </>
+      );
+    },
+    [isOpen, saving, triggerSave],
+  );
+
+  return {
+    popoutWrapper,
+    triggerSave,
+  };
+};

package/src/components/GridSubComponentTextArea.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export interface GridSubComponentTextAreaProps {
+  setValue: (value: string) => void;
+}
+
+export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps) => {
+  const [value, setValue] = useState("");
+
+  useEffect(() => {
+    props.setValue(value);
+  }, [props, value]);
+
+  return (
+    <div className={"FreeTextInput LuiDeprecatedForms"}>
+      <textarea
+        autoFocus
+        maxLength={10000}
+        spellCheck={true}
+        className={"free-text-input"}
+        onChange={(e) => setValue(e.target.value)}
+        defaultValue={value}
+      />
+    </div>
+  );
+};

package/src/components/GridTheme.scss

@@ -0,0 +1,94 @@
+@use '~@linzjs/lui/dist/scss/Core' as lui;
+
+@import "node_modules/ag-grid-community/src/styles/ag-grid.scss";
+@import "node_modules/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.$grey-80,
+          data-color: lui.$grey-80,
+          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,
+          row-hover-color: lui.$lily,
+          font-family: ("Open Sans", system-ui, sans-serif),
+          font-size: 0.875rem !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):not(.ag-group-value) {
+    height: auto;
+  }
+
+  .ag-row:last-of-type {
+    border-bottom: none;
+  }
+
+  // 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 0 7px 8px;
+
+    .LuiIcon {
+      fill: lui.$surfie;
+    }
+  }
+
+  .ag-cell {
+    padding-left: 7px;
+    padding-right: 4px;
+    display: flex;
+    align-items: center;
+  }
+
+  .ag-cell-more {
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .ag-cell-wrap-text {
+    word-break: break-word;
+  }
+
+  .ag-cell-popup-editing, .ag-selected-for-edit, .ag-cell-inline-editing {
+    background: rgba(72, 160, 244, 0.2);
+    // 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;
+  }
+}

package/src/components/PostSortRowsHook.ts

@@ -0,0 +1,131 @@
+import { useCallback, useRef } from "react";
+import { PostSortRowsParams } from "ag-grid-community/dist/lib/entities/iCallbackParams";
+import { ColumnState } from "ag-grid-community/dist/lib/columns/columnModel";
+
+interface PostSortRowsHookProps {
+  setStaleGrid: (stale: boolean) => void;
+}
+
+/**
+ * Retains last sort order from via <AgGrid postRowSort>.
+ * Then applies this sort until next sort column change.
+ * Handles stale sort, when you edit a row but don't want to re-sort.
+ */
+export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) => {
+  // On first run we need to init the first backed up sort order
+  const initialised = useRef(false);
+
+  // Used to detect sort order has changed since last run
+  const lastSortOrderHash = useRef<string>("");
+
+  // Used to detect if sort order was the same, has the direction changed
+  const previousRowSortIndexRef = useRef<Record<number, number | undefined>>({});
+
+  // stale sort is when there's a sort and user edits a row
+  // this applies a class to the div wrapping the grid which in turn adds a * beside the sort arrow
+  const sortWasStale = useRef(false);
+
+  // Previous col sort is stored and reapplied if the sort direction changes on the same column and the sort was stale
+  // As a sort on a stale row should just resort, not change sort direction
+  const previousColSort = useRef<ColumnState[]>([]);
+
+  const previousQuickFilter = useRef("");
+
+  return useCallback(
+    ({ api, columnApi, nodes }: PostSortRowsParams) => {
+      const previousRowSortIndex = previousRowSortIndexRef.current;
+
+      const copyCurrentSortSettings = (): ColumnState[] =>
+        columnApi.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));
+
+      const backupSortOrder = () => {
+        for (const x in previousRowSortIndex) delete previousRowSortIndex[x];
+        nodes.forEach((row, index) => (previousRowSortIndex[row.data.id] = index));
+      };
+
+      // Check if column is the first sorted column.  Note: column is preconfigured to sort its sortIndex is null not 1
+      const isFirstSortColumn = (row: ColumnState) => row.sort && [0, null].includes(row.sortIndex ?? null);
+
+      const isSameColumnAndDifferentSort = (col1: ColumnState | undefined, col2: ColumnState | undefined) =>
+        col1 && col2 && col1.colId === col2.colId && col1.sort != col2.sort;
+
+      const restorePreviousSortColumnState = () => columnApi.applyColumnState({ state: previousColSort.current });
+
+      const hasNewRows = () => nodes.some((row) => previousRowSortIndex[row.data.id] == null);
+
+      const sortIsStale = () =>
+        !hasNewRows() && nodes.some((row, index) => ![null, index].includes(previousRowSortIndex[row.data.id] ?? null));
+
+      const sortNodesByPreviousSort = () =>
+        nodes.sort(
+          (a, b) =>
+            (previousRowSortIndex[a.data.id] ?? Number.MAX_SAFE_INTEGER) -
+            (previousRowSortIndex[b.data.id] ?? Number.MAX_SAFE_INTEGER),
+        );
+
+      // On first load copy the current sort
+      if (!initialised.current) {
+        initialised.current = true;
+        previousColSort.current = copyCurrentSortSettings();
+      }
+
+      const newSortOrder = JSON.stringify(copyCurrentSortSettings());
+      let sortOrderChanged = newSortOrder != lastSortOrderHash.current;
+
+      const quickFilter = (api as any).filterManager.quickFilter;
+      if (previousQuickFilter.current != quickFilter) {
+        previousQuickFilter.current = quickFilter;
+        sortOrderChanged = true;
+      }
+
+      if (sortOrderChanged) {
+        const thisFirstCol = copyCurrentSortSettings().find(isFirstSortColumn);
+        const previousFirstCol = previousColSort.current.find(isFirstSortColumn);
+
+        // Change to sort can be: (in the context of stale sort do...)
+        // - no sort to sorted (do nothing)
+        // - asc to desc       (resort as asc, and remove stale sort)
+        // - desc to no sort   (resort as desc, and remove stale sort)
+        const wasSortChangedOnSameColumn =
+          previousFirstCol && (!thisFirstCol || isSameColumnAndDifferentSort(previousFirstCol, thisFirstCol));
+
+        // if sort was stale, and we're here, someone has clicked a stale sort order (^*) in the column header
+        if (sortWasStale.current && wasSortChangedOnSameColumn) {
+          // Sort was an existing priority 1 column
+          // We want to re-sort with the old sort direction and clear stale sort
+          sortWasStale.current = false;
+          setStaleGrid(false);
+
+          // trigger a recapture of sort order
+          lastSortOrderHash.current = "";
+          restorePreviousSortColumnState();
+        } else {
+          // Sort was on a different column so clear sort and sort like normal
+          if (sortWasStale.current) {
+            sortWasStale.current = false;
+            setStaleGrid(false);
+          }
+          // Columns were sorted so retain the sort
+          backupSortOrder();
+          lastSortOrderHash.current = newSortOrder;
+        }
+      } else {
+        if (sortIsStale()) {
+          // If we haven't already processed a stale sort then...
+          if (!sortWasStale.current) {
+            // backup sort state, so we can restore it when sort is clicked on a stale column
+            previousColSort.current = copyCurrentSortSettings();
+            sortWasStale.current = true;
+            setStaleGrid(true);
+          }
+
+          sortNodesByPreviousSort();
+        }
+        // secondary sort backup as there may be new nodes that didn't have their sort registered
+        // which would cause two new rows to sort out of sequence
+        backupSortOrder();
+      }
+    },
+    [setStaleGrid],
+  );
+};

package/src/components/gridForm/GridFormDropDown.tsx

@@ -0,0 +1,192 @@
+import "@szhsin/react-menu/dist/index.css";
+
+import { MenuItem, MenuDivider, FocusableItem } from "@szhsin/react-menu";
+import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
+import { GridBaseRow } from "../Grid";
+import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
+import { GridContext } from "../../contexts/GridContext";
+import { delay } from "lodash-es";
+import debounce from "debounce-promise";
+import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { useGridPopoutHook } from "../GridPopoutHook";
+
+export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
+  selectedRows: RowType[];
+  value: ValueType;
+}
+
+interface FinalSelectOption<ValueType> {
+  value: ValueType;
+  label?: JSX.Element | string;
+}
+
+export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
+export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
+
+export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
+
+export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType>
+  extends GenericCellEditorParams<RowType> {
+  filtered?: "local" | "reload";
+  filterPlaceholder?: string;
+  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
+  options:
+    | SelectOption<ValueType>[]
+    | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
+  optionsRequestCancel?: () => void;
+}
+
+export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
+  const { popoutWrapper } = useGridPopoutHook(props);
+  const formProps = props.formProps as GridFormPopoutDropDownProps<RowType, ValueType>;
+
+  const { updatingCells, stopEditing } = useContext(GridContext);
+
+  const [filter, setFilter] = useState("");
+  const [filteredValues, setFilteredValues] = useState<any[]>([]);
+  const optionsInitialising = useRef(false);
+  const [options, setOptions] = useState<FinalSelectOption<ValueType>[] | null>(null);
+
+  const selectItemHandler = useCallback(
+    async (value: ValueType): Promise<boolean> => {
+      const field = props.field;
+      return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
+        const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
+        if (hasChanged) {
+          if (formProps.onSelectedItem) {
+            await formProps.onSelectedItem({ selectedRows, value });
+          } else {
+            selectedRows.forEach((row) => (row[field as keyof RowType] = value));
+          }
+        }
+        return true;
+      });
+    },
+    [formProps, props.field, props.selectedRows, updatingCells],
+  );
+
+  // Load up options list if it's async function
+  useEffect(() => {
+    if (options || optionsInitialising.current) return;
+    optionsInitialising.current = true;
+    let optionsConf = formProps.options ?? [];
+
+    (async () => {
+      if (typeof optionsConf == "function") {
+        optionsConf = await optionsConf(props.selectedRows, filter);
+      }
+
+      const optionsList = optionsConf?.map((item) => {
+        if (item == null || typeof item == "string" || typeof item == "number") {
+          item = { value: item as ValueType, label: item } as FinalSelectOption<ValueType>;
+        }
+        return item;
+      }) as any as FinalSelectOption<ValueType>[];
+
+      if (formProps.filtered) {
+        // This is needed otherwise when filter input is rendered and sets autofocus
+        // the mouse up of the double click edit triggers the cell to cancel editing
+        delay(() => setOptions(optionsList), 100);
+      } else {
+        setOptions(optionsList);
+      }
+      optionsInitialising.current = false;
+    })();
+  }, [filter, options, formProps.filtered, formProps.options, props.selectedRows]);
+
+  // Local filtering
+  useEffect(() => {
+    if (formProps.filtered == "local") {
+      if (options == null) return;
+      setFilteredValues(
+        options
+          .map((option) => {
+            if (option.label != null && typeof option.label !== "string") {
+              console.error("Cannot filter non-string labels", option);
+              return undefined;
+            }
+            const str = (option.label as string) || "";
+            return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
+          })
+          .filter((r) => r !== undefined),
+      );
+    }
+  }, [formProps.filtered, filter, options]);
+
+  const researchOnFilterChange = debounce(
+    useCallback(() => {
+      setOptions(null);
+    }, []),
+    500,
+  );
+
+  const previousFilter = useRef<string>(filter);
+
+  // Reload filtering
+  useEffect(() => {
+    if (previousFilter.current != filter && formProps.filtered == "reload") {
+      previousFilter.current = filter;
+      formProps.optionsRequestCancel && formProps.optionsRequestCancel();
+      researchOnFilterChange().then();
+    }
+  }, [filter, formProps, props, researchOnFilterChange]);
+
+  const onFilterKeyDown = useCallback(
+    async (e: KeyboardEvent) => {
+      if (!options) return;
+      if (e.key == "Enter" || e.key == "Tab") {
+        const activeOptions = options.filter((option) => !filteredValues.includes(option.value));
+        if (activeOptions.length == 1) {
+          await selectItemHandler(activeOptions[0].value);
+          stopEditing();
+        } else {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    },
+    [filteredValues, options, selectItemHandler, stopEditing],
+  );
+
+  return popoutWrapper(
+    <>
+      {formProps.filtered && (
+        <>
+          <FocusableItem className={"filter-item"} index={-1}>
+            {({ ref }: any) => (
+              <div style={{ display: "flex", width: "100%" }}>
+                <input
+                  autoFocus
+                  className={"free-text-input"}
+                  style={{ border: "0px" }}
+                  ref={ref}
+                  type="text"
+                  placeholder={formProps.filterPlaceholder ?? "Placeholder"}
+                  data-testid={"filteredMenu-free-text-input"}
+                  defaultValue={filter}
+                  onChange={(e) => setFilter(e.target.value.toLowerCase())}
+                  onKeyDown={(e) => onFilterKeyDown(e)}
+                />
+              </div>
+            )}
+          </FocusableItem>
+          <MenuDivider key={`$$divider_filter`} />
+        </>
+      )}
+      <ComponentLoadingWrapper loading={!options}>
+        <>
+          {options && options.length == filteredValues?.length && <MenuItem>[Empty]</MenuItem>}
+          {options?.map((item, index) =>
+            item.value === MenuSeparatorString ? (
+              <MenuDivider key={`$$divider_${index}`} />
+            ) : filteredValues.includes(item.value) ? null : (
+              <MenuItem key={`${item.value}`} value={item.value} onClick={() => selectItemHandler(item.value)}>
+                {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+              </MenuItem>
+            ),
+          )}
+        </>
+      </ComponentLoadingWrapper>
+    </>,
+  );
+};

package/src/components/gridForm/GridFormEditBearing.scss

@@ -0,0 +1,3 @@
+.GridFormEditBearing-input {
+  width: 320px;
+}

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -0,0 +1,62 @@
+import "./GridFormEditBearing.scss";
+
+import { useCallback, useState } from "react";
+import { GridBaseRow } from "../Grid";
+import { TextInputFormatted } from "../../lui/TextInputFormatted";
+import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
+import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { useGridPopoutHook } from "../GridPopoutHook";
+
+export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+  placeHolder: string;
+  onSave?: (selectedRows: RowType[], value: number | null) => Promise<boolean>;
+}
+
+export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
+  const formProps = props.formProps as GridFormEditBearingProps<RowType>;
+  const [value, setValue] = useState<string>(`${props.value ?? ""}`);
+
+  const save = useCallback(
+    async (selectedRows: RowType[]): Promise<boolean> => {
+      if (bearingStringValidator(value)) return false;
+      const parsedValue = bearingNumberParser(value);
+      // Value didn't change so don't save just cancel
+      if (parsedValue === props.value) {
+        return true;
+      }
+      if (formProps.onSave) {
+        return await formProps.onSave(selectedRows, parsedValue);
+      } else {
+        const field = props.field;
+        if (field == null) {
+          console.error("field is not defined in ColDef");
+        } else {
+          selectedRows.forEach((row) => ((row as Record<string, any>)[field] = parsedValue));
+        }
+      }
+      return true;
+    },
+    [formProps, props.field, props.value, value],
+  );
+  const { popoutWrapper, triggerSave } = useGridPopoutHook(props, save);
+
+  return popoutWrapper(
+    <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
+      <TextInputFormatted
+        value={value ?? ""}
+        onChange={(e) => {
+          setValue(e.target.value.trim());
+        }}
+        inputProps={{
+          autoFocus: true,
+          placeholder: formProps.placeHolder,
+          disabled: false,
+          maxLength: 16,
+          onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
+        }}
+        formatted={bearingStringValidator(value) ? "?" : convertDDToDMS(bearingNumberParser(value))}
+        error={bearingStringValidator(value)}
+      />
+    </div>,
+  );
+};

package/src/components/gridForm/GridFormMessage.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { ICellEditorParams } from "ag-grid-community";
+import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
+import { GridBaseRow } from "../Grid";
+import { useGridPopoutHook } from "../GridPopoutHook";
+
+export interface GridFormMessageProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+  message: (
+    selectedRows: RowType[],
+    cellEditorParams: ICellEditorParams,
+  ) => Promise<string | JSX.Element> | string | JSX.Element;
+}
+
+export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
+  const formProps = props.formProps as GridFormMessageProps<RowType>;
+
+  const [message, setMessage] = useState<string | JSX.Element | null>(null);
+  const { popoutWrapper } = useGridPopoutHook(props);
+
+  useEffect(() => {
+    (async () => {
+      setMessage(await formProps.message(props.selectedRows, props.cellEditorParams));
+    })().then();
+  }, [formProps, props.selectedRows, props]);
+
+  return popoutWrapper(
+    <ComponentLoadingWrapper loading={message === null}>
+      <div style={{ maxWidth: 400 }} className={"Grid-popoverContainer"}>
+        {message}
+      </div>
+    </ComponentLoadingWrapper>,
+  );
+};