@linzjs/step-ag-grid 27.1.0 → 27.2.0

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -14,21 +14,28 @@ import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
 
-export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TValue> {
+export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TOption> {
   // Note the row that was clicked on will be first
   selectedRows: TData[];
   selectedRowIds: TData['id'][];
-  value: TValue;
+  value: TOption;
   subComponentValue?: any;
 }
 
-interface FinalSelectOption {
-  value: any;
+interface FinalSelectOption<TOptionValue> {
+  value: TOptionValue;
   label?: ReactElement | string;
   disabled?: boolean | string;
   subComponent?: (props: any, ref: any) => any;
 }
 
+export const primitiveToSelectOption = <T,>(value: T): SelectOption<T> => {
+  return {
+    value: value,
+    label: value ? String(value) : '',
+  };
+};
+
 export const MenuSeparatorString = '_____MENU_SEPARATOR_____';
 export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 
@@ -37,9 +44,11 @@ export const MenuHeaderItem = (title: string) => {
   return { label: title, value: MenuHeaderString };
 };
 
-export type SelectOption = null | string | FinalSelectOption;
+export type SelectOption<TOptionValue = any> = FinalSelectOption<TOptionValue>;
 
-export interface GridFormDropDownProps<TData extends GridBaseRow, TValue = any> extends CellEditorCommon {
+export type MaybePromise<T> = T | Promise<T>;
+
+export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
   | 'GridPopoverEditDropDown-containerSmall'
@@ -59,11 +68,11 @@ export interface GridFormDropDownProps<TData extends GridBaseRow, TValue = any>
   filterPlaceholder?: string;
   filterHelpText?: string;
   noOptionsMessage?: string;
-  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void> | void;
-  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void> | void;
+  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TOptionValue>) => Promise<void> | void;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TOptionValue>) => Promise<void> | void;
   options:
-    | SelectOption[]
-    | ((selectedRows: TData[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
+    | FinalSelectOption<TOptionValue>[]
+    | ((selectedRows: TData[], filter?: string) => MaybePromise<FinalSelectOption<TOptionValue>[] | undefined>)
     | undefined;
 }
 
@@ -71,18 +80,20 @@ const fieldToString = (field: any) => {
   return typeof field === 'symbol' ? field.toString() : `${field}`;
 };
 
-export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridFormDropDownProps<TData, TValue>) => {
+export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
+  props: GridFormDropDownProps<TData, TOptionValue>,
+) => {
   const { selectedRows, field, data } = useGridPopoverContext<TData>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
   const [filter, setFilter] = useState(props.filterDefaultValue ?? '');
   const [filteredValues, setFilteredValues] = useState<any[]>();
-  const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
+  const [options, setOptions] = useState<FinalSelectOption<TOptionValue>[] | null>(null);
   const subComponentIsValid = useRef(false);
   const subComponentInitialValue = useRef<string | null>(null);
   const [subSelectedValue, setSubSelectedValue] = useState<any>(null);
   // Note: null is assumed to be the filter
-  const [selectedItem, setSelectedItem] = useState<FinalSelectOption | null>(null);
+  const [selectedItem, setSelectedItem] = useState<FinalSelectOption<TOptionValue> | null>(null);
 
   const selectItemHandler = useCallback(
     async (value: any, subComponentValue?: any): Promise<boolean> => {
@@ -116,17 +127,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
         optionsConf = await optionsConf(selectedRows, filter);
       }
       if (optionsConf !== undefined) {
-        const optionsList = optionsConf?.map((item) =>
-          item == null || typeof item === 'string'
-            ? ({
-                value: item,
-                label: item,
-                disabled: false,
-              } as FinalSelectOption)
-            : item,
-        );
-
-        setOptions(optionsList);
+        setOptions(optionsConf);
       }
     })();
   }, [filter, options, props, selectedRows]);
@@ -251,7 +252,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
               {props.noOptionsMessage ?? 'No Options'}
             </MenuItem>
           )}
-          {options?.map((item: FinalSelectOption, index) => {
+          {options?.map((item: FinalSelectOption<TOptionValue>, index) => {
             showHeader = null;
             if (item.value === MenuSeparatorString) {
               return <MenuDivider key={`$$divider_${index}`} />;
@@ -288,7 +289,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
                         e.keepOpen = !!item.subComponent;
                       }}
                     >
-                      {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                      {item.label ?? (item.value == null ? `<${String(item.value)}>` : `${String(item.value)}`)}
                       {item.subComponent ? '...' : ''}
                     </MenuItem>
 

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -5,15 +5,15 @@ import { ColDefT, GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormDropDown, GridFormDropDownProps } from '../gridForm/GridFormDropDown';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
 
-export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any>(
+export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any, TOptionValue = any>(
   colDef: GenericCellColDef<TData, TValue>,
-  props: GenericCellEditorProps<GridFormDropDownProps<TData, TValue>>,
+  props: GenericCellEditorProps<GridFormDropDownProps<TData, TOptionValue>>,
 ): ColDefT<TData, TValue> =>
-  GridCell<TData, TValue, GridFormDropDownProps<TData, TValue>>(colDef, {
+  GridCell<TData, TValue, GridFormDropDownProps<TData, TOptionValue>>(colDef, {
     editor: GridFormDropDown,
     ...props,
     editorParams: {
-      ...(props.editorParams as GridFormDropDownProps<TData, TValue>),
+      ...(props.editorParams as GridFormDropDownProps<TData, TOptionValue>),
       className: clsx(
         {
           'GridPopoverEditDropDown-containerLarge': !props.editorParams?.className?.includes(

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

@@ -331,7 +331,6 @@ export const ControlledMenuFr = (
                 externalRef={externalRef}
                 containerRef={containerRef}
                 onClose={onClose}
-                onBlur={() => console.log('blur')}
               />
             </EventHandlersContext.Provider>
           </ItemSettingsContext.Provider>

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -25,6 +25,7 @@ import {
   MenuHeaderItem,
   MenuSeparator,
   MenuSeparatorString,
+  primitiveToSelectOption,
   wait,
 } from '../..';
 import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
@@ -72,16 +73,9 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     console.log('optionsFn selected rows', selectedRows, filter);
     filter = filter?.toLowerCase();
     await wait(1000);
-    return [
-      null,
-      'Architect',
-      'Developer',
-      'Product Owner',
-      'Scrum Master',
-      'Tester',
-      MenuSeparatorString,
-      'Custom',
-    ].filter((v) => (filter != null ? v != null && v.toLowerCase().indexOf(filter) === 0 : true));
+    return [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester', MenuSeparatorString, 'Custom']
+      .filter((v) => (filter != null ? v != null && v.toLowerCase().indexOf(filter) === 0 : true))
+      .map(primitiveToSelectOption);
   }, []);
 
   const optionsObjects = useMemo(
@@ -121,7 +115,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           },
         },
       ),
-      GridPopoverEditDropDown(
+      GridPopoverEditDropDown<ITestRow, ITestRow['position3'], string | null>(
         {
           field: 'position3',
           headerName: 'Custom callback',
@@ -129,7 +123,9 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         {
           multiEdit: true,
           editorParams: {
-            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'],
+            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'].map(
+              primitiveToSelectOption,
+            ),
             onSelectedItem: async (selected) => {
               await wait(2000);
               selected.selectedRows.forEach((row) => {
@@ -139,7 +135,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           },
         },
       ),
-      GridPopoverEditDropDown(
+      GridPopoverEditDropDown<ITestRow, ITestRow['position3'], string | null>(
         {
           field: 'position',
           headerName: 'Options Fn',
@@ -165,7 +161,9 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           editorParams: {
             filtered: 'local',
             filterPlaceholder: 'Filter this',
-            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'],
+            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'].map(
+              primitiveToSelectOption,
+            ),
           },
         },
       ),
@@ -186,7 +184,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           },
         },
       ),
-      GridPopoverEditDropDown(
+      GridPopoverEditDropDown<ITestRow, ITestRow['code'], string | null>(
         {
           field: 'code',
           headerName: 'Filter Selectable',
@@ -198,17 +196,21 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
             filterPlaceholder: 'Filter this',
             filterHelpText: 'Press enter to save custom value',
             options: optionsObjects.map((o) => {
-              return { value: o, label: o.desc, disabled: false };
+              return { value: o.code, label: o.desc, disabled: false };
             }),
             onSelectedItem: (selected) => {
               // eslint-disable-next-line no-console
               console.log('onSelectedItem selected', selected);
-              selected.selectedRows.forEach((row) => (row.code = selected.value.code));
+              selected.selectedRows.forEach((row) => {
+                row.code = selected.value;
+              });
             },
             onSelectFilter: (selected) => {
               // eslint-disable-next-line no-console
               console.log('onSelectFilter selected', selected);
-              selected.selectedRows.forEach((row) => (row.code = selected.value));
+              selected.selectedRows.forEach((row) => {
+                row.code = selected.value;
+              });
             },
           },
         },