@linzjs/step-ag-grid 2.0.0 → 2.0.1

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

package/src/lui-overrides.scss

@@ -1,163 +0,0 @@
-/**
- * Lui Table additions, to be brought into Lui
- */
-
-.lui-base-table.lui-table-bold-headings th {
-  font-weight: 600;
-}
-
-.lui-base-table.lui-table-nowrap-headings th {
-  white-space: nowrap;
-}
-
-.lui-base-table.lui-compact-table th,
-.lui-base-table.lui-compact-table td {
-  padding-top: 7px;
-  padding-bottom: 7px;
-  font-size: 0.875rem;
-}
-
-.lui-base-table.lui-compact-table th.lui-table-heading-dark,
-.lui-base-table.lui-compact-table td.lui-table-heading-dark {
-  background-color: #55504b; /* $grey-60 */
-  color: white;
-}
-
-.lui-base-table.lui-table-no-top-line thead {
-  border-top: none;
-}
-
-/**
- * Lui Button additions, to be brought into Lui
- */
-
-.lui-button.lui-button-toolbar,
-a.lui-button.lui-button-toolbar {
-  border-color: transparent;
-  padding: 4px;
-  line-height: 12px;
-  margin: 2px;
-}
-
-.lui-compact-table .lui-bearing-input-wrapper .lui-bearing-display {
-  line-height: 25px !important;
-}
-
-/* Until LUI fix comes (For different font weights) */
-input,
-select .survey-information {
-  font-weight: 400 !important;
-}
-
-.table-select input {
-  line-height: 25px !important;
-}
-
-.lui-standard-form .lui-compact-table .lui-input-error input {
-  border-left-width: 28px !important;
-}
-
-.lui-standard-form .lui-compact-table .lui-input-error .lui-form-status-icon {
-  font-size: 1rem;
-}
-
-/* To be replaced by Darrell's changes */
-.lui-standard-form .temporary-tighter-form-style label {
-  margin-top: 20px !important;
-}
-
-/** Survey map header */
-.lui-header.lui-header-white::after {
-  height: 2px;
-  background: linear-gradient(270deg, #bbb 1%, #ccc 100%);
-}
-
-/** Context Menu for the tables */
-.edit-cell {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  border: none;
-  text-align: left;
-}
-
-/** Free text input */
-
-.lui-menu .free-text-input {
-  border: transparent;
-  outline: transparent;
-  line-height: 33px;
-  padding-left: 4px;
-}
-
-.lui-menu textarea.free-text-input {
-  font-weight: 400;
-  line-height: 1.5;
-  width: 300px;
-  height: 150px;
-  resize: none;
-  border: 0.06rem solid #beb9b4;
-}
-
-.LuiCheckboxInput:focus {
-  border: 1px solid black;
-}
-
-.LuiCheckboxInput-group:focus {
-  border: 1px solid black;
-}
-
-/* Bounding box in a popout - any menus will be placed in the space of this div */
-div.menu-bounding-box {
-  position: absolute;
-  height: 100%;
-  width: 95%;
-  z-index: -9999;
-}
-
-.lui-button-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.lui-button.lui-button-lg.lui-button-icon .LuiIcon.LuiIcon--sm {
-  margin-bottom: 0;
-}
-
-.lui-button.lui-button-med.lui-button-icon .LuiIcon.LuiIcon--md {
-  margin-bottom: -1px;
-}
-
-.lui-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 {
-    padding: 2px 1rem;
-  }
-
-  .LuiCheckboxInput {
-    margin-bottom: 0;
-  }
-}