@linzjs/step-ag-grid 13.5.1 → 14.0.0

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -36,14 +36,11 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridCell(
         {
           field: "name",
           headerName: "Popout Generic Edit",
-          maxWidth: 140,
         },
         {
           multiEdit: true,

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -60,14 +60,11 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridPopoverTextInput(
         {
           field: "name",
           headerName: "Text input",
-          maxWidth: 140,
         },
         {
           multiEdit: true,
@@ -91,7 +88,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         {
           field: "distance",
           headerName: "Number input",
-          maxWidth: 140,
           valueFormatter: (params) => {
             const v = params.data.distance;
             return v != null ? `${v}${params.colDef.cellEditorParams.units}` : "–";
@@ -121,7 +117,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         {
           field: "plan",
           headerName: "Text area",
-          maxWidth: 140,
         },
         {
           multiEdit: true,
@@ -146,7 +141,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           colId: "plan2",
           field: "plan",
           headerName: "Multi-editor",
-          maxWidth: 140,
         },
         (_params) =>
           _params.rowIndex == 0
@@ -169,7 +163,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
       ),
       GridPopoverMenu(
         {
-          headerName: "Delete menu",
+          headerName: "",
         },
         {
           multiEdit: true,

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -57,8 +57,6 @@ const GridPopoverEditBearingTemplate: ComponentStory<typeof Grid> = (props: Grid
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridPopoverEditBearingCorrection(
         {

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

@@ -96,13 +96,10 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridPopoverEditDropDown(
         {
           field: "position2",
-          maxWidth: 100,
           headerName: "Multi-edit",
         },
         {
@@ -125,8 +122,6 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       GridPopoverEditDropDown(
         {
           field: "position3",
-          initialWidth: 65,
-          maxWidth: 150,
           headerName: "Custom callback",
         },
         {
@@ -145,8 +140,6 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       GridPopoverEditDropDown(
         {
           field: "position",
-          initialWidth: 65,
-          maxWidth: 150,
           headerName: "Options Fn",
         },
         {
@@ -161,8 +154,6 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       GridPopoverEditDropDown(
         {
           field: "position3",
-          initialWidth: 65,
-          maxWidth: 150,
           headerName: "Filtered",
         },
         {
@@ -177,8 +168,6 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       GridPopoverEditDropDown(
         {
           field: "position4",
-          initialWidth: 65,
-          maxWidth: 150,
           headerName: "Filtered (object)",
           valueGetter: (params) => params.data.position4?.desc,
         },
@@ -196,8 +185,6 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       GridPopoverEditDropDown(
         {
           field: "code",
-          initialWidth: 65,
-          maxWidth: 150,
           headerName: "Filter Selectable",
         },
         {
@@ -225,8 +212,6 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       GridPopoverEditDropDown(
         {
           field: "sub",
-          initialWidth: 65,
-          maxWidth: 150,
           headerName: "Subcomponent",
           valueGetter: (params) => params.data.sub,
         },

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -65,14 +65,10 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridPopoutEditMultiSelect(
         {
           field: "position",
-          initialWidth: 65,
-          maxWidth: 250,
           headerName: "Position",
           valueFormatter: ({ value }) => {
             if (value == null) return "";
@@ -117,8 +113,6 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
       GridPopoutEditMultiSelect(
         {
           field: "position",
-          initialWidth: 65,
-          maxWidth: 250,
           headerName: "Parcel picker",
           valueFormatter: ({ value }) => {
             if (value == null) return "";

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

@@ -24,7 +24,7 @@ import {
   wait,
 } from "../..";
 import { GridFilterColumnsToggle } from "../../components";
-import { GridFilterDownloadCsvButton } from "../../components/gridFilter/GridFilterDownloadCsvButton";
+import { GridFilterDownloadCsvButton } from "../../components";
 import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 
@@ -40,7 +40,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1024, height: 400, display: "flex", flexDirection: "column" }}>
+      <div style={{ maxWidth: 1024, height: 400, display: "flex", flexDirection: "column" }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -66,15 +66,11 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
         lockVisible: true,
       }),
       GridCell({
         field: "position",
         headerName: "Position",
-        initialWidth: 65,
-        maxWidth: 150,
         cellRendererParams: {
           warning: (props) => props.value === "Tester" && "Testers are testing",
           info: (props) => props.value === "Developer" && "Developers are awesome",
@@ -83,19 +79,15 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       GridCell({
         field: "age",
         headerName: "Age",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridCell({
         field: "desc",
         headerName: "Description",
-        initialWidth: 150,
-        maxWidth: 200,
+        flex: 1,
       }),
       GridPopoverMessage(
         {
           headerName: "Popout message",
-          maxWidth: 150,
           cellRenderer: () => <>Single Click me!</>,
           exportable: false,
         },
@@ -111,7 +103,6 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       ),
       GridCell({
         headerName: "Custom edit",
-        maxWidth: 100,
         editable: true,
         valueFormatter: () => "Press E",
         cellRendererParams: {
@@ -191,18 +182,6 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           },
         },
       ),
-      GridPopoverMenu(
-        {
-          editable: () => false,
-        },
-        {
-          editorParams: {
-            options: async () => {
-              return [];
-            },
-          },
-        },
-      ),
     ],
     [],
   );

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -68,14 +68,10 @@ const GridKeyboardInteractionsTemplate: ComponentStory<typeof Grid> = (props: Gr
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridCell({
         field: "position",
         headerName: "Position",
-        initialWidth: 65,
-        maxWidth: 150,
         cellRendererParams: {
           warning: (props) => props.value === "Tester" && "Testers are testing",
           info: (props) => props.value === "Developer" && "Developers are awesome",
@@ -84,14 +80,10 @@ const GridKeyboardInteractionsTemplate: ComponentStory<typeof Grid> = (props: Gr
       GridCell({
         field: "age",
         headerName: "Age",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridCell({
         field: "desc",
         headerName: "Description",
-        initialWidth: 150,
-        maxWidth: 200,
       }),
       GridPopoverMessage(
         {

package/src/styles/ComponentLoadingWrapper.scss

@@ -0,0 +1,9 @@
+.ComponentLoadingWrapper-saveOverlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgb(64 64 64 / 10%);
+  z-index: 1000;
+}

package/src/styles/Grid.scss

@@ -71,6 +71,11 @@
   padding: 0.375rem 0.75rem;
 }
 
+.ag-cell-value {
+  display: flex;
+  align-items: center;
+}
+
 .ag-cell .GridCell-editableIcon {
   fill: colors.$silver;
   visibility: hidden;

package/src/styles/GridCell.scss

@@ -0,0 +1,12 @@
+.GridCell-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.GridCell-hoverRight {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+}

package/src/styles/GridLoadableCell.scss

@@ -2,4 +2,5 @@
   width: 100%;
   display: flex;
   align-items: center;
+  margin-bottom: 6px;
 }

package/src/styles/GridPopoverMenu.scss

@@ -1,13 +1,14 @@
 @use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
 
-.GridPopoutMenu-burger {
+.ag-cell .GridPopoutMenu-burger {
   cursor: pointer;
+  display: block;
 
   svg {
     fill: colors.$sea;
   }
 }
 
-.GridPopoutMenu-burgerDisabled svg {
+.ag-cell .GridPopoutMenu-burgerDisabled svg {
   fill: colors.$disabled-color;
 }

package/src/styles/index.scss

@@ -1,6 +1,8 @@
 @use "./lui-overrides";
 @use "./react-menu-customisations";
+@use "./ComponentLoadingWrapper";
 @use "./Grid";
+@use "./GridCell";
 @use "./GridFormDropDown";
 @use "./GridFormEditBearing";
 @use "./GridFormMultiSelect";