@dr.pogodin/react-utils 1.40.14 → 1.41.1

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

@@ -1,8 +1,11 @@
+import type { RefObject } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
 type ThemeKeyT = 'container' | 'input' | 'label';
-declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: React.ReactNode;
+    ref?: RefObject<HTMLInputElement>;
     testId?: string;
     theme: Theme<ThemeKeyT>;
-} & React.RefAttributes<HTMLInputElement>>;
+};
+declare const _default: import("@dr.pogodin/react-themes").ThemedComponent<PropsT>;
 export default _default;

package/build/types-code/shared/components/WithTooltip/Tooltip.d.ts

@@ -3,7 +3,7 @@
  * hierarchy, and with sub-components managed without React to achieve the best
  * performance during animation.
  */
-import { type ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode, type RefObject } from 'react';
 export declare enum PLACEMENTS {
     ABOVE_CURSOR = "ABOVE_CURSOR",
     ABOVE_ELEMENT = "ABOVE_ELEMENT",
@@ -11,8 +11,9 @@ export declare enum PLACEMENTS {
     BELOW_ELEMENT = "BELOW_ELEMENT"
 }
 export type ThemeKeysT = 'appearance' | 'arrow' | 'content' | 'container';
-declare const Tooltip: React.ForwardRefExoticComponent<{
+declare const Tooltip: FunctionComponent<{
     children?: ReactNode;
+    ref?: RefObject<unknown>;
     theme: any;
-} & React.RefAttributes<unknown>>;
+}>;
 export default Tooltip;

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

@@ -1,3 +1,4 @@
+import { type FunctionComponent, type ReactNode, type RefObject } from 'react';
 import { type OptionT, type OptionsT, type ValueT } from '../../common';
 export type ContainerPosT = {
     left: number;
@@ -11,11 +12,12 @@ export type RefT = {
 type PropsT = {
     containerClass: string;
     containerStyle?: ContainerPosT;
-    filter?: (item: OptionT<React.ReactNode> | ValueT) => boolean;
+    filter?: (item: OptionT<ReactNode> | ValueT) => boolean;
     optionClass: string;
-    options: Readonly<OptionsT<React.ReactNode>>;
+    options: Readonly<OptionsT<ReactNode>>;
     onCancel: () => void;
     onChange: (value: ValueT) => void;
+    ref?: RefObject<RefT | null>;
 };
-declare const Options: React.ForwardRefExoticComponent<PropsT & React.RefAttributes<RefT>>;
+declare const Options: FunctionComponent<PropsT>;
 export default Options;

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

@@ -1,4 +1,4 @@
-import { type ComponentType, type ReactNode } from 'react';
+import { type ComponentType, type FunctionComponent, type ReactNode, type RefObject } from 'react';
 import { type ChunkGroupsT } from './globalState';
 /**
  * Client-side only! Ensures all CSS stylesheets required for the specified
@@ -33,9 +33,10 @@ type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
  */
 export default function splitComponent<ComponentPropsT extends {
     children?: ReactNode;
+    ref?: RefObject<unknown>;
 }>({ chunkName, getComponent, placeholder, }: {
     chunkName: string;
     getComponent: () => Promise<ComponentOrModule<ComponentPropsT>>;
     placeholder?: ReactNode;
-}): React.FunctionComponent<ComponentPropsT>;
+}): FunctionComponent<ComponentPropsT>;
 export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.40.14",
+  "version": "1.41.1",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.2",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.3",
     "@dr.pogodin/csurf": "^1.14.1",
-    "@dr.pogodin/js-utils": "^0.0.12",
-    "@dr.pogodin/react-global-state": "^0.17.5",
-    "@dr.pogodin/react-themes": "^1.7.0",
+    "@dr.pogodin/js-utils": "^0.0.13",
+    "@dr.pogodin/react-global-state": "^0.18.0",
+    "@dr.pogodin/react-themes": "^1.8.0",
     "@jest/environment": "^29.7.0",
     "axios": "^1.7.9",
     "commander": "^12.1.0",
@@ -32,10 +32,10 @@
     "node-forge": "^1.3.1",
     "qs": "^6.13.1",
     "raf": "^3.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^6.28.1",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
@@ -56,8 +56,8 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/register": "^7.25.9",
-    "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
-    "@dr.pogodin/babel-preset-svgr": "^1.8.0",
+    "@dr.pogodin/babel-plugin-transform-assets": "^1.2.4",
+    "@dr.pogodin/babel-preset-svgr": "^1.9.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
@@ -74,8 +74,8 @@
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/react-helmet": "^6.1.11",
     "@types/request-ip": "^0.0.41",
     "@types/serialize-javascript": "^5.0.4",
@@ -96,12 +96,12 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.10.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "memfs": "^4.15.0",
+    "memfs": "^4.15.1",
     "mini-css-extract-plugin": "^2.9.2",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
@@ -109,7 +109,7 @@
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
-    "react-refresh": "^0.14.2",
+    "react-refresh": "^0.16.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.83.0",
@@ -120,10 +120,10 @@
     "stylelint-config-standard-scss": "^14.0.0",
     "supertest": "^7.0.0",
     "tsc-alias": "^1.8.10",
-    "tstyche": "^3.1.1",
+    "tstyche": "^3.2.0",
     "typed-scss-modules": "^8.0.1",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.1",
+    "typescript-eslint": "^8.18.2",
     "webpack": "^5.97.1",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",

package/src/server/renderer.tsx

@@ -437,6 +437,8 @@ export default function factory(
         const renderPass = async () => {
           ssrContext.chunks = [];
           return new Promise<PipeableStream>((resolve, reject) => {
+            // TODO: pipeableStream has .abort() method,
+            // and we should wire it up to the SSR timeout below.
             const pipeableStream = renderToPipeableStream(
               <GlobalStateProvider
                 initialState={ssrContext.state}

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

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import type { FunctionComponent, RefObject } from 'react';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
@@ -11,28 +11,26 @@ type ThemeKeyT =
 
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
+  ref?: RefObject<HTMLInputElement>;
   testId?: string;
   theme: Theme<ThemeKeyT>;
 };
 
 /**
  * Themeable input field, based on the standard HTML `<input>` element.
- * @param [props]
  * @param [props.label] Input label.
  * @param [props.theme] _Ad hoc_ theme.
  * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  * @param [props...] Any other properties are passed to the underlying
  * `<input>` element.
  */
-const Input = forwardRef<HTMLInputElement, PropsT>((
-  {
-    label,
-    testId,
-    theme,
-    ...rest
-  }: PropsT,
+const Input: FunctionComponent<PropsT> = ({
+  label,
   ref,
-) => (
+  testId,
+  theme,
+  ...rest
+}) => (
   <span className={theme.container}>
     { label === undefined ? null : <div className={theme.label}>{label}</div> }
     <input
@@ -42,6 +40,6 @@ const Input = forwardRef<HTMLInputElement, PropsT>((
       {...rest} // eslint-disable-line react/jsx-props-no-spreading
     />
   </span>
-));
+);
 
 export default themed(Input, 'Input', defaultTheme);

package/src/shared/components/WithTooltip/Tooltip.tsx

@@ -3,11 +3,11 @@
  * hierarchy, and with sub-components managed without React to achieve the best
  * performance during animation.
  */
-/* global document, window */
 
 import {
+  type FunctionComponent,
   type ReactNode,
-  forwardRef,
+  type RefObject,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -269,10 +269,11 @@ function setComponentPositions(
 }
 
 /* The Tooltip component itself. */
-const Tooltip = forwardRef<unknown, {
+const Tooltip: FunctionComponent<{
   children?: ReactNode;
+  ref?: RefObject<unknown>;
   theme: any;
-}>(({ children, theme }, ref) => {
+}> = ({ children, ref, theme }) => {
   // NOTE: The way it has to be implemented, for clean mounting and unmounting
   // at the client side, the <Tooltip> is fully mounted into DOM in the next
   // rendering cycles, and only then it can be correctly measured and positioned.
@@ -340,6 +341,6 @@ const Tooltip = forwardRef<unknown, {
   ]);
 
   return components ? createPortal(children, components.content) : null;
-});
+};
 
 export default Tooltip;

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

@@ -1,6 +1,7 @@
 /* global window */
 
 import {
+  type FunctionComponent,
   type ReactNode,
   useEffect,
   useRef,
@@ -49,12 +50,11 @@ type HeapT = {
  * **Children:** Children are rendered in the place of `<WithTooltip>`,
  * and when hovered the tooltip is shown. By default the wrapper itself is
  * `<div>` block with `display: inline-block`.
- * @param {object} props Component properties.
- * @param {React.node} props.tip &ndash; Anything React is able to render,
+ * @param tip &ndash; Anything React is able to render,
  * _e.g._ a tooltip text. This will be the tooltip content.
  * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.
  */
-const Wrapper: React.FunctionComponent<PropsT> = ({
+const Wrapper: FunctionComponent<PropsT> = ({
   children,
   placement = PLACEMENTS.ABOVE_CURSOR,
   tip,
@@ -66,7 +66,7 @@ const Wrapper: React.FunctionComponent<PropsT> = ({
     triggeredByTouch: false,
     timerId: undefined,
   });
-  const tooltipRef = useRef<TooltipRefT>();
+  const tooltipRef = useRef<TooltipRefT>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [showTooltip, setShowTooltip] = useState(false);
 

package/src/shared/components/selectors/CustomDropdown/Options/index.tsx

@@ -1,4 +1,10 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import {
+  type FunctionComponent,
+  type ReactNode,
+  type RefObject,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 
 import { BaseModal } from 'components/Modal';
 
@@ -28,14 +34,15 @@ export type RefT = {
 type PropsT = {
   containerClass: string;
   containerStyle?: ContainerPosT;
-  filter?: (item: OptionT<React.ReactNode> | ValueT) => boolean;
+  filter?: (item: OptionT<ReactNode> | ValueT) => boolean;
   optionClass: string;
-  options: Readonly<OptionsT<React.ReactNode>>;
+  options: Readonly<OptionsT<ReactNode>>;
   onCancel: () => void;
   onChange: (value: ValueT) => void;
+  ref?: RefObject<RefT | null>;
 };
 
-const Options = forwardRef<RefT, PropsT>(({
+const Options: FunctionComponent<PropsT> = ({
   containerClass,
   containerStyle,
   filter,
@@ -43,7 +50,8 @@ const Options = forwardRef<RefT, PropsT>(({
   onChange,
   optionClass,
   options,
-}, ref) => {
+  ref,
+}) => {
   const opsRef = useRef<HTMLDivElement>(null);
 
   useImperativeHandle(ref, () => ({
@@ -51,7 +59,7 @@ const Options = forwardRef<RefT, PropsT>(({
       const e = opsRef.current?.parentElement;
       if (!e) return undefined;
 
-      const rect = opsRef.current?.getBoundingClientRect();
+      const rect = opsRef.current!.getBoundingClientRect();
       const style = window.getComputedStyle(e);
       const mBottom = parseFloat(style.marginBottom);
       const mTop = parseFloat(style.marginTop);
@@ -62,7 +70,7 @@ const Options = forwardRef<RefT, PropsT>(({
     },
   }), []);
 
-  const optionNodes: React.ReactNode[] = [];
+  const optionNodes: ReactNode[] = [];
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
     if (option !== undefined && (!filter || filter(option))) {
@@ -98,7 +106,7 @@ const Options = forwardRef<RefT, PropsT>(({
       // dropdowns during the scrolling (that would need to re-position it in
       // response to the position changes of the root dropdown element).
       cancelOnScrolling
-      containerStyle={containerStyle}
+      style={containerStyle}
       dontDisableScrolling
       onCancel={onCancel}
       theme={{
@@ -112,6 +120,6 @@ const Options = forwardRef<RefT, PropsT>(({
       <div ref={opsRef}>{optionNodes}</div>
     </BaseModal>
   );
-});
+};
 
 export default Options;

package/src/shared/utils/splitComponent.tsx

@@ -3,8 +3,9 @@
 
 import {
   type ComponentType,
+  type FunctionComponent,
   type ReactNode,
-  forwardRef,
+  type RefObject,
   lazy,
   Suspense,
   useInsertionEffect,
@@ -181,7 +182,7 @@ type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
  * @return {React.ElementType}
  */
 export default function splitComponent<
-  ComponentPropsT extends { children?: ReactNode },
+  ComponentPropsT extends { children?: ReactNode; ref?: RefObject<unknown> },
 >({
   chunkName,
   getComponent,
@@ -210,10 +211,11 @@ export default function splitComponent<
       await bookStyleSheets(chunkName, clientChunkGroups, false);
     }
 
-    const Wrapper = forwardRef<unknown, ComponentPropsT>((
-      { children, ...rest },
+    const Wrapper: FunctionComponent<ComponentPropsT> = ({
+      children,
       ref,
-    ) => {
+      ...rest
+    }) => {
       // On the server side we'll assert the chunk name here,
       // and also push it to the SSR chunks array.
       if (IS_SERVER_SIDE) {
@@ -230,11 +232,11 @@ export default function splitComponent<
       }, []);
 
       return (
-        <Component ref={ref} {...(rest as unknown as ComponentPropsT)}>
+        <Component {...(rest as unknown as ComponentPropsT)} ref={ref}>
           {children}
         </Component>
       );
-    });
+    };
 
     return { default: Wrapper };
   });