@dr.pogodin/react-utils 1.31.1 → 1.31.2

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.1",
+  "version": "1.31.2",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -73,7 +73,7 @@
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.2.70",
+    "@types/react": "^18.2.72",
     "@types/react-dom": "^18.2.22",
     "@types/react-helmet": "^6.1.11",
     "@types/react-test-renderer": "^18.0.7",
@@ -117,7 +117,7 @@
     "sass": "^1.72.0",
     "sass-loader": "^14.1.1",
     "sitemap": "^7.1.1",
-    "stylelint": "^16.3.0",
+    "stylelint": "^16.3.1",
     "stylelint-config-standard-scss": "^13.0.0",
     "supertest": "^6.3.4",
     "tsc-alias": "^1.8.8",

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

@@ -64,10 +64,12 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
   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]);

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

@@ -1,4 +1,5 @@
 import PT from 'prop-types';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 
 import { BaseModal } from 'components/Modal';
 
@@ -11,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>;
@@ -25,15 +36,21 @@ type PropsT = {
   onChange: (value: string) => void;
 };
 
-const Options: React.FunctionComponent<PropsT> = ({
-  anchorRect,
+const Options = forwardRef<RefT, PropsT>(({
   containerClass,
+  containerStyle,
   filter,
   onCancel,
   onChange,
   optionClass,
   options,
-}) => {
+}, ref) => {
+  const opsRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    measure: () => opsRef.current?.getBoundingClientRect(),
+  }), []);
+
   const optionNodes: React.ReactNode[] = [];
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
@@ -66,11 +83,7 @@ const Options: React.FunctionComponent<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={{
-        left: anchorRect.left,
-        top: anchorRect.bottom,
-        width: anchorRect.width,
-      }}
+      containerStyle={containerStyle}
       dontDisableScrolling
       onCancel={onCancel}
       theme={{
@@ -81,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,
@@ -101,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> = {