@linzjs/step-ag-grid 14.7.1 → 14.9.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "14.7.1",
+  "version": "14.9.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -108,7 +108,7 @@
     "@types/react": "^17.0.60",
     "@types/react-dom": "^17.0.20",
     "@types/uuid": "^9.0.1",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/parser": "^5.60.0",
     "babel-jest": "^29.5.0",
     "babel-preset-react-app": "^10.0.1",
     "chromatic": "^6.18.0",

package/src/components/Grid.tsx

@@ -4,7 +4,7 @@ import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
-import { difference, isEmpty, last, omit, xorBy } from "lodash-es";
+import { defer, difference, isEmpty, last, omit, xorBy } from "lodash-es";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { GridContext } from "../contexts/GridContext";
@@ -37,6 +37,7 @@ export interface GridProps {
   noRowsOverlayText?: string;
   postSortRows?: GridOptions["postSortRows"];
   animateRows?: boolean;
+  rowHeight?: number;
   rowClassRules?: GridOptions["rowClassRules"];
   rowSelection?: "single" | "multiple";
   autoSelectFirstRow?: boolean;
@@ -500,11 +501,13 @@ export const Grid = ({
       if (!isEmpty(colIdsEdited.current)) {
         const skipHeader = sizeColumns === "auto-skip-headers";
         if (sizeColumns === "auto" || skipHeader) {
-          autoSizeColumns({
-            skipHeader,
-            userSizedColIds: userSizedColIds.current,
-            colIds: colIdsEdited.current,
-          });
+          defer(() =>
+            autoSizeColumns({
+              skipHeader,
+              userSizedColIds: userSizedColIds.current,
+              colIds: colIdsEdited.current,
+            }),
+          );
         }
         colIdsEdited.current.clear();
       }
@@ -562,6 +565,7 @@ export const Grid = ({
     >
       <div style={{ flex: 1 }} ref={gridDivRef}>
         <AgGridReact
+          rowHeight={params.rowHeight}
           animateRows={params.animateRows}
           rowClassRules={params.rowClassRules}
           getRowId={(params) => `${params.data.id}`}

package/src/components/gridForm/GridFormMultiSelectGrid.tsx

@@ -0,0 +1,172 @@
+import { isEqual } from "lodash-es";
+import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
+
+import { LuiCheckboxInput } from "@linzjs/lui";
+
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
+import { MenuItem } from "../../react-menu3";
+import { ClickEvent } from "../../react-menu3/types";
+import { GridBaseRow } from "../Grid";
+import { CellEditorCommon } from "../GridCell";
+import { GridIcon } from "../GridIcon";
+import { useGridPopoverHook } from "../GridPopoverHook";
+
+export interface MultiSelectGridOption {
+  value: any;
+  label?: string | ReactElement;
+  checked?: boolean | "partial";
+  canSelectPartial?: boolean;
+  warning?: string | undefined;
+}
+
+export interface GridFormMultiSelectGridSaveProps<RowType extends GridBaseRow> {
+  selectedRows: RowType[];
+  addValues: any[];
+  removeValues: any[];
+}
+
+export interface GridFormMultiSelectGridProps<RowType extends GridBaseRow> extends CellEditorCommon {
+  className?: string | undefined;
+  noOptionsMessage?: string;
+  onSave?: (props: GridFormMultiSelectGridSaveProps<RowType>) => Promise<boolean>;
+  options:
+    | MultiSelectGridOption[]
+    | ((selectedRows: RowType[]) => Promise<MultiSelectGridOption[]> | MultiSelectGridOption[]);
+  invalid?: (props: GridFormMultiSelectGridSaveProps<RowType>) => boolean;
+  maxRowCount?: number;
+}
+
+export const GridFormMultiSelectGrid = <RowType extends GridBaseRow>(
+  props: GridFormMultiSelectGridProps<RowType>,
+): ReactElement => {
+  const { selectedRows } = useGridPopoverContext<RowType>();
+  const optionsInitialising = useRef(false);
+
+  const [initialValues, setInitialValues] = useState<MultiSelectGridOption[]>();
+  const [options, setOptions] = useState<MultiSelectGridOption[]>();
+
+  const genSave = useCallback(
+    (selectedRows: RowType[]): GridFormMultiSelectGridSaveProps<RowType> => {
+      if (!options) return { selectedRows, addValues: [], removeValues: [] };
+
+      const preChecked = (initialValues ?? []).filter((o) => o.checked).map((o) => o.value);
+      const postNotChecked = options.filter((o) => o.checked === false).map((o) => o.value);
+      const removeValues = preChecked.filter((p) => postNotChecked.some((c) => c === p));
+
+      const preNotChecked = (initialValues ?? []).filter((o) => o.checked !== true).map((o) => o.value);
+      const postChecked = options.filter((o) => o.checked === true).map((o) => o.value);
+      const addValues = preNotChecked.filter((p) => postChecked.some((c) => c === p));
+
+      return { selectedRows, addValues, removeValues };
+    },
+    [initialValues, options],
+  );
+
+  const save = useCallback(
+    async (selectedRows: RowType[]): Promise<boolean> => {
+      if (!options || !props.onSave) return true;
+      // Any changes to save?
+      if (
+        isEqual(
+          initialValues?.map((o) => o.checked),
+          options.map((o) => o.checked),
+        )
+      ) {
+        return true;
+      }
+      if (!props.onSave) return true;
+      return await props.onSave(genSave(selectedRows));
+    },
+    [genSave, initialValues, options, props],
+  );
+
+  const invalid = useCallback(() => {
+    if (!options) return true;
+    return props.invalid && props.invalid(genSave(selectedRows));
+  }, [genSave, options, props, selectedRows]);
+
+  const { popoverWrapper } = useGridPopoverHook({
+    className: props.className,
+    save,
+    invalid,
+  });
+
+  // Load up options list if it's async function
+  useEffect(() => {
+    if (options || optionsInitialising.current) return;
+    optionsInitialising.current = true;
+
+    (async () => {
+      const optionsList = typeof props.options === "function" ? await props.options(selectedRows) : props.options;
+      setInitialValues(optionsList.map((o) => ({ ...o, label: "" })));
+      setOptions(optionsList);
+      optionsInitialising.current = false;
+    })();
+  }, [options, props, selectedRows]);
+
+  const toggleValue = useCallback(
+    (item: MultiSelectGridOption) => {
+      if (options) {
+        item.checked = item.checked === true && item.canSelectPartial ? "partial" : !item.checked;
+        setOptions([...options]);
+      }
+    },
+    [options, setOptions],
+  );
+
+  return popoverWrapper(
+    <>
+      <div className={"Grid-popoverContainer"}>
+        <div
+          style={{
+            display: "grid",
+            gridAutoFlow: "column",
+            gridTemplateRows: `repeat(${props.maxRowCount ?? 10}, auto)`,
+            maxWidth: "calc(min(100vw,500px))",
+            overflowX: "auto",
+          }}
+        >
+          {options &&
+            options.map((o) => (
+              <>
+                <MenuItem
+                  key={JSON.stringify(o.value)}
+                  onClick={(e: ClickEvent) => {
+                    // Global react-menu MenuItem handler handles tabs
+                    if (e.key !== "Tab" && e.key !== "Enter") {
+                      e.keepOpen = true;
+                      toggleValue(o);
+                    }
+                  }}
+                >
+                  <LuiCheckboxInput
+                    isChecked={!!o.checked ?? false}
+                    isIndeterminate={o.checked === "partial"}
+                    value={`${o.value}`}
+                    label={
+                      <>
+                        {o.warning && <GridIcon icon={"ic_warning_outline"} title={o.warning} />}
+                        <span className={"GridMultiSelectGrid-Label"}>
+                          {o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`)}
+                        </span>
+                      </>
+                    }
+                    inputProps={{
+                      onClick: (e) => {
+                        // Click is handled by MenuItem onClick
+                        e.preventDefault();
+                        e.stopPropagation();
+                      },
+                    }}
+                    onChange={() => {
+                      /*Do nothing, change handled by menuItem*/
+                    }}
+                  />
+                </MenuItem>
+              </>
+            ))}
+        </div>
+      </div>
+    </>,
+  );
+};

package/src/components/gridForm/index.ts

@@ -2,6 +2,7 @@ export * from "./GridFormDropDown";
 export * from "./GridFormEditBearing";
 export * from "./GridFormMessage";
 export * from "./GridFormMultiSelect";
+export * from "./GridFormMultiSelectGrid";
 export * from "./GridFormPopoverMenu";
 export * from "./GridFormSubComponentTextArea";
 export * from "./GridFormSubComponentTextInput";

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelectGrid.ts

@@ -0,0 +1,17 @@
+import { GridBaseRow } from "../Grid";
+import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
+import { GridFormMultiSelectGrid, GridFormMultiSelectGridProps } from "../gridForm/GridFormMultiSelectGrid";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+
+export const GridPopoutEditMultiSelectGrid = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType>,
+  props: GenericCellEditorProps<GridFormMultiSelectGridProps<RowType>>,
+): ColDefT<RowType> =>
+  GridCell(colDef, {
+    editor: GridFormMultiSelectGrid,
+    ...props,
+    editorParams: {
+      className: "GridMultiSelect-containerMedium",
+      ...(props.editorParams as GridFormMultiSelectGridProps<RowType>),
+    },
+  });

package/src/components/gridPopoverEdit/index.ts

@@ -1,4 +1,5 @@
 export * from "./GridPopoutEditMultiSelect";
+export * from "./GridPopoutEditMultiSelectGrid";
 export * from "./GridPopoverMenu";
 export * from "./GridPopoverEditBearing";
 export * from "./GridPopoverEditBearing";

package/src/react-menu3/components/MenuList.tsx

@@ -2,6 +2,7 @@ import { debounce } from "lodash-es";
 import { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 
+import { findParentWithClass } from "../../utils/util";
 import { HoverItemContext } from "../contexts/HoverItemContext";
 import { MenuListContext } from "../contexts/MenuListContext";
 import { MenuListItemContext } from "../contexts/MenuListItemContext";
@@ -88,6 +89,32 @@ export const MenuList = ({
   const closeTransition = getTransition(transition, "close");
   const scrollNodes = scrollNodesRef.current;
 
+  /**
+   * Given the menu-item we are on, find the closest or furthest next menu-item horizontally and focus it.
+   * @return true if element found else false.
+   */
+  const focusSideways = (menuItemEl: HTMLElement | null, direction: 1 | -1): boolean => {
+    if (!menuItemEl) return false;
+
+    let [best, worst]: { i: number; d: number }[] = [];
+    findParentWithClass("szh-menu", menuItemEl)
+      ?.querySelectorAll<HTMLLIElement>(".szh-menu__item")
+      ?.forEach((item, i) => {
+        // Must be at same height as currently focused menu-item
+        if (item.offsetTop === menuItemEl.offsetTop) {
+          // Find the least positive distance and most negative distance (for wrap around)
+          const d = (item.offsetLeft - menuItemEl.offsetLeft) * direction;
+          if (d > 0 && (!best || d < best.d)) best = { i, d };
+          if (d < 0 && (!worst || d < worst.d)) worst = { i, d };
+        }
+      });
+    const r = best ?? worst;
+    if (!r) return false;
+
+    dispatch(HoverActionTypes.SET_INDEX, undefined, r["i"]);
+    return true;
+  };
+
   const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
     const elementTarget = e.target instanceof HTMLElement ? (e.target as HTMLElement) : null;
     const isTextInputTarget =
@@ -115,6 +142,18 @@ export const MenuList = ({
         dispatch(HoverActionTypes.INCREASE, hoverItem, 0);
         break;
 
+      case Keys.LEFT:
+        if (!focusSideways(elementTarget, -1)) {
+          return; // Unhandled
+        }
+        break;
+
+      case Keys.RIGHT:
+        if (!focusSideways(elementTarget, 1)) {
+          return; // Unhandled
+        }
+        break;
+
       // prevent browser from scrolling the page when SPACE is pressed
       case Keys.SPACE:
         // Don't preventDefault on children of FocusableItem

package/src/react-menu3/contexts/HoverItemContext.ts

@@ -1,3 +1,8 @@
 import { createContext } from "react";
 
-export const HoverItemContext = createContext(undefined);
+export const HoverItemContext = createContext<
+  | HTMLDivElement
+  | HTMLLIElement
+  | ((prevItem: HTMLDivElement | HTMLLIElement) => HTMLDivElement | HTMLLIElement | undefined)
+  | undefined
+>(undefined);

package/src/react-menu3/hooks/useItems.ts

@@ -1,19 +1,25 @@
+import { defer } from "lodash-es";
 import { MutableRefObject, useCallback, useRef, useState } from "react";
 
 import { FocusPosition } from "../types";
 import { HoverActionTypes, focusFirstInput, indexOfNode } from "../utils";
 
 export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObject<any> | undefined) => {
-  const [hoverItem, setHoverItem] = useState<any>();
+  const [hoverItem, setHoverItem] = useState<
+    | HTMLDivElement
+    | HTMLLIElement
+    | ((prevItem: HTMLDivElement | HTMLLIElement) => HTMLDivElement | HTMLLIElement | undefined)
+    | undefined
+  >();
   const stateRef = useRef({
-    items: [] as any[],
+    items: [] as (HTMLDivElement | HTMLLIElement)[],
     hoverIndex: -1,
     sorted: false,
   });
   const mutableState = stateRef.current;
 
   const updateItems = useCallback(
-    (item?: any, isMounted?: boolean) => {
+    (item?: HTMLDivElement | HTMLLIElement, isMounted?: boolean) => {
       const { items } = mutableState;
       if (!item) {
         mutableState.items = [];
@@ -45,8 +51,11 @@ export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObj
         mutableState.sorted = true;
       };
 
-      let index = -1,
-        newItem = undefined;
+      let index = -1;
+      let newItem: HTMLDivElement | HTMLLIElement | undefined = undefined;
+      let newItemFn:
+        | ((prevItem: HTMLDivElement | HTMLLIElement) => HTMLDivElement | HTMLLIElement | undefined)
+        | undefined = undefined;
       switch (actionType) {
         case HoverActionTypes.RESET:
           break;
@@ -56,7 +65,7 @@ export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObj
           break;
 
         case HoverActionTypes.UNSET:
-          newItem = (prevItem: any) => (prevItem === item ? undefined : prevItem);
+          newItemFn = (prevItem: HTMLDivElement | HTMLLIElement) => (prevItem === item ? undefined : prevItem);
           break;
 
         case HoverActionTypes.FIRST:
@@ -76,6 +85,9 @@ export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObj
           sortItems();
           index = nextIndex;
           newItem = items[index];
+          defer(() =>
+            (newItem as HTMLElement).scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }),
+          );
           break;
 
         case HoverActionTypes.INCREASE:
@@ -104,8 +116,8 @@ export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObj
             throw new Error(`[React-Menu] Unknown hover action type: ${actionType}`);
       }
 
-      if (!newItem) index = -1;
-      setHoverItem(newItem);
+      if (!newItem && !newItemFn) index = -1;
+      setHoverItem(newItem ?? newItemFn);
       mutableState.hoverIndex = index;
     },
     [menuRef, mutableState],

package/src/react-menu3/utils/withHovering.tsx

@@ -5,7 +5,7 @@ import { HoverItemContext } from "../contexts/HoverItemContext";
 export interface withHoveringResultProps {
   isHovering?: boolean;
   externalRef?: MutableRefObject<any>;
-  menuItemRef?: MutableRefObject<any>;
+  menuItemRef?: MutableRefObject<HTMLLIElement>;
 }
 
 export const withHovering = <T,>(name: string, WrappedComponent: (props: T) => JSX.Element) => {

package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx

@@ -0,0 +1,109 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { countBy, mergeWith, pull, range, union } from "lodash-es";
+import { useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from "../..";
+import { MultiSelectGridOption } from "../../components/gridForm/GridFormMultiSelectGrid";
+import { GridPopoutEditMultiSelectGrid } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelectGrid";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    quickFilterValue: "",
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400 }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: number[] | null;
+  position2: string | null;
+}
+
+const GridEditMultiSelectGridTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(() => {
+    return [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+      }),
+      GridPopoutEditMultiSelectGrid(
+        {
+          field: "position",
+          headerName: "Position",
+          valueFormatter: ({ value }) => {
+            if (value == null) return "";
+            return value.join(", ");
+          },
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            className: "GridMultiSelect-containerUnlimited",
+            options: (selectedRows) => {
+              const counts: Record<number, number> = mergeWith(
+                {},
+                ...selectedRows.map((row) => countBy(row.position)),
+                (a: number | undefined, b: number | undefined) => (a ?? 0) + (b ?? 0),
+              );
+              return range(50024, 50067).map((value): MultiSelectGridOption => {
+                const checked = counts[value] == selectedRows.length ? true : counts[value] > 0 ? "partial" : false;
+                return {
+                  value: value,
+                  label: `${value}`,
+                  checked,
+                  canSelectPartial: checked === "partial",
+                };
+              });
+            },
+            onSave: async ({ selectedRows, addValues, removeValues }) => {
+              selectedRows.forEach((row) => {
+                row.position = union(pull(row.position ?? [], ...removeValues), addValues).sort();
+              });
+
+              return true;
+            },
+          },
+        },
+      ),
+    ];
+  }, []);
+
+  const [rowData] = useState([
+    { id: 1000, position: [50024, 50025], position2: "lot1" },
+    { id: 1001, position: [50025, 50026], position2: "lot2" },
+  ] as ITestRow[]);
+
+  return (
+    <Grid
+      {...props}
+      animateRows={true}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+      domLayout={"autoHeight"}
+    />
+  );
+};
+
+export const EditMultiSelectGrid = GridEditMultiSelectGridTemplate.bind({});

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.stories.tsx

@@ -0,0 +1,126 @@
+import { expect, jest } from "@storybook/jest";
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { userEvent, waitFor, within } from "@storybook/testing-library";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  GridContextProvider,
+  GridFormMultiSelectGrid,
+  GridFormMultiSelectGridProps,
+  GridFormMultiSelectGridSaveProps,
+  MultiSelectGridOption,
+} from "../../..";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormMultiSelectGrid,
+  args: {},
+} as ComponentMeta<typeof GridFormMultiSelectGrid>;
+
+const updateValue = jest
+  .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
+  .mockImplementation((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
+
+const onSave = jest
+  .fn<Promise<boolean>, [GridFormMultiSelectGridSaveProps<any>]>()
+  .mockImplementation(async () => true);
+const onSelectFilter = jest.fn();
+
+let options: MultiSelectGridOption[] = [];
+const Template: ComponentStory<typeof GridFormMultiSelectGrid> = (props) => {
+  options = [
+    { label: "Zero", value: 0 },
+    { label: "One", value: 1 },
+    { label: "Two", value: 2 },
+    { label: "Three", value: 3 },
+    { label: "Four", value: 4 },
+    { label: <div>Five</div>, value: 5 },
+  ];
+  const config: GridFormMultiSelectGridProps<any> = {
+    onSave,
+    options,
+    maxRowCount: 3,
+  };
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <div>
+          <h6 ref={anchorRef}>Interaction test</h6>
+          <GridPopoverContext.Provider
+            value={
+              {
+                anchorRef: anchorRef,
+                updateValue,
+                data: { value: "" },
+                value: "",
+                field: "value",
+                selectedRows: [],
+              } as any as GridPopoverContextType<any>
+            }
+          >
+            <GridFormMultiSelectGrid {...props} {...config} />
+          </GridPopoverContext.Provider>
+        </div>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormMultiSelectGridInteractions_ = Template.bind({});
+GridFormMultiSelectGridInteractions_.play = async ({ canvasElement }) => {
+  updateValue.mockClear();
+  onSave.mockClear();
+  onSelectFilter.mockClear();
+
+  const canvas = within(canvasElement);
+
+  const getOption = (name: RegExp | string) => canvas.findByRole("menuitem", { name });
+
+  // Check enabled menu handles click
+  const zeroMenuOption = await getOption(/Zero/);
+  expect(zeroMenuOption).toBeInTheDocument();
+
+  userEvent.click(zeroMenuOption);
+  userEvent.keyboard("{Tab}");
+  expect(updateValue).toHaveBeenCalled();
+  await waitFor(() => expect(onSave).toHaveBeenCalledWith({ selectedRows: [], addValues: [0], removeValues: [] }));
+
+  const check = (label: string) => {
+    const activeCell = canvasElement.ownerDocument.activeElement as HTMLElement | null;
+    expect(activeCell?.innerText).toBe(label);
+  };
+
+  // Test left/right arrow
+  userEvent.keyboard("{ArrowRight}");
+  check("Three");
+  userEvent.keyboard("{ArrowRight}");
+  check("Zero");
+  userEvent.keyboard("{ArrowLeft}");
+  check("Three");
+  userEvent.keyboard("{ArrowLeft}");
+  check("Zero");
+
+  // Test tab to save
+  updateValue.mockClear();
+  onSave.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+  expect(onSave).toHaveBeenCalledWith({
+    selectedRows: [],
+    addValues: [0],
+    removeValues: [],
+  });
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  onSave.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+  expect(onSave).toHaveBeenCalled();
+};

package/src/stories/react-menu/ReactMenu.stories.tsx

@@ -89,6 +89,8 @@ ReactMenuControlled.play = async ({ canvasElement }) => {
   // Test tab to select
   await openMenu();
   await keyboard("{arrowdown}");
+  // For some reason arrow down takes a little time to activate
+  await wait(10);
   await keyboard("{Tab}");
   expect(menuItemClickAction).toHaveBeenCalled();
   expect(newFileAction).toHaveBeenCalled();

package/src/styles/GridFormMultiSelectGrid.scss

@@ -0,0 +1,9 @@
+.GridMultiSelect-noOptions {
+  justify-content: center;
+}
+
+.GridMultiSelectGrid-Label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}