@linzjs/step-ag-grid 22.2.4 → 22.3.0

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -14,10 +14,11 @@ import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 
-export interface GridPopoutEditDropDownSelectedItem<TData> {
+export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TValue> {
   // Note the row that was clicked on will be first
   selectedRows: TData[];
-  value: any;
+  selectedRowIds: TData["id"][];
+  value: TValue;
   subComponentValue?: any;
 }
 
@@ -38,7 +39,7 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption = null | string | FinalSelectOption;
 
-export interface GridFormDropDownProps<TData extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormDropDownProps<TData extends GridBaseRow, TValue> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?:
     | "GridPopoverEditDropDown-containerSmall"
@@ -54,8 +55,8 @@ export interface GridFormDropDownProps<TData extends GridBaseRow> extends CellEd
   filterPlaceholder?: string;
   filterHelpText?: string;
   noOptionsMessage?: string;
-  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData>) => Promise<void>;
-  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData>) => Promise<void>;
+  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void>;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void>;
   options:
     | SelectOption[]
     | ((selectedRows: TData[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
@@ -66,7 +67,7 @@ const fieldToString = (field: any) => {
   return typeof field == "symbol" ? field.toString() : `${field}`;
 };
 
-export const GridFormDropDown = <TData extends GridBaseRow>(props: GridFormDropDownProps<TData>) => {
+export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridFormDropDownProps<TData, TValue>) => {
   const { selectedRows, field, data } = useGridPopoverContext<TData>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
@@ -86,7 +87,12 @@ export const GridFormDropDown = <TData extends GridBaseRow>(props: GridFormDropD
         (subComponentValue !== undefined && subComponentInitialValue.current !== JSON.stringify(subComponentValue));
       if (hasChanged) {
         if (props.onSelectedItem) {
-          await props.onSelectedItem({ selectedRows, value, subComponentValue });
+          await props.onSelectedItem({
+            selectedRows,
+            selectedRowIds: selectedRows.map((row) => row.id),
+            value,
+            subComponentValue,
+          });
         } else {
           selectedRows.forEach((row) => (row[field] = value as any));
         }
@@ -167,7 +173,7 @@ export const GridFormDropDown = <TData extends GridBaseRow>(props: GridFormDropD
     if (selectedItem === null) {
       if (props.onSelectFilter) {
         const { onSelectFilter } = props;
-        await onSelectFilter({ selectedRows, value: filter });
+        await onSelectFilter({ selectedRows, selectedRowIds: selectedRows.map((row) => row.id), value: filter as any });
         return true;
       } else {
         if (filteredValues && filteredValues.length === 1) {

package/src/components/gridPopoverEdit/GridButton.tsx

@@ -5,7 +5,7 @@ import { GridBaseRow } from "../Grid";
 import { LuiButton, LuiIcon } from "@linzjs/lui";
 import { useEffect, useRef } from "react";
 
-const ButtonCellRenderer = (props: SAICellRendererParams) => {
+const ButtonCellRenderer = <TData extends GridBaseRow>(props: SAICellRendererParams<TData>) => {
   const { data, node, column, colDef, api } = props;
   const inputRef = useRef<HTMLButtonElement>(null);
 
@@ -39,9 +39,9 @@ const ButtonCellRenderer = (props: SAICellRendererParams) => {
   );
 };
 
-export interface GridButtonProps<TData> {
+export interface GridButtonProps<TData extends GridBaseRow> {
   visible?: (cellEditorParams: ICellEditorParams) => boolean;
-  onClick?: (props: { selectedRows: TData[]; selectedRowIds: (string | number)[] }) => void;
+  onClick?: (props: { selectedRows: TData[]; selectedRowIds: TData["id"][] }) => void;
 }
 
 export const GridButton = <TData extends GridBaseRow>(

package/src/components/gridPopoverEdit/GridEditBoolean.tsx

@@ -65,12 +65,8 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
   );
 };
 
-export interface GridEditBooleanEditorProps<TData> extends CellEditorCommon {
-  onClick: (props: {
-    selectedRows: TData[];
-    selectedRowIds: (string | number)[];
-    checked: boolean;
-  }) => Promise<boolean>;
+export interface GridEditBooleanEditorProps<TData extends GridBaseRow> extends CellEditorCommon {
+  onClick: (props: { selectedRows: TData[]; selectedRowIds: TData["id"][]; checked: boolean }) => Promise<boolean>;
 }
 
 export const GridEditBoolean = <TData extends GridBaseRow>(

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

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

package/src/lui/FormError.scss

@@ -1,7 +1,25 @@
 @use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
 
-.FormError-helpText {
-  font-size: 0.75rem;
-  color: colors.$fuscous;
-  font-weight: 400;
+
+.FormError {
+  display: flex;
+
+  &-helpText {
+    font-size: 0.75rem;
+    color: colors.$fuscous;
+    font-weight: 400;
+  }
+
+  &-text-icon {
+    margin-top: 4px;
+    margin-right: 4px;
+  }
+
+  &-error {
+    padding-left: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: colors.$charcoal;
+    align-items: center;
+  }
 }

package/src/lui/FormError.tsx

@@ -1,6 +1,7 @@
 import "./FormError.scss";
 
 import { ReactElement } from "react";
+import { LuiIcon } from "@linzjs/lui";
 
 export interface FormErrorProps {
   helpText?: string;
@@ -11,9 +12,10 @@ export const FormError = (props: FormErrorProps) => {
   return (
     <>
       {props.error && (
-        <span className="LuiTextInput-error" style={{ paddingLeft: 0 }}>
-          {props.error}
-        </span>
+        <div className="FormError">
+          <LuiIcon alt="error" name="ic_error" className="FormError-text-icon" size="sm" status="error" />
+          <span className="FormError-error">{props.error}</span>
+        </div>
       )}
 
       {props.helpText && !props.error && <span className={"FormError-helpText"}>{props.helpText}</span>}

package/src/lui/TextInputFormatted.scss

@@ -1,3 +1,5 @@
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
 .LuiTextInput.GridLuiTextInput {
   margin-bottom: 0;
 }
@@ -7,5 +9,5 @@
   right: 14px;
   top: 0;
   line-height: 48px;
-  color: #beb9b4;
+  color: lui.$fuscous;
 }