@linzjs/step-ag-grid 1.5.4 → 2.0.1

package/src/stories/components/GridPopoutEditMultiSelect.stories.tsx

@@ -1,18 +1,18 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-import "../../lui-overrides.scss";
+import "../../styles/index.scss";
+import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
 import { MenuSeparator } from "@components/gridForm/GridFormDropDown";
-import { ColDef } from "ag-grid-community";
 import { wait } from "@utils/util";
 import { MultiSelectResult } from "@components/gridForm/GridFormMultiSelect";
 import { GridSubComponentTextArea } from "@components/GridSubComponentTextArea";
-import { GridCell } from "@components/GridCell";
+import { ColDefT, GridCell } from "@components/GridCell";
 import { GridPopoutEditMultiSelect } from "@components/gridPopoverEdit/GridPopoutEditMultiSelect";
 
 export default {
@@ -25,11 +25,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -45,7 +45,7 @@ interface ITestRow {
 const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
-  const columnDefs = useMemo(() => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(() => {
     const positionTwoMap: Record<string, string> = {
       "1": "One",
       "2": "Two",
@@ -58,57 +58,65 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>({
-        field: "position",
-        initialWidth: 65,
-        maxWidth: 150,
-        headerName: "Position",
-        cellEditorParams: {
-          multiEdit: false,
-          filtered: true,
-          filterPlaceholder: "Filter position",
-          options: [
-            { value: "a", label: "Architect" },
-            { value: "b", label: "Developer" },
-            { value: "c", label: "Product Owner" },
-            { value: "d", label: "Scrum Master" },
-            { value: "e", label: "Tester" },
-            MenuSeparator,
-            {
-              value: "f",
-              label: "Other",
-              subComponent: (props) => <GridSubComponentTextArea {...props} />,
+      GridPopoutEditMultiSelect(
+        {
+          field: "position",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Position",
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            filtered: true,
+            filterPlaceholder: "Filter position",
+            options: [
+              { value: "a", label: "Architect" },
+              { value: "b", label: "Developer" },
+              { value: "c", label: "Product Owner" },
+              { value: "d", label: "Scrum Master" },
+              { value: "e", label: "Tester" },
+              MenuSeparator,
+              {
+                value: "f",
+                label: "Other",
+                subComponent: (props) => <GridSubComponentTextArea {...props} />,
+              },
+            ],
+            onSave: async (result: MultiSelectResult<ITestRow>) => {
+              // eslint-disable-next-line no-console
+              console.log(result);
+              await wait(1000);
+              return true;
             },
-          ],
-          onSave: async (result: MultiSelectResult<ITestRow>) => {
-            // eslint-disable-next-line no-console
-            console.log(result);
-            await wait(1000);
-            return true;
           },
         },
-      }),
-      GridPopoutEditMultiSelect<ITestRow, ITestRow["position2"]>({
-        field: "position2",
-        initialWidth: 65,
-        maxWidth: 150,
-        headerName: "Inital editor values ",
-        valueGetter: (props) => positionTwoMap[props.data.position2],
-        cellEditorParams: {
+      ),
+      GridPopoutEditMultiSelect(
+        {
+          field: "position2",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Inital editor values ",
+          valueGetter: (props) => positionTwoMap[props.data.position2],
+        },
+        {
           multiEdit: false,
-          filtered: true,
-          filterPlaceholder: "Filter position",
-          initialSelectedValues: (selectedRows) => [selectedRows[0].position2],
-          options: Object.entries(positionTwoMap).map(([k, v]) => ({ value: k, label: v })),
-          onSave: async (result: MultiSelectResult<ITestRow>) => {
-            // eslint-disable-next-line no-console
-            console.log(result);
-            await wait(1000);
-            return true;
+          editorParams: {
+            filtered: true,
+            filterPlaceholder: "Filter position",
+            initialSelectedValues: (selectedRows) => [selectedRows[0].position2],
+            options: Object.entries(positionTwoMap).map(([k, v]) => ({ value: k, label: v })),
+            onSave: async (result: MultiSelectResult<ITestRow>) => {
+              // eslint-disable-next-line no-console
+              console.log(result);
+              await wait(1000);
+              return true;
+            },
           },
         },
-      }),
-    ] as ColDef[];
+      ),
+    ];
   }, []);
 
   const rowData = useMemo(

package/src/stories/components/GridReadOnly.stories.tsx

@@ -1,16 +1,17 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-import "../../lui-overrides.scss";
+import "../../styles/index.scss";
+import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
 import { wait } from "@utils/util";
 import { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
+import { ColDefT, GridCell } from "@components/GridCell";
 import { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
-import { GridCell } from "@components/GridCell";
 
 export default {
   title: "Components / Grids",
@@ -22,11 +23,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -42,7 +43,7 @@ interface ITestRow {
 
 const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
-  const columnDefs = useMemo(
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
         field: "id",
@@ -50,7 +51,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridCell<ITestRow, any>({
+      GridCell({
         field: "position",
         headerName: "Position",
         initialWidth: 65,
@@ -72,75 +73,87 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 150,
         maxWidth: 200,
       }),
-      GridPopoverMessage<ITestRow>({
-        headerName: "Popout message",
-        cellRenderer: () => <>Click me!</>,
-        cellEditorParams: {
-          message: async (selectedRows: ITestRow[]) => {
-            await wait(1000);
-            return `There are ${selectedRows.length} row(s) selected`;
-          },
+      GridPopoverMessage(
+        {
+          headerName: "Popout message",
+          cellRenderer: () => <>Click me!</>,
+        },
+        {
           multiEdit: true,
+          editorParams: {
+            message: async (formParams): Promise<string> => {
+              await wait(1000);
+              return `There are ${formParams.selectedRows.length} row(s) selected`;
+            },
+          },
         },
-      }),
-      GridPopoverMenu<ITestRow>({
-        headerName: "Menu",
-        cellEditorParams: {
-          options: async (selectedItems) => {
-            // Just doing a timeout here to demonstrate deferred loading
-            await wait(500);
-            return [
-              {
-                label: "Single edit only",
-                action: async (selectedRows) => {
-                  alert(`Single-edit: ${selectedRows.length} rows`);
-                  await wait(1500);
-                  return true;
+      ),
+      GridPopoverMenu(
+        {
+          headerName: "Menu",
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async (selectedItems) => {
+              // Just doing a timeout here to demonstrate deferred loading
+              await wait(500);
+              return [
+                {
+                  label: "Single edit only",
+                  action: async (selectedRows) => {
+                    alert(`Single-edit: ${selectedRows.length} rows`);
+                    await wait(1500);
+                    return true;
+                  },
+                  supportsMultiEdit: false,
                 },
-                supportsMultiEdit: false,
-              },
-              {
-                label: "Multi-edit",
-                action: async (selectedRows) => {
-                  alert(`Multi-edit: ${selectedRows.length} rows`);
-                  await wait(1500);
-                  return true;
+                {
+                  label: "Multi-edit",
+                  action: async (selectedRows) => {
+                    alert(`Multi-edit: ${selectedRows.length} rows`);
+                    await wait(1500);
+                    return true;
+                  },
+                  supportsMultiEdit: true,
                 },
-                supportsMultiEdit: true,
-              },
-              {
-                label: "Disabled item",
-                disabled: "Disabled for test",
-                supportsMultiEdit: true,
-              },
-              {
-                label: "Developer Only",
-                hidden: selectedItems.some((x) => x.position != "Developer"),
-                supportsMultiEdit: true,
-              },
-            ];
+                {
+                  label: "Disabled item",
+                  disabled: "Disabled for test",
+                  supportsMultiEdit: true,
+                },
+                {
+                  label: "Developer Only",
+                  hidden: selectedItems.some((x) => x.position != "Developer"),
+                  supportsMultiEdit: true,
+                },
+              ];
+            },
           },
         },
-      }),
-      GridPopoverMenu<ITestRow>({
-        headerName: "Menu disabled",
-        editable: false,
-        cellEditorParams: {
-          options: async () => {
-            return [];
+      ),
+      GridPopoverMenu(
+        {
+          headerName: "Menu disabled",
+          editable: false,
+        },
+        {
+          editorParams: {
+            options: async () => {
+              return [];
+            },
           },
         },
-      }),
+      ),
     ],
     [],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
-        { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
-      ] as ITestRow[],
+  const rowData: ITestRow[] = useMemo(
+    () => [
+      { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+      { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+    ],
     [],
   );
 

package/src/stories/components/ReactMenu.stories.tsx

@@ -1,7 +1,3 @@
-import "@linzjs/lui/dist/scss/base.scss";
-import "@linzjs/lui/dist/fonts";
-import "../../lui-overrides.scss";
-
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { Grid } from "@components/Grid";
 import { Menu, MenuItem, MenuButton, MenuDivider, SubMenu } from "@react-menu3";

package/src/{components → styles}/Grid.scss

@@ -1,4 +1,6 @@
-@use '~@linzjs/lui/dist/scss/Core' as lui;
+@use "../react-menu3/styles/index";
+@use "./react-menu-customisations";
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
 
 .Grid-container {
   flex: 1;
@@ -6,11 +8,11 @@
 }
 
 .Grid-sortIsStale {
-  span.ag-icon.ag-icon-desc:after {
+  span.ag-icon.ag-icon-desc::after {
     content: "*";
   }
 
-  span.ag-icon.ag-icon-asc:after {
+  span.ag-icon.ag-icon-asc::after {
     content: "*";
   }
 }
@@ -23,7 +25,7 @@
 .Grid-quickFilterBox {
   width: 100%;
   height: 48px;
-  border: 0.06rem solid lui.$silver;
+  border: 0.06rem solid colors.$silver;
   border-radius: 3px;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -33,6 +35,7 @@
   padding: 4px 8px;
 }
 
-.Grid-popoverContainerList {
-  padding: 4px 4px;
+.GridFormMessage-container {
+  padding: 4px 8px;
+  max-width: 400px;
 }

package/src/styles/GridFormDropDown.scss

@@ -0,0 +1,18 @@
+.GridPopoverEditDropDown-containerSmall .GridFormDropDown-options {
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options {
+  overflow-y: auto;
+}

package/src/styles/GridFormMultiSelect.scss

@@ -0,0 +1,18 @@
+.GridMultiSelect-containerSmall .GridFormMultiSelect-options {
+  max-height: 130px;
+  overflow-y: auto;
+}
+
+.GridMultiSelect-containerMedium .GridFormMultiSelect-options {
+  max-height: 190px;
+  overflow-y: auto;
+}
+
+.GridMultiSelect-containerLarge .GridFormMultiSelect-options {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options {
+  overflow-y: auto;
+}

package/src/styles/GridRenderGenericCell.scss

@@ -0,0 +1,15 @@
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+
+.AgGridGenericCellRenderer-icon {
+  margin-right: 4px;
+}
+
+.AgGridGenericCellRenderer-ic_infoIcon {
+  margin-right: 4px;
+  fill: colors.$info;
+}
+
+.AgGridGenericCellRenderer-ic_warningIcon {
+  margin-right: 4px;
+  fill: colors.$warning;
+}

package/src/styles/GridTheme.scss

@@ -0,0 +1,108 @@
+@use "@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as lui;
+
+// These break if we use urls so ignore stylelint
+/* stylelint-disable-next-line */
+@import "ag-grid-community/src/styles/ag-grid";
+/* stylelint-disable-next-line */
+@import "ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
+
+.ag-theme-alpine {
+  // AG Grid themes can be customized using theme parameters, which are arguments that change its appearance. Refer to
+  // https://www.ag-grid.com/javascript-data-grid/themes-customising/#full-list-of-theme-parameters for a full list of
+  // the available theme parameters, which should be used whenever possible.
+  @include ag-theme-alpine(
+    (
+      alpine-active-color: lui.$sea,
+      foreground-color: lui.$grey-80,
+      data-color: lui.$grey-80,
+      // ag-grid-community >=28
+      selected-row-background-color: lui.$polar,
+      header-foreground-color: lui.$surfie,
+      background-color: lui.$white,
+      odd-row-background-color: lui.$white,
+      header-background-color: lui.$white,
+      border-color: lui.$lily,
+      secondary-border-color: lui.$lily,
+      row-hover-color: lui.$lily,
+      font-family: (
+        "Open Sans",
+        system-ui,
+        sans-serif,
+      ),
+      font-size: 0.875rem !important,
+      borders: false,
+      borders-critical: true,
+      borders-secondary: false,
+    )
+  );
+
+  // Fix that when you click below checkbox it doesn't process a click
+  .ag-cell[col-id="selection"] {
+    display: flex;
+  }
+
+  // Fix that when you click below checkbox it doesn't process a click
+  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
+    height: auto;
+  }
+
+  .ag-row:last-of-type {
+    border-bottom: none;
+  }
+
+  // ag-grid-community 27.x.x needs this vs 28 using the selected-row-background-color above
+  // You can set a background _color_ with theme parameters, but for something like a gradient, you need to override CSS.
+  .ag-row-selected {
+    background-color: lui.$polar;
+  }
+
+  .ag-header-cell {
+    font-weight: 600;
+    padding: 7px 0 7px 8px;
+
+    .LuiIcon {
+      fill: lui.$surfie;
+    }
+  }
+
+  .ag-cell {
+    padding-left: 7px;
+    padding-right: 4px;
+    display: flex;
+    align-items: center;
+  }
+
+  .ag-cell-more {
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .ag-cell-wrap-text {
+    word-break: break-word;
+  }
+
+  .ag-cell-popup-editing,
+  .ag-selected-for-edit,
+  .ag-cell-inline-editing {
+    background: rgb(72 160 244 / 20%);
+    // These are important, it needs to override ag-grid to work
+    border: 3px solid #48a0f4 !important;
+    border-right: 3px solid #48a0f4 !important;
+  }
+
+  .ag-row .ag-cell-data-changed {
+    // ag-grid natively has !important on this style so we have to use it here :(
+    background-color: lightgoldenrodyellow !important;
+  }
+
+  .ag-center-cols-clipper {
+    // when using domLayout={"autoHeight"}, ag grid has a default min-height set to 150px so the !important is necessary here
+    min-height: 40px !important;
+  }
+
+  .ag-body-horizontal-scroll-viewport {
+    // It's set to scroll by default, but this causes issues with selecting the last row
+    overflow-x: auto;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./lui-overrides";
+@use "./Grid";

package/src/styles/lui-overrides.scss

@@ -0,0 +1,49 @@
+.step-ag-grid-react-menu {
+  /**
+   * Scrollbar (Only Chrome)
+   */
+  ::-webkit-scrollbar {
+    width: 20px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #d6dee1;
+    border-radius: 20px;
+    border: 6px solid transparent;
+    background-clip: content-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #a8bbbf;
+  }
+
+  .szh-menu__item,
+  .szh-menu__header {
+    padding: 0.375rem 1.5rem;
+  }
+
+  .LuiCheckboxInput {
+    margin-bottom: 0;
+  }
+
+  /** Free text input */
+  .free-text-input {
+    border: transparent;
+    outline: transparent;
+    line-height: 33px;
+    padding-left: 4px;
+  }
+
+  textarea.free-text-input {
+    font-weight: 400;
+    line-height: 1.5;
+    width: 300px;
+    height: 150px;
+    resize: none;
+    border: 0.06rem solid #beb9b4;
+  }
+}