@linzjs/step-ag-grid 8.0.0 → 8.2.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.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridCell.tsx

@@ -29,8 +29,8 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   return (
     <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
       <>
-        {typeof warningText === "string" && <GridIcon icon={"ic_warning"} title={warningText} />}
-        {typeof infoText === "string" && <GridIcon icon={"ic_info"} title={infoText} />}
+        {typeof warningText === "string" && <GridIcon icon={"ic_warning_outline"} title={warningText} />}
+        {typeof infoText === "string" && <GridIcon icon={"ic_info_outline"} title={infoText} />}
         <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
           {colDef?.cellRendererParams?.originalCellRenderer ? (
             <colDef.cellRendererParams.originalCellRenderer {...props} />

package/src/components/gridForm/GridFormDropDown.tsx

@@ -36,7 +36,7 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption = null | string | FinalSelectOption;
 
-export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormDropDownProps<RowType extends GridBaseRow> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?:
     | "GridPopoverEditDropDown-containerSmall"
@@ -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;
@@ -62,11 +63,11 @@ const fieldToString = (field: any) => {
   return typeof field == "symbol" ? field.toString() : `${field}`;
 };
 
-export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPopoutDropDownProps<RowType>) => {
+export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDropDownProps<RowType>) => {
   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 && (
@@ -211,7 +215,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                   className={"LuiTextInput-input"}
                   ref={ref}
                   type="text"
-                  placeholder={props.filterPlaceholder ?? "Placeholder"}
+                  placeholder={props.filterPlaceholder ?? "Filter..."}
                   data-testid={"filteredMenu-free-text-input"}
                   defaultValue={filter}
                   data-allowtabtosave={true}
@@ -233,80 +237,95 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
       <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
         <>
           {options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (
-            <MenuItem key={`${fieldToString(field)}-empty`} className={"GridPopoverEditDropDown-noOptions"}>
+            <MenuItem
+              key={`${fieldToString(field)}-empty`}
+              className={"GridPopoverEditDropDown-noOptions"}
+              disabled={true}
+            >
               {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/GridFormEditBearing.tsx

@@ -56,7 +56,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
   });
 
   return popoverWrapper(
-    <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
+    <div className={"GridFormEditBearing-input"}>
       <TextInputFormatted
         value={defaultValue}
         onChange={(e) => {

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -52,6 +52,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow> extends C
   filtered?: boolean;
   filterPlaceholder?: string;
   filterHelpText?: string | ((filter: string, options: MultiSelectOption[]) => string | undefined);
+  noOptionsMessage?: string;
   onSelectFilter?: (props: { filter: string; options: MultiSelectOption[] }) => void;
   onSave?: (props: { selectedRows: RowType[]; selectedOptions: MultiSelectOption[] }) => Promise<boolean>;
   headers?: GridFormMultiSelectGroup[];
@@ -117,7 +118,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
   const headerGroups = useMemo(() => {
     if (!options) return undefined;
     const result = groupBy(
-      options.filter((o) => textMatch(o.label, filter) && o.value),
+      options.filter((o) => textMatch(o.label, filter) && o.value != null),
       "filter",
     );
     // remove leading/trailing/duplicate dividers
@@ -163,8 +164,12 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
               filterPlaceholder={props.filterPlaceholder}
             />
           )}
-
-          {headerGroups && (
+          {headerGroups && (isEmpty(headerGroups) || !toPairs(headerGroups).some(([_, options]) => !isEmpty(options))) && (
+            <MenuItem key={"noOptions"} className={"GridMultiSelect-noOptions"} disabled={true}>
+              {props.noOptionsMessage ?? "No Options"}
+            </MenuItem>
+          )}
+          {headerGroups && !isEmpty(headerGroups) && (
             <div className={"GridFormMultiSelect-options"}>
               {headers.map((header, index) => {
                 const subOptions = headerGroups[`${header.filter}`];
@@ -307,7 +312,7 @@ const FilterInput = (props: {
             <input
               className={"LuiTextInput-input"}
               type="text"
-              placeholder={filterPlaceholder ?? "Placeholder"}
+              placeholder={filterPlaceholder ?? "Filter..."}
               data-testid={"filteredMenu-free-text-input"}
               value={filter}
               data-disableenterautosave={true}
@@ -328,9 +333,6 @@ const FilterInput = (props: {
         )}
       </FocusableItem>
       <MenuDivider key={`$$divider_filter`} />
-      {headerGroups && !toPairs(headerGroups).some(([_, options]) => !isEmpty(options)) && (
-        <div className={"szh-menu__item GridPopoverEditDropDown-noOptions"}>No Options</div>
-      )}
     </>
   );
 };
@@ -365,7 +367,7 @@ const MenuRadioItem = (props: {
         value={`${item.value}`}
         label={
           <>
-            {item.warning && <GridIcon icon={"ic_warning"} title={item.warning} />}
+            {item.warning && <GridIcon icon={"ic_warning_outline"} title={item.warning} />}
             {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
           </>
         }

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/GridPopoverEditBearing.ts

@@ -1,4 +1,9 @@
-import { bearingCorrectionValueFormatter, bearingValueFormatter } from "../../utils/bearing";
+import {
+  bearingCorrectionRangeValidator,
+  bearingCorrectionValueFormatter,
+  bearingRangeValidator,
+  bearingValueFormatter,
+} from "../../utils/bearing";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
@@ -27,12 +32,7 @@ const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
 export const GridPopoverEditBearingEditorParams = {
   placeHolder: "Enter bearing",
   formatValue: bearingValueFormatter,
-  range: (value: number | null) => {
-    if (value === null) return "Bearing is required";
-    if (value >= 360) return "Bearing must be less than 360 degrees";
-    if (value < 0) return "Bearing must not be negative";
-    return null;
-  },
+  range: bearingRangeValidator,
 };
 
 export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
@@ -50,12 +50,7 @@ export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
 export const GridPopoverEditBearingCorrectionEditorParams = {
   placeHolder: "Enter bearing correction",
   formatValue: bearingCorrectionValueFormatter,
-  range: (value: number | null) => {
-    if (value === null) return "Bearing correction is required";
-    if (value >= 360) return "Bearing correction must be less than 360 degrees";
-    if (value <= -180) return "Bearing correction must be greater then -180 degrees";
-    return null;
-  },
+  range: bearingCorrectionRangeValidator,
 };
 
 export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -1,11 +1,11 @@
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
-import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
+import { GridFormDropDown, GridFormDropDownProps } from "../gridForm/GridFormDropDown";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
 export const GridPopoverEditDropDown = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType>>,
+  props: GenericCellEditorProps<GridFormDropDownProps<RowType>>,
 ): ColDefT<RowType> =>
   GridCell(colDef, {
     editor: GridFormDropDown,
@@ -13,6 +13,6 @@ export const GridPopoverEditDropDown = <RowType extends GridBaseRow>(
     editorParams: {
       // Defaults to large size container
       className: "GridPopoverEditDropDown-containerLarge",
-      ...(props.editorParams as GridFormPopoutDropDownProps<RowType>),
+      ...(props.editorParams as GridFormDropDownProps<RowType>),
     },
   });

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/_var.scss

@@ -2,7 +2,7 @@
 
 $color: #212529;
 $color-dark: #cad1d8;
-$color-disabled: #aaa;
+$color-disabled: #989189;
 $color-disabled-dark: #666;
 
 $header-color: #888;

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}
+      />
     </>
   );
 };