@dr.pogodin/react-utils 1.37.0 → 1.38.1

package/build/types-code/shared/components/Button/index.d.ts

@@ -9,6 +9,7 @@ type PropsT = {
     onMouseDown?: React.MouseEventHandler;
     openNewTab?: boolean;
     replace?: boolean;
+    testId?: string;
     theme: Theme<'active' | 'button' | 'disabled'>;
     to?: object | string;
 };

package/build/types-code/shared/components/Modal/index.d.ts

@@ -3,10 +3,13 @@ import { type Theme } from '@dr.pogodin/react-themes';
 type PropsT = {
     cancelOnScrolling?: boolean;
     children?: ReactNode;
-    containerStyle?: React.CSSProperties;
     dontDisableScrolling?: boolean;
     onCancel?: () => void;
+    style?: React.CSSProperties;
+    testId?: string;
     theme: Theme<'container' | 'overlay'>;
+    /** @deprecated */
+    containerStyle?: React.CSSProperties;
 };
 /**
  * The `<Modal>` component implements a simple themeable modal window, wrapped

package/build/types-code/shared/components/selectors/common.d.ts

@@ -1,5 +1,5 @@
 import type { Theme } from '@dr.pogodin/react-themes';
-type ThemeKeyT = 'active' | 'arrow' | 'container' | 'dropdown' | 'hiddenOption' | 'label' | 'option' | 'select' | 'upward';
+type ThemeKeyT = 'active' | 'arrow' | 'container' | 'dropdown' | 'hiddenOption' | 'label' | 'option' | 'select' | 'invalid' | 'upward';
 export type ValueT = number | string;
 export type OptionT<NameT> = {
     name?: NameT | null;
@@ -11,6 +11,7 @@ export type PropsT<NameT, OnChangeT = React.ChangeEventHandler<HTMLSelectElement
     label?: React.ReactNode;
     onChange?: OnChangeT;
     options?: Readonly<OptionsT<NameT>>;
+    testId?: string;
     theme: Theme<ThemeKeyT>;
     value?: ValueT;
 };

package/build/types-code/shared/utils/jest/index.d.ts

@@ -34,6 +34,7 @@ export declare function getMockUuid(seed?: number): string;
 export declare function mockTimer(time: number): Promise<void>;
 export type MountedSceneT = HTMLElement & {
     destroy: () => void;
+    snapshot: () => void;
 };
 /**
  * Mounts `scene` to the DOM, and returns the root scene element.

package/build/types-scss/src/shared/components/selectors/NativeDropdown/theme.scss.d.ts

@@ -6,6 +6,7 @@ export declare const context: string;
 export declare const dropdown: string;
 export declare const hiddenOption: string;
 export declare const hoc: string;
+export declare const invalid: string;
 export declare const label: string;
 export declare const option: string;
 export declare const select: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.37.0",
+  "version": "1.38.1",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -30,14 +30,14 @@
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
-    "qs": "^6.12.1",
+    "qs": "^6.12.2",
     "raf": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.24.1",
     "request-ip": "^3.3.0",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.8",
     "serialize-javascript": "^6.0.2",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
@@ -59,10 +59,10 @@
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@testing-library/dom": "^10.2.0",
+    "@testing-library/dom": "^10.3.1",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@tsconfig/recommended": "^1.0.6",
+    "@tsconfig/recommended": "^1.0.7",
     "@types/compression": "^1.7.5",
     "@types/config": "^3.3.4",
     "@types/cookie": "^0.6.0",
@@ -122,12 +122,12 @@
     "tsc-alias": "^1.8.10",
     "tstyche": "^2.0.0",
     "typed-scss-modules": "^8.0.1",
-    "typescript": "^5.5.2",
-    "typescript-eslint": "^7.14.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^7.15.0",
     "webpack": "^5.92.1",
     "webpack-dev-middleware": "^7.2.1",
     "webpack-hot-middleware": "^2.26.1",
-    "webpack-merge": "^5.10.0",
+    "webpack-merge": "^6.0.1",
     "workbox-core": "^7.1.0",
     "workbox-precaching": "^7.1.0",
     "workbox-webpack-plugin": "^7.1.0"

package/src/shared/components/Button/index.tsx

@@ -17,6 +17,7 @@ type PropsT = {
   onMouseDown?: React.MouseEventHandler;
   openNewTab?: boolean;
   replace?: boolean;
+  testId?: string;
   theme: Theme<'active' | 'button' | 'disabled'>;
   // TODO: It needs a more precise typing of the object option.
   to?: object | string;
@@ -32,6 +33,7 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
   onMouseDown,
   openNewTab,
   replace,
+  testId,
   theme,
   to,
 }) => {
@@ -40,7 +42,7 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
   if (disabled) {
     if (theme.disabled) className += ` ${theme.disabled}`;
     return (
-      <div className={className}>
+      <div className={className} data-testid={testId}>
         {children}
       </div>
     );
@@ -49,6 +51,7 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
     return (
       <Link
         className={className}
+        data-testid={testId}
         enforceA={enforceA}
         onClick={onClick}
         onMouseDown={onMouseDown}
@@ -64,6 +67,7 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
   return (
     <div
       className={className}
+      data-testid={testId}
       onClick={onClick}
       onKeyDown={onClick && ((e) => {
         if (e.key === 'Enter') onClick(e);

package/src/shared/components/Modal/index.tsx

@@ -17,10 +17,14 @@ import S from './styles.scss';
 type PropsT = {
   cancelOnScrolling?: boolean;
   children?: ReactNode;
-  containerStyle?: React.CSSProperties;
   dontDisableScrolling?: boolean;
   onCancel?: () => void;
+  style?: React.CSSProperties;
+  testId?: string;
   theme: Theme<'container' | 'overlay'>;
+
+  /** @deprecated */
+  containerStyle?: React.CSSProperties;
 };
 
 /**
@@ -40,6 +44,8 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
   containerStyle,
   dontDisableScrolling,
   onCancel,
+  style,
+  testId,
   theme,
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -141,11 +147,12 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
         <div
           aria-modal="true"
           className={theme.container}
+          data-testid={testId}
           onClick={(e) => e.stopPropagation()}
           onWheel={(event) => event.stopPropagation()}
           ref={containerRef}
           role="dialog"
-          style={containerStyle}
+          style={style ?? containerStyle}
         >
           {children}
         </div>

package/src/shared/components/selectors/NativeDropdown/index.tsx

@@ -30,6 +30,7 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
   label,
   onChange,
   options,
+  testId,
   theme,
   value,
 }) => {
@@ -66,12 +67,16 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
     </option>
   );
 
+  let selectClassName = theme.select;
+  if (!isValidValue) selectClassName += ` ${theme.invalid}`;
+
   return (
     <div className={theme.container}>
       { label === undefined ? null : <div className={theme.label}>{label}</div> }
       <div className={theme.dropdown}>
         <select
-          className={theme.select}
+          className={selectClassName}
+          data-testid={testId}
           onChange={onChange}
           value={value}
         >

package/src/shared/components/selectors/NativeDropdown/theme.scss

@@ -4,6 +4,8 @@
 .context,
 .ad.hoc {
   &.dropdown {
+    display: flex;
+    overflow: hidden;
     position: relative;
   }
 
@@ -45,7 +47,7 @@
     margin: 0 0.6em 0 1.5em;
   }
 
-  &.option { /* Empty style */ }
+  &.option { color: black; }
   &.hiddenOption { display: none; }
 
   &.select {
@@ -56,6 +58,7 @@
     color: inherit;
     cursor: pointer;
     display: inline-block;
+    flex: 1;
     font: inherit;
     outline: none;
     padding: 0.3em 3.3em calc(0.3em + 1px) 1.2em;
@@ -70,5 +73,7 @@
       border-color: blue;
       box-shadow: 0 0 3px 1px lightblue;
     }
+
+    &.invalid { color: gray; }
   }
 }

package/src/shared/components/selectors/common.ts

@@ -12,6 +12,11 @@ type ThemeKeyT =
   | 'option'
   | 'select'
 
+  // TODO: This is currently only valid for (native) <Dropdown>,
+  // other kinds of selectors should be evaluated, and aligned with this
+  // feature, if appropriate.
+  | 'invalid'
+
   // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it
   // into a separate theme spec for that component.
   | 'upward';
@@ -33,6 +38,7 @@ export type PropsT<
   label?: React.ReactNode;
   onChange?: OnChangeT;
   options?: Readonly<OptionsT<NameT>>;
+  testId?: string;
   theme: Theme<ThemeKeyT>;
   value?: ValueT;
 };

package/src/shared/utils/jest/index.tsx

@@ -66,6 +66,7 @@ export async function mockTimer(time: number) {
 
 export type MountedSceneT = HTMLElement & {
   destroy: () => void;
+  snapshot: () => void;
 };
 
 /**
@@ -89,6 +90,10 @@ export function mount(scene: ReactNode): MountedSceneT {
     res.remove();
   };
 
+  res.snapshot = () => {
+    expect(res).toMatchSnapshot();
+  };
+
   // NOTE: As it seems @testing-library may reset this flag to false
   // when it is simulating user events.
   global.IS_REACT_ACT_ENVIRONMENT = true;