@linzjs/step-ag-grid 30.4.3 → 31.1.1

package/dist/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,6 +280,9 @@ $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;
+  }
 
   .ag-header-cell {
     font-size: 14px;
@@ -295,4 +300,4 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-header-cell {
     font-size: 14px;
   }
-}
+}

package/dist/index.css

@@ -311,7 +311,8 @@
   text-transform: uppercase;
 }
 
-.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;
 }
 
@@ -328,7 +329,8 @@
   user-select: none;
 }
 
-.LabelPreferencesPanelGridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
+.LabelPreferencesPanelGridCellAlignCenter .ag-cell-wrapper,
+.LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
   display: flex;
   justify-content: center;
 }
@@ -447,7 +449,8 @@
   margin-right: auto;
 }
 
-.GridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
+.GridCellAlignCenter .ag-cell-wrapper,
+.LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
   display: flex;
   justify-content: center;
 }

package/dist/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/dist/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/dist/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/dist/src/utils/storybook.d.ts

@@ -0,0 +1,4 @@
+export interface WindowStorybookProps {
+    IS_STORYBOOK?: boolean;
+}
+export declare const isStorybook: boolean | undefined;

package/dist/src/utils/useInterval.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 declare function useInterval(callback: () => void, delay: number | null): void;

package/dist/src/utils/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,17 @@
+import { useEffect } 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 declare const useIsomorphicLayoutEffect: typeof useEffect;