@dr.pogodin/react-utils 1.40.3 → 1.40.5

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/config/babel/webpack.js

@@ -26,8 +26,8 @@ function newBaseConfig(options) {
             ['@babel/env', {
                     // Leaves it to the Webpack to deal with modules.
                     modules: (_a = options.modules) !== null && _a !== void 0 ? _a : false,
-                    // Chrome 69 is the browser/WebView for Android 9 (API level 28).
-                    targets: options.targets || 'defaults or chrome >= 69',
+                    // Chrome 44 is the browser/WebView for Android 6.0 (API level 23).
+                    targets: options.targets || 'defaults or chrome >= 44',
                 }],
             // TODO: Starting from Babel 8, "automatic" will be the default runtime,
             // thus once upgraded to Babel 8, runtime should be removed from

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.40.3",
+  "version": "1.40.5",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -15,7 +15,7 @@
     "@dr.pogodin/react-global-state": "^0.17.1",
     "@dr.pogodin/react-themes": "^1.7.0",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.7.6",
+    "axios": "^1.7.7",
     "commander": "^12.1.0",
     "compression": "^1.7.4",
     "config": "^3.3.12",
@@ -23,7 +23,7 @@
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.13",
-    "express": "^4.19.2",
+    "express": "^4.20.0",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
     "joi": "^17.13.3",
@@ -35,7 +35,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.26.1",
+    "react-router-dom": "^6.26.2",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
@@ -64,7 +64,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.7",
     "@types/compression": "^1.7.5",
-    "@types/config": "^3.3.4",
+    "@types/config": "^3.3.5",
     "@types/cookie": "^0.6.0",
     "@types/cookie-parser": "^1.4.7",
     "@types/csurf": "^1.11.5",
@@ -94,10 +94,10 @@
     "eslint-config-airbnb": "^19.0.4",
     "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.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -106,14 +106,14 @@
     "mini-css-extract-plugin": "^2.9.1",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.45",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
     "react-refresh": "^0.14.2",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.77.8",
+    "sass": "^1.78.0",
     "sass-loader": "^16.0.1",
     "sitemap": "^8.0.0",
     "source-map-loader": "^5.0.0",
@@ -123,8 +123,8 @@
     "tsc-alias": "^1.8.10",
     "tstyche": "^2.1.1",
     "typed-scss-modules": "^8.0.1",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.3.0",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.5.0",
     "webpack": "^5.94.0",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",

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;