@dr.pogodin/react-utils 1.44.9 → 1.45.0

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

@@ -1,3 +1,3 @@
 import { type PropsT, type ValueT } from '../common';
-declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<PropsT<React.ReactNode, (value: ValueT) => void>>;
+declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<PropsT<import("react").ReactNode, (value: ValueT) => void>>;
 export default _default;

package/build/types-code/shared/utils/webpack.d.ts

@@ -1,3 +1,7 @@
+type RequireWeakOptionsT = {
+    basePath?: string;
+    throwOnError?: boolean;
+};
 type RequireWeakResT<T> = T extends {
     default: infer D;
 } ? (D extends null | undefined ? T : D & Omit<T, 'default'>) : T;
@@ -8,7 +12,7 @@ type RequireWeakResT<T> = T extends {
  * @param [basePath]
  * @return Required module.
  */
-export declare function requireWeak<T extends object>(modulePath: string, basePath?: string): RequireWeakResT<T> | null;
+export declare function requireWeak<T extends object>(modulePath: string, basePathOrOptions?: string | RequireWeakOptionsT): RequireWeakResT<T> | null;
 /**
  * Resolves specified module path with help of Babel's module resolver.
  * Yes, the function itself just returns its argument to the caller, but Babel

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.44.9",
+  "version": "1.45.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -9,20 +9,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.7",
-    "@dr.pogodin/csurf": "^1.16.5",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.8",
+    "@dr.pogodin/csurf": "^1.16.6",
     "@dr.pogodin/js-utils": "^0.1.3",
-    "@dr.pogodin/react-global-state": "^0.19.4",
+    "@dr.pogodin/react-global-state": "^0.20.0",
     "@dr.pogodin/react-helmet": "^3.0.4",
-    "@dr.pogodin/react-themes": "^1.9.2",
-    "@jest/environment": "^30.1.2",
+    "@dr.pogodin/react-themes": "^1.9.3",
+    "@jest/environment": "^30.2.0",
     "axios": "^1.12.2",
     "commander": "^14.0.1",
     "compression": "^1.8.1",
     "config": "^4.1.1",
     "cookie": "^1.0.2",
     "cookie-parser": "^1.4.7",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "dayjs": "^1.11.18",
     "express": "^5.1.0",
     "helmet": "^8.1.0",
@@ -32,16 +32,16 @@
     "node-forge": "^1.3.1",
     "qs": "^6.14.0",
     "raf": "^3.4.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-router": "^7.9.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router": "^7.9.4",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
-    "serialize-javascript": "^6.0.2",
+    "serialize-javascript": "^7.0.0",
     "serve-favicon": "^2.5.1",
     "source-map-support": "^0.5.21",
     "uuid": "^13.0.0",
-    "winston": "^3.17.0"
+    "winston": "^3.18.3"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
@@ -55,7 +55,7 @@
     "@babel/register": "^7.28.3",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.5",
     "@dr.pogodin/babel-preset-svgr": "^1.9.2",
-    "@dr.pogodin/eslint-configs": "^0.0.12",
+    "@dr.pogodin/eslint-configs": "^0.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
     "@standard-schema/spec": "^1.0.0",
     "@testing-library/dom": "^10.4.1",
@@ -72,25 +72,25 @@
     "@types/morgan": "^1.9.10",
     "@types/node-forge": "^1.3.14",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "@types/request-ip": "^0.0.41",
     "@types/serialize-javascript": "^5.0.4",
     "@types/serve-favicon": "^2.5.7",
     "@types/supertest": "^6.0.3",
     "@types/webpack": "^5.28.5",
-    "@types/webpack-hot-middleware": "^2.25.10",
+    "@types/webpack-hot-middleware": "^2.25.11",
     "autoprefixer": "^10.4.21",
-    "babel-jest": "^30.1.2",
+    "babel-jest": "^30.2.0",
     "babel-loader": "^10.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
-    "core-js": "^3.45.1",
+    "core-js": "^3.46.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.1.3",
-    "jest-environment-jsdom": "^30.1.2",
-    "memfs": "^4.46.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "memfs": "^4.49.0",
     "mini-css-extract-plugin": "^2.9.4",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
@@ -98,22 +98,22 @@
     "postcss-loader": "^8.2.0",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
-    "react-refresh": "^0.17.0",
+    "react-refresh": "^0.18.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.93.2",
     "sass-loader": "^16.0.5",
     "sitemap": "^8.0.0",
     "source-map-loader": "^5.0.0",
-    "stylelint": "^16.24.0",
+    "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "supertest": "^7.1.4",
     "tsc-alias": "1.8.16",
     "tstyche": "^4.3.0",
     "typed-scss-modules": "^8.1.1",
-    "typescript": "^5.9.2",
-    "webpack": "^5.101.3",
-    "webpack-dev-middleware": "^7.4.4",
+    "typescript": "^5.9.3",
+    "webpack": "^5.102.1",
+    "webpack-dev-middleware": "^7.4.5",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",
     "workbox-core": "^7.3.0",
@@ -121,8 +121,8 @@
     "workbox-webpack-plugin": "^7.3.0"
   },
   "engines": {
-    "node": ">=18",
-    "npm": ">=9"
+    "node": ">=20",
+    "npm": ">=10"
   },
   "main": "./node-entry.js",
   "source": "./src/index.ts",

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

@@ -5,7 +5,6 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react';
 
 import ReactDom from 'react-dom';
@@ -54,16 +53,6 @@ const BaseModal: FunctionComponent<PropsT> = ({
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const overlayRef = useRef<HTMLDivElement | null>(null);
-  const [portal, setPortal] = useState<HTMLDivElement>();
-
-  useEffect(() => {
-    const p = document.createElement('div');
-    document.body.appendChild(p);
-    setPortal(p);
-    return () => {
-      document.body.removeChild(p);
-    };
-  }, []);
 
   // Sets up modal cancellation of scrolling, if opted-in.
   useEffect(() => {
@@ -107,9 +96,9 @@ const BaseModal: FunctionComponent<PropsT> = ({
     />
   ), []);
 
-  return portal ? ReactDom.createPortal(
+  return ReactDom.createPortal(
     (
-      <>
+      <div>
         {focusLast}
         <div
           aria-label="Cancel"
@@ -176,10 +165,10 @@ const BaseModal: FunctionComponent<PropsT> = ({
           tabIndex={0}
         />
         {focusLast}
-      </>
+      </div>
     ),
-    portal,
-  ) : null;
+    document.body,
+  );
 };
 
 export default themed(BaseModal, 'Modal', baseTheme);

package/src/shared/components/WithTooltip/{Tooltip.ts → Tooltip.tsx}

@@ -8,10 +8,8 @@ import {
   type FunctionComponent,
   type ReactNode,
   type RefObject,
-  useEffect,
   useImperativeHandle,
   useRef,
-  useState,
 } from 'react';
 
 import { createPortal } from 'react-dom';
@@ -47,42 +45,10 @@ type ComponentsT = {
   content: HTMLDivElement;
 };
 
-type HeapT = {
-  lastElement?: HTMLElement;
-  lastPageX: number;
-  lastPageY: number;
-  lastPlacement?: PLACEMENTS | undefined;
-};
-
 export type ThemeKeysT = 'appearance' | 'arrow' | 'content' | 'container';
 
 type TooltipThemeT = Theme<ThemeKeysT>;
 
-/**
- * Creates tooltip components.
- * @ignore
- * @param {object} theme Themes to use for tooltip container, arrow,
- *  and content.
- * @return {object} Object with DOM references to the container components:
- *  container, arrow, content.
- */
-function createTooltipComponents(theme: TooltipThemeT): ComponentsT {
-  const arrow = document.createElement('div');
-  if (theme.arrow) arrow.setAttribute('class', theme.arrow);
-
-  const content = document.createElement('div');
-  if (theme.content) content.setAttribute('class', theme.content);
-
-  const container = document.createElement('div');
-  if (theme.container) container.setAttribute('class', theme.container);
-
-  container.appendChild(arrow);
-  container.appendChild(content);
-  document.body.appendChild(container);
-
-  return { arrow, container, content };
-}
-
 type TooltipRectsT = {
   arrow: DOMRect;
   container: DOMRect;
@@ -272,14 +238,9 @@ const Tooltip: FunctionComponent<{
   // Thus, when we create the <Tooltip> we have to record its target positioning
   // details, and then apply them when it is created.
 
-  const { current: heap } = useRef<HeapT>({
-    lastElement: undefined,
-    lastPageX: 0,
-    lastPageY: 0,
-    lastPlacement: undefined,
-  });
-
-  const [components, setComponents] = useState<ComponentsT | null>(null);
+  const arrowRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
 
   const pointTo = (
     pageX: number,
@@ -287,52 +248,27 @@ const Tooltip: FunctionComponent<{
     placement: PLACEMENTS,
     element: HTMLElement,
   ) => {
-    heap.lastElement = element;
-    heap.lastPageX = pageX;
-    heap.lastPageY = pageY;
-    heap.lastPlacement = placement;
-
-    if (components) {
-      setComponentPositions(pageX, pageY, placement, element, components);
+    if (!arrowRef.current || !containerRef.current || !contentRef.current) {
+      throw Error('Internal error');
     }
+
+    setComponentPositions(pageX, pageY, placement, element, {
+      arrow: arrowRef.current,
+      container: containerRef.current,
+      content: contentRef.current,
+    });
   };
   useImperativeHandle(ref, () => ({ pointTo }));
 
-  /* Inits and destroys tooltip components. */
-  useEffect(() => {
-    const x = createTooltipComponents(theme);
-    setComponents(x);
-    return () => {
-      document.body.removeChild(x.container);
-      setComponents(null);
-    };
-  }, [theme]);
-
-  useEffect(() => {
-    if (components) {
-      setComponentPositions(
-        heap.lastPageX,
-        heap.lastPageY,
-        heap.lastPlacement,
-        heap.lastElement,
-        components,
-      );
-    }
-  }, [
-    components,
-    // BEWARE: Careful about these dependencies - they are updated when mouse
-    // is moved over the tool-tipped element, thus potentially may cause
-    // unnecessary firing of this effect on each mouse event. It does not
-    // happen now just because the mouse movements themselves are not causing
-    // the component re-rendering, thus dependencies of this effect are not
-    // really re-evaluated.
-    heap.lastPageX,
-    heap.lastPageY,
-    heap.lastPlacement,
-    heap.lastElement,
-  ]);
-
-  return components ? createPortal(children, components.content) : null;
+  return createPortal(
+    (
+      <div className={theme.container} ref={containerRef}>
+        <div className={theme.arrow} ref={arrowRef} />
+        <div className={theme.content} ref={contentRef}>{children}</div>
+      </div>
+    ),
+    document.body,
+  );
 };
 
 export default Tooltip;

package/src/shared/utils/webpack.ts

@@ -2,6 +2,11 @@ import type PathNS from 'node:path';
 
 import { IS_CLIENT_SIDE } from './isomorphy';
 
+type RequireWeakOptionsT = {
+  basePath?: string;
+  throwOnError?: boolean;
+};
+
 type RequireWeakResT<T> = T extends { default: infer D }
   ? (D extends null | undefined ? T : D & Omit<T, 'default'>)
   : T;
@@ -15,10 +20,24 @@ type RequireWeakResT<T> = T extends { default: infer D }
  */
 export function requireWeak<T extends object>(
   modulePath: string,
-  basePath?: string,
+
+  // TODO: For now `basePath` can be provided directly as a string here,
+  // for backward compatibility. Deprecate it in future, if any other
+  // breaking changes are done for requireWeak().
+  basePathOrOptions?: string | RequireWeakOptionsT,
 ): RequireWeakResT<T> | null {
   if (IS_CLIENT_SIDE) return null;
 
+  let basePath: string | undefined;
+  let ops: RequireWeakOptionsT;
+  if (typeof basePathOrOptions === 'string') {
+    basePath = basePathOrOptions;
+    ops = {};
+  } else {
+    ops = basePathOrOptions ?? {};
+    ({ basePath } = ops);
+  }
+
   // TODO: On one hand, this try/catch wrap silencing errors is bad, as it may
   // hide legit errors, in a way difficult to notice and understand; but on the
   // other hand it fails for some (unclear, but legit?) reasons in some
@@ -49,7 +68,8 @@ export function requireWeak<T extends object>(
       }
     });
     return res;
-  } catch {
+  } catch (error) {
+    if (ops.throwOnError) throw error;
     return null;
   }
 }