@dr.pogodin/react-utils 1.40.2 → 1.40.4

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

@@ -1,9 +1,11 @@
 import { type Theme } from '@dr.pogodin/react-themes';
-type PropT = {
-    checked?: boolean;
+type PropT<ValueT> = {
+    checked?: ValueT;
+    disabled?: boolean;
     label?: React.ReactNode;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    theme: Theme<'checkbox' | 'container' | 'label'>;
+    testId?: string;
+    theme: Theme<'checkbox' | 'container' | 'disabled' | 'indeterminate' | 'label'>;
 };
-declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<PropT>;
+declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<PropT<boolean | "indeterminate">>;
 export default _default;

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

@@ -7,6 +7,7 @@ type PropsT = {
     onCancel?: () => void;
     style?: React.CSSProperties;
     testId?: string;
+    testIdForOverlay?: string;
     theme: Theme<'container' | 'overlay'>;
     /** @deprecated */
     containerStyle?: React.CSSProperties;

package/build/types-code/shared/utils/isomorphy/buildInfo.d.ts

@@ -4,9 +4,6 @@ export type BuildInfoT = {
     timestamp: string;
     useServiceWorker: boolean;
 };
-declare global {
-    const BUILD_INFO: BuildInfoT | undefined;
-}
 /**
  * In scenarious where "BUILD_INFO" is not injected by Webpack (server-side,
  * tests, etc.) we expect the host codebase to explicitly set it before it is

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

@@ -2,5 +2,7 @@ export declare const ad: string;
 export declare const checkbox: string;
 export declare const container: string;
 export declare const context: string;
+export declare const disabled: string;
 export declare const hoc: string;
+export declare const indeterminate: string;
 export declare const label: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.40.2",
+  "version": "1.40.4",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,21 +8,21 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.0",
+    "@babel/runtime": "^7.25.6",
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.2",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.12",
-    "@dr.pogodin/react-global-state": "^0.17.0",
+    "@dr.pogodin/react-global-state": "^0.17.1",
     "@dr.pogodin/react-themes": "^1.7.0",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.7.3",
+    "axios": "^1.7.7",
     "commander": "^12.1.0",
     "compression": "^1.7.4",
     "config": "^3.3.12",
     "cookie": "^0.6.0",
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "express": "^4.19.2",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
@@ -35,24 +35,24 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.26.1",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
     "uuid": "^10.0.0",
-    "winston": "^3.14.1"
+    "winston": "^3.14.2"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.24.8",
+    "@babel/cli": "^7.25.6",
     "@babel/core": "^7.25.2",
     "@babel/eslint-parser": "^7.25.1",
     "@babel/eslint-plugin": "^7.25.1",
     "@babel/node": "^7.25.0",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
@@ -60,7 +60,7 @@
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.7",
     "@types/compression": "^1.7.5",
@@ -74,7 +74,7 @@
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/request-ip": "^0.0.41",
@@ -87,7 +87,7 @@
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.2",
-    "core-js": "^3.38.0",
+    "core-js": "^3.38.1",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "eslint": "^8.57.0",
@@ -95,7 +95,7 @@
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.8.0",
+    "eslint-plugin-jest": "^28.8.2",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -103,10 +103,10 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "memfs": "^4.11.1",
-    "mini-css-extract-plugin": "^2.9.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.44",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
@@ -114,19 +114,19 @@
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.77.8",
-    "sass-loader": "^16.0.0",
+    "sass-loader": "^16.0.1",
     "sitemap": "^8.0.0",
     "source-map-loader": "^5.0.0",
-    "stylelint": "^16.8.1",
+    "stylelint": "^16.9.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "supertest": "^7.0.0",
     "tsc-alias": "^1.8.10",
     "tstyche": "^2.1.1",
     "typed-scss-modules": "^8.0.1",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.0.1",
-    "webpack": "^5.93.0",
-    "webpack-dev-middleware": "^7.3.0",
+    "typescript-eslint": "^8.4.0",
+    "webpack": "^5.94.0",
+    "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",
     "workbox-core": "^7.1.0",

package/src/client/init.ts

@@ -2,7 +2,7 @@
  * Initialization of client-side environment.
  */
 
-/* global BUILD_INFO, window */
+/* global window */
 
 import { type BuildInfoT, getBuildInfo } from 'utils/isomorphy/buildInfo';
 
@@ -16,6 +16,8 @@ declare global {
   }
 }
 
+declare const BUILD_INFO: BuildInfoT | undefined;
+
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line no-console
   console.warn('Dev mode: "BUILD_INFO" attached to the global "window"');

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

@@ -2,29 +2,49 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
-type PropT = {
-  checked?: boolean;
+type PropT<ValueT> = {
+  checked?: ValueT;
+  disabled?: boolean;
   label?: React.ReactNode;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  theme: Theme<'checkbox' | 'container' | 'label'>;
+  testId?: string;
+  theme: Theme<
+  | 'checkbox'
+  | 'container'
+  | 'disabled'
+  | 'indeterminate'
+  | 'label'
+  >;
 };
 
-const Checkbox: React.FunctionComponent<PropT> = ({
+const Checkbox = <ValueT extends boolean | 'indeterminate' = boolean>({
   checked,
+  disabled,
   label,
   onChange,
+  testId,
   theme,
-}) => (
-  <div className={theme.container}>
-    { label === undefined ? null : <div className={theme.label}>{label}</div> }
-    <input
-      checked={checked}
-      className={theme.checkbox}
-      onChange={onChange}
-      onClick={(e) => e.stopPropagation()}
-      type="checkbox"
-    />
-  </div>
-);
+}: PropT<ValueT>) => {
+  let containerClassName = theme.container;
+  if (disabled) containerClassName += ` ${theme.disabled}`;
+
+  let checkboxClassName = theme.checkbox;
+  if (checked === 'indeterminate') checkboxClassName += ` ${theme.indeterminate}`;
+
+  return (
+    <div className={containerClassName}>
+      { label === undefined ? null : <div className={theme.label}>{label}</div> }
+      <input
+        checked={checked === undefined ? undefined : checked === true}
+        className={checkboxClassName}
+        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
+        disabled={disabled}
+        onChange={onChange}
+        onClick={(e) => e.stopPropagation()}
+        type="checkbox"
+      />
+    </div>
+  );
+};
 
 export default themed(Checkbox, 'Checkbox', defaultTheme);

package/src/shared/components/Checkbox/theme.scss

@@ -29,6 +29,18 @@
       border-color: blue;
       box-shadow: 0 0 3px 1px lightblue;
     }
+
+    &.indeterminate {
+      &::after {
+        background: black;
+        border-radius: 0.2em;
+        content: "";
+        display: block;
+        height: 0.2em;
+        margin: 0.6em 0.2em;
+        width: 1em;
+      }
+    }
   }
 
   &.container {
@@ -40,4 +52,12 @@
   &.label {
     margin: 0 0.6em 0 1.5em;
   }
+
+  &.disabled {
+    opacity: 0.33;
+
+    .checkbox {
+      cursor: not-allowed !important;
+    }
+  }
 }

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

@@ -21,6 +21,7 @@ type PropsT = {
   onCancel?: () => void;
   style?: React.CSSProperties;
   testId?: string;
+  testIdForOverlay?: string;
   theme: Theme<'container' | 'overlay'>;
 
   /** @deprecated */
@@ -46,6 +47,7 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
   onCancel,
   style,
   testId,
+  testIdForOverlay,
   theme,
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -110,6 +112,10 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
         <div
           aria-label="Cancel"
           className={theme.overlay}
+          data-testid={
+            process.env.NODE_ENV === 'production'
+              ? undefined : testIdForOverlay
+          }
           onClick={(e) => {
             if (onCancel) {
               onCancel();

package/src/shared/utils/isomorphy/buildInfo.ts

@@ -10,12 +10,10 @@ export type BuildInfoT = {
   useServiceWorker: boolean;
 };
 
-declare global {
-  // Depending on the build mode & environment, BUILD_INFO is either a global
-  // variable defined at the app launch, or it is replaced by the actual value
-  // by the Webpack build.
-  const BUILD_INFO: BuildInfoT | undefined;
-}
+// Depending on the build mode & environment, BUILD_INFO is either a global
+// variable defined at the app launch, or it is replaced by the actual value
+// by the Webpack build.
+declare const BUILD_INFO: BuildInfoT | undefined;
 
 let buildInfo: BuildInfoT | undefined;
 

package/src/shared/utils/splitComponent.tsx

@@ -210,8 +210,8 @@ export default function splitComponent<
       await bookStyleSheets(chunkName, clientChunkGroups, false);
     }
 
-    const Wrapper = forwardRef((
-      { children, ...rest }: ComponentPropsT,
+    const Wrapper = forwardRef<unknown, ComponentPropsT>((
+      { children, ...rest },
       ref,
     ) => {
       // On the server side we'll assert the chunk name here,
@@ -230,7 +230,7 @@ export default function splitComponent<
       }, []);
 
       return (
-        <Component ref={ref} {...rest as ComponentPropsT}>
+        <Component ref={ref} {...(rest as unknown as ComponentPropsT)}>
           {children}
         </Component>
       );