@linzjs/step-ag-grid 7.0.0 → 7.0.2

package/package.json

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

package/src/components/GridCell.tsx

@@ -71,7 +71,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     suppressKeyboardEvent: (e) => {
       // It's important that aggrid doesn't trigger edit on enter
       // as the incorrect selected rows will be returned
-      return e.event.key === "Enter";
+      return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " "].includes(e.event.key);
     },
     ...(custom?.editorParams && {
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },

package/src/components/gridForm/GridFormDropDown.tsx

@@ -224,8 +224,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
               <div style={{ display: "flex", width: "100%" }}>
                 <input
                   autoFocus
-                  className={"free-text-input"}
-                  style={{ border: "0px" }}
+                  className={"LuiTextInput-input"}
                   ref={ref}
                   type="text"
                   placeholder={props.filterPlaceholder ?? "Placeholder"}
@@ -242,7 +241,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
       <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
         <>
           {options && options.length == filteredValues?.length && (
-            <MenuItem key={`${fieldToString(field)}-empty`}>[Empty]</MenuItem>
+            <MenuItem key={`${fieldToString(field)}-empty`} className={"GridPopoverEditDropDown-noOptions"}>
+              No Options
+            </MenuItem>
           )}
           {options?.map((item: FinalSelectOption, index) =>
             item.value === MenuSeparatorString ? (

package/src/lui/ActionButton.scss

@@ -5,6 +5,10 @@
   align-items: center;
 }
 
+.ActionButton-minimal {
+  padding-right: 38px !important;
+}
+
 .ActionButton .LuiIcon {
   margin: 0 4px !important;
 }
@@ -30,3 +34,9 @@
     fill: transparent !important;
   }
 }
+
+.ActionButton-fill {
+  width: 100%;
+  justify-content: center;
+}
+

package/src/lui/ActionButton.tsx

@@ -17,11 +17,12 @@ export interface ActionButtonProps {
   dataTestId?: string;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
   iconPosition?: "left" | "right";
-  className?: string;
+  className?: "ActionButton-fill" | string;
   onAction: () => Promise<void> | void;
   // Used for external code to get access to whether action is in progress
   externalSetInProgress?: () => void;
   level?: LuiButtonProps["level"];
+  style?: React.CSSProperties;
 }
 
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
@@ -32,6 +33,7 @@ export const ActionButton = ({
   name,
   inProgressName,
   dataTestId,
+  style,
   className,
   title,
   onAction,
@@ -65,9 +67,15 @@ export const ActionButton = ({
       level={level}
       title={title ?? ariaLabel ?? name}
       aria-label={ariaLabel ?? name}
-      className={clsx("lui-button-icon-right", "ActionButton", className, localInProgress && "ActionButton-inProgress")}
+      className={clsx(
+        "lui-button-icon-right",
+        "ActionButton",
+        className,
+        localInProgress && "ActionButton-inProgress",
+        name != null && !className?.includes("ActionButton-fill") && "ActionButton-minimal",
+      )}
       size={"lg"}
-      style={name == null ? { padding: "8px 5px" } : {}}
+      style={{ ...(name == null && { padding: "8px 5px" }), ...style }}
       onClick={async () => {
         const promise = onAction();
         const isPromise = typeof promise !== "undefined";

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

@@ -137,7 +137,7 @@ export const ControlledMenuFr = (
       if (activeElement !== firstInputEl && activeElement !== lastInputEl) return;
 
       const isTextArea = activeElement.nodeName === "TEXTAREA";
-      const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautoSave") || isTextArea;
+      const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") || isTextArea;
       const allowTabToSave = activeElement.getAttribute("data-allowtabtoSave");
       const invokeSave = (reason: string) => {
         if (!saveButtonRef?.current) return;

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

@@ -28,6 +28,8 @@ const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
         onAction={performAction}
         iconPosition={"right"}
         level={"secondary"}
+        className={"ActionButton-fill"}
+        style={{ maxWidth: 160 }}
       />
     </>
   );

package/src/stories/grid/FormTest.tsx

@@ -99,7 +99,7 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
           </div>
           <div style={{ marginTop: 25 }}>
             <input
-              data-disableEnterAutoSave
+              data-disableenterautosave
               type="button"
               style={{ height: 48 }}
               onClick={() => setShowModal(true)}

package/src/styles/GridFormDropDown.scss

@@ -16,3 +16,7 @@
 .GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options {
   overflow-y: auto;
 }
+
+.GridPopoverEditDropDown-noOptions {
+  justify-content: center;
+}