@dr.pogodin/react-utils 1.47.0-alpha.2 → 1.47.0-alpha.3

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

@@ -1,14 +1,6 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _qs = _interopRequireDefault(require("qs"));
-var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
-var _Throbber = _interopRequireDefault(require("../Throbber"));
-var _jsxRuntime = require("react/jsx-runtime");
+import qs from 'qs';
+import themed from '@dr.pogodin/react-themes';
+import Throbber from "../Throbber/index.js";
 const baseTheme = {
   "context": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-base___context___Pa7GiX",
   "ad": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-base___ad___NikZ57",
@@ -22,6 +14,7 @@ const throbberTheme = {
   "hoc": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-throbber___hoc___T5TGzT",
   "container": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-throbber___container___IgN6Uf"
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A component for embeding a YouTube video.
  * @param [props] Component properties.
@@ -46,21 +39,21 @@ const YouTubeVideo = ({
   const srcParts = src.split('?');
   let [url] = srcParts;
   const [, queryString] = srcParts;
-  const query = queryString ? _qs.default.parse(queryString) : {};
+  const query = queryString ? qs.parse(queryString) : {};
   const videoId = query.v ?? url?.match(/\/([a-zA-Z0-9-_]*)$/)?.[1];
   url = `https://www.youtube.com/embed/${videoId}`;
   delete query.v;
   query.autoplay = autoplay ? '1' : '0';
-  url += `?${_qs.default.stringify(query)}`;
+  url += `?${qs.stringify(query)}`;
 
   // TODO: https://developers.google.com/youtube/player_parameters
   // More query parameters can be exposed via the component props.
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: theme.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Throbber.default, {
+    children: [/*#__PURE__*/_jsx(Throbber, {
       theme: throbberTheme
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+    }), /*#__PURE__*/_jsx("iframe", {
       // eslint-disable-line react/iframe-missing-sandbox
       allow: "autoplay",
       allowFullScreen: true,
@@ -70,5 +63,5 @@ const YouTubeVideo = ({
     })]
   });
 };
-var _default = exports.default = (0, _reactThemes.default)(YouTubeVideo, 'YouTubeVideo', baseTheme);
+export default themed(YouTubeVideo, 'YouTubeVideo', baseTheme);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_qs","_interopRequireDefault","require","_reactThemes","_Throbber","_jsxRuntime","baseTheme","throbberTheme","YouTubeVideo","autoplay","src","theme","title","srcParts","split","url","queryString","query","qs","parse","videoId","v","match","stringify","_jsxs","className","container","children","_jsx","Throbber","allow","allowFullScreen","video","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/YouTubeVideo/index.tsx"],"sourcesContent":["import qs from 'qs';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Throbber from 'components/Throbber';\n\nimport baseTheme from './base.scss';\nimport throbberTheme from './throbber.scss';\n\ntype ComponentThemeT = Theme<'container' | 'video'>;\n\ntype PropsT = {\n  autoplay?: boolean;\n  src: string;\n  theme: ComponentThemeT;\n  title?: string;\n};\n\n/**\n * A component for embeding a YouTube video.\n * @param [props] Component properties.\n * @param [props.autoplay] If `true` the video will start to play\n * automatically once loaded.\n * @param [props.src] URL of the video to play. Can be in any of\n * the following formats, and keeps any additional query parameters understood\n * by the YouTube IFrame player:\n * - `https://www.youtube.com/watch?v=NdF6Rmt6Ado`\n * - `https://youtu.be/NdF6Rmt6Ado`\n * - `https://www.youtube.com/embed/NdF6Rmt6Ado`\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.title] The `title` attribute to add to the player\n * IFrame.\n */\nconst YouTubeVideo: React.FunctionComponent<PropsT> = ({\n  autoplay,\n  src,\n  theme,\n  title,\n}) => {\n  const srcParts = src.split('?');\n  let [url] = srcParts;\n  const [, queryString] = srcParts;\n  const query = queryString ? qs.parse(queryString) : {};\n\n  const videoId = query.v ?? url?.match(/\\/([a-zA-Z0-9-_]*)$/)?.[1];\n  url = `https://www.youtube.com/embed/${videoId as string}`;\n\n  delete query.v;\n  query.autoplay = autoplay ? '1' : '0';\n  url += `?${qs.stringify(query)}`;\n\n  // TODO: https://developers.google.com/youtube/player_parameters\n  // More query parameters can be exposed via the component props.\n\n  return (\n    <div className={theme.container}>\n      <Throbber theme={throbberTheme} />\n      {/* TODO: I guess, we better add the sanbox, but right now I don't have\n          time to carefully explore which restrictions should be lifted to allow\n          embed YouTube player to work... sometime later we'll take care of it */\n      }\n      <iframe // eslint-disable-line react/iframe-missing-sandbox\n        allow=\"autoplay\"\n        allowFullScreen\n        className={theme.video}\n        src={url}\n        title={title}\n      />\n    </div>\n  );\n};\n\nexport default themed(YouTubeVideo, 'YouTubeVideo', baseTheme);\n"],"mappings":";;;;;;;AAAA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AAG4C,IAAAG,WAAA,GAAAH,OAAA;AAAA,MAAAI,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,MAAAC,aAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAW5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAA6C,GAAGA,CAAC;EACrDC,QAAQ;EACRC,GAAG;EACHC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAGH,GAAG,CAACI,KAAK,CAAC,GAAG,CAAC;EAC/B,IAAI,CAACC,GAAG,CAAC,GAAGF,QAAQ;EACpB,MAAM,GAAGG,WAAW,CAAC,GAAGH,QAAQ;EAChC,MAAMI,KAAK,GAAGD,WAAW,GAAGE,WAAE,CAACC,KAAK,CAACH,WAAW,CAAC,GAAG,CAAC,CAAC;EAEtD,MAAMI,OAAO,GAAGH,KAAK,CAACI,CAAC,IAAIN,GAAG,EAAEO,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;EACjEP,GAAG,GAAG,iCAAiCK,OAAO,EAAY;EAE1D,OAAOH,KAAK,CAACI,CAAC;EACdJ,KAAK,CAACR,QAAQ,GAAGA,QAAQ,GAAG,GAAG,GAAG,GAAG;EACrCM,GAAG,IAAI,IAAIG,WAAE,CAACK,SAAS,CAACN,KAAK,CAAC,EAAE;;EAEhC;EACA;;EAEA,oBACE,IAAAO,gBAAA;IAAKC,SAAS,EAAEd,KAAK,CAACe,SAAU;IAAAC,QAAA,gBAC9B,IAAAC,eAAA,EAACC,iBAAQ;MAAClB,KAAK,EAAEJ;IAAc,CAAE,CAAC,eAKlC,IAAAqB,eAAA;MAAQ;MACNE,KAAK,EAAC,UAAU;MAChBC,eAAe;MACfN,SAAS,EAAEd,KAAK,CAACqB,KAAM;MACvBtB,GAAG,EAAEK,GAAI;MACTH,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACC,CAAC;AAEV,CAAC;AAAA,IAAAqB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc,IAAAC,oBAAM,EAAC5B,YAAY,EAAE,cAAc,EAAEF,SAAS,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["qs","themed","Throbber","baseTheme","throbberTheme","jsx","_jsx","jsxs","_jsxs","YouTubeVideo","autoplay","src","theme","title","srcParts","split","url","queryString","query","parse","videoId","v","match","stringify","className","container","children","allow","allowFullScreen","video"],"sources":["../../../../../src/shared/components/YouTubeVideo/index.tsx"],"sourcesContent":["import qs from 'qs';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Throbber from 'components/Throbber';\n\nimport baseTheme from './base.scss';\nimport throbberTheme from './throbber.scss';\n\ntype ComponentThemeT = Theme<'container' | 'video'>;\n\ntype PropsT = {\n  autoplay?: boolean;\n  src: string;\n  theme: ComponentThemeT;\n  title?: string;\n};\n\n/**\n * A component for embeding a YouTube video.\n * @param [props] Component properties.\n * @param [props.autoplay] If `true` the video will start to play\n * automatically once loaded.\n * @param [props.src] URL of the video to play. Can be in any of\n * the following formats, and keeps any additional query parameters understood\n * by the YouTube IFrame player:\n * - `https://www.youtube.com/watch?v=NdF6Rmt6Ado`\n * - `https://youtu.be/NdF6Rmt6Ado`\n * - `https://www.youtube.com/embed/NdF6Rmt6Ado`\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.title] The `title` attribute to add to the player\n * IFrame.\n */\nconst YouTubeVideo: React.FunctionComponent<PropsT> = ({\n  autoplay,\n  src,\n  theme,\n  title,\n}) => {\n  const srcParts = src.split('?');\n  let [url] = srcParts;\n  const [, queryString] = srcParts;\n  const query = queryString ? qs.parse(queryString) : {};\n\n  const videoId = query.v ?? url?.match(/\\/([a-zA-Z0-9-_]*)$/)?.[1];\n  url = `https://www.youtube.com/embed/${videoId as string}`;\n\n  delete query.v;\n  query.autoplay = autoplay ? '1' : '0';\n  url += `?${qs.stringify(query)}`;\n\n  // TODO: https://developers.google.com/youtube/player_parameters\n  // More query parameters can be exposed via the component props.\n\n  return (\n    <div className={theme.container}>\n      <Throbber theme={throbberTheme} />\n      {/* TODO: I guess, we better add the sanbox, but right now I don't have\n          time to carefully explore which restrictions should be lifted to allow\n          embed YouTube player to work... sometime later we'll take care of it */\n      }\n      <iframe // eslint-disable-line react/iframe-missing-sandbox\n        allow=\"autoplay\"\n        allowFullScreen\n        className={theme.video}\n        src={url}\n        title={title}\n      />\n    </div>\n  );\n};\n\nexport default themed(YouTubeVideo, 'YouTubeVideo', baseTheme);\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,IAAI;AAEnB,OAAOC,MAAM,MAAsB,0BAA0B;AAAA,OAEtDC,QAAQ;AAAA,MAAAC,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,MAAAC,aAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAG6B,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAA6C,GAAGA,CAAC;EACrDC,QAAQ;EACRC,GAAG;EACHC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAGH,GAAG,CAACI,KAAK,CAAC,GAAG,CAAC;EAC/B,IAAI,CAACC,GAAG,CAAC,GAAGF,QAAQ;EACpB,MAAM,GAAGG,WAAW,CAAC,GAAGH,QAAQ;EAChC,MAAMI,KAAK,GAAGD,WAAW,GAAGjB,EAAE,CAACmB,KAAK,CAACF,WAAW,CAAC,GAAG,CAAC,CAAC;EAEtD,MAAMG,OAAO,GAAGF,KAAK,CAACG,CAAC,IAAIL,GAAG,EAAEM,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;EACjEN,GAAG,GAAG,iCAAiCI,OAAO,EAAY;EAE1D,OAAOF,KAAK,CAACG,CAAC;EACdH,KAAK,CAACR,QAAQ,GAAGA,QAAQ,GAAG,GAAG,GAAG,GAAG;EACrCM,GAAG,IAAI,IAAIhB,EAAE,CAACuB,SAAS,CAACL,KAAK,CAAC,EAAE;;EAEhC;EACA;;EAEA,oBACEV,KAAA;IAAKgB,SAAS,EAAEZ,KAAK,CAACa,SAAU;IAAAC,QAAA,gBAC9BpB,IAAA,CAACJ,QAAQ;MAACU,KAAK,EAAER;IAAc,CAAE,CAAC,eAKlCE,IAAA;MAAQ;MACNqB,KAAK,EAAC,UAAU;MAChBC,eAAe;MACfJ,SAAS,EAAEZ,KAAK,CAACiB,KAAM;MACvBlB,GAAG,EAAEK,GAAI;MACTH,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACC,CAAC;AAEV,CAAC;AAED,eAAeZ,MAAM,CAACQ,YAAY,EAAE,cAAc,EAAEN,SAAS,CAAC","ignoreList":[]}

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

@@ -1,132 +1,18 @@
-"use strict";
+/**
+ * Just an aggregation of all exported components into a single module.
+ */
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  MetaTags: true,
-  Button: true,
-  BaseButton: true,
-  Checkbox: true,
-  Input: true,
-  Link: true,
-  PageLayout: true,
-  Modal: true,
-  BaseModal: true,
-  NavLink: true,
-  Throbber: true,
-  WithTooltip: true,
-  YouTubeVideo: true,
-  TextArea: true
-};
-Object.defineProperty(exports, "BaseButton", {
-  enumerable: true,
-  get: function () {
-    return _Button.BaseButton;
-  }
-});
-Object.defineProperty(exports, "BaseModal", {
-  enumerable: true,
-  get: function () {
-    return _Modal.BaseModal;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () {
-    return _Button.default;
-  }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () {
-    return _Checkbox.default;
-  }
-});
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function () {
-    return _Input.default;
-  }
-});
-Object.defineProperty(exports, "Link", {
-  enumerable: true,
-  get: function () {
-    return _Link.default;
-  }
-});
-Object.defineProperty(exports, "MetaTags", {
-  enumerable: true,
-  get: function () {
-    return _reactHelmet.MetaTags;
-  }
-});
-Object.defineProperty(exports, "Modal", {
-  enumerable: true,
-  get: function () {
-    return _Modal.default;
-  }
-});
-Object.defineProperty(exports, "NavLink", {
-  enumerable: true,
-  get: function () {
-    return _NavLink.default;
-  }
-});
-Object.defineProperty(exports, "PageLayout", {
-  enumerable: true,
-  get: function () {
-    return _PageLayout.default;
-  }
-});
-Object.defineProperty(exports, "TextArea", {
-  enumerable: true,
-  get: function () {
-    return _TextArea.default;
-  }
-});
-Object.defineProperty(exports, "Throbber", {
-  enumerable: true,
-  get: function () {
-    return _Throbber.default;
-  }
-});
-Object.defineProperty(exports, "WithTooltip", {
-  enumerable: true,
-  get: function () {
-    return _WithTooltip.default;
-  }
-});
-Object.defineProperty(exports, "YouTubeVideo", {
-  enumerable: true,
-  get: function () {
-    return _YouTubeVideo.default;
-  }
-});
-var _reactHelmet = require("@dr.pogodin/react-helmet");
-var _selectors = require("./selectors");
-Object.keys(_selectors).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _selectors[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _selectors[key];
-    }
-  });
-});
-var _Button = _interopRequireWildcard(require("./Button"));
-var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-var _Input = _interopRequireDefault(require("./Input"));
-var _Link = _interopRequireDefault(require("./Link"));
-var _PageLayout = _interopRequireDefault(require("./PageLayout"));
-var _Modal = _interopRequireWildcard(require("./Modal"));
-var _NavLink = _interopRequireDefault(require("./NavLink"));
-var _Throbber = _interopRequireDefault(require("./Throbber"));
-var _WithTooltip = _interopRequireDefault(require("./WithTooltip"));
-var _YouTubeVideo = _interopRequireDefault(require("./YouTubeVideo"));
-var _TextArea = _interopRequireDefault(require("./TextArea"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+export { MetaTags } from '@dr.pogodin/react-helmet';
+export * from "./selectors/index.js";
+export { default as Button, BaseButton } from "./Button/index.js";
+export { default as Checkbox } from "./Checkbox/index.js";
+export { default as Input } from "./Input/index.js";
+export { default as Link } from "./Link.js";
+export { default as PageLayout } from "./PageLayout/index.js";
+export { default as Modal, BaseModal } from "./Modal/index.js";
+export { default as NavLink } from "./NavLink.js";
+export { default as Throbber } from "./Throbber/index.js";
+export { default as WithTooltip } from "./WithTooltip/index.js";
+export { default as YouTubeVideo } from "./YouTubeVideo/index.js";
+export { default as TextArea } from "./TextArea/index.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_reactHelmet","require","_selectors","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_Button","_interopRequireWildcard","_Checkbox","_interopRequireDefault","_Input","_Link","_PageLayout","_Modal","_NavLink","_Throbber","_WithTooltip","_YouTubeVideo","_TextArea","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","set","getOwnPropertyDescriptor"],"sources":["../../../../src/shared/components/index.ts"],"sourcesContent":["/**\n * Just an aggregation of all exported components into a single module.\n */\n\nexport { MetaTags } from '@dr.pogodin/react-helmet';\n\nexport * from 'components/selectors';\n\nexport { default as Button, BaseButton } from 'components/Button';\nexport { default as Checkbox } from 'components/Checkbox';\nexport { default as Input } from 'components/Input';\nexport { default as Link } from 'components/Link';\nexport { default as PageLayout } from 'components/PageLayout';\nexport { default as Modal, BaseModal } from 'components/Modal';\nexport { default as NavLink } from 'components/NavLink';\nexport { default as Throbber } from 'components/Throbber';\nexport { default as WithTooltip } from 'components/WithTooltip';\nexport { default as YouTubeVideo } from 'components/YouTubeVideo';\n\nexport { default as TextArea } from './TextArea';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,UAAA,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,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,UAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,UAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAEA,IAAAS,OAAA,GAAAC,uBAAA,CAAAf,OAAA;AACA,IAAAgB,SAAA,GAAAC,sBAAA,CAAAjB,OAAA;AACA,IAAAkB,MAAA,GAAAD,sBAAA,CAAAjB,OAAA;AACA,IAAAmB,KAAA,GAAAF,sBAAA,CAAAjB,OAAA;AACA,IAAAoB,WAAA,GAAAH,sBAAA,CAAAjB,OAAA;AACA,IAAAqB,MAAA,GAAAN,uBAAA,CAAAf,OAAA;AACA,IAAAsB,QAAA,GAAAL,sBAAA,CAAAjB,OAAA;AACA,IAAAuB,SAAA,GAAAN,sBAAA,CAAAjB,OAAA;AACA,IAAAwB,YAAA,GAAAP,sBAAA,CAAAjB,OAAA;AACA,IAAAyB,aAAA,GAAAR,sBAAA,CAAAjB,OAAA;AAEA,IAAA0B,SAAA,GAAAT,sBAAA,CAAAjB,OAAA;AAA4B,SAAAe,wBAAAY,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAd,uBAAA,YAAAA,CAAAY,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAApB,GAAA,CAAAc,CAAA,GAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAArB,cAAA,CAAAC,IAAA,CAAAmB,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAA/B,MAAA,CAAAS,cAAA,KAAAT,MAAA,CAAAsC,wBAAA,CAAAb,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAArB,GAAA,IAAAqB,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["MetaTags","default","Button","BaseButton","Checkbox","Input","Link","PageLayout","Modal","BaseModal","NavLink","Throbber","WithTooltip","YouTubeVideo","TextArea"],"sources":["../../../../src/shared/components/index.ts"],"sourcesContent":["/**\n * Just an aggregation of all exported components into a single module.\n */\n\nexport { MetaTags } from '@dr.pogodin/react-helmet';\n\nexport * from 'components/selectors';\n\nexport { default as Button, BaseButton } from 'components/Button';\nexport { default as Checkbox } from 'components/Checkbox';\nexport { default as Input } from 'components/Input';\nexport { default as Link } from 'components/Link';\nexport { default as PageLayout } from 'components/PageLayout';\nexport { default as Modal, BaseModal } from 'components/Modal';\nexport { default as NavLink } from 'components/NavLink';\nexport { default as Throbber } from 'components/Throbber';\nexport { default as WithTooltip } from 'components/WithTooltip';\nexport { default as YouTubeVideo } from 'components/YouTubeVideo';\n\nexport { default as TextArea } from './TextArea';\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,0BAA0B;AAAA;AAAA,SAI1CC,OAAO,IAAIC,MAAM,EAAEC,UAAU;AAAA,SAC7BF,OAAO,IAAIG,QAAQ;AAAA,SACnBH,OAAO,IAAII,KAAK;AAAA,SAChBJ,OAAO,IAAIK,IAAI;AAAA,SACfL,OAAO,IAAIM,UAAU;AAAA,SACrBN,OAAO,IAAIO,KAAK,EAAEC,SAAS;AAAA,SAC3BR,OAAO,IAAIS,OAAO;AAAA,SAClBT,OAAO,IAAIU,QAAQ;AAAA,SACnBV,OAAO,IAAIW,WAAW;AAAA,SACtBX,OAAO,IAAIY,YAAY;AAAA,SAEvBZ,OAAO,IAAIa,QAAQ","ignoreList":[]}

package/build/development/shared/components/selectors/CustomDropdown/Options/index.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.areEqual = areEqual;
-exports.default = void 0;
-var _react = require("react");
-var _Modal = require("../../../Modal");
-var _common = require("../../common");
-var _jsxRuntime = require("react/jsx-runtime");
+import { useImperativeHandle, useRef } from 'react';
+import { BaseModal } from "../../../Modal/index.js";
+import { optionValueName } from "../../common.js";
 const S = {
   "overlay": "-dr-pogodin-react-utils___build-web-shared-components-selectors-CustomDropdown-Options-style___overlay___ntZ5My"
 };
-function areEqual(a, b) {
+import { jsx as _jsx } from "react/jsx-runtime";
+export function areEqual(a, b) {
   return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;
 }
 const Options = ({
@@ -25,8 +18,8 @@ const Options = ({
   options,
   ref
 }) => {
-  const opsRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, () => ({
+  const opsRef = useRef(null);
+  useImperativeHandle(ref, () => ({
     measure: () => {
       const e = opsRef.current?.parentElement;
       if (!e) return undefined;
@@ -41,8 +34,8 @@ const Options = ({
   const optionNodes = [];
   for (const option of options) {
     if (!filter || filter(option)) {
-      const [iValue, iName] = (0, _common.optionValueName)(option);
-      optionNodes.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      const [iValue, iName] = optionValueName(option);
+      optionNodes.push(/*#__PURE__*/_jsx("div", {
         className: optionClass,
         onClick: e => {
           onChange(iValue);
@@ -60,7 +53,7 @@ const Options = ({
       }, iValue));
     }
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.BaseModal
+  return /*#__PURE__*/_jsx(BaseModal
   // Closes the dropdown (cancels the selection) on any page scrolling attempt.
   // This is the same native <select> elements do on scrolling, and at least for
   // now we have no reason to deal with complications needed to support open
@@ -78,11 +71,11 @@ const Options = ({
       hoc: '',
       overlay: S.overlay
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/_jsx("div", {
       ref: opsRef,
       children: optionNodes
     })
   });
 };
-var _default = exports.default = Options;
+export default Options;
 //# sourceMappingURL=index.js.map

package/build/development/shared/components/selectors/CustomDropdown/Options/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_Modal","_common","_jsxRuntime","S","areEqual","a","b","left","top","width","Options","containerClass","containerStyle","filter","onCancel","onChange","optionClass","options","ref","opsRef","useRef","useImperativeHandle","measure","e","current","parentElement","undefined","rect","getBoundingClientRect","style","window","getComputedStyle","mBottom","parseFloat","marginBottom","mTop","marginTop","height","optionNodes","option","iValue","iName","optionValueName","push","_jsx","className","onClick","stopPropagation","onKeyDown","key","role","tabIndex","children","BaseModal","cancelOnScrolling","dontDisableScrolling","theme","ad","container","context","hoc","overlay","_default","exports","default"],"sources":["../../../../../../../src/shared/components/selectors/CustomDropdown/Options/index.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type ReactNode,\n  type RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { BaseModal } from 'components/Modal';\n\nimport {\n  type OptionT,\n  type OptionsT,\n  type ValueT,\n  optionValueName,\n} from '../../common';\n\nimport S from './style.scss';\n\nexport type ContainerPosT = {\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport function areEqual(a?: ContainerPosT, b?: ContainerPosT): boolean {\n  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;\n}\n\nexport type RefT = {\n  measure: () => DOMRect | undefined;\n};\n\ntype PropsT = {\n  containerClass: string;\n  containerStyle?: ContainerPosT;\n  filter?: (item: OptionT<ReactNode> | ValueT) => boolean;\n  optionClass: string;\n  options: Readonly<OptionsT<ReactNode>>;\n  onCancel: () => void;\n  onChange: (value: ValueT) => void;\n  ref?: RefObject<RefT | null>;\n};\n\nconst Options: FunctionComponent<PropsT> = ({\n  containerClass,\n  containerStyle,\n  filter,\n  onCancel,\n  onChange,\n  optionClass,\n  options,\n  ref,\n}) => {\n  const opsRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    measure: () => {\n      const e = opsRef.current?.parentElement;\n      if (!e) return undefined;\n\n      const rect = opsRef.current!.getBoundingClientRect();\n      const style = window.getComputedStyle(e);\n      const mBottom = parseFloat(style.marginBottom);\n      const mTop = parseFloat(style.marginTop);\n\n      rect.height += mBottom + mTop;\n\n      return rect;\n    },\n  }), []);\n\n  const optionNodes: ReactNode[] = [];\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      optionNodes.push(\n        <div\n          className={optionClass}\n          key={iValue}\n          onClick={(e) => {\n            onChange(iValue);\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onChange(iValue);\n              e.stopPropagation();\n            }\n          }}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {iName}\n        </div>,\n      );\n    }\n  }\n\n  return (\n    <BaseModal\n      // Closes the dropdown (cancels the selection) on any page scrolling attempt.\n      // This is the same native <select> elements do on scrolling, and at least for\n      // now we have no reason to deal with complications needed to support open\n      // dropdowns during the scrolling (that would need to re-position it in\n      // response to the position changes of the root dropdown element).\n      cancelOnScrolling\n      dontDisableScrolling\n      onCancel={onCancel}\n      style={containerStyle}\n      theme={{\n        ad: '',\n        container: containerClass,\n        context: '',\n        hoc: '',\n        overlay: S.overlay,\n      }}\n    >\n      <div ref={opsRef}>{optionNodes}</div>\n    </BaseModal>\n  );\n};\n\nexport default Options;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useImperativeHandle","useRef","BaseModal","optionValueName","S","jsx","_jsx","areEqual","a","b","left","top","width","Options","containerClass","containerStyle","filter","onCancel","onChange","optionClass","options","ref","opsRef","measure","e","current","parentElement","undefined","rect","getBoundingClientRect","style","window","getComputedStyle","mBottom","parseFloat","marginBottom","mTop","marginTop","height","optionNodes","option","iValue","iName","push","className","onClick","stopPropagation","onKeyDown","key","role","tabIndex","children","cancelOnScrolling","dontDisableScrolling","theme","ad","container","context","hoc","overlay"],"sources":["../../../../../../../src/shared/components/selectors/CustomDropdown/Options/index.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type ReactNode,\n  type RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { BaseModal } from 'components/Modal';\n\nimport {\n  type OptionT,\n  type OptionsT,\n  type ValueT,\n  optionValueName,\n} from '../../common';\n\nimport S from './style.scss';\n\nexport type ContainerPosT = {\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport function areEqual(a?: ContainerPosT, b?: ContainerPosT): boolean {\n  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;\n}\n\nexport type RefT = {\n  measure: () => DOMRect | undefined;\n};\n\ntype PropsT = {\n  containerClass: string;\n  containerStyle?: ContainerPosT;\n  filter?: (item: OptionT<ReactNode> | ValueT) => boolean;\n  optionClass: string;\n  options: Readonly<OptionsT<ReactNode>>;\n  onCancel: () => void;\n  onChange: (value: ValueT) => void;\n  ref?: RefObject<RefT | null>;\n};\n\nconst Options: FunctionComponent<PropsT> = ({\n  containerClass,\n  containerStyle,\n  filter,\n  onCancel,\n  onChange,\n  optionClass,\n  options,\n  ref,\n}) => {\n  const opsRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    measure: () => {\n      const e = opsRef.current?.parentElement;\n      if (!e) return undefined;\n\n      const rect = opsRef.current!.getBoundingClientRect();\n      const style = window.getComputedStyle(e);\n      const mBottom = parseFloat(style.marginBottom);\n      const mTop = parseFloat(style.marginTop);\n\n      rect.height += mBottom + mTop;\n\n      return rect;\n    },\n  }), []);\n\n  const optionNodes: ReactNode[] = [];\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      optionNodes.push(\n        <div\n          className={optionClass}\n          key={iValue}\n          onClick={(e) => {\n            onChange(iValue);\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onChange(iValue);\n              e.stopPropagation();\n            }\n          }}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {iName}\n        </div>,\n      );\n    }\n  }\n\n  return (\n    <BaseModal\n      // Closes the dropdown (cancels the selection) on any page scrolling attempt.\n      // This is the same native <select> elements do on scrolling, and at least for\n      // now we have no reason to deal with complications needed to support open\n      // dropdowns during the scrolling (that would need to re-position it in\n      // response to the position changes of the root dropdown element).\n      cancelOnScrolling\n      dontDisableScrolling\n      onCancel={onCancel}\n      style={containerStyle}\n      theme={{\n        ad: '',\n        container: containerClass,\n        context: '',\n        hoc: '',\n        overlay: S.overlay,\n      }}\n    >\n      <div ref={opsRef}>{optionNodes}</div>\n    </BaseModal>\n  );\n};\n\nexport default Options;\n"],"mappings":"AAAA,SAIEA,mBAAmB,EACnBC,MAAM,QACD,OAAO;AAAA,SAELC,SAAS;AAAA,SAMhBC,eAAe;AAAA,MAAAC,CAAA;EAAA;AAAA;AAGY,SAAAC,GAAA,IAAAC,IAAA;AAQ7B,OAAO,SAASC,QAAQA,CAACC,CAAiB,EAAEC,CAAiB,EAAW;EACtE,OAAOD,CAAC,EAAEE,IAAI,KAAKD,CAAC,EAAEC,IAAI,IAAIF,CAAC,EAAEG,GAAG,KAAKF,CAAC,EAAEE,GAAG,IAAIH,CAAC,EAAEI,KAAK,KAAKH,CAAC,EAAEG,KAAK;AAC1E;AAiBA,MAAMC,OAAkC,GAAGA,CAAC;EAC1CC,cAAc;EACdC,cAAc;EACdC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC;AACF,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EAE3CD,mBAAmB,CAACqB,GAAG,EAAE,OAAO;IAC9BE,OAAO,EAAEA,CAAA,KAAM;MACb,MAAMC,CAAC,GAAGF,MAAM,CAACG,OAAO,EAAEC,aAAa;MACvC,IAAI,CAACF,CAAC,EAAE,OAAOG,SAAS;MAExB,MAAMC,IAAI,GAAGN,MAAM,CAACG,OAAO,CAAEI,qBAAqB,CAAC,CAAC;MACpD,MAAMC,KAAK,GAAGC,MAAM,CAACC,gBAAgB,CAACR,CAAC,CAAC;MACxC,MAAMS,OAAO,GAAGC,UAAU,CAACJ,KAAK,CAACK,YAAY,CAAC;MAC9C,MAAMC,IAAI,GAAGF,UAAU,CAACJ,KAAK,CAACO,SAAS,CAAC;MAExCT,IAAI,CAACU,MAAM,IAAIL,OAAO,GAAGG,IAAI;MAE7B,OAAOR,IAAI;IACb;EACF,CAAC,CAAC,EAAE,EAAE,CAAC;EAEP,MAAMW,WAAwB,GAAG,EAAE;EACnC,KAAK,MAAMC,MAAM,IAAIpB,OAAO,EAAE;IAC5B,IAAI,CAACJ,MAAM,IAAIA,MAAM,CAACwB,MAAM,CAAC,EAAE;MAC7B,MAAM,CAACC,MAAM,EAAEC,KAAK,CAAC,GAAGvC,eAAe,CAACqC,MAAM,CAAC;MAC/CD,WAAW,CAACI,IAAI,cACdrC,IAAA;QACEsC,SAAS,EAAEzB,WAAY;QAEvB0B,OAAO,EAAGrB,CAAC,IAAK;UACdN,QAAQ,CAACuB,MAAM,CAAC;UAChBjB,CAAC,CAACsB,eAAe,CAAC,CAAC;QACrB,CAAE;QACFC,SAAS,EAAGvB,CAAC,IAAK;UAChB,IAAIA,CAAC,CAACwB,GAAG,KAAK,OAAO,EAAE;YACrB9B,QAAQ,CAACuB,MAAM,CAAC;YAChBjB,CAAC,CAACsB,eAAe,CAAC,CAAC;UACrB;QACF,CAAE;QACFG,IAAI,EAAC,QAAQ;QACbC,QAAQ,EAAE,CAAE;QAAAC,QAAA,EAEXT;MAAK,GAdDD,MAeF,CACP,CAAC;IACH;EACF;EAEA,oBACEnC,IAAA,CAACJ;EACC;EACA;EACA;EACA;EACA;EAAA;IACAkD,iBAAiB;IACjBC,oBAAoB;IACpBpC,QAAQ,EAAEA,QAAS;IACnBa,KAAK,EAAEf,cAAe;IACtBuC,KAAK,EAAE;MACLC,EAAE,EAAE,EAAE;MACNC,SAAS,EAAE1C,cAAc;MACzB2C,OAAO,EAAE,EAAE;MACXC,GAAG,EAAE,EAAE;MACPC,OAAO,EAAEvD,CAAC,CAACuD;IACb,CAAE;IAAAR,QAAA,eAEF7C,IAAA;MAAKe,GAAG,EAAEC,MAAO;MAAA6B,QAAA,EAAEZ;IAAW,CAAM;EAAC,CAC5B,CAAC;AAEhB,CAAC;AAED,eAAe1B,OAAO","ignoreList":[]}

package/build/development/shared/components/selectors/CustomDropdown/index.js

@@ -1,16 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
-var _common = require("../common");
-var _Options = _interopRequireWildcard(require("./Options"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+import { useEffect, useRef, useState } from 'react';
+import themed from '@dr.pogodin/react-themes';
+import { optionValueName } from "../common.js";
+import Options, { areEqual } from "./Options/index.js";
 const defaultTheme = {
   "context": "-dr-pogodin-react-utils___build-web-shared-components-selectors-CustomDropdown-theme___context___SNj3wp",
   "ad": "-dr-pogodin-react-utils___build-web-shared-components-selectors-CustomDropdown-theme___ad___T6eOJ-",
@@ -24,6 +15,7 @@ const defaultTheme = {
   "active": "-dr-pogodin-react-utils___build-web-shared-components-selectors-CustomDropdown-theme___active___RoOAZK",
   "upward": "-dr-pogodin-react-utils___build-web-shared-components-selectors-CustomDropdown-theme___upward___--5Xpy"
 };
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BaseCustomDropdown = ({
   filter,
   label,
@@ -32,12 +24,12 @@ const BaseCustomDropdown = ({
   theme,
   value
 }) => {
-  const [active, setActive] = (0, _react.useState)(false);
-  const dropdownRef = (0, _react.useRef)(null);
-  const opsRef = (0, _react.useRef)(null);
-  const [opsPos, setOpsPos] = (0, _react.useState)();
-  const [upward, setUpward] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+  const [active, setActive] = useState(false);
+  const dropdownRef = useRef(null);
+  const opsRef = useRef(null);
+  const [opsPos, setOpsPos] = useState();
+  const [upward, setUpward] = useState(false);
+  useEffect(() => {
     if (!active) return undefined;
     let id;
     const cb = () => {
@@ -57,7 +49,7 @@ const BaseCustomDropdown = ({
           top: anchor.bottom,
           width: anchor.width
         };
-        setOpsPos(now => (0, _Options.areEqual)(now, pos) ? now : pos);
+        setOpsPos(now => areEqual(now, pos) ? now : pos);
       }
       id = requestAnimationFrame(cb);
     };
@@ -84,12 +76,12 @@ const BaseCustomDropdown = ({
     });
     e.stopPropagation();
   };
-  let selected = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+  let selected = /*#__PURE__*/_jsx(_Fragment, {
     children: "\u200C"
   });
   for (const option of options) {
     if (!filter || filter(option)) {
-      const [iValue, iName] = (0, _common.optionValueName)(option);
+      const [iValue, iName] = optionValueName(option);
       if (iValue === value) {
         selected = iName;
         break;
@@ -103,12 +95,12 @@ const BaseCustomDropdown = ({
     containerClassName += ` ${theme.upward}`;
     opsContainerClass += ` ${theme.upward}`;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: containerClassName,
-    children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [label === undefined ? null : /*#__PURE__*/_jsx("div", {
       className: theme.label,
       children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: theme.dropdown,
       onClick: openList,
       onKeyDown: e => {
@@ -117,10 +109,10 @@ const BaseCustomDropdown = ({
       ref: dropdownRef,
       role: "listbox",
       tabIndex: 0,
-      children: [selected, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [selected, /*#__PURE__*/_jsx("div", {
         className: theme.arrow
       })]
-    }), active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
+    }), active ? /*#__PURE__*/_jsx(Options, {
       containerClass: opsContainerClass,
       containerStyle: opsPos,
       onCancel: () => {
@@ -136,5 +128,5 @@ const BaseCustomDropdown = ({
     }) : null]
   });
 };
-var _default = exports.default = (0, _reactThemes.default)(BaseCustomDropdown, 'CustomDropdown', defaultTheme);
+export default themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);
 //# sourceMappingURL=index.js.map

package/build/development/shared/components/selectors/CustomDropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_common","_Options","_interopRequireWildcard","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","defaultTheme","BaseCustomDropdown","filter","label","onChange","options","theme","value","active","setActive","useState","dropdownRef","useRef","opsRef","opsPos","setOpsPos","upward","setUpward","useEffect","undefined","id","cb","anchor","current","getBoundingClientRect","opsRect","measure","fitsDown","bottom","height","window","visualViewport","fitsUp","top","up","pos","left","width","now","areEqual","requestAnimationFrame","cancelAnimationFrame","openList","view","rect","stopPropagation","selected","_jsx","_Fragment","children","option","iValue","iName","optionValueName","containerClassName","container","opsContainerClass","select","_jsxs","className","dropdown","onClick","onKeyDown","key","ref","role","tabIndex","arrow","Options","containerClass","containerStyle","onCancel","newValue","optionClass","_default","exports","themed"],"sources":["../../../../../../src/shared/components/selectors/CustomDropdown/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport { type PropsT, type ValueT, optionValueName } from '../common';\n\nimport Options, { type ContainerPosT, type RefT, areEqual } from './Options';\n\nimport defaultTheme from './theme.scss';\n\nconst BaseCustomDropdown: React.FunctionComponent<\n  PropsT<React.ReactNode, (value: ValueT) => void>\n> = ({\n  filter,\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  const [active, setActive] = useState(false);\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const opsRef = useRef<RefT>(null);\n\n  const [opsPos, setOpsPos] = useState<ContainerPosT>();\n  const [upward, setUpward] = useState(false);\n\n  useEffect(() => {\n    if (!active) return undefined;\n\n    let id: number;\n    const cb = () => {\n      const anchor = dropdownRef.current?.getBoundingClientRect();\n      const opsRect = opsRef.current?.measure();\n      if (anchor && opsRect) {\n        const fitsDown = anchor.bottom + opsRect.height\n          < (window.visualViewport?.height ?? 0);\n        const fitsUp = anchor.top - opsRect.height > 0;\n\n        const up = !fitsDown && fitsUp;\n        setUpward(up);\n\n        const pos = up ? {\n          left: anchor.left,\n          top: anchor.top - opsRect.height - 1,\n          width: anchor.width,\n        } : {\n          left: anchor.left,\n          top: anchor.bottom,\n          width: anchor.width,\n        };\n\n        setOpsPos((now) => (areEqual(now, pos) ? now : pos));\n      }\n      id = requestAnimationFrame(cb);\n    };\n    requestAnimationFrame(cb);\n\n    return () => {\n      cancelAnimationFrame(id);\n    };\n  }, [active]);\n\n  const openList = (\n    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,\n  ) => {\n    const view = window.visualViewport;\n    const rect = dropdownRef.current!.getBoundingClientRect();\n    setActive(true);\n\n    // NOTE: This first opens the dropdown off-screen, where it is measured\n    // by an effect declared above, and then positioned below, or above\n    // the original dropdown element, depending where it fits best\n    // (if we first open it downward, it would flick if we immediately\n    // move it above, at least with the current position update via local\n    // react state, and not imperatively).\n    setOpsPos({\n      left: view?.width ?? 0,\n      top: view?.height ?? 0,\n      width: rect.width,\n    });\n\n    e.stopPropagation();\n  };\n\n  let selected: React.ReactNode = <>&zwnj;</>;\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      if (iValue === value) {\n        selected = iName;\n        break;\n      }\n    }\n  }\n\n  let containerClassName = theme.container;\n  if (active) containerClassName += ` ${theme.active}`;\n\n  let opsContainerClass = theme.select ?? '';\n  if (upward) {\n    containerClassName += ` ${theme.upward}`;\n    opsContainerClass += ` ${theme.upward}`;\n  }\n\n  return (\n    <div className={containerClassName}>\n      {label === undefined ? null\n        : <div className={theme.label}>{label}</div>}\n      <div\n        className={theme.dropdown}\n        onClick={openList}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') openList(e);\n        }}\n        ref={dropdownRef}\n        role=\"listbox\"\n        tabIndex={0}\n      >\n        {selected}\n        <div className={theme.arrow} />\n      </div>\n      {\n        active ? (\n          <Options\n            containerClass={opsContainerClass}\n            containerStyle={opsPos}\n            onCancel={() => {\n              setActive(false);\n            }}\n            onChange={(newValue) => {\n              setActive(false);\n              if (onChange) onChange(newValue);\n            }}\n            optionClass={theme.option ?? ''}\n            options={options}\n            ref={opsRef}\n          />\n        ) : null\n      }\n    </div>\n  );\n};\n\nexport default themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useEffect","useRef","useState","themed","optionValueName","Options","areEqual","defaultTheme","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","BaseCustomDropdown","filter","label","onChange","options","theme","value","active","setActive","dropdownRef","opsRef","opsPos","setOpsPos","upward","setUpward","undefined","id","cb","anchor","current","getBoundingClientRect","opsRect","measure","fitsDown","bottom","height","window","visualViewport","fitsUp","top","up","pos","left","width","now","requestAnimationFrame","cancelAnimationFrame","openList","e","view","rect","stopPropagation","selected","children","option","iValue","iName","containerClassName","container","opsContainerClass","select","className","dropdown","onClick","onKeyDown","key","ref","role","tabIndex","arrow","containerClass","containerStyle","onCancel","newValue","optionClass"],"sources":["../../../../../../src/shared/components/selectors/CustomDropdown/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport { type PropsT, type ValueT, optionValueName } from '../common';\n\nimport Options, { type ContainerPosT, type RefT, areEqual } from './Options';\n\nimport defaultTheme from './theme.scss';\n\nconst BaseCustomDropdown: React.FunctionComponent<\n  PropsT<React.ReactNode, (value: ValueT) => void>\n> = ({\n  filter,\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  const [active, setActive] = useState(false);\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const opsRef = useRef<RefT>(null);\n\n  const [opsPos, setOpsPos] = useState<ContainerPosT>();\n  const [upward, setUpward] = useState(false);\n\n  useEffect(() => {\n    if (!active) return undefined;\n\n    let id: number;\n    const cb = () => {\n      const anchor = dropdownRef.current?.getBoundingClientRect();\n      const opsRect = opsRef.current?.measure();\n      if (anchor && opsRect) {\n        const fitsDown = anchor.bottom + opsRect.height\n          < (window.visualViewport?.height ?? 0);\n        const fitsUp = anchor.top - opsRect.height > 0;\n\n        const up = !fitsDown && fitsUp;\n        setUpward(up);\n\n        const pos = up ? {\n          left: anchor.left,\n          top: anchor.top - opsRect.height - 1,\n          width: anchor.width,\n        } : {\n          left: anchor.left,\n          top: anchor.bottom,\n          width: anchor.width,\n        };\n\n        setOpsPos((now) => (areEqual(now, pos) ? now : pos));\n      }\n      id = requestAnimationFrame(cb);\n    };\n    requestAnimationFrame(cb);\n\n    return () => {\n      cancelAnimationFrame(id);\n    };\n  }, [active]);\n\n  const openList = (\n    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,\n  ) => {\n    const view = window.visualViewport;\n    const rect = dropdownRef.current!.getBoundingClientRect();\n    setActive(true);\n\n    // NOTE: This first opens the dropdown off-screen, where it is measured\n    // by an effect declared above, and then positioned below, or above\n    // the original dropdown element, depending where it fits best\n    // (if we first open it downward, it would flick if we immediately\n    // move it above, at least with the current position update via local\n    // react state, and not imperatively).\n    setOpsPos({\n      left: view?.width ?? 0,\n      top: view?.height ?? 0,\n      width: rect.width,\n    });\n\n    e.stopPropagation();\n  };\n\n  let selected: React.ReactNode = <>&zwnj;</>;\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      if (iValue === value) {\n        selected = iName;\n        break;\n      }\n    }\n  }\n\n  let containerClassName = theme.container;\n  if (active) containerClassName += ` ${theme.active}`;\n\n  let opsContainerClass = theme.select ?? '';\n  if (upward) {\n    containerClassName += ` ${theme.upward}`;\n    opsContainerClass += ` ${theme.upward}`;\n  }\n\n  return (\n    <div className={containerClassName}>\n      {label === undefined ? null\n        : <div className={theme.label}>{label}</div>}\n      <div\n        className={theme.dropdown}\n        onClick={openList}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') openList(e);\n        }}\n        ref={dropdownRef}\n        role=\"listbox\"\n        tabIndex={0}\n      >\n        {selected}\n        <div className={theme.arrow} />\n      </div>\n      {\n        active ? (\n          <Options\n            containerClass={opsContainerClass}\n            containerStyle={opsPos}\n            onCancel={() => {\n              setActive(false);\n            }}\n            onChange={(newValue) => {\n              setActive(false);\n              if (onChange) onChange(newValue);\n            }}\n            optionClass={theme.option ?? ''}\n            options={options}\n            ref={opsRef}\n          />\n        ) : null\n      }\n    </div>\n  );\n};\n\nexport default themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);\n"],"mappings":"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","ignoreList":[]}

package/build/development/shared/components/selectors/NativeDropdown/index.js

@@ -1,14 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
-var _common = require("../common");
-var _jsxRuntime = require("react/jsx-runtime");
 // Implements dropdown based on the native HTML <select> element.
+
+import themed from '@dr.pogodin/react-themes';
+import { optionValueName } from "../common.js";
 const defaultTheme = {
   "context": "-dr-pogodin-react-utils___build-web-shared-components-selectors-NativeDropdown-theme___context___WbwY1Y",
   "ad": "-dr-pogodin-react-utils___build-web-shared-components-selectors-NativeDropdown-theme___ad___AP5hsY",
@@ -42,6 +35,7 @@ const defaultTheme = {
  * @param [props....]
  * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Dropdown = ({
   filter,
   label,
@@ -55,9 +49,9 @@ const Dropdown = ({
   const optionElements = [];
   for (const option of options) {
     if (!filter || filter(option)) {
-      const [iValue, iName] = (0, _common.optionValueName)(option);
+      const [iValue, iName] = optionValueName(option);
       isValidValue ||= iValue === value;
-      optionElements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+      optionElements.push(/*#__PURE__*/_jsx("option", {
         className: theme.option,
         value: iValue,
         children: iName
@@ -69,7 +63,7 @@ const Dropdown = ({
   // any valid option. In Chrome, and some other browsers, we are able to hide
   // it from the opened dropdown; in others, e.g. Safari, the best we can do is
   // to show it as disabled.
-  const hiddenOption = isValidValue ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+  const hiddenOption = isValidValue ? null : /*#__PURE__*/_jsx("option", {
     className: theme.hiddenOption,
     disabled: true,
     value: value,
@@ -77,24 +71,24 @@ const Dropdown = ({
   }, "__reactUtilsHiddenOption");
   let selectClassName = theme.select;
   if (!isValidValue) selectClassName += ` ${theme.invalid}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: theme.container,
-    children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [label === undefined ? null : /*#__PURE__*/_jsx("div", {
       className: theme.label,
       children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: theme.dropdown,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      children: [/*#__PURE__*/_jsxs("select", {
         className: selectClassName,
         "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
         onChange: onChange,
         value: value,
         children: [hiddenOption, optionElements]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: theme.arrow
       })]
     })]
   });
 };
-var _default = exports.default = (0, _reactThemes.default)(Dropdown, 'Dropdown', defaultTheme);
+export default themed(Dropdown, 'Dropdown', defaultTheme);
 //# sourceMappingURL=index.js.map