@linzjs/step-ag-grid 8.0.0 → 8.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/gridForm/GridFormDropDown.tsx

@@ -45,8 +45,9 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extend
     | "GridPopoverEditDropDown-containerUnlimited"
     | string
     | undefined;
-  // local means the filter won't change if it's reloaded, reload means it does change
+  // local means the use the local filter, otherwise it's expected options will be passed a function that takes a filter
   filtered?: "local" | "reload";
+  filterDefaultValue?: string;
   filterPlaceholder?: string;
   filterHelpText?: string;
   noOptionsMessage?: string;
@@ -66,7 +67,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   const { selectedRows, field, data } = useGridPopoverContext<RowType>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-  const [filter, setFilter] = useState("");
+  const [filter, setFilter] = useState(props.filterDefaultValue ?? "");
   const [filteredValues, setFilteredValues] = useState<any[]>();
   const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
   const subComponentIsValid = useRef(false);
@@ -143,7 +144,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
     }
   }, [props.filtered, filter, options]);
 
-  const researchOnFilterChange = useMemo(
+  const reSearchOnFilterChange = useMemo(
     () =>
       debounce(() => {
         setOptions(null);
@@ -157,9 +158,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   useEffect(() => {
     if (previousFilter.current != filter && props.filtered == "reload") {
       previousFilter.current = filter;
-      researchOnFilterChange().then();
+      reSearchOnFilterChange().then();
     }
-  }, [filter, props, researchOnFilterChange]);
+  }, [filter, props, reSearchOnFilterChange]);
 
   /**
    * Saves are wrapped in updateValue and triggered by blur events
@@ -193,6 +194,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
     save,
   });
 
+  let lastHeader: JSX.Element | null = null;
+  let showHeader: JSX.Element | null = null;
+
   return popoverWrapper(
     <>
       {props.filtered && (
@@ -237,76 +241,87 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
               {props.noOptionsMessage ?? "No Options"}
             </MenuItem>
           )}
-          {options?.map((item: FinalSelectOption, index) =>
-            item.value === MenuSeparatorString ? (
-              <MenuDivider key={`$$divider_${index}`} />
-            ) : item.value === MenuHeaderString ? (
-              <MenuHeader key={`$$header_${index}`}>{item.label}</MenuHeader>
-            ) : (
+          {options?.map((item: FinalSelectOption, index) => {
+            showHeader = null;
+            if (item.value === MenuSeparatorString) {
+              return <MenuDivider key={`$$divider_${index}`} />;
+            } else if (item.value === MenuHeaderString) {
+              lastHeader = <MenuHeader key={`$$header_${index}`}>{item.label}</MenuHeader>;
+              return <></>;
+            } else {
+              if (lastHeader) {
+                showHeader = lastHeader;
+                lastHeader = null;
+              }
+            }
+            return (
               (!filteredValues || filteredValues.includes(item)) && (
-                <div key={`menu-wrapper-${index}`}>
-                  <MenuItem
-                    key={`${fieldToString(field)}-${index}`}
-                    disabled={!!item.disabled}
-                    title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-                    value={item.value}
-                    onFocus={() => {
-                      setSelectedItem(item);
-                      if (item.subComponent) {
+                <>
+                  {showHeader}
+                  <div key={`menu-wrapper-${index}`}>
+                    <MenuItem
+                      key={`${fieldToString(field)}-${index}`}
+                      disabled={!!item.disabled}
+                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                      value={item.value}
+                      onFocus={() => {
                         setSelectedItem(item);
-                        subComponentIsValid.current = true;
-                        subComponentInitialValue.current = null;
-                      } else {
-                        setSubSelectedValue(null);
-                        subComponentIsValid.current = true;
-                      }
-                    }}
-                    onClick={(e: ClickEvent) => {
-                      if (item.subComponent) {
-                        e.keepOpen = true;
-                      }
-                    }}
-                  >
-                    {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                    {item.subComponent ? "..." : ""}
-                  </MenuItem>
+                        if (item.subComponent) {
+                          setSelectedItem(item);
+                          subComponentIsValid.current = true;
+                          subComponentInitialValue.current = null;
+                        } else {
+                          setSubSelectedValue(null);
+                          subComponentIsValid.current = true;
+                        }
+                      }}
+                      onClick={(e: ClickEvent) => {
+                        if (item.subComponent) {
+                          e.keepOpen = true;
+                        }
+                      }}
+                    >
+                      {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                      {item.subComponent ? "..." : ""}
+                    </MenuItem>
 
-                  {item.subComponent && selectedItem === item && (
-                    <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
-                      {(ref: MenuInstance) => (
-                        <GridSubComponentContext.Provider
-                          value={{
-                            context: { options },
-                            data,
-                            value: subSelectedValue,
-                            setValue: (value: any) => {
-                              setSubSelectedValue(value);
-                              if (subComponentInitialValue.current === null) {
-                                // copy the default value of the sub-component so we can change detect on save
-                                subComponentInitialValue.current = JSON.stringify(value);
-                              }
-                            },
-                            setValid: (valid: boolean) => {
-                              subComponentIsValid.current = valid;
-                            },
-                            triggerSave: async () => {
-                              ref.closeMenu();
-                            },
-                          }}
-                        >
-                          {item.subComponent && (
-                            <div className={"subComponent"}>
-                              <item.subComponent key={`${fieldToString(field)}-${index}_subcomponent_inner`} />
-                            </div>
-                          )}
-                        </GridSubComponentContext.Provider>
-                      )}
-                    </FocusableItem>
-                  )}
-                </div>
+                    {item.subComponent && selectedItem === item && (
+                      <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
+                        {(ref: MenuInstance) => (
+                          <GridSubComponentContext.Provider
+                            value={{
+                              context: { options },
+                              data,
+                              value: subSelectedValue,
+                              setValue: (value: any) => {
+                                setSubSelectedValue(value);
+                                if (subComponentInitialValue.current === null) {
+                                  // copy the default value of the subcomponent so we can change detect on save
+                                  subComponentInitialValue.current = JSON.stringify(value);
+                                }
+                              },
+                              setValid: (valid: boolean) => {
+                                subComponentIsValid.current = valid;
+                              },
+                              triggerSave: async () => {
+                                ref.closeMenu();
+                              },
+                            }}
+                          >
+                            {item.subComponent && (
+                              <div className={"subComponent"}>
+                                <item.subComponent key={`${fieldToString(field)}-${index}_subcomponent_inner`} />
+                              </div>
+                            )}
+                          </GridSubComponentContext.Provider>
+                        )}
+                      </FocusableItem>
+                    )}
+                  </div>
+                </>
               )
-            ),
-          )}
+            );
+          })}
         </>
       </ComponentLoadingWrapper>
     </>,

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -8,13 +8,14 @@ import { GridSubComponentContext } from "../../contexts/GridSubComponentContext"
 import { ClickEvent } from "../../react-menu3/types";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
-export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormPopoverMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
   defaultAction?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
 }
 
 /** Menu configuration types **/
-export const PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
+const __isMenuSeparator__ = "__isMenuSeparator__";
+export const PopoutMenuSeparator = Object.freeze({ label: __isMenuSeparator__ });
 
 interface MenuSeparatorType {
   __isMenuSeparator__: boolean;
@@ -36,7 +37,7 @@ export interface MenuOption<RowType extends GridBaseRow> {
  * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because
  * you need a useMemo around your columnDefs
  */
-export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridFormPopoutMenuProps<RowType>) => {
+export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridFormPopoverMenuProps<RowType>) => {
   const { selectedRows, updateValue, data } = useGridPopoverContext<RowType>();
 
   const optionsInitialising = useRef(false);
@@ -119,49 +120,55 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!options} className={"GridFormPopupMenu"}>
       <>
-        {options?.map((item, index) =>
-          item.label === PopoutMenuSeparator ? (
-            <MenuDivider key={`$$divider_${index}`} />
-          ) : (
-            !item.hidden && (
-              <Fragment key={`${item.label}`}>
-                <MenuItem
-                  key={`${item.label}`}
-                  onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
-                  disabled={!!item.disabled}
-                  title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-                >
-                  {item.label as JSX.Element | string}
-                </MenuItem>
-                {item.subComponent && subComponentSelected === item && (
-                  <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
-                    {(_: any) =>
-                      item.subComponent && (
-                        <GridSubComponentContext.Provider
-                          value={{
-                            context: {},
-                            data,
-                            value: subSelectedValue,
-                            setValue: (value: any) => {
-                              setSubSelectedValue(value);
-                            },
-                            setValid: (valid: boolean) => {
-                              subComponentIsValid.current = valid;
-                            },
-                            triggerSave,
-                          }}
-                        >
-                          <div className={"subComponent"}>
-                            <item.subComponent />
-                          </div>
-                        </GridSubComponentContext.Provider>
-                      )
-                    }
-                  </FocusableItem>
-                )}
-              </Fragment>
-            )
-          ),
+        {options?.length === 0 ? (
+          <MenuItem key={`GridPopoverMenu-empty`} className={"GridPopoverMenu-noOptions"} disabled={true}>
+            No actions
+          </MenuItem>
+        ) : (
+          options?.map((item, index) =>
+            item.label === "__isMenuSeparator__" ? (
+              <MenuDivider key={`$$divider_${index}`} />
+            ) : (
+              !item.hidden && (
+                <Fragment key={`${item.label}`}>
+                  <MenuItem
+                    key={`${item.label}`}
+                    onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
+                    disabled={!!item.disabled}
+                    title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                  >
+                    {item.label as JSX.Element | string}
+                  </MenuItem>
+                  {item.subComponent && subComponentSelected === item && (
+                    <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
+                      {(_: any) =>
+                        item.subComponent && (
+                          <GridSubComponentContext.Provider
+                            value={{
+                              context: {},
+                              data,
+                              value: subSelectedValue,
+                              setValue: (value: any) => {
+                                setSubSelectedValue(value);
+                              },
+                              setValid: (valid: boolean) => {
+                                subComponentIsValid.current = valid;
+                              },
+                              triggerSave,
+                            }}
+                          >
+                            <div className={"subComponent"}>
+                              <item.subComponent />
+                            </div>
+                          </GridSubComponentContext.Provider>
+                        )
+                      }
+                    </FocusableItem>
+                  )}
+                </Fragment>
+              )
+            ),
+          )
         )}
       </>
     </ComponentLoadingWrapper>,

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -1,6 +1,6 @@
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
-import { GridFormPopoverMenu, GridFormPopoutMenuProps } from "../gridForm/GridFormPopoverMenu";
+import { GridFormPopoverMenu, GridFormPopoverMenuProps } from "../gridForm/GridFormPopoverMenu";
 import { GridRenderPopoutMenuCell } from "../gridRender/GridRenderPopoutMenuCell";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
@@ -9,9 +9,9 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
  */
 export const GridPopoverMenu = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  custom: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>,
+  custom: GenericCellEditorProps<GridFormPopoverMenuProps<RowType>>,
 ): ColDefT<RowType> =>
-  GridCell<RowType, GridFormPopoutMenuProps<RowType>>(
+  GridCell<RowType, GridFormPopoverMenuProps<RowType>>(
     {
       minWidth: 40,
       maxWidth: 40,

package/src/lui/ActionButton.tsx

@@ -21,6 +21,7 @@ export interface ActionButtonProps {
   onClick: () => Promise<void> | void;
   level?: LuiButtonProps["level"];
   style?: CSSProperties;
+  disabled?: boolean;
 }
 
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
@@ -30,6 +31,7 @@ export const ActionButton = ({
   icon,
   name,
   inProgressName,
+  disabled,
   dataTestId,
   style,
   className,
@@ -83,7 +85,7 @@ export const ActionButton = ({
           setInProgress(false);
         }
       }}
-      disabled={localInProgress}
+      disabled={localInProgress || disabled}
     >
       {iconPosition === "right" && buttonText}
       {localInProgress ? (

package/src/react-menu3/styles/index.scss

@@ -71,3 +71,7 @@
     text-transform: uppercase;
   }
 }
+
+.react-menu-inline-test .szh-menu-container, .react-menu-inline-test .szh-menu {
+  position: static !important;
+}

package/src/stories/components/ActionButton.stories.tsx

@@ -39,6 +39,17 @@ const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
         className={"ActionButton-fill"}
         style={{ maxWidth: 160 }}
       />
+      <br />
+      <ActionButton
+        icon={"ic_arrow_forward_right"}
+        name={"Disabled"}
+        onClick={performAction}
+        iconPosition={"right"}
+        level={"secondary"}
+        className={"ActionButton-fill"}
+        style={{ maxWidth: 160 }}
+        disabled={true}
+      />
     </>
   );
 };

package/src/stories/grid/gridForm/GridFormDropDown.stories.tsx

@@ -1,60 +1,109 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-// Force react-menu not to render static inline not absolute
-import "./reactMenuTest.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridFormDropDown, MenuHeaderItem } from "../../../components/gridForm/GridFormDropDown";
+import {
+  GridFormDropDown,
+  GridFormPopoutDropDownProps,
+  MenuHeaderItem,
+} from "../../../components/gridForm/GridFormDropDown";
 import { GridContextProvider } from "../../../contexts/GridContextProvider";
 import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
+import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Samples",
+  title: "GridForm / Testing",
   component: GridFormDropDown,
   args: {},
 } as ComponentMeta<typeof GridFormDropDown>;
 
 const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
-  const anchorRef1 = useRef<HTMLHeadingElement>(null);
-  const anchorRef2 = useRef<HTMLHeadingElement>(null);
-  const anchorRef3 = useRef<HTMLHeadingElement>(null);
+  const configs: [string, GridFormPopoutDropDownProps<GridBaseRow>, string?][] = [
+    ["No options", { options: [] }],
+    ["Custom no options", { options: [], noOptionsMessage: "Custom no options" }],
+    [
+      "Enabled and disabled",
+      {
+        options: [
+          { label: "Enabled", value: 1 },
+          { label: "Disabled", value: 0, disabled: true },
+        ],
+      },
+    ],
+    [
+      "Headers",
+      {
+        options: [
+          MenuHeaderItem("Header 1"),
+          { label: "Option 1", value: 1 },
+          MenuHeaderItem("Header 2"),
+          { label: "Option 2", value: 2 },
+        ],
+      },
+    ],
+    [
+      "Filter",
+      {
+        filtered: "local",
+        options: [
+          MenuHeaderItem("Header 1"),
+          { label: "Option 1", value: 1 },
+          MenuHeaderItem("Header 2"),
+          { label: "Option 2", value: 2 },
+        ],
+      },
+    ],
+    [
+      "Filter custom placeholder",
+      {
+        filtered: "local",
+        filterPlaceholder: "Custom placeholder",
+        filterHelpText: "Filter help text",
+        options: [MenuHeaderItem("Header 1"), { label: "Option 1", value: 1 }],
+      },
+    ],
+    [
+      "Filter help text and default filter text",
+      {
+        filtered: "local",
+        filterHelpText: "Filter help text",
+        filterDefaultValue: "filter",
+        options: [
+          MenuHeaderItem("Header 1"),
+          { label: "Filter match", value: 1 },
+          MenuHeaderItem("ERROR! this header should not be visible"),
+          { label: "ERROR! this option should not be visible", value: 2 },
+        ],
+      },
+    ],
+  ];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const anchorRefs = configs.map(() => useRef<HTMLHeadingElement>(null));
 
   return (
     <div className={"react-menu-inline-test"}>
       <GridContextProvider>
-        <h6 ref={anchorRef1}>No options</h6>
-        <GridPopoverContext.Provider value={{ anchorRef: anchorRef1 } as any as GridPopoverContextType<any>}>
-          <GridFormDropDown {...props} options={[]} />
-        </GridPopoverContext.Provider>
-
-        <h6 ref={anchorRef2}>Enabled and disabled</h6>
-        <GridPopoverContext.Provider value={{ anchorRef: anchorRef2 } as any as GridPopoverContextType<any>}>
-          <GridFormDropDown
-            {...props}
-            options={[
-              { label: "Enabled", value: 1 },
-              { label: "Disabled", value: 0, disabled: true },
-            ]}
-          />
-        </GridPopoverContext.Provider>
-
-        <h6 ref={anchorRef3}>Headers</h6>
-        <GridPopoverContext.Provider value={{ anchorRef: anchorRef3 } as any as GridPopoverContextType<any>}>
-          <GridFormDropDown
-            {...props}
-            options={[
-              MenuHeaderItem("Header 1"),
-              { label: "Option 1", value: 1 },
-              MenuHeaderItem("Header 2"),
-              { label: "Option 2", value: 2 },
-            ]}
-          />
-        </GridPopoverContext.Provider>
+        {configs.map((config, index) => (
+          <div key={`${index}`}>
+            <h6 ref={anchorRefs[index]}>{config[0]}</h6>
+            <GridPopoverContext.Provider
+              value={
+                {
+                  anchorRef: anchorRefs[index],
+                  data: { value: config[2] },
+                  value: config[2],
+                  field: "value",
+                } as any as GridPopoverContextType<any>
+              }
+            >
+              <GridFormDropDown {...props} {...config[1]} />
+            </GridPopoverContext.Provider>
+          </div>
+        ))}
       </GridContextProvider>
     </div>
   );
 };
 
 export const GridFormDropDown_ = Template.bind({});
-GridFormDropDown_.args = { options: [] };

package/src/stories/grid/gridForm/GridFormEditBearing.stories.tsx

@@ -1,7 +1,5 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-// Force react-menu not to render static inline not absolute
-import "./reactMenuTest.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
@@ -11,7 +9,7 @@ import { useRef } from "react";
 import { GridPopoverEditBearingEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
 
 export default {
-  title: "GridForm / Samples",
+  title: "GridForm / Testing",
   component: GridFormEditBearing,
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;

package/src/stories/grid/gridForm/GridFormEditBearingCorrection.stories.tsx

@@ -1,7 +1,5 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-// Force react-menu not to render static inline not absolute
-import "./reactMenuTest.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
@@ -11,7 +9,7 @@ import { useRef } from "react";
 import { GridPopoverEditBearingCorrectionEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
 
 export default {
-  title: "GridForm / Samples",
+  title: "GridForm / Testing",
   component: GridFormEditBearing,
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;

package/src/stories/grid/gridForm/GridFormMessage.stories.tsx

@@ -0,0 +1,32 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormMessage } from "../../../components/gridForm/GridFormMessage";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+
+export default {
+  title: "GridForm / Testing",
+  component: GridFormMessage,
+  args: {},
+} as ComponentMeta<typeof GridFormMessage>;
+
+const Template: ComponentStory<typeof GridFormMessage> = (props) => {
+  const anchorRef1 = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef1}>Standard Message</h6>
+        <GridPopoverContext.Provider value={{ anchorRef: anchorRef1 } as any as GridPopoverContextType<any>}>
+          <GridFormMessage {...props} message={() => <span>This is a message</span>} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormMessage_ = Template.bind({});
+GridFormMessage_.args = {};