@linzjs/step-ag-grid 2.4.6 → 2.4.8

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -109,7 +109,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
 
       const optionsList = optionsConf?.map((item) => {
         if (item == null || typeof item == "string" || typeof item == "number") {
-          item = { value: item as ValueType, label: item, disabled: false } as FinalSelectOption<ValueType>;
+          item = {
+            value: item as unknown as ValueType,
+            label: item,
+            disabled: false,
+          } as unknown as FinalSelectOption<ValueType>;
         }
         return item;
       }) as any as FinalSelectOption<ValueType>[];
@@ -181,7 +185,6 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
     },
     [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props],
   );
-
   const { popoverWrapper } = useGridPopoverHook({ className: props.className });
   return popoverWrapper(
     <>
@@ -210,14 +213,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
       )}
       <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
         <>
-          {options && options.length == filteredValues?.length && <MenuItem>[Empty]</MenuItem>}
-          {options?.map((item, index) =>
+          {options && options.length == filteredValues?.length && (
+            <MenuItem key={`${props.field}-empty`}>[Empty]</MenuItem>
+          )}
+          {options?.map((item: FinalSelectOption<ValueType | string>, index) =>
             item.value === MenuSeparatorString ? (
               <MenuDivider key={`$$divider_${index}`} />
             ) : item.value === MenuHeaderString ? (
-              <MenuHeader>{item.label}</MenuHeader>
+              <MenuHeader key={`$$header_${index}`}>{item.label}</MenuHeader>
             ) : filteredValues.includes(item.value) ? null : (
-              <>
+              <div key={`menu-wrapper-${index}`}>
                 {!item.subComponent ? (
                   <MenuItem
                     key={`${props.field}-${index}`}
@@ -225,7 +230,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                     title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                     value={item.value}
                     onClick={() => {
-                      selectItemHandler(item.value);
+                      selectItemHandler(item.value as ValueType);
                     }}
                   >
                     {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
@@ -255,18 +260,19 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                             const subComponentItem = subComponentValues.find(
                               ({ optionValue }) => optionValue === item.value,
                             );
-                            if (key === "Enter" && subComponentItem) {
-                              selectItemHandler(item.value, subComponentItem.subComponentValue);
+                            if ((key === "Enter" || key === "Tab") && subComponentItem) {
+                              selectItemHandler(item.value as ValueType, subComponentItem.subComponentValue);
                               ref.closeMenu();
                             }
                           },
+                          key: `${props.field}-${index}_subcomponent_inner`,
                         },
                         ref,
                       )
                     }
                   </FocusableItem>
                 )}
-              </>
+              </div>
             ),
           )}
         </>

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
+import "../../styles/GridFormSubComponentTextInput.scss";
 
 export interface GridFormSubComponentTextInput {
   setValue: (value: string) => void;
   keyDown: (key: string) => void;
   placeholder?: string;
   className?: string;
+  customHelpText?: string;
 }
 
 export const GridFormSubComponentTextInput = ({
@@ -13,12 +15,20 @@ export const GridFormSubComponentTextInput = ({
   placeholder,
   setValue,
   className,
+  customHelpText,
 }: GridFormSubComponentTextInput) => {
   const placeholderText = placeholder || "Other...";
-  const inputClass = className || "";
+  const helpText = customHelpText || "Press enter or tab to save";
+
+  const inputClass = className || "GridFormSubComponentTextInput-full-width-input";
   const [inputValue, setInputValue] = useState("");
   return (
-    <>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
       <TextInputFormatted
         className={inputClass}
         value={inputValue}
@@ -40,6 +50,13 @@ export const GridFormSubComponentTextInput = ({
           },
         }}
       />
-    </>
+      <span
+        style={{
+          fontSize: "0.75rem",
+        }}
+      >
+        {helpText}
+      </span>
+    </div>
   );
 };

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -18,7 +18,7 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
     {
       maxWidth: 40,
       editable: colDef.editable != null ? colDef.editable : true,
-      cellStyle: { "justify-content": "flex-end" },
+      cellStyle: { justifyContent: "flex-end" },
       cellRenderer: GridRenderPopoutMenuCell,
       cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
       ...colDef,

package/src/contexts/GridUpdatingContext.tsx

@@ -7,10 +7,10 @@ export type GridUpdatingContextType = {
 
 export const GridUpdatingContext = createContext<GridUpdatingContextType>({
   checkUpdating: () => {
-    console.error("Missing UpdatingContext");
+    console.error("Missing GridUpdatingContext");
     return false;
   },
   modifyUpdating: async () => {
-    console.error("Missing UpdatingContext");
+    console.error("Missing GridUpdatingContext");
   },
 });

package/src/styles/GridFormSubComponentTextInput.scss

@@ -0,0 +1,4 @@
+.GridFormSubComponentTextInput-full-width-input {
+  width: 100%;
+  padding: 0;
+}