@dr.pogodin/react-utils 1.30.2 → 1.31.0

package/build/types-code/client/index.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentType } from 'react';
 type OptionsT = {
     dontHydrate?: boolean;
+    initialState?: any;
 };
 /**
  * Prepares and launches the app at client side.

package/build/types-code/index.d.ts

@@ -4,7 +4,7 @@ declare const server: typeof ServerT | null;
 declare const client: any;
 export { default as api } from 'axios';
 export * as PT from 'prop-types';
-export { type AsyncCollectionLoaderT, type AsyncDataEnvelopeT, type AsyncDataLoaderT, type ForceT, type UseAsyncDataOptionsT, type UseAsyncDataResT, type UseGlobalStateResT, type ValueOrInitializerT, getGlobalState, GlobalStateProvider, useAsyncCollection, useAsyncData, useGlobalState, withGlobalStateType, } from '@dr.pogodin/react-global-state';
+export { type AsyncCollectionLoaderT, type AsyncDataEnvelopeT, type AsyncDataLoaderT, type ForceT, type UseAsyncDataOptionsT, type UseAsyncDataResT, type UseGlobalStateResT, type ValueOrInitializerT, getGlobalState, GlobalStateProvider, newAsyncDataEnvelope, useAsyncCollection, useAsyncData, useGlobalState, withGlobalStateType, } from '@dr.pogodin/react-global-state';
 export * from './shared/components';
 export { type Theme, config, Barrier, Emitter, isomorphy, getSsrContext, JU, Semaphore, splitComponent, themed, ThemeProvider, time, webpack, withRetries, } from './shared/utils';
 export { client, server };

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

@@ -3,7 +3,7 @@ import { type Theme } from '@dr.pogodin/react-themes';
 declare const validThemeKeys: readonly ["checkbox", "container", "label"];
 type PropT = {
     checked?: boolean;
-    label?: string;
+    label?: React.ReactNode;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     theme: Theme<typeof validThemeKeys>;
 };

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

@@ -2,7 +2,7 @@
 import { type Theme } from '@dr.pogodin/react-themes';
 declare const validThemeKeys: readonly ["container", "input", "label"];
 declare const ThemedInput: import("@dr.pogodin/react-themes").ThemedComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    label?: string | undefined;
+    label?: React.ReactNode;
     theme: Theme<typeof validThemeKeys>;
 } & React.RefAttributes<HTMLInputElement>>;
 export default ThemedInput;

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

@@ -1,9 +1,10 @@
 import { type ReactNode } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
-import './styles.scss';
 declare const validThemeKeys: readonly ["container", "overlay"];
 type PropsT = {
     children?: ReactNode;
+    containerStyle?: React.CSSProperties;
+    dontDisableScrolling?: boolean;
     onCancel?: () => void;
     theme: Theme<typeof validThemeKeys>;
 };

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

@@ -2,6 +2,7 @@
 import { type Theme } from '@dr.pogodin/react-themes';
 declare const validThemeKeys: readonly ["container", "hidden", "textarea"];
 type Props = {
+    disabled?: boolean;
     onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
     placeholder?: string;

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

@@ -1,16 +1,15 @@
 /**
  * Just an aggregation of all exported components into a single module.
  */
+export * from './selectors';
 export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
-export { default as Dropdown } from './Dropdown';
 export { default as Input } from './Input';
 export { default as Link } from './Link';
 export { default as PageLayout } from './PageLayout';
 export { default as MetaTags } from './MetaTags';
 export { default as Modal, BaseModal } from './Modal';
 export { default as NavLink } from './NavLink';
-export { default as ScalableRect } from './ScalableRect';
 export { default as Throbber } from './Throbber';
 export { default as WithTooltip } from './WithTooltip';
 export { default as YouTubeVideo } from './YouTubeVideo';

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { type OptionT, type OptionsT } from '../../common';
+type PropsT = {
+    anchorRect: {
+        bottom: number;
+        left: number;
+        width: number;
+    };
+    containerClass: string;
+    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>;
+export default Options;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type PropsT } from '../common';
+declare const ThemedCustomDropdown: import("@dr.pogodin/react-themes").ThemedComponent<PropsT<React.ReactNode, (value: string) => void>>;
+export default ThemedCustomDropdown;

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

@@ -0,0 +1,3 @@
+import { type PropsT } from '../common';
+declare const ThemedDropdown: import("@dr.pogodin/react-themes").ThemedComponent<PropsT<string>>;
+export default ThemedDropdown;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type Theme } from '@dr.pogodin/react-themes';
+import { type OptionsT } from '../common';
+declare const validThemeKeys: readonly ["container", "label", "option", "selected", "switch"];
+type PropsT = {
+    label?: React.ReactNode;
+    onChange?: (value: string) => void;
+    options?: Readonly<OptionsT<React.ReactNode>>;
+    theme: Theme<typeof validThemeKeys>;
+    value?: string;
+};
+declare const ThemedSwitch: import("@dr.pogodin/react-themes").ThemedComponent<PropsT>;
+export default ThemedSwitch;

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

@@ -0,0 +1,27 @@
+/// <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 type OptionT<NameT> = {
+    name?: NameT | null;
+    value: string;
+};
+export type OptionsT<NameT> = Array<OptionT<NameT> | string>;
+export type PropsT<NameT, OnChangeT = React.ChangeEventHandler<HTMLSelectElement>> = {
+    filter?: (item: OptionT<NameT> | string) => boolean;
+    label?: React.ReactNode;
+    onChange?: OnChangeT;
+    options?: OptionsT<NameT>;
+    theme: Theme<typeof validThemeKeys>;
+    value?: string;
+};
+export declare const optionValidator: PT.Requireable<NonNullable<string | NonNullable<PT.InferProps<{
+    name: PT.Requireable<string>;
+    value: PT.Validator<string>;
+}>>>>;
+export declare const optionsValidator: PT.Requireable<NonNullable<NonNullable<string | NonNullable<PT.InferProps<{
+    name: PT.Requireable<string>;
+    value: PT.Validator<string>;
+}>>>>[]>;
+/** Returns option value and name as a tuple. */
+export declare function optionValueName<NameT>(option: OptionT<NameT> | string): [string, NameT | string];

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

@@ -0,0 +1,3 @@
+export { default as CustomDropdown } from './CustomDropdown';
+export { default as Dropdown } from './NativeDropdown';
+export { default as Switch } from './Switch';

package/build/types-scss/src/shared/components/Modal/styles.scss.d.ts

@@ -0,0 +1 @@
+export declare const scrollingDisabledByModal: string;

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

@@ -0,0 +1 @@
+export declare const overlay: string;

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

@@ -0,0 +1,10 @@
+export declare const active: string;
+export declare const ad: string;
+export declare const arrow: string;
+export declare const container: string;
+export declare const context: string;
+export declare const dropdown: string;
+export declare const hoc: string;
+export declare const label: string;
+export declare const option: string;
+export declare const select: string;

package/build/types-scss/src/shared/components/{Dropdown → selectors/NativeDropdown}/theme.scss.d.ts

@@ -1,3 +1,4 @@
+export declare const active: string;
 export declare const ad: string;
 export declare const arrow: string;
 export declare const container: string;

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

@@ -0,0 +1,6 @@
+export declare const ad: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;
+export declare const option: string;
+export declare const selected: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.30.2",
+  "version": "1.31.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -69,12 +69,12 @@
     "@types/csurf": "^1.11.5",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.0",
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@types/react-helmet": "^6.1.11",
     "@types/react-test-renderer": "^18.0.7",
     "@types/request-ip": "^0.0.41",
@@ -114,7 +114,7 @@
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "sass-loader": "^14.1.1",
     "sitemap": "^7.1.1",
     "stylelint": "^16.2.1",
@@ -123,7 +123,7 @@
     "tsc-alias": "^1.8.8",
     "typed-scss-modules": "^8.0.0",
     "typescript": "^5.4.2",
-    "typescript-eslint": "^7.1.1",
+    "typescript-eslint": "^7.2.0",
     "webpack": "^5.90.3",
     "webpack-dev-middleware": "^7.0.0",
     "webpack-hot-middleware": "^2.26.1",

package/src/client/index.tsx

@@ -12,6 +12,7 @@ import getInj from './getInj';
 
 type OptionsT = {
   dontHydrate?: boolean;
+  initialState?: any;
 };
 
 /**
@@ -26,7 +27,7 @@ export default function Launch(
   const container = document.getElementById('react-view');
   if (!container) throw Error('Failed to find container for React app');
   const scene = (
-    <GlobalStateProvider initialState={getInj().ISTATE}>
+    <GlobalStateProvider initialState={getInj().ISTATE || options.initialState}>
       <BrowserRouter future={{ v7_relativeSplatPath: true }}>
         <Application />
       </BrowserRouter>

package/src/index.ts

@@ -22,6 +22,7 @@ export {
   type ValueOrInitializerT,
   getGlobalState,
   GlobalStateProvider,
+  newAsyncDataEnvelope,
   useAsyncCollection,
   useAsyncData,
   useGlobalState,

package/src/shared/components/Button/style.scss

@@ -17,6 +17,7 @@
     padding: 0.3em 1.2em;
     text-align: center;
     text-decoration: none;
+    user-select: none;
 
     &:visited {
       color: inherit;

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

@@ -8,7 +8,7 @@ const validThemeKeys = ['checkbox', 'container', 'label'] as const;
 
 type PropT = {
   checked?: boolean;
-  label?: string;
+  label?: React.ReactNode;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   theme: Theme<typeof validThemeKeys>;
 };
@@ -20,7 +20,7 @@ const Checkbox: React.FunctionComponent<PropT> = ({
   theme,
 }) => (
   <div className={theme.container}>
-    { label === undefined ? null : <p className={theme.label}>{label}</p> }
+    { label === undefined ? null : <div className={theme.label}>{label}</div> }
     <input
       checked={checked}
       className={theme.checkbox}
@@ -56,7 +56,7 @@ const ThemedCheckbox = themed(
  */
 Checkbox.propTypes = {
   checked: PT.bool,
-  label: PT.string,
+  label: PT.node,
   onChange: PT.func,
   theme: ThemedCheckbox.themeType.isRequired,
 };

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

@@ -12,7 +12,7 @@ const validThemeKeys = [
 ] as const;
 
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
-  label?: string;
+  label?: React.ReactNode;
   theme: Theme<typeof validThemeKeys>;
 };
 
@@ -34,7 +34,7 @@ const Input = forwardRef<HTMLInputElement, PropsT>((
   ref,
 ) => (
   <span className={theme.container}>
-    { label === undefined ? null : <p className={theme.label}>{label}</p> }
+    { label === undefined ? null : <div className={theme.label}>{label}</div> }
     <input
       className={theme.input}
       ref={ref}
@@ -46,7 +46,7 @@ const Input = forwardRef<HTMLInputElement, PropsT>((
 const ThemedInput = themed(Input, 'Input', validThemeKeys, defaultTheme);
 
 Input.propTypes = {
-  label: PT.string,
+  label: PT.node,
   theme: ThemedInput.themeType.isRequired,
 };
 

package/src/shared/components/Modal/base-theme.scss

@@ -19,7 +19,7 @@
   &.container {
     background: #fff;
     box-shadow: 0 0 14px 1px rgba(38 38 40 / 15%);
-    border-radius: 4;
+    border-radius: 0.3em;
     max-height: 95vh;
     max-width: $screen-md;
     overflow: hidden;

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

@@ -15,12 +15,14 @@ import PT from 'prop-types';
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import baseTheme from './base-theme.scss';
-import './styles.scss';
+import S from './styles.scss';
 
 const validThemeKeys = ['container', 'overlay'] as const;
 
 type PropsT = {
   children?: ReactNode;
+  containerStyle?: React.CSSProperties;
+  dontDisableScrolling?: boolean;
   onCancel?: () => void;
   theme: Theme<typeof validThemeKeys>;
 };
@@ -38,6 +40,8 @@ type PropsT = {
  */
 const BaseModal: React.FunctionComponent<PropsT> = ({
   children,
+  containerStyle,
+  dontDisableScrolling,
   onCancel,
   theme,
 }) => {
@@ -47,15 +51,25 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
 
   useEffect(() => {
     const p = document.createElement('div');
-    document.body.classList.add('scrolling-disabled-by-modal');
     document.body.appendChild(p);
     setPortal(p);
     return () => {
-      document.body.classList.remove('scrolling-disabled-by-modal');
       document.body.removeChild(p);
     };
   }, []);
 
+  // Disables window scrolling, if it is not opted-out.
+  useEffect(() => {
+    if (!dontDisableScrolling) {
+      document.body.classList.add(S.scrollingDisabledByModal);
+    }
+    return () => {
+      if (!dontDisableScrolling) {
+        document.body.classList.remove(S.scrollingDisabledByModal);
+      }
+    };
+  }, [dontDisableScrolling]);
+
   const focusLast = useMemo(() => (
     <div
       onFocus={() => {
@@ -98,6 +112,7 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
           onWheel={(event) => event.stopPropagation()}
           ref={containerRef}
           role="dialog"
+          style={containerStyle}
         >
           {children}
         </div>
@@ -124,14 +139,18 @@ const ThemedModal = themed(
 );
 
 BaseModal.propTypes = {
-  onCancel: PT.func,
   children: PT.node,
+  containerStyle: PT.shape({}),
+  dontDisableScrolling: PT.bool,
+  onCancel: PT.func,
   theme: ThemedModal.themeType.isRequired,
 };
 
 BaseModal.defaultProps = {
-  onCancel: noop,
   children: null,
+  containerStyle: undefined,
+  dontDisableScrolling: false,
+  onCancel: noop,
 };
 
 export default ThemedModal;

package/src/shared/components/Modal/styles.scss

@@ -1,5 +1,3 @@
-:global {
-  body.scrolling-disabled-by-modal {
-    overflow: hidden;
-  }
+.scrollingDisabledByModal {
+  overflow: hidden;
 }

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

@@ -12,6 +12,7 @@ const validThemeKeys = [
 ] as const;
 
 type Props = {
+  disabled?: boolean;
   onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
   placeholder?: string;
@@ -20,6 +21,7 @@ type Props = {
 };
 
 const TextArea: React.FunctionComponent<Props> = ({
+  disabled,
   onChange,
   onKeyDown,
   placeholder,
@@ -66,6 +68,7 @@ const TextArea: React.FunctionComponent<Props> = ({
         value={localValue}
       />
       <textarea
+        disabled={disabled}
         // When value is "undefined" the text area is not-managed, and we should
         // manage it internally for the measurement / resizing functionality
         // to work.
@@ -90,6 +93,7 @@ const ThemedTextArea = themed(
 );
 
 TextArea.propTypes = {
+  disabled: PT.bool,
   onChange: PT.func,
   onKeyDown: PT.func,
   placeholder: PT.string,
@@ -98,6 +102,7 @@ TextArea.propTypes = {
 };
 
 TextArea.defaultProps = {
+  disabled: false,
   onChange: undefined,
   onKeyDown: undefined,
   placeholder: '',

package/src/shared/components/TextArea/style.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @import "styles/mixins";
 
 *,
@@ -28,6 +29,13 @@
     &::placeholder {
       color: gray;
     }
+
+    &:disabled {
+      border-color: color.adjust($color: gray, $alpha: -0.66);
+      cursor: not-allowed;
+      color: color.adjust($color: gray, $alpha: -0.66);
+      user-select: none;
+    }
   }
 
   &.hidden {

package/src/shared/components/YouTubeVideo/base.scss

@@ -2,12 +2,14 @@
 .context,
 .ad.hoc {
   .container {
+    aspect-ratio: 16 / 9;
     background: whitesmoke;
+    position: relative;
   }
 
   .video {
     height: 100%;
-    position: relative;
+    position: absolute;
     width: 100%;
   }
 }

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

@@ -3,7 +3,6 @@ import qs from 'qs';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
-import ScalableRect from 'components/ScalableRect';
 import Throbber from 'components/Throbber';
 
 import baseTheme from './base.scss';
@@ -57,7 +56,7 @@ const YouTubeVideo: React.FunctionComponent<PropsT> = ({
   // More query parameters can be exposed via the component props.
 
   return (
-    <ScalableRect className={theme.container} ratio="16:9">
+    <div className={theme.container}>
       <Throbber theme={throbberTheme} />
       <iframe
         allow="autoplay"
@@ -66,7 +65,7 @@ const YouTubeVideo: React.FunctionComponent<PropsT> = ({
         src={url}
         title={title}
       />
-    </ScalableRect>
+    </div>
   );
 };
 

package/src/shared/components/index.ts

@@ -2,16 +2,16 @@
  * Just an aggregation of all exported components into a single module.
  */
 
+export * from 'components/selectors';
+
 export { default as Button } from 'components/Button';
 export { default as Checkbox } from 'components/Checkbox';
-export { default as Dropdown } from 'components/Dropdown';
 export { default as Input } from 'components/Input';
 export { default as Link } from 'components/Link';
 export { default as PageLayout } from 'components/PageLayout';
 export { default as MetaTags } from 'components/MetaTags';
 export { default as Modal, BaseModal } from 'components/Modal';
 export { default as NavLink } from 'components/NavLink';
-export { default as ScalableRect } from 'components/ScalableRect';
 export { default as Throbber } from 'components/Throbber';
 export { default as WithTooltip } from 'components/WithTooltip';
 export { default as YouTubeVideo } from 'components/YouTubeVideo';

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

@@ -0,0 +1,117 @@
+import PT from 'prop-types';
+import { useEffect } from 'react';
+
+import { BaseModal } from 'components/Modal';
+
+import S from './style.scss';
+
+import {
+  type OptionT,
+  type OptionsT,
+  optionsValidator,
+  optionValueName,
+} from '../../common';
+
+type PropsT = {
+  anchorRect: {
+    bottom: number;
+    left: number;
+    width: number;
+  };
+  containerClass: string;
+  filter?: (item: OptionT<React.ReactNode> | string) => boolean;
+  optionClass: string;
+  options: OptionsT<React.ReactNode>;
+  onCancel: () => void;
+  onChange: (value: string) => void;
+};
+
+const Options: React.FunctionComponent<PropsT> = ({
+  anchorRect,
+  containerClass,
+  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]);
+
+  const optionNodes: React.ReactNode[] = [];
+  for (let i = 0; i < options.length; ++i) {
+    const option = options[i];
+    if (!filter || filter(option)) {
+      const [iValue, iName] = optionValueName(option);
+      optionNodes.push(
+        <div
+          className={optionClass}
+          onClick={() => onChange(iValue)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              onChange(iValue);
+            }
+          }}
+          key={iValue}
+          role="button"
+          tabIndex={0}
+        >
+          {iName}
+        </div>,
+      );
+    }
+  }
+
+  return (
+    <BaseModal
+      containerStyle={{
+        left: anchorRect.left,
+        top: anchorRect.bottom,
+        width: anchorRect.width,
+      }}
+      dontDisableScrolling
+      onCancel={onCancel}
+      theme={{
+        ad: '',
+        hoc: '',
+        container: containerClass,
+        context: '',
+        overlay: S.overlay,
+      }}
+    >
+      {optionNodes}
+    </BaseModal>
+  );
+};
+
+Options.propTypes = {
+  anchorRect: PT.shape({
+    bottom: PT.number.isRequired,
+    left: PT.number.isRequired,
+    width: PT.number.isRequired,
+  }).isRequired,
+  containerClass: PT.string.isRequired,
+  filter: PT.func,
+  onCancel: PT.func.isRequired,
+  onChange: PT.func.isRequired,
+  optionClass: PT.string.isRequired,
+  options: optionsValidator.isRequired,
+};
+
+Options.defaultProps = {
+  filter: undefined,
+};
+
+export default Options;