@dr.pogodin/react-utils 1.43.27 → 1.43.29

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

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import { type Ref } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
 type ThemeKeyT = 'container' | 'input' | 'label';
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {

package/config/webpack/app-base.js

@@ -125,7 +125,7 @@ const utils_1 = require("@dr.pogodin/babel-plugin-react-css-modules/utils");
  *   - **`timestamp`** — The value set for `BUILD_TIMESTAMP`.
  */
 function configFactory(ops) {
-    var _a, _b;
+    var _a, _b, _c;
     const o = (0, lodash_1.defaults)((0, lodash_1.clone)(ops), {
         babelLoaderOptions: {},
         cssLocalIdent: '[hash:base64:6]',
@@ -211,7 +211,7 @@ function configFactory(ops) {
             o.workbox = {};
         plugins.push(new workbox_webpack_plugin_1.default.InjectManifest(Object.assign(Object.assign({ swSrc: node_path_1.default.resolve(__dirname, '../workbox/default.js') }, o.workbox), { swDest: '__service-worker.js' })));
     }
-    return {
+    const res = {
         context: o.context,
         entry,
         mode: o.mode,
@@ -302,12 +302,6 @@ function configFactory(ops) {
         plugins,
         resolve: {
             alias: {
-                // NOTE: The "conditionNames" workaround below messes up the loading of
-                // Babel's runtime helper for require of CJS and ES styles of modules
-                // (without this alias it is resolved to
-                // @babel/runtime/helpers/esm/interopRequireDefault, which has
-                // the hepler function attached to "default" export).
-                '@babel/runtime/helpers/interopRequireDefault': node_path_1.default.resolve(o.context, 'node_modules/@babel/runtime/helpers/interopRequireDefault'),
                 // Aliases to JS an JSX files are handled by Babel.
                 assets: node_path_1.default.resolve(o.context, 'src/assets'),
                 components: node_path_1.default.resolve(o.context, 'src/shared/components'),
@@ -333,4 +327,26 @@ function configFactory(ops) {
             symlinks: false,
         },
     };
+    // TODO: Can we do anything better about it? Otherwise, we potentially
+    // have to alias all Babel's runtime helpers, otherwise if it tries to
+    // use a new helper it breaks (probably only production) build in a very
+    // confusing, hard to debug way. Not sure what to do, as the problem with
+    // RR exports is still there, and we still can't fully move to ES modules
+    // because Jest and other tools. Also such aliases easily break E2E tests
+    // with Jest (with our setup), that's why they are avoided when NODE_ENV
+    // is test (but it might be not the solution that always helps).
+    //
+    // NOTE: The "conditionNames" workaround below messes up the loading of
+    // Babel's runtime helper for require of CJS and ES styles of modules
+    // (without this alias it is resolved to
+    // @babel/runtime/helpers/esm/interopRequireDefault, which has
+    // the hepler function attached to "default" export).
+    if (process.env.NODE_ENV !== 'test') {
+        const aliases = (_c = res.resolve) === null || _c === void 0 ? void 0 : _c.alias;
+        aliases['@babel/runtime/helpers/defineProperty']
+            = node_path_1.default.resolve(o.context, 'node_modules/@babel/runtime/helpers/defineProperty');
+        aliases['@babel/runtime/helpers/interopRequireDefault']
+            = node_path_1.default.resolve(o.context, 'node_modules/@babel/runtime/helpers/interopRequireDefault');
+    }
+    return res;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.43.27",
+  "version": "1.43.29",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -11,12 +11,12 @@
     "@babel/runtime": "^7.27.4",
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.6",
     "@dr.pogodin/csurf": "^1.16.5",
-    "@dr.pogodin/js-utils": "^0.1.1",
+    "@dr.pogodin/js-utils": "^0.1.3",
     "@dr.pogodin/react-global-state": "^0.19.3",
     "@dr.pogodin/react-helmet": "^3.0.2",
     "@dr.pogodin/react-themes": "^1.9.2",
     "@jest/environment": "^30.0.5",
-    "axios": "^1.10.0",
+    "axios": "^1.11.0",
     "commander": "^14.0.0",
     "compression": "^1.8.1",
     "config": "^4.0.1",
@@ -55,7 +55,7 @@
     "@babel/preset-typescript": "^7.27.1",
     "@babel/register": "^7.27.1",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.5",
-    "@dr.pogodin/babel-preset-svgr": "^1.9.1",
+    "@dr.pogodin/babel-preset-svgr": "^1.9.2",
     "@dr.pogodin/eslint-configs": "^0.0.9",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
     "@testing-library/dom": "^10.4.0",
@@ -107,7 +107,7 @@
     "source-map-loader": "^5.0.0",
     "stylelint": "^16.22.0",
     "stylelint-config-standard-scss": "^15.0.1",
-    "supertest": "^7.1.3",
+    "supertest": "^7.1.4",
     "tsc-alias": "1.8.16",
     "tstyche": "^4.3.0",
     "typed-scss-modules": "^8.1.1",

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

@@ -1,4 +1,4 @@
-import type { FunctionComponent, Ref } from 'react';
+import { type FunctionComponent, type Ref, useRef } from 'react';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
@@ -27,19 +27,31 @@ const Input: FunctionComponent<PropsT> = ({
   testId,
   theme,
   ...rest
-}) => (
-  <span className={theme.container}>
-    { label === undefined ? null : <div className={theme.label}>{label}</div> }
-    <input
-      className={theme.input}
-      data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-      ref={ref}
+}) => {
+  const localRef = useRef<HTMLInputElement>(null);
+  return (
+    <span
+      className={theme.container}
+      onFocus={() => {
+        // TODO: It does not really work if a callback-style `ref` is passed in,
+        // we need a more complex logic to cover that case, but for now this serves
+        // the case we need it for.
+        if (typeof ref === 'object') ref?.current?.focus();
+        else localRef.current?.focus();
+      }}
+    >
+      {label === undefined ? null : <div className={theme.label}>{label}</div>}
+      <input
+        className={theme.input}
+        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
+        ref={ref ?? localRef}
 
-      // TODO: Avoid the spreading later.
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-    />
-  </span>
-);
+        // TODO: Avoid the spreading later.
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+      />
+    </span>
+  );
+};
 
 export default themed(Input, 'Input', defaultTheme);

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

@@ -23,5 +23,6 @@
 
   &.label {
     margin: 0 0.6em 0 1.5em;
+    pointer-events: none;
   }
 }

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

@@ -41,6 +41,8 @@ const TextArea: FunctionComponent<Props> = ({
   const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
   const [localValue, setLocalValue] = useState(value ?? '');
   if (value !== undefined && localValue !== value) setLocalValue(value);
 
@@ -73,7 +75,12 @@ const TextArea: FunctionComponent<Props> = ({
   }, [localValue]);
 
   return (
-    <div className={theme.container}>
+    <div
+      className={theme.container}
+      onFocus={() => {
+        textAreaRef.current?.focus();
+      }}
+    >
       {label === undefined ? null : <div className={theme.label}>{label}</div>}
       <textarea
         className={`${theme.textarea} ${theme.hidden}`}
@@ -111,6 +118,7 @@ const TextArea: FunctionComponent<Props> = ({
         }
         onKeyDown={onKeyDown}
         placeholder={placeholder}
+        ref={textAreaRef}
         style={{ height }}
         value={localValue}
       />

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

@@ -45,6 +45,7 @@
 
   &.label {
     margin: 0 0.6em 0 1.5em;
+    pointer-events: none;
   }
 
   &.option { color: black; }