@linzjs/step-ag-grid 29.7.0 → 29.9.0

package/package.json

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

package/src/components/GridCell.tsx

@@ -33,10 +33,15 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   const colDef = props.colDef as ColDef;
 
   const rendererParams = colDef.cellRendererParams as GenericCellRendererParams<any> | undefined;
+  const errorFn = rendererParams?.error;
+  let errorText = props.data !== undefined && errorFn ? errorFn(props) : undefined;
   const warningFn = rendererParams?.warning;
   let warningText = props.data !== undefined && warningFn ? warningFn(props) : undefined;
   const infoFn = rendererParams?.info;
   let infoText = props.data !== undefined && infoFn ? infoFn(props) : undefined;
+  if (Array.isArray(errorText)) {
+    errorText = errorText.join('\n');
+  }
   if (Array.isArray(warningText)) {
     warningText = warningText.join('\n');
   }
@@ -48,6 +53,9 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
     <GridLoadableCell />
   ) : (
     <>
+      {!!errorText && (
+        <GridIcon icon={'ic_error_outline'} title={typeof errorText === 'string' ? errorText : 'Error'} />
+      )}
       {!!warningText && (
         <GridIcon icon={'ic_warning_outline'} title={typeof warningText === 'string' ? warningText : 'Warning'} />
       )}
@@ -79,6 +87,7 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
     originalCellRenderer?: any;
     editAction?: (selectedRows: TData[]) => void;
     shortcutKeys?: Record<string, () => void>;
+    error?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
     warning?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
     info?: (props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
   };

package/src/components/gridFilter/GridFilterColumnsMultiSelect.scss

@@ -5,13 +5,17 @@
     padding: 8px;
     @include lui.font-semibold();
 
+    .LuiSelect-label-text {
+        color: lui.$fuscous;
+        display: inline-block;
+    }
+
     .LuiCheckboxInput-selectAll,
     .LuiCheckboxInput-item {
         color: lui.$charcoal;
         line-height: 20px;
         margin-bottom: 0;
         font-weight: 600;
-        font-style: SemiBold;
         font-size: 16px;
         line-height: 24px;
         letter-spacing: 0%;

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -100,6 +100,7 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
     this.labelFormatter = params.labelFormatter;
 
     this.allValues = this.loadFieldValues();
+    this.selectedValues = new Set(this.allValues);
 
     this.gui = document.createElement('div');
     this.reactRoot = createRoot(this.gui);

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -13,6 +13,7 @@ export interface GenericCellRendererParams<TData extends GridBaseRow> {
   rightHoverElement?: ReactElement | undefined;
   editAction?: (selectedRows: TData[]) => void;
   shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
+  error?: (props: ICellRendererParams<TData>) => string | string[] | boolean | null | undefined;
   warning?: (props: ICellRendererParams<TData>) => string | string[] | boolean | null | undefined;
   info?: (props: ICellRendererParams<TData>) => string | string[] | boolean | null | undefined;
 }

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -83,6 +83,7 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<I
         field: 'position',
         headerName: 'Position',
         cellRendererParams: {
+          error: ({ value }) => value === 'Manager' && 'Managers need management',
           warning: ({ value }) => value === 'Tester' && 'Testers are testing',
           info: ({ value }) => value === 'Developer' && 'Developers are awesome',
         },

package/src/styles/GridIcon.scss

@@ -24,6 +24,16 @@
   fill: lui.$warning;
 }
 
+.AgGridGenericCellRenderer-ic_error_Icon {
+  margin-right: 4px;
+  fill: lui.$error;
+}
+
+.AgGridGenericCellRenderer-ic_error_outlineIcon {
+  margin-right: 4px;
+  fill: lui.$error;
+}
+
 .GridIcon-disabled {
   fill: lui.$silver !important;
 }

package/src/styles/GridTheme.scss

@@ -143,6 +143,18 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     overflow-x: auto;
   }
 
+  .ag-icon-filter {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A292C'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    background-color: transparent;
+
+    &::before {
+      content: none !important;
+    }
+  }
+
   .ag-header-group-cell {
     text-transform: uppercase;
     font-size: 12px;
@@ -265,4 +277,4 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-header-cell {
     font-size: 14px;
   }
-}
+}