@linzjs/step-ag-grid 29.4.0 → 29.5.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.4.0",
+  "version": "29.5.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -76,22 +76,22 @@
     ]
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.52.3",
+    "@rollup/rollup-linux-x64-gnu": "^4.52.4",
     "@swc/core-linux-x64-gnu": "^1.13.20"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
-    "@linzjs/lui": "^23.11.1",
+    "@linzjs/lui": "^23.14.2",
     "@linzjs/style": "^5.4.0",
     "@linzjs/windows": "^5.7.0",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "^9.1.8",
-    "@storybook/addon-links": "^9.1.8",
-    "@storybook/react": "^9.1.8",
-    "@storybook/react-vite": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.12",
+    "@storybook/addon-links": "^9.1.12",
+    "@storybook/react": "^9.1.12",
+    "@storybook/react-vite": "^9.1.12",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -111,7 +111,7 @@
     "cross-env": "^10.1.0",
     "css-loader": "^7.1.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.8",
+    "eslint-plugin-storybook": "^9.1.12",
     "jsdom": "^26.1.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",
@@ -123,7 +123,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.52.3",
+    "rollup": "^4.52.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -131,11 +131,11 @@
     "sass": "^1.93.2",
     "sass-loader": "^16.0.5",
     "semantic-release": "^24.2.9",
-    "storybook": "^9.1.8",
+    "storybook": "^9.1.12",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.10",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"

package/src/components/gridForm/GridFormDropDown.tsx

@@ -75,6 +75,7 @@ export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue>
     | FinalSelectOption<TOptionValue>[]
     | ((selectedRows: TData[], filter?: string) => MaybePromise<FinalSelectOption<TOptionValue>[] | undefined>)
     | undefined;
+  topComponent?: () => ReactElement;
 }
 
 const fieldToString = (field: any) => {
@@ -272,6 +273,12 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
             )}
           </FocusableItem>
           <MenuDivider key={`$$divider_filter`} />
+          {props.topComponent && (
+            <div>
+              <props.topComponent />
+              <MenuDivider key={`$$divider_filter`} />
+            </div>
+          )}
         </div>
       )}
       <ComponentLoadingWrapper loading={!options} className={'GridFormDropDown-options'}>

package/src/styles/GridTheme.scss

@@ -58,31 +58,30 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
-// Don't hide the drag handle
-.ag-theme-step-default.theme-specific .ag-drag-handle.ag-row-drag, .ag-theme-step-compact.theme-specific div.ag-drag-handle.ag-row-drag {
-  opacity: 1 !important;
-}
+.ag-theme-step-default.theme-specific,
+.ag-theme-step-compact.theme-specific {
+  // Don't hide the drag handle
+  .ag-drag-handle.ag-row-drag {
+    opacity: 1 !important;
+  }
 
-.ag-header-hide-default-select .ag-labeled {
-  display: none;
-}
+  .ag-header-hide-default-select .ag-labeled {
+    display: none;
+  }
 
-.ag-header-hide-default-select .ag-wrapper.ag-checkbox-input-wrapper {
-  margin-right: 9px;
-}
+  div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn'] {
+    padding-left: 40px;
+  }
 
-div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn'] {
-  padding-left: 40px;
-}
+  div.ag-header-cell:not(.ag-header-select-draggable)[col-id='ag-Grid-SelectionColumn'] {
+    padding-left: 12px;
+  }
 
-.ag-drag-handle.ag-row-drag {
-  .ag-icon.ag-icon-grip {
-    margin: auto;
+  div.ag-cell-wrapper {
+    margin-left: 4px;
+    margin-right: 4px;
   }
-}
 
-.ag-theme-step-default.theme-specific,
-.ag-theme-step-compact.theme-specific {
   div.ag-center-cols-viewport {
     // when using domLayout={"autoHeight"}, ag grid has a default min-height
     // set to 150px so the !important is necessary here
@@ -158,6 +157,9 @@ div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn']
     }
   }
 
+  div.ag-cell-wrapper .ag-selection-checkbox {
+    margin: 0;
+  }
 
   .ag-cell {
     display: flex;