@linzjs/step-ag-grid 30.4.4 → 31.1.1

package/src/styles/GridFormInlineTextInput.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .GridFormInlineTextInput {
   height: 100%;
@@ -10,14 +10,14 @@
 
 .GridFormInlineTextInput > input {
   display: block;
-  left:0;
-  top:0;
-  right:0;
-  bottom:0;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
   position: absolute;
   padding-left: 9px;
   padding-right: 9px;
   outline: 0;
   border: 0;
-  font-family: "Open Sans", system-ui, sans-serif;
-}
+  font-family: 'Open Sans', system-ui, sans-serif;
+}

package/src/styles/GridFormMultiSelectGrid.scss

@@ -6,4 +6,4 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}
+}

package/src/styles/GridFormSubComponentTextInput.scss

@@ -1,4 +1,4 @@
-.GridFormSubComponentTextInput-full-width-input {
-  width: 100%;
-  padding: 0;
-}
+.GridFormSubComponentTextInput-full-width-input {
+  width: 100%;
+  padding: 0;
+}

package/src/styles/GridIcon.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .AgGridGenericCellRenderer-icon {
   margin-right: 4px;

package/src/styles/GridPopoverMenu.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .ag-cell .GridPopoutMenu-burger {
   cursor: pointer;

package/src/styles/GridTheme.scss

@@ -1,5 +1,5 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
-@use "ag-grid-community/styles" as ag;
+@use '@linzjs/lui/dist/scss/Core' as lui;
+@use 'ag-grid-community/styles' as ag;
 
 // ag-grid likes to add 1px to this, so we subtract to compensate
 $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
@@ -44,7 +44,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     data-color: lui.$charcoal,
     foreground-color: lui.$charcoal,
     font-family: (
-      "Open Sans",
+      'Open Sans',
       system-ui,
       sans-serif,
     ),
@@ -58,6 +58,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
+.ag-theme-step-view-list-default,
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
   // Don't hide the drag handle
@@ -154,7 +155,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
       content: none !important;
     }
   }
-  
+
   .ag-header-cell-filter-button.ag-has-popup-positioned-under .ag-icon-filter {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
     background-color: #007198;
@@ -243,7 +244,8 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     visibility: inherit;
   }
 
-  .ag-row-highlight-above::after, .ag-row-highlight-below::after {
+  .ag-row-highlight-above::after,
+  .ag-row-highlight-below::after {
     content: '';
     height: 3px;
     background-color: transparent;
@@ -268,7 +270,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
   .ag-pinned-left-header,
   .ag-pinned-left-cols-container {
-      clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
+    clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
   }
 
   .ag-pinned-right-header,
@@ -278,7 +280,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 }
 
 .ag-theme-step-view-list-default.theme-specific {
-
   .ag-header-hide-default-select .ag-labeled {
     display: none;
   }

package/src/styles/index.scss

@@ -1,16 +1,16 @@
-@use "./lui-overrides";
-@use "./react-menu-customisations";
-@use "./ComponentLoadingWrapper";
-@use "./Grid";
-@use "./GridCell";
-@use "./GridFormDropDown";
-@use "./GridFormEditBearing";
-@use "./GridFormMultiSelect";
-@use "./GridFormMultiSelectGrid";
-@use "./GridFormSubComponentTextInput";
-@use "./GridIcon";
-@use "./GridLoadableCell";
-@use "./GridPopoverMenu";
-@use "./GridFilterColumnsToggle";
-@use "./GridFilterHeaderIconButton";
-@use "./GridFormInlineTextInput";
+@use './lui-overrides';
+@use './react-menu-customisations';
+@use './ComponentLoadingWrapper';
+@use './Grid';
+@use './GridCell';
+@use './GridFormDropDown';
+@use './GridFormEditBearing';
+@use './GridFormMultiSelect';
+@use './GridFormMultiSelectGrid';
+@use './GridFormSubComponentTextInput';
+@use './GridIcon';
+@use './GridLoadableCell';
+@use './GridPopoverMenu';
+@use './GridFilterColumnsToggle';
+@use './GridFilterHeaderIconButton';
+@use './GridFormInlineTextInput';

package/src/styles/react-menu-customisations.scss

@@ -1,120 +1,119 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
-
-/**
- * Here is where we can override the styles of react-menu
- */
-.step-ag-grid-react-menu.szh-menu {
-  z-index: 900;
-  color: lui.$base-type-color;
-  @include lui.font-regular();
-
-  div,
-  a[role="menuitem"] {
-    text-decoration: none;
-    color: lui.$base-type-color;
-    @include lui.font-regular();
-  }
-
-  li[role="menuitem"]:not(.szh-menu__item--disabled):hover {
-    background-color: lui.$polar;
-  }
-
-  .szh-menu__header {
-    display: flex;
-    align-items: center;
-  }
-}
-
-/**
- * Here are styles for lui select menu
- */
-.lui-select-menu.szh-menu {
-  z-index: 900;
-  width: 92vw;
-  overflow-y: scroll;
-
-  color: lui.$base-type-color;
-  @include lui.font-light();
-}
-
-.lui-select-menuItem {
-  padding: lui.$unit-xs lui.$unit-sm lui.$unit-xs lui.$unit-xs;
-  display: flex;
-  line-height: 1;
-  transition: all 0.2s ease-in-out;
-  fill: lui.$fuscous;
-
-  &:hover {
-    background-color: lui.$polar;
-  }
-}
-
-.lui-select-menuItem--error {
-  p {
-    color: lui.$error;
-  }
-
-  .LuiIcon {
-    fill: lui.$error;
-  }
-}
-
-.lui-select-menuItemText {
-  @include lui.font-regular();
-  color: lui.$charcoal;
-  margin: 0;
-  padding-left: lui.$unit-lg;
-
-  // if no icon, give it 4px to align with the group header
-  &--noPadding {
-    padding-left: lui.$unit-xxs;
-  }
-}
-
-.lui-select-icon + .lui-select-menuItemText {
-  padding-left: lui.$unit-xs;
-}
-
-.lui-select-menu-group {
-  height: 32px;
-  color: lui.$fuscous;
-  padding-left: 0.75rem;
-  text-transform: none;
-  @include lui.font-semibold();
-}
-
-.lui-select-submenu {
-  flex: 1;
-
-  div[role="menuitem"] {
-    padding: lui.$unit-xs lui.$unit-xs lui.$unit-xs 2.5rem;
-    text-decoration: none;
-    @include lui.font-regular();
-    height: 40px;
-  }
-  // overwrite the hover color
-  .szh-menu__item--hover {
-    background-color: lui.$polar;
-  }
-}
-
-.lui-select-submenu-with-icon {
-  flex: 1;
-  // width: 200px;
-  div[role="menuitem"] {
-    padding-left: 0;
-    text-decoration: none;
-    @include lui.font-regular();
-    height: 40px;
-  }
-}
-
-.lui-select-divider {
-  margin: 0.25rem;
-}
-
-
-.step-ag-grid-react-menu-sub-header-icon {
-  margin: lui.$unit-xs;
-  fill: lui.$fuscous;
-}
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
+
+/**
+ * Here is where we can override the styles of react-menu
+ */
+.step-ag-grid-react-menu.szh-menu {
+  z-index: 900;
+  color: lui.$base-type-color;
+  @include lui.font-regular();
+
+  div,
+  a[role='menuitem'] {
+    text-decoration: none;
+    color: lui.$base-type-color;
+    @include lui.font-regular();
+  }
+
+  li[role='menuitem']:not(.szh-menu__item--disabled):hover {
+    background-color: lui.$polar;
+  }
+
+  .szh-menu__header {
+    display: flex;
+    align-items: center;
+  }
+}
+
+/**
+ * Here are styles for lui select menu
+ */
+.lui-select-menu.szh-menu {
+  z-index: 900;
+  width: 92vw;
+  overflow-y: scroll;
+
+  color: lui.$base-type-color;
+  @include lui.font-light();
+}
+
+.lui-select-menuItem {
+  padding: lui.$unit-xs lui.$unit-sm lui.$unit-xs lui.$unit-xs;
+  display: flex;
+  line-height: 1;
+  transition: all 0.2s ease-in-out;
+  fill: lui.$fuscous;
+
+  &:hover {
+    background-color: lui.$polar;
+  }
+}
+
+.lui-select-menuItem--error {
+  p {
+    color: lui.$error;
+  }
+
+  .LuiIcon {
+    fill: lui.$error;
+  }
+}
+
+.lui-select-menuItemText {
+  @include lui.font-regular();
+  color: lui.$charcoal;
+  margin: 0;
+  padding-left: lui.$unit-lg;
+
+  // if no icon, give it 4px to align with the group header
+  &--noPadding {
+    padding-left: lui.$unit-xxs;
+  }
+}
+
+.lui-select-icon + .lui-select-menuItemText {
+  padding-left: lui.$unit-xs;
+}
+
+.lui-select-menu-group {
+  height: 32px;
+  color: lui.$fuscous;
+  padding-left: 0.75rem;
+  text-transform: none;
+  @include lui.font-semibold();
+}
+
+.lui-select-submenu {
+  flex: 1;
+
+  div[role='menuitem'] {
+    padding: lui.$unit-xs lui.$unit-xs lui.$unit-xs 2.5rem;
+    text-decoration: none;
+    @include lui.font-regular();
+    height: 40px;
+  }
+  // overwrite the hover color
+  .szh-menu__item--hover {
+    background-color: lui.$polar;
+  }
+}
+
+.lui-select-submenu-with-icon {
+  flex: 1;
+  // width: 200px;
+  div[role='menuitem'] {
+    padding-left: 0;
+    text-decoration: none;
+    @include lui.font-regular();
+    height: 40px;
+  }
+}
+
+.lui-select-divider {
+  margin: 0.25rem;
+}
+
+.step-ag-grid-react-menu-sub-header-icon {
+  margin: lui.$unit-xs;
+  fill: lui.$fuscous;
+}

package/src/utils/__tests__/testQuick.ts

@@ -52,13 +52,13 @@ const quickSelector = <T extends HTMLElement>(
   let lastIQueryQuick = props;
   for (let loop: IQueryQuick | undefined = props; loop; loop = loop.child) {
     lastIQueryQuick = loop;
-    loop.selector && (selector += loop.selector);
-    loop.tagName && (selector += loop.tagName);
-    loop.ariaLabel && (selector += `[aria-label='${escapeSelectorParam(loop.ariaLabel)}']`);
-    loop.role && (selector += `[role="${escapeSelectorParam(loop.role)}"]`);
-    loop.testId && (selector += `[data-testid="${escapeSelectorParam(loop.testId)}"]`);
-    loop.icon && (selector += `[data-icon='${loop.icon}']`);
-    loop.classes && (selector += loop.classes);
+    if (loop.selector) selector += loop.selector;
+    if (loop.tagName) selector += loop.tagName;
+    if (loop.ariaLabel) selector += `[aria-label='${escapeSelectorParam(loop.ariaLabel)}']`;
+    if (loop.role) selector += `[role="${escapeSelectorParam(loop.role)}"]`;
+    if (loop.testId) selector += `[data-testid="${escapeSelectorParam(loop.testId)}"]`;
+    if (loop.icon) selector += `[data-icon='${loop.icon}']`;
+    if (loop.classes) selector += loop.classes;
     selector += ' ';
   }
 

package/src/utils/__tests__/testUtil.ts

@@ -259,7 +259,9 @@ export const findMultiSelectOption = async (value: string): Promise<HTMLElement>
 
 export const clickMultiSelectOption = async (value: string): Promise<void> => {
   const menuItem = await findMultiSelectOption(value);
-  menuItem.parentElement && (await user.click(menuItem.parentElement));
+  if (menuItem.parentElement) {
+    await user.click(menuItem.parentElement);
+  }
 };
 
 const typeInput = async (value: string, filter: IQueryQuick): Promise<void> => {

package/src/utils/__tests__/vitestUtil.ts

@@ -260,7 +260,9 @@ export const findMultiSelectOption = async (value: string): Promise<HTMLElement>
 
 export const clickMultiSelectOption = async (value: string): Promise<void> => {
   const menuItem = await findMultiSelectOption(value);
-  menuItem.parentElement && (await user.click(menuItem.parentElement));
+  if (menuItem.parentElement) {
+    await user.click(menuItem.parentElement);
+  }
 };
 
 const typeInput = async (value: string, filter: IQueryQuick): Promise<void> => {

package/src/utils/deferredPromise.ts

@@ -7,7 +7,7 @@ export const useDeferredPromise = <T>() => {
   // End promise on unload
   useEffect(() => {
     return () => {
-      promiseReject.current && promiseReject.current();
+      promiseReject.current?.();
     };
   }, []);
 

package/src/utils/storybook.ts

@@ -0,0 +1,5 @@
+export interface WindowStorybookProps {
+  IS_STORYBOOK?: boolean;
+}
+
+export const isStorybook = (window as WindowStorybookProps).IS_STORYBOOK;

package/src/utils/useInterval.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from 'usehooks-ts';
+
+/**
+ * Copied from usehooks-ts
+ *
+ * Custom hook that creates an interval that invokes a callback function at a specified delay using the [`setInterval API`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval).
+ * @param {() => void} callback - The function to be invoked at each interval.
+ * @param {number | null} delay - The time, in milliseconds, between each invocation of the callback. Use `null` to clear the interval.
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-interval)
+ * @example
+ * ```tsx
+ * const handleInterval = () => {
+ *   // Code to be executed at each interval
+ * };
+ * useInterval(handleInterval, 1000);
+ * ```
+ */
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+  useIsomorphicLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (delay === null) {
+      return;
+    }
+
+    const id = setInterval(() => {
+      savedCallback.current();
+    }, delay);
+
+    return () => {
+      clearInterval(id);
+    };
+  }, [delay]);
+}

package/src/utils/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,18 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+/**
+ * Copied from usehooks-ts
+ *
+ * Custom hook that uses either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
+ * @param {Function} effect - The effect function to be executed.
+ * @param {Array<any>} [dependencies] - An array of dependencies for the effect (optional).
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
+ * @example
+ * ```tsx
+ * useIsomorphicLayoutEffect(() => {
+ *   // Code to be executed during the layout phase on the client side
+ * }, [dependency1, dependency2]);
+ * ```
+ */
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;