@linzjs/step-ag-grid 1.4.10 → 1.5.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.4.10",
+  "version": "1.5.1",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/GridCell.tsx

@@ -13,6 +13,7 @@ export interface GridFormProps<RowType extends GridBaseRow> {
   cellEditorParams: ICellEditorParams;
   updateValue: (saveFn: (selectedRows: RowType[]) => Promise<boolean>) => Promise<boolean>;
   saving: boolean;
+  data: RowType;
   value: any;
   field: string | undefined;
   selectedRows: RowType[];

package/src/components/GridPopoverHook.tsx

@@ -44,6 +44,9 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
               saveButtonRef={saveButtonRef}
               menuClassName={"lui-menu"}
               onClose={(event: { reason: string }) => triggerSave(event.reason).then()}
+              reposition={"initial"}
+              viewScroll={"auto"}
+              dontShrinkIfDirectionIsTop={true}
             >
               {saving && (
                 <div

package/src/components/gridForm/GridFormDropDown.tsx

@@ -31,6 +31,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType, string>) => Promise<void>;
   options:
     | SelectOption<ValueType>[]
     | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
@@ -66,6 +67,19 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
     [formProps, props.field, props.selectedRows, updatingCells],
   );
 
+  const selectFilterHandler = useCallback(
+    async (value: string): Promise<boolean> => {
+      const field = props.field;
+      return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
+        if (formProps.onSelectFilter) {
+          await formProps.onSelectFilter({ selectedRows, value });
+        }
+        return true;
+      });
+    },
+    [formProps, props.field, props.selectedRows, updatingCells],
+  );
+
   // Load up options list if it's async function
   useEffect(() => {
     if (options || optionsInitialising.current) return;
@@ -140,13 +154,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         if (activeOptions.length == 1) {
           await selectItemHandler(activeOptions[0].value);
           stopEditing();
+        } else if (formProps.onSelectFilter) {
+          await selectFilterHandler(filter);
+          stopEditing();
         } else {
           e.preventDefault();
           e.stopPropagation();
         }
       }
     },
-    [filteredValues, options, selectItemHandler, stopEditing],
+    [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, formProps],
   );
 
   return popoverWrapper(

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -55,7 +55,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
           maxLength: 16,
           onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
         }}
-        formatted={bearingStringValidator(value) ? "?" : convertDDToDMS(bearingNumberParser(value))}
+        formatted={bearingStringValidator(value, formProps.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
         error={bearingStringValidator(value, formProps.range)}
       />
     </div>,

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -24,26 +24,38 @@ export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
 
 export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
-) => ({
-  ...GridPopoverEditBearingLike(colDef),
-  valueFormatter: 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;
-  },
-});
+) => {
+  const init = GridPopoverEditBearingLike(colDef);
+  return {
+    ...init,
+    valueFormatter: bearingValueFormatter,
+    cellEditorParams: {
+      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;
+      },
+      ...init.cellEditorParams,
+    },
+  };
+};
 
 export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
-) => ({
-  ...GridPopoverEditBearingLike(colDef),
-  valueFormatter: bearingCorrectionValueFormatter,
-  range: (value: number | null) => {
-    if (value === null) return "Bearing is required";
-    if (value >= 360) return "Bearing must be less than 360 degrees";
-    if (value <= -180) return "Bearing must be greater then -180 degrees";
-    return null;
-  },
-});
+) => {
+  const init = GridPopoverEditBearingLike(colDef);
+  return {
+    ...init,
+    valueFormatter: bearingCorrectionValueFormatter,
+    cellEditorParams: {
+      range: (value: number | null) => {
+        if (value === null) return "Bearing is required";
+        if (value >= 360) return "Bearing must be less than 360 degrees";
+        if (value <= -180) return "Bearing must be greater then -180 degrees";
+        return null;
+      },
+      ...init.cellEditorParams,
+    },
+  };
+};

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

@@ -47,6 +47,7 @@ export const MenuList = ({
   endTransition,
   isDisabled,
   menuItemFocus,
+  dontShrinkIfDirectionIsTop,
   offsetX = 0,
   offsetY = 0,
   children,
@@ -417,6 +418,23 @@ export const MenuList = ({
     className: arrowClassName,
   });
 
+  const minHeight = useRef(0);
+  if (dontShrinkIfDirectionIsTop && menuRef.current?.getBoundingClientRect) {
+    const h = menuRef.current?.getBoundingClientRect().height;
+    if (minHeight.current < h) minHeight.current = h;
+  }
+
+  const dontShrinkOps = useMemo(
+    () =>
+      expandedDirection === "top" && dontShrinkIfDirectionIsTop
+        ? {
+            overflowY: isSubmenuOpen ? "" : "auto",
+            minHeight: (isSubmenuOpen ? 0 : minHeight.current) + "px",
+          }
+        : undefined,
+    [dontShrinkIfDirectionIsTop, expandedDirection, isSubmenuOpen],
+  );
+
   return (
     <ul
       role="menu"
@@ -428,6 +446,7 @@ export const MenuList = ({
       style={{
         ...menuStyle,
         ...overflowStyle,
+        ...dontShrinkOps,
         margin: 0,
         display: state === "closed" ? "none" : undefined,
         position: "absolute",

package/src/react-menu3/types.ts

@@ -377,6 +377,10 @@ export interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
    * Event fired when descendent menu items are clicked.
    */
   onItemClick?: EventHandler<ClickEvent>;
+  /**
+   * NEW Don't shrink container if menu direction is "top"
+   */
+  dontShrinkIfDirectionIsTop?: boolean;
 }
 
 export interface ExtraMenuProps {

package/src/stories/components/GridPopoutBearing.stories.tsx

@@ -67,7 +67,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         headerName: "Bearing Correction",
         cellEditorParams: {
           multiEdit: true,
-          placeHolder: "Enter Bearing",
+          placeHolder: "Enter Bearing Correction",
           onSave: async (selectedRows: ITestRow[], value: ITestRow["bearingCorrection"]) => {
             await wait(1000);
             selectedRows.forEach((row) => (row["bearingCorrection"] = value));

package/src/stories/components/GridPopoutEditDropDown.stories.tsx

@@ -44,6 +44,7 @@ interface ITestRow {
   position2: string | null;
   position3: string | null;
   position4: ICode | null;
+  code: string | null;
 }
 
 interface ICode {
@@ -177,6 +178,27 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             }),
           },
         }),
+        GridPopoverEditDropDown<ITestRow, ICode>({
+          field: "code",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Filter Selectable",
+          valueGetter: (params) => params.data.code,
+          cellEditorParams: {
+            multiEdit: true,
+            filtered: "local",
+            filterPlaceholder: "Filter this",
+            options: optionsObjects.map((o) => {
+              return { value: o, label: o.desc, disabled: false };
+            }),
+            onSelectedItem: async (selected) => {
+              selected.selectedRows.forEach((row) => (row.code = selected.value.code));
+            },
+            onSelectFilter: async (selected) => {
+              selected.selectedRows.forEach((row) => (row.code = selected.value));
+            },
+          },
+        }),
       ] as ColDef[],
     [optionsFn, optionsObjects],
   );
@@ -190,6 +212,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           position2: "1",
           position3: "Tester",
           position4: { code: "O1", desc: "Object One" },
+          code: "O1",
         },
         {
           id: 1001,
@@ -197,6 +220,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           position2: "2",
           position3: "Developer",
           position4: { code: "O2", desc: "Object Two" },
+          code: "O2",
         },
       ] as ITestRow[],
     [],

package/src/utils/bearing.ts

@@ -39,7 +39,6 @@ export const bearingStringValidator = (
   }
 
   const bearing = parseFloat(value);
-
   return customValidate ? customValidate(bearing) : null;
 };