@dr.pogodin/react-utils 1.28.1 → 1.29.1

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

@@ -5,6 +5,6 @@ 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 { BaseModal, Button, Checkbox, Dropdown, Input, Link, PageLayout, MetaTags, Modal, NavLink, ScalableRect, Throbber, WithTooltip, YouTubeVideo, } from './shared/components';
+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/Button/index.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
+declare const validThemeKeys: readonly ["active", "button", "disabled"];
 type PropsT = {
     active?: boolean;
     children?: ReactNode;
@@ -9,11 +10,7 @@ type PropsT = {
     onMouseDown?: React.MouseEventHandler;
     openNewTab?: boolean;
     replace?: boolean;
-    theme: Theme & {
-        active?: string;
-        button?: string;
-        disabled?: string;
-    };
+    theme: Theme<typeof validThemeKeys>;
     to?: object | string;
 };
 /**

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

@@ -1,14 +1,11 @@
 /// <reference types="react" />
 import { type Theme } from '@dr.pogodin/react-themes';
+declare const validThemeKeys: readonly ["checkbox", "container", "label"];
 type PropT = {
     checked?: boolean;
     label?: string;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    theme: Theme & {
-        checkbox?: string;
-        container?: string;
-        label?: string;
-    };
+    theme: Theme<typeof validThemeKeys>;
 };
 /**
  * Checkbox component theme: a map of

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { type Theme } from '@dr.pogodin/react-themes';
+declare const validThemeKeys: readonly ["arrow", "container", "dropdown", "hiddenOption", "label", "option", "select"];
 type DropdownOptionT = {
     name?: string | null;
     value: string;
@@ -9,14 +10,7 @@ type PropsT = {
     label?: string;
     onChange?: React.ChangeEventHandler<HTMLSelectElement>;
     options?: Array<DropdownOptionT | string>;
-    theme: Theme & {
-        arrow?: string;
-        container?: string;
-        hiddenOption?: string;
-        label?: string;
-        option?: string;
-        select?: string;
-    };
+    theme: Theme<typeof validThemeKeys>;
     value?: string;
 };
 declare const ThemedDropdown: import("@dr.pogodin/react-themes").ThemedComponent<PropsT>;

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

@@ -1,11 +1,8 @@
 /// <reference types="react" />
 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;
-    theme: Theme & {
-        container?: string;
-        input?: string;
-        label?: string;
-    };
+    theme: Theme<typeof validThemeKeys>;
 } & React.RefAttributes<HTMLInputElement>>;
 export default ThemedInput;

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

@@ -1,13 +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 = {
     children?: ReactNode;
     onCancel?: () => void;
-    theme: Theme & {
-        container?: string;
-        overlay?: string;
-    };
+    theme: Theme<typeof validThemeKeys>;
 };
 /**
  * The `<Modal>` component implements a simple themeable modal window, wrapped

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

@@ -1,16 +1,11 @@
 import type { ReactNode } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
+declare const validThemeKeys: readonly ["container", "leftSidePanel", "mainPanel", "rightSidePanel", "sidePanel"];
 type PropsT = {
     children?: ReactNode;
     leftSidePanelContent?: ReactNode;
     rightSidePanelContent?: ReactNode;
-    theme: Theme & {
-        container?: string;
-        mainPanel?: string;
-        sidePanel?: string;
-        leftSidePanel?: string;
-        rightSidePanel?: string;
-    };
+    theme: Theme<typeof validThemeKeys>;
 };
 declare const ThemedPageLayout: import("@dr.pogodin/react-themes").ThemedComponent<PropsT>;
 export default ThemedPageLayout;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { type Theme } from '@dr.pogodin/react-themes';
+declare const validThemeKeys: readonly ["container", "hidden", "textarea"];
+type Props = {
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+    placeholder?: string;
+    theme: Theme<typeof validThemeKeys>;
+    value?: string;
+};
+declare const ThemedTextArea: import("@dr.pogodin/react-themes").ThemedComponent<Props>;
+export default ThemedTextArea;

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

@@ -1,10 +1,7 @@
 import { type Theme } from '@dr.pogodin/react-themes';
+declare const validThemeKeys: readonly ["bouncing", "circle", "container"];
 type PropsT = {
-    theme: Theme & {
-        bouncing?: string;
-        container?: string;
-        circle?: string;
-    };
+    theme: Theme<typeof validThemeKeys>;
 };
 declare const ThemedThrobber: import("@dr.pogodin/react-themes").ThemedComponent<PropsT>;
 export default ThemedThrobber;

package/build/types-code/shared/components/WithTooltip/Tooltip.d.ts

@@ -10,12 +10,7 @@ export declare enum PLACEMENTS {
     BELOW_CURSOR = "BELOW_CURSOR",
     BELOW_ELEMENT = "BELOW_ELEMENT"
 }
-export interface TooltipThemeT {
-    appearance?: string;
-    arrow?: string;
-    content?: string;
-    container?: string;
-}
+export declare const validThemeKeys: readonly ["appearance", "arrow", "content", "container"];
 declare const Tooltip: React.ForwardRefExoticComponent<{
     children?: ReactNode;
     theme: any;

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

@@ -1,13 +1,12 @@
 import { type ReactNode } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
-import { PLACEMENTS, type TooltipThemeT } from './Tooltip';
+import { PLACEMENTS } from './Tooltip';
+declare const validThemeKeys: readonly ["appearance", "arrow", "content", "container", "wrapper"];
 type PropsT = {
     children?: ReactNode;
     placement?: PLACEMENTS;
     tip?: ReactNode;
-    theme: Theme & TooltipThemeT & {
-        wrapper?: string;
-    };
+    theme: Theme<typeof validThemeKeys>;
 };
 declare const ThemedWrapper: import("@dr.pogodin/react-themes").ThemedComponent<PropsT>;
 type ExportT = typeof ThemedWrapper & {

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

@@ -1,8 +1,6 @@
 import { type Theme } from '@dr.pogodin/react-themes';
-type ComponentThemeT = Theme & {
-    container?: string;
-    video?: string;
-};
+declare const validThemeKeys: readonly ["container", "video"];
+type ComponentThemeT = Theme<typeof validThemeKeys>;
 type PropsT = {
     autoplay?: boolean;
     src: string;

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

@@ -14,3 +14,4 @@ export { default as ScalableRect } from './ScalableRect';
 export { default as Throbber } from './Throbber';
 export { default as WithTooltip } from './WithTooltip';
 export { default as YouTubeVideo } from './YouTubeVideo';
+export { default as TextArea } from './TextArea';

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

@@ -2,6 +2,7 @@ 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 hiddenOption: string;
 export declare const hoc: string;
 export declare const label: string;

package/build/types-scss/src/shared/components/TextArea/style.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 hidden: string;
+export declare const hoc: string;
+export declare const textarea: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.28.1",
+  "version": "1.29.1",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,17 +8,17 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.6",
+    "@babel/runtime": "^7.23.8",
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.12.0",
     "@dr.pogodin/csurf": "^1.13.0",
-    "@dr.pogodin/js-utils": "^0.0.6",
+    "@dr.pogodin/js-utils": "^0.0.7",
     "@dr.pogodin/react-global-state": "^0.12.0",
-    "@dr.pogodin/react-themes": "^1.5.1",
+    "@dr.pogodin/react-themes": "^1.6.0",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.6.2",
+    "axios": "^1.6.5",
     "commander": "^11.1.0",
     "compression": "^1.7.4",
-    "config": "^3.3.9",
+    "config": "^3.3.10",
     "cookie": "^0.6.0",
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
@@ -26,7 +26,7 @@
     "express": "^4.18.2",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
-    "joi": "^17.11.0",
+    "joi": "^17.12.0",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
@@ -36,10 +36,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.21.0",
+    "react-router-dom": "^6.21.3",
     "request-ip": "^3.3.0",
     "rimraf": "^5.0.5",
-    "serialize-javascript": "^6.0.1",
+    "serialize-javascript": "^6.0.2",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
     "uuid": "^9.0.1",
@@ -48,15 +48,15 @@
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
     "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.6",
+    "@babel/core": "^7.23.7",
     "@babel/eslint-parser": "^7.23.3",
     "@babel/eslint-plugin": "^7.23.5",
     "@babel/node": "^7.22.19",
-    "@babel/plugin-transform-runtime": "^7.23.6",
-    "@babel/preset-env": "^7.23.6",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@babel/register": "^7.22.15",
+    "@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",
@@ -71,33 +71,33 @@
     "@types/jest": "^29.5.11",
     "@types/lodash": "^4.14.202",
     "@types/morgan": "^1.9.9",
-    "@types/node-forge": "^1.3.10",
+    "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.2.45",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@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",
-    "@types/supertest": "^2.0.16",
+    "@types/supertest": "^6.0.2",
     "@types/uuid": "^9.0.7",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "autoprefixer": "^10.4.16",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "autoprefixer": "^10.4.17",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "core-js": "^3.34.0",
-    "css-loader": "^6.8.1",
-    "css-minimizer-webpack-plugin": "^5.0.1",
+    "core-js": "^3.35.1",
+    "css-loader": "^6.9.1",
+    "css-minimizer-webpack-plugin": "^6.0.0",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -105,29 +105,29 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "memfs": "^4.6.0",
-    "mini-css-extract-plugin": "^2.7.6",
+    "mini-css-extract-plugin": "^2.7.7",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.32",
-    "postcss-loader": "^7.3.3",
+    "postcss": "^8.4.33",
+    "postcss-loader": "^8.0.0",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
     "react-refresh": "^0.14.0",
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.70.0",
+    "sass-loader": "^14.0.0",
     "sitemap": "^7.1.1",
-    "stylelint": "^16.0.2",
-    "stylelint-config-standard-scss": "^12.0.0",
-    "supertest": "^6.3.3",
+    "stylelint": "^16.2.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.3.3",
     "webpack": "^5.89.0",
-    "webpack-dev-middleware": "^6.1.1",
-    "webpack-hot-middleware": "^2.25.4",
+    "webpack-dev-middleware": "^7.0.0",
+    "webpack-hot-middleware": "^2.26.0",
     "webpack-merge": "^5.10.0",
     "workbox-core": "^7.0.0",
     "workbox-precaching": "^7.0.0",

package/src/index.ts

@@ -28,22 +28,7 @@ export {
   withGlobalStateType,
 } from '@dr.pogodin/react-global-state';
 
-export {
-  BaseModal,
-  Button,
-  Checkbox,
-  Dropdown,
-  Input,
-  Link,
-  PageLayout,
-  MetaTags,
-  Modal,
-  NavLink,
-  ScalableRect,
-  Throbber,
-  WithTooltip,
-  YouTubeVideo,
-} from 'components';
+export * from 'components';
 
 export {
   type Theme,

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

@@ -9,6 +9,8 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './style.scss';
 
+const validThemeKeys = ['active', 'button', 'disabled'] as const;
+
 type PropsT = {
   active?: boolean;
   children?: ReactNode;
@@ -18,11 +20,7 @@ type PropsT = {
   onMouseDown?: React.MouseEventHandler;
   openNewTab?: boolean;
   replace?: boolean;
-  theme: Theme & {
-    active?: string;
-    button?: string;
-    disabled?: string;
-  };
+  theme: Theme<typeof validThemeKeys>;
   // TODO: It needs a more precise typing of the object option.
   to?: object | string;
 };
@@ -89,11 +87,7 @@ const BaseButton: React.FunctionComponent<PropsT> = ({
  * @prop {string} [button] to the root element of any button.
  * @prop {string} [disabled] to the root element of disabled button.
  */
-const ThemedButton = themed(BaseButton, 'Button', [
-  'active',
-  'button',
-  'disabled',
-], defaultTheme);
+const ThemedButton = themed(BaseButton, 'Button', validThemeKeys, defaultTheme);
 
 /**
  * Implements themeable buttons, and button-line links (elements which look

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

@@ -4,15 +4,13 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
+const validThemeKeys = ['checkbox', 'container', 'label'] as const;
+
 type PropT = {
   checked?: boolean;
   label?: string;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  theme: Theme & {
-    checkbox?: string;
-    container?: string
-    label?: string;
-  };
+  theme: Theme<typeof validThemeKeys>;
 };
 
 const Checkbox: React.FunctionComponent<PropT> = ({
@@ -39,11 +37,12 @@ const Checkbox: React.FunctionComponent<PropT> = ({
  * @prop [container] to the root checkbox element.
  * @prop [label] to the checkbox label element.
  */
-const ThemedCheckbox = themed(Checkbox, 'Checkbox', [
-  'checkbox',
-  'container',
-  'label',
-], defaultTheme);
+const ThemedCheckbox = themed(
+  Checkbox,
+  'Checkbox',
+  validThemeKeys,
+  defaultTheme,
+);
 
 /**
  * The `<Checkbox>` component implements themeable checkboxes.

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

@@ -4,6 +4,16 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
+const validThemeKeys = [
+  'arrow',
+  'container',
+  'dropdown',
+  'hiddenOption',
+  'label',
+  'option',
+  'select',
+] as const;
+
 type DropdownOptionT = {
   name?: string | null;
   value: string;
@@ -14,14 +24,7 @@ type PropsT = {
   label?: string;
   onChange?: React.ChangeEventHandler<HTMLSelectElement>;
   options?: Array<DropdownOptionT | string>;
-  theme: Theme & {
-    arrow?: string;
-    container?: string;
-    hiddenOption?: string;
-    label?: string;
-    option?: string;
-    select?: string;
-  };
+  theme: Theme<typeof validThemeKeys>;
   value?: string;
 };
 
@@ -94,27 +97,27 @@ const Dropdown: React.FunctionComponent<PropsT> = ({
   return (
     <div className={theme.container}>
       { label === undefined ? null : <p className={theme.label}>{label}</p> }
-      <select
-        className={theme.select}
-        onChange={onChange}
-        value={value}
-      >
-        {hiddenOption}
-        {optionElements}
-      </select>
-      <div className={theme.arrow}>▼</div>
+      <div className={theme.dropdown}>
+        <select
+          className={theme.select}
+          onChange={onChange}
+          value={value}
+        >
+          {hiddenOption}
+          {optionElements}
+        </select>
+        <div className={theme.arrow}>▼</div>
+      </div>
     </div>
   );
 };
 
-const ThemedDropdown = themed(Dropdown, 'Dropdown', [
-  'arrow',
-  'container',
-  'hiddenOption',
-  'label',
-  'option',
-  'select',
-], defaultTheme);
+const ThemedDropdown = themed(
+  Dropdown,
+  'Dropdown',
+  validThemeKeys,
+  defaultTheme,
+);
 
 Dropdown.propTypes = {
   filter: PT.func,

package/src/shared/components/Dropdown/theme.scss

@@ -3,14 +3,20 @@
 *,
 .context,
 .ad.hoc {
+  &.dropdown {
+    position: relative;
+  }
+
   &.arrow {
     background-image: linear-gradient(to top, lightgray, white 50%, white);
     border: 1px solid gray;
     border-radius: 0 0.3em 0.3em 0;
+    bottom: 0;
     padding: 0.3em 0.6em;
     pointer-events: none;
     position: absolute;
     right: 0;
+    top: 0;
   }
 
   &.container {

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

@@ -5,13 +5,15 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
+const validThemeKeys = [
+  'container',
+  'input',
+  'label',
+] as const;
+
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
-  theme: Theme & {
-    container?: string;
-    input?: string;
-    label?: string;
-  };
+  theme: Theme<typeof validThemeKeys>;
 };
 
 /**
@@ -41,11 +43,7 @@ const Input = forwardRef<HTMLInputElement, PropsT>((
   </span>
 ));
 
-const ThemedInput = themed(Input, 'Input', [
-  'container',
-  'input',
-  'label',
-], defaultTheme);
+const ThemedInput = themed(Input, 'Input', validThemeKeys, defaultTheme);
 
 Input.propTypes = {
   label: PT.string,

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

@@ -17,13 +17,12 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 import baseTheme from './base-theme.scss';
 import './styles.scss';
 
+const validThemeKeys = ['container', 'overlay'] as const;
+
 type PropsT = {
   children?: ReactNode;
   onCancel?: () => void;
-  theme: Theme & {
-    container?: string;
-    overlay?: string;
-  };
+  theme: Theme<typeof validThemeKeys>;
 };
 
 /**
@@ -120,10 +119,7 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
 const ThemedModal = themed(
   BaseModal,
   'Modal',
-  [
-    'container',
-    'overlay',
-  ],
+  validThemeKeys,
   baseTheme,
 );