@dr.pogodin/react-utils 1.46.2 → 1.47.0-alpha.1

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

@@ -0,0 +1,106 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import themed from '@dr.pogodin/react-themes';
+import defaultTheme from "./style.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TextArea = ({
+  disabled,
+  error,
+  label,
+  onBlur,
+  onChange,
+  onKeyDown,
+  placeholder,
+  testId,
+  theme,
+  value
+}) => {
+  const hiddenAreaRef = useRef(null);
+  const [height, setHeight] = useState();
+  const textAreaRef = useRef(null);
+  const [localValue, setLocalValue] = useState(value ?? '');
+  if (value !== undefined && localValue !== value) setLocalValue(value);
+
+  // This resizes text area's height when its width is changed for any reason.
+  useEffect(() => {
+    const el = hiddenAreaRef.current;
+    if (!el) return undefined;
+    const cb = () => {
+      setHeight(el.scrollHeight);
+    };
+    const observer = new ResizeObserver(cb);
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // Resizes the text area when its content is modified.
+  //
+  // NOTE: useLayoutEffect() instead of useEffect() makes difference here,
+  // as it helps to avoid visible "content/height" jumps (i.e. with just
+  // useEffect() it becomes visible how the content is modified first,
+  // and then input height is incremented, if necessary).
+  // See: https://github.com/birdofpreyru/react-utils/issues/313
+  useLayoutEffect(() => {
+    const el = hiddenAreaRef.current;
+    if (el) setHeight(el.scrollHeight);
+  }, [localValue]);
+  let containerClassName = theme.container;
+  if (error) containerClassName += ` ${theme.error}`;
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassName,
+    onFocus: () => {
+      textAreaRef.current?.focus();
+    },
+    children: [label === undefined ? null : /*#__PURE__*/_jsx("div", {
+      className: theme.label,
+      children: label
+    }), /*#__PURE__*/_jsx("textarea", {
+      className: `${theme.textarea} ${theme.hidden}`
+
+      // This text area is hidden underneath the primary one below,
+      // and it is used for text measurements, to implement auto-scaling
+      // of the primary textarea's height.
+      ,
+      readOnly: true,
+      ref: hiddenAreaRef
+
+      // The "-1" value of "tabIndex" removes this hidden text area from
+      // the tab-focus-chain.
+      ,
+      tabIndex: -1
+
+      // NOTE: With empty string value ("") the scrolling height of this text
+      // area is zero, thus collapsing <TextArea> height below the single line
+      // input height. To avoid it we fallback to whitespace (" ") character
+      // here.
+      ,
+      value: localValue || ' '
+    }), /*#__PURE__*/_jsx("textarea", {
+      className: theme.textarea,
+      "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
+      disabled: disabled,
+      onBlur: onBlur
+
+      // When value is "undefined" the text area is not-managed, and we should
+      // manage it internally for the measurement / resizing functionality
+      // to work.
+      ,
+      onChange: value === undefined ? e => {
+        setLocalValue(e.target.value);
+      } : onChange,
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      ref: textAreaRef,
+      style: {
+        height
+      },
+      value: localValue
+    }), error && error !== true ? /*#__PURE__*/_jsx("div", {
+      className: theme.errorMessage,
+      children: error
+    }) : null]
+  });
+};
+export default themed(TextArea, 'TextArea', defaultTheme);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useEffect","useLayoutEffect","useRef","useState","themed","defaultTheme","jsx","_jsx","jsxs","_jsxs","TextArea","disabled","error","label","onBlur","onChange","onKeyDown","placeholder","testId","theme","value","hiddenAreaRef","height","setHeight","textAreaRef","localValue","setLocalValue","undefined","el","current","cb","scrollHeight","observer","ResizeObserver","observe","disconnect","containerClassName","container","className","onFocus","focus","children","textarea","hidden","readOnly","ref","tabIndex","process","env","NODE_ENV","e","target","style","errorMessage"],"sources":["../../../../../src/shared/components/TextArea/index.tsx"],"sourcesContent":["import {\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  type FunctionComponent,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype ThemeKeyT = 'container' | 'error' | 'errorMessage' | 'hidden' | 'label'\n  | 'textarea';\n\ntype Props = {\n  disabled?: boolean;\n  error?: ReactNode;\n  label?: string;\n  onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n  placeholder?: string;\n  testId?: string;\n  theme: Theme<ThemeKeyT>;\n  value?: string;\n};\n\nconst TextArea: FunctionComponent<Props> = ({\n  disabled,\n  error,\n  label,\n  onBlur,\n  onChange,\n  onKeyDown,\n  placeholder,\n  testId,\n  theme,\n  value,\n}) => {\n  const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [height, setHeight] = useState<number | undefined>();\n\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  const [localValue, setLocalValue] = useState(value ?? '');\n  if (value !== undefined && localValue !== value) setLocalValue(value);\n\n  // This resizes text area's height when its width is changed for any reason.\n  useEffect(() => {\n    const el = hiddenAreaRef.current;\n    if (!el) return undefined;\n\n    const cb = () => {\n      setHeight(el.scrollHeight);\n    };\n    const observer = new ResizeObserver(cb);\n    observer.observe(el);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  // Resizes the text area when its content is modified.\n  //\n  // NOTE: useLayoutEffect() instead of useEffect() makes difference here,\n  // as it helps to avoid visible \"content/height\" jumps (i.e. with just\n  // useEffect() it becomes visible how the content is modified first,\n  // and then input height is incremented, if necessary).\n  // See: https://github.com/birdofpreyru/react-utils/issues/313\n  useLayoutEffect(() => {\n    const el = hiddenAreaRef.current;\n    if (el) setHeight(el.scrollHeight);\n  }, [localValue]);\n\n  let containerClassName = theme.container;\n  if (error) containerClassName += ` ${theme.error}`;\n\n  return (\n    <div\n      className={containerClassName}\n      onFocus={() => {\n        textAreaRef.current?.focus();\n      }}\n    >\n      {label === undefined ? null : <div className={theme.label}>{label}</div>}\n      <textarea\n        className={`${theme.textarea} ${theme.hidden}`}\n\n        // This text area is hidden underneath the primary one below,\n        // and it is used for text measurements, to implement auto-scaling\n        // of the primary textarea's height.\n        readOnly\n        ref={hiddenAreaRef}\n\n        // The \"-1\" value of \"tabIndex\" removes this hidden text area from\n        // the tab-focus-chain.\n        tabIndex={-1}\n\n        // NOTE: With empty string value (\"\") the scrolling height of this text\n        // area is zero, thus collapsing <TextArea> height below the single line\n        // input height. To avoid it we fallback to whitespace (\" \") character\n        // here.\n        value={localValue || ' '}\n      />\n      <textarea\n        className={theme.textarea}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n        disabled={disabled}\n        onBlur={onBlur}\n\n        // When value is \"undefined\" the text area is not-managed, and we should\n        // manage it internally for the measurement / resizing functionality\n        // to work.\n        onChange={\n          value === undefined\n            ? (e) => {\n              setLocalValue(e.target.value);\n            } : onChange\n        }\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        ref={textAreaRef}\n        style={{ height }}\n        value={localValue}\n      />\n      {error && error !== true\n        ? <div className={theme.errorMessage}>{error}</div>\n        : null}\n    </div>\n  );\n};\n\nexport default themed(TextArea, 'TextArea', defaultTheme);\n"],"mappings":"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","ignoreList":[]}

package/build/web/shared/components/TextArea/style.scss

@@ -0,0 +1,68 @@
+@use "sass:color";
+
+*,
+.context,
+.ad.hoc {
+  &.container {
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: 0.1em;
+    position: relative;
+  }
+
+  &.label {
+    margin: 0 0.3em;
+  }
+
+  &.textarea {
+    background: white;
+    border: 1px solid gray;
+    border-radius: 0.3em;
+    box-sizing: border-box;
+    font: inherit;
+    height: 0;
+    outline: none;
+    overflow: hidden;
+    padding: 0.3em 0.3em calc(0.3em + 1px);
+    resize: none;
+    width: 100%;
+
+    &:focus {
+      border-color: blue;
+      box-shadow: 0 0 3px 1px lightblue;
+    }
+
+    &::placeholder {
+      color: gray;
+    }
+
+    &:disabled {
+      border-color: color.adjust($color: gray, $alpha: -0.66);
+      cursor: not-allowed;
+      color: color.adjust($color: gray, $alpha: -0.66);
+      user-select: none;
+    }
+  }
+
+  &.error &.textarea {
+    border-color: red;
+
+    &:focus { box-shadow: 0 0 3px 1px orangered }
+  }
+
+  &.errorMessage {
+    color: red;
+    font-size: 0.8em;
+    font-style: italic;
+    padding-right: 0.6em;
+    text-align: right;
+    width: 100%;
+  }
+
+  &.hidden {
+    // NOTE: We hide it this way, as setting "display: none" will interfere
+    // with measurements, making the hidden input height zero.
+    opacity: 0;
+    position: absolute;
+  }
+}

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

@@ -0,0 +1,26 @@
+import themed from '@dr.pogodin/react-themes';
+import defaultTheme from "./theme.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Throbber is an "action in progress" indicator, which renders
+ * three bouncing circles as a simple pending activity indicator,
+ * and can be further themed to a certain degree.
+ * @param {object} [props] Component properties.
+ * @param {ThrobberTheme} [props.theme] _Ad hoc_ theme.
+ * @param {...any} [props....]
+ * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
+ */
+const Throbber = ({
+  theme
+}) => /*#__PURE__*/_jsxs("span", {
+  className: theme.container,
+  children: [/*#__PURE__*/_jsx("span", {
+    className: theme.circle
+  }), /*#__PURE__*/_jsx("span", {
+    className: theme.circle
+  }), /*#__PURE__*/_jsx("span", {
+    className: theme.circle
+  })]
+});
+export default themed(Throbber, 'Throbber', defaultTheme);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["themed","defaultTheme","jsx","_jsx","jsxs","_jsxs","Throbber","theme","className","container","children","circle"],"sources":["../../../../../src/shared/components/Throbber/index.tsx"],"sourcesContent":["import themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'bouncing' | 'circle' | 'container';\n\ntype PropsT = {\n  theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Throbber is an \"action in progress\" indicator, which renders\n * three bouncing circles as a simple pending activity indicator,\n * and can be further themed to a certain degree.\n * @param {object} [props] Component properties.\n * @param {ThrobberTheme} [props.theme] _Ad hoc_ theme.\n * @param {...any} [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst Throbber: React.FunctionComponent<PropsT> = ({ theme }) => (\n  <span className={theme.container}>\n    <span className={theme.circle} />\n    <span className={theme.circle} />\n    <span className={theme.circle} />\n  </span>\n);\n\nexport default themed(Throbber, 'Throbber', defaultTheme);\n"],"mappings":"AAAA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAyC,GAAGA,CAAC;EAAEC;AAAM,CAAC,kBAC1DF,KAAA;EAAMG,SAAS,EAAED,KAAK,CAACE,SAAU;EAAAC,QAAA,gBAC/BP,IAAA;IAAMK,SAAS,EAAED,KAAK,CAACI;EAAO,CAAE,CAAC,eACjCR,IAAA;IAAMK,SAAS,EAAED,KAAK,CAACI;EAAO,CAAE,CAAC,eACjCR,IAAA;IAAMK,SAAS,EAAED,KAAK,CAACI;EAAO,CAAE,CAAC;AAAA,CAC7B,CACP;AAED,eAAeX,MAAM,CAACM,QAAQ,EAAE,UAAU,EAAEL,YAAY,CAAC","ignoreList":[]}

package/build/web/shared/components/Throbber/theme.scss

@@ -0,0 +1,26 @@
+@keyframes bouncing {
+  from { top: -0.3em; }
+  to { top: 0.3em; }
+}
+
+*,
+.context,
+.ad.hoc {
+  &.container {
+    display: inline-block;
+  }
+
+  &.circle {
+    animation: bouncing 0.4s ease-in infinite alternate;
+    background: black;
+    border-radius: 0.3em;
+    display: inline-block;
+    height: 0.6em;
+    margin: 0 0.1em;
+    position: relative;
+    width: 0.6em;
+
+    &:first-child { animation-delay: -0.2s; }
+    &:last-child { animation-delay: 0.2s; }
+  }
+}

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

@@ -0,0 +1,226 @@
+/**
+ * The actual tooltip component. It is rendered outside the regular document
+ * hierarchy, and with sub-components managed without React to achieve the best
+ * performance during animation.
+ */
+
+import { useImperativeHandle, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Valid placements of the rendered tooltip. They will be overriden when
+ * necessary to fit the tooltip within the viewport.
+ */
+export let PLACEMENTS = /*#__PURE__*/function (PLACEMENTS) {
+  PLACEMENTS["ABOVE_CURSOR"] = "ABOVE_CURSOR";
+  PLACEMENTS["ABOVE_ELEMENT"] = "ABOVE_ELEMENT";
+  PLACEMENTS["BELOW_CURSOR"] = "BELOW_CURSOR";
+  PLACEMENTS["BELOW_ELEMENT"] = "BELOW_ELEMENT";
+  return 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(';');
+/**
+ * Generates bounding client rectangles for tooltip components.
+ * @ignore
+ * @param tooltip DOM references to the tooltip components.
+ * @param tooltip.arrow
+ * @param tooltip.container
+ * @return Object holding tooltip rectangles in
+ *  two fields.
+ */
+function calcTooltipRects(tooltip) {
+  return {
+    arrow: tooltip.arrow.getBoundingClientRect(),
+    container: tooltip.container.getBoundingClientRect()
+  };
+}
+
+/**
+ * Calculates the document viewport size.
+ * @ignore
+ * @return {{x, y, width, height}}
+ */
+function calcViewportRect() {
+  const {
+    scrollX,
+    scrollY
+  } = window;
+  const {
+    documentElement: {
+      clientHeight,
+      clientWidth
+    }
+  } = document;
+  return {
+    bottom: scrollY + clientHeight,
+    left: scrollX,
+    right: scrollX + clientWidth,
+    top: scrollY
+  };
+}
+
+/**
+ * Calculates tooltip and arrow positions for the placement just above
+ * the cursor.
+ * @ignore
+ * @param {number} x Cursor page-x position.
+ * @param {number} y Cursor page-y position.
+ * @param {object} tooltipRects Bounding client rectangles of tooltip parts.
+ * @param {object} tooltipRects.arrow
+ * @param {object} tooltipRects.container
+ * @return {object} Contains the following fields:
+ *  - {number} arrowX
+ *  - {number} arrowY
+ *  - {number} containerX
+ *  - {number} containerY
+ *  - {string} baseArrowStyle
+ */
+function calcPositionAboveXY(x, y, tooltipRects) {
+  const {
+    arrow,
+    container
+  } = tooltipRects;
+  return {
+    arrowX: 0.5 * (container.width - arrow.width),
+    arrowY: container.height,
+    containerX: x - container.width / 2,
+    containerY: y - container.height - arrow.height / 1.5,
+    // TODO: Instead of already setting the base style here, we should
+    // introduce a set of constants for arrow directions, which will help
+    // to do checks dependant on the arrow direction.
+    baseArrowStyle: ARROW_STYLE_DOWN
+  };
+}
+
+// const HIT = {
+//   NONE: false,
+//   LEFT: 'LEFT',
+//   RIGHT: 'RIGHT',
+//   TOP: 'TOP',
+//   BOTTOM: 'BOTTOM',
+// };
+
+/**
+ * Checks whether
+ * @param {object} pos
+ * @param {object} tooltipRects
+ * @param {object} viewportRect
+ * @return {HIT}
+ */
+// function checkViewportFit(pos, tooltipRects, viewportRect) {
+//   const { containerX, containerY } = pos;
+//   if (containerX < viewportRect.left + 6) return HIT.LEFT;
+//   if (containerX > viewportRect.right - 6) return HIT.RIGHT;
+//   return HIT.NONE;
+// }
+
+/**
+ * Shifts tooltip horizontally to fit into the viewport, while keeping
+ * the arrow pointed to the XY point.
+ * @param {number} x
+ * @param {number} y
+ * @param {object} pos
+ * @param {number} pageXOffset
+ * @param {number} pageXWidth
+ */
+// function xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {
+//   if (pos.containerX < pageXOffset + 6) {
+//     pos.containerX = pageXOffset + 6;
+//     pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);
+//   } else {
+//     const maxX = pageXOffset + docRect.width - containerRect.width - 6;
+//     if (containerX > maxX) {
+//       containerX = maxX;
+//       arrowX = Math.min(
+//         containerRect.width - 6,
+//         pageX - containerX - arrowRect.width / 2,
+//       );
+//     }
+//   }
+// }
+
+/**
+ * Sets positions of tooltip components to point the tooltip to the specified
+ * page point.
+ * @ignore
+ * @param pageX
+ * @param pageY
+ * @param placement
+ * @param element DOM reference to the element wrapped by the tooltip.
+ * @param tooltip
+ * @param tooltip.arrow DOM reference to the tooltip arrow.
+ * @param tooltip.container DOM reference to the tooltip container.
+ */
+function setComponentPositions(pageX, pageY, placement, element, tooltip) {
+  const tooltipRects = calcTooltipRects(tooltip);
+  const viewportRect = calcViewportRect();
+
+  /* Default container coords: tooltip at the top. */
+  const pos = calcPositionAboveXY(pageX, pageY, tooltipRects);
+  if (pos.containerX < viewportRect.left + 6) {
+    pos.containerX = viewportRect.left + 6;
+    pos.arrowX = Math.max(6, pageX - pos.containerX - tooltipRects.arrow.width / 2);
+  } else {
+    const maxX = viewportRect.right - 6 - tooltipRects.container.width;
+    if (pos.containerX > maxX) {
+      pos.containerX = maxX;
+      pos.arrowX = Math.min(tooltipRects.container.width - 6, pageX - pos.containerX - tooltipRects.arrow.width / 2);
+    }
+  }
+
+  /* If tooltip has not enough space on top - make it bottom tooltip. */
+  if (pos.containerY < viewportRect.top + 6) {
+    pos.containerY += tooltipRects.container.height + 2 * tooltipRects.arrow.height;
+    pos.arrowY -= tooltipRects.container.height + tooltipRects.arrow.height;
+    pos.baseArrowStyle = ARROW_STYLE_UP;
+  }
+  const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;
+  tooltip.container.setAttribute('style', containerStyle);
+  const arrowStyle = `${pos.baseArrowStyle};left:${pos.arrowX}px;top:${pos.arrowY}px`;
+  tooltip.arrow.setAttribute('style', arrowStyle);
+}
+
+/* The Tooltip component itself. */
+const Tooltip = ({
+  children,
+  ref,
+  theme
+}) => {
+  // NOTE: The way it has to be implemented, for clean mounting and unmounting
+  // at the client side, the <Tooltip> is fully mounted into DOM in the next
+  // rendering cycles, and only then it can be correctly measured and positioned.
+  // Thus, when we create the <Tooltip> we have to record its target positioning
+  // details, and then apply them when it is created.
+
+  const arrowRef = useRef(null);
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const pointTo = (pageX, pageY, placement, element) => {
+    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
+    });
+  };
+  useImperativeHandle(ref, () => ({
+    pointTo
+  }));
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs("div", {
+    className: theme.container,
+    ref: containerRef,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: theme.arrow,
+      ref: arrowRef
+    }), /*#__PURE__*/_jsx("div", {
+      className: theme.content,
+      ref: contentRef,
+      children: children
+    })]
+  }), document.body);
+};
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["useImperativeHandle","useRef","createPortal","jsx","_jsx","jsxs","_jsxs","PLACEMENTS","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","containerRef","contentRef","pointTo","current","Error","content","className","body"],"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/web/shared/components/WithTooltip/default-theme.scss

@@ -0,0 +1,36 @@
+@keyframes appearance {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+*,
+.ad.hoc,
+.context {
+  &.arrow {
+    border: 0.6em solid grey;
+    pointer-events: none;
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  /*
+  &.content { }
+  */
+
+  &.container {
+    background: grey;
+    border-radius: 0.3em;
+    color: white;
+    display: inline-block;
+    padding: 0 0.3em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: appearance 0.6s;
+  }
+
+  &.wrapper {
+    display: inline-block;
+  }
+}

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

@@ -0,0 +1,117 @@
+/* global window */
+
+import { useEffect, useRef, useState } from 'react';
+import themed from '@dr.pogodin/react-themes';
+import Tooltip, { PLACEMENTS } from "./Tooltip";
+import defaultTheme from "./default-theme.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Implements a simple to use and themeable tooltip component, _e.g._
+ * ```js
+ * <WithTooltip tip="This is example tooltip.">
+ *   <p>Hover to see the tooltip.</p>
+ * </WithTooltip>
+ * ```
+ * **Children:** Children are rendered in the place of `<WithTooltip>`,
+ * and when hovered the tooltip is shown. By default the wrapper itself is
+ * `<div>` block with `display: inline-block`.
+ * @param tip &ndash; Anything React is able to render,
+ * _e.g._ a tooltip text. This will be the tooltip content.
+ * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.
+ */
+const Wrapper = ({
+  children,
+  placement = PLACEMENTS.ABOVE_CURSOR,
+  tip,
+  theme
+}) => {
+  const {
+    current: heap
+  } = useRef({
+    lastCursorX: 0,
+    lastCursorY: 0,
+    timerId: undefined,
+    triggeredByTouch: false
+  });
+  const tooltipRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const updatePortalPosition = (cursorX, cursorY) => {
+    if (showTooltip) {
+      const wrapperRect = wrapperRef.current.getBoundingClientRect();
+      if (cursorX < wrapperRect.left || cursorX > wrapperRect.right || cursorY < wrapperRect.top || cursorY > wrapperRect.bottom) {
+        setShowTooltip(false);
+      } else if (tooltipRef.current) {
+        tooltipRef.current.pointTo(cursorX + window.scrollX, cursorY + window.scrollY, placement, wrapperRef.current);
+      }
+    } else {
+      heap.lastCursorX = cursorX;
+      heap.lastCursorY = cursorY;
+
+      // If tooltip was triggered by a touch, we delay its opening by a bit,
+      // to ensure it was not a touch-click - in the case of touch click we
+      // want to do the click, rather than show the tooltip, and the delay
+      // gives click handler a chance to abort the tooltip openning.
+      if (heap.triggeredByTouch) {
+        heap.timerId ??= setTimeout(() => {
+          heap.triggeredByTouch = false;
+          heap.timerId = undefined;
+          setShowTooltip(true);
+        }, 300);
+
+        // Otherwise we can just open the tooltip right away.
+      } else setShowTooltip(true);
+    }
+  };
+  useEffect(() => {
+    if (showTooltip && tip !== null) {
+      // This is necessary to ensure that even when a single mouse event
+      // arrives to a tool-tipped component, the tooltip is correctly positioned
+      // once opened (because similar call above does not have effect until
+      // the tooltip is fully mounted, and that is delayed to future rendering
+      // cycle due to the implementation).
+      if (tooltipRef.current) {
+        tooltipRef.current.pointTo(heap.lastCursorX + window.scrollX, heap.lastCursorY + window.scrollY, placement, wrapperRef.current);
+      }
+      const listener = () => {
+        setShowTooltip(false);
+      };
+      window.addEventListener('scroll', listener);
+      return () => {
+        window.removeEventListener('scroll', listener);
+      };
+    }
+    return undefined;
+  }, [heap.lastCursorX, heap.lastCursorY, placement, showTooltip, tip]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: theme.wrapper,
+    onClick: () => {
+      if (heap.timerId) {
+        clearTimeout(heap.timerId);
+        heap.timerId = undefined;
+        heap.triggeredByTouch = false;
+      }
+    },
+    onMouseLeave: () => {
+      setShowTooltip(false);
+    },
+    onMouseMove: e => {
+      updatePortalPosition(e.clientX, e.clientY);
+    },
+    onTouchStart: () => {
+      heap.triggeredByTouch = true;
+    },
+    ref: wrapperRef,
+    role: "presentation",
+    children: [showTooltip && tip !== null ? /*#__PURE__*/_jsx(Tooltip, {
+      ref: tooltipRef,
+      theme: theme,
+      children: tip
+    }) : null, children]
+  });
+};
+const ThemedWrapper = themed(Wrapper, 'WithTooltip', defaultTheme);
+const e = ThemedWrapper;
+e.PLACEMENTS = PLACEMENTS;
+export default e;
+//# sourceMappingURL=index.js.map