@linzjs/step-ag-grid 1.5.4 → 2.0.1

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/UpdatingContext";
-export * from "./src/contexts/UpdatingContextProvider";
-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/contexts/UpdatingContextProvider.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from "react";
-interface UpdatingContextProviderProps {
-    children: ReactNode;
-}
-export declare type UpdatingContextStatus = Record<string, (number | string)[] | undefined>;
-export declare const UpdatingContextProvider: (props: UpdatingContextProviderProps) => JSX.Element;
-export {};

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

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import "./FormTest.scss";
-import { GridFormProps } from "@components/GridCell";
-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: GridFormProps<RowType>) => 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;
-  }
-}

package/src/react-menu3/style-utils.d.ts

@@ -1,110 +0,0 @@
-interface Base {
-  /**
-   * CSS selector for the element itself
-   */
-  name: string;
-}
-
-interface Directions {
-  /**
-   * Menu opens to the left
-   */
-  dirLeft: string;
-  /**
-   * Menu opens to the right
-   */
-  dirRight: string;
-  /**
-   * Menu opens to the top
-   */
-  dirTop: string;
-  /**
-   * Menu opens to the bottom
-   */
-  dirBottom: string;
-}
-
-export const menuSelector: Readonly<
-  Base &
-    Directions & {
-      /**
-       * Menu transitions from closed to open
-       */
-      stateOpening: string;
-      /**
-       * Menu is open
-       */
-      stateOpen: string;
-      /**
-       * Menu transitions from open to closed
-       */
-      stateClosing: string;
-      /**
-       * Menu is closed
-       */
-      stateClosed: string;
-    }
->;
-
-export const menuArrowSelector: Readonly<Base & Directions>;
-
-export const menuItemSelector: Readonly<
-  Base & {
-    /**
-     * Menu item is hovered and focused
-     */
-    hover: string;
-    /**
-     * Menu item is disabled
-     */
-    disabled: string;
-    /**
-     * Menu item is a URL link (when the `href` prop is set)
-     */
-    anchor: string;
-    /**
-     * Menu item is checked (only for a radio or checkbox item)
-     */
-    checked: string;
-    /**
-     * Present on a submenu item when it's submenu is open
-     */
-    open: string;
-    /**
-     * Present on a submenu item, which is set by the `label` prop on `SubMenu` component
-     */
-    submenu: string;
-    /**
-     * Present on a `FocusableItem`
-     */
-    focusable: string;
-    /**
-     * Menu item is a radio item
-     */
-    typeRadio: string;
-    /**
-     * Menu item is a checkbox item
-     */
-    typeCheckbox: string;
-  }
->;
-
-export const menuDividerSelector: Readonly<Base>;
-export const menuHeaderSelector: Readonly<Base>;
-export const menuGroupSelector: Readonly<Base>;
-export const radioGroupSelector: Readonly<Base>;
-export const submenuSelector: Readonly<Base>;
-
-export const menuContainerSelector: Readonly<
-  Base & {
-    itemTransition: string;
-  }
->;
-
-export const menuButtonSelector: Readonly<
-  Base & {
-    open: string;
-  }
->;
-
-export {};