@linzjs/step-ag-grid 2.0.0 → 2.1.0

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

@@ -0,0 +1,10 @@
+import { createContext, MutableRefObject } from "react";
+import { MenuDirection, MenuOverflow } from "../types";
+
+export const MenuListContext = createContext<{
+  overflow?: MenuOverflow;
+  overflowAmt?: number;
+  parentMenuRef?: MutableRefObject<any>;
+  parentDir?: MenuDirection;
+  reposSubmenu?: boolean;
+}>({});

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

@@ -0,0 +1,16 @@
+import { FocusPosition } from "../types";
+import { createContext } from "react";
+
+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,
+});

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";
@@ -18,8 +19,8 @@ export default {
   title: "Components / Grids",
   component: Grid,
   args: {
-    externalSelectedItems: [],
-    setExternalSelectedItems: () => {},
+    quickFilterValue: "",
+    selectable: true,
   },
   decorators: [
     (Story) => (
@@ -95,7 +96,6 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   return (
     <Grid
       {...props}
-      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}

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";
@@ -16,8 +17,8 @@ export default {
   title: "Components / Grids",
   component: Grid,
   args: {
-    externalSelectedItems: [],
-    setExternalSelectedItems: () => {},
+    quickFilterValue: "",
+    selectable: true,
   },
   decorators: [
     (Story) => (
@@ -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) => {
@@ -270,7 +272,6 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
   return (
     <Grid
       {...props}
-      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}

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";
@@ -14,8 +15,8 @@ export default {
   title: "Components / Grids",
   component: Grid,
   args: {
-    externalSelectedItems: [],
-    setExternalSelectedItems: () => {},
+    quickFilterValue: "",
+    selectable: true,
   },
   decorators: [
     (Story) => (
@@ -49,9 +50,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         {
           multiEdit: true,
           editor: FormTest,
-          editorParams: {
-            a: 4,
-          },
+          editorParams: {},
         },
       ),
     ],
@@ -70,7 +69,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
   return (
     <Grid
       {...props}
-      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}

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";
@@ -17,8 +18,8 @@ export default {
   title: "Components / Grids",
   component: Grid,
   args: {
-    externalSelectedItems: [],
-    setExternalSelectedItems: () => {},
+    quickFilterValue: "",
+    selectable: true,
   },
   decorators: [
     (Story) => (
@@ -138,7 +139,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
   return (
     <Grid
       {...props}
-      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}

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";
@@ -18,8 +19,8 @@ export default {
   title: "Components / Grids",
   component: Grid,
   args: {
-    externalSelectedItems: [],
-    setExternalSelectedItems: () => {},
+    quickFilterValue: "",
+    selectable: true,
   },
   decorators: [
     (Story) => (
@@ -130,7 +131,6 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
   return (
     <Grid
       {...props}
-      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}

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,15 +10,17 @@ 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 {
   title: "Components / Grids",
   component: Grid,
   args: {
-    externalSelectedItems: [],
-    setExternalSelectedItems: () => {},
+    quickFilter: true,
+    quickFilterValue: "",
+    quickFilterPlaceholder: "Quick filter...",
+    selectable: false,
   },
   decorators: [
     (Story) => (
@@ -76,17 +79,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,25 +151,21 @@ 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" },
+    ],
     [],
   );
 
   return (
     <Grid
       {...props}
-      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
-      quickFilter={true}
-      quickFilterPlaceholder={"Quick filter..."}
     />
   );
 };

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