fix: bearing validation not working, feat: added don't shrink if menu…

… direction is top option (#54)

* fix: bearing validation not working

* fix: bearing validation

index.ts

@@ -1,10 +1,10 @@
 export * from "./src/react-menu3/index";
 export * from "./src/react-menu3/types";
 
-export { UpdatingContext } from "./src/contexts/UpdatingContext";
-export { UpdatingContextProvider } from "./src/contexts/UpdatingContextProvider";
-export { GridContext } from "./src/contexts/GridContext";
-export { GridContextProvider } from "./src/contexts/GridContextProvider";
+export * from "./src/contexts/UpdatingContext";
+export * from "./src/contexts/UpdatingContextProvider";
+export * from "./src/contexts/GridContext";
+export * from "./src/contexts/GridContextProvider";
 
 export type { GridBaseRow } from "./src/components/Grid";
 export { Grid } from "./src/components/Grid";

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[];

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

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>,

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,
+    },
+  };
+};

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",

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 {

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));

src/utils/bearing.ts

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