@linzjs/step-ag-grid 30.4.3 → 31.1.1

package/src/lui/TextInputFormatted.scss

@@ -1,13 +1,13 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
-
-.LuiTextInput.GridLuiTextInput {
-  margin-bottom: 0;
-}
-
-.LuiTextInput-formatted {
-  position: absolute;
-  right: 14px;
-  top: 0;
-  line-height: 48px;
-  color: lui.$fuscous;
-}
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
+
+.LuiTextInput.GridLuiTextInput {
+  margin-bottom: 0;
+}
+
+.LuiTextInput-formatted {
+  position: absolute;
+  right: 14px;
+  top: 0;
+  line-height: 48px;
+  color: lui.$fuscous;
+}

package/src/lui/TextInputFormatted.tsx

@@ -36,7 +36,7 @@ export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
           className={'LuiTextInput-input'}
           onMouseEnter={(e) => {
             e.currentTarget.focus();
-            props.onMouseEnter && props.onMouseEnter(e);
+            props.onMouseEnter?.(e);
           }}
           data-allowtabtosave={props.allowTabToSave}
         />

package/src/react-menu3/README.md

@@ -1,67 +1,66 @@
-# React-Menu
-
-> This is a fork of @szhsin/react-menu. v3.2.0
-
-> An accessible and keyboard-friendly React menu library.
-
-**[Live examples and docs](https://szhsin.github.io/react-menu/)**
-
-## Features
-
-- React menu components for easy and fast web development.
-- Unlimited levels of submenu.
-- Supports dropdown or context menu.
-- Supports radio and checkbox menu items.
-- Flexible menu positioning.
-- Comprehensive keyboard interactions.
-- Unstyled components and easy [customisation](https://szhsin.github.io/react-menu/#styling).
-- [Optimal level support](https://github.com/reactwg/react-18/discussions/70) (level 3) of **React 18** concurrent rendering.
-- Works in major browsers without polyfills.
-- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) compliant.
-
-## Install
-
-with npm
-
-```bash
-npm install @szhsin/react-menu
-```
-
-or with Yarn
-
-```bash
-yarn add @szhsin/react-menu
-```
-
-## Usage
-
-```jsx
-import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu";
-
-export default function App() {
-  return (
-    <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
-      <MenuItem>New File</MenuItem>
-      <MenuItem>Save</MenuItem>
-      <SubMenu label="Edit">
-        <MenuItem>Cut</MenuItem>
-        <MenuItem>Copy</MenuItem>
-        <MenuItem>Paste</MenuItem>
-      </SubMenu>
-      <MenuItem>Print...</MenuItem>
-    </Menu>
-  );
-}
-```
-
-**[Edit on CodeSandbox](https://codesandbox.io/s/react-menu-starter-3ez3c)**<br>  
-**[Visit more examples and docs](https://szhsin.github.io/react-menu/)**<br><br>
-[Migration from v2 to v3](https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3)<br>
-[Migration from v1 to v2](https://github.com/szhsin/react-menu/wiki/Migration-from-v1-to-v2)
-
-_Please note that React-Menu v3 requires React 16.14.0 or higher. If you are not able to upgrade React, you could install v2/v1 which requires React 16.8.0._
-
-## License
-
-[MIT](https://github.com/szhsin/react-menu/blob/master/LICENSE) Licensed.
-
+# React-Menu
+
+> This is a fork of @szhsin/react-menu. v3.2.0
+
+> An accessible and keyboard-friendly React menu library.
+
+**[Live examples and docs](https://szhsin.github.io/react-menu/)**
+
+## Features
+
+- React menu components for easy and fast web development.
+- Unlimited levels of submenu.
+- Supports dropdown or context menu.
+- Supports radio and checkbox menu items.
+- Flexible menu positioning.
+- Comprehensive keyboard interactions.
+- Unstyled components and easy [customisation](https://szhsin.github.io/react-menu/#styling).
+- [Optimal level support](https://github.com/reactwg/react-18/discussions/70) (level 3) of **React 18** concurrent rendering.
+- Works in major browsers without polyfills.
+- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) compliant.
+
+## Install
+
+with npm
+
+```bash
+npm install @szhsin/react-menu
+```
+
+or with Yarn
+
+```bash
+yarn add @szhsin/react-menu
+```
+
+## Usage
+
+```jsx
+import { Menu, MenuItem, MenuButton, SubMenu } from '@szhsin/react-menu';
+
+export default function App() {
+  return (
+    <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
+      <MenuItem>New File</MenuItem>
+      <MenuItem>Save</MenuItem>
+      <SubMenu label="Edit">
+        <MenuItem>Cut</MenuItem>
+        <MenuItem>Copy</MenuItem>
+        <MenuItem>Paste</MenuItem>
+      </SubMenu>
+      <MenuItem>Print...</MenuItem>
+    </Menu>
+  );
+}
+```
+
+**[Edit on CodeSandbox](https://codesandbox.io/s/react-menu-starter-3ez3c)**<br>  
+**[Visit more examples and docs](https://szhsin.github.io/react-menu/)**<br><br>
+[Migration from v2 to v3](https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3)<br>
+[Migration from v1 to v2](https://github.com/szhsin/react-menu/wiki/Migration-from-v1-to-v2)
+
+_Please note that React-Menu v3 requires React 16.14.0 or higher. If you are not able to upgrade React, you could install v2/v1 which requires React 16.8.0._
+
+## License
+
+[MIT](https://github.com/szhsin/react-menu/blob/master/LICENSE) Licensed.

package/src/react-menu3/components/ControlledMenu.tsx

@@ -173,7 +173,7 @@ export const ControlledMenuFr = (
           if (isDown) {
             lastTabDownEl.current = activeElement;
           } else {
-            lastTabDownEl.current == activeElement && invokeSave(tabDirection);
+            if (lastTabDownEl.current == activeElement) invokeSave(tabDirection);
           }
         }
       }
@@ -191,7 +191,7 @@ export const ControlledMenuFr = (
               if (isDown) {
                 lastEnterDownEl.current = activeElement;
               } else {
-                lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
+                if (lastEnterDownEl.current == activeElement) invokeSave(CloseReason.CLICK);
               }
             }
           }

package/src/react-menu3/components/Menu.tsx

@@ -42,7 +42,7 @@ export function MenuFr(
   const handleClose = useCallback(
     (e: MenuCloseEvent) => {
       toggleMenu(false);
-      if (e.key) buttonRef.current && buttonRef.current.focus();
+      if (e.key) buttonRef?.current?.focus();
     },
     [toggleMenu],
   );

package/src/react-menu3/components/MenuItem.tsx

@@ -141,7 +141,7 @@ const MenuItemFr = ({
         e.preventDefault();
         e.stopPropagation();
         if (isAnchor) {
-          menuItemRef?.current && menuItemRef.current.click();
+          menuItemRef?.current.click();
         } else {
           handleClick(e);
         }

package/src/react-menu3/components/MenuList.tsx

@@ -175,7 +175,9 @@ export const MenuList = ({
       setOverflowData(undefined); // reset overflowData after closing
     }
 
-    endTransition && safeCall(endTransition);
+    if (endTransition) {
+      safeCall(endTransition);
+    }
   };
 
   const handlePosition = useCallback(
@@ -455,7 +457,11 @@ export const MenuList = ({
   let maxHeight: number | undefined;
   let overflowAmt: number | undefined;
   if (overflowData) {
-    setDownOverflow ? (overflowAmt = overflowData.overflowAmt) : (maxHeight = overflowData.height);
+    if (setDownOverflow) {
+      overflowAmt = overflowData.overflowAmt;
+    } else {
+      maxHeight = overflowData.height;
+    }
   }
 
   const listContext = useMemo(

package/src/react-menu3/components/SubMenu.tsx

@@ -194,7 +194,7 @@ export const SubMenuFr = ({
   const openMenu = (...args: any[]) => {
     stopTimer();
     setHover();
-    !isDisabled && _openMenu(...args);
+    if (!isDisabled) _openMenu(...args);
   };
 
   const setHover = () => !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
@@ -226,7 +226,7 @@ export const SubMenuFr = ({
       // LEFT key is bubbled up from submenu items
       case Keys.LEFT:
         if (isOpen) {
-          menuItemRef?.current && menuItemRef.current.focus();
+          menuItemRef?.current.focus();
           toggleMenu(false);
           handled = true;
         }
@@ -251,7 +251,7 @@ export const SubMenuFr = ({
       case Keys.ENTER:
       case Keys.SPACE:
       case Keys.RIGHT:
-        openTrigger !== 'none' && openMenu(FocusPositions.FIRST);
+        if (openTrigger !== 'none') openMenu(FocusPositions.FIRST);
         break;
     }
   };
@@ -264,7 +264,7 @@ export const SubMenuFr = ({
     // Don't set focus when parent menu is closed, otherwise focus will be lost
     // and onBlur event will be fired with relatedTarget setting as null.
     if (isHovering && isParentOpen) {
-      menuItemRef?.current && menuItemRef.current.focus();
+      menuItemRef?.current?.focus();
     } else {
       toggleMenu(false);
     }
@@ -276,11 +276,11 @@ export const SubMenuFr = ({
 
   useImperativeHandle(instanceRef, () => ({
     openMenu: (...args) => {
-      isParentOpen && openMenu(...args);
+      if (isParentOpen) openMenu(...args);
     },
     closeMenu: () => {
       if (isOpen) {
-        menuItemRef?.current && menuItemRef.current.focus();
+        menuItemRef?.current?.focus();
         toggleMenu(false);
       }
     },

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

@@ -18,11 +18,12 @@ export const useBEM = ({ block, element, modifiers, className }: useBemProps) =>
     const blockElement = element ? `${block}__${element}` : block;
 
     let classString = blockElement;
-    modifiers &&
+    if (modifiers) {
       Object.keys(modifiers).forEach((name) => {
         const value = modifiers[name];
         if (value) classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
       });
+    }
 
     let expandedClassName = typeof className === 'function' ? className(modifiers) : className;
     if (typeof expandedClassName === 'string') {

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

@@ -17,11 +17,11 @@ export const useItemState = (
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const setHover = () => {
-    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
+    if (!isHovering && !isDisabled) dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
   };
 
   const unsetHover = () => {
-    !isDisabled && dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
+    if (!isDisabled) dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
   };
 
   const onBlur = (e: FocusEvent) => {
@@ -48,7 +48,9 @@ export const useItemState = (
       timeoutId.current = undefined;
     }
 
-    !keepHover && unsetHover();
+    if (!keepHover) {
+      unsetHover();
+    }
   };
 
   useItemEffect(isDisabled, menuItemRef, updateItems);
@@ -57,7 +59,9 @@ export const useItemState = (
     // Don't set focus when parent menu is closed, otherwise focus will be lost
     // and onBlur event will be fired with relatedTarget setting as null.
     if (isHovering && isParentOpen) {
-      focusRef?.current && focusRef.current.focus();
+      if (focusRef?.current) {
+        focusRef.current.focus();
+      }
     }
   }, [focusRef, isHovering, isParentOpen]);
 

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

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 $color: #212529;
 $color-dark: #cad1d8;

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,14 @@
-@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 rgb(0 0 0 / 13.3%), 0 0.6px 2px rgb(0 0 0 / 10%);
+  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;
 
@@ -28,7 +30,7 @@
       padding-left: 2.2rem;
 
       &::before {
-        content: "\25cb";
+        content: '\25cb';
         position: absolute;
         left: 0.8rem;
         top: 0.55rem;
@@ -37,7 +39,7 @@
     }
 
     &--type-radio#{&}--checked::before {
-      content: "\25cf";
+      content: '\25cf';
     }
 
     &--type-checkbox {
@@ -50,7 +52,7 @@
     }
 
     &--type-checkbox#{&}--checked::before {
-      content: "\2714";
+      content: '\2714';
     }
   }
 
@@ -58,7 +60,7 @@
     padding-right: 2.5rem;
 
     &::after {
-      content: "\276f";
+      content: '\276f';
       position: absolute;
       right: 1rem;
     }
@@ -72,6 +74,7 @@
   }
 }
 
-.react-menu-inline-test .szh-menu-container, .react-menu-inline-test .szh-menu {
+.react-menu-inline-test .szh-menu-container,
+.react-menu-inline-test .szh-menu {
   position: static !important;
 }

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

@@ -1,4 +1,4 @@
-@use "var";
+@use 'var';
 
 .szh-menu-container--theme-dark .szh-menu {
   color: var.$color-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/utils.ts

@@ -34,7 +34,7 @@ export const defineName = (
 ) => Object.defineProperty(component, internalKey, { value: name });
 
 export const mergeProps = (target: any, source: any) => {
-  source &&
+  if (source) {
     Object.keys(source).forEach((key) => {
       const targetProp = target[key];
       const sourceProp = source[key];
@@ -47,6 +47,7 @@ export const mergeProps = (target: any, source: any) => {
         target[key] = sourceProp;
       }
     });
+  }
 
   return target;
 };

package/src/stories/grid/FormTest.scss

@@ -1,13 +1,13 @@
-.FormTest {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  gap: 12px;
-}
-
-.FormTest .LuiTextInput {
-  margin-bottom: 0;
-}
-
-.FormTest-textInput {
-  width: 100px;
-}
+.FormTest {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+}
+
+.FormTest .LuiTextInput {
+  margin-bottom: 0;
+}
+
+.FormTest-textInput {
+  width: 100px;
+}

package/src/stories/grid/GridInlineText.stories.tsx

@@ -174,7 +174,7 @@ const GridInlineTextTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridP
 export const _EditInlineText = GridInlineTextTemplate.bind({});
 _EditInlineText.play = waitForGridReady;
 
-const _InlineText_ChangeEventsTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+const InlineText_ChangeEventsTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const [isDirty, setIsDirty] = useState(false);
   const [rowData, setRowData] = useState<IFormTestRow[]>(initialRows);
@@ -251,7 +251,7 @@ const _InlineText_ChangeEventsTemplate: StoryFn<typeof Grid<IFormTestRow>> = (pr
   );
 };
 
-export const _InlineText_ChangeEvents = _InlineText_ChangeEventsTemplate.bind({});
+export const _InlineText_ChangeEvents = InlineText_ChangeEventsTemplate.bind({});
 _InlineText_ChangeEvents.play = async (context) => {
   await waitForGridReady(context);
   const canvas = within(context.canvasElement);

package/src/stories/grid/GridSorting.stories.tsx

@@ -137,9 +137,13 @@ Sorting.play = async (context) => {
     if (colId !== null) {
       await clickColumnHeaderToSort(colId, canvasElement);
       await wait(500);
-      expected && expect(gridColumnValues(colId, canvasElement)).toEqual(expected);
+      if (expected) {
+        expect(gridColumnValues(colId, canvasElement)).toEqual(expected);
+      }
+    }
+    if (idExpected) {
+      expect(gridColumnValues('id', canvasElement)).toEqual(idExpected);
     }
-    idExpected && expect(gridColumnValues('id', canvasElement)).toEqual(idExpected);
   };
 
   // Default sort order

package/src/stories/grid/GridViewSelectableList.stories.tsx

@@ -0,0 +1,121 @@
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { useMemo, useState } from 'react';
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from '../..';
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  height: string;
+  desc: string;
+  dd: string;
+}
+
+const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell<ITestRow, ITestRow['id']>({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+        resizable: false,
+        lockPosition: 'left',
+        cellRenderer: ({ value }) => <a href={'#'}>{value}</a>,
+      }),
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
+        resizable: false,
+        lockPosition: 'left',
+        cellRendererParams: {
+          warning: ({ value }) => value === 'Tester' && 'Testers are testing',
+          info: ({ value }) => value === 'Developer' && 'Developers are awesome',
+        },
+      }),
+      GridCell({
+        field: 'desc',
+        headerName: 'Description',
+        resizable: false,
+        lockPosition: 'left',
+      }),
+      GridCell({
+        field: 'age',
+        headerName: 'Age',
+        resizable: false,
+        lockPosition: 'left',
+      }),
+      GridCell({
+        field: 'height',
+        headerName: 'Height',
+        resizable: false,
+        lockPosition: 'left',
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>([
+    { id: 1000, position: 'Tester', age: 30, height: `6'4"`, desc: 'Tests application', dd: '1' },
+    { id: 1001, position: 'Developer', age: 12, height: `5'3"`, desc: 'Develops application', dd: '2' },
+    { id: 1002, position: 'Manager', age: 65, height: `5'9"`, desc: 'Manages', dd: '3' },
+  ]);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={'readonly'}
+        {...props}
+        selectable={true}
+        rowSelection={'multiple'}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        sizeColumns={'fit'}
+        theme={'ag-theme-step-view-list-default'}
+        contextMenuSelectRow={false}
+        suppressCellFocus={true}
+      />
+    </GridWrapper>
+  );
+};
+export const SelectableListViewGrid = GridReadOnlyTemplate.bind({});