@linzjs/step-ag-grid 30.4.4 → 31.2.0

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;