@linzjs/step-ag-grid 30.4.4 → 31.2.0

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;
@@ -257,6 +259,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     border-bottom: 2px dashed lui.$andrea;
   }
 
+  .ag-row-dragging {
+    opacity: 0.5;
+  }
+
   .ag-pinned-left-header,
   .ag-pinned-right-header,
   .ag-pinned-right-cols-container,
@@ -268,7 +274,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 +284,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/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/components/gridDragUtil.d.ts

@@ -0,0 +1,10 @@
+import { GridBaseRow } from './types';
+/**
+ * Reorders rows by removing movedRows from the array and inserting them at the target position.
+ * @param rows - The current row array.
+ * @param movedRows - Rows to move, in desired insertion order (typically display order).
+ * @param targetRow - The row to insert relative to.
+ * @param direction - -1 inserts above targetRow, 1 inserts below targetRow.
+ * @returns A new array with the rows reordered, or the original array if the operation is a no-op.
+ */
+export declare function reorderRows<T extends GridBaseRow>(rows: T[], movedRows: T[], targetRow: T, direction: -1 | 1): T[];

package/dist/src/components/gridDragUtil.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './GridCell';
 export * from './GridCellFiller';
 export * from './GridCellMultiEditor';
 export * from './GridCellMultiSelectClassRules';
+export * from './gridDragUtil';
 export * from './gridFilter';
 export * from './gridForm';
 export * from './gridHook';

package/dist/src/components/types.d.ts

@@ -5,8 +5,12 @@ export interface GridBaseRow {
     id: string | number;
 }
 export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
+    /** The row the user physically grabbed by its drag handle. */
     movedRow: TData;
+    /** All rows being moved, ordered by display index. Single-element array when dragging an unselected row. */
+    movedRows: TData[];
     targetRow: TData;
+    /** -1 = dropped above target, 1 = dropped below target. */
     direction: -1 | 1;
 }
 export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {

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;