@dr.pogodin/react-utils 1.28.1 → 1.29.1

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

@@ -15,6 +15,7 @@ const defaultTheme = {
   "container": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___container___7zdld4",
   "circle": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___circle___dBrB4g"
 };
+const validThemeKeys = ['bouncing', 'circle', 'container'];
 /**
  * Throbber is an "action in progress" indicator, which renders
  * three bouncing circles as a simple pending activity indicator,
@@ -36,7 +37,7 @@ const Throbber = ({
     className: theme.circle
   })]
 });
-const ThemedThrobber = (0, _reactThemes.default)(Throbber, 'Throbber', ['bouncing', 'circle', 'container'], defaultTheme);
+const ThemedThrobber = (0, _reactThemes.default)(Throbber, 'Throbber', validThemeKeys, defaultTheme);
 Throbber.propTypes = {
   theme: ThemedThrobber.themeType.isRequired
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_reactThemes","_interopRequireDefault","require","_jsxRuntime","defaultTheme","Throbber","theme","jsxs","className","container","children","jsx","circle","ThemedThrobber","themed","propTypes","themeType","isRequired","_default","exports","default"],"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 PropsT = {\n  theme: Theme & {\n    bouncing?: string;\n    container?: string;\n    circle?: string;\n  };\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\nconst ThemedThrobber = themed(\n  Throbber,\n  'Throbber',\n  [\n    'bouncing',\n    'circle',\n    'container',\n  ],\n  defaultTheme,\n);\n\nThrobber.propTypes = {\n  theme: ThemedThrobber.themeType.isRequired,\n};\n\nexport default ThemedThrobber;\n"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8D,IAAAC,WAAA,GAAAD,OAAA;AAAA,MAAAE,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAY9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAyC,GAAGA,CAAC;EAAEC;AAAM,CAAC,kBAC1D,IAAAH,WAAA,CAAAI,IAAA;EAAMC,SAAS,EAAEF,KAAK,CAACG,SAAU;EAAAC,QAAA,gBAC/B,IAAAP,WAAA,CAAAQ,GAAA;IAAMH,SAAS,EAAEF,KAAK,CAACM;EAAO,CAAE,CAAC,eACjC,IAAAT,WAAA,CAAAQ,GAAA;IAAMH,SAAS,EAAEF,KAAK,CAACM;EAAO,CAAE,CAAC,eACjC,IAAAT,WAAA,CAAAQ,GAAA;IAAMH,SAAS,EAAEF,KAAK,CAACM;EAAO,CAAE,CAAC;AAAA,CAC7B,CACP;AAED,MAAMC,cAAc,GAAG,IAAAC,oBAAM,EAC3BT,QAAQ,EACR,UAAU,EACV,CACE,UAAU,EACV,QAAQ,EACR,WAAW,CACZ,EACDD,YACF,CAAC;AAEDC,QAAQ,CAACU,SAAS,GAAG;EACnBT,KAAK,EAAEO,cAAc,CAACG,SAAS,CAACC;AAClC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaP,cAAc"}
+{"version":3,"file":"index.js","names":["_reactThemes","_interopRequireDefault","require","_jsxRuntime","defaultTheme","validThemeKeys","Throbber","theme","jsxs","className","container","children","jsx","circle","ThemedThrobber","themed","propTypes","themeType","isRequired","_default","exports","default"],"sources":["../../../../../src/shared/components/Throbber/index.tsx"],"sourcesContent":["import themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nconst validThemeKeys = [\n  'bouncing',\n  'circle',\n  'container',\n] as const;\n\ntype PropsT = {\n  theme: Theme<typeof validThemeKeys>;\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\nconst ThemedThrobber = themed(\n  Throbber,\n  'Throbber',\n  validThemeKeys,\n  defaultTheme,\n);\n\nThrobber.propTypes = {\n  theme: ThemedThrobber.themeType.isRequired,\n};\n\nexport default ThemedThrobber;\n"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8D,IAAAC,WAAA,GAAAD,OAAA;AAAA,MAAAE,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI9D,MAAMC,cAAc,GAAG,CACrB,UAAU,EACV,QAAQ,EACR,WAAW,CACH;AAMV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAyC,GAAGA,CAAC;EAAEC;AAAM,CAAC,kBAC1D,IAAAJ,WAAA,CAAAK,IAAA;EAAMC,SAAS,EAAEF,KAAK,CAACG,SAAU;EAAAC,QAAA,gBAC/B,IAAAR,WAAA,CAAAS,GAAA;IAAMH,SAAS,EAAEF,KAAK,CAACM;EAAO,CAAE,CAAC,eACjC,IAAAV,WAAA,CAAAS,GAAA;IAAMH,SAAS,EAAEF,KAAK,CAACM;EAAO,CAAE,CAAC,eACjC,IAAAV,WAAA,CAAAS,GAAA;IAAMH,SAAS,EAAEF,KAAK,CAACM;EAAO,CAAE,CAAC;AAAA,CAC7B,CACP;AAED,MAAMC,cAAc,GAAG,IAAAC,oBAAM,EAC3BT,QAAQ,EACR,UAAU,EACVD,cAAc,EACdD,YACF,CAAC;AAEDE,QAAQ,CAACU,SAAS,GAAG;EACnBT,KAAK,EAAEO,cAAc,CAACG,SAAS,CAACC;AAClC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaP,cAAc"}

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PLACEMENTS = void 0;
+exports.validThemeKeys = exports.default = exports.PLACEMENTS = void 0;
 var _react = require("react");
 var _reactDom = require("react-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,6 +25,7 @@ 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(';');
+const validThemeKeys = exports.validThemeKeys = ['appearance', 'arrow', 'content', 'container'];
 /**
  * Creates tooltip components.
  * @ignore

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_react","require","_reactDom","_propTypes","_interopRequireDefault","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","left","right","top","bottom","calcPositionAboveXY","x","y","tooltipRects","arrowX","width","arrowY","height","containerX","containerY","baseArrowStyle","setComponentPositions","pageX","pageY","placement","element","viewportRect","pos","Math","max","maxX","min","containerStyle","arrowStyle","Tooltip","forwardRef","children","ref","current","heap","useRef","lastElement","undefined","lastPageX","lastPageY","lastPlacement","components","setComponents","useState","pointTo","useImperativeHandle","useEffect","removeChild","createPortal","propTypes","PT","node","shape","isRequired","defaultProps","_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/* global document, window */\n\nimport {\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport PT from 'prop-types';\n\n/* Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport. */\nexport 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 interface TooltipThemeT {\n  appearance?: string;\n  arrow?: string;\n  content?: string;\n  container?: string;\n}\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 { container, arrow, 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    left: scrollX,\n    right: scrollX + clientWidth,\n    top: scrollY,\n    bottom: scrollY + clientHeight,\n  };\n}\n\n/**\n * Calculates tooltip and arrow positions for the placement just above\n * the cursor.\n * @ignore\n * @param {number} x Cursor page-x position.\n * @param {number} y Cursor page-y position.\n * @param {object} tooltipRects Bounding client rectangles of tooltip parts.\n * @param {object} tooltipRects.arrow\n * @param {object} tooltipRects.container\n * @return {object} Contains the following fields:\n *  - {number} arrowX\n *  - {number} arrowY\n *  - {number} containerX\n *  - {number} containerY\n *  - {string} baseArrowStyle\n */\nfunction calcPositionAboveXY(\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/*\nconst HIT = {\n  NONE: false,\n  LEFT: 'LEFT',\n  RIGHT: 'RIGHT',\n  TOP: 'TOP',\n  BOTTOM: 'BOTTOM',\n};\n*/\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n/*\nfunction checkViewportFit(pos, tooltipRects, viewportRect) {\n  const { containerX, containerY } = pos;\n  if (containerX < viewportRect.left + 6) return HIT.LEFT;\n  if (containerX > viewportRect.right - 6) return HIT.RIGHT;\n  return HIT.NONE;\n}\n*/\n\n/**\n * Shifts tooltip horizontally to fit into the viewport, while keeping\n * the arrow pointed to the XY point.\n * @param {number} x\n * @param {number} y\n * @param {object} pos\n * @param {number} pageXOffset\n * @param {number} pageXWidth\n */\n/*\nfunction xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {\n  if (pos.containerX < pageXOffset + 6) {\n    pos.containerX = pageXOffset + 6;\n    pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);\n  } else {\n    const maxX = pageXOffset + docRect.width - containerRect.width - 6;\n    if (containerX > maxX) {\n      containerX = maxX;\n      arrowX = Math.min(\n        containerRect.width - 6,\n        pageX - containerX - arrowRect.width / 2,\n      );\n    }\n  }\n}\n*/\n\n/**\n * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param 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 = forwardRef<unknown, {\n  children?: ReactNode;\n  theme: any;\n}>(({ children, theme }, ref) => {\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\nTooltip.propTypes = {\n  children: PT.node,\n  theme: PT.shape({}).isRequired,\n};\n\nTooltip.defaultProps = {\n  children: null,\n};\n\nexport default Tooltip;\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["_react","require","_reactDom","_propTypes","_interopRequireDefault","PLACEMENTS","exports","ARROW_STYLE_DOWN","join","ARROW_STYLE_UP","validThemeKeys","createTooltipComponents","theme","arrow","document","createElement","setAttribute","content","container","appendChild","body","calcTooltipRects","tooltip","getBoundingClientRect","calcViewportRect","scrollX","scrollY","window","documentElement","clientHeight","clientWidth","left","right","top","bottom","calcPositionAboveXY","x","y","tooltipRects","arrowX","width","arrowY","height","containerX","containerY","baseArrowStyle","setComponentPositions","pageX","pageY","placement","element","viewportRect","pos","Math","max","maxX","min","containerStyle","arrowStyle","Tooltip","forwardRef","children","ref","current","heap","useRef","lastElement","undefined","lastPageX","lastPageY","lastPlacement","components","setComponents","useState","pointTo","useImperativeHandle","useEffect","removeChild","createPortal","propTypes","PT","node","shape","isRequired","defaultProps","_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/* global document, window */\n\nimport {\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport PT from 'prop-types';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\n/* Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport. */\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 const validThemeKeys = [\n  'appearance',\n  'arrow',\n  'content',\n  'container',\n] as const;\n\ntype TooltipThemeT = Theme<typeof validThemeKeys>;\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 { container, arrow, 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    left: scrollX,\n    right: scrollX + clientWidth,\n    top: scrollY,\n    bottom: scrollY + clientHeight,\n  };\n}\n\n/**\n * Calculates tooltip and arrow positions for the placement just above\n * the cursor.\n * @ignore\n * @param {number} x Cursor page-x position.\n * @param {number} y Cursor page-y position.\n * @param {object} tooltipRects Bounding client rectangles of tooltip parts.\n * @param {object} tooltipRects.arrow\n * @param {object} tooltipRects.container\n * @return {object} Contains the following fields:\n *  - {number} arrowX\n *  - {number} arrowY\n *  - {number} containerX\n *  - {number} containerY\n *  - {string} baseArrowStyle\n */\nfunction calcPositionAboveXY(\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/*\nconst HIT = {\n  NONE: false,\n  LEFT: 'LEFT',\n  RIGHT: 'RIGHT',\n  TOP: 'TOP',\n  BOTTOM: 'BOTTOM',\n};\n*/\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n/*\nfunction checkViewportFit(pos, tooltipRects, viewportRect) {\n  const { containerX, containerY } = pos;\n  if (containerX < viewportRect.left + 6) return HIT.LEFT;\n  if (containerX > viewportRect.right - 6) return HIT.RIGHT;\n  return HIT.NONE;\n}\n*/\n\n/**\n * Shifts tooltip horizontally to fit into the viewport, while keeping\n * the arrow pointed to the XY point.\n * @param {number} x\n * @param {number} y\n * @param {object} pos\n * @param {number} pageXOffset\n * @param {number} pageXWidth\n */\n/*\nfunction xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {\n  if (pos.containerX < pageXOffset + 6) {\n    pos.containerX = pageXOffset + 6;\n    pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);\n  } else {\n    const maxX = pageXOffset + docRect.width - containerRect.width - 6;\n    if (containerX > maxX) {\n      containerX = maxX;\n      arrowX = Math.min(\n        containerRect.width - 6,\n        pageX - containerX - arrowRect.width / 2,\n      );\n    }\n  }\n}\n*/\n\n/**\n * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param 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 = forwardRef<unknown, {\n  children?: ReactNode;\n  theme: any;\n}>(({ children, theme }, ref) => {\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\nTooltip.propTypes = {\n  children: PT.node,\n  theme: PT.shape({}).isRequired,\n};\n\nTooltip.defaultProps = {\n  children: null,\n};\n\nexport default Tooltip;\n"],"mappings":"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"}

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

@@ -22,6 +22,7 @@ const defaultTheme = {
   "container": "-dr-pogodin-react-utils___src-shared-components-WithTooltip-default-theme___container___f9gY8K",
   "wrapper": "-dr-pogodin-react-utils___src-shared-components-WithTooltip-default-theme___wrapper___4qDBRM"
 };
+const validThemeKeys = [..._Tooltip.validThemeKeys, 'wrapper'];
 /**
  * Implements a simple to use and themeable tooltip component, _e.g._
  * ```js

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_reactThemes","_Tooltip","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","defaultTheme","Wrapper","children","placement","tip","theme","current","heap","useRef","lastCursorX","lastCursorY","triggeredByTouch","timerId","undefined","tooltipRef","wrapperRef","showTooltip","setShowTooltip","useState","updatePortalPosition","cursorX","cursorY","setTimeout","wrapperRect","getBoundingClientRect","left","right","top","bottom","pointTo","window","scrollX","scrollY","useEffect","listener","addEventListener","removeEventListener","jsxs","className","wrapper","onMouseLeave","onMouseMove","clientX","clientY","onClick","clearTimeout","onTouchStart","ref","role","jsx","ThemedWrapper","themed","PLACEMENTS","propTypes","PT","node","oneOf","values","themeType","isRequired","defaultProps","ABOVE_CURSOR","_default","exports"],"sources":["../../../../../src/shared/components/WithTooltip/index.tsx"],"sourcesContent":["/* global window */\n\nimport PT from 'prop-types';\nimport {\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Tooltip, { PLACEMENTS, type TooltipThemeT } from './Tooltip';\n\nimport defaultTheme from './default-theme.scss';\n\ntype PropsT = {\n  children?: ReactNode;\n  placement?: PLACEMENTS;\n  tip?: ReactNode;\n  theme: Theme & TooltipThemeT & {\n    wrapper?: string;\n  };\n};\n\ntype TooltipRefT = {\n  pointTo: (\n    x: number,\n    y: number,\n    placement: PLACEMENTS,\n    wrapperRef: HTMLDivElement,\n  ) => void;\n};\n\ntype HeapT = {\n  lastCursorX: number;\n  lastCursorY: number;\n  triggeredByTouch: boolean;\n  timerId?: NodeJS.Timeout;\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 {object} props Component properties.\n * @param {React.node} props.tip &ndash; Anything React is able to render,\n * _e.g._ a tooltip text. This will be the tooltip content.\n * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.\n */\nconst Wrapper: React.FunctionComponent<PropsT> = ({\n  children,\n  placement,\n  tip,\n  theme,\n}) => {\n  const { current: heap } = useRef<HeapT>({\n    lastCursorX: 0,\n    lastCursorY: 0,\n    triggeredByTouch: false,\n    timerId: undefined,\n  });\n  const tooltipRef = useRef<TooltipRefT>();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const updatePortalPosition = (cursorX: number, cursorY: number) => {\n    if (!showTooltip) {\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        if (!heap.timerId) {\n          heap.timerId = setTimeout(() => {\n            heap.triggeredByTouch = false;\n            heap.timerId = undefined;\n            setShowTooltip(true);\n          }, 300);\n        }\n\n      // Otherwise we can just open the tooltip right away.\n      } else setShowTooltip(true);\n    } else {\n      const wrapperRect = wrapperRef.current!.getBoundingClientRect();\n      if (\n        cursorX < wrapperRect.left\n        || cursorX > wrapperRect.right\n        || cursorY < wrapperRect.top\n        || cursorY > wrapperRect.bottom\n      ) {\n        setShowTooltip(false);\n      } else if (tooltipRef.current) {\n        tooltipRef.current.pointTo(\n          cursorX + window.scrollX,\n          cursorY + window.scrollY,\n          placement!,\n          wrapperRef.current!,\n        );\n      }\n    }\n  };\n\n  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(\n          heap.lastCursorX + window.scrollX,\n          heap.lastCursorY + window.scrollY,\n          placement!,\n          wrapperRef.current!,\n        );\n      }\n\n      const listener = () => setShowTooltip(false);\n      window.addEventListener('scroll', listener);\n      return () => window.removeEventListener('scroll', listener);\n    }\n    return undefined;\n  }, [\n    heap.lastCursorX,\n    heap.lastCursorY,\n    placement,\n    showTooltip,\n    tip,\n  ]);\n\n  return (\n    <div\n      className={theme.wrapper}\n      onMouseLeave={() => setShowTooltip(false)}\n      onMouseMove={(e) => updatePortalPosition(e.clientX, e.clientY)}\n      onClick={() => {\n        if (heap.timerId) {\n          clearTimeout(heap.timerId);\n          heap.timerId = undefined;\n          heap.triggeredByTouch = false;\n        }\n      }}\n      onTouchStart={() => {\n        heap.triggeredByTouch = true;\n      }}\n      ref={wrapperRef}\n      role=\"presentation\"\n    >\n      {\n        showTooltip && tip !== null ? (\n          <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>\n        ) : null\n      }\n      {children}\n    </div>\n  );\n};\n\nconst ThemedWrapper = themed(\n  Wrapper,\n  'WithTooltip',\n  [\n    'appearance',\n    'arrow',\n    'container',\n    'content',\n    'wrapper',\n  ],\n  defaultTheme,\n);\n\ntype ExportT = typeof ThemedWrapper & {\n  PLACEMENTS: typeof PLACEMENTS;\n};\n\nconst e: ExportT = ThemedWrapper as ExportT;\n\ne.PLACEMENTS = PLACEMENTS;\n\nWrapper.propTypes = {\n  children: PT.node,\n  placement: PT.oneOf(Object.values(PLACEMENTS)),\n  theme: ThemedWrapper.themeType.isRequired,\n  tip: PT.node,\n};\n\nWrapper.defaultProps = {\n  children: null,\n  placement: PLACEMENTS.ABOVE_CURSOR,\n  tip: null,\n};\n\nexport default e;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_reactThemes","_Tooltip","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","defaultTheme","validThemeKeys","validTooltipThemeKeys","Wrapper","children","placement","tip","theme","current","heap","useRef","lastCursorX","lastCursorY","triggeredByTouch","timerId","undefined","tooltipRef","wrapperRef","showTooltip","setShowTooltip","useState","updatePortalPosition","cursorX","cursorY","setTimeout","wrapperRect","getBoundingClientRect","left","right","top","bottom","pointTo","window","scrollX","scrollY","useEffect","listener","addEventListener","removeEventListener","jsxs","className","wrapper","onMouseLeave","onMouseMove","clientX","clientY","onClick","clearTimeout","onTouchStart","ref","role","jsx","ThemedWrapper","themed","PLACEMENTS","propTypes","PT","node","oneOf","values","themeType","isRequired","defaultProps","ABOVE_CURSOR","_default","exports"],"sources":["../../../../../src/shared/components/WithTooltip/index.tsx"],"sourcesContent":["/* global window */\n\nimport PT from 'prop-types';\nimport {\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Tooltip, {\n  PLACEMENTS,\n  validThemeKeys as validTooltipThemeKeys,\n} from './Tooltip';\n\nimport defaultTheme from './default-theme.scss';\n\nconst validThemeKeys = [...validTooltipThemeKeys, 'wrapper'] as const;\n\ntype PropsT = {\n  children?: ReactNode;\n  placement?: PLACEMENTS;\n  tip?: ReactNode;\n  theme: Theme<typeof validThemeKeys>;\n};\n\ntype TooltipRefT = {\n  pointTo: (\n    x: number,\n    y: number,\n    placement: PLACEMENTS,\n    wrapperRef: HTMLDivElement,\n  ) => void;\n};\n\ntype HeapT = {\n  lastCursorX: number;\n  lastCursorY: number;\n  triggeredByTouch: boolean;\n  timerId?: NodeJS.Timeout;\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 {object} props Component properties.\n * @param {React.node} props.tip &ndash; Anything React is able to render,\n * _e.g._ a tooltip text. This will be the tooltip content.\n * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.\n */\nconst Wrapper: React.FunctionComponent<PropsT> = ({\n  children,\n  placement,\n  tip,\n  theme,\n}) => {\n  const { current: heap } = useRef<HeapT>({\n    lastCursorX: 0,\n    lastCursorY: 0,\n    triggeredByTouch: false,\n    timerId: undefined,\n  });\n  const tooltipRef = useRef<TooltipRefT>();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const updatePortalPosition = (cursorX: number, cursorY: number) => {\n    if (!showTooltip) {\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        if (!heap.timerId) {\n          heap.timerId = setTimeout(() => {\n            heap.triggeredByTouch = false;\n            heap.timerId = undefined;\n            setShowTooltip(true);\n          }, 300);\n        }\n\n      // Otherwise we can just open the tooltip right away.\n      } else setShowTooltip(true);\n    } else {\n      const wrapperRect = wrapperRef.current!.getBoundingClientRect();\n      if (\n        cursorX < wrapperRect.left\n        || cursorX > wrapperRect.right\n        || cursorY < wrapperRect.top\n        || cursorY > wrapperRect.bottom\n      ) {\n        setShowTooltip(false);\n      } else if (tooltipRef.current) {\n        tooltipRef.current.pointTo(\n          cursorX + window.scrollX,\n          cursorY + window.scrollY,\n          placement!,\n          wrapperRef.current!,\n        );\n      }\n    }\n  };\n\n  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(\n          heap.lastCursorX + window.scrollX,\n          heap.lastCursorY + window.scrollY,\n          placement!,\n          wrapperRef.current!,\n        );\n      }\n\n      const listener = () => setShowTooltip(false);\n      window.addEventListener('scroll', listener);\n      return () => window.removeEventListener('scroll', listener);\n    }\n    return undefined;\n  }, [\n    heap.lastCursorX,\n    heap.lastCursorY,\n    placement,\n    showTooltip,\n    tip,\n  ]);\n\n  return (\n    <div\n      className={theme.wrapper}\n      onMouseLeave={() => setShowTooltip(false)}\n      onMouseMove={(e) => updatePortalPosition(e.clientX, e.clientY)}\n      onClick={() => {\n        if (heap.timerId) {\n          clearTimeout(heap.timerId);\n          heap.timerId = undefined;\n          heap.triggeredByTouch = false;\n        }\n      }}\n      onTouchStart={() => {\n        heap.triggeredByTouch = true;\n      }}\n      ref={wrapperRef}\n      role=\"presentation\"\n    >\n      {\n        showTooltip && tip !== null ? (\n          <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>\n        ) : null\n      }\n      {children}\n    </div>\n  );\n};\n\nconst ThemedWrapper = themed(\n  Wrapper,\n  'WithTooltip',\n  [\n    'appearance',\n    'arrow',\n    'container',\n    'content',\n    'wrapper',\n  ],\n  defaultTheme,\n);\n\ntype ExportT = typeof ThemedWrapper & {\n  PLACEMENTS: typeof PLACEMENTS;\n};\n\nconst e: ExportT = ThemedWrapper as ExportT;\n\ne.PLACEMENTS = PLACEMENTS;\n\nWrapper.propTypes = {\n  children: PT.node,\n  placement: PT.oneOf(Object.values(PLACEMENTS)),\n  theme: ThemedWrapper.themeType.isRequired,\n  tip: PT.node,\n};\n\nWrapper.defaultProps = {\n  children: null,\n  placement: PLACEMENTS.ABOVE_CURSOR,\n  tip: null,\n};\n\nexport default e;\n"],"mappings":"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"}

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

@@ -24,6 +24,7 @@ const throbberTheme = {
   "hoc": "-dr-pogodin-react-utils___src-shared-components-YouTubeVideo-throbber___hoc___7sH52O",
   "container": "-dr-pogodin-react-utils___src-shared-components-YouTubeVideo-throbber___container___jTxmOX"
 };
+const validThemeKeys = ['container', 'video'];
 /**
  * A component for embeding a YouTube video.
  * @param [props] Component properties.
@@ -72,7 +73,7 @@ const YouTubeVideo = ({
     })]
   });
 };
-const ThemedYouTubeVideo = (0, _reactThemes.default)(YouTubeVideo, 'YouTubeVideo', ['container', 'video'], baseTheme);
+const ThemedYouTubeVideo = (0, _reactThemes.default)(YouTubeVideo, 'YouTubeVideo', validThemeKeys, baseTheme);
 YouTubeVideo.propTypes = {
   autoplay: _propTypes.default.bool,
   src: _propTypes.default.string.isRequired,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_qs","_reactThemes","_ScalableRect","_Throbber","_jsxRuntime","baseTheme","throbberTheme","YouTubeVideo","autoplay","src","theme","title","srcParts","split","url","queryString","query","qs","parse","videoId","v","match","stringify","jsxs","default","className","container","ratio","children","jsx","allow","allowFullScreen","video","ThemedYouTubeVideo","themed","propTypes","PT","bool","string","isRequired","themeType","defaultProps","_default","exports"],"sources":["../../../../../src/shared/components/YouTubeVideo/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport qs from 'qs';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport ScalableRect from 'components/ScalableRect';\nimport Throbber from 'components/Throbber';\n\nimport baseTheme from './base.scss';\nimport throbberTheme from './throbber.scss';\n\ntype ComponentThemeT = Theme & {\n  container?: string;\n  video?: string;\n};\n\ntype PropsT = {\n  autoplay?: boolean;\n  src: string;\n  theme: ComponentThemeT,\n  title?: string;\n};\n\n/**\n * A component for embeding a YouTube video.\n * @param [props] Component properties.\n * @param [props.autoplay] If `true` the video will start to play\n * automatically once loaded.\n * @param [props.src] URL of the video to play. Can be in any of\n * the following formats, and keeps any additional query parameters understood\n * by the YouTube IFrame player:\n * - `https://www.youtube.com/watch?v=NdF6Rmt6Ado`\n * - `https://youtu.be/NdF6Rmt6Ado`\n * - `https://www.youtube.com/embed/NdF6Rmt6Ado`\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.title] The `title` attribute to add to the player\n * IFrame.\n */\nconst YouTubeVideo: React.FunctionComponent<PropsT> = ({\n  autoplay,\n  src,\n  theme,\n  title,\n}) => {\n  const srcParts = src.split('?');\n  let url = srcParts[0];\n  const queryString = srcParts[1];\n  const query = queryString ? qs.parse(queryString) : {};\n\n  const videoId = query.v || url.match(/\\/([a-zA-Z0-9-_]*)$/)?.[1];\n  url = `https://www.youtube.com/embed/${videoId}`;\n\n  delete query.v;\n  query.autoplay = autoplay ? '1' : '0';\n  url += `?${qs.stringify(query)}`;\n\n  // TODO: https://developers.google.com/youtube/player_parameters\n  // More query parameters can be exposed via the component props.\n\n  return (\n    <ScalableRect className={theme.container} ratio=\"16:9\">\n      <Throbber theme={throbberTheme} />\n      <iframe\n        allow=\"autoplay\"\n        allowFullScreen\n        className={theme.video}\n        src={url}\n        title={title}\n      />\n    </ScalableRect>\n  );\n};\n\nconst ThemedYouTubeVideo = themed(\n  YouTubeVideo,\n  'YouTubeVideo',\n  [\n    'container',\n    'video',\n  ],\n  baseTheme,\n);\n\nYouTubeVideo.propTypes = {\n  autoplay: PT.bool,\n  src: PT.string.isRequired,\n  theme: ThemedYouTubeVideo.themeType.isRequired,\n  title: PT.string,\n};\n\nYouTubeVideo.defaultProps = {\n  autoplay: false,\n  title: '',\n};\n\nexport default ThemedYouTubeVideo;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,aAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAAA,MAAAM,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,MAAAC,aAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAiB3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAA6C,GAAGA,CAAC;EACrDC,QAAQ;EACRC,GAAG;EACHC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAGH,GAAG,CAACI,KAAK,CAAC,GAAG,CAAC;EAC/B,IAAIC,GAAG,GAAGF,QAAQ,CAAC,CAAC,CAAC;EACrB,MAAMG,WAAW,GAAGH,QAAQ,CAAC,CAAC,CAAC;EAC/B,MAAMI,KAAK,GAAGD,WAAW,GAAGE,WAAE,CAACC,KAAK,CAACH,WAAW,CAAC,GAAG,CAAC,CAAC;EAEtD,MAAMI,OAAO,GAAGH,KAAK,CAACI,CAAC,IAAIN,GAAG,CAACO,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;EAChEP,GAAG,GAAI,iCAAgCK,OAAQ,EAAC;EAEhD,OAAOH,KAAK,CAACI,CAAC;EACdJ,KAAK,CAACR,QAAQ,GAAGA,QAAQ,GAAG,GAAG,GAAG,GAAG;EACrCM,GAAG,IAAK,IAAGG,WAAE,CAACK,SAAS,CAACN,KAAK,CAAE,EAAC;;EAEhC;EACA;;EAEA,oBACE,IAAAZ,WAAA,CAAAmB,IAAA,EAACrB,aAAA,CAAAsB,OAAY;IAACC,SAAS,EAAEf,KAAK,CAACgB,SAAU;IAACC,KAAK,EAAC,MAAM;IAAAC,QAAA,gBACpD,IAAAxB,WAAA,CAAAyB,GAAA,EAAC1B,SAAA,CAAAqB,OAAQ;MAACd,KAAK,EAAEJ;IAAc,CAAE,CAAC,eAClC,IAAAF,WAAA,CAAAyB,GAAA;MACEC,KAAK,EAAC,UAAU;MAChBC,eAAe;MACfN,SAAS,EAAEf,KAAK,CAACsB,KAAM;MACvBvB,GAAG,EAAEK,GAAI;MACTH,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACU,CAAC;AAEnB,CAAC;AAED,MAAMsB,kBAAkB,GAAG,IAAAC,oBAAM,EAC/B3B,YAAY,EACZ,cAAc,EACd,CACE,WAAW,EACX,OAAO,CACR,EACDF,SACF,CAAC;AAEDE,YAAY,CAAC4B,SAAS,GAAG;EACvB3B,QAAQ,EAAE4B,kBAAE,CAACC,IAAI;EACjB5B,GAAG,EAAE2B,kBAAE,CAACE,MAAM,CAACC,UAAU;EACzB7B,KAAK,EAAEuB,kBAAkB,CAACO,SAAS,CAACD,UAAU;EAC9C5B,KAAK,EAAEyB,kBAAE,CAACE;AACZ,CAAC;AAED/B,YAAY,CAACkC,YAAY,GAAG;EAC1BjC,QAAQ,EAAE,KAAK;EACfG,KAAK,EAAE;AACT,CAAC;AAAC,IAAA+B,QAAA,GAAAC,OAAA,CAAAnB,OAAA,GAEaS,kBAAkB"}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_qs","_reactThemes","_ScalableRect","_Throbber","_jsxRuntime","baseTheme","throbberTheme","validThemeKeys","YouTubeVideo","autoplay","src","theme","title","srcParts","split","url","queryString","query","qs","parse","videoId","v","match","stringify","jsxs","default","className","container","ratio","children","jsx","allow","allowFullScreen","video","ThemedYouTubeVideo","themed","propTypes","PT","bool","string","isRequired","themeType","defaultProps","_default","exports"],"sources":["../../../../../src/shared/components/YouTubeVideo/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport qs from 'qs';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport ScalableRect from 'components/ScalableRect';\nimport Throbber from 'components/Throbber';\n\nimport baseTheme from './base.scss';\nimport throbberTheme from './throbber.scss';\n\nconst validThemeKeys = ['container', 'video'] as const;\n\ntype ComponentThemeT = Theme<typeof validThemeKeys>;\n\ntype PropsT = {\n  autoplay?: boolean;\n  src: string;\n  theme: ComponentThemeT,\n  title?: string;\n};\n\n/**\n * A component for embeding a YouTube video.\n * @param [props] Component properties.\n * @param [props.autoplay] If `true` the video will start to play\n * automatically once loaded.\n * @param [props.src] URL of the video to play. Can be in any of\n * the following formats, and keeps any additional query parameters understood\n * by the YouTube IFrame player:\n * - `https://www.youtube.com/watch?v=NdF6Rmt6Ado`\n * - `https://youtu.be/NdF6Rmt6Ado`\n * - `https://www.youtube.com/embed/NdF6Rmt6Ado`\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.title] The `title` attribute to add to the player\n * IFrame.\n */\nconst YouTubeVideo: React.FunctionComponent<PropsT> = ({\n  autoplay,\n  src,\n  theme,\n  title,\n}) => {\n  const srcParts = src.split('?');\n  let url = srcParts[0];\n  const queryString = srcParts[1];\n  const query = queryString ? qs.parse(queryString) : {};\n\n  const videoId = query.v || url.match(/\\/([a-zA-Z0-9-_]*)$/)?.[1];\n  url = `https://www.youtube.com/embed/${videoId}`;\n\n  delete query.v;\n  query.autoplay = autoplay ? '1' : '0';\n  url += `?${qs.stringify(query)}`;\n\n  // TODO: https://developers.google.com/youtube/player_parameters\n  // More query parameters can be exposed via the component props.\n\n  return (\n    <ScalableRect className={theme.container} ratio=\"16:9\">\n      <Throbber theme={throbberTheme} />\n      <iframe\n        allow=\"autoplay\"\n        allowFullScreen\n        className={theme.video}\n        src={url}\n        title={title}\n      />\n    </ScalableRect>\n  );\n};\n\nconst ThemedYouTubeVideo = themed(\n  YouTubeVideo,\n  'YouTubeVideo',\n  validThemeKeys,\n  baseTheme,\n);\n\nYouTubeVideo.propTypes = {\n  autoplay: PT.bool,\n  src: PT.string.isRequired,\n  theme: ThemedYouTubeVideo.themeType.isRequired,\n  title: PT.string,\n};\n\nYouTubeVideo.defaultProps = {\n  autoplay: false,\n  title: '',\n};\n\nexport default ThemedYouTubeVideo;\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,aAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAAA,MAAAM,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,MAAAC,aAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAK3C,MAAMC,cAAc,GAAG,CAAC,WAAW,EAAE,OAAO,CAAU;AAWtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAA6C,GAAGA,CAAC;EACrDC,QAAQ;EACRC,GAAG;EACHC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAGH,GAAG,CAACI,KAAK,CAAC,GAAG,CAAC;EAC/B,IAAIC,GAAG,GAAGF,QAAQ,CAAC,CAAC,CAAC;EACrB,MAAMG,WAAW,GAAGH,QAAQ,CAAC,CAAC,CAAC;EAC/B,MAAMI,KAAK,GAAGD,WAAW,GAAGE,WAAE,CAACC,KAAK,CAACH,WAAW,CAAC,GAAG,CAAC,CAAC;EAEtD,MAAMI,OAAO,GAAGH,KAAK,CAACI,CAAC,IAAIN,GAAG,CAACO,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;EAChEP,GAAG,GAAI,iCAAgCK,OAAQ,EAAC;EAEhD,OAAOH,KAAK,CAACI,CAAC;EACdJ,KAAK,CAACR,QAAQ,GAAGA,QAAQ,GAAG,GAAG,GAAG,GAAG;EACrCM,GAAG,IAAK,IAAGG,WAAE,CAACK,SAAS,CAACN,KAAK,CAAE,EAAC;;EAEhC;EACA;;EAEA,oBACE,IAAAb,WAAA,CAAAoB,IAAA,EAACtB,aAAA,CAAAuB,OAAY;IAACC,SAAS,EAAEf,KAAK,CAACgB,SAAU;IAACC,KAAK,EAAC,MAAM;IAAAC,QAAA,gBACpD,IAAAzB,WAAA,CAAA0B,GAAA,EAAC3B,SAAA,CAAAsB,OAAQ;MAACd,KAAK,EAAEL;IAAc,CAAE,CAAC,eAClC,IAAAF,WAAA,CAAA0B,GAAA;MACEC,KAAK,EAAC,UAAU;MAChBC,eAAe;MACfN,SAAS,EAAEf,KAAK,CAACsB,KAAM;MACvBvB,GAAG,EAAEK,GAAI;MACTH,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACU,CAAC;AAEnB,CAAC;AAED,MAAMsB,kBAAkB,GAAG,IAAAC,oBAAM,EAC/B3B,YAAY,EACZ,cAAc,EACdD,cAAc,EACdF,SACF,CAAC;AAEDG,YAAY,CAAC4B,SAAS,GAAG;EACvB3B,QAAQ,EAAE4B,kBAAE,CAACC,IAAI;EACjB5B,GAAG,EAAE2B,kBAAE,CAACE,MAAM,CAACC,UAAU;EACzB7B,KAAK,EAAEuB,kBAAkB,CAACO,SAAS,CAACD,UAAU;EAC9C5B,KAAK,EAAEyB,kBAAE,CAACE;AACZ,CAAC;AAED/B,YAAY,CAACkC,YAAY,GAAG;EAC1BjC,QAAQ,EAAE,KAAK;EACfG,KAAK,EAAE;AACT,CAAC;AAAC,IAAA+B,QAAA,GAAAC,OAAA,CAAAnB,OAAA,GAEaS,kBAAkB"}

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

@@ -70,6 +70,12 @@ Object.defineProperty(exports, "ScalableRect", {
     return _ScalableRect.default;
   }
 });
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.default;
+  }
+});
 Object.defineProperty(exports, "Throbber", {
   enumerable: true,
   get: function () {
@@ -101,6 +107,7 @@ var _ScalableRect = _interopRequireDefault(require("./ScalableRect"));
 var _Throbber = _interopRequireDefault(require("./Throbber"));
 var _WithTooltip = _interopRequireDefault(require("./WithTooltip"));
 var _YouTubeVideo = _interopRequireDefault(require("./YouTubeVideo"));
+var _TextArea = _interopRequireDefault(require("./TextArea"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Button","_interopRequireDefault","require","_Checkbox","_Dropdown","_Input","_Link","_PageLayout","_MetaTags","_Modal","_interopRequireWildcard","_NavLink","_ScalableRect","_Throbber","_WithTooltip","_YouTubeVideo","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set"],"sources":["../../../../src/shared/components/index.ts"],"sourcesContent":["/**\n * Just an aggregation of all exported components into a single module.\n */\n\nexport { default as Button } from 'components/Button';\nexport { default as Checkbox } from 'components/Checkbox';\nexport { default as Dropdown } from 'components/Dropdown';\nexport { default as Input } from 'components/Input';\nexport { default as Link } from 'components/Link';\nexport { default as PageLayout } from 'components/PageLayout';\nexport { default as MetaTags } from 'components/MetaTags';\nexport { default as Modal, BaseModal } from 'components/Modal';\nexport { default as NavLink } from 'components/NavLink';\nexport { default as ScalableRect } from 'components/ScalableRect';\nexport { default as Throbber } from 'components/Throbber';\nexport { default as WithTooltip } from 'components/WithTooltip';\nexport { default as YouTubeVideo } from 'components/YouTubeVideo';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,WAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAC,uBAAA,CAAAR,OAAA;AACA,IAAAS,QAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,aAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,SAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,YAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,aAAA,GAAAd,sBAAA,CAAAC,OAAA;AAAkE,SAAAc,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA"}
+{"version":3,"file":"index.js","names":["_Button","_interopRequireDefault","require","_Checkbox","_Dropdown","_Input","_Link","_PageLayout","_MetaTags","_Modal","_interopRequireWildcard","_NavLink","_ScalableRect","_Throbber","_WithTooltip","_YouTubeVideo","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set"],"sources":["../../../../src/shared/components/index.ts"],"sourcesContent":["/**\n * Just an aggregation of all exported components into a single module.\n */\n\nexport { default as Button } from 'components/Button';\nexport { default as Checkbox } from 'components/Checkbox';\nexport { default as Dropdown } from 'components/Dropdown';\nexport { default as Input } from 'components/Input';\nexport { default as Link } from 'components/Link';\nexport { default as PageLayout } from 'components/PageLayout';\nexport { default as MetaTags } from 'components/MetaTags';\nexport { default as Modal, BaseModal } from 'components/Modal';\nexport { default as NavLink } from 'components/NavLink';\nexport { default as ScalableRect } from 'components/ScalableRect';\nexport { default as Throbber } from 'components/Throbber';\nexport { default as WithTooltip } from 'components/WithTooltip';\nexport { default as YouTubeVideo } from 'components/YouTubeVideo';\n\nexport { default as TextArea } from './TextArea';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,WAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAC,uBAAA,CAAAR,OAAA;AACA,IAAAS,QAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,aAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,SAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,YAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,aAAA,GAAAd,sBAAA,CAAAC,OAAA;AAEA,IAAAc,SAAA,GAAAf,sBAAA,CAAAC,OAAA;AAAiD,SAAAe,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA"}

package/build/development/style.css

@@ -217,16 +217,23 @@ body {
 /**
  * A simple drop-in typography mixin.
  */
+*.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___dropdown___-LiQj8,
+.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___context___haRIry.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___dropdown___-LiQj8,
+.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___ad___D4XHG2.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___hoc___N3nd34.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___dropdown___-LiQj8 {
+  position: relative;
+}
 *.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___arrow___-zPK7Y,
 .-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___context___haRIry.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___arrow___-zPK7Y,
 .-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___ad___D4XHG2.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___hoc___N3nd34.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___arrow___-zPK7Y {
   background-image: linear-gradient(to top, lightgray, white 50%, white);
   border: 1px solid gray;
   border-radius: 0 0.3em 0.3em 0;
+  bottom: 0;
   padding: 0.3em 0.6em;
   pointer-events: none;
   position: absolute;
   right: 0;
+  top: 0;
 }
 *.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___container___9CQpeA,
 .-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___context___haRIry.-dr-pogodin-react-utils___src-shared-components-Dropdown-theme___container___9CQpeA,
@@ -602,3 +609,85 @@ body.scrolling-disabled-by-modal {
   transform: translateY(50%);
   width: 100%;
 }
+/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./src/shared/components/TextArea/style.scss ***!
+  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
+/* Collection of standard mixins, being used all around. */
+/* Auxiliary mixins for fonts inclusion. */
+/**
+ * Includes a font, provided as a set of alternative files in EOT, WOFF, TTF,
+ * SVG formats into the app.
+ * $font-name {String}
+ * $font-weight {Number}
+ * $font-style {String}
+ * $font-url {String} Path to the font file, without the filename itself.
+ * $font-file {String} Font filename, without extension (should be the same for
+ *  each version of the font in different formats.
+ */
+/**
+ * Includes a font, provided in the TTF format only.
+ * $font-name {String}
+ * $font-weight {Number}
+ * $font-style {String}
+ * $font-url {String}
+ */
+/**
+ * Mixins for different layout sizes: xs, sm, md, lg.
+ * Breaking points are defined in _variables.scss
+ * The range mixins A-to-B all means "for the sizes from A to B, both
+ * inclusive", in particular it means that mixin A-to-lg is equivalent to
+ * all sizes from A (inclusive) and larger.
+ *
+ * NOTE: For convenience, these mixins are sorted not alphabetically, but,
+ * first, by increase of the first size; second, by increase of the second size.
+ */
+/* Break points. */
+/* XS */
+/* SM */
+/* MM */
+/* MD */
+/* LG */
+/* XL */
+/**
+ * A simple drop-in typography mixin.
+ */
+*.-dr-pogodin-react-utils___src-shared-components-TextArea-style___container___dzMVIB,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___context___KVPc7g.-dr-pogodin-react-utils___src-shared-components-TextArea-style___container___dzMVIB,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___ad___z2GQ0Z.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hoc___8R1Qdj.-dr-pogodin-react-utils___src-shared-components-TextArea-style___container___dzMVIB {
+  margin: 0.1em;
+  position: relative;
+}
+*.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___context___KVPc7g.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___ad___z2GQ0Z.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hoc___8R1Qdj.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg {
+  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;
+}
+*.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg:focus,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___context___KVPc7g.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg:focus,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___ad___z2GQ0Z.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hoc___8R1Qdj.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg:focus {
+  border-color: blue;
+  box-shadow: 0 0 3px 1px lightblue;
+}
+*.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg::-moz-placeholder, .-dr-pogodin-react-utils___src-shared-components-TextArea-style___context___KVPc7g.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg::-moz-placeholder, .-dr-pogodin-react-utils___src-shared-components-TextArea-style___ad___z2GQ0Z.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hoc___8R1Qdj.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg::-moz-placeholder {
+  color: gray;
+}
+*.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg::placeholder,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___context___KVPc7g.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg::placeholder,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___ad___z2GQ0Z.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hoc___8R1Qdj.-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg::placeholder {
+  color: gray;
+}
+*.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hidden___GiHBXI,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___context___KVPc7g.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hidden___GiHBXI,
+.-dr-pogodin-react-utils___src-shared-components-TextArea-style___ad___z2GQ0Z.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hoc___8R1Qdj.-dr-pogodin-react-utils___src-shared-components-TextArea-style___hidden___GiHBXI {
+  position: absolute;
+  z-index: -1;
+}