@linzjs/step-ag-grid 23.0.1 → 25.0.0

package/src/index.ts

@@ -1,21 +1,19 @@
-export * from "./components";
-
-export * from "./contexts/GridContext";
-export * from "./contexts/GridContextProvider";
-export * from "./contexts/GridUpdatingContext";
-export * from "./contexts/GridUpdatingContextProvider";
-export * from "./contexts/GridPopoverContext";
-export * from "./contexts/GridPopoverContextProvider";
-export * from "./contexts/GridSubComponentContext";
-
-export * from "./lui/ActionButton";
-export * from "./lui/FormError";
-export * from "./lui/TextAreaInput";
-export * from "./lui/TextInputFormatted";
-
-export * from "./react-menu3/index";
-export * from "./react-menu3/types";
-
-export * from "./utils/bearing";
-export * from "./utils/util";
-export * from "./utils/deferredPromise";
+export * from './components';
+export * from './contexts/GridContext';
+export * from './contexts/GridContextProvider';
+export * from './contexts/GridPopoverContext';
+export * from './contexts/GridPopoverContextProvider';
+export * from './contexts/GridSubComponentContext';
+export * from './contexts/GridUpdatingContext';
+export * from './contexts/GridUpdatingContextProvider';
+export * from './lui/ActionButton';
+export * from './lui/FormError';
+export * from './lui/TextAreaInput';
+export * from './lui/TextInputFormatted';
+export * from './react-menu3/index';
+export * from './react-menu3/types';
+export * from './utils/bearing';
+export * from './utils/deferredPromise';
+export * from './utils/textMatcher';
+export * from './utils/textValidator';
+export * from './utils/util';

package/src/lui/ActionButton.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .ActionButton {
   display: flex;
@@ -44,7 +44,7 @@
 .ActionButton-inProgress.lui-button-lg.lui-button-icon-right {
   cursor: progress;
   color: #007198;
-  background-color: colors.$polar;
+  background-color: lui.$polar;
 }
 
 .ActionButton-fill {

package/src/lui/ActionButton.tsx

@@ -1,27 +1,27 @@
-import "./ActionButton.scss";
+import './ActionButton.scss';
 
-import clsx from "clsx";
-import { CSSProperties, ReactElement, useEffect, useState } from "react";
+import { LuiButton, LuiIcon, LuiMiniSpinner } from '@linzjs/lui';
+import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
+import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import clsx from 'clsx';
+import { CSSProperties, ReactElement, useEffect, useState } from 'react';
 
-import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
-import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
-import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
-
-import { usePrevious } from "./reactUtils";
-import { useStateDeferred } from "./stateDeferredHook";
+import { usePrevious } from './reactUtils';
+import { useStateDeferred } from './stateDeferredHook';
 
 export interface ActionButtonProps {
   icon: IconName;
   name?: string;
-  "aria-label"?: string;
+  'aria-label'?: string;
   inProgressName?: string;
   title?: string;
   dataTestId?: string;
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
-  iconPosition?: "left" | "right";
-  className?: "ActionButton-fill" | "ActionButton-tight" | string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'ns';
+  iconPosition?: 'left' | 'right';
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  className?: 'ActionButton-fill' | 'ActionButton-tight' | string;
   onClick: () => Promise<void> | void;
-  level?: LuiButtonProps["level"];
+  level?: LuiButtonProps['level'];
   style?: CSSProperties;
   disabled?: boolean;
 }
@@ -39,10 +39,10 @@ export const ActionButton = ({
   className,
   title,
   onClick,
-  size = "sm",
-  iconPosition = "left",
-  level = "tertiary",
-  "aria-label": ariaLabel,
+  size = 'sm',
+  iconPosition = 'left',
+  level = 'tertiary',
+  'aria-label': ariaLabel,
 }: ActionButtonProps): ReactElement => {
   const [inProgress, setInProgress] = useState(false);
   const lastInProgress = usePrevious(inProgress ?? false);
@@ -54,63 +54,64 @@ export const ActionButton = ({
   }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
 
   const buttonText = (
-    <span className={"ActionButton-minimalArea"}>
-      <span className={"ActionButton-minimalAreaDisplay"}>{(localInProgress ? inProgressName : name) ?? name}</span>
+    <span className={'ActionButton-minimalArea'}>
+      <span className={'ActionButton-minimalAreaDisplay'}>{(localInProgress ? inProgressName : name) ?? name}</span>
       {/* This makes sure the button expands to fill maximum length text at all times */}
-      <span className={"ActionButton-minimalAreaExpand"}>{name}</span>
+      <span className={'ActionButton-minimalAreaExpand'}>{name}</span>
     </span>
   );
 
   return (
     <LuiButton
       data-testid={dataTestId}
-      type={"button"}
+      type={'button'}
       level={level}
       title={title ?? ariaLabel ?? name}
-      buttonProps={{ "aria-label": ariaLabel ?? name }}
+      buttonProps={{ 'aria-label': ariaLabel ?? name }}
       className={clsx(
-        "lui-button-icon-right",
-        "ActionButton",
+        'lui-button-icon-right',
+        'ActionButton',
         className,
-        localInProgress && "ActionButton-inProgress",
-        name != null && !className?.includes("ActionButton-fill") && "ActionButton-minimal",
-        name == null && "ActionButton-iconOnly",
+        localInProgress && 'ActionButton-inProgress',
+        name != null && !className?.includes('ActionButton-fill') && 'ActionButton-minimal',
+        name == null && 'ActionButton-iconOnly',
       )}
-      size={"lg"}
+      size={'lg'}
       style={style}
-      onClick={async () => {
+      onClick={() => {
         const promise = onClick();
-        const isPromise = typeof promise !== "undefined";
+        const isPromise = typeof promise !== 'undefined';
         if (isPromise) {
           setInProgress(true);
-          if (isPromise) await promise;
-          setInProgress(false);
+          void promise.finally(() => {
+            setInProgress(false);
+          });
         }
       }}
       disabled={localInProgress || disabled}
     >
-      {iconPosition === "right" && buttonText}
+      {iconPosition === 'right' && buttonText}
       {localInProgress && (
-        <div style={{ position: "relative" }}>
+        <div style={{ position: 'relative' }}>
           <LuiMiniSpinner
             size={14}
             divProps={{
-              "data-testid": "loading-spinner",
+              'data-testid': 'loading-spinner',
               style: {
-                position: "absolute",
+                position: 'absolute',
                 left: 4,
                 top: -10,
                 bottom: 10,
                 right: -4,
               },
-              role: "status",
-              "aria-label": "Loading",
+              role: 'status',
+              'aria-label': 'Loading',
             }}
           />
         </div>
       )}
-      <LuiIcon name={icon} alt={ariaLabel ?? name ?? ""} size={size} />
-      {iconPosition === "left" && buttonText}
+      <LuiIcon name={icon} alt={ariaLabel ?? name ?? ''} size={size} />
+      {iconPosition === 'left' && buttonText}
     </LuiButton>
   );
 };

package/src/lui/FormError.scss

@@ -1,12 +1,11 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
-
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .FormError {
   display: flex;
 
   &-helpText {
     font-size: 0.75rem;
-    color: colors.$fuscous;
+    color: lui.$fuscous;
     font-weight: 400;
   }
 
@@ -19,7 +18,7 @@
     padding-left: 0;
     font-size: 14px;
     font-weight: 600;
-    color: colors.$charcoal;
+    color: lui.$charcoal;
     align-items: center;
   }
 }

package/src/lui/FormError.tsx

@@ -1,7 +1,7 @@
-import "./FormError.scss";
+import './FormError.scss';
 
-import { ReactElement } from "react";
-import { LuiIcon } from "@linzjs/lui";
+import { LuiIcon } from '@linzjs/lui';
+import { ReactElement } from 'react';
 
 export interface FormErrorProps {
   helpText?: string;
@@ -18,7 +18,7 @@ export const FormError = (props: FormErrorProps) => {
         </div>
       )}
 
-      {props.helpText && !props.error && <span className={"FormError-helpText"}>{props.helpText}</span>}
+      {props.helpText && !props.error && <span className={'FormError-helpText'}>{props.helpText}</span>}
     </>
   );
 };

package/src/lui/TextAreaInput.tsx

@@ -1,8 +1,8 @@
-import clsx from "clsx";
-import { omit } from "lodash-es";
-import { InputHTMLAttributes, ReactElement, useId } from "react";
+import clsx from 'clsx';
+import { omit } from 'lodash-es';
+import { InputHTMLAttributes, ReactElement, useId } from 'react';
 
-import { FormError } from "./FormError";
+import { FormError } from './FormError';
 
 export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
   // overrides value in base class to be string type only
@@ -23,9 +23,9 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
   return (
     <div
       className={clsx(
-        "LuiTextAreaInput Grid-popoverContainer",
-        props.disabled ? "isDisabled" : "",
-        props.error ? "hasError" : "",
+        'LuiTextAreaInput Grid-popoverContainer',
+        props.disabled ? 'isDisabled' : '',
+        props.error ? 'hasError' : '',
         props.className,
       )}
     >
@@ -36,9 +36,9 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
           {/* wrapper div used for error styling */}
           <textarea
             rows={5}
-            {...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"])}
+            {...omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave'])}
             id={id}
-            value={props.value ?? ""}
+            value={props.value ?? ''}
             spellCheck={true}
             onMouseEnter={(e) => {
               if (document.activeElement != e.currentTarget) {

package/src/lui/TextInputFormatted.scss

@@ -1,4 +1,4 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 .LuiTextInput.GridLuiTextInput {
   margin-bottom: 0;

package/src/lui/TextInputFormatted.tsx

@@ -1,10 +1,10 @@
-import "./TextInputFormatted.scss";
+import './TextInputFormatted.scss';
 
-import clsx from "clsx";
-import { omit } from "lodash-es";
-import { DetailedHTMLProps, InputHTMLAttributes, ReactElement } from "react";
+import clsx from 'clsx';
+import { omit } from 'lodash-es';
+import { DetailedHTMLProps, InputHTMLAttributes, ReactElement } from 'react';
 
-import { FormError } from "./FormError";
+import { FormError } from './FormError';
 
 export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   // overrides value in base class to be string type only
@@ -21,26 +21,26 @@ export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
   return (
     <div
       className={clsx(
-        "LuiTextInput GridLuiTextInput Grid-popoverContainer",
-        props.error && "hasError",
+        'LuiTextInput GridLuiTextInput Grid-popoverContainer',
+        props.error && 'hasError',
         props.className,
       )}
     >
       <span className="LuiTextInput-inputWrapper">
         {/* wrapper div used for error styling */}
         <input
-          type={"text"}
+          type={'text'}
           spellCheck={true}
           defaultValue={props.value}
-          {...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"])}
-          className={"LuiTextInput-input"}
+          {...omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave'])}
+          className={'LuiTextInput-input'}
           onMouseEnter={(e) => {
             e.currentTarget.focus();
             props.onMouseEnter && props.onMouseEnter(e);
           }}
           data-allowtabtosave={props.allowTabToSave}
         />
-        <span className={"LuiTextInput-formatted"}>{props.formatted}</span>
+        <span className={'LuiTextInput-formatted'}>{props.formatted}</span>
       </span>
 
       <FormError error={props.error} helpText={props.helpText} />

package/src/lui/reactUtils.test.tsx

@@ -1,9 +1,10 @@
-import { screen } from "@testing-library/dom";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ReactElement, useEffect, useState } from "react";
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ReactElement, useEffect, useState } from 'react';
+import { describe, expect, test } from 'vitest';
 
-import { usePrevious } from "./reactUtils";
+import { usePrevious } from './reactUtils';
 
 interface WrapperProps {
   value: boolean;
@@ -33,10 +34,10 @@ const TestComponent = (): ReactElement => {
   );
 };
 
-describe("usePrevious", () => {
-  test("usePrevious", async () => {
+describe('usePrevious', () => {
+  test('usePrevious', async () => {
     render(<TestComponent />);
-    const button = await screen.findByText("Change value");
+    const button = await screen.findByText('Change value');
 
     expect(extPrevious).toBeUndefined();
 

package/src/lui/reactUtils.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 /**
  * Track previous values of states.
  *
  * @param value Value to track.
  */
-export const usePrevious = <T extends unknown>(value: T): T | undefined => {
+export const usePrevious = <T,>(value: T): T | undefined => {
   const ref = useRef<T>();
   useEffect(() => {
     ref.current = value;

package/src/lui/stateDeferredHook.tsx

@@ -1,13 +1,11 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState } from 'react';
 
-import { useTimeoutHook } from "./timeoutHook";
+import { useTimeoutHook } from './timeoutHook';
 
 /**
  * Defers state change up to a minimum time since last state change.
  */
-export const useStateDeferred = <T extends unknown>(
-  initialValue: T,
-): [T, (v: T) => void, (v: T, w: number) => void] => {
+export const useStateDeferred = <T,>(initialValue: T): [T, (v: T) => void, (v: T, w: number) => void] => {
   const startTime = useRef<number>(0);
   const timeoutHook = useTimeoutHook();
 

package/src/lui/timeoutHook.test.tsx

@@ -1,14 +1,15 @@
-import { render } from "@testing-library/react";
+import { render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
-import { useTimeoutHook } from "./timeoutHook";
+import { useTimeoutHook } from './timeoutHook';
 
-describe("useTimeoutHook", () => {
+describe('useTimeoutHook', () => {
   beforeEach(() => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
   });
 
   afterEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   const TestComponent = (props: { callback: () => void; repeat?: number }) => {
@@ -19,21 +20,21 @@ describe("useTimeoutHook", () => {
     return <div />;
   };
 
-  test("invokes on timeout", async () => {
-    const callback = jest.fn();
+  test('invokes on timeout', () => {
+    const callback = vi.fn();
 
     render(<TestComponent callback={callback} />);
     expect(callback).toHaveBeenCalledTimes(0);
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(callback).toHaveBeenCalledTimes(1);
   });
 
-  test("invokes once on double invocation", async () => {
-    const callback = jest.fn();
+  test('invokes once on double invocation', () => {
+    const callback = vi.fn();
 
     render(<TestComponent callback={callback} repeat={2} />);
     expect(callback).toHaveBeenCalledTimes(0);
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(callback).toHaveBeenCalledTimes(1);
   });
 });

package/src/lui/timeoutHook.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from 'react';
 
 /**
  * Cancels timeouts on scope being destroyed.

package/src/react-app-env.d.ts

@@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="react-scripts" />