@linzjs/step-ag-grid 7.4.0 → 7.5.1

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -300,8 +300,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                     }
                   }}
                 >
-                  {(item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)) +
-                    (item.subComponent ? "..." : "")}
+                  {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                  {item.subComponent ? "..." : ""}
                 </MenuItem>
 
                 {item.subComponent && selectedSubComponent === item && (

package/src/lui/ActionButton.tsx

@@ -18,9 +18,7 @@ export interface ActionButtonProps {
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
   iconPosition?: "left" | "right";
   className?: "ActionButton-fill" | string;
-  onAction: () => Promise<void> | void;
-  // Used for external code to get access to whether action is in progress
-  externalSetInProgress?: () => void;
+  onClick: () => Promise<void> | void;
   level?: LuiButtonProps["level"];
   style?: React.CSSProperties;
 }
@@ -36,8 +34,7 @@ export const ActionButton = ({
   style,
   className,
   title,
-  onAction,
-  externalSetInProgress,
+  onClick,
   size = "sm",
   iconPosition = "left",
   level = "tertiary",
@@ -77,13 +74,11 @@ export const ActionButton = ({
       size={"lg"}
       style={{ ...(name == null && { padding: "8px 5px" }), ...style }}
       onClick={async () => {
-        const promise = onAction();
+        const promise = onClick();
         const isPromise = typeof promise !== "undefined";
         if (isPromise) {
           setInProgress(true);
-          externalSetInProgress && setInProgress(true);
           if (isPromise) await promise;
-          externalSetInProgress && setInProgress(false);
           setInProgress(false);
         }
       }}

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

@@ -18,14 +18,14 @@ const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
   }, []);
   return (
     <>
-      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onAction={performAction} />
+      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onClick={performAction} />
       <br />
-      <ActionButton icon={"ic_add"} aria-label={"Add new row"} onAction={performAction} level={"primary"} />
+      <ActionButton icon={"ic_add"} aria-label={"Add new row"} onClick={performAction} level={"primary"} />
       <br />
       <ActionButton
         icon={"ic_arrow_back"}
         name={"Continue"}
-        onAction={performAction}
+        onClick={performAction}
         iconPosition={"right"}
         level={"secondary"}
         className={"ActionButton-fill"}

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -169,7 +169,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         rowData={rowData}
         domLayout={"autoHeight"}
       />
-      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onAction={addRowAction} />
+      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onClick={addRowAction} />
     </>
   );
 };

package/src/utils/util.ts

@@ -12,6 +12,16 @@ export const isFloat = (value: string) => {
   return regexp.test(value);
 };
 
+export const findParentWithClass = function (className: string, child: Node): HTMLElement | null {
+  for (let node: Node | null = child; node; node = node.parentNode) {
+    // When nodes are in portals they aren't type node anymore hence treating it as any here
+    if ((node as any).classList && (node as any).classList.contains(className)) {
+      return node as HTMLElement;
+    }
+  }
+  return null;
+};
+
 export const hasParentClass = function (className: string, child: Node) {
   for (let node: Node | null = child; node; node = node.parentNode) {
     // When nodes are in portals they aren't type node anymore hence treating it as any here