@dr.pogodin/react-utils 1.28.1 → 1.29.1

package/build/development/index.js

@@ -4,36 +4,37 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  client: true,
+  server: true,
+  config: true,
+  Barrier: true,
+  Emitter: true,
+  isomorphy: true,
+  getSsrContext: true,
+  JU: true,
+  Semaphore: true,
+  splitComponent: true,
+  themed: true,
+  ThemeProvider: true,
+  time: true,
+  webpack: true,
+  withRetries: true,
+  api: true,
+  PT: true,
+  getGlobalState: true,
+  GlobalStateProvider: true,
+  useAsyncCollection: true,
+  useAsyncData: true,
+  useGlobalState: true,
+  withGlobalStateType: true
+};
 Object.defineProperty(exports, "Barrier", {
   enumerable: true,
   get: function () {
     return _utils.Barrier;
   }
 });
-Object.defineProperty(exports, "BaseModal", {
-  enumerable: true,
-  get: function () {
-    return _components.BaseModal;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () {
-    return _components.Button;
-  }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () {
-    return _components.Checkbox;
-  }
-});
-Object.defineProperty(exports, "Dropdown", {
-  enumerable: true,
-  get: function () {
-    return _components.Dropdown;
-  }
-});
 Object.defineProperty(exports, "Emitter", {
   enumerable: true,
   get: function () {
@@ -46,55 +47,13 @@ Object.defineProperty(exports, "GlobalStateProvider", {
     return _reactGlobalState.GlobalStateProvider;
   }
 });
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function () {
-    return _components.Input;
-  }
-});
 Object.defineProperty(exports, "JU", {
   enumerable: true,
   get: function () {
     return _utils.JU;
   }
 });
-Object.defineProperty(exports, "Link", {
-  enumerable: true,
-  get: function () {
-    return _components.Link;
-  }
-});
-Object.defineProperty(exports, "MetaTags", {
-  enumerable: true,
-  get: function () {
-    return _components.MetaTags;
-  }
-});
-Object.defineProperty(exports, "Modal", {
-  enumerable: true,
-  get: function () {
-    return _components.Modal;
-  }
-});
-Object.defineProperty(exports, "NavLink", {
-  enumerable: true,
-  get: function () {
-    return _components.NavLink;
-  }
-});
 exports.PT = void 0;
-Object.defineProperty(exports, "PageLayout", {
-  enumerable: true,
-  get: function () {
-    return _components.PageLayout;
-  }
-});
-Object.defineProperty(exports, "ScalableRect", {
-  enumerable: true,
-  get: function () {
-    return _components.ScalableRect;
-  }
-});
 Object.defineProperty(exports, "Semaphore", {
   enumerable: true,
   get: function () {
@@ -107,24 +66,6 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _utils.ThemeProvider;
   }
 });
-Object.defineProperty(exports, "Throbber", {
-  enumerable: true,
-  get: function () {
-    return _components.Throbber;
-  }
-});
-Object.defineProperty(exports, "WithTooltip", {
-  enumerable: true,
-  get: function () {
-    return _components.WithTooltip;
-  }
-});
-Object.defineProperty(exports, "YouTubeVideo", {
-  enumerable: true,
-  get: function () {
-    return _components.YouTubeVideo;
-  }
-});
 Object.defineProperty(exports, "api", {
   enumerable: true,
   get: function () {
@@ -217,6 +158,17 @@ var _PT = _interopRequireWildcard(require("prop-types"));
 exports.PT = _PT;
 var _reactGlobalState = require("@dr.pogodin/react-global-state");
 var _components = require("./shared/components");
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _components[key];
+    }
+  });
+});
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const server = exports.server = _utils.webpack.requireWeak("./server", __dirname);

package/build/development/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_utils","require","_axios","_interopRequireDefault","_PT","_interopRequireWildcard","exports","PT","_reactGlobalState","_components","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","server","webpack","requireWeak","__dirname","client","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import 'styles/global.scss';\n\nimport { webpack } from 'utils';\n\nimport type ServerT from './server';\n\nconst server = webpack.requireWeak('./server', __dirname) as (typeof ServerT) | null;\n\nconst client = server ? undefined : require('./client').default;\n\nexport { default as api } from 'axios';\nexport * as PT from 'prop-types';\n\nexport {\n  type AsyncCollectionLoaderT,\n  type AsyncDataEnvelopeT,\n  type AsyncDataLoaderT,\n  type ForceT,\n  type UseAsyncDataOptionsT,\n  type UseAsyncDataResT,\n  type UseGlobalStateResT,\n  type ValueOrInitializerT,\n  getGlobalState,\n  GlobalStateProvider,\n  useAsyncCollection,\n  useAsyncData,\n  useGlobalState,\n  withGlobalStateType,\n} from '@dr.pogodin/react-global-state';\n\nexport {\n  BaseModal,\n  Button,\n  Checkbox,\n  Dropdown,\n  Input,\n  Link,\n  PageLayout,\n  MetaTags,\n  Modal,\n  NavLink,\n  ScalableRect,\n  Throbber,\n  WithTooltip,\n  YouTubeVideo,\n} from 'components';\n\nexport {\n  type Theme,\n  config,\n  Barrier,\n  Emitter,\n  isomorphy,\n  getSsrContext,\n  JU,\n  Semaphore,\n  splitComponent,\n  themed,\n  ThemeProvider,\n  time,\n  webpack,\n  withRetries,\n} from 'utils';\n\nexport { client, server };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAQA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,IAAAG,GAAA,GAAAC,uBAAA,CAAAJ,OAAA;AAAAK,OAAA,CAAAC,EAAA,GAAAH,GAAA;AAGvC,IAAAI,iBAAA,GAAAP,OAAA;AAiBA,IAAAQ,WAAA,GAAAR,OAAA;AAeoB,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAvCpB,MAAMY,MAAM,GAAAzB,OAAA,CAAAyB,MAAA,GAAGC,cAAO,CAACC,WAAW,aAAaC,SAAS,CAA4B;AAEpF,MAAMC,MAAM,GAAA7B,OAAA,CAAA6B,MAAA,GAAGJ,MAAM,GAAGK,SAAS,GAAGnC,OAAO,WAAW,CAAC,CAACe,OAAO"}
+{"version":3,"file":"index.js","names":["_utils","require","_axios","_interopRequireDefault","_PT","_interopRequireWildcard","exports","PT","_reactGlobalState","_components","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","defineProperty","enumerable","get","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set","server","webpack","requireWeak","__dirname","client","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import 'styles/global.scss';\n\nimport { webpack } from 'utils';\n\nimport type ServerT from './server';\n\nconst server = webpack.requireWeak('./server', __dirname) as (typeof ServerT) | null;\n\nconst client = server ? undefined : require('./client').default;\n\nexport { default as api } from 'axios';\nexport * as PT from 'prop-types';\n\nexport {\n  type AsyncCollectionLoaderT,\n  type AsyncDataEnvelopeT,\n  type AsyncDataLoaderT,\n  type ForceT,\n  type UseAsyncDataOptionsT,\n  type UseAsyncDataResT,\n  type UseGlobalStateResT,\n  type ValueOrInitializerT,\n  getGlobalState,\n  GlobalStateProvider,\n  useAsyncCollection,\n  useAsyncData,\n  useGlobalState,\n  withGlobalStateType,\n} from '@dr.pogodin/react-global-state';\n\nexport * from 'components';\n\nexport {\n  type Theme,\n  config,\n  Barrier,\n  Emitter,\n  isomorphy,\n  getSsrContext,\n  JU,\n  Semaphore,\n  splitComponent,\n  themed,\n  ThemeProvider,\n  time,\n  webpack,\n  withRetries,\n} from 'utils';\n\nexport { client, server };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAQA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,IAAAG,GAAA,GAAAC,uBAAA,CAAAJ,OAAA;AAAAK,OAAA,CAAAC,EAAA,GAAAH,GAAA;AAGvC,IAAAI,iBAAA,GAAAP,OAAA;AAiBA,IAAAQ,WAAA,GAAAR,OAAA;AAAAS,MAAA,CAAAC,IAAA,CAAAF,WAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAP,OAAA,IAAAA,OAAA,CAAAO,GAAA,MAAAJ,WAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAQ,cAAA,CAAAZ,OAAA,EAAAO,GAAA;IAAAM,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAX,WAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAA2B,SAAAQ,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAjB,wBAAAiB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAL,GAAA,CAAAE,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAArB,MAAA,CAAAQ,cAAA,IAAAR,MAAA,CAAAsB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,IAAAvB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAM,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAArB,MAAA,CAAAsB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAd,GAAA,IAAAc,CAAA,CAAAC,GAAA,IAAAzB,MAAA,CAAAQ,cAAA,CAAAW,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA;AAxB3B,MAAMO,MAAM,GAAA9B,OAAA,CAAA8B,MAAA,GAAGC,cAAO,CAACC,WAAW,aAAaC,SAAS,CAA4B;AAEpF,MAAMC,MAAM,GAAAlC,OAAA,CAAAkC,MAAA,GAAGJ,MAAM,GAAGK,SAAS,GAAGxC,OAAO,WAAW,CAAC,CAAC0B,OAAO"}

package/build/development/shared/components/Button/index.js

@@ -19,6 +19,7 @@ const defaultTheme = {
   "active": "-dr-pogodin-react-utils___src-shared-components-Button-style___active___MAe9O6",
   "disabled": "-dr-pogodin-react-utils___src-shared-components-Button-style___disabled___Br9IWV"
 };
+const validThemeKeys = ['active', 'button', 'disabled'];
 /* eslint-disable react/function-component-definition */
 const BaseButton = ({
   active,
@@ -73,7 +74,7 @@ const BaseButton = ({
  * @prop {string} [button] to the root element of any button.
  * @prop {string} [disabled] to the root element of disabled button.
  */
-const ThemedButton = (0, _reactThemes.default)(BaseButton, 'Button', ['active', 'button', 'disabled'], defaultTheme);
+const ThemedButton = (0, _reactThemes.default)(BaseButton, 'Button', validThemeKeys, defaultTheme);
 
 /**
  * Implements themeable buttons, and button-line links (elements which look

package/build/development/shared/components/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_Link","_reactThemes","_jsxRuntime","defaultTheme","BaseButton","active","children","disabled","enforceA","onClick","onMouseDown","openNewTab","replace","theme","to","className","button","jsx","default","onKeyDown","e","key","role","tabIndex","ThemedButton","themed","defaultProps","undefined","propTypes","PT","bool","node","func","themeType","isRequired","oneOfType","object","string","_default","exports"],"sources":["../../../../../src/shared/components/Button/index.tsx"],"sourcesContent":["// The <Button> component implements a standard button / button-like link.\n\nimport PT from 'prop-types';\nimport { type ReactNode } from 'react';\n\nimport Link from 'components/Link';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype PropsT = {\n  active?: boolean;\n  children?: ReactNode;\n  disabled?: boolean;\n  enforceA?: boolean;\n  onClick?: React.MouseEventHandler & React.KeyboardEventHandler;\n  onMouseDown?: React.MouseEventHandler;\n  openNewTab?: boolean;\n  replace?: boolean;\n  theme: Theme & {\n    active?: string;\n    button?: string;\n    disabled?: string;\n  };\n  // TODO: It needs a more precise typing of the object option.\n  to?: object | string;\n};\n\n/* eslint-disable react/function-component-definition */\nconst BaseButton: React.FunctionComponent<PropsT> = ({\n  active,\n  children,\n  disabled,\n  enforceA,\n  onClick,\n  onMouseDown,\n  openNewTab,\n  replace,\n  theme,\n  to,\n}) => {\n  let className = theme.button;\n  if (active && theme.active) className += ` ${theme.active}`;\n  if (disabled) {\n    if (theme.disabled) className += ` ${theme.disabled}`;\n    return (\n      <div className={className}>\n        {children}\n      </div>\n    );\n  }\n  if (to) {\n    return (\n      <Link\n        className={className}\n        enforceA={enforceA}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\n        openNewTab={openNewTab}\n        replace={replace}\n        to={to}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return (\n    <div\n      className={className}\n      onClick={onClick}\n      onKeyDown={onClick && ((e) => {\n        if (e.key === 'Enter') onClick(e);\n      })}\n      onMouseDown={onMouseDown}\n      role=\"button\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Button component theme: a map of CSS\n * class names to append to button elements:\n * @prop {string} [active] to the root element of active button.\n * @prop {string} [button] to the root element of any button.\n * @prop {string} [disabled] to the root element of disabled button.\n */\nconst ThemedButton = themed(BaseButton, 'Button', [\n  'active',\n  'button',\n  'disabled',\n], defaultTheme);\n\n/**\n * Implements themeable buttons, and button-line links (elements which look\n * like buttons, but behave as links) in the same uniform manner.\n * @param {object} [props] Component props.\n * @param {boolean} [props.active] Set `true` to render the button as\n * active, even if it is not active otherwise.\n * @param {boolean} [props.disabled] Set `true` to disable the button.\n * @param {boolean} [props.enforceA] When the button is rendered as `<Link>`\n * component, this prop enforces it to be rendered as a simple `<a>` element\n * (external link), rather than the React router's internal link.\n * See `<Link>` documentation to learn when links are rendered as `<a>`\n * by default.\n * @param {function} [props.onClick] Click event handler.\n * @param {function} [props.onMouseDown] Mouse down event handler.\n * @param {boolean} [props.openNewTab] Set `true` to open link in the new tab.\n * @param {boolean} [props.replace] When the button is rendered as\n * `<Link>`, and the target URL is internal, this property tells that\n * the new route should replace the last record in the browser's history,\n * rather than to be pushed as a new entry into the history stack.\n * @param {ButtonTheme} [props.theme] _Ad hoc_ button theme.\n * @param {object|string} [props.to] If specified, the button will be rendered\n * as `<Link>` (if not disabled), and it will point to the specified location\n * or URL.\n * @param {...any} [props....]\n * [Other properties of themeable components](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nBaseButton.defaultProps = {\n  active: false,\n  children: undefined,\n  disabled: false,\n  enforceA: false,\n  onClick: undefined,\n  onMouseDown: undefined,\n  openNewTab: false,\n  replace: false,\n  to: undefined,\n};\n\nBaseButton.propTypes = {\n  active: PT.bool,\n  children: PT.node,\n  disabled: PT.bool,\n  enforceA: PT.bool,\n  onClick: PT.func,\n  onMouseDown: PT.func,\n  openNewTab: PT.bool,\n  replace: PT.bool,\n  theme: ThemedButton.themeType.isRequired,\n  to: PT.oneOfType([PT.object, PT.string]),\n};\n\nexport default ThemedButton;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_Link","_reactThemes","_jsxRuntime","defaultTheme","validThemeKeys","BaseButton","active","children","disabled","enforceA","onClick","onMouseDown","openNewTab","replace","theme","to","className","button","jsx","default","onKeyDown","e","key","role","tabIndex","ThemedButton","themed","defaultProps","undefined","propTypes","PT","bool","node","func","themeType","isRequired","oneOfType","object","string","_default","exports"],"sources":["../../../../../src/shared/components/Button/index.tsx"],"sourcesContent":["// The <Button> component implements a standard button / button-like link.\n\nimport PT from 'prop-types';\nimport { type ReactNode } from 'react';\n\nimport Link from 'components/Link';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\nconst validThemeKeys = ['active', 'button', 'disabled'] as const;\n\ntype PropsT = {\n  active?: boolean;\n  children?: ReactNode;\n  disabled?: boolean;\n  enforceA?: boolean;\n  onClick?: React.MouseEventHandler & React.KeyboardEventHandler;\n  onMouseDown?: React.MouseEventHandler;\n  openNewTab?: boolean;\n  replace?: boolean;\n  theme: Theme<typeof validThemeKeys>;\n  // TODO: It needs a more precise typing of the object option.\n  to?: object | string;\n};\n\n/* eslint-disable react/function-component-definition */\nconst BaseButton: React.FunctionComponent<PropsT> = ({\n  active,\n  children,\n  disabled,\n  enforceA,\n  onClick,\n  onMouseDown,\n  openNewTab,\n  replace,\n  theme,\n  to,\n}) => {\n  let className = theme.button;\n  if (active && theme.active) className += ` ${theme.active}`;\n  if (disabled) {\n    if (theme.disabled) className += ` ${theme.disabled}`;\n    return (\n      <div className={className}>\n        {children}\n      </div>\n    );\n  }\n  if (to) {\n    return (\n      <Link\n        className={className}\n        enforceA={enforceA}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\n        openNewTab={openNewTab}\n        replace={replace}\n        to={to}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return (\n    <div\n      className={className}\n      onClick={onClick}\n      onKeyDown={onClick && ((e) => {\n        if (e.key === 'Enter') onClick(e);\n      })}\n      onMouseDown={onMouseDown}\n      role=\"button\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Button component theme: a map of CSS\n * class names to append to button elements:\n * @prop {string} [active] to the root element of active button.\n * @prop {string} [button] to the root element of any button.\n * @prop {string} [disabled] to the root element of disabled button.\n */\nconst ThemedButton = themed(BaseButton, 'Button', validThemeKeys, defaultTheme);\n\n/**\n * Implements themeable buttons, and button-line links (elements which look\n * like buttons, but behave as links) in the same uniform manner.\n * @param {object} [props] Component props.\n * @param {boolean} [props.active] Set `true` to render the button as\n * active, even if it is not active otherwise.\n * @param {boolean} [props.disabled] Set `true` to disable the button.\n * @param {boolean} [props.enforceA] When the button is rendered as `<Link>`\n * component, this prop enforces it to be rendered as a simple `<a>` element\n * (external link), rather than the React router's internal link.\n * See `<Link>` documentation to learn when links are rendered as `<a>`\n * by default.\n * @param {function} [props.onClick] Click event handler.\n * @param {function} [props.onMouseDown] Mouse down event handler.\n * @param {boolean} [props.openNewTab] Set `true` to open link in the new tab.\n * @param {boolean} [props.replace] When the button is rendered as\n * `<Link>`, and the target URL is internal, this property tells that\n * the new route should replace the last record in the browser's history,\n * rather than to be pushed as a new entry into the history stack.\n * @param {ButtonTheme} [props.theme] _Ad hoc_ button theme.\n * @param {object|string} [props.to] If specified, the button will be rendered\n * as `<Link>` (if not disabled), and it will point to the specified location\n * or URL.\n * @param {...any} [props....]\n * [Other properties of themeable components](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nBaseButton.defaultProps = {\n  active: false,\n  children: undefined,\n  disabled: false,\n  enforceA: false,\n  onClick: undefined,\n  onMouseDown: undefined,\n  openNewTab: false,\n  replace: false,\n  to: undefined,\n};\n\nBaseButton.propTypes = {\n  active: PT.bool,\n  children: PT.node,\n  disabled: PT.bool,\n  enforceA: PT.bool,\n  onClick: PT.func,\n  onMouseDown: PT.func,\n  openNewTab: PT.bool,\n  replace: PT.bool,\n  theme: ThemedButton.themeType.isRequired,\n  to: PT.oneOfType([PT.object, PT.string]),\n};\n\nexport default ThemedButton;\n"],"mappings":"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"}

package/build/development/shared/components/Checkbox/index.js

@@ -16,6 +16,7 @@ const defaultTheme = {
   "container": "-dr-pogodin-react-utils___src-shared-components-Checkbox-theme___container___Kr0g3M",
   "label": "-dr-pogodin-react-utils___src-shared-components-Checkbox-theme___label___3dML-O"
 };
+const validThemeKeys = ['checkbox', 'container', 'label'];
 const Checkbox = ({
   checked,
   label,
@@ -41,7 +42,7 @@ const Checkbox = ({
  * @prop [container] to the root checkbox element.
  * @prop [label] to the checkbox label element.
  */
-const ThemedCheckbox = (0, _reactThemes.default)(Checkbox, 'Checkbox', ['checkbox', 'container', 'label'], defaultTheme);
+const ThemedCheckbox = (0, _reactThemes.default)(Checkbox, 'Checkbox', validThemeKeys, defaultTheme);
 
 /**
  * The `<Checkbox>` component implements themeable checkboxes.

package/build/development/shared/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_jsxRuntime","defaultTheme","Checkbox","checked","label","onChange","theme","jsxs","className","container","children","undefined","jsx","checkbox","type","ThemedCheckbox","themed","propTypes","PT","bool","string","func","themeType","isRequired","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/Checkbox/index.tsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype PropT = {\n  checked?: boolean;\n  label?: string;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  theme: Theme & {\n    checkbox?: string;\n    container?: string\n    label?: string;\n  };\n};\n\nconst Checkbox: React.FunctionComponent<PropT> = ({\n  checked,\n  label,\n  onChange,\n  theme,\n}) => (\n  <div className={theme.container}>\n    { label === undefined ? null : <p className={theme.label}>{label}</p> }\n    <input\n      checked={checked}\n      className={theme.checkbox}\n      onChange={onChange}\n      type=\"checkbox\"\n    />\n  </div>\n);\n\n/**\n * Checkbox component theme: a map of\n * CSS classes to append to its elements:\n * @prop [checkbox] to the underlying checkbox `<input>` element.\n * @prop [container] to the root checkbox element.\n * @prop [label] to the checkbox label element.\n */\nconst ThemedCheckbox = themed(Checkbox, 'Checkbox', [\n  'checkbox',\n  'container',\n  'label',\n], defaultTheme);\n\n/**\n * The `<Checkbox>` component implements themeable checkboxes.\n * @param [props] Component properties.\n * @param [props.checked] Checkbox value.\n * @param [props.label] Checkbox label.\n * @param [props.onChange] State change handler.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props....]\n * [Other properties of themeable components](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties).\n */\nCheckbox.propTypes = {\n  checked: PT.bool,\n  label: PT.string,\n  onChange: PT.func,\n  theme: ThemedCheckbox.themeType.isRequired,\n};\n\nCheckbox.defaultProps = {\n  checked: undefined,\n  label: undefined,\n  onChange: undefined,\n};\n\nexport default ThemedCheckbox;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AAA8D,IAAAE,WAAA,GAAAF,OAAA;AAAA,MAAAG,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAe9D,MAAMC,QAAwC,GAAGA,CAAC;EAChDC,OAAO;EACPC,KAAK;EACLC,QAAQ;EACRC;AACF,CAAC,kBACC,IAAAN,WAAA,CAAAO,IAAA;EAAKC,SAAS,EAAEF,KAAK,CAACG,SAAU;EAAAC,QAAA,GAC5BN,KAAK,KAAKO,SAAS,GAAG,IAAI,gBAAG,IAAAX,WAAA,CAAAY,GAAA;IAAGJ,SAAS,EAAEF,KAAK,CAACF,KAAM;IAAAM,QAAA,EAAEN;EAAK,CAAI,CAAC,eACrE,IAAAJ,WAAA,CAAAY,GAAA;IACET,OAAO,EAAEA,OAAQ;IACjBK,SAAS,EAAEF,KAAK,CAACO,QAAS;IAC1BR,QAAQ,EAAEA,QAAS;IACnBS,IAAI,EAAC;EAAU,CAChB,CAAC;AAAA,CACC,CACN;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAG,IAAAC,oBAAM,EAACd,QAAQ,EAAE,UAAU,EAAE,CAClD,UAAU,EACV,WAAW,EACX,OAAO,CACR,EAAED,YAAY,CAAC;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAC,QAAQ,CAACe,SAAS,GAAG;EACnBd,OAAO,EAAEe,kBAAE,CAACC,IAAI;EAChBf,KAAK,EAAEc,kBAAE,CAACE,MAAM;EAChBf,QAAQ,EAAEa,kBAAE,CAACG,IAAI;EACjBf,KAAK,EAAES,cAAc,CAACO,SAAS,CAACC;AAClC,CAAC;AAEDrB,QAAQ,CAACsB,YAAY,GAAG;EACtBrB,OAAO,EAAEQ,SAAS;EAClBP,KAAK,EAAEO,SAAS;EAChBN,QAAQ,EAAEM;AACZ,CAAC;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaZ,cAAc"}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_jsxRuntime","defaultTheme","validThemeKeys","Checkbox","checked","label","onChange","theme","jsxs","className","container","children","undefined","jsx","checkbox","type","ThemedCheckbox","themed","propTypes","PT","bool","string","func","themeType","isRequired","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/Checkbox/index.tsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nconst validThemeKeys = ['checkbox', 'container', 'label'] as const;\n\ntype PropT = {\n  checked?: boolean;\n  label?: string;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  theme: Theme<typeof validThemeKeys>;\n};\n\nconst Checkbox: React.FunctionComponent<PropT> = ({\n  checked,\n  label,\n  onChange,\n  theme,\n}) => (\n  <div className={theme.container}>\n    { label === undefined ? null : <p className={theme.label}>{label}</p> }\n    <input\n      checked={checked}\n      className={theme.checkbox}\n      onChange={onChange}\n      type=\"checkbox\"\n    />\n  </div>\n);\n\n/**\n * Checkbox component theme: a map of\n * CSS classes to append to its elements:\n * @prop [checkbox] to the underlying checkbox `<input>` element.\n * @prop [container] to the root checkbox element.\n * @prop [label] to the checkbox label element.\n */\nconst ThemedCheckbox = themed(\n  Checkbox,\n  'Checkbox',\n  validThemeKeys,\n  defaultTheme,\n);\n\n/**\n * The `<Checkbox>` component implements themeable checkboxes.\n * @param [props] Component properties.\n * @param [props.checked] Checkbox value.\n * @param [props.label] Checkbox label.\n * @param [props.onChange] State change handler.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props....]\n * [Other properties of themeable components](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties).\n */\nCheckbox.propTypes = {\n  checked: PT.bool,\n  label: PT.string,\n  onChange: PT.func,\n  theme: ThemedCheckbox.themeType.isRequired,\n};\n\nCheckbox.defaultProps = {\n  checked: undefined,\n  label: undefined,\n  onChange: undefined,\n};\n\nexport default ThemedCheckbox;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AAA8D,IAAAE,WAAA,GAAAF,OAAA;AAAA,MAAAG,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI9D,MAAMC,cAAc,GAAG,CAAC,UAAU,EAAE,WAAW,EAAE,OAAO,CAAU;AASlE,MAAMC,QAAwC,GAAGA,CAAC;EAChDC,OAAO;EACPC,KAAK;EACLC,QAAQ;EACRC;AACF,CAAC,kBACC,IAAAP,WAAA,CAAAQ,IAAA;EAAKC,SAAS,EAAEF,KAAK,CAACG,SAAU;EAAAC,QAAA,GAC5BN,KAAK,KAAKO,SAAS,GAAG,IAAI,gBAAG,IAAAZ,WAAA,CAAAa,GAAA;IAAGJ,SAAS,EAAEF,KAAK,CAACF,KAAM;IAAAM,QAAA,EAAEN;EAAK,CAAI,CAAC,eACrE,IAAAL,WAAA,CAAAa,GAAA;IACET,OAAO,EAAEA,OAAQ;IACjBK,SAAS,EAAEF,KAAK,CAACO,QAAS;IAC1BR,QAAQ,EAAEA,QAAS;IACnBS,IAAI,EAAC;EAAU,CAChB,CAAC;AAAA,CACC,CACN;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAG,IAAAC,oBAAM,EAC3Bd,QAAQ,EACR,UAAU,EACVD,cAAc,EACdD,YACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAE,QAAQ,CAACe,SAAS,GAAG;EACnBd,OAAO,EAAEe,kBAAE,CAACC,IAAI;EAChBf,KAAK,EAAEc,kBAAE,CAACE,MAAM;EAChBf,QAAQ,EAAEa,kBAAE,CAACG,IAAI;EACjBf,KAAK,EAAES,cAAc,CAACO,SAAS,CAACC;AAClC,CAAC;AAEDrB,QAAQ,CAACsB,YAAY,GAAG;EACtBrB,OAAO,EAAEQ,SAAS;EAClBP,KAAK,EAAEO,SAAS;EAChBN,QAAQ,EAAEM;AACZ,CAAC;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaZ,cAAc"}

package/build/development/shared/components/Dropdown/index.js

@@ -12,6 +12,7 @@ const defaultTheme = {
   "context": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___context___haRIry",
   "ad": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___ad___D4XHG2",
   "hoc": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___hoc___N3nd34",
+  "dropdown": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___dropdown___-LiQj8",
   "arrow": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___arrow___-zPK7Y",
   "container": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___container___9CQpeA",
   "label": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___label___Gv0kyu",
@@ -19,6 +20,7 @@ const defaultTheme = {
   "hiddenOption": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___hiddenOption___RdW3yR",
   "select": "-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___select___JXK1uw"
 };
+const validThemeKeys = ['arrow', 'container', 'dropdown', 'hiddenOption', 'label', 'option', 'select'];
 /**
  * Implements a themeable dropdown list. Internally it is rendered with help of
  * the standard HTML `<select>` element, thus the styling support is somewhat
@@ -84,18 +86,21 @@ const Dropdown = ({
     children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       className: theme.label,
       children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-      className: theme.select,
-      onChange: onChange,
-      value: value,
-      children: [hiddenOption, optionElements]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: theme.arrow,
-      children: "\u25BC"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: theme.dropdown,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+        className: theme.select,
+        onChange: onChange,
+        value: value,
+        children: [hiddenOption, optionElements]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: theme.arrow,
+        children: "\u25BC"
+      })]
     })]
   });
 };
-const ThemedDropdown = (0, _reactThemes.default)(Dropdown, 'Dropdown', ['arrow', 'container', 'hiddenOption', 'label', 'option', 'select'], defaultTheme);
+const ThemedDropdown = (0, _reactThemes.default)(Dropdown, 'Dropdown', validThemeKeys, defaultTheme);
 Dropdown.propTypes = {
   filter: _propTypes.default.func,
   label: _propTypes.default.string,

package/build/development/shared/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_jsxRuntime","defaultTheme","Dropdown","filter","label","onChange","options","theme","value","isValidValue","optionElements","i","length","option","optionValue","optionName","name","push","jsx","className","children","hiddenOption","disabled","jsxs","container","undefined","select","arrow","ThemedDropdown","themed","propTypes","PT","func","string","arrayOf","oneOfType","shape","isRequired","themeType","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/Dropdown/index.tsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype DropdownOptionT = {\n  name?: string | null;\n  value: string;\n};\n\ntype PropsT = {\n  filter?: (item: DropdownOptionT | string) => boolean;\n  label?: string;\n  onChange?: React.ChangeEventHandler<HTMLSelectElement>;\n  options?: Array<DropdownOptionT | string>;\n  theme: Theme & {\n    arrow?: string;\n    container?: string;\n    hiddenOption?: string;\n    label?: string;\n    option?: string;\n    select?: string;\n  };\n  value?: string;\n};\n\n/**\n * Implements a themeable dropdown list. Internally it is rendered with help of\n * the standard HTML `<select>` element, thus the styling support is somewhat\n * limited.\n * @param [props] Component properties.\n * @param [props.filter] Options filter function. If provided, only\n * those elements of `options` list will be used by the dropdown, for which this\n * filter returns `true`.\n * @param [props.label] Dropdown label.\n * @param [props.onChange] Selection event handler.\n * @param [props.options=[]] Array of dropdown\n * options. For string elements the option value and name will be the same.\n * It is allowed to mix DropdownOption and string elements in the same option\n * list.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.value] Currently selected value.\n * @param [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst Dropdown: React.FunctionComponent<PropsT> = ({\n  filter,\n  label,\n  onChange,\n  options = [],\n  theme,\n  value,\n}) => {\n  let isValidValue = false;\n  const optionElements = [];\n\n  for (let i = 0; i < options.length; ++i) {\n    const option = options[i];\n    if (!filter || filter(option)) {\n      let optionValue: string;\n      let optionName: string;\n      if (typeof option === 'string') {\n        optionName = option;\n        optionValue = option;\n      } else {\n        optionName = option.name || option.value;\n        optionValue = option.value;\n      }\n      isValidValue ||= optionValue === value;\n      optionElements.push(\n        <option className={theme.option} key={optionValue} value={optionValue}>\n          {optionName}\n        </option>,\n      );\n    }\n  }\n\n  // NOTE: This element represents the current `value` when it does not match\n  // any valid option. In Chrome, and some other browsers, we are able to hide\n  // it from the opened dropdown; in others, e.g. Safari, the best we can do is\n  // to show it as disabled.\n  const hiddenOption = isValidValue ? null : (\n    <option\n      disabled\n      className={theme.hiddenOption}\n      key=\"__reactUtilsHiddenOption\"\n      value={value}\n    >\n      {value}\n    </option>\n  );\n\n  return (\n    <div className={theme.container}>\n      { label === undefined ? null : <p className={theme.label}>{label}</p> }\n      <select\n        className={theme.select}\n        onChange={onChange}\n        value={value}\n      >\n        {hiddenOption}\n        {optionElements}\n      </select>\n      <div className={theme.arrow}>▼</div>\n    </div>\n  );\n};\n\nconst ThemedDropdown = themed(Dropdown, 'Dropdown', [\n  'arrow',\n  'container',\n  'hiddenOption',\n  'label',\n  'option',\n  'select',\n], defaultTheme);\n\nDropdown.propTypes = {\n  filter: PT.func,\n  label: PT.string,\n  onChange: PT.func,\n  options: PT.arrayOf(\n    PT.oneOfType([\n      PT.shape({\n        name: PT.string,\n        value: PT.string.isRequired,\n      }),\n      PT.string,\n    ]).isRequired,\n  ),\n  theme: ThemedDropdown.themeType.isRequired,\n  value: PT.string,\n};\n\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: '',\n};\n\nexport default ThemedDropdown;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_jsxRuntime","defaultTheme","validThemeKeys","Dropdown","filter","label","onChange","options","theme","value","isValidValue","optionElements","i","length","option","optionValue","optionName","name","push","jsx","className","children","hiddenOption","disabled","jsxs","container","undefined","dropdown","select","arrow","ThemedDropdown","themed","propTypes","PT","func","string","arrayOf","oneOfType","shape","isRequired","themeType","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/Dropdown/index.tsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nconst validThemeKeys = [\n  'arrow',\n  'container',\n  'dropdown',\n  'hiddenOption',\n  'label',\n  'option',\n  'select',\n] as const;\n\ntype DropdownOptionT = {\n  name?: string | null;\n  value: string;\n};\n\ntype PropsT = {\n  filter?: (item: DropdownOptionT | string) => boolean;\n  label?: string;\n  onChange?: React.ChangeEventHandler<HTMLSelectElement>;\n  options?: Array<DropdownOptionT | string>;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\n/**\n * Implements a themeable dropdown list. Internally it is rendered with help of\n * the standard HTML `<select>` element, thus the styling support is somewhat\n * limited.\n * @param [props] Component properties.\n * @param [props.filter] Options filter function. If provided, only\n * those elements of `options` list will be used by the dropdown, for which this\n * filter returns `true`.\n * @param [props.label] Dropdown label.\n * @param [props.onChange] Selection event handler.\n * @param [props.options=[]] Array of dropdown\n * options. For string elements the option value and name will be the same.\n * It is allowed to mix DropdownOption and string elements in the same option\n * list.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.value] Currently selected value.\n * @param [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst Dropdown: React.FunctionComponent<PropsT> = ({\n  filter,\n  label,\n  onChange,\n  options = [],\n  theme,\n  value,\n}) => {\n  let isValidValue = false;\n  const optionElements = [];\n\n  for (let i = 0; i < options.length; ++i) {\n    const option = options[i];\n    if (!filter || filter(option)) {\n      let optionValue: string;\n      let optionName: string;\n      if (typeof option === 'string') {\n        optionName = option;\n        optionValue = option;\n      } else {\n        optionName = option.name || option.value;\n        optionValue = option.value;\n      }\n      isValidValue ||= optionValue === value;\n      optionElements.push(\n        <option className={theme.option} key={optionValue} value={optionValue}>\n          {optionName}\n        </option>,\n      );\n    }\n  }\n\n  // NOTE: This element represents the current `value` when it does not match\n  // any valid option. In Chrome, and some other browsers, we are able to hide\n  // it from the opened dropdown; in others, e.g. Safari, the best we can do is\n  // to show it as disabled.\n  const hiddenOption = isValidValue ? null : (\n    <option\n      disabled\n      className={theme.hiddenOption}\n      key=\"__reactUtilsHiddenOption\"\n      value={value}\n    >\n      {value}\n    </option>\n  );\n\n  return (\n    <div className={theme.container}>\n      { label === undefined ? null : <p className={theme.label}>{label}</p> }\n      <div className={theme.dropdown}>\n        <select\n          className={theme.select}\n          onChange={onChange}\n          value={value}\n        >\n          {hiddenOption}\n          {optionElements}\n        </select>\n        <div className={theme.arrow}>▼</div>\n      </div>\n    </div>\n  );\n};\n\nconst ThemedDropdown = themed(\n  Dropdown,\n  'Dropdown',\n  validThemeKeys,\n  defaultTheme,\n);\n\nDropdown.propTypes = {\n  filter: PT.func,\n  label: PT.string,\n  onChange: PT.func,\n  options: PT.arrayOf(\n    PT.oneOfType([\n      PT.shape({\n        name: PT.string,\n        value: PT.string.isRequired,\n      }),\n      PT.string,\n    ]).isRequired,\n  ),\n  theme: ThemedDropdown.themeType.isRequired,\n  value: PT.string,\n};\n\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: '',\n};\n\nexport default ThemedDropdown;\n"],"mappings":"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"}

package/build/development/shared/components/Input/index.js

@@ -17,6 +17,7 @@ const defaultTheme = {
   "input": "-dr-pogodin-react-utils___src-shared-components-Input-theme___input___M07d4s",
   "label": "-dr-pogodin-react-utils___src-shared-components-Input-theme___label___gfbdq-"
 };
+const validThemeKeys = ['container', 'input', 'label'];
 /**
  * Themeable input field, based on the standard HTML `<input>` element.
  * @param [props]
@@ -41,7 +42,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     ...rest
   })]
 }));
-const ThemedInput = (0, _reactThemes.default)(Input, 'Input', ['container', 'input', 'label'], defaultTheme);
+const ThemedInput = (0, _reactThemes.default)(Input, 'Input', validThemeKeys, defaultTheme);
 Input.propTypes = {
   label: _propTypes.default.string,
   theme: ThemedInput.themeType.isRequired

package/build/development/shared/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_reactThemes","_jsxRuntime","defaultTheme","Input","forwardRef","label","theme","rest","ref","jsxs","className","container","children","undefined","jsx","input","ThemedInput","themed","propTypes","PT","string","themeType","isRequired","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport { forwardRef } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n  label?: string;\n  theme: Theme & {\n    container?: string;\n    input?: string;\n    label?: string;\n  };\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props]\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input = forwardRef<HTMLInputElement, PropsT>((\n  {\n    label,\n    theme,\n    ...rest\n  }: PropsT,\n  ref,\n) => (\n  <span className={theme.container}>\n    { label === undefined ? null : <p className={theme.label}>{label}</p> }\n    <input\n      className={theme.input}\n      ref={ref}\n      {...rest} // eslint-disable-line react/jsx-props-no-spreading\n    />\n  </span>\n));\n\nconst ThemedInput = themed(Input, 'Input', [\n  'container',\n  'input',\n  'label',\n], defaultTheme);\n\nInput.propTypes = {\n  label: PT.string,\n  theme: ThemedInput.themeType.isRequired,\n};\n\nInput.defaultProps = {\n  label: undefined,\n};\n\nexport default ThemedInput;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA8D,IAAAG,WAAA,GAAAH,OAAA;AAAA,MAAAI,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAa9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAK,gBAAG,IAAAC,iBAAU,EAA2B,CACjD;EACEC,KAAK;EACLC,KAAK;EACL,GAAGC;AACG,CAAC,EACTC,GAAG,kBAEH,IAAAP,WAAA,CAAAQ,IAAA;EAAMC,SAAS,EAAEJ,KAAK,CAACK,SAAU;EAAAC,QAAA,GAC7BP,KAAK,KAAKQ,SAAS,GAAG,IAAI,gBAAG,IAAAZ,WAAA,CAAAa,GAAA;IAAGJ,SAAS,EAAEJ,KAAK,CAACD,KAAM;IAAAO,QAAA,EAAEP;EAAK,CAAI,CAAC,eACrE,IAAAJ,WAAA,CAAAa,GAAA;IACEJ,SAAS,EAAEJ,KAAK,CAACS,KAAM;IACvBP,GAAG,EAAEA,GAAI;IAAA,GACLD;EAAI,CACT,CAAC;AAAA,CACE,CACP,CAAC;AAEF,MAAMS,WAAW,GAAG,IAAAC,oBAAM,EAACd,KAAK,EAAE,OAAO,EAAE,CACzC,WAAW,EACX,OAAO,EACP,OAAO,CACR,EAAED,YAAY,CAAC;AAEhBC,KAAK,CAACe,SAAS,GAAG;EAChBb,KAAK,EAAEc,kBAAE,CAACC,MAAM;EAChBd,KAAK,EAAEU,WAAW,CAACK,SAAS,CAACC;AAC/B,CAAC;AAEDnB,KAAK,CAACoB,YAAY,GAAG;EACnBlB,KAAK,EAAEQ;AACT,CAAC;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,WAAW"}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_reactThemes","_jsxRuntime","defaultTheme","validThemeKeys","Input","forwardRef","label","theme","rest","ref","jsxs","className","container","children","undefined","jsx","input","ThemedInput","themed","propTypes","PT","string","themeType","isRequired","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport { forwardRef } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nconst validThemeKeys = [\n  'container',\n  'input',\n  'label',\n] as const;\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n  label?: string;\n  theme: Theme<typeof validThemeKeys>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props]\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input = forwardRef<HTMLInputElement, PropsT>((\n  {\n    label,\n    theme,\n    ...rest\n  }: PropsT,\n  ref,\n) => (\n  <span className={theme.container}>\n    { label === undefined ? null : <p className={theme.label}>{label}</p> }\n    <input\n      className={theme.input}\n      ref={ref}\n      {...rest} // eslint-disable-line react/jsx-props-no-spreading\n    />\n  </span>\n));\n\nconst ThemedInput = themed(Input, 'Input', validThemeKeys, defaultTheme);\n\nInput.propTypes = {\n  label: PT.string,\n  theme: ThemedInput.themeType.isRequired,\n};\n\nInput.defaultProps = {\n  label: undefined,\n};\n\nexport default ThemedInput;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA8D,IAAAG,WAAA,GAAAH,OAAA;AAAA,MAAAI,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI9D,MAAMC,cAAc,GAAG,CACrB,WAAW,EACX,OAAO,EACP,OAAO,CACC;AAOV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAK,gBAAG,IAAAC,iBAAU,EAA2B,CACjD;EACEC,KAAK;EACLC,KAAK;EACL,GAAGC;AACG,CAAC,EACTC,GAAG,kBAEH,IAAAR,WAAA,CAAAS,IAAA;EAAMC,SAAS,EAAEJ,KAAK,CAACK,SAAU;EAAAC,QAAA,GAC7BP,KAAK,KAAKQ,SAAS,GAAG,IAAI,gBAAG,IAAAb,WAAA,CAAAc,GAAA;IAAGJ,SAAS,EAAEJ,KAAK,CAACD,KAAM;IAAAO,QAAA,EAAEP;EAAK,CAAI,CAAC,eACrE,IAAAL,WAAA,CAAAc,GAAA;IACEJ,SAAS,EAAEJ,KAAK,CAACS,KAAM;IACvBP,GAAG,EAAEA,GAAI;IAAA,GACLD;EAAI,CACT,CAAC;AAAA,CACE,CACP,CAAC;AAEF,MAAMS,WAAW,GAAG,IAAAC,oBAAM,EAACd,KAAK,EAAE,OAAO,EAAED,cAAc,EAAED,YAAY,CAAC;AAExEE,KAAK,CAACe,SAAS,GAAG;EAChBb,KAAK,EAAEc,kBAAE,CAACC,MAAM;EAChBd,KAAK,EAAEU,WAAW,CAACK,SAAS,CAACC;AAC/B,CAAC;AAEDnB,KAAK,CAACoB,YAAY,GAAG;EACnBlB,KAAK,EAAEQ;AACT,CAAC;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,WAAW"}

package/build/development/shared/components/Modal/index.js

@@ -19,6 +19,7 @@ const baseTheme = {
   "overlay": "-dr-pogodin-react-utils___src-shared-components-Modal-base-theme___overlay___ye2BZo",
   "container": "-dr-pogodin-react-utils___src-shared-components-Modal-base-theme___container___gyZ4rc"
 };
+const validThemeKeys = ['container', 'overlay'];
 /**
  * The `<Modal>` component implements a simple themeable modal window, wrapped
  * into the default theme. `<BaseModal>` exposes the base non-themed component.
@@ -95,7 +96,7 @@ const BaseModal = ({
   }), portal) : null;
 };
 exports.BaseModal = BaseModal;
-const ThemedModal = (0, _reactThemes.default)(BaseModal, 'Modal', ['container', 'overlay'], baseTheme);
+const ThemedModal = (0, _reactThemes.default)(BaseModal, 'Modal', validThemeKeys, baseTheme);
 BaseModal.propTypes = {
   onCancel: _propTypes.default.func,
   children: _propTypes.default.node,

package/build/development/shared/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_lodash","require","_react","_reactDom","_interopRequireDefault","_propTypes","_reactThemes","_jsxRuntime","baseTheme","BaseModal","children","onCancel","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","classList","add","appendChild","remove","removeChild","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","onClick","onKeyDown","e","key","ref","node","role","container","onWheel","event","stopPropagation","exports","ThemedModal","themed","propTypes","PT","func","themeType","isRequired","defaultProps","noop","_default","default"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport { noop } from 'lodash';\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport './styles.scss';\n\ntype PropsT = {\n  children?: ReactNode;\n  onCancel?: () => void;\n  theme: Theme & {\n    container?: string;\n    overlay?: string;\n  };\n};\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal: React.FunctionComponent<PropsT> = ({\n  children,\n  onCancel,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const [portal, setPortal] = useState<HTMLDivElement>();\n\n  useEffect(() => {\n    const p = document.createElement('div');\n    document.body.classList.add('scrolling-disabled-by-modal');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.classList.remove('scrolling-disabled-by-modal');\n      document.body.removeChild(p);\n    };\n  }, []);\n\n  const focusLast = useMemo(() => (\n    <div\n      onFocus={() => {\n        const elems = containerRef.current?.querySelectorAll('*') as NodeListOf<HTMLElement>;\n        for (let i = elems.length - 1; i >= 0; --i) {\n          elems[i].focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n      tabIndex={0}\n      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n    />\n  ), []);\n\n  return portal ? ReactDom.createPortal(\n    (\n      <>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\n          onClick={() => onCancel && onCancel()}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' && onCancel) onCancel();\n          }}\n          ref={(node) => {\n            if (node && node !== overlayRef.current) {\n              overlayRef.current = node;\n              node.focus();\n            }\n          }}\n          role=\"button\"\n          tabIndex={0}\n        />\n        <div\n          aria-modal=\"true\"\n          className={theme.container}\n          onWheel={(event) => event.stopPropagation()}\n          ref={containerRef}\n          role=\"dialog\"\n        >\n          {children}\n        </div>\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n          tabIndex={0}\n          /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n        />\n        {focusLast}\n      </>\n    ),\n    portal,\n  ) : null;\n};\n\nconst ThemedModal = themed(\n  BaseModal,\n  'Modal',\n  [\n    'container',\n    'overlay',\n  ],\n  baseTheme,\n);\n\nBaseModal.propTypes = {\n  onCancel: PT.func,\n  children: PT.node,\n  theme: ThemedModal.themeType.isRequired,\n};\n\nBaseModal.defaultProps = {\n  onCancel: noop,\n  children: null,\n};\n\nexport default ThemedModal;\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_lodash","require","_react","_reactDom","_interopRequireDefault","_propTypes","_reactThemes","_jsxRuntime","baseTheme","validThemeKeys","BaseModal","children","onCancel","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","classList","add","appendChild","remove","removeChild","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","onClick","onKeyDown","e","key","ref","node","role","container","onWheel","event","stopPropagation","exports","ThemedModal","themed","propTypes","PT","func","themeType","isRequired","defaultProps","noop","_default","default"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport { noop } from 'lodash';\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport './styles.scss';\n\nconst validThemeKeys = ['container', 'overlay'] as const;\n\ntype PropsT = {\n  children?: ReactNode;\n  onCancel?: () => void;\n  theme: Theme<typeof validThemeKeys>;\n};\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal: React.FunctionComponent<PropsT> = ({\n  children,\n  onCancel,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const [portal, setPortal] = useState<HTMLDivElement>();\n\n  useEffect(() => {\n    const p = document.createElement('div');\n    document.body.classList.add('scrolling-disabled-by-modal');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.classList.remove('scrolling-disabled-by-modal');\n      document.body.removeChild(p);\n    };\n  }, []);\n\n  const focusLast = useMemo(() => (\n    <div\n      onFocus={() => {\n        const elems = containerRef.current?.querySelectorAll('*') as NodeListOf<HTMLElement>;\n        for (let i = elems.length - 1; i >= 0; --i) {\n          elems[i].focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n      tabIndex={0}\n      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n    />\n  ), []);\n\n  return portal ? ReactDom.createPortal(\n    (\n      <>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\n          onClick={() => onCancel && onCancel()}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' && onCancel) onCancel();\n          }}\n          ref={(node) => {\n            if (node && node !== overlayRef.current) {\n              overlayRef.current = node;\n              node.focus();\n            }\n          }}\n          role=\"button\"\n          tabIndex={0}\n        />\n        <div\n          aria-modal=\"true\"\n          className={theme.container}\n          onWheel={(event) => event.stopPropagation()}\n          ref={containerRef}\n          role=\"dialog\"\n        >\n          {children}\n        </div>\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n          tabIndex={0}\n          /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n        />\n        {focusLast}\n      </>\n    ),\n    portal,\n  ) : null;\n};\n\nconst ThemedModal = themed(\n  BaseModal,\n  'Modal',\n  validThemeKeys,\n  baseTheme,\n);\n\nBaseModal.propTypes = {\n  onCancel: PT.func,\n  children: PT.node,\n  theme: ThemedModal.themeType.isRequired,\n};\n\nBaseModal.defaultProps = {\n  onCancel: noop,\n  children: null,\n};\n\nexport default ThemedModal;\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"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"}

package/build/development/shared/components/PageLayout/index.js

@@ -16,6 +16,7 @@ const baseTheme = {
   "mainPanel": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___mainPanel___pPlQO2",
   "sidePanel": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___sidePanel___lqNh4h"
 };
+const validThemeKeys = ['container', 'leftSidePanel', 'mainPanel', 'rightSidePanel', 'sidePanel'];
 /**
  * Simple and themeable page layout. It keeps the main content centered in
  * a column of limited width, which fills entire viewport on small screens
@@ -49,7 +50,7 @@ const PageLayout = ({
     children: rightSidePanelContent
   })]
 });
-const ThemedPageLayout = (0, _reactThemes.default)(PageLayout, 'PageLayout', ['container', 'leftSidePanel', 'mainPanel', 'rightSidePanel', 'sidePanel'], baseTheme);
+const ThemedPageLayout = (0, _reactThemes.default)(PageLayout, 'PageLayout', validThemeKeys, baseTheme);
 PageLayout.propTypes = {
   children: _propTypes.default.node,
   leftSidePanelContent: _propTypes.default.node,

package/build/development/shared/components/PageLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_jsxRuntime","baseTheme","PageLayout","children","leftSidePanelContent","rightSidePanelContent","theme","jsxs","className","container","jsx","sidePanel","leftSidePanel","join","mainPanel","rightSidePanel","ThemedPageLayout","themed","propTypes","PT","node","themeType","isRequired","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/PageLayout/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport type { ReactNode } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\n\ntype PropsT = {\n  children?: ReactNode;\n  leftSidePanelContent?: ReactNode;\n  rightSidePanelContent?: ReactNode;\n  theme: Theme & {\n    container?: string;\n    mainPanel?: string;\n    sidePanel?: string;\n    leftSidePanel?: string;\n    rightSidePanel?: string;\n  };\n};\n\n/**\n * Simple and themeable page layout. It keeps the main content centered in\n * a column of limited width, which fills entire viewport on small screens\n * (under `$screen-md = 1024px` size). At larger screens the column keeps\n * `$screen-md` size, and it is centered at the page, surrounded by side\n * panels, where additional content can be displayed.\n *\n * **Children:** Component children are rendered as the content of main panel.\n * @param {object} [props] Component properties.\n * @param {Node} [props.leftSidePanelContent] The content for left side panel.\n * @param {Node} [props.rightSidePanelContent] The content for right side panel.\n * @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.\n * @param {...any} [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst PageLayout: React.FunctionComponent<PropsT> = ({\n  children,\n  leftSidePanelContent,\n  rightSidePanelContent,\n  theme,\n}) => (\n  <div className={theme.container}>\n    <div className={[theme.sidePanel, theme.leftSidePanel].join(' ')}>\n      {leftSidePanelContent}\n    </div>\n    <div className={theme.mainPanel}>\n      {children}\n    </div>\n    <div className={[theme.sidePanel, theme.rightSidePanel].join(' ')}>\n      {rightSidePanelContent}\n    </div>\n  </div>\n);\n\nconst ThemedPageLayout = themed(PageLayout, 'PageLayout', [\n  'container',\n  'leftSidePanel',\n  'mainPanel',\n  'rightSidePanel',\n  'sidePanel',\n], baseTheme);\n\nPageLayout.propTypes = {\n  children: PT.node,\n  leftSidePanelContent: PT.node,\n  rightSidePanelContent: PT.node,\n  theme: ThemedPageLayout.themeType.isRequired,\n};\n\nPageLayout.defaultProps = {\n  children: null,\n  leftSidePanelContent: null,\n  rightSidePanelContent: null,\n};\n\nexport default ThemedPageLayout;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AAA8D,IAAAE,WAAA,GAAAF,OAAA;AAAA,MAAAG,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAiB9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAA2C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,oBAAoB;EACpBC,qBAAqB;EACrBC;AACF,CAAC,kBACC,IAAAN,WAAA,CAAAO,IAAA;EAAKC,SAAS,EAAEF,KAAK,CAACG,SAAU;EAAAN,QAAA,gBAC9B,IAAAH,WAAA,CAAAU,GAAA;IAAKF,SAAS,EAAE,CAACF,KAAK,CAACK,SAAS,EAAEL,KAAK,CAACM,aAAa,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE;IAAAV,QAAA,EAC9DC;EAAoB,CAClB,CAAC,eACN,IAAAJ,WAAA,CAAAU,GAAA;IAAKF,SAAS,EAAEF,KAAK,CAACQ,SAAU;IAAAX,QAAA,EAC7BA;EAAQ,CACN,CAAC,eACN,IAAAH,WAAA,CAAAU,GAAA;IAAKF,SAAS,EAAE,CAACF,KAAK,CAACK,SAAS,EAAEL,KAAK,CAACS,cAAc,CAAC,CAACF,IAAI,CAAC,GAAG,CAAE;IAAAV,QAAA,EAC/DE;EAAqB,CACnB,CAAC;AAAA,CACH,CACN;AAED,MAAMW,gBAAgB,GAAG,IAAAC,oBAAM,EAACf,UAAU,EAAE,YAAY,EAAE,CACxD,WAAW,EACX,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,WAAW,CACZ,EAAED,SAAS,CAAC;AAEbC,UAAU,CAACgB,SAAS,GAAG;EACrBf,QAAQ,EAAEgB,kBAAE,CAACC,IAAI;EACjBhB,oBAAoB,EAAEe,kBAAE,CAACC,IAAI;EAC7Bf,qBAAqB,EAAEc,kBAAE,CAACC,IAAI;EAC9Bd,KAAK,EAAEU,gBAAgB,CAACK,SAAS,CAACC;AACpC,CAAC;AAEDpB,UAAU,CAACqB,YAAY,GAAG;EACxBpB,QAAQ,EAAE,IAAI;EACdC,oBAAoB,EAAE,IAAI;EAC1BC,qBAAqB,EAAE;AACzB,CAAC;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,gBAAgB"}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_jsxRuntime","baseTheme","validThemeKeys","PageLayout","children","leftSidePanelContent","rightSidePanelContent","theme","jsxs","className","container","jsx","sidePanel","leftSidePanel","join","mainPanel","rightSidePanel","ThemedPageLayout","themed","propTypes","PT","node","themeType","isRequired","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/PageLayout/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport type { ReactNode } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\n\nconst validThemeKeys = [\n  'container',\n  'leftSidePanel',\n  'mainPanel',\n  'rightSidePanel',\n  'sidePanel',\n] as const;\n\ntype PropsT = {\n  children?: ReactNode;\n  leftSidePanelContent?: ReactNode;\n  rightSidePanelContent?: ReactNode;\n  theme: Theme<typeof validThemeKeys>;\n};\n\n/**\n * Simple and themeable page layout. It keeps the main content centered in\n * a column of limited width, which fills entire viewport on small screens\n * (under `$screen-md = 1024px` size). At larger screens the column keeps\n * `$screen-md` size, and it is centered at the page, surrounded by side\n * panels, where additional content can be displayed.\n *\n * **Children:** Component children are rendered as the content of main panel.\n * @param {object} [props] Component properties.\n * @param {Node} [props.leftSidePanelContent] The content for left side panel.\n * @param {Node} [props.rightSidePanelContent] The content for right side panel.\n * @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.\n * @param {...any} [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst PageLayout: React.FunctionComponent<PropsT> = ({\n  children,\n  leftSidePanelContent,\n  rightSidePanelContent,\n  theme,\n}) => (\n  <div className={theme.container}>\n    <div className={[theme.sidePanel, theme.leftSidePanel].join(' ')}>\n      {leftSidePanelContent}\n    </div>\n    <div className={theme.mainPanel}>\n      {children}\n    </div>\n    <div className={[theme.sidePanel, theme.rightSidePanel].join(' ')}>\n      {rightSidePanelContent}\n    </div>\n  </div>\n);\n\nconst ThemedPageLayout = themed(\n  PageLayout,\n  'PageLayout',\n  validThemeKeys,\n  baseTheme,\n);\n\nPageLayout.propTypes = {\n  children: PT.node,\n  leftSidePanelContent: PT.node,\n  rightSidePanelContent: PT.node,\n  theme: ThemedPageLayout.themeType.isRequired,\n};\n\nPageLayout.defaultProps = {\n  children: null,\n  leftSidePanelContent: null,\n  rightSidePanelContent: null,\n};\n\nexport default ThemedPageLayout;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AAA8D,IAAAE,WAAA,GAAAF,OAAA;AAAA,MAAAG,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI9D,MAAMC,cAAc,GAAG,CACrB,WAAW,EACX,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,WAAW,CACH;AASV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAA2C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,oBAAoB;EACpBC,qBAAqB;EACrBC;AACF,CAAC,kBACC,IAAAP,WAAA,CAAAQ,IAAA;EAAKC,SAAS,EAAEF,KAAK,CAACG,SAAU;EAAAN,QAAA,gBAC9B,IAAAJ,WAAA,CAAAW,GAAA;IAAKF,SAAS,EAAE,CAACF,KAAK,CAACK,SAAS,EAAEL,KAAK,CAACM,aAAa,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE;IAAAV,QAAA,EAC9DC;EAAoB,CAClB,CAAC,eACN,IAAAL,WAAA,CAAAW,GAAA;IAAKF,SAAS,EAAEF,KAAK,CAACQ,SAAU;IAAAX,QAAA,EAC7BA;EAAQ,CACN,CAAC,eACN,IAAAJ,WAAA,CAAAW,GAAA;IAAKF,SAAS,EAAE,CAACF,KAAK,CAACK,SAAS,EAAEL,KAAK,CAACS,cAAc,CAAC,CAACF,IAAI,CAAC,GAAG,CAAE;IAAAV,QAAA,EAC/DE;EAAqB,CACnB,CAAC;AAAA,CACH,CACN;AAED,MAAMW,gBAAgB,GAAG,IAAAC,oBAAM,EAC7Bf,UAAU,EACV,YAAY,EACZD,cAAc,EACdD,SACF,CAAC;AAEDE,UAAU,CAACgB,SAAS,GAAG;EACrBf,QAAQ,EAAEgB,kBAAE,CAACC,IAAI;EACjBhB,oBAAoB,EAAEe,kBAAE,CAACC,IAAI;EAC7Bf,qBAAqB,EAAEc,kBAAE,CAACC,IAAI;EAC9Bd,KAAK,EAAEU,gBAAgB,CAACK,SAAS,CAACC;AACpC,CAAC;AAEDpB,UAAU,CAACqB,YAAY,GAAG;EACxBpB,QAAQ,EAAE,IAAI;EACdC,oBAAoB,EAAE,IAAI;EAC1BC,qBAAqB,EAAE;AACzB,CAAC;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,gBAAgB"}

package/build/development/shared/components/TextArea/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultTheme = {
+  "context": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___context___KVPc7g",
+  "ad": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___ad___z2GQ0Z",
+  "hoc": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___hoc___8R1Qdj",
+  "container": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___container___dzMVIB",
+  "textarea": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg",
+  "hidden": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___hidden___GiHBXI"
+};
+const validThemeKeys = ['container', 'hidden', 'textarea'];
+const TextArea = ({
+  onChange,
+  onKeyDown,
+  placeholder,
+  theme,
+  value
+}) => {
+  const hiddenAreaRef = (0, _react.useRef)(null);
+  const [height, setHeight] = (0, _react.useState)();
+  const [localValue, setLocalValue] = (0, _react.useState)(value || '');
+  if (value !== undefined && localValue !== value) setLocalValue(value);
+
+  // This resizes text area's height when its width is changed for any reason.
+  (0, _react.useEffect)(() => {
+    const el = hiddenAreaRef.current;
+    if (!el) return undefined;
+    const cb = () => {
+      setHeight(el.scrollHeight);
+    };
+    const observer = new ResizeObserver(cb);
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // This resizes the text area when its content is modified.
+  (0, _react.useEffect)(() => {
+    const el = hiddenAreaRef.current;
+    if (el) setHeight(el.scrollHeight);
+  }, [localValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: theme.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+      // This text area is hidden underneath the primary one below,
+      // and it is used for text measurements, to implement auto-scaling
+      // of the primary textarea's height.
+      readOnly: true,
+      ref: hiddenAreaRef,
+      className: `${theme.textarea} ${theme.hidden}`,
+      value: localValue
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+      // When value is "undefined" the text area is not-managed, and we should
+      // manage it internally for the measurement / resizing functionality
+      // to work.
+      onChange: value === undefined ? e => {
+        setLocalValue(e.target.value);
+      } : onChange,
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      style: {
+        height
+      },
+      className: theme.textarea,
+      value: localValue
+    })]
+  });
+};
+const ThemedTextArea = (0, _reactThemes.default)(TextArea, 'TextArea', validThemeKeys, defaultTheme);
+TextArea.propTypes = {
+  onChange: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  placeholder: _propTypes.default.string,
+  theme: ThemedTextArea.themeType.isRequired,
+  value: _propTypes.default.string
+};
+TextArea.defaultProps = {
+  onChange: undefined,
+  onKeyDown: undefined,
+  placeholder: '',
+  value: undefined
+};
+var _default = exports.default = ThemedTextArea;
+//# sourceMappingURL=index.js.map

package/build/development/shared/components/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","require","_propTypes","_interopRequireDefault","_reactThemes","_jsxRuntime","defaultTheme","validThemeKeys","TextArea","onChange","onKeyDown","placeholder","theme","value","hiddenAreaRef","useRef","height","setHeight","useState","localValue","setLocalValue","undefined","useEffect","el","current","cb","scrollHeight","observer","ResizeObserver","observe","disconnect","jsxs","className","container","children","jsx","readOnly","ref","textarea","hidden","e","target","style","ThemedTextArea","themed","propTypes","PT","func","string","themeType","isRequired","defaultProps","_default","exports","default"],"sources":["../../../../../src/shared/components/TextArea/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport PT from 'prop-types';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\nconst validThemeKeys = [\n  'container',\n  'hidden',\n  'textarea',\n] as const;\n\ntype Props = {\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n  placeholder?: string;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\nconst TextArea: React.FunctionComponent<Props> = ({\n  onChange,\n  onKeyDown,\n  placeholder,\n  theme,\n  value,\n}) => {\n  const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [height, setHeight] = useState<number | undefined>();\n\n  const [localValue, setLocalValue] = useState(value || '');\n  if (value !== undefined && localValue !== value) setLocalValue(value);\n\n  // This resizes text area's height when its width is changed for any reason.\n  useEffect(() => {\n    const el = hiddenAreaRef.current;\n    if (!el) return undefined;\n\n    const cb = () => {\n      setHeight(el.scrollHeight);\n    };\n    const observer = new ResizeObserver(cb);\n    observer.observe(el);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  // This resizes the text area when its content is modified.\n  useEffect(() => {\n    const el = hiddenAreaRef.current;\n    if (el) setHeight(el.scrollHeight);\n  }, [localValue]);\n\n  return (\n    <div className={theme.container}>\n      <textarea\n        // This text area is hidden underneath the primary one below,\n        // and it is used for text measurements, to implement auto-scaling\n        // of the primary textarea's height.\n        readOnly\n        ref={hiddenAreaRef}\n        className={`${theme.textarea} ${theme.hidden}`}\n        value={localValue}\n      />\n      <textarea\n        // When value is \"undefined\" the text area is not-managed, and we should\n        // manage it internally for the measurement / resizing functionality\n        // to work.\n        onChange={value === undefined ? ((e) => {\n          setLocalValue(e.target.value);\n        }) : onChange}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        style={{ height }}\n        className={theme.textarea}\n        value={localValue}\n      />\n    </div>\n  );\n};\n\nconst ThemedTextArea = themed(\n  TextArea,\n  'TextArea',\n  validThemeKeys,\n  defaultTheme,\n);\n\nTextArea.propTypes = {\n  onChange: PT.func,\n  onKeyDown: PT.func,\n  placeholder: PT.string,\n  theme: ThemedTextArea.themeType.isRequired,\n  value: PT.string,\n};\n\nTextArea.defaultProps = {\n  onChange: undefined,\n  onKeyDown: undefined,\n  placeholder: '',\n  value: undefined,\n};\n\nexport default ThemedTextArea;\n"],"mappings":"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"}