@linzjs/step-ag-grid 2.0.0 → 2.1.0

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;
+  }
+}

package/src/styles/react-menu-customisations.scss

@@ -0,0 +1,135 @@
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/FontVars" as fonts;
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/SpacingVars" as spacing;
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Utilities" as *;
+
+/**
+ * Here is where we can override the styles of react-menu
+ */
+.step-ag-grid-react-menu.szh-menu {
+  z-index: 900;
+  color: colors.$base-type-color;
+  @include fonts.font-light();
+
+  div,
+  a[role="menuitem"] {
+    text-decoration: none;
+    color: colors.$base-type-color;
+    @include fonts.font-light();
+  }
+
+  li[role="menuitem"]:hover {
+    background-color: colors.$polar;
+  }
+
+  .szh-menu__header {
+    display: flex;
+    align-items: center;
+  }
+}
+
+/**
+ * Here are styles for lui select menu
+ */
+.lui-select-menu.szh-menu-container {
+  @include breakpoint(sm) {
+    position: absolute;
+  }
+}
+
+.lui-select-menu.szh-menu {
+  z-index: 900;
+  width: 92vw;
+  overflow-y: scroll;
+
+  @include breakpoint(sm) {
+    overflow: visible;
+    height: auto;
+    width: 240px;
+  }
+
+  color: colors.$base-type-color;
+  @include fonts.font-light();
+}
+
+.lui-select-menuItem {
+  padding: spacing.$unit-xs spacing.$unit-sm spacing.$unit-xs spacing.$unit-xs;
+  display: flex;
+  line-height: 1;
+  transition: all 0.2s ease-in-out;
+  fill: colors.$fuscous;
+
+  &:hover {
+    background-color: colors.$polar;
+  }
+}
+
+.lui-select-menuItem--error {
+  p {
+    color: colors.$error;
+  }
+
+  .LuiIcon {
+    fill: colors.$error;
+  }
+}
+
+.lui-select-menuItemText {
+  @include fonts.font-regular();
+  color: colors.$charcoal;
+  margin: 0;
+  padding-left: spacing.$unit-lg;
+
+  // if no icon, give it 4px to align with the group header
+  &--noPadding {
+    padding-left: spacing.$unit-xxs;
+  }
+}
+
+.lui-select-icon + .lui-select-menuItemText {
+  padding-left: spacing.$unit-xs;
+}
+
+.lui-select-menu-group {
+  height: 32px;
+  color: colors.$fuscous;
+  padding-left: 0.75rem;
+  text-transform: none;
+  @include fonts.font-semibold();
+}
+
+.lui-select-submenu {
+  flex: 1;
+
+  div[role="menuitem"] {
+    padding: spacing.$unit-xs spacing.$unit-xs spacing.$unit-xs 2.5rem;
+    text-decoration: none;
+    @include fonts.font-regular();
+    height: 40px;
+  }
+  // overwrite the hover color
+  .szh-menu__item--hover {
+    background-color: colors.$polar;
+  }
+}
+
+.lui-select-submenu-with-icon {
+  flex: 1;
+  // width: 200px;
+  div[role="menuitem"] {
+    padding-left: 0;
+    text-decoration: none;
+    @include fonts.font-regular();
+    height: 40px;
+  }
+}
+
+.lui-select-divider {
+  margin: 0.25rem;
+}
+
+
+.step-ag-grid-react-menu-sub-header-icon {
+  margin: spacing.$unit-xs;
+  fill: colors.$fuscous;
+}

package/dist/index.d.ts

@@ -1,38 +0,0 @@
-export * from "./src/react-menu3/index";
-export * from "./src/react-menu3/types";
-export * from "./src/contexts/GridUpdatingContext";
-export * from "./src/contexts/GridUpdatingContextProvider";
-export * from "./src/contexts/GridContext";
-export * from "./src/contexts/GridContextProvider";
-export type { GridBaseRow } from "./src/components/Grid";
-export { Grid } from "./src/components/Grid";
-export * from "./src/components/GridCell";
-export { GridIcon } from "./src/components/GridIcon";
-export { ComponentLoadingWrapper } from "./src/components/ComponentLoadingWrapper";
-export { GenericMultiEditCellClass } from "./src/components/GenericCellClass";
-export { GridLoadableCell } from "./src/components/GridLoadableCell";
-export { useGridPopoverHook } from "./src/components/GridPopoverHook";
-export { usePostSortRowsHook } from "./src/components/PostSortRowsHook";
-export { GridRendererGenericCell } from "./src/components/gridRender/GridRenderGenericCell";
-export { GridRenderPopoutMenuCell } from "./src/components/gridRender/GridRenderPopoutMenuCell";
-export { GridPopoutEditMultiSelect } from "./src/components/gridPopoverEdit/GridPopoutEditMultiSelect";
-export { GridPopoverMenu } from "./src/components/gridPopoverEdit/GridPopoverMenu";
-export { GridPopoverEditBearing } from "./src/components/gridPopoverEdit/GridPopoverEditBearing";
-export { GridPopoverEditBearingCorrection } from "./src/components/gridPopoverEdit/GridPopoverEditBearing";
-export { GridPopoverEditDropDown } from "./src/components/gridPopoverEdit/GridPopoverEditDropDown";
-export { GridPopoverMessage } from "./src/components/gridPopoverEdit/GridPopoverMessage";
-export { GridPopoverTextArea } from "./src/components/gridPopoverEdit/GridPopoverTextArea";
-export { GridPopoverTextInput } from "./src/components/gridPopoverEdit/GridPopoverTextInput";
-export { GridHeaderSelect } from "./src/components/gridHeader/GridHeaderSelect";
-export * from "./src/components/gridForm/GridFormEditBearing";
-export * from "./src/components/gridForm/GridFormDropDown";
-export * from "./src/components/gridForm/GridFormMessage";
-export * from "./src/components/gridForm/GridFormMultiSelect";
-export * from "./src/components/gridForm/GridFormPopoutMenu";
-export * from "./src/components/gridForm/GridFormTextArea";
-export * from "./src/components/gridForm/GridFormTextInput";
-export { TextAreaInput } from "./src/lui/TextAreaInput";
-export { TextInputFormatted } from "./src/lui/TextInputFormatted";
-export { GridSubComponentTextArea } from "./src/components/GridSubComponentTextArea";
-export * from "./src/utils/bearing";
-export * from "./src/utils/util";

package/dist/src/stories/components/FormTest.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import "./FormTest.scss";
-import { GridBaseRow } from "@components/Grid";
-export interface IFormTestRow {
-    id: number;
-    name: string;
-    nameType: string;
-    numba: string;
-    plan: string;
-    distance: number | null;
-}
-export declare const FormTest: <RowType extends GridBaseRow>(_props: any) => JSX.Element;

package/dist/src/stories/components/GridPopoutBearing.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-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 { GridProps } from "@components/Grid";
-declare const _default: ComponentMeta<(params: GridProps) => JSX.Element>;
-export default _default;
-export declare const Bearings: ComponentStory<(params: GridProps) => JSX.Element>;

package/dist/src/stories/components/GridPopoutEditDropDown.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-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 { GridProps } from "@components/Grid";
-declare const _default: ComponentMeta<(params: GridProps) => JSX.Element>;
-export default _default;
-export declare const EditDropdown: ComponentStory<(params: GridProps) => JSX.Element>;

package/dist/src/stories/components/GridPopoutEditGeneric.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-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 { GridProps } from "@components/Grid";
-declare const _default: ComponentMeta<(params: GridProps) => JSX.Element>;
-export default _default;
-export declare const EditGeneric: ComponentStory<(params: GridProps) => JSX.Element>;

package/dist/src/stories/components/GridPopoutEditGenericTextArea.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-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 { GridProps } from "@components/Grid";
-declare const _default: ComponentMeta<(params: GridProps) => JSX.Element>;
-export default _default;
-export declare const EditGenericTextArea: ComponentStory<(params: GridProps) => JSX.Element>;

package/dist/src/stories/components/GridPopoutEditMultiSelect.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-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 { GridProps } from "@components/Grid";
-declare const _default: ComponentMeta<(params: GridProps) => JSX.Element>;
-export default _default;
-export declare const EditMultiSelect: ComponentStory<(params: GridProps) => JSX.Element>;

package/dist/src/stories/components/GridReadOnly.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-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 { GridProps } from "@components/Grid";
-declare const _default: ComponentMeta<(params: GridProps) => JSX.Element>;
-export default _default;
-export declare const ReadOnly: ComponentStory<(params: GridProps) => JSX.Element>;

package/dist/src/stories/components/ReactMenu.stories.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-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";
-declare const _default: ComponentMeta<(params: import("@components/Grid").GridProps) => JSX.Element>;
-export default _default;
-export declare const ReactMenuControlled: ComponentStory<(params: import("@components/Grid").GridProps) => JSX.Element>;

package/src/components/gridRender/GridRenderGenericCell.scss

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