@dr.pogodin/react-utils 1.31.0 → 1.31.2

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

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
 declare const validThemeKeys: readonly ["container", "overlay"];
 type PropsT = {
+    cancelOnScrolling?: boolean;
     children?: ReactNode;
     containerStyle?: React.CSSProperties;
     dontDisableScrolling?: boolean;

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

@@ -1,17 +1,22 @@
 /// <reference types="react" />
 import { type OptionT, type OptionsT } from '../../common';
+export type ContainerPosT = {
+    left: number;
+    top: number;
+    width: number;
+};
+export declare function areEqual(a?: ContainerPosT, b?: ContainerPosT): boolean;
+export type RefT = {
+    measure: () => DOMRect | undefined;
+};
 type PropsT = {
-    anchorRect: {
-        bottom: number;
-        left: number;
-        width: number;
-    };
     containerClass: string;
+    containerStyle?: ContainerPosT;
     filter?: (item: OptionT<React.ReactNode> | string) => boolean;
     optionClass: string;
     options: OptionsT<React.ReactNode>;
     onCancel: () => void;
     onChange: (value: string) => void;
 };
-declare const Options: React.FunctionComponent<PropsT>;
+declare const Options: React.ForwardRefExoticComponent<PropsT & React.RefAttributes<RefT>>;
 export default Options;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import PT from 'prop-types';
 import type { Theme } from '@dr.pogodin/react-themes';
-export declare const validThemeKeys: readonly ["active", "arrow", "container", "dropdown", "hiddenOption", "label", "option", "select"];
+export declare const validThemeKeys: readonly ["active", "arrow", "container", "dropdown", "hiddenOption", "label", "option", "select", "upward"];
 export type OptionT<NameT> = {
     name?: NameT | null;
     value: string;

package/build/types-scss/src/shared/components/selectors/CustomDropdown/theme.scss.d.ts

@@ -8,3 +8,4 @@ export declare const hoc: string;
 export declare const label: string;
 export declare const option: string;
 export declare const select: string;
+export declare const upward: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.31.0",
+  "version": "1.31.2",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,14 +8,14 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.0",
+    "@babel/runtime": "^7.24.1",
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.12.0",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.9",
     "@dr.pogodin/react-global-state": "^0.13.0",
     "@dr.pogodin/react-themes": "^1.6.0",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "commander": "^12.0.0",
     "compression": "^1.7.4",
     "config": "^3.3.11",
@@ -23,7 +23,7 @@
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
-    "express": "^4.18.3",
+    "express": "^4.19.2",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
     "joi": "^17.12.2",
@@ -43,27 +43,27 @@
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
     "uuid": "^9.0.1",
-    "winston": "^3.12.0"
+    "winston": "^3.13.0"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.24.0",
-    "@babel/eslint-parser": "^7.23.10",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.3",
+    "@babel/eslint-parser": "^7.24.1",
     "@babel/eslint-plugin": "^7.23.5",
     "@babel/node": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@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",
-    "@tsconfig/recommended": "^1.0.3",
-    "@tsd/typescript": "^5.3.3",
+    "@tsconfig/recommended": "^1.0.4",
+    "@tsd/typescript": "^5.4.3",
     "@types/compression": "^1.7.5",
-    "@types/config": "^3.3.3",
+    "@types/config": "^3.3.4",
     "@types/cookie": "^0.6.0",
     "@types/cookie-parser": "^1.4.7",
     "@types/csurf": "^1.11.5",
@@ -73,7 +73,7 @@
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.2.66",
+    "@types/react": "^18.2.72",
     "@types/react-dom": "^18.2.22",
     "@types/react-helmet": "^6.1.11",
     "@types/react-test-renderer": "^18.0.7",
@@ -83,11 +83,11 @@
     "@types/supertest": "^6.0.2",
     "@types/uuid": "^9.0.8",
     "@types/webpack": "^5.28.5",
-    "autoprefixer": "^10.4.18",
+    "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.0",
+    "core-js": "^3.36.1",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "eslint": "^8.57.0",
@@ -97,16 +97,16 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "memfs": "^4.7.7",
+    "memfs": "^4.8.0",
     "mini-css-extract-plugin": "^2.8.1",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
@@ -117,15 +117,15 @@
     "sass": "^1.72.0",
     "sass-loader": "^14.1.1",
     "sitemap": "^7.1.1",
-    "stylelint": "^16.2.1",
+    "stylelint": "^16.3.1",
     "stylelint-config-standard-scss": "^13.0.0",
     "supertest": "^6.3.4",
     "tsc-alias": "^1.8.8",
-    "typed-scss-modules": "^8.0.0",
-    "typescript": "^5.4.2",
-    "typescript-eslint": "^7.2.0",
-    "webpack": "^5.90.3",
-    "webpack-dev-middleware": "^7.0.0",
+    "typed-scss-modules": "^8.0.1",
+    "typescript": "^5.4.3",
+    "typescript-eslint": "^7.4.0",
+    "webpack": "^5.91.0",
+    "webpack-dev-middleware": "^7.1.1",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^5.10.0",
     "workbox-core": "^7.0.0",

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

@@ -20,6 +20,7 @@ import S from './styles.scss';
 const validThemeKeys = ['container', 'overlay'] as const;
 
 type PropsT = {
+  cancelOnScrolling?: boolean;
   children?: ReactNode;
   containerStyle?: React.CSSProperties;
   dontDisableScrolling?: boolean;
@@ -39,6 +40,7 @@ type PropsT = {
  * @param {ModalTheme} [props.theme] _Ad hoc_ theme.
  */
 const BaseModal: React.FunctionComponent<PropsT> = ({
+  cancelOnScrolling,
   children,
   containerStyle,
   dontDisableScrolling,
@@ -58,6 +60,20 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
     };
   }, []);
 
+  // Sets up modal cancellation of scrolling, if opted-in.
+  useEffect(() => {
+    if (cancelOnScrolling && onCancel) {
+      window.addEventListener('scroll', onCancel);
+      window.addEventListener('wheel', onCancel);
+    }
+    return () => {
+      if (cancelOnScrolling && onCancel) {
+        window.removeEventListener('scroll', onCancel);
+        window.removeEventListener('wheel', onCancel);
+      }
+    };
+  }, [cancelOnScrolling, onCancel]);
+
   // Disables window scrolling, if it is not opted-out.
   useEffect(() => {
     if (!dontDisableScrolling) {
@@ -139,6 +155,7 @@ const ThemedModal = themed(
 );
 
 BaseModal.propTypes = {
+  cancelOnScrolling: PT.bool,
   children: PT.node,
   containerStyle: PT.shape({}),
   dontDisableScrolling: PT.bool,
@@ -147,6 +164,7 @@ BaseModal.propTypes = {
 };
 
 BaseModal.defaultProps = {
+  cancelOnScrolling: false,
   children: null,
   containerStyle: undefined,
   dontDisableScrolling: false,

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

@@ -1,5 +1,5 @@
 import PT from 'prop-types';
-import { useEffect } from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 
 import { BaseModal } from 'components/Modal';
 
@@ -12,13 +12,23 @@ import {
   optionValueName,
 } from '../../common';
 
+export type ContainerPosT = {
+  left: number;
+  top: number;
+  width: number;
+};
+
+export function areEqual(a?: ContainerPosT, b?: ContainerPosT): boolean {
+  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;
+}
+
+export type RefT = {
+  measure: () => DOMRect | undefined;
+};
+
 type PropsT = {
-  anchorRect: {
-    bottom: number;
-    left: number;
-    width: number;
-  };
   containerClass: string;
+  containerStyle?: ContainerPosT;
   filter?: (item: OptionT<React.ReactNode> | string) => boolean;
   optionClass: string;
   options: OptionsT<React.ReactNode>;
@@ -26,29 +36,20 @@ type PropsT = {
   onChange: (value: string) => void;
 };
 
-const Options: React.FunctionComponent<PropsT> = ({
-  anchorRect,
+const Options = forwardRef<RefT, PropsT>(({
   containerClass,
+  containerStyle,
   filter,
   onCancel,
   onChange,
   optionClass,
   options,
-}) => {
-  // Closes the dropdown (cancels the selection) on any page scrolling attempt.
-  // This is the same native <select> elements do on scrolling, and at least for
-  // now we have no reason to deal with complications needed to support open
-  // dropdowns during the scrolling (that would need to re-position it in
-  // response to the position changes of the root dropdown element).
-  useEffect(() => {
-    const listener = () => {
-      onCancel();
-    };
-    window.addEventListener('scroll', listener);
-    return () => {
-      window.removeEventListener('scroll', listener);
-    };
-  }, [onCancel]);
+}, ref) => {
+  const opsRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    measure: () => opsRef.current?.getBoundingClientRect(),
+  }), []);
 
   const optionNodes: React.ReactNode[] = [];
   for (let i = 0; i < options.length; ++i) {
@@ -76,11 +77,13 @@ const Options: React.FunctionComponent<PropsT> = ({
 
   return (
     <BaseModal
-      containerStyle={{
-        left: anchorRect.left,
-        top: anchorRect.bottom,
-        width: anchorRect.width,
-      }}
+      // Closes the dropdown (cancels the selection) on any page scrolling attempt.
+      // This is the same native <select> elements do on scrolling, and at least for
+      // now we have no reason to deal with complications needed to support open
+      // 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}
       dontDisableScrolling
       onCancel={onCancel}
       theme={{
@@ -91,18 +94,20 @@ const Options: React.FunctionComponent<PropsT> = ({
         overlay: S.overlay,
       }}
     >
-      {optionNodes}
+      <div ref={opsRef}>{optionNodes}</div>
     </BaseModal>
   );
-};
+});
 
 Options.propTypes = {
-  anchorRect: PT.shape({
-    bottom: PT.number.isRequired,
+  containerClass: PT.string.isRequired,
+
+  containerStyle: PT.shape({
     left: PT.number.isRequired,
+    top: PT.number.isRequired,
     width: PT.number.isRequired,
-  }).isRequired,
-  containerClass: PT.string.isRequired,
+  }),
+
   filter: PT.func,
   onCancel: PT.func.isRequired,
   onChange: PT.func.isRequired,
@@ -111,6 +116,7 @@ Options.propTypes = {
 };
 
 Options.defaultProps = {
+  containerStyle: undefined,
   filter: undefined,
 };
 

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

@@ -1,9 +1,9 @@
 import PT from 'prop-types';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import themed from '@dr.pogodin/react-themes';
 
-import Options from './Options';
+import Options, { type ContainerPosT, type RefT, areEqual } from './Options';
 
 import defaultTheme from './theme.scss';
 
@@ -26,14 +26,66 @@ PropsT<React.ReactNode, (value: string) => void>
 }) => {
   if (!options) throw Error('Internal error');
 
+  const [active, setActive] = useState(false);
+
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const opsRef = useRef<RefT>(null);
+
+  const [opsPos, setOpsPos] = useState<ContainerPosT>();
+  const [upward, setUpward] = useState(false);
+
+  useEffect(() => {
+    if (!active) return undefined;
+
+    let id: number;
+    const cb = () => {
+      const anchor = dropdownRef.current?.getBoundingClientRect();
+      const opsRect = opsRef.current?.measure();
+      if (anchor && opsRect) {
+        const fitsDown = anchor.bottom + opsRect.height
+          < (window.visualViewport?.height ?? 0);
+        const fitsUp = anchor.top - opsRect.height > 0;
+
+        const up = !fitsDown && fitsUp;
+        setUpward(up);
+
+        const pos = up ? {
+          top: anchor.top - opsRect.height - 1,
+          left: anchor.left,
+          width: anchor.width,
+        } : {
+          left: anchor.left,
+          top: anchor.bottom,
+          width: anchor.width,
+        };
 
-  // If "null" the dropdown is closed, otherwise it is displayed
-  // at the specified coordinates.
-  const [anchor, setAnchor] = useState<DOMRect | null>(null);
+        setOpsPos((now) => (areEqual(now, pos) ? now : pos));
+      }
+      id = requestAnimationFrame(cb);
+    };
+    requestAnimationFrame(cb);
+
+    return () => {
+      cancelAnimationFrame(id);
+    };
+  }, [active]);
 
   const openList = () => {
-    setAnchor(dropdownRef.current!.getBoundingClientRect());
+    const view = window.visualViewport;
+    const rect = dropdownRef.current!.getBoundingClientRect();
+    setActive(true);
+
+    // NOTE: This first opens the dropdown off-screen, where it is measured
+    // by an effect declared above, and then positioned below, or above
+    // the original dropdown element, depending where it fits best
+    // (if we first open it downward, it would flick if we immediately
+    // move it above, at least with the current position update via local
+    // react state, and not imperatively).
+    setOpsPos({
+      left: view?.width || 0,
+      top: view?.height || 0,
+      width: rect.width,
+    });
   };
 
   let selected: React.ReactNode = <>&zwnj;</>;
@@ -49,7 +101,13 @@ PropsT<React.ReactNode, (value: string) => void>
   }
 
   let containerClassName = theme.container;
-  if (anchor) containerClassName += ` ${theme.active}`;
+  if (active) containerClassName += ` ${theme.active}`;
+
+  let opsContainerClass = theme.select || '';
+  if (upward) {
+    containerClassName += ` ${theme.upward}`;
+    opsContainerClass += ` ${theme.upward}`;
+  }
 
   return (
     <div className={containerClassName}>
@@ -70,17 +128,20 @@ PropsT<React.ReactNode, (value: string) => void>
         <div className={theme.arrow} />
       </div>
       {
-        anchor ? (
+        active ? (
           <Options
-            anchorRect={anchor}
-            containerClass={theme.select || ''}
-            onCancel={() => setAnchor(null)}
+            containerClass={opsContainerClass}
+            containerStyle={opsPos}
+            onCancel={() => {
+              setActive(false);
+            }}
             onChange={(newValue) => {
-              setAnchor(null);
+              setActive(false);
               if (onChange) onChange(newValue);
             }}
             optionClass={theme.option || ''}
             options={options}
+            ref={opsRef}
           />
         ) : null
       }

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

@@ -1,3 +1,5 @@
+$border: 1px solid gray;
+
 *,
 .context,
 .ad.hoc {
@@ -19,7 +21,7 @@
   }
 
   &.dropdown {
-    border: 1px solid gray;
+    border: $border;
     border-radius: 0.3em;
     cursor: pointer;
     min-width: 200px;
@@ -52,19 +54,17 @@
 
   &.select {
     background: white;
-    border: 1px solid gray;
+    border: $border;
     border-radius: 0 0 0.3em 0.3em;
     border-top: none;
     box-shadow: 0 6px 12px 3px lightgray;
     position: fixed;
-    top: 20px;
-    left: 10px;
     z-index: 1001;
   }
 
   &.arrow {
     background-image: linear-gradient(to top, lightgray, white 50%, white);
-    border-left: 1px solid gray;
+    border-left: $border;
     border-radius: 0 0.3em 0.3em 0;
     bottom: 0;
     padding: 0.3em 0.6em;
@@ -87,4 +87,32 @@
       border-radius: 0.3em 0.3em 0 0;
     }
   }
+
+  &.upward {
+    &.active {
+      // NOTE: Here StyleLint complains about order & specifity of selectors in
+      // the compiled CSS, but it should have no effect on the actual styling.
+      // stylelint-disable no-descending-specificity
+      .arrow {
+        border-radius: 0 0 0.3em;
+      }
+
+      .dropdown {
+        border-radius: 0 0 0.3em 0.3em;
+      }
+      // stylelint-enable no-descending-specificity
+    }
+
+    &.select {
+      border-bottom: none;
+      border-top: $border;
+      border-radius: 0.3em 0.3em 0 0;
+
+      // NOTE: Here a normal (downward) shadow would weirdly cast over
+      // the dropdown element, and other ways to cast the shadow result in
+      // "upward" shadow, which is also weird. Thus, better no shadow at all
+      // for the upward-opened dropdown.
+      box-shadow: none;
+    }
+  }
 }

package/src/shared/components/selectors/common.ts

@@ -13,6 +13,10 @@ export const validThemeKeys = [
   'label',
   'option',
   'select',
+
+  // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it
+  // into a separate theme spec for that component.
+  'upward',
 ] as const;
 
 export type OptionT<NameT> = {

package/src/shared/utils/jest/E2eSsrEnv.ts

@@ -87,7 +87,11 @@ export default class E2eSsrEnv extends JsdomEnv {
     this.loadWebpackConfig();
 
     const compiler = webpack(this.global.webpackConfig as webpack.Configuration);
-    compiler.outputFileSystem = this.global.webpackOutputFs;
+
+    // TODO: The "as typeof compiler.outputFileSystem" piece below is a workaround
+    // for the Webpack regression: https://github.com/webpack/webpack/issues/18242
+    compiler.outputFileSystem = this.global.webpackOutputFs as typeof compiler.outputFileSystem;
+
     return new Promise<void>((done, fail) => {
       compiler.run((err, stats) => {
         if (err) fail(err);