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

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

@@ -1,24 +1,17 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BaseModal = void 0;
-var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
-var _jsxRuntime = require("react/jsx-runtime");
+import { useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import themed from '@dr.pogodin/react-themes';
 const baseTheme = {
-  "context": "-dr-pogodin-react-utils___src-shared-components-Modal-base-theme___context___Szmbbz",
-  "ad": "-dr-pogodin-react-utils___src-shared-components-Modal-base-theme___ad___Ah-Nsc",
-  "hoc": "-dr-pogodin-react-utils___src-shared-components-Modal-base-theme___hoc___Wki41G",
-  "overlay": "-dr-pogodin-react-utils___src-shared-components-Modal-base-theme___overlay___ye2BZo",
-  "container": "-dr-pogodin-react-utils___src-shared-components-Modal-base-theme___container___gyZ4rc"
+  "context": "-dr-pogodin-react-utils___build-web-shared-components-Modal-base-theme___context___sCYXfW",
+  "ad": "-dr-pogodin-react-utils___build-web-shared-components-Modal-base-theme___ad___e0BH-f",
+  "hoc": "-dr-pogodin-react-utils___build-web-shared-components-Modal-base-theme___hoc___vqUuSP",
+  "overlay": "-dr-pogodin-react-utils___build-web-shared-components-Modal-base-theme___overlay___uAH4as",
+  "container": "-dr-pogodin-react-utils___build-web-shared-components-Modal-base-theme___container___zqpc6q"
 };
 const S = {
-  "scrollingDisabledByModal": "-dr-pogodin-react-utils___src-shared-components-Modal-styles___scrollingDisabledByModal___5fRFtF"
+  "scrollingDisabledByModal": "-dr-pogodin-react-utils___build-web-shared-components-Modal-styles___scrollingDisabledByModal___yfvOIZ"
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The `<Modal>` component implements a simple themeable modal window, wrapped
  * into the default theme. `<BaseModal>` exposes the base non-themed component.
@@ -42,11 +35,11 @@ const BaseModal = ({
   testIdForOverlay,
   theme
 }) => {
-  const containerRef = (0, _react.useRef)(null);
-  const overlayRef = (0, _react.useRef)(null);
+  const containerRef = useRef(null);
+  const overlayRef = useRef(null);
 
   // Sets up modal cancellation of scrolling, if opted-in.
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (cancelOnScrolling && onCancel) {
       window.addEventListener('scroll', onCancel);
       window.addEventListener('wheel', onCancel);
@@ -60,7 +53,7 @@ const BaseModal = ({
   }, [cancelOnScrolling, onCancel]);
 
   // Disables window scrolling, if it is not opted-out.
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (!dontDisableScrolling) {
       document.body.classList.add(S.scrollingDisabledByModal);
     }
@@ -70,7 +63,7 @@ const BaseModal = ({
       }
     };
   }, [dontDisableScrolling]);
-  const focusLast = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const focusLast = useMemo(() => /*#__PURE__*/_jsx("div", {
     onFocus: () => {
       const elems = containerRef.current.querySelectorAll('*');
       for (let i = elems.length - 1; i >= 0; --i) {
@@ -82,10 +75,11 @@ const BaseModal = ({
     // TODO: Have a look at this later.
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
+
     tabIndex: 0
   }), []);
-  return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [focusLast, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs("div", {
+    children: [focusLast, /*#__PURE__*/_jsx("div", {
       "aria-label": "Cancel",
       className: theme.overlay,
       "data-testid": process.env.NODE_ENV === 'production' ? undefined : testIdForOverlay,
@@ -110,7 +104,7 @@ const BaseModal = ({
       role: "button",
       style: overlayStyle,
       tabIndex: 0
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
       "aria-modal": "true",
       className: theme.container,
@@ -125,18 +119,20 @@ const BaseModal = ({
       role: "dialog",
       style: style ?? containerStyle,
       children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       onFocus: () => {
         overlayRef.current?.focus();
       }
       // TODO: Have a look at this later.
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       ,
+
       tabIndex: 0
     }), focusLast]
   }), document.body);
 };
-exports.BaseModal = BaseModal;
-var _default = exports.default = (0, _reactThemes.default)(BaseModal, 'Modal', baseTheme);
+export default /* #__PURE__ */themed(BaseModal, 'Modal', baseTheme);
+
 /* Non-themed version of the Modal. */
+export { BaseModal };
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,20 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactRouter = require("react-router");
-var _GenericLink = _interopRequireDefault(require("./GenericLink"));
-var _jsxRuntime = require("react/jsx-runtime");
-const NavLink = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericLink.default
+import { NavLink as RrNavLink } from 'react-router';
+import GenericLink from "./GenericLink/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const NavLink = props => /*#__PURE__*/_jsx(GenericLink
 // TODO: I guess, we better re-write it to avoid the props spreading,
 // but no need to spend time on it right now.
 // eslint-disable-next-line react/jsx-props-no-spreading
 , {
   ...props,
-  routerLinkType: _reactRouter.NavLink
+  routerLinkType: RrNavLink
 });
-var _default = exports.default = NavLink;
+export default NavLink;
 //# sourceMappingURL=NavLink.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavLink.js","names":["_reactRouter","require","_GenericLink","_interopRequireDefault","_jsxRuntime","NavLink","props","jsx","default","routerLinkType","RrNavLink","_default","exports"],"sources":["../../../../src/shared/components/NavLink.tsx"],"sourcesContent":["import { type NavLinkProps, NavLink as RrNavLink } from 'react-router';\n\nimport GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';\n\ntype PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & NavLinkProps;\n\nconst NavLink: React.FunctionComponent<PropsT>\n  = (props) => (\n    <GenericLink\n      // TODO: I guess, we better re-write it to avoid the props spreading,\n      // but no need to spend time on it right now.\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n      routerLinkType={RrNavLink}\n    />\n  );\n\nexport default NavLink;\n"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA8E,IAAAG,WAAA,GAAAH,OAAA;AAI9E,MAAMI,OAAwC,GACzCC,KAAK,iBACN,IAAAF,WAAA,CAAAG,GAAA,EAACL,YAAA,CAAAM;AACC;AACA;AACA;AAAA;EAAA,GACIF,KAAK;EACTG,cAAc,EAAEC;AAAU,CAC3B,CACF;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEWH,OAAO","ignoreList":[]}
+{"version":3,"file":"NavLink.js","names":["NavLink","RrNavLink","GenericLink","jsx","_jsx","props","routerLinkType"],"sources":["../../../../src/shared/components/NavLink.tsx"],"sourcesContent":["import { type NavLinkProps, NavLink as RrNavLink } from 'react-router';\n\nimport GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';\n\ntype PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & NavLinkProps;\n\nconst NavLink: React.FunctionComponent<PropsT>\n  = (props) => (\n    <GenericLink\n      // TODO: I guess, we better re-write it to avoid the props spreading,\n      // but no need to spend time on it right now.\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n      routerLinkType={RrNavLink}\n    />\n  );\n\nexport default NavLink;\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,SAAS,QAAQ,cAAc;AAAA,OAE/DC,WAAW;AAA4D,SAAAC,GAAA,IAAAC,IAAA;AAI9E,MAAMJ,OAAwC,GACzCK,KAAK,iBACND,IAAA,CAACF;AACC;AACA;AACA;AAAA;EAAA,GACIG,KAAK;EACTC,cAAc,EAAEL;AAAU,CAC3B,CACF;AAEH,eAAeD,OAAO","ignoreList":[]}

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

@@ -1,20 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
-var _jsxRuntime = require("react/jsx-runtime");
+import themed from '@dr.pogodin/react-themes';
 const baseTheme = {
-  "context": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___context___m4mL-M",
-  "ad": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___ad___m3-mdC",
-  "hoc": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___hoc___J15Z4H",
-  "container": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___container___T3cuHB",
-  "mainPanel": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___mainPanel___pPlQO2",
-  "sidePanel": "-dr-pogodin-react-utils___src-shared-components-PageLayout-base-theme___sidePanel___lqNh4h"
+  "context": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___context___zv9tdn",
+  "ad": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___ad___yr8hbI",
+  "hoc": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___hoc___01Mz0J",
+  "container": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___container___blPmpk",
+  "mainPanel": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___mainPanel___zPoY0u",
+  "sidePanel": "-dr-pogodin-react-utils___build-web-shared-components-PageLayout-base-theme___sidePanel___mRD159"
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Simple and themeable page layout. It keeps the main content centered in
  * a column of limited width, which fills entire viewport on small screens
@@ -35,18 +28,18 @@ const PageLayout = ({
   leftSidePanelContent,
   rightSidePanelContent,
   theme
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+}) => /*#__PURE__*/_jsxs("div", {
   className: theme.container,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  children: [/*#__PURE__*/_jsx("div", {
     className: [theme.sidePanel, theme.leftSidePanel].join(' '),
     children: leftSidePanelContent
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  }), /*#__PURE__*/_jsx("div", {
     className: theme.mainPanel,
     children: children
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  }), /*#__PURE__*/_jsx("div", {
     className: [theme.sidePanel, theme.rightSidePanel].join(' '),
     children: rightSidePanelContent
   })]
 });
-var _default = exports.default = (0, _reactThemes.default)(PageLayout, 'PageLayout', baseTheme);
+export default /* #__PURE__ */themed(PageLayout, 'PageLayout', baseTheme);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_reactThemes","_interopRequireDefault","require","_jsxRuntime","baseTheme","PageLayout","children","leftSidePanelContent","rightSidePanelContent","theme","jsxs","className","container","jsx","sidePanel","leftSidePanel","join","mainPanel","rightSidePanel","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/PageLayout/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\n\ntype ThemeKeyT = 'container' | 'leftSidePanel' | 'mainPanel' | 'rightSidePanel'\n  | 'sidePanel';\n\ntype PropsT = {\n  children?: ReactNode;\n  leftSidePanelContent?: ReactNode;\n  rightSidePanelContent?: ReactNode;\n  theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Simple and themeable page layout. It keeps the main content centered in\n * a column of limited width, which fills entire viewport on small screens\n * (under `$screen-md = 1024px` size). At larger screens the column keeps\n * `$screen-md` size, and it is centered at the page, surrounded by side\n * panels, where additional content can be displayed.\n *\n * **Children:** Component children are rendered as the content of main panel.\n * @param {object} [props] Component properties.\n * @param {Node} [props.leftSidePanelContent] The content for left side panel.\n * @param {Node} [props.rightSidePanelContent] The content for right side panel.\n * @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.\n * @param {...any} [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst PageLayout: React.FunctionComponent<PropsT> = ({\n  children,\n  leftSidePanelContent,\n  rightSidePanelContent,\n  theme,\n}) => (\n  <div className={theme.container}>\n    <div className={[theme.sidePanel, theme.leftSidePanel].join(' ')}>\n      {leftSidePanelContent}\n    </div>\n    <div className={theme.mainPanel}>\n      {children}\n    </div>\n    <div className={[theme.sidePanel, theme.rightSidePanel].join(' ')}>\n      {rightSidePanelContent}\n    </div>\n  </div>\n);\n\nexport default themed(PageLayout, 'PageLayout', baseTheme);\n"],"mappings":";;;;;;;AAEA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8D,IAAAC,WAAA,GAAAD,OAAA;AAAA,MAAAE,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAc9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAA2C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,oBAAoB;EACpBC,qBAAqB;EACrBC;AACF,CAAC,kBACC,IAAAN,WAAA,CAAAO,IAAA;EAAKC,SAAS,EAAEF,KAAK,CAACG,SAAU;EAAAN,QAAA,gBAC9B,IAAAH,WAAA,CAAAU,GAAA;IAAKF,SAAS,EAAE,CAACF,KAAK,CAACK,SAAS,EAAEL,KAAK,CAACM,aAAa,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE;IAAAV,QAAA,EAC9DC;EAAoB,CAClB,CAAC,eACN,IAAAJ,WAAA,CAAAU,GAAA;IAAKF,SAAS,EAAEF,KAAK,CAACQ,SAAU;IAAAX,QAAA,EAC7BA;EAAQ,CACN,CAAC,eACN,IAAAH,WAAA,CAAAU,GAAA;IAAKF,SAAS,EAAE,CAACF,KAAK,CAACK,SAAS,EAAEL,KAAK,CAACS,cAAc,CAAC,CAACF,IAAI,CAAC,GAAG,CAAE;IAAAV,QAAA,EAC/DE;EAAqB,CACnB,CAAC;AAAA,CACH,CACN;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa,IAAAC,oBAAM,EAACjB,UAAU,EAAE,YAAY,EAAED,SAAS,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["themed","baseTheme","jsx","_jsx","jsxs","_jsxs","PageLayout","children","leftSidePanelContent","rightSidePanelContent","theme","className","container","sidePanel","leftSidePanel","join","mainPanel","rightSidePanel"],"sources":["../../../../../src/shared/components/PageLayout/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\n\ntype ThemeKeyT = 'container' | 'leftSidePanel' | 'mainPanel' | 'rightSidePanel'\n  | 'sidePanel';\n\ntype PropsT = {\n  children?: ReactNode;\n  leftSidePanelContent?: ReactNode;\n  rightSidePanelContent?: ReactNode;\n  theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Simple and themeable page layout. It keeps the main content centered in\n * a column of limited width, which fills entire viewport on small screens\n * (under `$screen-md = 1024px` size). At larger screens the column keeps\n * `$screen-md` size, and it is centered at the page, surrounded by side\n * panels, where additional content can be displayed.\n *\n * **Children:** Component children are rendered as the content of main panel.\n * @param {object} [props] Component properties.\n * @param {Node} [props.leftSidePanelContent] The content for left side panel.\n * @param {Node} [props.rightSidePanelContent] The content for right side panel.\n * @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.\n * @param {...any} [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst PageLayout: React.FunctionComponent<PropsT> = ({\n  children,\n  leftSidePanelContent,\n  rightSidePanelContent,\n  theme,\n}) => (\n  <div className={theme.container}>\n    <div className={[theme.sidePanel, theme.leftSidePanel].join(' ')}>\n      {leftSidePanelContent}\n    </div>\n    <div className={theme.mainPanel}>\n      {children}\n    </div>\n    <div className={[theme.sidePanel, theme.rightSidePanel].join(' ')}>\n      {rightSidePanelContent}\n    </div>\n  </div>\n);\n\nexport default /* #__PURE__ */ themed(PageLayout, 'PageLayout', baseTheme);\n"],"mappings":"AAEA,OAAOA,MAAM,MAAsB,0BAA0B;AAAA,MAAAC,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAEnB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAY1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAA2C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,oBAAoB;EACpBC,qBAAqB;EACrBC;AACF,CAAC,kBACCL,KAAA;EAAKM,SAAS,EAAED,KAAK,CAACE,SAAU;EAAAL,QAAA,gBAC9BJ,IAAA;IAAKQ,SAAS,EAAE,CAACD,KAAK,CAACG,SAAS,EAAEH,KAAK,CAACI,aAAa,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE;IAAAR,QAAA,EAC9DC;EAAoB,CAClB,CAAC,eACNL,IAAA;IAAKQ,SAAS,EAAED,KAAK,CAACM,SAAU;IAAAT,QAAA,EAC7BA;EAAQ,CACN,CAAC,eACNJ,IAAA;IAAKQ,SAAS,EAAE,CAACD,KAAK,CAACG,SAAS,EAAEH,KAAK,CAACO,cAAc,CAAC,CAACF,IAAI,CAAC,GAAG,CAAE;IAAAR,QAAA,EAC/DE;EAAqB,CACnB,CAAC;AAAA,CACH,CACN;AAED,eAAe,eAAgBT,MAAM,CAACM,UAAU,EAAE,YAAY,EAAEL,SAAS,CAAC","ignoreList":[]}

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

@@ -1,24 +1,17 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
-var _jsxRuntime = require("react/jsx-runtime");
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import themed from '@dr.pogodin/react-themes';
 const defaultTheme = {
-  "context": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___context___KVPc7g",
-  "ad": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___ad___z2GQ0Z",
-  "hoc": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___hoc___8R1Qdj",
-  "container": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___container___dzMVIB",
-  "label": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___label___Vw9EKL",
-  "textarea": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___textarea___zd-OFg",
-  "error": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___error___K2JcEY",
-  "errorMessage": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___errorMessage___nWsJDB",
-  "hidden": "-dr-pogodin-react-utils___src-shared-components-TextArea-style___hidden___GiHBXI"
+  "context": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___context___tECG8C",
+  "ad": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___ad___epeH4O",
+  "hoc": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___hoc___2kFnSt",
+  "container": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___container___lV5ZyX",
+  "label": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___label___7qDPW1",
+  "textarea": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___textarea___gkaNJJ",
+  "error": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___error___ObwtG4",
+  "errorMessage": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___errorMessage___ikIw0x",
+  "hidden": "-dr-pogodin-react-utils___build-web-shared-components-TextArea-style___hidden___-UyujK"
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TextArea = ({
   disabled,
   error,
@@ -31,14 +24,14 @@ const TextArea = ({
   theme,
   value
 }) => {
-  const hiddenAreaRef = (0, _react.useRef)(null);
-  const [height, setHeight] = (0, _react.useState)();
-  const textAreaRef = (0, _react.useRef)(null);
-  const [localValue, setLocalValue] = (0, _react.useState)(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.
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const el = hiddenAreaRef.current;
     if (!el) return undefined;
     const cb = () => {
@@ -58,33 +51,35 @@ const TextArea = ({
   // 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
-  (0, _react.useLayoutEffect)(() => {
+  useLayoutEffect(() => {
     const el = hiddenAreaRef.current;
     if (el) setHeight(el.scrollHeight);
   }, [localValue]);
   let containerClassName = theme.container;
   if (error) containerClassName += ` ${theme.error}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: containerClassName,
     onFocus: () => {
       textAreaRef.current?.focus();
     },
-    children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [label === undefined ? null : /*#__PURE__*/_jsx("div", {
       className: theme.label,
       children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+    }), /*#__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
@@ -92,8 +87,9 @@ const TextArea = ({
       // input height. To avoid it we fallback to whitespace (" ") character
       // here.
       ,
+
       value: localValue || ' '
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+    }), /*#__PURE__*/_jsx("textarea", {
       className: theme.textarea,
       "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
       disabled: disabled,
@@ -103,6 +99,7 @@ const TextArea = ({
       // manage it internally for the measurement / resizing functionality
       // to work.
       ,
+
       onChange: value === undefined ? e => {
         setLocalValue(e.target.value);
       } : onChange,
@@ -113,11 +110,11 @@ const TextArea = ({
         height
       },
       value: localValue
-    }), error && error !== true ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), error && error !== true ? /*#__PURE__*/_jsx("div", {
       className: theme.errorMessage,
       children: error
     }) : null]
   });
 };
-var _default = exports.default = (0, _reactThemes.default)(TextArea, 'TextArea', defaultTheme);
+export default /* #__PURE__ */themed(TextArea, 'TextArea', defaultTheme);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","TextArea","disabled","error","label","onBlur","onChange","onKeyDown","placeholder","testId","theme","value","hiddenAreaRef","useRef","height","setHeight","useState","textAreaRef","localValue","setLocalValue","undefined","useEffect","el","current","cb","scrollHeight","observer","ResizeObserver","observe","disconnect","useLayoutEffect","containerClassName","container","jsxs","className","onFocus","focus","children","jsx","textarea","hidden","readOnly","ref","tabIndex","process","env","NODE_ENV","e","target","style","errorMessage","_default","exports","default","themed"],"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":[]}
+{"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 /* #__PURE__ */ themed(TextArea, 'TextArea', defaultTheme);\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,20 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
-var _jsxRuntime = require("react/jsx-runtime");
+import themed from '@dr.pogodin/react-themes';
 const defaultTheme = {
-  "context": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___context___uIObt7",
-  "ad": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___ad___XIxe9o",
-  "hoc": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___hoc___YOyORH",
-  "bouncing": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___bouncing___TJe-6j",
-  "container": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___container___7zdld4",
-  "circle": "-dr-pogodin-react-utils___src-shared-components-Throbber-theme___circle___dBrB4g"
+  "context": "-dr-pogodin-react-utils___build-web-shared-components-Throbber-theme___context___eVCJf-",
+  "ad": "-dr-pogodin-react-utils___build-web-shared-components-Throbber-theme___ad___CU2B6H",
+  "hoc": "-dr-pogodin-react-utils___build-web-shared-components-Throbber-theme___hoc___1V5iVx",
+  "bouncing": "-dr-pogodin-react-utils___build-web-shared-components-Throbber-theme___bouncing___h6ZYmQ",
+  "container": "-dr-pogodin-react-utils___build-web-shared-components-Throbber-theme___container___VDVI-X",
+  "circle": "-dr-pogodin-react-utils___build-web-shared-components-Throbber-theme___circle___Y2rzbL"
 };
+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,
@@ -26,15 +19,15 @@ const defaultTheme = {
  */
 const Throbber = ({
   theme
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+}) => /*#__PURE__*/_jsxs("span", {
   className: theme.container,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  children: [/*#__PURE__*/_jsx("span", {
     className: theme.circle
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  }), /*#__PURE__*/_jsx("span", {
     className: theme.circle
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  }), /*#__PURE__*/_jsx("span", {
     className: theme.circle
   })]
 });
-var _default = exports.default = (0, _reactThemes.default)(Throbber, 'Throbber', defaultTheme);
+export default /* #__PURE__ */themed(Throbber, 'Throbber', defaultTheme);
 //# sourceMappingURL=index.js.map

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","_default","exports","default","themed"],"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,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8D,IAAAC,WAAA,GAAAD,OAAA;AAAA,MAAAE,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAU9D;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;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa,IAAAC,oBAAM,EAACX,QAAQ,EAAE,UAAU,EAAED,YAAY,CAAC","ignoreList":[]}
+{"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 /* #__PURE__ */ themed(Throbber, 'Throbber', defaultTheme);\n"],"mappings":"AAAA,OAAOA,MAAM,MAAsB,0BAA0B;AAAA,MAAAC,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAErB,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,eAAe,eAAgBX,MAAM,CAACM,QAAQ,EAAE,UAAU,EAAEL,YAAY,CAAC","ignoreList":[]}

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

@@ -1,22 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PLACEMENTS = void 0;
-var _react = require("react");
-var _reactDom = require("react-dom");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * The actual tooltip component. It is rendered outside the regular document
  * hierarchy, and with sub-components managed without React to achieve the best
  * 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.
  */
-let PLACEMENTS = exports.PLACEMENTS = /*#__PURE__*/function (PLACEMENTS) {
+export let PLACEMENTS = /*#__PURE__*/function (PLACEMENTS) {
   PLACEMENTS["ABOVE_CURSOR"] = "ABOVE_CURSOR";
   PLACEMENTS["ABOVE_ELEMENT"] = "ABOVE_ELEMENT";
   PLACEMENTS["BELOW_CURSOR"] = "BELOW_CURSOR";
@@ -198,9 +193,9 @@ const Tooltip = ({
   // Thus, when we create the <Tooltip> we have to record its target positioning
   // details, and then apply them when it is created.
 
-  const arrowRef = (0, _react.useRef)(null);
-  const containerRef = (0, _react.useRef)(null);
-  const contentRef = (0, _react.useRef)(null);
+  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');
@@ -211,21 +206,21 @@ const Tooltip = ({
       content: contentRef.current
     });
   };
-  (0, _react.useImperativeHandle)(ref, () => ({
+  useImperativeHandle(ref, () => ({
     pointTo
   }));
-  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs("div", {
     className: theme.container,
     ref: containerRef,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       className: theme.arrow,
       ref: arrowRef
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: theme.content,
       ref: contentRef,
       children: children
     })]
   }), document.body);
 };
-var _default = exports.default = Tooltip;
+export default Tooltip;
 //# sourceMappingURL=Tooltip.js.map