@linzjs/step-ag-grid 2.0.0 → 2.0.1

package/src/react-menu3/contexts/RadioGroupContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { EventHandler, RadioChangeEvent } from "../types";
+
+export const RadioGroupContext = createContext<{
+  value?: any;
+  name?: string;
+  onRadioChange?: EventHandler<RadioChangeEvent>;
+}>({});

package/src/react-menu3/contexts/SettingsContext.ts

@@ -0,0 +1,20 @@
+// FIXME hacking a default context in here is probably bad
+import { createContext, MutableRefObject, RefObject } from "react";
+import { ControlledMenuProps, MenuReposition, MenuViewScroll, RectElement, TransitionFieldType } from "../types";
+
+interface SettingsContextType extends ControlledMenuProps {
+  rootMenuRef?: MutableRefObject<any>;
+  rootAnchorRef?: MutableRefObject<any>;
+  scrollNodesRef: MutableRefObject<{ anchors?: Element[]; menu?: any }>;
+
+  initialMounted?: boolean;
+  unmountOnClose?: boolean;
+  transition?: TransitionFieldType;
+  transitionTimeout?: number;
+  boundingBoxRef?: RefObject<Element | RectElement>;
+  boundingBoxPadding?: string;
+  reposition?: MenuReposition;
+  viewScroll?: MenuViewScroll;
+}
+
+export const SettingsContext = createContext<SettingsContextType>({} as SettingsContextType);

package/src/react-menu3/hooks/useItemState.ts

@@ -1,6 +1,8 @@
 import { useRef, useContext, useEffect, FocusEvent, MutableRefObject } from "react";
-import { ItemSettingsContext, MenuListItemContext, HoverActionTypes } from "../utils";
+import { HoverActionTypes } from "../utils";
 import { useItemEffect } from "./useItemEffect";
+import { MenuListItemContext } from "../contexts/MenuListItemContext";
+import { ItemSettingsContext } from "../contexts/ItemSettingsContext";
 
 // This hook includes some common stateful logic in MenuItem and FocusableItem
 export const useItemState = (

package/src/react-menu3/index.ts

@@ -9,4 +9,3 @@ export { MenuDivider } from "./components/MenuDivider";
 export { MenuHeader } from "./components/MenuHeader";
 export { MenuGroup } from "./components/MenuGroup";
 export { MenuRadioGroup } from "./components/MenuRadioGroup";
-export { ClickEvent } from "./types";

package/src/react-menu3/styles/_var.scss

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 
 $color: #212529;
 $color-dark: #cad1d8;
@@ -6,9 +6,9 @@ $color-disabled: #aaa;
 $color-disabled-dark: #666;
 
 $header-color: #888;
-$divider-color: rgba(0, 0, 0, 0.12);
+$divider-color: rgb(0 0 0 / 12%);
 $divider-color-dark: #3a3a3a;
-$border-color: rgba(0, 0, 0, 0.1);
+$border-color: rgb(0 0 0 / 10%);
 $border-color-dark: #333;
 
 $background-color: #fff;
@@ -17,4 +17,4 @@ $background-color-hover: #ebebeb;
 $background-color-hover-dark: #31363c;
 
 $arrow-size: 0.75rem;
-$arrow-pos: -(math.div($arrow-size, 2));
+$arrow-pos: (math.div($arrow-size, 2));

package/src/react-menu3/styles/core.scss

@@ -1,9 +1,9 @@
-@use 'var';
-@use 'mixins';
+@use "var";
+@use "mixins";
 
 .szh-menu {
-  @include mixins.reset-list;
-  @include mixins.remove-focus;
+  @include mixins.reset-list ();
+  @include mixins.remove-focus ();
   box-sizing: border-box;
   width: max-content;
   z-index: 100;
@@ -42,7 +42,7 @@
   }
 
   &__item {
-    @include mixins.remove-focus;
+    @include mixins.remove-focus ();
     cursor: pointer;
 
     &--hover {
@@ -65,7 +65,7 @@
   }
 
   &__radio-group {
-    @include mixins.reset-list;
+    @include mixins.reset-list ();
   }
 
   &__divider {

package/src/react-menu3/styles/index.scss

@@ -1,12 +1,12 @@
-@use 'var';
-@use 'core';
+@use "var";
+@use "core";
 
 .szh-menu {
   user-select: none;
   color: var.$color;
   border: none;
   border-radius: 0.25rem;
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 7px rgb(0 0 0 / 13.3%), 0 0.6px 2px rgb(0 0 0 / 10%);
   min-width: 10rem;
   padding: 0.5rem 0;
 
@@ -26,8 +26,9 @@
 
     &--type-radio {
       padding-left: 2.2rem;
+
       &::before {
-        content: '\25cb';
+        content: "\25cb";
         position: absolute;
         left: 0.8rem;
         top: 0.55rem;
@@ -36,11 +37,12 @@
     }
 
     &--type-radio#{&}--checked::before {
-      content: '\25cf';
+      content: "\25cf";
     }
 
     &--type-checkbox {
       padding-left: 2.2rem;
+
       &::before {
         position: absolute;
         left: 0.8rem;
@@ -48,14 +50,15 @@
     }
 
     &--type-checkbox#{&}--checked::before {
-      content: '\2714';
+      content: "\2714";
     }
   }
 
   &__submenu > .szh-menu__item {
     padding-right: 2.5rem;
+
     &::after {
-      content: '\276f';
+      content: "\276f";
       position: absolute;
       right: 1rem;
     }

package/src/react-menu3/styles/theme-dark.scss

@@ -1,10 +1,10 @@
-@use 'var';
+@use "var";
 
 .szh-menu-container--theme-dark .szh-menu {
   color: var.$color-dark;
   background-color: var.$background-color-dark;
   border: 1px solid var.$border-color-dark;
-  box-shadow: 0 2px 9px 3px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 9px 3px rgb(0 0 0 / 25%);
 
   &__arrow {
     background-color: var.$background-color-dark;
@@ -16,9 +16,11 @@
     &--hover {
       background-color: var.$background-color-hover-dark;
     }
+
     &--focusable {
       background-color: inherit;
     }
+
     &--disabled {
       color: var.$color-disabled-dark;
     }

package/src/react-menu3/styles/transitions/slide.scss

@@ -1,13 +1,13 @@
-@use 'sass:list';
-@use 'sass:map';
+@use "sass:list";
+@use "sass:map";
 
-$menu: 'szh-menu';
+$menu: "szh-menu";
 $duration: 0.15s;
 $directions: (
-  'left': 'X' 1,
-  'right': 'X' -1,
-  'top': 'Y' 1,
-  'bottom': 'Y' -1
+  "left": "X" 1,
+  "right": "X" -1,
+  "top": "Y" 1,
+  "bottom": "Y" -1,
 );
 
 @mixin animation($name, $dir) {
@@ -43,5 +43,5 @@ $directions: (
 }
 
 @each $dir in map.keys($directions) {
-  @include animation('slide', $dir);
+  @include animation("slide", $dir);
 }

package/src/react-menu3/utils/constants.ts

@@ -1,17 +1,4 @@
-import { createContext, MutableRefObject, RefObject } from "react";
-import {
-  ControlledMenuProps,
-  EventHandler,
-  FocusPosition,
-  MenuDirection,
-  MenuOverflow,
-  MenuReposition,
-  MenuState,
-  MenuViewScroll,
-  RectElement,
-  TransitionFieldType,
-} from "../types";
-import { RadioChangeEvent } from "../components/MenuRadioGroup";
+import { MenuState } from "../types";
 
 export const menuContainerClass = "szh-menu-container";
 export const menuClass = "szh-menu";
@@ -24,30 +11,6 @@ export const menuGroupClass = "group";
 export const subMenuClass = "submenu";
 export const radioGroupClass = "radio-group";
 
-export const HoverItemContext = createContext(undefined);
-
-interface MenuListItemContextType {
-  isParentOpen?: boolean;
-  isSubmenuOpen?: boolean;
-  dispatch: (actionType: number, item: any, nextIndex: FocusPosition) => void;
-  updateItems: (item: any, isMounted?: boolean) => void;
-  setOpenSubmenuCount: (fn: (count: number) => number) => void;
-}
-
-export const MenuListItemContext = createContext<MenuListItemContextType>({
-  dispatch: () => {},
-  updateItems: () => {},
-  setOpenSubmenuCount: () => 0,
-});
-
-export const MenuListContext = createContext<{
-  overflow?: MenuOverflow;
-  overflowAmt?: number;
-  parentMenuRef?: MutableRefObject<any>;
-  parentDir?: MenuDirection;
-  reposSubmenu?: boolean;
-}>({});
-
 export interface RMEvent {
   value: any;
   syntheticEvent: any;
@@ -56,42 +19,6 @@ export interface RMEvent {
   key?: string;
 }
 
-export const EventHandlersContext = createContext<{
-  handleClose?: () => void;
-  handleClick: (event: RMEvent, checked: boolean) => void;
-}>({
-  handleClick: () => {},
-});
-
-export const RadioGroupContext = createContext<{
-  value?: any;
-  name?: string;
-  onRadioChange?: EventHandler<RadioChangeEvent>;
-}>({});
-
-interface SettingsContextType extends ControlledMenuProps {
-  rootMenuRef?: MutableRefObject<any>;
-  rootAnchorRef?: MutableRefObject<any>;
-  scrollNodesRef: MutableRefObject<{ anchors?: Element[]; menu?: any }>;
-
-  initialMounted?: boolean;
-  unmountOnClose?: boolean;
-  transition?: TransitionFieldType;
-  transitionTimeout?: number;
-  boundingBoxRef?: RefObject<Element | RectElement>;
-  boundingBoxPadding?: string;
-  reposition?: MenuReposition;
-  viewScroll?: MenuViewScroll;
-}
-
-// FIXME hacking a default context in here is probably bad
-export const SettingsContext = createContext<SettingsContextType>({} as SettingsContextType);
-
-export const ItemSettingsContext = createContext<{ submenuCloseDelay: number; submenuOpenDelay: number }>({
-  submenuOpenDelay: 0,
-  submenuCloseDelay: 0,
-});
-
 export const Keys = Object.freeze({
   ENTER: "Enter",
   ESC: "Escape",

package/src/react-menu3/utils/withHovering.tsx

@@ -1,5 +1,5 @@
 import { memo, forwardRef, useContext, useRef, MutableRefObject } from "react";
-import { HoverItemContext } from "./constants";
+import { HoverItemContext } from "../contexts/HoverItemContext";
 
 export interface withHoveringResultProps {
   isHovering?: boolean;

package/src/stories/components/FormTest.scss

@@ -1,4 +1,3 @@
-
 .FormTest {
   display: inline-flex;
   flex-wrap: nowrap;
@@ -7,4 +6,4 @@
 
 .FormTest-textInput {
   width: 100px;
-}
+}

package/src/stories/components/FormTest.tsx

@@ -3,7 +3,7 @@ import "./FormTest.scss";
 import { useCallback, useState } from "react";
 import { LuiTextInput } from "@linzjs/lui";
 import { wait } from "@utils/util";
-import { CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 import { useGridPopoverHook } from "@components/GridPopoverHook";
 import { GridBaseRow } from "@components/Grid";
 
@@ -16,7 +16,7 @@ export interface IFormTestRow {
   distance: number | null;
 }
 
-export const FormTest = <RowType extends GridBaseRow>(_props: any): JSX.Element => {
+export const FormTest = <RowType extends GridBaseRow>(_props: CellEditorCommon): JSX.Element => {
   const props = _props as CellParams<RowType>;
   const [v1, v2, ...v3] = props.value.split(" ");
 
@@ -35,7 +35,7 @@ export const FormTest = <RowType extends GridBaseRow>(_props: any): JSX.Element
     // Close form
     return true;
   }, [nameType, numba, plan, props.selectedRows]);
-  const { popoverWrapper } = useGridPopoverHook({ save });
+  const { popoverWrapper } = useGridPopoverHook({ className: _props.className, save });
 
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>

package/src/stories/components/GridPopoutBearing.stories.tsx

@@ -1,6 +1,7 @@
 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 { useMemo, useState } from "react";

package/src/stories/components/GridPopoutEditDropDown.stories.tsx

@@ -1,6 +1,7 @@
 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 { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
@@ -92,6 +93,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
         {
           multiEdit: false,
           editorParams: {
+            className: "Xxx",
             options: ["Architect", "Developer", "Product Owner", "Scrum Master", "Tester", MenuSeparator, "(other)"],
           },
         },
@@ -206,7 +208,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
         {
           multiEdit: true,
           editorParams: {
-            maxRows: 2,
+            className: "GridPopoverEditDropDown-containerSmall",
             filtered: "local",
             filterPlaceholder: "Filter this",
             options: Array.from(Array(30).keys()).map((o) => {

package/src/stories/components/GridPopoutEditGeneric.stories.tsx

@@ -1,6 +1,7 @@
 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 { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
@@ -49,9 +50,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         {
           multiEdit: true,
           editor: FormTest,
-          editorParams: {
-            a: 4,
-          },
+          editorParams: {},
         },
       ),
     ],

package/src/stories/components/GridPopoutEditGenericTextArea.stories.tsx

@@ -1,6 +1,7 @@
 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 { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";

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

@@ -1,6 +1,7 @@
 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 { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";

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

@@ -1,6 +1,7 @@
 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 { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
@@ -9,7 +10,7 @@ import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
 import { wait } from "@utils/util";
 import { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
-import { CellParams, ColDefT, GridCell } from "@components/GridCell";
+import { ColDefT, GridCell } from "@components/GridCell";
 import { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
 
 export default {
@@ -76,17 +77,14 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         {
           headerName: "Popout message",
           cellRenderer: () => <>Click me!</>,
-          cellRendererParams: {
-            warning: () => "x",
-          },
         },
         {
+          multiEdit: true,
           editorParams: {
-            message: async (formParams: CellParams<ITestRow>): Promise<string> => {
+            message: async (formParams): Promise<string> => {
               await wait(1000);
               return `There are ${formParams.selectedRows.length} row(s) selected`;
             },
-            multiEdit: true,
           },
         },
       ),
@@ -151,12 +149,11 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  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;
+}