@dr.pogodin/react-utils 1.21.1 → 1.21.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["BaseModal","children","onCancel","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","classList","add","appendChild","remove","removeChild","focusLast","useMemo","elems","current","querySelectorAll","i","length","focus","activeElement","ReactDom","createPortal","overlay","e","key","node","container","event","stopPropagation","ThemedModal","themed","baseTheme","propTypes","PT","func","themeType","isRequired","defaultProps","noop"],"sources":["../../../../../src/shared/components/Modal/index.jsx"],"sourcesContent":["/* global document */\n\nimport { noop } from 'lodash';\n\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport './styles.scss';\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 */\nfunction BaseModal({\n  children,\n  onCancel,\n  theme,\n}) {\n  const containerRef = useRef();\n  const overlayRef = useRef();\n  const [portal, setPortal] = useState();\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('*');\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()}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape') 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  'Modal',\n  [\n    'container',\n    'overlay',\n  ],\n  baseTheme,\n)(BaseModal);\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":["BaseModal","children","onCancel","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","classList","add","appendChild","remove","removeChild","focusLast","useMemo","elems","current","querySelectorAll","i","length","focus","activeElement","ReactDom","createPortal","overlay","e","key","node","container","event","stopPropagation","ThemedModal","themed","baseTheme","propTypes","PT","func","themeType","isRequired","defaultProps","noop"],"sources":["../../../../../src/shared/components/Modal/index.jsx"],"sourcesContent":["/* global document */\n\nimport { noop } from 'lodash';\n\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport './styles.scss';\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 */\nfunction BaseModal({\n  children,\n  onCancel,\n  theme,\n}) {\n  const containerRef = useRef();\n  const overlayRef = useRef();\n  const [portal, setPortal] = useState();\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('*');\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()}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape') 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  'Modal',\n  [\n    'container',\n    'overlay',\n  ],\n  baseTheme,\n)(BaseModal);\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/NavLink.js

@@ -1,21 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavLink;
-
 var _reactRouterDom = require("react-router-dom");
-
 var _GenericLink = _interopRequireDefault(require("./GenericLink"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function NavLink(props) {
   /* eslint-disable react/jsx-props-no-spreading */
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericLink.default, { ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericLink.default, {
+    ...props,
     routerLinkType: _reactRouterDom.NavLink
   });
   /* eslint-enable react/jsx-props-no-spreading */

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

@@ -1 +1 @@
-{"version":3,"file":"NavLink.js","names":["NavLink","props","RrNavLink"],"sources":["../../../../src/shared/components/NavLink.jsx"],"sourcesContent":["import { NavLink as RrNavLink } from 'react-router-dom';\n\nimport GenericLink from './GenericLink';\n\nexport default function NavLink(props) {\n  /* eslint-disable react/jsx-props-no-spreading */\n  return <GenericLink {...props} routerLinkType={RrNavLink} />;\n  /* eslint-enable react/jsx-props-no-spreading */\n}\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;AAEe,SAASA,OAAT,CAAiBC,KAAjB,EAAwB;EACrC;EACA,oBAAO,qBAAC,oBAAD,OAAiBA,KAAjB;IAAwB,cAAc,EAAEC;EAAxC,EAAP;EACA;AACD"}
+{"version":3,"file":"NavLink.js","names":["NavLink","props","RrNavLink"],"sources":["../../../../src/shared/components/NavLink.jsx"],"sourcesContent":["import { NavLink as RrNavLink } from 'react-router-dom';\n\nimport GenericLink from './GenericLink';\n\nexport default function NavLink(props) {\n  /* eslint-disable react/jsx-props-no-spreading */\n  return <GenericLink {...props} routerLinkType={RrNavLink} />;\n  /* eslint-enable react/jsx-props-no-spreading */\n}\n"],"mappings":";;;;;;;AAAA;AAEA;AAAwC;AAEzB,SAASA,OAAO,CAACC,KAAK,EAAE;EACrC;EACA,oBAAO,qBAAC,oBAAW;IAAA,GAAKA,KAAK;IAAE,cAAc,EAAEC;EAAU,EAAG;EAC5D;AACF"}

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _utils = require("../../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 const baseTheme = {
   "context": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___context___m4mL-M",
   "ad": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___ad___m3-mdC",
@@ -36,7 +31,6 @@ const baseTheme = {
  * @param {...any} [props....]
  * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  */
-
 function PageLayout({
   children,
   leftSidePanelContent,
@@ -57,7 +51,6 @@ function PageLayout({
     })]
   });
 }
-
 const ThemedPageLayout = (0, _utils.themed)('PageLayout', ['container', 'leftSidePanel', 'mainPanel', 'rightSidePanel', 'sidePanel'], baseTheme)(PageLayout);
 PageLayout.propTypes = {
   children: _propTypes.default.node,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PageLayout","children","leftSidePanelContent","rightSidePanelContent","theme","container","sidePanel","leftSidePanel","join","mainPanel","rightSidePanel","ThemedPageLayout","themed","baseTheme","propTypes","PT","node","themeType","isRequired","defaultProps"],"sources":["../../../../../src/shared/components/PageLayout/index.jsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport { themed } from 'utils';\n\nimport baseTheme from './base-theme.scss';\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 */\nfunction PageLayout({\n  children,\n  leftSidePanelContent,\n  rightSidePanelContent,\n  theme,\n}) {\n  return (\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}\n\nconst ThemedPageLayout = themed('PageLayout', [\n  'container',\n  'leftSidePanel',\n  'mainPanel',\n  'rightSidePanel',\n  'sidePanel',\n], baseTheme)(PageLayout);\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;;AAEA;;;;;;;;;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASA,UAAT,CAAoB;EAClBC,QADkB;EAElBC,oBAFkB;EAGlBC,qBAHkB;EAIlBC;AAJkB,CAApB,EAKG;EACD,oBACE;IAAK,SAAS,EAAEA,KAAK,CAACC,SAAtB;IAAA,wBACE;MAAK,SAAS,EAAE,CAACD,KAAK,CAACE,SAAP,EAAkBF,KAAK,CAACG,aAAxB,EAAuCC,IAAvC,CAA4C,GAA5C,CAAhB;MAAA,UACGN;IADH,EADF,eAIE;MAAK,SAAS,EAAEE,KAAK,CAACK,SAAtB;MAAA,UACGR;IADH,EAJF,eAOE;MAAK,SAAS,EAAE,CAACG,KAAK,CAACE,SAAP,EAAkBF,KAAK,CAACM,cAAxB,EAAwCF,IAAxC,CAA6C,GAA7C,CAAhB;MAAA,UACGL;IADH,EAPF;EAAA,EADF;AAaD;;AAED,MAAMQ,gBAAgB,GAAG,IAAAC,aAAA,EAAO,YAAP,EAAqB,CAC5C,WAD4C,EAE5C,eAF4C,EAG5C,WAH4C,EAI5C,gBAJ4C,EAK5C,WAL4C,CAArB,EAMtBC,SANsB,EAMXb,UANW,CAAzB;AAQAA,UAAU,CAACc,SAAX,GAAuB;EACrBb,QAAQ,EAAEc,kBAAA,CAAGC,IADQ;EAErBd,oBAAoB,EAAEa,kBAAA,CAAGC,IAFJ;EAGrBb,qBAAqB,EAAEY,kBAAA,CAAGC,IAHL;EAIrBZ,KAAK,EAAEO,gBAAgB,CAACM,SAAjB,CAA2BC;AAJb,CAAvB;AAOAlB,UAAU,CAACmB,YAAX,GAA0B;EACxBlB,QAAQ,EAAE,IADc;EAExBC,oBAAoB,EAAE,IAFE;EAGxBC,qBAAqB,EAAE;AAHC,CAA1B;eAMeQ,gB"}
+{"version":3,"file":"index.js","names":["PageLayout","children","leftSidePanelContent","rightSidePanelContent","theme","container","sidePanel","leftSidePanel","join","mainPanel","rightSidePanel","ThemedPageLayout","themed","baseTheme","propTypes","PT","node","themeType","isRequired","defaultProps"],"sources":["../../../../../src/shared/components/PageLayout/index.jsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport { themed } from 'utils';\n\nimport baseTheme from './base-theme.scss';\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 */\nfunction PageLayout({\n  children,\n  leftSidePanelContent,\n  rightSidePanelContent,\n  theme,\n}) {\n  return (\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}\n\nconst ThemedPageLayout = themed('PageLayout', [\n  'container',\n  'leftSidePanel',\n  'mainPanel',\n  'rightSidePanel',\n  'sidePanel',\n], baseTheme)(PageLayout);\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;AAEA;AAA+B;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAU,CAAC;EAClBC,QAAQ;EACRC,oBAAoB;EACpBC,qBAAqB;EACrBC;AACF,CAAC,EAAE;EACD,oBACE;IAAK,SAAS,EAAEA,KAAK,CAACC,SAAU;IAAA,wBAC9B;MAAK,SAAS,EAAE,CAACD,KAAK,CAACE,SAAS,EAAEF,KAAK,CAACG,aAAa,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE;MAAA,UAC9DN;IAAoB,EACjB,eACN;MAAK,SAAS,EAAEE,KAAK,CAACK,SAAU;MAAA,UAC7BR;IAAQ,EACL,eACN;MAAK,SAAS,EAAE,CAACG,KAAK,CAACE,SAAS,EAAEF,KAAK,CAACM,cAAc,CAAC,CAACF,IAAI,CAAC,GAAG,CAAE;MAAA,UAC/DL;IAAqB,EAClB;EAAA,EACF;AAEV;AAEA,MAAMQ,gBAAgB,GAAG,IAAAC,aAAM,EAAC,YAAY,EAAE,CAC5C,WAAW,EACX,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,WAAW,CACZ,EAAEC,SAAS,CAAC,CAACb,UAAU,CAAC;AAEzBA,UAAU,CAACc,SAAS,GAAG;EACrBb,QAAQ,EAAEc,kBAAE,CAACC,IAAI;EACjBd,oBAAoB,EAAEa,kBAAE,CAACC,IAAI;EAC7Bb,qBAAqB,EAAEY,kBAAE,CAACC,IAAI;EAC9BZ,KAAK,EAAEO,gBAAgB,CAACM,SAAS,CAACC;AACpC,CAAC;AAEDlB,UAAU,CAACmB,YAAY,GAAG;EACxBlB,QAAQ,EAAE,IAAI;EACdC,oBAAoB,EAAE,IAAI;EAC1BC,qBAAqB,EAAE;AACzB,CAAC;AAAC,eAEaQ,gBAAgB;AAAA"}

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

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ScalableRect;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 /**
  * The `<ScalableRect>` component implements container keeping given aspect
  * ratio, while its width is altered.
@@ -28,6 +24,7 @@ function ScalableRect({
 }) {
   const aux = ratio.split(':');
   const paddingBottom = `${100 * aux[1] / aux[0]}%`;
+
   /* NOTE: In case the following code looks strange to you, mind that we want to
    * allow the user to set custom styles on this component. If user passes in a
    * "className" prop (possibly "styleName", but that one is converted to
@@ -35,7 +32,6 @@ function ScalableRect({
    * should not interfere with the sizing behavior, thus we need an extra <div>
    * level in this component; however, if user does not need a custom styling,
    * we can save one level of HTML code, so we do it. */
-
   const rect = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
       paddingBottom
@@ -51,7 +47,6 @@ function ScalableRect({
     children: rect
   }) : rect;
 }
-
 ScalableRect.defaultProps = {
   children: null,
   className: null,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ScalableRect","children","className","ratio","aux","split","paddingBottom","rect","defaultProps","propTypes","PT","node","string"],"sources":["../../../../../src/shared/components/ScalableRect/index.jsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport './style.scss';\n\n/**\n * The `<ScalableRect>` component implements container keeping given aspect\n * ratio, while its width is altered.\n *\n * **Children:** Component children are rendered as the component's content.\n * @param {object} props\n * @param {string} [props.className] CSS class for component container.\n * @param {string} [props.ratio=1:1] Ratio of the rendered rectangle sides,\n * in `W:H` form.\n */\nexport default function ScalableRect({ children, className, ratio }) {\n  const aux = ratio.split(':');\n  const paddingBottom = `${(100 * aux[1]) / aux[0]}%`;\n\n  /* NOTE: In case the following code looks strange to you, mind that we want to\n   * allow the user to set custom styles on this component. If user passes in a\n   * \"className\" prop (possibly \"styleName\", but that one is converted to\n   * \"className\" by Babel just before being passed into this component), it\n   * should not interfere with the sizing behavior, thus we need an extra <div>\n   * level in this component; however, if user does not need a custom styling,\n   * we can save one level of HTML code, so we do it. */\n  const rect = (\n    <div\n      style={{ paddingBottom }}\n      styleName=\"container\"\n    >\n      <div styleName=\"wrapper\">\n        {children}\n      </div>\n    </div>\n  );\n  return className ? (\n    <div className={className}>\n      {rect}\n    </div>\n  ) : rect;\n}\n\nScalableRect.defaultProps = {\n  children: null,\n  className: null,\n  ratio: '1:1',\n};\n\nScalableRect.propTypes = {\n  children: PT.node,\n  className: PT.string,\n  ratio: PT.string,\n};\n"],"mappings":";;;;;;;;;AAAA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,YAAT,CAAsB;EAAEC,QAAF;EAAYC,SAAZ;EAAuBC;AAAvB,CAAtB,EAAsD;EACnE,MAAMC,GAAG,GAAGD,KAAK,CAACE,KAAN,CAAY,GAAZ,CAAZ;EACA,MAAMC,aAAa,GAAI,GAAG,MAAMF,GAAG,CAAC,CAAD,CAAV,GAAiBA,GAAG,CAAC,CAAD,CAAI,GAAjD;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;;EACE,MAAMG,IAAI,gBACR;IACE,KAAK,EAAE;MAAED;IAAF,CADT;IAEE,SAAS,EAAC,yFAFZ;IAAA,uBAIE;MAAK,SAAS,EAAC,uFAAf;MAAA,UACGL;IADH;EAJF,EADF;EAUA,OAAOC,SAAS,gBACd;IAAK,SAAS,EAAEA,SAAhB;IAAA,UACGK;EADH,EADc,GAIZA,IAJJ;AAKD;;AAEDP,YAAY,CAACQ,YAAb,GAA4B;EAC1BP,QAAQ,EAAE,IADgB;EAE1BC,SAAS,EAAE,IAFe;EAG1BC,KAAK,EAAE;AAHmB,CAA5B;AAMAH,YAAY,CAACS,SAAb,GAAyB;EACvBR,QAAQ,EAAES,kBAAA,CAAGC,IADU;EAEvBT,SAAS,EAAEQ,kBAAA,CAAGE,MAFS;EAGvBT,KAAK,EAAEO,kBAAA,CAAGE;AAHa,CAAzB"}
+{"version":3,"file":"index.js","names":["ScalableRect","children","className","ratio","aux","split","paddingBottom","rect","defaultProps","propTypes","PT","node","string"],"sources":["../../../../../src/shared/components/ScalableRect/index.jsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport './style.scss';\n\n/**\n * The `<ScalableRect>` component implements container keeping given aspect\n * ratio, while its width is altered.\n *\n * **Children:** Component children are rendered as the component's content.\n * @param {object} props\n * @param {string} [props.className] CSS class for component container.\n * @param {string} [props.ratio=1:1] Ratio of the rendered rectangle sides,\n * in `W:H` form.\n */\nexport default function ScalableRect({ children, className, ratio }) {\n  const aux = ratio.split(':');\n  const paddingBottom = `${(100 * aux[1]) / aux[0]}%`;\n\n  /* NOTE: In case the following code looks strange to you, mind that we want to\n   * allow the user to set custom styles on this component. If user passes in a\n   * \"className\" prop (possibly \"styleName\", but that one is converted to\n   * \"className\" by Babel just before being passed into this component), it\n   * should not interfere with the sizing behavior, thus we need an extra <div>\n   * level in this component; however, if user does not need a custom styling,\n   * we can save one level of HTML code, so we do it. */\n  const rect = (\n    <div\n      style={{ paddingBottom }}\n      styleName=\"container\"\n    >\n      <div styleName=\"wrapper\">\n        {children}\n      </div>\n    </div>\n  );\n  return className ? (\n    <div className={className}>\n      {rect}\n    </div>\n  ) : rect;\n}\n\nScalableRect.defaultProps = {\n  children: null,\n  className: null,\n  ratio: '1:1',\n};\n\nScalableRect.propTypes = {\n  children: PT.node,\n  className: PT.string,\n  ratio: PT.string,\n};\n"],"mappings":";;;;;;;AAAA;AAA4B;AAI5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,YAAY,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEC;AAAM,CAAC,EAAE;EACnE,MAAMC,GAAG,GAAGD,KAAK,CAACE,KAAK,CAAC,GAAG,CAAC;EAC5B,MAAMC,aAAa,GAAI,GAAG,GAAG,GAAGF,GAAG,CAAC,CAAC,CAAC,GAAIA,GAAG,CAAC,CAAC,CAAE,GAAE;;EAEnD;AACF;AACA;AACA;AACA;AACA;AACA;EACE,MAAMG,IAAI,gBACR;IACE,KAAK,EAAE;MAAED;IAAc,CAAE;IACzB,SAAS,EAAC,yFAAW;IAAA,uBAErB;MAAK,SAAS,EAAC,uFAAS;MAAA,UACrBL;IAAQ;EACL,EAET;EACD,OAAOC,SAAS,gBACd;IAAK,SAAS,EAAEA,SAAU;IAAA,UACvBK;EAAI,EACD,GACJA,IAAI;AACV;AAEAP,YAAY,CAACQ,YAAY,GAAG;EAC1BP,QAAQ,EAAE,IAAI;EACdC,SAAS,EAAE,IAAI;EACfC,KAAK,EAAE;AACT,CAAC;AAEDH,YAAY,CAACS,SAAS,GAAG;EACvBR,QAAQ,EAAES,kBAAE,CAACC,IAAI;EACjBT,SAAS,EAAEQ,kBAAE,CAACE,MAAM;EACpBT,KAAK,EAAEO,kBAAE,CAACE;AACZ,CAAC"}

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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-Throbber-theme___context___uIObt7",
   "ad": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___ad___XIxe9o",
@@ -30,7 +25,6 @@ const defaultTheme = {
  * @param {...any} [props....]
  * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  */
-
 function Throbber({
   theme
 }) {
@@ -45,7 +39,6 @@ function Throbber({
     })]
   });
 }
-
 Throbber.defaultProps = {
   theme: {}
 };
@@ -55,8 +48,6 @@ Throbber.propTypes = {
     circle: _propTypes.default.string
   })
 };
-
 var _default = (0, _reactThemes.default)('Throbber', ['circle', 'container'], defaultTheme)(Throbber);
-
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Throbber","theme","container","circle","defaultProps","propTypes","PT","shape","string","themed","defaultTheme"],"sources":["../../../../../src/shared/components/Throbber/index.jsx"],"sourcesContent":["import PT from 'prop-types';\nimport themed from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\n/**\n * Throbber is an \"action in progress\" indicator, which renders\n * three bouncing circles as a simple pending activity indicator,\n * and can be further themed to a certain degree.\n * @param {object} [props] Component properties.\n * @param {ThrobberTheme} [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 */\nfunction Throbber({\n  theme,\n}) {\n  return (\n    <span className={theme.container} styleName=\"container\">\n      <span className={theme.circle} styleName=\"circle\" />\n      <span className={theme.circle} styleName=\"circle\" />\n      <span className={theme.circle} styleName=\"circle\" />\n    </span>\n  );\n}\n\nThrobber.defaultProps = {\n  theme: {},\n};\n\nThrobber.propTypes = {\n  theme: PT.shape({\n    container: PT.string,\n    circle: PT.string,\n  }),\n};\n\nexport default themed('Throbber', [\n  'circle',\n  'container',\n], defaultTheme)(Throbber);\n"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASA,QAAT,CAAkB;EAChBC;AADgB,CAAlB,EAEG;EACD,oBACE;IAAM,SAAS,GAAEA,KAAK,CAACC,SAAR,GAAED,KAAK,CAACC,SAAR,oGAAf;IAAA,wBACE;MAAM,SAAS,GAAED,KAAK,CAACE,MAAR,GAAEF,KAAK,CAACE,MAAR;IAAf,EADF,eAEE;MAAM,SAAS,GAAEF,KAAK,CAACE,MAAR,GAAEF,KAAK,CAACE,MAAR;IAAf,EAFF,eAGE;MAAM,SAAS,GAAEF,KAAK,CAACE,MAAR,GAAEF,KAAK,CAACE,MAAR;IAAf,EAHF;EAAA,EADF;AAOD;;AAEDH,QAAQ,CAACI,YAAT,GAAwB;EACtBH,KAAK,EAAE;AADe,CAAxB;AAIAD,QAAQ,CAACK,SAAT,GAAqB;EACnBJ,KAAK,EAAEK,kBAAA,CAAGC,KAAH,CAAS;IACdL,SAAS,EAAEI,kBAAA,CAAGE,MADA;IAEdL,MAAM,EAAEG,kBAAA,CAAGE;EAFG,CAAT;AADY,CAArB;;eAOe,IAAAC,oBAAA,EAAO,UAAP,EAAmB,CAChC,QADgC,EAEhC,WAFgC,CAAnB,EAGZC,YAHY,EAGEV,QAHF,C"}
+{"version":3,"file":"index.js","names":["Throbber","theme","container","circle","defaultProps","propTypes","PT","shape","string","themed","defaultTheme"],"sources":["../../../../../src/shared/components/Throbber/index.jsx"],"sourcesContent":["import PT from 'prop-types';\nimport themed from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\n/**\n * Throbber is an \"action in progress\" indicator, which renders\n * three bouncing circles as a simple pending activity indicator,\n * and can be further themed to a certain degree.\n * @param {object} [props] Component properties.\n * @param {ThrobberTheme} [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 */\nfunction Throbber({\n  theme,\n}) {\n  return (\n    <span className={theme.container} styleName=\"container\">\n      <span className={theme.circle} styleName=\"circle\" />\n      <span className={theme.circle} styleName=\"circle\" />\n      <span className={theme.circle} styleName=\"circle\" />\n    </span>\n  );\n}\n\nThrobber.defaultProps = {\n  theme: {},\n};\n\nThrobber.propTypes = {\n  theme: PT.shape({\n    container: PT.string,\n    circle: PT.string,\n  }),\n};\n\nexport default themed('Throbber', [\n  'circle',\n  'container',\n], defaultTheme)(Throbber);\n"],"mappings":";;;;;;;AAAA;AACA;AAA8C;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,QAAQ,CAAC;EAChBC;AACF,CAAC,EAAE;EACD,oBACE;IAAM,SAAS,GAAEA,KAAK,CAACC,SAAS,GAAfD,KAAK,CAACC,SAAS,oGAAC;IAAA,wBAC/B;MAAM,SAAS,GAAED,KAAK,CAACE,MAAM,GAAZF,KAAK,CAACE,MAAM;IAAC,EAAsB,eACpD;MAAM,SAAS,GAAEF,KAAK,CAACE,MAAM,GAAZF,KAAK,CAACE,MAAM;IAAC,EAAsB,eACpD;MAAM,SAAS,GAAEF,KAAK,CAACE,MAAM,GAAZF,KAAK,CAACE,MAAM;IAAC,EAAsB;EAAA,EAC/C;AAEX;AAEAH,QAAQ,CAACI,YAAY,GAAG;EACtBH,KAAK,EAAE,CAAC;AACV,CAAC;AAEDD,QAAQ,CAACK,SAAS,GAAG;EACnBJ,KAAK,EAAEK,kBAAE,CAACC,KAAK,CAAC;IACdL,SAAS,EAAEI,kBAAE,CAACE,MAAM;IACpBL,MAAM,EAAEG,kBAAE,CAACE;EACb,CAAC;AACH,CAAC;AAAC,eAEa,IAAAC,oBAAM,EAAC,UAAU,EAAE,CAChC,QAAQ,EACR,WAAW,CACZ,EAAEC,YAAY,CAAC,CAACV,QAAQ,CAAC;AAAA"}

package/build/development/shared/components/WithTooltip/Tooltip.js

@@ -1,24 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PLACEMENTS = void 0;
-
 var _react = require("react");
-
 var _reactDom = require("react-dom");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /**
  * The actual tooltip component. It is rendered outside the regular document
  * hierarchy, and with sub-components managed without React to achieve the best
  * performance during animation.
  */
-
 /* global document, window */
 
 /* Valid placements of the rendered tooltip. They will be overriden when
@@ -32,6 +26,7 @@ const PLACEMENTS = {
 exports.PLACEMENTS = PLACEMENTS;
 const ARROW_STYLE_DOWN = ['border-bottom-color:transparent', 'border-left-color:transparent', 'border-right-color:transparent'].join(';');
 const ARROW_STYLE_UP = ['border-top-color:transparent', 'border-left-color:transparent', 'border-right-color:transparent'].join(';');
+
 /**
  * Creates tooltip components.
  * @ignore
@@ -40,7 +35,6 @@ const ARROW_STYLE_UP = ['border-top-color:transparent', 'border-left-color:trans
  * @return {object} Object with DOM references to the container components:
  *  container, arrow, content.
  */
-
 function createTooltipComponents(theme) {
   const arrow = document.createElement('div');
   if (theme.arrow) arrow.setAttribute('class', theme.arrow);
@@ -57,6 +51,7 @@ function createTooltipComponents(theme) {
     content
   };
 }
+
 /**
  * Generates bounding client rectangles for tooltip components.
  * @ignore
@@ -66,21 +61,18 @@ function createTooltipComponents(theme) {
  * @return {{ arrow: object, container}} Object holding tooltip rectangles in
  *  two fields.
  */
-
-
 function calcTooltipRects(tooltip) {
   return {
     arrow: tooltip.arrow.getBoundingClientRect(),
     container: tooltip.container.getBoundingClientRect()
   };
 }
+
 /**
  * Calculates the document viewport size.
  * @ignore
  * @return {{x, y, width, height}}
  */
-
-
 function calcViewportRect() {
   const {
     pageXOffset,
@@ -99,6 +91,7 @@ function calcViewportRect() {
     bottom: pageYOffset + clientHeight
   };
 }
+
 /**
  * Calculates tooltip and arrow positions for the placement just above
  * the cursor.
@@ -115,8 +108,6 @@ function calcViewportRect() {
  *  - {number} containerY
  *  - {string} baseArrowStyle
  */
-
-
 function calcPositionAboveXY(x, y, tooltipRects) {
   const {
     arrow,
@@ -133,6 +124,7 @@ function calcPositionAboveXY(x, y, tooltipRects) {
     baseArrowStyle: ARROW_STYLE_DOWN
   };
 }
+
 /*
 const HIT = {
   NONE: false,
@@ -150,7 +142,6 @@ const HIT = {
  * @param {object} viewportRect
  * @return {HIT}
  */
-
 /*
 function checkViewportFit(pos, tooltipRects, viewportRect) {
   const { containerX, containerY } = pos;
@@ -169,7 +160,6 @@ function checkViewportFit(pos, tooltipRects, viewportRect) {
  * @param {number} pageXOffset
  * @param {number} pageXWidth
  */
-
 /*
 function xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {
   if (pos.containerX < pageXOffset + 6) {
@@ -200,56 +190,47 @@ function xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {
  * @param {object} tooltip.arrow DOM reference to the tooltip arrow.
  * @param {object} tooltip.container DOM reference to the tooltip container.
  */
-
-
 function setComponentPositions(pageX, pageY, placement, element, tooltip) {
   const tooltipRects = calcTooltipRects(tooltip);
   const viewportRect = calcViewportRect();
-  /* Default container coords: tooltip at the top. */
 
+  /* Default container coords: tooltip at the top. */
   const pos = calcPositionAboveXY(pageX, pageY, tooltipRects);
-
   if (pos.containerX < viewportRect.left + 6) {
     pos.containerX = viewportRect.left + 6;
     pos.arrowX = Math.max(6, pageX - pos.containerX - tooltipRects.arrow.width / 2);
   } else {
     const maxX = viewportRect.right - 6 - tooltipRects.container.width;
-
     if (pos.containerX > maxX) {
       pos.containerX = maxX;
       pos.arrowX = Math.min(tooltipRects.container.width - 6, pageX - pos.containerX - tooltipRects.arrow.width / 2);
     }
   }
-  /* If tooltip has not enough space on top - make it bottom tooltip. */
-
 
+  /* If tooltip has not enough space on top - make it bottom tooltip. */
   if (pos.containerY < viewportRect.top + 6) {
     pos.containerY += tooltipRects.container.height + 2 * tooltipRects.arrow.height;
     pos.arrowY -= tooltipRects.container.height + tooltipRects.arrow.height;
     pos.baseArrowStyle = ARROW_STYLE_UP;
   }
-
   const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;
   tooltip.container.setAttribute('style', containerStyle);
   const arrowStyle = `${pos.baseArrowStyle};left:${pos.arrowX}px;top:${pos.arrowY}px`;
   tooltip.arrow.setAttribute('style', arrowStyle);
 }
-/* The Tooltip component itself. */
-
 
+/* The Tooltip component itself. */
 const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   theme
 }, ref) => {
   const [components, setComponents] = (0, _react.useState)(null);
-
   const pointTo = (pageX, pageY, placement, element) => components && setComponentPositions(pageX, pageY, placement, element, components);
-
   (0, _react.useImperativeHandle)(ref, () => ({
     pointTo
   }));
-  /* Inits and destroys tooltip components. */
 
+  /* Inits and destroys tooltip components. */
   (0, _react.useEffect)(() => {
     const x = createTooltipComponents(theme);
     setComponents(x);

package/build/development/shared/components/WithTooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["PLACEMENTS","ABOVE_CURSOR","ABOVE_ELEMENT","BELOW_CURSOR","BELOW_ELEMENT","ARROW_STYLE_DOWN","join","ARROW_STYLE_UP","createTooltipComponents","theme","arrow","document","createElement","setAttribute","content","container","appendChild","body","calcTooltipRects","tooltip","getBoundingClientRect","calcViewportRect","pageXOffset","pageYOffset","window","documentElement","clientHeight","clientWidth","left","right","top","bottom","calcPositionAboveXY","x","y","tooltipRects","arrowX","width","arrowY","height","containerX","containerY","baseArrowStyle","setComponentPositions","pageX","pageY","placement","element","viewportRect","pos","Math","max","maxX","min","containerStyle","arrowStyle","Tooltip","forwardRef","children","ref","components","setComponents","useState","pointTo","useImperativeHandle","useEffect","removeChild","createPortal","propTypes","PT","node","shape","isRequired","defaultProps"],"sources":["../../../../../src/shared/components/WithTooltip/Tooltip.jsx"],"sourcesContent":["/**\n * The actual tooltip component. It is rendered outside the regular document\n * hierarchy, and with sub-components managed without React to achieve the best\n * performance during animation.\n */\n/* global document, window */\n\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport PT from 'prop-types';\n\n/* Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport. */\nexport const PLACEMENTS = {\n  ABOVE_CURSOR: 'ABOVE_CURSOR',\n  ABOVE_ELEMENT: 'ABOVE_ELEMENT',\n  BELOW_CURSOR: 'BELOW_CURSOR',\n  BELOW_ELEMENT: 'BELOW_ELEMENT',\n};\n\nconst ARROW_STYLE_DOWN = [\n  'border-bottom-color:transparent',\n  'border-left-color:transparent',\n  'border-right-color:transparent',\n].join(';');\n\nconst ARROW_STYLE_UP = [\n  'border-top-color:transparent',\n  'border-left-color:transparent',\n  'border-right-color:transparent',\n].join(';');\n\n/**\n * Creates tooltip components.\n * @ignore\n * @param {object} theme Themes to use for tooltip container, arrow,\n *  and content.\n * @return {object} Object with DOM references to the container components:\n *  container, arrow, content.\n */\nfunction createTooltipComponents(theme) {\n  const arrow = document.createElement('div');\n  if (theme.arrow) arrow.setAttribute('class', theme.arrow);\n\n  const content = document.createElement('div');\n  if (theme.content) content.setAttribute('class', theme.content);\n\n  const container = document.createElement('div');\n  if (theme.container) container.setAttribute('class', theme.container);\n\n  container.appendChild(arrow);\n  container.appendChild(content);\n  document.body.appendChild(container);\n\n  return { container, arrow, content };\n}\n\n/**\n * Generates bounding client rectangles for tooltip components.\n * @ignore\n * @param {object} tooltip DOM references to the tooltip components.\n * @param {object} tooltip.arrow\n * @param {object} tooltip.container\n * @return {{ arrow: object, container}} Object holding tooltip rectangles in\n *  two fields.\n */\nfunction calcTooltipRects(tooltip) {\n  return {\n    arrow: tooltip.arrow.getBoundingClientRect(),\n    container: tooltip.container.getBoundingClientRect(),\n  };\n}\n\n/**\n * Calculates the document viewport size.\n * @ignore\n * @return {{x, y, width, height}}\n */\nfunction calcViewportRect() {\n  const { pageXOffset, pageYOffset } = window;\n  const { documentElement: { clientHeight, clientWidth } } = document;\n  return {\n    left: pageXOffset,\n    right: pageXOffset + clientWidth,\n    top: pageYOffset,\n    bottom: pageYOffset + clientHeight,\n  };\n}\n\n/**\n * Calculates tooltip and arrow positions for the placement just above\n * the cursor.\n * @ignore\n * @param {number} x Cursor page-x position.\n * @param {number} y Cursor page-y position.\n * @param {object} tooltipRects Bounding client rectangles of tooltip parts.\n * @param {object} tooltipRects.arrow\n * @param {object} tooltipRects.container\n * @return {object} Contains the following fields:\n *  - {number} arrowX\n *  - {number} arrowY\n *  - {number} containerX\n *  - {number} containerY\n *  - {string} baseArrowStyle\n */\nfunction calcPositionAboveXY(x, y, tooltipRects) {\n  const { arrow, container } = tooltipRects;\n  return {\n    arrowX: 0.5 * (container.width - arrow.width),\n    arrowY: container.height,\n    containerX: x - container.width / 2,\n    containerY: y - container.height - arrow.height / 1.5,\n\n    // TODO: Instead of already setting the base style here, we should\n    // introduce a set of constants for arrow directions, which will help\n    // to do checks dependant on the arrow direction.\n    baseArrowStyle: ARROW_STYLE_DOWN,\n  };\n}\n\n/*\nconst HIT = {\n  NONE: false,\n  LEFT: 'LEFT',\n  RIGHT: 'RIGHT',\n  TOP: 'TOP',\n  BOTTOM: 'BOTTOM',\n};\n*/\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n/*\nfunction checkViewportFit(pos, tooltipRects, viewportRect) {\n  const { containerX, containerY } = pos;\n  if (containerX < viewportRect.left + 6) return HIT.LEFT;\n  if (containerX > viewportRect.right - 6) return HIT.RIGHT;\n  return HIT.NONE;\n}\n*/\n\n/**\n * Shifts tooltip horizontally to fit into the viewport, while keeping\n * the arrow pointed to the XY point.\n * @param {number} x\n * @param {number} y\n * @param {object} pos\n * @param {number} pageXOffset\n * @param {number} pageXWidth\n */\n/*\nfunction xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {\n  if (pos.containerX < pageXOffset + 6) {\n    pos.containerX = pageXOffset + 6;\n    pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);\n  } else {\n    const maxX = pageXOffset + docRect.width - containerRect.width - 6;\n    if (containerX > maxX) {\n      containerX = maxX;\n      arrowX = Math.min(\n        containerRect.width - 6,\n        pageX - containerX - arrowRect.width / 2,\n      );\n    }\n  }\n}\n*/\n\n/**\n * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param {number} pageX\n * @param {number} pageY\n * @param {PLACEMENTS} placement\n * @param {object} element DOM reference to the element wrapped by the tooltip.\n * @param {object} tooltip\n * @param {object} tooltip.arrow DOM reference to the tooltip arrow.\n * @param {object} tooltip.container DOM reference to the tooltip container.\n */\nfunction setComponentPositions(\n  pageX,\n  pageY,\n  placement,\n  element,\n  tooltip,\n) {\n  const tooltipRects = calcTooltipRects(tooltip);\n  const viewportRect = calcViewportRect();\n\n  /* Default container coords: tooltip at the top. */\n  const pos = calcPositionAboveXY(pageX, pageY, tooltipRects);\n\n  if (pos.containerX < viewportRect.left + 6) {\n    pos.containerX = viewportRect.left + 6;\n    pos.arrowX = Math.max(\n      6,\n      pageX - pos.containerX - tooltipRects.arrow.width / 2,\n    );\n  } else {\n    const maxX = viewportRect.right - 6 - tooltipRects.container.width;\n    if (pos.containerX > maxX) {\n      pos.containerX = maxX;\n      pos.arrowX = Math.min(\n        tooltipRects.container.width - 6,\n        pageX - pos.containerX - tooltipRects.arrow.width / 2,\n      );\n    }\n  }\n\n  /* If tooltip has not enough space on top - make it bottom tooltip. */\n  if (pos.containerY < viewportRect.top + 6) {\n    pos.containerY += tooltipRects.container.height\n      + 2 * tooltipRects.arrow.height;\n    pos.arrowY -= tooltipRects.container.height\n      + tooltipRects.arrow.height;\n    pos.baseArrowStyle = ARROW_STYLE_UP;\n  }\n\n  const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;\n  tooltip.container.setAttribute('style', containerStyle);\n\n  const arrowStyle = `${pos.baseArrowStyle};left:${pos.arrowX}px;top:${pos.arrowY}px`;\n  tooltip.arrow.setAttribute('style', arrowStyle);\n}\n\n/* The Tooltip component itself. */\nconst Tooltip = forwardRef(({ children, theme }, ref) => {\n  const [components, setComponents] = useState(null);\n\n  const pointTo = (pageX, pageY, placement, element) => components\n    && setComponentPositions(pageX, pageY, placement, element, components);\n  useImperativeHandle(ref, () => ({ pointTo }));\n\n  /* Inits and destroys tooltip components. */\n  useEffect(() => {\n    const x = createTooltipComponents(theme);\n    setComponents(x);\n    return () => {\n      document.body.removeChild(x.container);\n      setComponents(null);\n    };\n  }, [theme]);\n\n  return components ? createPortal(children, components.content) : null;\n});\n\nTooltip.propTypes = {\n  children: PT.node,\n  theme: PT.shape().isRequired,\n};\n\nTooltip.defaultProps = {\n  children: null,\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;AAOA;;AAMA;;AAEA;;AAfA;AACA;AACA;AACA;AACA;;AACA;;AAYA;AACA;AACO,MAAMA,UAAU,GAAG;EACxBC,YAAY,EAAE,cADU;EAExBC,aAAa,EAAE,eAFS;EAGxBC,YAAY,EAAE,cAHU;EAIxBC,aAAa,EAAE;AAJS,CAAnB;;AAOP,MAAMC,gBAAgB,GAAG,CACvB,iCADuB,EAEvB,+BAFuB,EAGvB,gCAHuB,EAIvBC,IAJuB,CAIlB,GAJkB,CAAzB;AAMA,MAAMC,cAAc,GAAG,CACrB,8BADqB,EAErB,+BAFqB,EAGrB,gCAHqB,EAIrBD,IAJqB,CAIhB,GAJgB,CAAvB;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASE,uBAAT,CAAiCC,KAAjC,EAAwC;EACtC,MAAMC,KAAK,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAd;EACA,IAAIH,KAAK,CAACC,KAAV,EAAiBA,KAAK,CAACG,YAAN,CAAmB,OAAnB,EAA4BJ,KAAK,CAACC,KAAlC;EAEjB,MAAMI,OAAO,GAAGH,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;EACA,IAAIH,KAAK,CAACK,OAAV,EAAmBA,OAAO,CAACD,YAAR,CAAqB,OAArB,EAA8BJ,KAAK,CAACK,OAApC;EAEnB,MAAMC,SAAS,GAAGJ,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAlB;EACA,IAAIH,KAAK,CAACM,SAAV,EAAqBA,SAAS,CAACF,YAAV,CAAuB,OAAvB,EAAgCJ,KAAK,CAACM,SAAtC;EAErBA,SAAS,CAACC,WAAV,CAAsBN,KAAtB;EACAK,SAAS,CAACC,WAAV,CAAsBF,OAAtB;EACAH,QAAQ,CAACM,IAAT,CAAcD,WAAd,CAA0BD,SAA1B;EAEA,OAAO;IAAEA,SAAF;IAAaL,KAAb;IAAoBI;EAApB,CAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASI,gBAAT,CAA0BC,OAA1B,EAAmC;EACjC,OAAO;IACLT,KAAK,EAAES,OAAO,CAACT,KAAR,CAAcU,qBAAd,EADF;IAELL,SAAS,EAAEI,OAAO,CAACJ,SAAR,CAAkBK,qBAAlB;EAFN,CAAP;AAID;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASC,gBAAT,GAA4B;EAC1B,MAAM;IAAEC,WAAF;IAAeC;EAAf,IAA+BC,MAArC;EACA,MAAM;IAAEC,eAAe,EAAE;MAAEC,YAAF;MAAgBC;IAAhB;EAAnB,IAAqDhB,QAA3D;EACA,OAAO;IACLiB,IAAI,EAAEN,WADD;IAELO,KAAK,EAAEP,WAAW,GAAGK,WAFhB;IAGLG,GAAG,EAAEP,WAHA;IAILQ,MAAM,EAAER,WAAW,GAAGG;EAJjB,CAAP;AAMD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASM,mBAAT,CAA6BC,CAA7B,EAAgCC,CAAhC,EAAmCC,YAAnC,EAAiD;EAC/C,MAAM;IAAEzB,KAAF;IAASK;EAAT,IAAuBoB,YAA7B;EACA,OAAO;IACLC,MAAM,EAAE,OAAOrB,SAAS,CAACsB,KAAV,GAAkB3B,KAAK,CAAC2B,KAA/B,CADH;IAELC,MAAM,EAAEvB,SAAS,CAACwB,MAFb;IAGLC,UAAU,EAAEP,CAAC,GAAGlB,SAAS,CAACsB,KAAV,GAAkB,CAH7B;IAILI,UAAU,EAAEP,CAAC,GAAGnB,SAAS,CAACwB,MAAd,GAAuB7B,KAAK,CAAC6B,MAAN,GAAe,GAJ7C;IAML;IACA;IACA;IACAG,cAAc,EAAErC;EATX,CAAP;AAWD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASsC,qBAAT,CACEC,KADF,EAEEC,K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"}
+{"version":3,"file":"Tooltip.js","names":["PLACEMENTS","ABOVE_CURSOR","ABOVE_ELEMENT","BELOW_CURSOR","BELOW_ELEMENT","ARROW_STYLE_DOWN","join","ARROW_STYLE_UP","createTooltipComponents","theme","arrow","document","createElement","setAttribute","content","container","appendChild","body","calcTooltipRects","tooltip","getBoundingClientRect","calcViewportRect","pageXOffset","pageYOffset","window","documentElement","clientHeight","clientWidth","left","right","top","bottom","calcPositionAboveXY","x","y","tooltipRects","arrowX","width","arrowY","height","containerX","containerY","baseArrowStyle","setComponentPositions","pageX","pageY","placement","element","viewportRect","pos","Math","max","maxX","min","containerStyle","arrowStyle","Tooltip","forwardRef","children","ref","components","setComponents","useState","pointTo","useImperativeHandle","useEffect","removeChild","createPortal","propTypes","PT","node","shape","isRequired","defaultProps"],"sources":["../../../../../src/shared/components/WithTooltip/Tooltip.jsx"],"sourcesContent":["/**\n * The actual tooltip component. It is rendered outside the regular document\n * hierarchy, and with sub-components managed without React to achieve the best\n * performance during animation.\n */\n/* global document, window */\n\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport PT from 'prop-types';\n\n/* Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport. */\nexport const PLACEMENTS = {\n  ABOVE_CURSOR: 'ABOVE_CURSOR',\n  ABOVE_ELEMENT: 'ABOVE_ELEMENT',\n  BELOW_CURSOR: 'BELOW_CURSOR',\n  BELOW_ELEMENT: 'BELOW_ELEMENT',\n};\n\nconst ARROW_STYLE_DOWN = [\n  'border-bottom-color:transparent',\n  'border-left-color:transparent',\n  'border-right-color:transparent',\n].join(';');\n\nconst ARROW_STYLE_UP = [\n  'border-top-color:transparent',\n  'border-left-color:transparent',\n  'border-right-color:transparent',\n].join(';');\n\n/**\n * Creates tooltip components.\n * @ignore\n * @param {object} theme Themes to use for tooltip container, arrow,\n *  and content.\n * @return {object} Object with DOM references to the container components:\n *  container, arrow, content.\n */\nfunction createTooltipComponents(theme) {\n  const arrow = document.createElement('div');\n  if (theme.arrow) arrow.setAttribute('class', theme.arrow);\n\n  const content = document.createElement('div');\n  if (theme.content) content.setAttribute('class', theme.content);\n\n  const container = document.createElement('div');\n  if (theme.container) container.setAttribute('class', theme.container);\n\n  container.appendChild(arrow);\n  container.appendChild(content);\n  document.body.appendChild(container);\n\n  return { container, arrow, content };\n}\n\n/**\n * Generates bounding client rectangles for tooltip components.\n * @ignore\n * @param {object} tooltip DOM references to the tooltip components.\n * @param {object} tooltip.arrow\n * @param {object} tooltip.container\n * @return {{ arrow: object, container}} Object holding tooltip rectangles in\n *  two fields.\n */\nfunction calcTooltipRects(tooltip) {\n  return {\n    arrow: tooltip.arrow.getBoundingClientRect(),\n    container: tooltip.container.getBoundingClientRect(),\n  };\n}\n\n/**\n * Calculates the document viewport size.\n * @ignore\n * @return {{x, y, width, height}}\n */\nfunction calcViewportRect() {\n  const { pageXOffset, pageYOffset } = window;\n  const { documentElement: { clientHeight, clientWidth } } = document;\n  return {\n    left: pageXOffset,\n    right: pageXOffset + clientWidth,\n    top: pageYOffset,\n    bottom: pageYOffset + clientHeight,\n  };\n}\n\n/**\n * Calculates tooltip and arrow positions for the placement just above\n * the cursor.\n * @ignore\n * @param {number} x Cursor page-x position.\n * @param {number} y Cursor page-y position.\n * @param {object} tooltipRects Bounding client rectangles of tooltip parts.\n * @param {object} tooltipRects.arrow\n * @param {object} tooltipRects.container\n * @return {object} Contains the following fields:\n *  - {number} arrowX\n *  - {number} arrowY\n *  - {number} containerX\n *  - {number} containerY\n *  - {string} baseArrowStyle\n */\nfunction calcPositionAboveXY(x, y, tooltipRects) {\n  const { arrow, container } = tooltipRects;\n  return {\n    arrowX: 0.5 * (container.width - arrow.width),\n    arrowY: container.height,\n    containerX: x - container.width / 2,\n    containerY: y - container.height - arrow.height / 1.5,\n\n    // TODO: Instead of already setting the base style here, we should\n    // introduce a set of constants for arrow directions, which will help\n    // to do checks dependant on the arrow direction.\n    baseArrowStyle: ARROW_STYLE_DOWN,\n  };\n}\n\n/*\nconst HIT = {\n  NONE: false,\n  LEFT: 'LEFT',\n  RIGHT: 'RIGHT',\n  TOP: 'TOP',\n  BOTTOM: 'BOTTOM',\n};\n*/\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n/*\nfunction checkViewportFit(pos, tooltipRects, viewportRect) {\n  const { containerX, containerY } = pos;\n  if (containerX < viewportRect.left + 6) return HIT.LEFT;\n  if (containerX > viewportRect.right - 6) return HIT.RIGHT;\n  return HIT.NONE;\n}\n*/\n\n/**\n * Shifts tooltip horizontally to fit into the viewport, while keeping\n * the arrow pointed to the XY point.\n * @param {number} x\n * @param {number} y\n * @param {object} pos\n * @param {number} pageXOffset\n * @param {number} pageXWidth\n */\n/*\nfunction xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {\n  if (pos.containerX < pageXOffset + 6) {\n    pos.containerX = pageXOffset + 6;\n    pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);\n  } else {\n    const maxX = pageXOffset + docRect.width - containerRect.width - 6;\n    if (containerX > maxX) {\n      containerX = maxX;\n      arrowX = Math.min(\n        containerRect.width - 6,\n        pageX - containerX - arrowRect.width / 2,\n      );\n    }\n  }\n}\n*/\n\n/**\n * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param {number} pageX\n * @param {number} pageY\n * @param {PLACEMENTS} placement\n * @param {object} element DOM reference to the element wrapped by the tooltip.\n * @param {object} tooltip\n * @param {object} tooltip.arrow DOM reference to the tooltip arrow.\n * @param {object} tooltip.container DOM reference to the tooltip container.\n */\nfunction setComponentPositions(\n  pageX,\n  pageY,\n  placement,\n  element,\n  tooltip,\n) {\n  const tooltipRects = calcTooltipRects(tooltip);\n  const viewportRect = calcViewportRect();\n\n  /* Default container coords: tooltip at the top. */\n  const pos = calcPositionAboveXY(pageX, pageY, tooltipRects);\n\n  if (pos.containerX < viewportRect.left + 6) {\n    pos.containerX = viewportRect.left + 6;\n    pos.arrowX = Math.max(\n      6,\n      pageX - pos.containerX - tooltipRects.arrow.width / 2,\n    );\n  } else {\n    const maxX = viewportRect.right - 6 - tooltipRects.container.width;\n    if (pos.containerX > maxX) {\n      pos.containerX = maxX;\n      pos.arrowX = Math.min(\n        tooltipRects.container.width - 6,\n        pageX - pos.containerX - tooltipRects.arrow.width / 2,\n      );\n    }\n  }\n\n  /* If tooltip has not enough space on top - make it bottom tooltip. */\n  if (pos.containerY < viewportRect.top + 6) {\n    pos.containerY += tooltipRects.container.height\n      + 2 * tooltipRects.arrow.height;\n    pos.arrowY -= tooltipRects.container.height\n      + tooltipRects.arrow.height;\n    pos.baseArrowStyle = ARROW_STYLE_UP;\n  }\n\n  const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;\n  tooltip.container.setAttribute('style', containerStyle);\n\n  const arrowStyle = `${pos.baseArrowStyle};left:${pos.arrowX}px;top:${pos.arrowY}px`;\n  tooltip.arrow.setAttribute('style', arrowStyle);\n}\n\n/* The Tooltip component itself. */\nconst Tooltip = forwardRef(({ children, theme }, ref) => {\n  const [components, setComponents] = useState(null);\n\n  const pointTo = (pageX, pageY, placement, element) => components\n    && setComponentPositions(pageX, pageY, placement, element, components);\n  useImperativeHandle(ref, () => ({ pointTo }));\n\n  /* Inits and destroys tooltip components. */\n  useEffect(() => {\n    const x = createTooltipComponents(theme);\n    setComponents(x);\n    return () => {\n      document.body.removeChild(x.container);\n      setComponents(null);\n    };\n  }, [theme]);\n\n  return components ? createPortal(children, components.content) : null;\n});\n\nTooltip.propTypes = {\n  children: PT.node,\n  theme: PT.shape().isRequired,\n};\n\nTooltip.defaultProps = {\n  children: null,\n};\n\nexport default Tooltip;\n"],"mappings":"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"}

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

@@ -1,26 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = require("react");
-
 var _utils = require("../../utils");
-
 var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /* global window */
 const defaultTheme = {
   "ad": "-dr-pogodin-react-utils___src-shared-components-WithTooltip-default-theme___ad___4xT7zE",
@@ -46,7 +37,6 @@ const defaultTheme = {
  * _e.g._ a tooltip text. This will be the tooltip content.
  * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.
  */
-
 function Wrapper({
   children,
   placement,
@@ -56,11 +46,9 @@ function Wrapper({
   const tooltipRef = (0, _react.useRef)();
   const wrapperRef = (0, _react.useRef)();
   const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
-
   const updatePortalPosition = (cursorX, cursorY) => {
     if (!showTooltip) setShowTooltip(true);else {
       const wrapperRect = wrapperRef.current.getBoundingClientRect();
-
       if (cursorX < wrapperRect.left || cursorX > wrapperRect.right || cursorY < wrapperRect.top || cursorY > wrapperRect.bottom) {
         setShowTooltip(false);
       } else if (tooltipRef.current) {
@@ -68,15 +56,12 @@ function Wrapper({
       }
     }
   };
-
   (0, _react.useEffect)(() => {
     if (showTooltip && tip !== null) {
       const listener = () => setShowTooltip(false);
-
       window.addEventListener('scroll', listener);
       return () => window.removeEventListener('scroll', listener);
     }
-
     return undefined;
   }, [showTooltip, tip]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -91,7 +76,6 @@ function Wrapper({
     }) : null, children]
   });
 }
-
 const ThemedWrapper = (0, _utils.themed)('WithTooltip', ['appearance', 'arrow', 'container', 'content', 'wrapper'], defaultTheme)(Wrapper);
 ThemedWrapper.PLACEMENTS = _Tooltip.PLACEMENTS;
 Wrapper.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Wrapper","children","placement","tip","theme","tooltipRef","useRef","wrapperRef","showTooltip","setShowTooltip","useState","updatePortalPosition","cursorX","cursorY","wrapperRect","current","getBoundingClientRect","left","right","top","bottom","pointTo","window","pageXOffset","pageYOffset","useEffect","listener","addEventListener","removeEventListener","undefined","wrapper","e","clientX","clientY","ThemedWrapper","themed","defaultTheme","PLACEMENTS","propTypes","PT","node","oneOf","Object","values","themeType","isRequired","defaultProps","ABOVE_CURSOR"],"sources":["../../../../../src/shared/components/WithTooltip/index.jsx"],"sourcesContent":["/* global window */\n\nimport PT from 'prop-types';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { themed } from 'utils';\n\nimport Tooltip, { PLACEMENTS } from './Tooltip';\n\nimport defaultTheme from './default-theme.scss';\n\n/**\n * Implements a simple to use and themeable tooltip component, _e.g._\n * ```js\n * <WithTooltip tip=\"This is example tooltip.\">\n *   <p>Hover to see the tooltip.</p>\n * </WithTooltip>\n * ```\n * **Children:** Children are rendered in the place of `<WithTooltip>`,\n * and when hovered the tooltip is shown. By default the wrapper itself is\n * `<div>` block with `display: inline-block`.\n * @param {object} props Component properties.\n * @param {React.node} props.tip &ndash; Anything React is able to render,\n * _e.g._ a tooltip text. This will be the tooltip content.\n * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.\n */\nfunction Wrapper({\n  children,\n  placement,\n  tip,\n  theme,\n}) {\n  const tooltipRef = useRef();\n  const wrapperRef = useRef();\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const updatePortalPosition = (cursorX, cursorY) => {\n    if (!showTooltip) setShowTooltip(true);\n    else {\n      const wrapperRect = wrapperRef.current.getBoundingClientRect();\n      if (\n        cursorX < wrapperRect.left\n        || cursorX > wrapperRect.right\n        || cursorY < wrapperRect.top\n        || cursorY > wrapperRect.bottom\n      ) {\n        setShowTooltip(false);\n      } else if (tooltipRef.current) {\n        tooltipRef.current.pointTo(\n          cursorX + window.pageXOffset,\n          cursorY + window.pageYOffset,\n          placement,\n          wrapperRef.current,\n        );\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (showTooltip && tip !== null) {\n      const listener = () => setShowTooltip(false);\n      window.addEventListener('scroll', listener);\n      return () => window.removeEventListener('scroll', listener);\n    }\n    return undefined;\n  }, [showTooltip, tip]);\n\n  return (\n    <div\n      className={theme.wrapper}\n      onMouseLeave={() => setShowTooltip(false)}\n      onMouseMove={(e) => updatePortalPosition(e.clientX, e.clientY)}\n      ref={wrapperRef}\n    >\n      {\n        showTooltip && tip !== null ? (\n          <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>\n        ) : null\n      }\n      {children}\n    </div>\n  );\n}\n\nconst ThemedWrapper = themed(\n  'WithTooltip',\n  [\n    'appearance',\n    'arrow',\n    'container',\n    'content',\n    'wrapper',\n  ],\n  defaultTheme,\n)(Wrapper);\n\nThemedWrapper.PLACEMENTS = PLACEMENTS;\n\nWrapper.propTypes = {\n  children: PT.node,\n  placement: PT.oneOf(Object.values(PLACEMENTS)),\n  theme: ThemedWrapper.themeType.isRequired,\n  tip: PT.node,\n};\n\nWrapper.defaultProps = {\n  children: null,\n  placement: PLACEMENTS.ABOVE_CURSOR,\n  tip: null,\n};\n\nexport default ThemedWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Wrapper","children","placement","tip","theme","tooltipRef","useRef","wrapperRef","showTooltip","setShowTooltip","useState","updatePortalPosition","cursorX","cursorY","wrapperRect","current","getBoundingClientRect","left","right","top","bottom","pointTo","window","pageXOffset","pageYOffset","useEffect","listener","addEventListener","removeEventListener","undefined","wrapper","e","clientX","clientY","ThemedWrapper","themed","defaultTheme","PLACEMENTS","propTypes","PT","node","oneOf","Object","values","themeType","isRequired","defaultProps","ABOVE_CURSOR"],"sources":["../../../../../src/shared/components/WithTooltip/index.jsx"],"sourcesContent":["/* global window */\n\nimport PT from 'prop-types';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { themed } from 'utils';\n\nimport Tooltip, { PLACEMENTS } from './Tooltip';\n\nimport defaultTheme from './default-theme.scss';\n\n/**\n * Implements a simple to use and themeable tooltip component, _e.g._\n * ```js\n * <WithTooltip tip=\"This is example tooltip.\">\n *   <p>Hover to see the tooltip.</p>\n * </WithTooltip>\n * ```\n * **Children:** Children are rendered in the place of `<WithTooltip>`,\n * and when hovered the tooltip is shown. By default the wrapper itself is\n * `<div>` block with `display: inline-block`.\n * @param {object} props Component properties.\n * @param {React.node} props.tip &ndash; Anything React is able to render,\n * _e.g._ a tooltip text. This will be the tooltip content.\n * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.\n */\nfunction Wrapper({\n  children,\n  placement,\n  tip,\n  theme,\n}) {\n  const tooltipRef = useRef();\n  const wrapperRef = useRef();\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const updatePortalPosition = (cursorX, cursorY) => {\n    if (!showTooltip) setShowTooltip(true);\n    else {\n      const wrapperRect = wrapperRef.current.getBoundingClientRect();\n      if (\n        cursorX < wrapperRect.left\n        || cursorX > wrapperRect.right\n        || cursorY < wrapperRect.top\n        || cursorY > wrapperRect.bottom\n      ) {\n        setShowTooltip(false);\n      } else if (tooltipRef.current) {\n        tooltipRef.current.pointTo(\n          cursorX + window.pageXOffset,\n          cursorY + window.pageYOffset,\n          placement,\n          wrapperRef.current,\n        );\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (showTooltip && tip !== null) {\n      const listener = () => setShowTooltip(false);\n      window.addEventListener('scroll', listener);\n      return () => window.removeEventListener('scroll', listener);\n    }\n    return undefined;\n  }, [showTooltip, tip]);\n\n  return (\n    <div\n      className={theme.wrapper}\n      onMouseLeave={() => setShowTooltip(false)}\n      onMouseMove={(e) => updatePortalPosition(e.clientX, e.clientY)}\n      ref={wrapperRef}\n    >\n      {\n        showTooltip && tip !== null ? (\n          <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>\n        ) : null\n      }\n      {children}\n    </div>\n  );\n}\n\nconst ThemedWrapper = themed(\n  'WithTooltip',\n  [\n    'appearance',\n    'arrow',\n    'container',\n    'content',\n    'wrapper',\n  ],\n  defaultTheme,\n)(Wrapper);\n\nThemedWrapper.PLACEMENTS = PLACEMENTS;\n\nWrapper.propTypes = {\n  children: PT.node,\n  placement: PT.oneOf(Object.values(PLACEMENTS)),\n  theme: ThemedWrapper.themeType.isRequired,\n  tip: PT.node,\n};\n\nWrapper.defaultProps = {\n  children: null,\n  placement: PLACEMENTS.ABOVE_CURSOR,\n  tip: null,\n};\n\nexport default ThemedWrapper;\n"],"mappings":"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"}