@dr.pogodin/react-utils 1.33.4 → 1.34.0

package/build/types-code/shared/utils/jest/index.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="trusted-types" />
-import { type ReactElement, type ReactNode } from 'react';
-import TU, { act } from 'react-dom/test-utils';
-import Renderer from 'react-test-renderer';
+import { type ReactNode, act } from 'react';
 /**
  * An alias for [act(..)](https://reactjs.org/docs/test-utils.html#act)
- * from `react-dom/test-utils`.
- * @param {function} action
+ * from `react`.
  */
 export { act };
 export { default as getGlobal } from './global';
@@ -45,41 +42,4 @@ export type MountedSceneT = HTMLElement & {
  *  attached.
  */
 export declare function mount(scene: ReactNode): MountedSceneT;
-/**
- * Renders provided ReactJS component into JSON representation of the component
- * tree, using [`react-test-renderer`](https://www.npmjs.com/package/react-test-renderer).
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of the rendered tree.
- * @example
- * import { JU } from '@dr.pogodin/react-utils';
- * console.log(JU.render(<div>Example</div>));
- */
-export declare function render(component: ReactElement): Renderer.ReactTestRendererJSON | Renderer.ReactTestRendererJSON[] | null;
-/**
- * Generates a shallow render of given ReactJS component, using
- * [react-test-renderer/shallow](https://reactjs.org/docs/shallow-renderer.html)
- * and returns the result.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of the shallow component's render tree.
- */
-export declare function shallowRender(component: ReactElement): ReactElement<any, string | React.JSXElementConstructor<any>>;
-/**
- * Makes a shallow snapshot test of the given ReactJS component, and also
- * returns JSON representation of the rendered component tree. Under the hood
- * it uses {@link module:JU.shallowRender shallowRender(..)} to generate
- * the render, then executes `expect(RENDER_RESULT).toMatchSnapshot()`,
- * and finally returns the `RENDER_RESULT` to the caller.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of shallow render.
- */
-export declare function shallowSnapshot(component: ReactElement): ReactElement<any, string | React.JSXElementConstructor<any>>;
-/**
- * Makes snapshot test of the given ReactJS component, and also returns JSON
- * representation of the rendered component tree. Under the hood, it uses
- * {@link module:JU.render render(..)} to render it, then executes
- * `expect(RENDER_RESULT).toMatchSnapshot()`, and then returns `RENDER_RESULT`.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON render of the component.
- */
-export declare function snapshot(component: ReactElement): Renderer.ReactTestRendererJSON | Renderer.ReactTestRendererJSON[] | null;
-export declare const simulate: typeof TU.Simulate;
+export declare function snapshot(element: React.ReactElement): ChildNode | null;

package/config/eslint/default.json

@@ -18,7 +18,8 @@
     "react/no-unknown-property": ["error", {
       "ignore": ["styleName"]
     }],
-    "react/react-in-jsx-scope": 0
+    "react/react-in-jsx-scope": 0,
+    "react/require-default-props": 0
   },
   "settings": {
     "import/resolver": {

package/config/eslint/jest.json

@@ -12,6 +12,7 @@
     "import/no-dynamic-require": 0,
     "import/no-extraneous-dependencies": 0,
     "no-console": 0,
-    "no-new-func": 0
+    "no-new-func": 0,
+    "react/require-default-props": 0
   }
 }

package/config/eslint/typescript.js

@@ -25,6 +25,11 @@ module.exports = {
       ignore: ['styleName'],
     }],
     'react/react-in-jsx-scope': 0,
+
+    // TODO: .defaultProps will be deprecated in React@19.
+    // Remove this rule override once AirBnB ESLint config is updated.
+    // (also remove it from sibling .json configs)
+    'react/require-default-props': 0,
   },
   settings: {
     'import/resolver': {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.33.4",
+  "version": "1.34.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,12 +8,12 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
+    "@babel/runtime": "^7.24.5",
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.1",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.9",
-    "@dr.pogodin/react-global-state": "^0.14.0",
-    "@dr.pogodin/react-themes": "^1.6.0",
+    "@dr.pogodin/react-global-state": "^0.14.1",
+    "@dr.pogodin/react-themes": "^1.6.1",
     "@jest/environment": "^29.7.0",
     "axios": "^1.6.8",
     "commander": "^12.0.0",
@@ -22,21 +22,21 @@
     "cookie": "^0.6.0",
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "express": "^4.19.2",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
-    "joi": "^17.12.3",
+    "joi": "^17.13.1",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
     "prop-types": "^15.8.1",
-    "qs": "^6.12.0",
+    "qs": "^6.12.1",
     "raf": "^3.4.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.23.0",
     "request-ip": "^3.3.0",
     "rimraf": "^5.0.5",
     "serialize-javascript": "^6.0.2",
@@ -47,21 +47,24 @@
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.4",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/eslint-plugin": "^7.23.5",
+    "@babel/cli": "^7.24.5",
+    "@babel/core": "^7.24.5",
+    "@babel/eslint-parser": "^7.24.5",
+    "@babel/eslint-plugin": "^7.24.5",
     "@babel/node": "^7.23.9",
     "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@babel/register": "^7.23.7",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.6",
-    "@tsd/typescript": "^5.4.4",
+    "@tsd/typescript": "^5.4.5",
     "@types/compression": "^1.7.5",
     "@types/config": "^3.3.4",
     "@types/cookie": "^0.6.0",
@@ -69,14 +72,13 @@
     "@types/csurf": "^1.11.5",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.0",
+    "@types/lodash": "^4.17.1",
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.24",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
-    "@types/react-test-renderer": "^18.0.7",
     "@types/request-ip": "^0.0.41",
     "@types/serialize-javascript": "^5.0.4",
     "@types/serve-favicon": "^2.5.7",
@@ -86,51 +88,50 @@
     "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "core-js": "^3.36.1",
-    "css-loader": "^7.1.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "core-js": "^3.37.0",
+    "css-loader": "^7.1.1",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "eslint": "^8.57.0",
     "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.2.0",
+    "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "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.8.1",
-    "mini-css-extract-plugin": "^2.8.1",
+    "memfs": "^4.9.2",
+    "mini-css-extract-plugin": "^2.9.0",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
-    "react-refresh": "^0.14.0",
-    "react-test-renderer": "^18.2.0",
+    "react-refresh": "^0.14.2",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.74.1",
-    "sass-loader": "^14.1.1",
+    "sass": "^1.76.0",
+    "sass-loader": "^14.2.1",
     "sitemap": "^7.1.1",
-    "stylelint": "^16.3.1",
+    "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.1.0",
-    "supertest": "^6.3.4",
+    "supertest": "^7.0.0",
     "tsc-alias": "^1.8.8",
     "typed-scss-modules": "^8.0.1",
-    "typescript": "^5.4.4",
-    "typescript-eslint": "^7.6.0",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.8.0",
     "webpack": "^5.91.0",
     "webpack-dev-middleware": "^7.2.1",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^5.10.0",
-    "workbox-core": "^7.0.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-webpack-plugin": "^7.0.0"
+    "workbox-core": "^7.1.0",
+    "workbox-precaching": "^7.1.0",
+    "workbox-webpack-plugin": "^7.1.0"
   },
   "engines": {
     "node": ">=18",

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

@@ -89,44 +89,6 @@ const BaseButton: React.FunctionComponent<PropsT> = ({
  */
 const ThemedButton = themed(BaseButton, 'Button', validThemeKeys, defaultTheme);
 
-/**
- * Implements themeable buttons, and button-line links (elements which look
- * like buttons, but behave as links) in the same uniform manner.
- * @param {object} [props] Component props.
- * @param {boolean} [props.active] Set `true` to render the button as
- * active, even if it is not active otherwise.
- * @param {boolean} [props.disabled] Set `true` to disable the button.
- * @param {boolean} [props.enforceA] When the button is rendered as `<Link>`
- * component, this prop enforces it to be rendered as a simple `<a>` element
- * (external link), rather than the React router's internal link.
- * See `<Link>` documentation to learn when links are rendered as `<a>`
- * by default.
- * @param {function} [props.onClick] Click event handler.
- * @param {function} [props.onMouseDown] Mouse down event handler.
- * @param {boolean} [props.openNewTab] Set `true` to open link in the new tab.
- * @param {boolean} [props.replace] When the button is rendered as
- * `<Link>`, and the target URL is internal, this property tells that
- * the new route should replace the last record in the browser's history,
- * rather than to be pushed as a new entry into the history stack.
- * @param {ButtonTheme} [props.theme] _Ad hoc_ button theme.
- * @param {object|string} [props.to] If specified, the button will be rendered
- * as `<Link>` (if not disabled), and it will point to the specified location
- * or URL.
- * @param {...any} [props....]
- * [Other properties of themeable components](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
- */
-BaseButton.defaultProps = {
-  active: false,
-  children: undefined,
-  disabled: false,
-  enforceA: false,
-  onClick: undefined,
-  onMouseDown: undefined,
-  openNewTab: false,
-  replace: false,
-  to: undefined,
-};
-
 BaseButton.propTypes = {
   active: PT.bool,
   children: PT.node,

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

@@ -62,10 +62,4 @@ Checkbox.propTypes = {
   theme: ThemedCheckbox.themeType.isRequired,
 };
 
-Checkbox.defaultProps = {
-  checked: undefined,
-  label: undefined,
-  onChange: undefined,
-};
-
 export default ThemedCheckbox;

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

@@ -127,19 +127,6 @@ const GenericLink: React.FunctionComponent<PropsT> = ({
   );
 };
 
-GenericLink.defaultProps = {
-  children: null,
-  className: '',
-  disabled: false,
-  enforceA: false,
-  keepScrollPosition: false,
-  onClick: undefined,
-  onMouseDown: undefined,
-  openNewTab: false,
-  replace: false,
-  to: '',
-};
-
 GenericLink.propTypes = {
   children: PT.node,
   className: PT.string,

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

@@ -50,8 +50,4 @@ Input.propTypes = {
   theme: ThemedInput.themeType.isRequired,
 };
 
-Input.defaultProps = {
-  label: undefined,
-};
-
 export default ThemedInput;

package/src/shared/components/MetaTags.tsx

@@ -147,15 +147,6 @@ const MetaTags: React.FunctionComponent<PropsT> & {
 
 MetaTags.Context = Context;
 
-MetaTags.defaultProps = {
-  children: null,
-  image: '',
-  siteName: '',
-  socialDescription: '',
-  socialTitle: '',
-  url: '',
-};
-
 MetaTags.propTypes = {
   children: PT.node,
   description: PT.string.isRequired,

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

@@ -1,7 +1,5 @@
 /* global document */
 
-import { noop } from 'lodash';
-
 import {
   type ReactNode,
   useEffect,
@@ -187,14 +185,6 @@ BaseModal.propTypes = {
   theme: ThemedModal.themeType.isRequired,
 };
 
-BaseModal.defaultProps = {
-  cancelOnScrolling: false,
-  children: null,
-  containerStyle: undefined,
-  dontDisableScrolling: false,
-  onCancel: noop,
-};
-
 export default ThemedModal;
 
 /* Non-themed version of the Modal. */

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

@@ -68,10 +68,4 @@ PageLayout.propTypes = {
   theme: ThemedPageLayout.themeType.isRequired,
 };
 
-PageLayout.defaultProps = {
-  children: null,
-  leftSidePanelContent: null,
-  rightSidePanelContent: null,
-};
-
 export default ThemedPageLayout;

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

@@ -101,12 +101,4 @@ TextArea.propTypes = {
   value: PT.string,
 };
 
-TextArea.defaultProps = {
-  disabled: false,
-  onChange: undefined,
-  onKeyDown: undefined,
-  placeholder: '',
-  value: undefined,
-};
-
 export default ThemedTextArea;

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

@@ -350,8 +350,4 @@ Tooltip.propTypes = {
   theme: PT.shape({}).isRequired,
 };
 
-Tooltip.defaultProps = {
-  children: null,
-};
-
 export default Tooltip;

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

@@ -59,7 +59,7 @@ type HeapT = {
  */
 const Wrapper: React.FunctionComponent<PropsT> = ({
   children,
-  placement,
+  placement = PLACEMENTS.ABOVE_CURSOR,
   tip,
   theme,
 }) => {
@@ -198,10 +198,4 @@ Wrapper.propTypes = {
   tip: PT.node,
 };
 
-Wrapper.defaultProps = {
-  children: null,
-  placement: PLACEMENTS.ABOVE_CURSOR,
-  tip: null,
-};
-
 export default e;

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

@@ -83,9 +83,4 @@ YouTubeVideo.propTypes = {
   title: PT.string,
 };
 
-YouTubeVideo.defaultProps = {
-  autoplay: false,
-  title: '',
-};
-
 export default ThemedYouTubeVideo;

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

@@ -132,9 +132,4 @@ Options.propTypes = {
   options: optionsValidator.isRequired,
 };
 
-Options.defaultProps = {
-  containerStyle: undefined,
-  filter: undefined,
-};
-
 export default Options;

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

@@ -171,12 +171,4 @@ BaseCustomDropdown.propTypes = {
   value: valueValidator,
 };
 
-BaseCustomDropdown.defaultProps = {
-  filter: undefined,
-  label: undefined,
-  onChange: undefined,
-  options: [],
-  value: undefined,
-};
-
 export default ThemedCustomDropdown;

package/src/shared/components/selectors/NativeDropdown/index.tsx

@@ -108,12 +108,4 @@ Dropdown.propTypes = {
   value: valueValidator,
 };
 
-Dropdown.defaultProps = {
-  filter: undefined,
-  label: undefined,
-  onChange: undefined,
-  options: [],
-  value: '',
-};
-
 export default ThemedDropdown;

package/src/shared/components/selectors/Switch/index.tsx

@@ -90,11 +90,4 @@ BaseSwitch.propTypes = {
   value: valueValidator,
 };
 
-BaseSwitch.defaultProps = {
-  label: undefined,
-  onChange: undefined,
-  options: [],
-  value: undefined,
-};
-
 export default ThemedSwitch;

package/src/shared/utils/jest/index.tsx

@@ -1,20 +1,15 @@
-/* global expect, jest, document */
+/* global jest, document */
 /* eslint-disable import/no-extraneous-dependencies */
 
 import mockdate from 'mockdate';
-import { type ReactElement, type ReactNode } from 'react';
+import { type ReactNode, act } from 'react';
 import { type Root, createRoot } from 'react-dom/client';
-import TU, { act } from 'react-dom/test-utils';
 
-/* eslint-disable import/no-extraneous-dependencies */
-import Renderer from 'react-test-renderer';
-import { type ShallowRenderer, createRenderer } from 'react-test-renderer/shallow';
-/* eslint-enable import/no-extraneous-dependencies */
+import { render } from '@testing-library/react';
 
 /**
  * An alias for [act(..)](https://reactjs.org/docs/test-utils.html#act)
- * from `react-dom/test-utils`.
- * @param {function} action
+ * from `react`.
  */
 export { act };
 
@@ -86,10 +81,18 @@ export function mount(scene: ReactNode): MountedSceneT {
 
   const res: MountedSceneT = (element as unknown) as MountedSceneT;
   res.destroy = () => {
+    // NOTE: As it seems @testing-library may reset this flag to false
+    // when it is simulating user events.
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
     act(() => root.unmount());
     res.remove();
   };
 
+  // NOTE: As it seems @testing-library may reset this flag to false
+  // when it is simulating user events.
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   act(() => {
     root = createRoot(res);
     root.render(scene);
@@ -97,61 +100,8 @@ export function mount(scene: ReactNode): MountedSceneT {
   return res;
 }
 
-/* OLD STUFF BELOW THIS MARK */
-
-/**
- * Renders provided ReactJS component into JSON representation of the component
- * tree, using [`react-test-renderer`](https://www.npmjs.com/package/react-test-renderer).
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of the rendered tree.
- * @example
- * import { JU } from '@dr.pogodin/react-utils';
- * console.log(JU.render(<div>Example</div>));
- */
-export function render(component: ReactElement) {
-  return Renderer.create(component).toJSON();
-}
-
-/**
- * Generates a shallow render of given ReactJS component, using
- * [react-test-renderer/shallow](https://reactjs.org/docs/shallow-renderer.html)
- * and returns the result.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of the shallow component's render tree.
- */
-export function shallowRender(component: ReactElement) {
-  const renderer: ShallowRenderer = createRenderer();
-  renderer.render(component);
-  return renderer.getRenderOutput();
-}
-
-/**
- * Makes a shallow snapshot test of the given ReactJS component, and also
- * returns JSON representation of the rendered component tree. Under the hood
- * it uses {@link module:JU.shallowRender shallowRender(..)} to generate
- * the render, then executes `expect(RENDER_RESULT).toMatchSnapshot()`,
- * and finally returns the `RENDER_RESULT` to the caller.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON representation of shallow render.
- */
-export function shallowSnapshot(component: ReactElement) {
-  const res = shallowRender(component);
-  expect(res).toMatchSnapshot();
-  return res;
-}
-
-/**
- * Makes snapshot test of the given ReactJS component, and also returns JSON
- * representation of the rendered component tree. Under the hood, it uses
- * {@link module:JU.render render(..)} to render it, then executes
- * `expect(RENDER_RESULT).toMatchSnapshot()`, and then returns `RENDER_RESULT`.
- * @param {object} component ReactJS component to render.
- * @return {object} JSON render of the component.
- */
-export function snapshot(component: ReactElement) {
-  const res = render(component);
+export function snapshot(element: React.ReactElement) {
+  const res = render(element).asFragment().firstChild;
   expect(res).toMatchSnapshot();
   return res;
 }
-
-export const simulate = TU.Simulate;

package/src/shared/utils/splitComponent.tsx

@@ -245,11 +245,7 @@ export default function splitComponent<
 
   CodeSplit.propTypes = {
     children: PT.node,
-  } as React.WeakValidationMap<ComponentPropsT>;
-
-  CodeSplit.defaultProps = {
-    children: undefined,
-  } as Partial<ComponentPropsT>;
+  } as PT.WeakValidationMap<ComponentPropsT>;
 
   return CodeSplit;
 }