@dr.pogodin/react-utils 1.44.9 → 1.45.0

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

@@ -44,15 +44,6 @@ const BaseModal = ({
 }) => {
   const containerRef = (0, _react.useRef)(null);
   const overlayRef = (0, _react.useRef)(null);
-  const [portal, setPortal] = (0, _react.useState)();
-  (0, _react.useEffect)(() => {
-    const p = document.createElement('div');
-    document.body.appendChild(p);
-    setPortal(p);
-    return () => {
-      document.body.removeChild(p);
-    };
-  }, []);
 
   // Sets up modal cancellation of scrolling, if opted-in.
   (0, _react.useEffect)(() => {
@@ -93,7 +84,7 @@ const BaseModal = ({
     ,
     tabIndex: 0
   }), []);
-  return portal ? /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [focusLast, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-label": "Cancel",
       className: theme.overlay,
@@ -143,7 +134,7 @@ const BaseModal = ({
       ,
       tabIndex: 0
     }), focusLast]
-  }), portal) : null;
+  }), document.body);
 };
 exports.BaseModal = BaseModal;
 var _default = exports.default = (0, _reactThemes.default)(BaseModal, 'Modal', baseTheme);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_reactDom","_interopRequireDefault","_reactThemes","_jsxRuntime","baseTheme","S","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","overlayStyle","style","testId","testIdForOverlay","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","appendChild","removeChild","window","addEventListener","removeEventListener","classList","add","scrollingDisabledByModal","remove","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","process","env","NODE_ENV","undefined","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event","exports","_default","default","themed"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type FunctionComponent,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  overlayStyle?: CSSProperties;\n  style?: CSSProperties;\n  testId?: string;\n  testIdForOverlay?: string;\n  theme: Theme<'container' | 'overlay'>;\n\n  /** @deprecated */\n  containerStyle?: CSSProperties;\n};\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal: FunctionComponent<PropsT> = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  overlayStyle,\n  style,\n  testId,\n  testIdForOverlay,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const [portal, setPortal] = useState<HTMLDivElement>();\n\n  useEffect(() => {\n    const p = document.createElement('div');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.removeChild(p);\n    };\n  }, []);\n\n  // Sets up modal cancellation of scrolling, if opted-in.\n  useEffect(() => {\n    if (cancelOnScrolling && onCancel) {\n      window.addEventListener('scroll', onCancel);\n      window.addEventListener('wheel', onCancel);\n    }\n    return () => {\n      if (cancelOnScrolling && onCancel) {\n        window.removeEventListener('scroll', onCancel);\n        window.removeEventListener('wheel', onCancel);\n      }\n    };\n  }, [cancelOnScrolling, onCancel]);\n\n  // Disables window scrolling, if it is not opted-out.\n  useEffect(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(S.scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(S.scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\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] as HTMLElement).focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      // TODO: Have a look at this later.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n    />\n  ), []);\n\n  return portal ? ReactDom.createPortal(\n    (\n      <>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\n          data-testid={\n            process.env.NODE_ENV === 'production'\n              ? undefined : testIdForOverlay\n          }\n          onClick={(e) => {\n            if (onCancel) {\n              onCancel();\n              e.stopPropagation();\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' && onCancel) {\n              onCancel();\n              e.stopPropagation();\n            }\n          }}\n          ref={(node) => {\n            if (node && node !== overlayRef.current) {\n              overlayRef.current = node;\n              node.focus();\n            }\n          }}\n          role=\"button\"\n          style={overlayStyle}\n          tabIndex={0}\n        />\n        {\n          // NOTE: These rules are disabled because our intention is to keep\n          // the element non-interactive (thus not on the keyboard focus chain),\n          // and it has `onClick` handler merely to stop propagation of click\n          // events to its parent container. This is needed because, for example\n          // when the modal is wrapped into an interactive element we don't want\n          // any clicks inside the modal to bubble-up to that parent element\n          // (because visually and logically the modal dialog does not belong\n          // to its parent container, where it technically belongs from\n          // the HTML mark-up perpective).\n        }\n        <div // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n          aria-modal=\"true\"\n          className={theme.container}\n          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n          onClick={(e) => {\n            e.stopPropagation();\n          }}\n          onWheel={(event) => {\n            event.stopPropagation();\n          }}\n          ref={containerRef}\n          role=\"dialog\"\n          style={style ?? containerStyle}\n        >\n          {children}\n        </div>\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          // TODO: Have a look at this later.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n          tabIndex={0}\n        />\n        {focusLast}\n      </>\n    ),\n    portal,\n  ) : null;\n};\n\nexport default themed(BaseModal, 'Modal', baseTheme);\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","require","_reactDom","_interopRequireDefault","_reactThemes","_jsxRuntime","baseTheme","S","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","overlayStyle","style","testId","testIdForOverlay","theme","containerRef","useRef","overlayRef","useEffect","window","addEventListener","removeEventListener","document","body","classList","add","scrollingDisabledByModal","remove","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","className","overlay","process","env","NODE_ENV","undefined","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event","exports","_default","default","themed"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type FunctionComponent,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  overlayStyle?: CSSProperties;\n  style?: CSSProperties;\n  testId?: string;\n  testIdForOverlay?: string;\n  theme: Theme<'container' | 'overlay'>;\n\n  /** @deprecated */\n  containerStyle?: CSSProperties;\n};\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal: FunctionComponent<PropsT> = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  overlayStyle,\n  style,\n  testId,\n  testIdForOverlay,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n\n  // Sets up modal cancellation of scrolling, if opted-in.\n  useEffect(() => {\n    if (cancelOnScrolling && onCancel) {\n      window.addEventListener('scroll', onCancel);\n      window.addEventListener('wheel', onCancel);\n    }\n    return () => {\n      if (cancelOnScrolling && onCancel) {\n        window.removeEventListener('scroll', onCancel);\n        window.removeEventListener('wheel', onCancel);\n      }\n    };\n  }, [cancelOnScrolling, onCancel]);\n\n  // Disables window scrolling, if it is not opted-out.\n  useEffect(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(S.scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(S.scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\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] as HTMLElement).focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      // TODO: Have a look at this later.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n    />\n  ), []);\n\n  return ReactDom.createPortal(\n    (\n      <div>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\n          data-testid={\n            process.env.NODE_ENV === 'production'\n              ? undefined : testIdForOverlay\n          }\n          onClick={(e) => {\n            if (onCancel) {\n              onCancel();\n              e.stopPropagation();\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' && onCancel) {\n              onCancel();\n              e.stopPropagation();\n            }\n          }}\n          ref={(node) => {\n            if (node && node !== overlayRef.current) {\n              overlayRef.current = node;\n              node.focus();\n            }\n          }}\n          role=\"button\"\n          style={overlayStyle}\n          tabIndex={0}\n        />\n        {\n          // NOTE: These rules are disabled because our intention is to keep\n          // the element non-interactive (thus not on the keyboard focus chain),\n          // and it has `onClick` handler merely to stop propagation of click\n          // events to its parent container. This is needed because, for example\n          // when the modal is wrapped into an interactive element we don't want\n          // any clicks inside the modal to bubble-up to that parent element\n          // (because visually and logically the modal dialog does not belong\n          // to its parent container, where it technically belongs from\n          // the HTML mark-up perpective).\n        }\n        <div // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n          aria-modal=\"true\"\n          className={theme.container}\n          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n          onClick={(e) => {\n            e.stopPropagation();\n          }}\n          onWheel={(event) => {\n            event.stopPropagation();\n          }}\n          ref={containerRef}\n          role=\"dialog\"\n          style={style ?? containerStyle}\n        >\n          {children}\n        </div>\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          // TODO: Have a look at this later.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n          tabIndex={0}\n        />\n        {focusLast}\n      </div>\n    ),\n    document.body,\n  );\n};\n\nexport default themed(BaseModal, 'Modal', baseTheme);\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"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","ignoreList":[]}

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.PLACEMENTS = void 0;
 var _react = require("react");
 var _reactDom = require("react-dom");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * The actual tooltip component. It is rendered outside the regular document
  * hierarchy, and with sub-components managed without React to achieve the best
@@ -24,30 +25,6 @@ let PLACEMENTS = exports.PLACEMENTS = /*#__PURE__*/function (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
- * @param {object} theme Themes to use for tooltip container, arrow,
- *  and content.
- * @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);
-  const content = document.createElement('div');
-  if (theme.content) content.setAttribute('class', theme.content);
-  const container = document.createElement('div');
-  if (theme.container) container.setAttribute('class', theme.container);
-  container.appendChild(arrow);
-  container.appendChild(content);
-  document.body.appendChild(container);
-  return {
-    arrow,
-    container,
-    content
-  };
-}
 /**
  * Generates bounding client rectangles for tooltip components.
  * @ignore
@@ -221,50 +198,34 @@ const Tooltip = ({
   // Thus, when we create the <Tooltip> we have to record its target positioning
   // details, and then apply them when it is created.
 
-  const {
-    current: heap
-  } = (0, _react.useRef)({
-    lastElement: undefined,
-    lastPageX: 0,
-    lastPageY: 0,
-    lastPlacement: undefined
-  });
-  const [components, setComponents] = (0, _react.useState)(null);
+  const arrowRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
   const pointTo = (pageX, pageY, placement, element) => {
-    heap.lastElement = element;
-    heap.lastPageX = pageX;
-    heap.lastPageY = pageY;
-    heap.lastPlacement = placement;
-    if (components) {
-      setComponentPositions(pageX, pageY, placement, element, components);
+    if (!arrowRef.current || !containerRef.current || !contentRef.current) {
+      throw Error('Internal error');
     }
+    setComponentPositions(pageX, pageY, placement, element, {
+      arrow: arrowRef.current,
+      container: containerRef.current,
+      content: contentRef.current
+    });
   };
   (0, _react.useImperativeHandle)(ref, () => ({
     pointTo
   }));
-
-  /* Inits and destroys tooltip components. */
-  (0, _react.useEffect)(() => {
-    const x = createTooltipComponents(theme);
-    setComponents(x);
-    return () => {
-      document.body.removeChild(x.container);
-      setComponents(null);
-    };
-  }, [theme]);
-  (0, _react.useEffect)(() => {
-    if (components) {
-      setComponentPositions(heap.lastPageX, heap.lastPageY, heap.lastPlacement, heap.lastElement, components);
-    }
-  }, [components,
-  // BEWARE: Careful about these dependencies - they are updated when mouse
-  // is moved over the tool-tipped element, thus potentially may cause
-  // unnecessary firing of this effect on each mouse event. It does not
-  // happen now just because the mouse movements themselves are not causing
-  // the component re-rendering, thus dependencies of this effect are not
-  // really re-evaluated.
-  heap.lastPageX, heap.lastPageY, heap.lastPlacement, heap.lastElement]);
-  return components ? /*#__PURE__*/(0, _reactDom.createPortal)(children, components.content) : null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: theme.container,
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: theme.arrow,
+      ref: arrowRef
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: theme.content,
+      ref: contentRef,
+      children: children
+    })]
+  }), document.body);
 };
 var _default = exports.default = Tooltip;
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_react","require","_reactDom","PLACEMENTS","exports","ARROW_STYLE_DOWN","join","ARROW_STYLE_UP","createTooltipComponents","theme","arrow","document","createElement","setAttribute","content","container","appendChild","body","calcTooltipRects","tooltip","getBoundingClientRect","calcViewportRect","scrollX","scrollY","window","documentElement","clientHeight","clientWidth","bottom","left","right","top","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","children","ref","current","heap","useRef","lastElement","undefined","lastPageX","lastPageY","lastPlacement","components","setComponents","useState","pointTo","useImperativeHandle","useEffect","removeChild","createPortal","_default","default"],"sources":["../../../../../src/shared/components/WithTooltip/Tooltip.ts"],"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\nimport {\n  type FunctionComponent,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\n/**\n * Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport.\n */\nexport enum 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\ntype ComponentsT = {\n  container: HTMLDivElement;\n  arrow: HTMLDivElement;\n  content: HTMLDivElement;\n};\n\ntype HeapT = {\n  lastElement?: HTMLElement;\n  lastPageX: number;\n  lastPageY: number;\n  lastPlacement?: PLACEMENTS | undefined;\n};\n\nexport type ThemeKeysT = 'appearance' | 'arrow' | 'content' | 'container';\n\ntype TooltipThemeT = Theme<ThemeKeysT>;\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: TooltipThemeT): ComponentsT {\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 { arrow, container, content };\n}\n\ntype TooltipRectsT = {\n  arrow: DOMRect;\n  container: DOMRect;\n};\n\n/**\n * Generates bounding client rectangles for tooltip components.\n * @ignore\n * @param tooltip DOM references to the tooltip components.\n * @param tooltip.arrow\n * @param tooltip.container\n * @return Object holding tooltip rectangles in\n *  two fields.\n */\nfunction calcTooltipRects(tooltip: ComponentsT): TooltipRectsT {\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 { scrollX, scrollY } = window;\n  const { documentElement: { clientHeight, clientWidth } } = document;\n  return {\n    bottom: scrollY + clientHeight,\n    left: scrollX,\n    right: scrollX + clientWidth,\n    top: scrollY,\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(\n  x: number,\n  y: number,\n  tooltipRects: TooltipRectsT,\n) {\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// const HIT = {\n//   NONE: false,\n//   LEFT: 'LEFT',\n//   RIGHT: 'RIGHT',\n//   TOP: 'TOP',\n//   BOTTOM: 'BOTTOM',\n// };\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n// function 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 * 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// function 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 * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param pageX\n * @param pageY\n * @param placement\n * @param element DOM reference to the element wrapped by the tooltip.\n * @param tooltip\n * @param tooltip.arrow DOM reference to the tooltip arrow.\n * @param tooltip.container DOM reference to the tooltip container.\n */\nfunction setComponentPositions(\n  pageX: number,\n  pageY: number,\n  placement: PLACEMENTS | undefined,\n  element: HTMLElement | undefined,\n  tooltip: ComponentsT,\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: FunctionComponent<{\n  children?: ReactNode;\n  ref?: RefObject<unknown>;\n  theme: TooltipThemeT;\n}> = ({ children, ref, theme }) => {\n  // NOTE: The way it has to be implemented, for clean mounting and unmounting\n  // at the client side, the <Tooltip> is fully mounted into DOM in the next\n  // rendering cycles, and only then it can be correctly measured and positioned.\n  // Thus, when we create the <Tooltip> we have to record its target positioning\n  // details, and then apply them when it is created.\n\n  const { current: heap } = useRef<HeapT>({\n    lastElement: undefined,\n    lastPageX: 0,\n    lastPageY: 0,\n    lastPlacement: undefined,\n  });\n\n  const [components, setComponents] = useState<ComponentsT | null>(null);\n\n  const pointTo = (\n    pageX: number,\n    pageY: number,\n    placement: PLACEMENTS,\n    element: HTMLElement,\n  ) => {\n    heap.lastElement = element;\n    heap.lastPageX = pageX;\n    heap.lastPageY = pageY;\n    heap.lastPlacement = placement;\n\n    if (components) {\n      setComponentPositions(pageX, pageY, placement, element, components);\n    }\n  };\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  useEffect(() => {\n    if (components) {\n      setComponentPositions(\n        heap.lastPageX,\n        heap.lastPageY,\n        heap.lastPlacement,\n        heap.lastElement,\n        components,\n      );\n    }\n  }, [\n    components,\n    // BEWARE: Careful about these dependencies - they are updated when mouse\n    // is moved over the tool-tipped element, thus potentially may cause\n    // unnecessary firing of this effect on each mouse event. It does not\n    // happen now just because the mouse movements themselves are not causing\n    // the component re-rendering, thus dependencies of this effect are not\n    // really re-evaluated.\n    heap.lastPageX,\n    heap.lastPageY,\n    heap.lastPlacement,\n    heap.lastElement,\n  ]);\n\n  return components ? createPortal(children, components.content) : null;\n};\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tooltip.js","names":["_react","require","_reactDom","_jsxRuntime","PLACEMENTS","exports","ARROW_STYLE_DOWN","join","ARROW_STYLE_UP","calcTooltipRects","tooltip","arrow","getBoundingClientRect","container","calcViewportRect","scrollX","scrollY","window","documentElement","clientHeight","clientWidth","document","bottom","left","right","top","calcPositionAboveXY","x","y","tooltipRects","arrowX","width","arrowY","height","containerX","containerY","baseArrowStyle","setComponentPositions","pageX","pageY","placement","element","viewportRect","pos","Math","max","maxX","min","containerStyle","setAttribute","arrowStyle","Tooltip","children","ref","theme","arrowRef","useRef","containerRef","contentRef","pointTo","current","Error","content","useImperativeHandle","createPortal","jsxs","className","jsx","body","_default","default"],"sources":["../../../../../src/shared/components/WithTooltip/Tooltip.tsx"],"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\nimport {\n  type FunctionComponent,\n  type ReactNode,\n  type RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\n/**\n * Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport.\n */\nexport enum 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\ntype ComponentsT = {\n  container: HTMLDivElement;\n  arrow: HTMLDivElement;\n  content: HTMLDivElement;\n};\n\nexport type ThemeKeysT = 'appearance' | 'arrow' | 'content' | 'container';\n\ntype TooltipThemeT = Theme<ThemeKeysT>;\n\ntype TooltipRectsT = {\n  arrow: DOMRect;\n  container: DOMRect;\n};\n\n/**\n * Generates bounding client rectangles for tooltip components.\n * @ignore\n * @param tooltip DOM references to the tooltip components.\n * @param tooltip.arrow\n * @param tooltip.container\n * @return Object holding tooltip rectangles in\n *  two fields.\n */\nfunction calcTooltipRects(tooltip: ComponentsT): TooltipRectsT {\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 { scrollX, scrollY } = window;\n  const { documentElement: { clientHeight, clientWidth } } = document;\n  return {\n    bottom: scrollY + clientHeight,\n    left: scrollX,\n    right: scrollX + clientWidth,\n    top: scrollY,\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(\n  x: number,\n  y: number,\n  tooltipRects: TooltipRectsT,\n) {\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// const HIT = {\n//   NONE: false,\n//   LEFT: 'LEFT',\n//   RIGHT: 'RIGHT',\n//   TOP: 'TOP',\n//   BOTTOM: 'BOTTOM',\n// };\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n// function 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 * 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// function 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 * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param pageX\n * @param pageY\n * @param placement\n * @param element DOM reference to the element wrapped by the tooltip.\n * @param tooltip\n * @param tooltip.arrow DOM reference to the tooltip arrow.\n * @param tooltip.container DOM reference to the tooltip container.\n */\nfunction setComponentPositions(\n  pageX: number,\n  pageY: number,\n  placement: PLACEMENTS | undefined,\n  element: HTMLElement | undefined,\n  tooltip: ComponentsT,\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: FunctionComponent<{\n  children?: ReactNode;\n  ref?: RefObject<unknown>;\n  theme: TooltipThemeT;\n}> = ({ children, ref, theme }) => {\n  // NOTE: The way it has to be implemented, for clean mounting and unmounting\n  // at the client side, the <Tooltip> is fully mounted into DOM in the next\n  // rendering cycles, and only then it can be correctly measured and positioned.\n  // Thus, when we create the <Tooltip> we have to record its target positioning\n  // details, and then apply them when it is created.\n\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const pointTo = (\n    pageX: number,\n    pageY: number,\n    placement: PLACEMENTS,\n    element: HTMLElement,\n  ) => {\n    if (!arrowRef.current || !containerRef.current || !contentRef.current) {\n      throw Error('Internal error');\n    }\n\n    setComponentPositions(pageX, pageY, placement, element, {\n      arrow: arrowRef.current,\n      container: containerRef.current,\n      content: contentRef.current,\n    });\n  };\n  useImperativeHandle(ref, () => ({ pointTo }));\n\n  return createPortal(\n    (\n      <div className={theme.container} ref={containerRef}>\n        <div className={theme.arrow} ref={arrowRef} />\n        <div className={theme.content} ref={contentRef}>{children}</div>\n      </div>\n    ),\n    document.body,\n  );\n};\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}

package/build/development/shared/utils/webpack.js

@@ -13,8 +13,23 @@ var _isomorphy = require("./isomorphy");
  * @param [basePath]
  * @return Required module.
  */
-function requireWeak(modulePath, basePath) {
+function requireWeak(modulePath,
+// TODO: For now `basePath` can be provided directly as a string here,
+// for backward compatibility. Deprecate it in future, if any other
+// breaking changes are done for requireWeak().
+basePathOrOptions) {
   if (_isomorphy.IS_CLIENT_SIDE) return null;
+  let basePath;
+  let ops;
+  if (typeof basePathOrOptions === 'string') {
+    basePath = basePathOrOptions;
+    ops = {};
+  } else {
+    ops = basePathOrOptions ?? {};
+    ({
+      basePath
+    } = ops);
+  }
 
   // TODO: On one hand, this try/catch wrap silencing errors is bad, as it may
   // hide legit errors, in a way difficult to notice and understand; but on the
@@ -45,7 +60,8 @@ function requireWeak(modulePath, basePath) {
       }
     });
     return res;
-  } catch {
+  } catch (error) {
+    if (ops.throwOnError) throw error;
     return null;
   }
 }

package/build/development/shared/utils/webpack.js.map

@@ -1 +1 @@
-{"version":3,"file":"webpack.js","names":["_isomorphy","require","requireWeak","modulePath","basePath","IS_CLIENT_SIDE","req","eval","resolve","path","module","default","def","named","res","Object","entries","forEach","name","value","assigned","Error","resolveWeak"],"sources":["../../../../src/shared/utils/webpack.ts"],"sourcesContent":["import type PathNS from 'node:path';\n\nimport { IS_CLIENT_SIDE } from './isomorphy';\n\ntype RequireWeakResT<T> = T extends { default: infer D }\n  ? (D extends null | undefined ? T : D & Omit<T, 'default'>)\n  : T;\n\n/**\n * Requires the specified module without including it into the bundle during\n * Webpack build.\n * @param modulePath\n * @param [basePath]\n * @return Required module.\n */\nexport function requireWeak<T extends object>(\n  modulePath: string,\n  basePath?: string,\n): RequireWeakResT<T> | null {\n  if (IS_CLIENT_SIDE) return null;\n\n  // TODO: On one hand, this try/catch wrap silencing errors is bad, as it may\n  // hide legit errors, in a way difficult to notice and understand; but on the\n  // other hand it fails for some (unclear, but legit?) reasons in some\n  // environments,\n  // like during the static code generation for docs. Perhaps, something should\n  // be implemented differently here.\n  try {\n    // eslint-disable-next-line no-eval\n    const req = eval('require') as (path: string) => unknown;\n\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const { resolve } = req('path') as typeof PathNS;\n\n    const path = basePath ? resolve(basePath, modulePath) : modulePath;\n    const module = req(path) as T;\n\n    if (!('default' in module) || !module.default) return module as RequireWeakResT<T>;\n\n    const { default: def, ...named } = module;\n\n    const res = def as RequireWeakResT<T>;\n\n    Object.entries(named).forEach(([name, value]) => {\n      const assigned = res[name as keyof RequireWeakResT<T>];\n      if (assigned) (res[name as keyof RequireWeakResT<T>] as unknown) = value;\n      else if (assigned !== value) {\n        throw Error('Conflict between default and named exports');\n      }\n    });\n    return res;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Resolves specified module path with help of Babel's module resolver.\n * Yes, the function itself just returns its argument to the caller, but Babel\n * is configured to resolve the first argument of resolveWeak(..) function, thus\n * the result will be the resolved path.\n * @param {string} modulePath\n * @return {string} Absolute or relative path to the module.\n */\nexport function resolveWeak(modulePath: string): string {\n  return modulePath;\n}\n"],"mappings":";;;;;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CACzBC,UAAkB,EAClBC,QAAiB,EACU;EAC3B,IAAIC,yBAAc,EAAE,OAAO,IAAI;;EAE/B;EACA;EACA;EACA;EACA;EACA;EACA,IAAI;IACF;IACA,MAAMC,GAAG,GAAGC,IAAI,CAAC,SAAS,CAA8B;;IAExD;IACA,MAAM;MAAEC;IAAQ,CAAC,GAAGF,GAAG,CAAC,MAAM,CAAkB;IAEhD,MAAMG,IAAI,GAAGL,QAAQ,GAAGI,OAAO,CAACJ,QAAQ,EAAED,UAAU,CAAC,GAAGA,UAAU;IAClE,MAAMO,MAAM,GAAGJ,GAAG,CAACG,IAAI,CAAM;IAE7B,IAAI,EAAE,SAAS,IAAIC,MAAM,CAAC,IAAI,CAACA,MAAM,CAACC,OAAO,EAAE,OAAOD,MAAM;IAE5D,MAAM;MAAEC,OAAO,EAAEC,GAAG;MAAE,GAAGC;IAAM,CAAC,GAAGH,MAAM;IAEzC,MAAMI,GAAG,GAAGF,GAAyB;IAErCG,MAAM,CAACC,OAAO,CAACH,KAAK,CAAC,CAACI,OAAO,CAAC,CAAC,CAACC,IAAI,EAAEC,KAAK,CAAC,KAAK;MAC/C,MAAMC,QAAQ,GAAGN,GAAG,CAACI,IAAI,CAA6B;MACtD,IAAIE,QAAQ,EAAGN,GAAG,CAACI,IAAI,CAA6B,GAAeC,KAAK,CAAC,KACpE,IAAIC,QAAQ,KAAKD,KAAK,EAAE;QAC3B,MAAME,KAAK,CAAC,4CAA4C,CAAC;MAC3D;IACF,CAAC,CAAC;IACF,OAAOP,GAAG;EACZ,CAAC,CAAC,MAAM;IACN,OAAO,IAAI;EACb;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASQ,WAAWA,CAACnB,UAAkB,EAAU;EACtD,OAAOA,UAAU;AACnB","ignoreList":[]}
+{"version":3,"file":"webpack.js","names":["_isomorphy","require","requireWeak","modulePath","basePathOrOptions","IS_CLIENT_SIDE","basePath","ops","req","eval","resolve","path","module","default","def","named","res","Object","entries","forEach","name","value","assigned","Error","error","throwOnError","resolveWeak"],"sources":["../../../../src/shared/utils/webpack.ts"],"sourcesContent":["import type PathNS from 'node:path';\n\nimport { IS_CLIENT_SIDE } from './isomorphy';\n\ntype RequireWeakOptionsT = {\n  basePath?: string;\n  throwOnError?: boolean;\n};\n\ntype RequireWeakResT<T> = T extends { default: infer D }\n  ? (D extends null | undefined ? T : D & Omit<T, 'default'>)\n  : T;\n\n/**\n * Requires the specified module without including it into the bundle during\n * Webpack build.\n * @param modulePath\n * @param [basePath]\n * @return Required module.\n */\nexport function requireWeak<T extends object>(\n  modulePath: string,\n\n  // TODO: For now `basePath` can be provided directly as a string here,\n  // for backward compatibility. Deprecate it in future, if any other\n  // breaking changes are done for requireWeak().\n  basePathOrOptions?: string | RequireWeakOptionsT,\n): RequireWeakResT<T> | null {\n  if (IS_CLIENT_SIDE) return null;\n\n  let basePath: string | undefined;\n  let ops: RequireWeakOptionsT;\n  if (typeof basePathOrOptions === 'string') {\n    basePath = basePathOrOptions;\n    ops = {};\n  } else {\n    ops = basePathOrOptions ?? {};\n    ({ basePath } = ops);\n  }\n\n  // TODO: On one hand, this try/catch wrap silencing errors is bad, as it may\n  // hide legit errors, in a way difficult to notice and understand; but on the\n  // other hand it fails for some (unclear, but legit?) reasons in some\n  // environments,\n  // like during the static code generation for docs. Perhaps, something should\n  // be implemented differently here.\n  try {\n    // eslint-disable-next-line no-eval\n    const req = eval('require') as (path: string) => unknown;\n\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const { resolve } = req('path') as typeof PathNS;\n\n    const path = basePath ? resolve(basePath, modulePath) : modulePath;\n    const module = req(path) as T;\n\n    if (!('default' in module) || !module.default) return module as RequireWeakResT<T>;\n\n    const { default: def, ...named } = module;\n\n    const res = def as RequireWeakResT<T>;\n\n    Object.entries(named).forEach(([name, value]) => {\n      const assigned = res[name as keyof RequireWeakResT<T>];\n      if (assigned) (res[name as keyof RequireWeakResT<T>] as unknown) = value;\n      else if (assigned !== value) {\n        throw Error('Conflict between default and named exports');\n      }\n    });\n    return res;\n  } catch (error) {\n    if (ops.throwOnError) throw error;\n    return null;\n  }\n}\n\n/**\n * Resolves specified module path with help of Babel's module resolver.\n * Yes, the function itself just returns its argument to the caller, but Babel\n * is configured to resolve the first argument of resolveWeak(..) function, thus\n * the result will be the resolved path.\n * @param {string} modulePath\n * @return {string} Absolute or relative path to the module.\n */\nexport function resolveWeak(modulePath: string): string {\n  return modulePath;\n}\n"],"mappings":";;;;;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CACzBC,UAAkB;AAElB;AACA;AACA;AACAC,iBAAgD,EACrB;EAC3B,IAAIC,yBAAc,EAAE,OAAO,IAAI;EAE/B,IAAIC,QAA4B;EAChC,IAAIC,GAAwB;EAC5B,IAAI,OAAOH,iBAAiB,KAAK,QAAQ,EAAE;IACzCE,QAAQ,GAAGF,iBAAiB;IAC5BG,GAAG,GAAG,CAAC,CAAC;EACV,CAAC,MAAM;IACLA,GAAG,GAAGH,iBAAiB,IAAI,CAAC,CAAC;IAC7B,CAAC;MAAEE;IAAS,CAAC,GAAGC,GAAG;EACrB;;EAEA;EACA;EACA;EACA;EACA;EACA;EACA,IAAI;IACF;IACA,MAAMC,GAAG,GAAGC,IAAI,CAAC,SAAS,CAA8B;;IAExD;IACA,MAAM;MAAEC;IAAQ,CAAC,GAAGF,GAAG,CAAC,MAAM,CAAkB;IAEhD,MAAMG,IAAI,GAAGL,QAAQ,GAAGI,OAAO,CAACJ,QAAQ,EAAEH,UAAU,CAAC,GAAGA,UAAU;IAClE,MAAMS,MAAM,GAAGJ,GAAG,CAACG,IAAI,CAAM;IAE7B,IAAI,EAAE,SAAS,IAAIC,MAAM,CAAC,IAAI,CAACA,MAAM,CAACC,OAAO,EAAE,OAAOD,MAAM;IAE5D,MAAM;MAAEC,OAAO,EAAEC,GAAG;MAAE,GAAGC;IAAM,CAAC,GAAGH,MAAM;IAEzC,MAAMI,GAAG,GAAGF,GAAyB;IAErCG,MAAM,CAACC,OAAO,CAACH,KAAK,CAAC,CAACI,OAAO,CAAC,CAAC,CAACC,IAAI,EAAEC,KAAK,CAAC,KAAK;MAC/C,MAAMC,QAAQ,GAAGN,GAAG,CAACI,IAAI,CAA6B;MACtD,IAAIE,QAAQ,EAAGN,GAAG,CAACI,IAAI,CAA6B,GAAeC,KAAK,CAAC,KACpE,IAAIC,QAAQ,KAAKD,KAAK,EAAE;QAC3B,MAAME,KAAK,CAAC,4CAA4C,CAAC;MAC3D;IACF,CAAC,CAAC;IACF,OAAOP,GAAG;EACZ,CAAC,CAAC,OAAOQ,KAAK,EAAE;IACd,IAAIjB,GAAG,CAACkB,YAAY,EAAE,MAAMD,KAAK;IACjC,OAAO,IAAI;EACb;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,WAAWA,CAACvB,UAAkB,EAAU;EACtD,OAAOA,UAAU;AACnB","ignoreList":[]}

package/build/development/web.bundle.js

@@ -26,7 +26,7 @@ return /******/ (function() { // webpackBootstrap
   \*****************************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
-eval("{/**\n * @license React\n * react-jsx-runtime.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n true &&\n  (function () {\n    function getComponentNameFromType(type) {\n      if (null == type) return null;\n      if (\"function\" === typeof type)\n        return type.$$typeof === REACT_CLIENT_REFERENCE\n          ? null\n          : type.displayName || type.name || null;\n      if (\"string\" === typeof type) return type;\n      switch (type) {\n        case REACT_FRAGMENT_TYPE:\n          return \"Fragment\";\n        case REACT_PROFILER_TYPE:\n          return \"Profiler\";\n        case REACT_STRICT_MODE_TYPE:\n          return \"StrictMode\";\n        case REACT_SUSPENSE_TYPE:\n          return \"Suspense\";\n        case REACT_SUSPENSE_LIST_TYPE:\n          return \"SuspenseList\";\n        case REACT_ACTIVITY_TYPE:\n          return \"Activity\";\n      }\n      if (\"object\" === typeof type)\n        switch (\n          (\"number\" === typeof type.tag &&\n            console.error(\n              \"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.\"\n            ),\n          type.$$typeof)\n        ) {\n          case REACT_PORTAL_TYPE:\n            return \"Portal\";\n          case REACT_CONTEXT_TYPE:\n            return (type.displayName || \"Context\") + \".Provider\";\n          case REACT_CONSUMER_TYPE:\n            return (type._context.displayName || \"Context\") + \".Consumer\";\n          case REACT_FORWARD_REF_TYPE:\n            var innerType = type.render;\n            type = type.displayName;\n            type ||\n              ((type = innerType.displayName || innerType.name || \"\"),\n              (type = \"\" !== type ? \"ForwardRef(\" + type + \")\" : \"ForwardRef\"));\n            return type;\n          case REACT_MEMO_TYPE:\n            return (\n              (innerType = type.displayName || null),\n              null !== innerType\n                ? innerType\n                : getComponentNameFromType(type.type) || \"Memo\"\n            );\n          case REACT_LAZY_TYPE:\n            innerType = type._payload;\n            type = type._init;\n            try {\n              return getComponentNameFromType(type(innerType));\n            } catch (x) {}\n        }\n      return null;\n    }\n    function testStringCoercion(value) {\n      return \"\" + value;\n    }\n    function checkKeyStringCoercion(value) {\n      try {\n        testStringCoercion(value);\n        var JSCompiler_inline_result = !1;\n      } catch (e) {\n        JSCompiler_inline_result = !0;\n      }\n      if (JSCompiler_inline_result) {\n        JSCompiler_inline_result = console;\n        var JSCompiler_temp_const = JSCompiler_inline_result.error;\n        var JSCompiler_inline_result$jscomp$0 =\n          (\"function\" === typeof Symbol &&\n            Symbol.toStringTag &&\n            value[Symbol.toStringTag]) ||\n          value.constructor.name ||\n          \"Object\";\n        JSCompiler_temp_const.call(\n          JSCompiler_inline_result,\n          \"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.\",\n          JSCompiler_inline_result$jscomp$0\n        );\n        return testStringCoercion(value);\n      }\n    }\n    function getTaskName(type) {\n      if (type === REACT_FRAGMENT_TYPE) return \"<>\";\n      if (\n        \"object\" === typeof type &&\n        null !== type &&\n        type.$$typeof === REACT_LAZY_TYPE\n      )\n        return \"<...>\";\n      try {\n        var name = getComponentNameFromType(type);\n        return name ? \"<\" + name + \">\" : \"<...>\";\n      } catch (x) {\n        return \"<...>\";\n      }\n    }\n    function getOwner() {\n      var dispatcher = ReactSharedInternals.A;\n      return null === dispatcher ? null : dispatcher.getOwner();\n    }\n    function UnknownOwner() {\n      return Error(\"react-stack-top-frame\");\n    }\n    function hasValidKey(config) {\n      if (hasOwnProperty.call(config, \"key\")) {\n        var getter = Object.getOwnPropertyDescriptor(config, \"key\").get;\n        if (getter && getter.isReactWarning) return !1;\n      }\n      return void 0 !== config.key;\n    }\n    function defineKeyPropWarningGetter(props, displayName) {\n      function warnAboutAccessingKey() {\n        specialPropKeyWarningShown ||\n          ((specialPropKeyWarningShown = !0),\n          console.error(\n            \"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)\",\n            displayName\n          ));\n      }\n      warnAboutAccessingKey.isReactWarning = !0;\n      Object.defineProperty(props, \"key\", {\n        get: warnAboutAccessingKey,\n        configurable: !0\n      });\n    }\n    function elementRefGetterWithDeprecationWarning() {\n      var componentName = getComponentNameFromType(this.type);\n      didWarnAboutElementRef[componentName] ||\n        ((didWarnAboutElementRef[componentName] = !0),\n        console.error(\n          \"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.\"\n        ));\n      componentName = this.props.ref;\n      return void 0 !== componentName ? componentName : null;\n    }\n    function ReactElement(\n      type,\n      key,\n      self,\n      source,\n      owner,\n      props,\n      debugStack,\n      debugTask\n    ) {\n      self = props.ref;\n      type = {\n        $$typeof: REACT_ELEMENT_TYPE,\n        type: type,\n        key: key,\n        props: props,\n        _owner: owner\n      };\n      null !== (void 0 !== self ? self : null)\n        ? Object.defineProperty(type, \"ref\", {\n            enumerable: !1,\n            get: elementRefGetterWithDeprecationWarning\n          })\n        : Object.defineProperty(type, \"ref\", { enumerable: !1, value: null });\n      type._store = {};\n      Object.defineProperty(type._store, \"validated\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: 0\n      });\n      Object.defineProperty(type, \"_debugInfo\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: null\n      });\n      Object.defineProperty(type, \"_debugStack\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: debugStack\n      });\n      Object.defineProperty(type, \"_debugTask\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: debugTask\n      });\n      Object.freeze && (Object.freeze(type.props), Object.freeze(type));\n      return type;\n    }\n    function jsxDEVImpl(\n      type,\n      config,\n      maybeKey,\n      isStaticChildren,\n      source,\n      self,\n      debugStack,\n      debugTask\n    ) {\n      var children = config.children;\n      if (void 0 !== children)\n        if (isStaticChildren)\n          if (isArrayImpl(children)) {\n            for (\n              isStaticChildren = 0;\n              isStaticChildren < children.length;\n              isStaticChildren++\n            )\n              validateChildKeys(children[isStaticChildren]);\n            Object.freeze && Object.freeze(children);\n          } else\n            console.error(\n              \"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.\"\n            );\n        else validateChildKeys(children);\n      if (hasOwnProperty.call(config, \"key\")) {\n        children = getComponentNameFromType(type);\n        var keys = Object.keys(config).filter(function (k) {\n          return \"key\" !== k;\n        });\n        isStaticChildren =\n          0 < keys.length\n            ? \"{key: someKey, \" + keys.join(\": ..., \") + \": ...}\"\n            : \"{key: someKey}\";\n        didWarnAboutKeySpread[children + isStaticChildren] ||\n          ((keys =\n            0 < keys.length ? \"{\" + keys.join(\": ..., \") + \": ...}\" : \"{}\"),\n          console.error(\n            'A props object containing a \"key\" prop is being spread into JSX:\\n  let props = %s;\\n  <%s {...props} />\\nReact keys must be passed directly to JSX without using spread:\\n  let props = %s;\\n  <%s key={someKey} {...props} />',\n            isStaticChildren,\n            children,\n            keys,\n            children\n          ),\n          (didWarnAboutKeySpread[children + isStaticChildren] = !0));\n      }\n      children = null;\n      void 0 !== maybeKey &&\n        (checkKeyStringCoercion(maybeKey), (children = \"\" + maybeKey));\n      hasValidKey(config) &&\n        (checkKeyStringCoercion(config.key), (children = \"\" + config.key));\n      if (\"key\" in config) {\n        maybeKey = {};\n        for (var propName in config)\n          \"key\" !== propName && (maybeKey[propName] = config[propName]);\n      } else maybeKey = config;\n      children &&\n        defineKeyPropWarningGetter(\n          maybeKey,\n          \"function\" === typeof type\n            ? type.displayName || type.name || \"Unknown\"\n            : type\n        );\n      return ReactElement(\n        type,\n        children,\n        self,\n        source,\n        getOwner(),\n        maybeKey,\n        debugStack,\n        debugTask\n      );\n    }\n    function validateChildKeys(node) {\n      \"object\" === typeof node &&\n        null !== node &&\n        node.$$typeof === REACT_ELEMENT_TYPE &&\n        node._store &&\n        (node._store.validated = 1);\n    }\n    var React = __webpack_require__(/*! react */ \"react\"),\n      REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n      REACT_PORTAL_TYPE = Symbol.for(\"react.portal\"),\n      REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\"),\n      REACT_STRICT_MODE_TYPE = Symbol.for(\"react.strict_mode\"),\n      REACT_PROFILER_TYPE = Symbol.for(\"react.profiler\");\n    Symbol.for(\"react.provider\");\n    var REACT_CONSUMER_TYPE = Symbol.for(\"react.consumer\"),\n      REACT_CONTEXT_TYPE = Symbol.for(\"react.context\"),\n      REACT_FORWARD_REF_TYPE = Symbol.for(\"react.forward_ref\"),\n      REACT_SUSPENSE_TYPE = Symbol.for(\"react.suspense\"),\n      REACT_SUSPENSE_LIST_TYPE = Symbol.for(\"react.suspense_list\"),\n      REACT_MEMO_TYPE = Symbol.for(\"react.memo\"),\n      REACT_LAZY_TYPE = Symbol.for(\"react.lazy\"),\n      REACT_ACTIVITY_TYPE = Symbol.for(\"react.activity\"),\n      REACT_CLIENT_REFERENCE = Symbol.for(\"react.client.reference\"),\n      ReactSharedInternals =\n        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,\n      hasOwnProperty = Object.prototype.hasOwnProperty,\n      isArrayImpl = Array.isArray,\n      createTask = console.createTask\n        ? console.createTask\n        : function () {\n            return null;\n          };\n    React = {\n      react_stack_bottom_frame: function (callStackForError) {\n        return callStackForError();\n      }\n    };\n    var specialPropKeyWarningShown;\n    var didWarnAboutElementRef = {};\n    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(\n      React,\n      UnknownOwner\n    )();\n    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));\n    var didWarnAboutKeySpread = {};\n    exports.Fragment = REACT_FRAGMENT_TYPE;\n    exports.jsx = function (type, config, maybeKey, source, self) {\n      var trackActualOwner =\n        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n      return jsxDEVImpl(\n        type,\n        config,\n        maybeKey,\n        !1,\n        source,\n        self,\n        trackActualOwner\n          ? Error(\"react-stack-top-frame\")\n          : unknownOwnerDebugStack,\n        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n      );\n    };\n    exports.jsxs = function (type, config, maybeKey, source, self) {\n      var trackActualOwner =\n        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n      return jsxDEVImpl(\n        type,\n        config,\n        maybeKey,\n        !0,\n        source,\n        self,\n        trackActualOwner\n          ? Error(\"react-stack-top-frame\")\n          : unknownOwnerDebugStack,\n        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n      );\n    };\n  })();\n\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./node_modules/react/cjs/react-jsx-runtime.development.js?\n}");
+eval("{/**\n * @license React\n * react-jsx-runtime.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n true &&\n  (function () {\n    function getComponentNameFromType(type) {\n      if (null == type) return null;\n      if (\"function\" === typeof type)\n        return type.$$typeof === REACT_CLIENT_REFERENCE\n          ? null\n          : type.displayName || type.name || null;\n      if (\"string\" === typeof type) return type;\n      switch (type) {\n        case REACT_FRAGMENT_TYPE:\n          return \"Fragment\";\n        case REACT_PROFILER_TYPE:\n          return \"Profiler\";\n        case REACT_STRICT_MODE_TYPE:\n          return \"StrictMode\";\n        case REACT_SUSPENSE_TYPE:\n          return \"Suspense\";\n        case REACT_SUSPENSE_LIST_TYPE:\n          return \"SuspenseList\";\n        case REACT_ACTIVITY_TYPE:\n          return \"Activity\";\n      }\n      if (\"object\" === typeof type)\n        switch (\n          (\"number\" === typeof type.tag &&\n            console.error(\n              \"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.\"\n            ),\n          type.$$typeof)\n        ) {\n          case REACT_PORTAL_TYPE:\n            return \"Portal\";\n          case REACT_CONTEXT_TYPE:\n            return type.displayName || \"Context\";\n          case REACT_CONSUMER_TYPE:\n            return (type._context.displayName || \"Context\") + \".Consumer\";\n          case REACT_FORWARD_REF_TYPE:\n            var innerType = type.render;\n            type = type.displayName;\n            type ||\n              ((type = innerType.displayName || innerType.name || \"\"),\n              (type = \"\" !== type ? \"ForwardRef(\" + type + \")\" : \"ForwardRef\"));\n            return type;\n          case REACT_MEMO_TYPE:\n            return (\n              (innerType = type.displayName || null),\n              null !== innerType\n                ? innerType\n                : getComponentNameFromType(type.type) || \"Memo\"\n            );\n          case REACT_LAZY_TYPE:\n            innerType = type._payload;\n            type = type._init;\n            try {\n              return getComponentNameFromType(type(innerType));\n            } catch (x) {}\n        }\n      return null;\n    }\n    function testStringCoercion(value) {\n      return \"\" + value;\n    }\n    function checkKeyStringCoercion(value) {\n      try {\n        testStringCoercion(value);\n        var JSCompiler_inline_result = !1;\n      } catch (e) {\n        JSCompiler_inline_result = !0;\n      }\n      if (JSCompiler_inline_result) {\n        JSCompiler_inline_result = console;\n        var JSCompiler_temp_const = JSCompiler_inline_result.error;\n        var JSCompiler_inline_result$jscomp$0 =\n          (\"function\" === typeof Symbol &&\n            Symbol.toStringTag &&\n            value[Symbol.toStringTag]) ||\n          value.constructor.name ||\n          \"Object\";\n        JSCompiler_temp_const.call(\n          JSCompiler_inline_result,\n          \"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.\",\n          JSCompiler_inline_result$jscomp$0\n        );\n        return testStringCoercion(value);\n      }\n    }\n    function getTaskName(type) {\n      if (type === REACT_FRAGMENT_TYPE) return \"<>\";\n      if (\n        \"object\" === typeof type &&\n        null !== type &&\n        type.$$typeof === REACT_LAZY_TYPE\n      )\n        return \"<...>\";\n      try {\n        var name = getComponentNameFromType(type);\n        return name ? \"<\" + name + \">\" : \"<...>\";\n      } catch (x) {\n        return \"<...>\";\n      }\n    }\n    function getOwner() {\n      var dispatcher = ReactSharedInternals.A;\n      return null === dispatcher ? null : dispatcher.getOwner();\n    }\n    function UnknownOwner() {\n      return Error(\"react-stack-top-frame\");\n    }\n    function hasValidKey(config) {\n      if (hasOwnProperty.call(config, \"key\")) {\n        var getter = Object.getOwnPropertyDescriptor(config, \"key\").get;\n        if (getter && getter.isReactWarning) return !1;\n      }\n      return void 0 !== config.key;\n    }\n    function defineKeyPropWarningGetter(props, displayName) {\n      function warnAboutAccessingKey() {\n        specialPropKeyWarningShown ||\n          ((specialPropKeyWarningShown = !0),\n          console.error(\n            \"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)\",\n            displayName\n          ));\n      }\n      warnAboutAccessingKey.isReactWarning = !0;\n      Object.defineProperty(props, \"key\", {\n        get: warnAboutAccessingKey,\n        configurable: !0\n      });\n    }\n    function elementRefGetterWithDeprecationWarning() {\n      var componentName = getComponentNameFromType(this.type);\n      didWarnAboutElementRef[componentName] ||\n        ((didWarnAboutElementRef[componentName] = !0),\n        console.error(\n          \"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.\"\n        ));\n      componentName = this.props.ref;\n      return void 0 !== componentName ? componentName : null;\n    }\n    function ReactElement(type, key, props, owner, debugStack, debugTask) {\n      var refProp = props.ref;\n      type = {\n        $$typeof: REACT_ELEMENT_TYPE,\n        type: type,\n        key: key,\n        props: props,\n        _owner: owner\n      };\n      null !== (void 0 !== refProp ? refProp : null)\n        ? Object.defineProperty(type, \"ref\", {\n            enumerable: !1,\n            get: elementRefGetterWithDeprecationWarning\n          })\n        : Object.defineProperty(type, \"ref\", { enumerable: !1, value: null });\n      type._store = {};\n      Object.defineProperty(type._store, \"validated\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: 0\n      });\n      Object.defineProperty(type, \"_debugInfo\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: null\n      });\n      Object.defineProperty(type, \"_debugStack\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: debugStack\n      });\n      Object.defineProperty(type, \"_debugTask\", {\n        configurable: !1,\n        enumerable: !1,\n        writable: !0,\n        value: debugTask\n      });\n      Object.freeze && (Object.freeze(type.props), Object.freeze(type));\n      return type;\n    }\n    function jsxDEVImpl(\n      type,\n      config,\n      maybeKey,\n      isStaticChildren,\n      debugStack,\n      debugTask\n    ) {\n      var children = config.children;\n      if (void 0 !== children)\n        if (isStaticChildren)\n          if (isArrayImpl(children)) {\n            for (\n              isStaticChildren = 0;\n              isStaticChildren < children.length;\n              isStaticChildren++\n            )\n              validateChildKeys(children[isStaticChildren]);\n            Object.freeze && Object.freeze(children);\n          } else\n            console.error(\n              \"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.\"\n            );\n        else validateChildKeys(children);\n      if (hasOwnProperty.call(config, \"key\")) {\n        children = getComponentNameFromType(type);\n        var keys = Object.keys(config).filter(function (k) {\n          return \"key\" !== k;\n        });\n        isStaticChildren =\n          0 < keys.length\n            ? \"{key: someKey, \" + keys.join(\": ..., \") + \": ...}\"\n            : \"{key: someKey}\";\n        didWarnAboutKeySpread[children + isStaticChildren] ||\n          ((keys =\n            0 < keys.length ? \"{\" + keys.join(\": ..., \") + \": ...}\" : \"{}\"),\n          console.error(\n            'A props object containing a \"key\" prop is being spread into JSX:\\n  let props = %s;\\n  <%s {...props} />\\nReact keys must be passed directly to JSX without using spread:\\n  let props = %s;\\n  <%s key={someKey} {...props} />',\n            isStaticChildren,\n            children,\n            keys,\n            children\n          ),\n          (didWarnAboutKeySpread[children + isStaticChildren] = !0));\n      }\n      children = null;\n      void 0 !== maybeKey &&\n        (checkKeyStringCoercion(maybeKey), (children = \"\" + maybeKey));\n      hasValidKey(config) &&\n        (checkKeyStringCoercion(config.key), (children = \"\" + config.key));\n      if (\"key\" in config) {\n        maybeKey = {};\n        for (var propName in config)\n          \"key\" !== propName && (maybeKey[propName] = config[propName]);\n      } else maybeKey = config;\n      children &&\n        defineKeyPropWarningGetter(\n          maybeKey,\n          \"function\" === typeof type\n            ? type.displayName || type.name || \"Unknown\"\n            : type\n        );\n      return ReactElement(\n        type,\n        children,\n        maybeKey,\n        getOwner(),\n        debugStack,\n        debugTask\n      );\n    }\n    function validateChildKeys(node) {\n      isValidElement(node)\n        ? node._store && (node._store.validated = 1)\n        : \"object\" === typeof node &&\n          null !== node &&\n          node.$$typeof === REACT_LAZY_TYPE &&\n          (\"fulfilled\" === node._payload.status\n            ? isValidElement(node._payload.value) &&\n              node._payload.value._store &&\n              (node._payload.value._store.validated = 1)\n            : node._store && (node._store.validated = 1));\n    }\n    function isValidElement(object) {\n      return (\n        \"object\" === typeof object &&\n        null !== object &&\n        object.$$typeof === REACT_ELEMENT_TYPE\n      );\n    }\n    var React = __webpack_require__(/*! react */ \"react\"),\n      REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n      REACT_PORTAL_TYPE = Symbol.for(\"react.portal\"),\n      REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\"),\n      REACT_STRICT_MODE_TYPE = Symbol.for(\"react.strict_mode\"),\n      REACT_PROFILER_TYPE = Symbol.for(\"react.profiler\"),\n      REACT_CONSUMER_TYPE = Symbol.for(\"react.consumer\"),\n      REACT_CONTEXT_TYPE = Symbol.for(\"react.context\"),\n      REACT_FORWARD_REF_TYPE = Symbol.for(\"react.forward_ref\"),\n      REACT_SUSPENSE_TYPE = Symbol.for(\"react.suspense\"),\n      REACT_SUSPENSE_LIST_TYPE = Symbol.for(\"react.suspense_list\"),\n      REACT_MEMO_TYPE = Symbol.for(\"react.memo\"),\n      REACT_LAZY_TYPE = Symbol.for(\"react.lazy\"),\n      REACT_ACTIVITY_TYPE = Symbol.for(\"react.activity\"),\n      REACT_CLIENT_REFERENCE = Symbol.for(\"react.client.reference\"),\n      ReactSharedInternals =\n        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,\n      hasOwnProperty = Object.prototype.hasOwnProperty,\n      isArrayImpl = Array.isArray,\n      createTask = console.createTask\n        ? console.createTask\n        : function () {\n            return null;\n          };\n    React = {\n      react_stack_bottom_frame: function (callStackForError) {\n        return callStackForError();\n      }\n    };\n    var specialPropKeyWarningShown;\n    var didWarnAboutElementRef = {};\n    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(\n      React,\n      UnknownOwner\n    )();\n    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));\n    var didWarnAboutKeySpread = {};\n    exports.Fragment = REACT_FRAGMENT_TYPE;\n    exports.jsx = function (type, config, maybeKey) {\n      var trackActualOwner =\n        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n      return jsxDEVImpl(\n        type,\n        config,\n        maybeKey,\n        !1,\n        trackActualOwner\n          ? Error(\"react-stack-top-frame\")\n          : unknownOwnerDebugStack,\n        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n      );\n    };\n    exports.jsxs = function (type, config, maybeKey) {\n      var trackActualOwner =\n        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n      return jsxDEVImpl(\n        type,\n        config,\n        maybeKey,\n        !0,\n        trackActualOwner\n          ? Error(\"react-stack-top-frame\")\n          : unknownOwnerDebugStack,\n        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n      );\n    };\n  })();\n\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./node_modules/react/cjs/react-jsx-runtime.development.js?\n}");
 
 /***/ }),
 
@@ -176,7 +176,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-ext
   \***********************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BaseModal: function() { return /* binding */ BaseModal; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _base_theme_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./base-theme.scss */ \"./src/shared/components/Modal/base-theme.scss\");\n/* harmony import */ var _styles_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styles.scss */ \"./src/shared/components/Modal/styles.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  overlayStyle,\n  style,\n  testId,\n  testIdForOverlay,\n  theme\n}) => {\n  const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const overlayRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [portal, setPortal] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const p = document.createElement('div');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.removeChild(p);\n    };\n  }, []);\n\n  // Sets up modal cancellation of scrolling, if opted-in.\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (cancelOnScrolling && onCancel) {\n      window.addEventListener('scroll', onCancel);\n      window.addEventListener('wheel', onCancel);\n    }\n    return () => {\n      if (cancelOnScrolling && onCancel) {\n        window.removeEventListener('scroll', onCancel);\n        window.removeEventListener('wheel', onCancel);\n      }\n    };\n  }, [cancelOnScrolling, onCancel]);\n\n  // Disables window scrolling, if it is not opted-out.\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(_styles_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(_styles_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\n  const focusLast = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"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    // TODO: Have a look at this later.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    ,\n    tabIndex: 0\n  }), []);\n  return portal ? /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal(/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {\n    children: [focusLast, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      \"aria-label\": \"Cancel\",\n      className: theme.overlay,\n      \"data-testid\":  false ? 0 : testIdForOverlay,\n      onClick: e => {\n        if (onCancel) {\n          onCancel();\n          e.stopPropagation();\n        }\n      },\n      onKeyDown: e => {\n        if (e.key === 'Escape' && onCancel) {\n          onCancel();\n          e.stopPropagation();\n        }\n      },\n      ref: node => {\n        if (node && node !== overlayRef.current) {\n          overlayRef.current = node;\n          node.focus();\n        }\n      },\n      role: \"button\",\n      style: overlayStyle,\n      tabIndex: 0\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n      \"aria-modal\": \"true\",\n      className: theme.container,\n      \"data-testid\":  false ? 0 : testId,\n      onClick: e => {\n        e.stopPropagation();\n      },\n      onWheel: event => {\n        event.stopPropagation();\n      },\n      ref: containerRef,\n      role: \"dialog\",\n      style: style ?? containerStyle,\n      children: children\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      onFocus: () => {\n        overlayRef.current?.focus();\n      }\n      // TODO: Have a look at this later.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      ,\n      tabIndex: 0\n    }), focusLast]\n  }), portal) : null;\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default()(BaseModal, 'Modal', _base_theme_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"]));\n\n/* Non-themed version of the Modal. */\n\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/Modal/index.tsx?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BaseModal: function() { return /* binding */ BaseModal; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _base_theme_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./base-theme.scss */ \"./src/shared/components/Modal/base-theme.scss\");\n/* harmony import */ var _styles_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styles.scss */ \"./src/shared/components/Modal/styles.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  overlayStyle,\n  style,\n  testId,\n  testIdForOverlay,\n  theme\n}) => {\n  const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const overlayRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n  // Sets up modal cancellation of scrolling, if opted-in.\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (cancelOnScrolling && onCancel) {\n      window.addEventListener('scroll', onCancel);\n      window.addEventListener('wheel', onCancel);\n    }\n    return () => {\n      if (cancelOnScrolling && onCancel) {\n        window.removeEventListener('scroll', onCancel);\n        window.removeEventListener('wheel', onCancel);\n      }\n    };\n  }, [cancelOnScrolling, onCancel]);\n\n  // Disables window scrolling, if it is not opted-out.\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(_styles_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(_styles_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\n  const focusLast = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"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    // TODO: Have a look at this later.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    ,\n    tabIndex: 0\n  }), []);\n  return /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal(/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(\"div\", {\n    children: [focusLast, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      \"aria-label\": \"Cancel\",\n      className: theme.overlay,\n      \"data-testid\":  false ? 0 : testIdForOverlay,\n      onClick: e => {\n        if (onCancel) {\n          onCancel();\n          e.stopPropagation();\n        }\n      },\n      onKeyDown: e => {\n        if (e.key === 'Escape' && onCancel) {\n          onCancel();\n          e.stopPropagation();\n        }\n      },\n      ref: node => {\n        if (node && node !== overlayRef.current) {\n          overlayRef.current = node;\n          node.focus();\n        }\n      },\n      role: \"button\",\n      style: overlayStyle,\n      tabIndex: 0\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n      \"aria-modal\": \"true\",\n      className: theme.container,\n      \"data-testid\":  false ? 0 : testId,\n      onClick: e => {\n        e.stopPropagation();\n      },\n      onWheel: event => {\n        event.stopPropagation();\n      },\n      ref: containerRef,\n      role: \"dialog\",\n      style: style ?? containerStyle,\n      children: children\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      onFocus: () => {\n        overlayRef.current?.focus();\n      }\n      // TODO: Have a look at this later.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      ,\n      tabIndex: 0\n    }), focusLast]\n  }), document.body);\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default()(BaseModal, 'Modal', _base_theme_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"]));\n\n/* Non-themed version of the Modal. */\n\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/Modal/index.tsx?\n}");
 
 /***/ }),
 
@@ -260,13 +260,13 @@ eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-ext
 
 /***/ }),
 
-/***/ "./src/shared/components/WithTooltip/Tooltip.ts":
-/*!******************************************************!*\
-  !*** ./src/shared/components/WithTooltip/Tooltip.ts ***!
-  \******************************************************/
+/***/ "./src/shared/components/WithTooltip/Tooltip.tsx":
+/*!*******************************************************!*\
+  !*** ./src/shared/components/WithTooltip/Tooltip.tsx ***!
+  \*******************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PLACEMENTS: function() { return /* binding */ PLACEMENTS; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/**\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\n\n\n/**\n * Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport.\n */\nlet PLACEMENTS = /*#__PURE__*/function (PLACEMENTS) {\n  PLACEMENTS[\"ABOVE_CURSOR\"] = \"ABOVE_CURSOR\";\n  PLACEMENTS[\"ABOVE_ELEMENT\"] = \"ABOVE_ELEMENT\";\n  PLACEMENTS[\"BELOW_CURSOR\"] = \"BELOW_CURSOR\";\n  PLACEMENTS[\"BELOW_ELEMENT\"] = \"BELOW_ELEMENT\";\n  return PLACEMENTS;\n}({});\nconst ARROW_STYLE_DOWN = ['border-bottom-color:transparent', 'border-left-color:transparent', 'border-right-color:transparent'].join(';');\nconst ARROW_STYLE_UP = ['border-top-color:transparent', 'border-left-color:transparent', 'border-right-color:transparent'].join(';');\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  const content = document.createElement('div');\n  if (theme.content) content.setAttribute('class', theme.content);\n  const container = document.createElement('div');\n  if (theme.container) container.setAttribute('class', theme.container);\n  container.appendChild(arrow);\n  container.appendChild(content);\n  document.body.appendChild(container);\n  return {\n    arrow,\n    container,\n    content\n  };\n}\n/**\n * Generates bounding client rectangles for tooltip components.\n * @ignore\n * @param tooltip DOM references to the tooltip components.\n * @param tooltip.arrow\n * @param tooltip.container\n * @return 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 {\n    scrollX,\n    scrollY\n  } = window;\n  const {\n    documentElement: {\n      clientHeight,\n      clientWidth\n    }\n  } = document;\n  return {\n    bottom: scrollY + clientHeight,\n    left: scrollX,\n    right: scrollX + clientWidth,\n    top: scrollY\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 {\n    arrow,\n    container\n  } = 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    // 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// const HIT = {\n//   NONE: false,\n//   LEFT: 'LEFT',\n//   RIGHT: 'RIGHT',\n//   TOP: 'TOP',\n//   BOTTOM: 'BOTTOM',\n// };\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n// function 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 * 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// function 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 * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param pageX\n * @param pageY\n * @param placement\n * @param element DOM reference to the element wrapped by the tooltip.\n * @param tooltip\n * @param tooltip.arrow DOM reference to the tooltip arrow.\n * @param tooltip.container DOM reference to the tooltip container.\n */\nfunction setComponentPositions(pageX, pageY, placement, element, tooltip) {\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  if (pos.containerX < viewportRect.left + 6) {\n    pos.containerX = viewportRect.left + 6;\n    pos.arrowX = Math.max(6, pageX - pos.containerX - tooltipRects.arrow.width / 2);\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(tooltipRects.container.width - 6, pageX - pos.containerX - tooltipRects.arrow.width / 2);\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 + 2 * tooltipRects.arrow.height;\n    pos.arrowY -= tooltipRects.container.height + tooltipRects.arrow.height;\n    pos.baseArrowStyle = ARROW_STYLE_UP;\n  }\n  const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;\n  tooltip.container.setAttribute('style', containerStyle);\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 = ({\n  children,\n  ref,\n  theme\n}) => {\n  // NOTE: The way it has to be implemented, for clean mounting and unmounting\n  // at the client side, the <Tooltip> is fully mounted into DOM in the next\n  // rendering cycles, and only then it can be correctly measured and positioned.\n  // Thus, when we create the <Tooltip> we have to record its target positioning\n  // details, and then apply them when it is created.\n\n  const {\n    current: heap\n  } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({\n    lastElement: undefined,\n    lastPageX: 0,\n    lastPageY: 0,\n    lastPlacement: undefined\n  });\n  const [components, setComponents] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  const pointTo = (pageX, pageY, placement, element) => {\n    heap.lastElement = element;\n    heap.lastPageX = pageX;\n    heap.lastPageY = pageY;\n    heap.lastPlacement = placement;\n    if (components) {\n      setComponentPositions(pageX, pageY, placement, element, components);\n    }\n  };\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(ref, () => ({\n    pointTo\n  }));\n\n  /* Inits and destroys tooltip components. */\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const x = createTooltipComponents(theme);\n    setComponents(x);\n    return () => {\n      document.body.removeChild(x.container);\n      setComponents(null);\n    };\n  }, [theme]);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (components) {\n      setComponentPositions(heap.lastPageX, heap.lastPageY, heap.lastPlacement, heap.lastElement, components);\n    }\n  }, [components,\n  // BEWARE: Careful about these dependencies - they are updated when mouse\n  // is moved over the tool-tipped element, thus potentially may cause\n  // unnecessary firing of this effect on each mouse event. It does not\n  // happen now just because the mouse movements themselves are not causing\n  // the component re-rendering, thus dependencies of this effect are not\n  // really re-evaluated.\n  heap.lastPageX, heap.lastPageY, heap.lastPlacement, heap.lastElement]);\n  return components ? /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, components.content) : null;\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tooltip);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/WithTooltip/Tooltip.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PLACEMENTS: function() { return /* binding */ PLACEMENTS; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/**\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\n\n\n\n/**\n * Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport.\n */\nlet PLACEMENTS = /*#__PURE__*/function (PLACEMENTS) {\n  PLACEMENTS[\"ABOVE_CURSOR\"] = \"ABOVE_CURSOR\";\n  PLACEMENTS[\"ABOVE_ELEMENT\"] = \"ABOVE_ELEMENT\";\n  PLACEMENTS[\"BELOW_CURSOR\"] = \"BELOW_CURSOR\";\n  PLACEMENTS[\"BELOW_ELEMENT\"] = \"BELOW_ELEMENT\";\n  return PLACEMENTS;\n}({});\nconst ARROW_STYLE_DOWN = ['border-bottom-color:transparent', 'border-left-color:transparent', 'border-right-color:transparent'].join(';');\nconst ARROW_STYLE_UP = ['border-top-color:transparent', 'border-left-color:transparent', 'border-right-color:transparent'].join(';');\n/**\n * Generates bounding client rectangles for tooltip components.\n * @ignore\n * @param tooltip DOM references to the tooltip components.\n * @param tooltip.arrow\n * @param tooltip.container\n * @return 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 {\n    scrollX,\n    scrollY\n  } = window;\n  const {\n    documentElement: {\n      clientHeight,\n      clientWidth\n    }\n  } = document;\n  return {\n    bottom: scrollY + clientHeight,\n    left: scrollX,\n    right: scrollX + clientWidth,\n    top: scrollY\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 {\n    arrow,\n    container\n  } = 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    // 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// const HIT = {\n//   NONE: false,\n//   LEFT: 'LEFT',\n//   RIGHT: 'RIGHT',\n//   TOP: 'TOP',\n//   BOTTOM: 'BOTTOM',\n// };\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n// function 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 * 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// function 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 * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param pageX\n * @param pageY\n * @param placement\n * @param element DOM reference to the element wrapped by the tooltip.\n * @param tooltip\n * @param tooltip.arrow DOM reference to the tooltip arrow.\n * @param tooltip.container DOM reference to the tooltip container.\n */\nfunction setComponentPositions(pageX, pageY, placement, element, tooltip) {\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  if (pos.containerX < viewportRect.left + 6) {\n    pos.containerX = viewportRect.left + 6;\n    pos.arrowX = Math.max(6, pageX - pos.containerX - tooltipRects.arrow.width / 2);\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(tooltipRects.container.width - 6, pageX - pos.containerX - tooltipRects.arrow.width / 2);\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 + 2 * tooltipRects.arrow.height;\n    pos.arrowY -= tooltipRects.container.height + tooltipRects.arrow.height;\n    pos.baseArrowStyle = ARROW_STYLE_UP;\n  }\n  const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;\n  tooltip.container.setAttribute('style', containerStyle);\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 = ({\n  children,\n  ref,\n  theme\n}) => {\n  // NOTE: The way it has to be implemented, for clean mounting and unmounting\n  // at the client side, the <Tooltip> is fully mounted into DOM in the next\n  // rendering cycles, and only then it can be correctly measured and positioned.\n  // Thus, when we create the <Tooltip> we have to record its target positioning\n  // details, and then apply them when it is created.\n\n  const arrowRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const contentRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const pointTo = (pageX, pageY, placement, element) => {\n    if (!arrowRef.current || !containerRef.current || !contentRef.current) {\n      throw Error('Internal error');\n    }\n    setComponentPositions(pageX, pageY, placement, element, {\n      arrow: arrowRef.current,\n      container: containerRef.current,\n      content: contentRef.current\n    });\n  };\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(ref, () => ({\n    pointTo\n  }));\n  return /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"div\", {\n    className: theme.container,\n    ref: containerRef,\n    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"div\", {\n      className: theme.arrow,\n      ref: arrowRef\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"div\", {\n      className: theme.content,\n      ref: contentRef,\n      children: children\n    })]\n  }), document.body);\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Tooltip);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/WithTooltip/Tooltip.tsx?\n}");
 
 /***/ }),
 
@@ -286,7 +286,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-ext
   \*****************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Tooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Tooltip */ \"./src/shared/components/WithTooltip/Tooltip.ts\");\n/* harmony import */ var _default_theme_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./default-theme.scss */ \"./src/shared/components/WithTooltip/default-theme.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* global window */\n\n\n\n\n\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 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 */\nconst Wrapper = ({\n  children,\n  placement = _Tooltip__WEBPACK_IMPORTED_MODULE_2__.PLACEMENTS.ABOVE_CURSOR,\n  tip,\n  theme\n}) => {\n  const {\n    current: heap\n  } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({\n    lastCursorX: 0,\n    lastCursorY: 0,\n    timerId: undefined,\n    triggeredByTouch: false\n  });\n  const tooltipRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [showTooltip, setShowTooltip] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const updatePortalPosition = (cursorX, cursorY) => {\n    if (showTooltip) {\n      const wrapperRect = wrapperRef.current.getBoundingClientRect();\n      if (cursorX < wrapperRect.left || cursorX > wrapperRect.right || cursorY < wrapperRect.top || cursorY > wrapperRect.bottom) {\n        setShowTooltip(false);\n      } else if (tooltipRef.current) {\n        tooltipRef.current.pointTo(cursorX + window.scrollX, cursorY + window.scrollY, placement, wrapperRef.current);\n      }\n    } else {\n      heap.lastCursorX = cursorX;\n      heap.lastCursorY = cursorY;\n\n      // If tooltip was triggered by a touch, we delay its opening by a bit,\n      // to ensure it was not a touch-click - in the case of touch click we\n      // want to do the click, rather than show the tooltip, and the delay\n      // gives click handler a chance to abort the tooltip openning.\n      if (heap.triggeredByTouch) {\n        heap.timerId ??= setTimeout(() => {\n          heap.triggeredByTouch = false;\n          heap.timerId = undefined;\n          setShowTooltip(true);\n        }, 300);\n\n        // Otherwise we can just open the tooltip right away.\n      } else setShowTooltip(true);\n    }\n  };\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (showTooltip && tip !== null) {\n      // This is necessary to ensure that even when a single mouse event\n      // arrives to a tool-tipped component, the tooltip is correctly positioned\n      // once opened (because similar call above does not have effect until\n      // the tooltip is fully mounted, and that is delayed to future rendering\n      // cycle due to the implementation).\n      if (tooltipRef.current) {\n        tooltipRef.current.pointTo(heap.lastCursorX + window.scrollX, heap.lastCursorY + window.scrollY, placement, wrapperRef.current);\n      }\n      const listener = () => {\n        setShowTooltip(false);\n      };\n      window.addEventListener('scroll', listener);\n      return () => {\n        window.removeEventListener('scroll', listener);\n      };\n    }\n    return undefined;\n  }, [heap.lastCursorX, heap.lastCursorY, placement, showTooltip, tip]);\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n    className: theme.wrapper,\n    onClick: () => {\n      if (heap.timerId) {\n        clearTimeout(heap.timerId);\n        heap.timerId = undefined;\n        heap.triggeredByTouch = false;\n      }\n    },\n    onMouseLeave: () => {\n      setShowTooltip(false);\n    },\n    onMouseMove: e => {\n      updatePortalPosition(e.clientX, e.clientY);\n    },\n    onTouchStart: () => {\n      heap.triggeredByTouch = true;\n    },\n    ref: wrapperRef,\n    role: \"presentation\",\n    children: [showTooltip && tip !== null ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Tooltip__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      ref: tooltipRef,\n      theme: theme,\n      children: tip\n    }) : null, children]\n  });\n};\nconst ThemedWrapper = _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default()(Wrapper, 'WithTooltip', _default_theme_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\nconst e = ThemedWrapper;\ne.PLACEMENTS = _Tooltip__WEBPACK_IMPORTED_MODULE_2__.PLACEMENTS;\n/* harmony default export */ __webpack_exports__[\"default\"] = (e);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/WithTooltip/index.tsx?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Tooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Tooltip */ \"./src/shared/components/WithTooltip/Tooltip.tsx\");\n/* harmony import */ var _default_theme_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./default-theme.scss */ \"./src/shared/components/WithTooltip/default-theme.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* global window */\n\n\n\n\n\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 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 */\nconst Wrapper = ({\n  children,\n  placement = _Tooltip__WEBPACK_IMPORTED_MODULE_2__.PLACEMENTS.ABOVE_CURSOR,\n  tip,\n  theme\n}) => {\n  const {\n    current: heap\n  } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({\n    lastCursorX: 0,\n    lastCursorY: 0,\n    timerId: undefined,\n    triggeredByTouch: false\n  });\n  const tooltipRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [showTooltip, setShowTooltip] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const updatePortalPosition = (cursorX, cursorY) => {\n    if (showTooltip) {\n      const wrapperRect = wrapperRef.current.getBoundingClientRect();\n      if (cursorX < wrapperRect.left || cursorX > wrapperRect.right || cursorY < wrapperRect.top || cursorY > wrapperRect.bottom) {\n        setShowTooltip(false);\n      } else if (tooltipRef.current) {\n        tooltipRef.current.pointTo(cursorX + window.scrollX, cursorY + window.scrollY, placement, wrapperRef.current);\n      }\n    } else {\n      heap.lastCursorX = cursorX;\n      heap.lastCursorY = cursorY;\n\n      // If tooltip was triggered by a touch, we delay its opening by a bit,\n      // to ensure it was not a touch-click - in the case of touch click we\n      // want to do the click, rather than show the tooltip, and the delay\n      // gives click handler a chance to abort the tooltip openning.\n      if (heap.triggeredByTouch) {\n        heap.timerId ??= setTimeout(() => {\n          heap.triggeredByTouch = false;\n          heap.timerId = undefined;\n          setShowTooltip(true);\n        }, 300);\n\n        // Otherwise we can just open the tooltip right away.\n      } else setShowTooltip(true);\n    }\n  };\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (showTooltip && tip !== null) {\n      // This is necessary to ensure that even when a single mouse event\n      // arrives to a tool-tipped component, the tooltip is correctly positioned\n      // once opened (because similar call above does not have effect until\n      // the tooltip is fully mounted, and that is delayed to future rendering\n      // cycle due to the implementation).\n      if (tooltipRef.current) {\n        tooltipRef.current.pointTo(heap.lastCursorX + window.scrollX, heap.lastCursorY + window.scrollY, placement, wrapperRef.current);\n      }\n      const listener = () => {\n        setShowTooltip(false);\n      };\n      window.addEventListener('scroll', listener);\n      return () => {\n        window.removeEventListener('scroll', listener);\n      };\n    }\n    return undefined;\n  }, [heap.lastCursorX, heap.lastCursorY, placement, showTooltip, tip]);\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n    className: theme.wrapper,\n    onClick: () => {\n      if (heap.timerId) {\n        clearTimeout(heap.timerId);\n        heap.timerId = undefined;\n        heap.triggeredByTouch = false;\n      }\n    },\n    onMouseLeave: () => {\n      setShowTooltip(false);\n    },\n    onMouseMove: e => {\n      updatePortalPosition(e.clientX, e.clientY);\n    },\n    onTouchStart: () => {\n      heap.triggeredByTouch = true;\n    },\n    ref: wrapperRef,\n    role: \"presentation\",\n    children: [showTooltip && tip !== null ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Tooltip__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      ref: tooltipRef,\n      theme: theme,\n      children: tip\n    }) : null, children]\n  });\n};\nconst ThemedWrapper = _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default()(Wrapper, 'WithTooltip', _default_theme_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\nconst e = ThemedWrapper;\ne.PLACEMENTS = _Tooltip__WEBPACK_IMPORTED_MODULE_2__.PLACEMENTS;\n/* harmony default export */ __webpack_exports__[\"default\"] = (e);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/WithTooltip/index.tsx?\n}");
 
 /***/ }),
 
@@ -516,7 +516,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   requireWeak: function() { return /* binding */ requireWeak; },\n/* harmony export */   resolveWeak: function() { return /* binding */ resolveWeak; }\n/* harmony export */ });\n/* harmony import */ var _isomorphy__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./isomorphy */ \"./src/shared/utils/isomorphy/index.ts\");\n\n/**\n * Requires the specified module without including it into the bundle during\n * Webpack build.\n * @param modulePath\n * @param [basePath]\n * @return Required module.\n */\nfunction requireWeak(modulePath, basePath) {\n  if (_isomorphy__WEBPACK_IMPORTED_MODULE_0__.IS_CLIENT_SIDE) return null;\n\n  // TODO: On one hand, this try/catch wrap silencing errors is bad, as it may\n  // hide legit errors, in a way difficult to notice and understand; but on the\n  // other hand it fails for some (unclear, but legit?) reasons in some\n  // environments,\n  // like during the static code generation for docs. Perhaps, something should\n  // be implemented differently here.\n  try {\n    // eslint-disable-next-line no-eval\n    const req = eval('require');\n\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const {\n      resolve\n    } = req('path');\n    const path = basePath ? resolve(basePath, modulePath) : modulePath;\n    const module = req(path);\n    if (!('default' in module) || !module.default) return module;\n    const {\n      default: def,\n      ...named\n    } = module;\n    const res = def;\n    Object.entries(named).forEach(([name, value]) => {\n      const assigned = res[name];\n      if (assigned) res[name] = value;else if (assigned !== value) {\n        throw Error('Conflict between default and named exports');\n      }\n    });\n    return res;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Resolves specified module path with help of Babel's module resolver.\n * Yes, the function itself just returns its argument to the caller, but Babel\n * is configured to resolve the first argument of resolveWeak(..) function, thus\n * the result will be the resolved path.\n * @param {string} modulePath\n * @return {string} Absolute or relative path to the module.\n */\nfunction resolveWeak(modulePath) {\n  return modulePath;\n}\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/utils/webpack.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   requireWeak: function() { return /* binding */ requireWeak; },\n/* harmony export */   resolveWeak: function() { return /* binding */ resolveWeak; }\n/* harmony export */ });\n/* harmony import */ var _isomorphy__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./isomorphy */ \"./src/shared/utils/isomorphy/index.ts\");\n\n/**\n * Requires the specified module without including it into the bundle during\n * Webpack build.\n * @param modulePath\n * @param [basePath]\n * @return Required module.\n */\nfunction requireWeak(modulePath,\n// TODO: For now `basePath` can be provided directly as a string here,\n// for backward compatibility. Deprecate it in future, if any other\n// breaking changes are done for requireWeak().\nbasePathOrOptions) {\n  if (_isomorphy__WEBPACK_IMPORTED_MODULE_0__.IS_CLIENT_SIDE) return null;\n  let basePath;\n  let ops;\n  if (typeof basePathOrOptions === 'string') {\n    basePath = basePathOrOptions;\n    ops = {};\n  } else {\n    ops = basePathOrOptions ?? {};\n    ({\n      basePath\n    } = ops);\n  }\n\n  // TODO: On one hand, this try/catch wrap silencing errors is bad, as it may\n  // hide legit errors, in a way difficult to notice and understand; but on the\n  // other hand it fails for some (unclear, but legit?) reasons in some\n  // environments,\n  // like during the static code generation for docs. Perhaps, something should\n  // be implemented differently here.\n  try {\n    // eslint-disable-next-line no-eval\n    const req = eval('require');\n\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const {\n      resolve\n    } = req('path');\n    const path = basePath ? resolve(basePath, modulePath) : modulePath;\n    const module = req(path);\n    if (!('default' in module) || !module.default) return module;\n    const {\n      default: def,\n      ...named\n    } = module;\n    const res = def;\n    Object.entries(named).forEach(([name, value]) => {\n      const assigned = res[name];\n      if (assigned) res[name] = value;else if (assigned !== value) {\n        throw Error('Conflict between default and named exports');\n      }\n    });\n    return res;\n  } catch (error) {\n    if (ops.throwOnError) throw error;\n    return null;\n  }\n}\n\n/**\n * Resolves specified module path with help of Babel's module resolver.\n * Yes, the function itself just returns its argument to the caller, but Babel\n * is configured to resolve the first argument of resolveWeak(..) function, thus\n * the result will be the resolved path.\n * @param {string} modulePath\n * @return {string} Absolute or relative path to the module.\n */\nfunction resolveWeak(modulePath) {\n  return modulePath;\n}\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/utils/webpack.ts?\n}");
 
 /***/ }),
 

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

@@ -8,12 +8,12 @@
  * clicks outside the modal, or presses Escape. It is expected to hide the
  * modal.
  * @param {ModalTheme} [props.theme] _Ad hoc_ theme.
- */const BaseModal=({cancelOnScrolling,children,containerStyle,dontDisableScrolling,onCancel,overlayStyle,style,testId,testIdForOverlay,theme})=>{const containerRef=(0,_react.useRef)(null);const overlayRef=(0,_react.useRef)(null);const[portal,setPortal]=(0,_react.useState)();(0,_react.useEffect)(()=>{const p=document.createElement("div");document.body.appendChild(p);setPortal(p);return()=>{document.body.removeChild(p)}},[]);// Sets up modal cancellation of scrolling, if opted-in.
+ */const BaseModal=({cancelOnScrolling,children,containerStyle,dontDisableScrolling,onCancel,overlayStyle,style,testId,testIdForOverlay,theme})=>{const containerRef=(0,_react.useRef)(null);const overlayRef=(0,_react.useRef)(null);// Sets up modal cancellation of scrolling, if opted-in.
 (0,_react.useEffect)(()=>{if(cancelOnScrolling&&onCancel){window.addEventListener("scroll",onCancel);window.addEventListener("wheel",onCancel)}return()=>{if(cancelOnScrolling&&onCancel){window.removeEventListener("scroll",onCancel);window.removeEventListener("wheel",onCancel)}}},[cancelOnScrolling,onCancel]);// Disables window scrolling, if it is not opted-out.
 (0,_react.useEffect)(()=>{if(!dontDisableScrolling){document.body.classList.add(S.scrollingDisabledByModal)}return()=>{if(!dontDisableScrolling){document.body.classList.remove(S.scrollingDisabledByModal)}}},[dontDisableScrolling]);const focusLast=(0,_react.useMemo)(()=>/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{onFocus:()=>{const elems=containerRef.current.querySelectorAll("*");for(let i=elems.length-1;i>=0;--i){elems[i].focus();if(document.activeElement===elems[i])return}overlayRef.current?.focus()}// TODO: Have a look at this later.
 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-,tabIndex:0}),[]);return portal?/*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[focusLast,/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{"aria-label":"Cancel",className:theme.overlay,"data-testid":process.env.NODE_ENV==="production"?undefined:testIdForOverlay,onClick:e=>{if(onCancel){onCancel();e.stopPropagation()}},onKeyDown:e=>{if(e.key==="Escape"&&onCancel){onCancel();e.stopPropagation()}},ref:node=>{if(node&&node!==overlayRef.current){overlayRef.current=node;node.focus()}},role:"button",style:overlayStyle,tabIndex:0}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{// eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+,tabIndex:0}),[]);return/*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{children:[focusLast,/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{"aria-label":"Cancel",className:theme.overlay,"data-testid":process.env.NODE_ENV==="production"?undefined:testIdForOverlay,onClick:e=>{if(onCancel){onCancel();e.stopPropagation()}},onKeyDown:e=>{if(e.key==="Escape"&&onCancel){onCancel();e.stopPropagation()}},ref:node=>{if(node&&node!==overlayRef.current){overlayRef.current=node;node.focus()}},role:"button",style:overlayStyle,tabIndex:0}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{// eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
 "aria-modal":"true",className:theme.container,"data-testid":process.env.NODE_ENV==="production"?undefined:testId,onClick:e=>{e.stopPropagation()},onWheel:event=>{event.stopPropagation()},ref:containerRef,role:"dialog",style:style??containerStyle,children:children}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{onFocus:()=>{overlayRef.current?.focus()}// TODO: Have a look at this later.
 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-,tabIndex:0}),focusLast]}),portal):null};exports.BaseModal=BaseModal;var _default=exports.default=(0,_reactThemes.default)(BaseModal,"Modal",baseTheme);/* Non-themed version of the Modal. */
+,tabIndex:0}),focusLast]}),document.body)};exports.BaseModal=BaseModal;var _default=exports.default=(0,_reactThemes.default)(BaseModal,"Modal",baseTheme);/* Non-themed version of the Modal. */
 //# sourceMappingURL=index.js.map