@dr.pogodin/react-utils 1.30.2 → 1.31.1

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,11 @@
 import { type ReactNode } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
-import './styles.scss';
 declare const validThemeKeys: readonly ["container", "overlay"];
 type PropsT = {
+    cancelOnScrolling?: boolean;
     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.1",
   "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,38 +43,38 @@
     "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",
     "@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.70",
+    "@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",
@@ -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",
@@ -114,18 +114,18 @@
     "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",
+    "stylelint": "^16.3.0",
     "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.1.1",
-    "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/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,15 @@ 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 = {
+  cancelOnScrolling?: boolean;
   children?: ReactNode;
+  containerStyle?: React.CSSProperties;
+  dontDisableScrolling?: boolean;
   onCancel?: () => void;
   theme: Theme<typeof validThemeKeys>;
 };
@@ -37,7 +40,10 @@ type PropsT = {
  * @param {ModalTheme} [props.theme] _Ad hoc_ theme.
  */
 const BaseModal: React.FunctionComponent<PropsT> = ({
+  cancelOnScrolling,
   children,
+  containerStyle,
+  dontDisableScrolling,
   onCancel,
   theme,
 }) => {
@@ -47,15 +53,37 @@ 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);
     };
   }, []);
 
+  // Sets up modal cancellation of scrolling, if opted-in.
+  useEffect(() => {
+    if (cancelOnScrolling && onCancel) {
+      window.addEventListener('scroll', onCancel);
+    }
+    return () => {
+      if (cancelOnScrolling && onCancel) {
+        window.removeEventListener('scroll', onCancel);
+      }
+    };
+  }, [cancelOnScrolling, onCancel]);
+
+  // 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 +126,7 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
           onWheel={(event) => event.stopPropagation()}
           ref={containerRef}
           role="dialog"
+          style={containerStyle}
         >
           {children}
         </div>
@@ -124,14 +153,20 @@ const ThemedModal = themed(
 );
 
 BaseModal.propTypes = {
-  onCancel: PT.func,
+  cancelOnScrolling: PT.bool,
   children: PT.node,
+  containerStyle: PT.shape({}),
+  dontDisableScrolling: PT.bool,
+  onCancel: PT.func,
   theme: ThemedModal.themeType.isRequired,
 };
 
 BaseModal.defaultProps = {
-  onCancel: noop,
+  cancelOnScrolling: false,
   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>
   );
 };