@dr.pogodin/react-utils 1.47.0-alpha.7 → 1.47.0-alpha.8

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useRef","useState","themed","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","error","label","ref","testId","theme","rest","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type ReactNode,\n  type Ref,\n  useRef,\n  useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n  | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n  children?: ReactNode;\n  error?: ReactNode;\n  label?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n  testId?: string;\n  theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n  children,\n  error,\n  label,\n  ref,\n  testId,\n  theme,\n  ...rest\n}) => {\n  // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n  // as otherwise its value is not used.\n  const [focused, setFocused] = useState(false);\n\n  const localRef = useRef<HTMLInputElement>(null);\n\n  let containerClassName = theme.container;\n\n  // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n  // is provided.\n  if (focused /* && theme.focused */) containerClassName += ` ${theme.focused}`;\n\n  if (!rest.value && theme.empty) containerClassName += ` ${theme.empty}`;\n\n  if (error) containerClassName += ` ${theme.error}`;\n\n  return (\n    <div\n      className={containerClassName}\n      onFocus={() => {\n        // TODO: It does not really work if a callback-style `ref` is passed in,\n        // we need a more complex logic to cover that case, but for now this serves\n        // the case we need it for.\n        if (typeof ref === 'object') ref?.current?.focus();\n        else localRef.current?.focus();\n      }}\n    >\n      {label === undefined ? null : <div className={theme.label}>{label}</div>}\n      <input\n        className={theme.input}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n        ref={ref ?? localRef}\n\n        // TODO: Avoid the spreading later.\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...rest}\n\n        onBlur={theme.focused ? (e) => {\n          setFocused(false);\n          rest.onBlur?.(e);\n        } : rest.onBlur}\n        onFocus={theme.focused ? (e) => {\n          setFocused(true);\n          rest.onFocus?.(e);\n        } : rest.onFocus}\n      />\n      {error && error !== true\n        ? <div className={theme.errorMessage}>{error}</div>\n        : null}\n      {children ? <div className={theme.children}>{children}</div> : null}\n    </div>\n  );\n};\n\nexport default themed(Input, 'Input', defaultTheme);\n"],"mappings":"AAAA,SAIEA,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,OAAOC,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAcxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAgC,GAAGA,CAAC;EACxCC,QAAQ;EACRC,KAAK;EACLC,KAAK;EACLC,GAAG;EACHC,MAAM;EACNC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ;EACA;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMiB,QAAQ,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAE/C,IAAImB,kBAAkB,GAAGL,KAAK,CAACM,SAAS;;EAExC;EACA;EACA,IAAIJ,OAAO,CAAC,wBAAwBG,kBAAkB,IAAI,IAAIL,KAAK,CAACE,OAAO,EAAE;EAE7E,IAAI,CAACD,IAAI,CAACM,KAAK,IAAIP,KAAK,CAACQ,KAAK,EAAEH,kBAAkB,IAAI,IAAIL,KAAK,CAACQ,KAAK,EAAE;EAEvE,IAAIZ,KAAK,EAAES,kBAAkB,IAAI,IAAIL,KAAK,CAACJ,KAAK,EAAE;EAElD,oBACEH,KAAA;IACEgB,SAAS,EAAEJ,kBAAmB;IAC9BK,OAAO,EAAEA,CAAA,KAAM;MACb;MACA;MACA;MACA,IAAI,OAAOZ,GAAG,KAAK,QAAQ,EAAEA,GAAG,EAAEa,OAAO,EAAEC,KAAK,CAAC,CAAC,CAAC,KAC9CR,QAAQ,CAACO,OAAO,EAAEC,KAAK,CAAC,CAAC;IAChC,CAAE;IAAAjB,QAAA,GAEDE,KAAK,KAAKgB,SAAS,GAAG,IAAI,gBAAGtB,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACH,KAAM;MAAAF,QAAA,EAAEE;IAAK,CAAM,CAAC,eACxEN,IAAA;MACEkB,SAAS,EAAET,KAAK,CAACc,KAAM;MACvB,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGJ,SAAS,GAAGd,MAAO;MACxED,GAAG,EAAEA,GAAG,IAAIM;;MAEZ;MACA;MAAA;MAAA,GACIH,IAAI;MAERiB,MAAM,EAAElB,KAAK,CAACE,OAAO,GAAIiB,CAAC,IAAK;QAC7BhB,UAAU,CAAC,KAAK,CAAC;QACjBF,IAAI,CAACiB,MAAM,GAAGC,CAAC,CAAC;MAClB,CAAC,GAAGlB,IAAI,CAACiB,MAAO;MAChBR,OAAO,EAAEV,KAAK,CAACE,OAAO,GAAIiB,CAAC,IAAK;QAC9BhB,UAAU,CAAC,IAAI,CAAC;QAChBF,IAAI,CAACS,OAAO,GAAGS,CAAC,CAAC;MACnB,CAAC,GAAGlB,IAAI,CAACS;IAAQ,CAClB,CAAC,EACDd,KAAK,IAAIA,KAAK,KAAK,IAAI,gBACpBL,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACoB,YAAa;MAAAzB,QAAA,EAAEC;IAAK,CAAM,CAAC,GACjD,IAAI,EACPD,QAAQ,gBAAGJ,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACL,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAM,CAAC,GAAG,IAAI;EAAA,CAChE,CAAC;AAEV,CAAC;AAED,eAAeP,MAAM,CAACM,KAAK,EAAE,OAAO,EAAEL,YAAY,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useRef","useState","themed","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","error","label","ref","testId","theme","rest","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type ReactNode,\n  type Ref,\n  useRef,\n  useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n  | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n  children?: ReactNode;\n  error?: ReactNode;\n  label?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n  testId?: string;\n  theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n  children,\n  error,\n  label,\n  ref,\n  testId,\n  theme,\n  ...rest\n}) => {\n  // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n  // as otherwise its value is not used.\n  const [focused, setFocused] = useState(false);\n\n  const localRef = useRef<HTMLInputElement>(null);\n\n  let containerClassName = theme.container;\n\n  // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n  // is provided.\n  if (focused /* && theme.focused */) containerClassName += ` ${theme.focused}`;\n\n  if (!rest.value && theme.empty) containerClassName += ` ${theme.empty}`;\n\n  if (error) containerClassName += ` ${theme.error}`;\n\n  return (\n    <div\n      className={containerClassName}\n      onFocus={() => {\n        // TODO: It does not really work if a callback-style `ref` is passed in,\n        // we need a more complex logic to cover that case, but for now this serves\n        // the case we need it for.\n        if (typeof ref === 'object') ref?.current?.focus();\n        else localRef.current?.focus();\n      }}\n    >\n      {label === undefined ? null : <div className={theme.label}>{label}</div>}\n      <input\n        className={theme.input}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n        ref={ref ?? localRef}\n\n        // TODO: Avoid the spreading later.\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...rest}\n\n        onBlur={theme.focused ? (e) => {\n          setFocused(false);\n          rest.onBlur?.(e);\n        } : rest.onBlur}\n        onFocus={theme.focused ? (e) => {\n          setFocused(true);\n          rest.onFocus?.(e);\n        } : rest.onFocus}\n      />\n      {error && error !== true\n        ? <div className={theme.errorMessage}>{error}</div>\n        : null}\n      {children ? <div className={theme.children}>{children}</div> : null}\n    </div>\n  );\n};\n\nexport default /* #__PURE__ */ themed(Input, 'Input', defaultTheme);\n"],"mappings":"AAAA,SAIEA,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,OAAOC,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAcxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAgC,GAAGA,CAAC;EACxCC,QAAQ;EACRC,KAAK;EACLC,KAAK;EACLC,GAAG;EACHC,MAAM;EACNC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ;EACA;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMiB,QAAQ,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAE/C,IAAImB,kBAAkB,GAAGL,KAAK,CAACM,SAAS;;EAExC;EACA;EACA,IAAIJ,OAAO,CAAC,wBAAwBG,kBAAkB,IAAI,IAAIL,KAAK,CAACE,OAAO,EAAE;EAE7E,IAAI,CAACD,IAAI,CAACM,KAAK,IAAIP,KAAK,CAACQ,KAAK,EAAEH,kBAAkB,IAAI,IAAIL,KAAK,CAACQ,KAAK,EAAE;EAEvE,IAAIZ,KAAK,EAAES,kBAAkB,IAAI,IAAIL,KAAK,CAACJ,KAAK,EAAE;EAElD,oBACEH,KAAA;IACEgB,SAAS,EAAEJ,kBAAmB;IAC9BK,OAAO,EAAEA,CAAA,KAAM;MACb;MACA;MACA;MACA,IAAI,OAAOZ,GAAG,KAAK,QAAQ,EAAEA,GAAG,EAAEa,OAAO,EAAEC,KAAK,CAAC,CAAC,CAAC,KAC9CR,QAAQ,CAACO,OAAO,EAAEC,KAAK,CAAC,CAAC;IAChC,CAAE;IAAAjB,QAAA,GAEDE,KAAK,KAAKgB,SAAS,GAAG,IAAI,gBAAGtB,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACH,KAAM;MAAAF,QAAA,EAAEE;IAAK,CAAM,CAAC,eACxEN,IAAA;MACEkB,SAAS,EAAET,KAAK,CAACc,KAAM;MACvB,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGJ,SAAS,GAAGd,MAAO;MACxED,GAAG,EAAEA,GAAG,IAAIM;;MAEZ;MACA;MAAA;MAAA,GACIH,IAAI;MAERiB,MAAM,EAAElB,KAAK,CAACE,OAAO,GAAIiB,CAAC,IAAK;QAC7BhB,UAAU,CAAC,KAAK,CAAC;QACjBF,IAAI,CAACiB,MAAM,GAAGC,CAAC,CAAC;MAClB,CAAC,GAAGlB,IAAI,CAACiB,MAAO;MAChBR,OAAO,EAAEV,KAAK,CAACE,OAAO,GAAIiB,CAAC,IAAK;QAC9BhB,UAAU,CAAC,IAAI,CAAC;QAChBF,IAAI,CAACS,OAAO,GAAGS,CAAC,CAAC;MACnB,CAAC,GAAGlB,IAAI,CAACS;IAAQ,CAClB,CAAC,EACDd,KAAK,IAAIA,KAAK,KAAK,IAAI,gBACpBL,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACoB,YAAa;MAAAzB,QAAA,EAAEC;IAAK,CAAM,CAAC,GACjD,IAAI,EACPD,QAAQ,gBAAGJ,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACL,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAM,CAAC,GAAG,IAAI;EAAA,CAChE,CAAC;AAEV,CAAC;AAED,eAAe,eAAgBP,MAAM,CAACM,KAAK,EAAE,OAAO,EAAEL,YAAY,CAAC","ignoreList":[]}

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

@@ -121,7 +121,7 @@ const BaseModal = ({
     }), focusLast]
   }), document.body);
 };
-export default themed(BaseModal, 'Modal', baseTheme);
+export default /* #__PURE__ */themed(BaseModal, 'Modal', baseTheme);
 
 /* Non-themed version of the Modal. */
 export { BaseModal };

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

@@ -1 +1 @@
-{"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 themed(BaseModal, 'Modal', baseTheme);\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"AAAA,SAIEA,SAAS,EACTC,OAAO,EACPC,MAAM,QACD,OAAO;AAEd,SAASC,YAAY,QAAQ,WAAW;AACxC,OAAOC,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,SAAS;AAChB,OAAOC,CAAC;AAAsB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiB9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAoC,GAAGA,CAAC;EAC5CC,iBAAiB;EACjBC,QAAQ;EACRC,cAAc;EACdC,oBAAoB;EACpBC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,MAAM;EACNC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ,MAAMC,YAAY,GAAGpB,MAAM,CAAwB,IAAI,CAAC;EACxD,MAAMqB,UAAU,GAAGrB,MAAM,CAAwB,IAAI,CAAC;;EAEtD;EACAF,SAAS,CAAC,MAAM;IACd,IAAIY,iBAAiB,IAAII,QAAQ,EAAE;MACjCQ,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAET,QAAQ,CAAC;MAC3CQ,MAAM,CAACC,gBAAgB,CAAC,OAAO,EAAET,QAAQ,CAAC;IAC5C;IACA,OAAO,MAAM;MACX,IAAIJ,iBAAiB,IAAII,QAAQ,EAAE;QACjCQ,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEV,QAAQ,CAAC;QAC9CQ,MAAM,CAACE,mBAAmB,CAAC,OAAO,EAAEV,QAAQ,CAAC;MAC/C;IACF,CAAC;EACH,CAAC,EAAE,CAACJ,iBAAiB,EAAEI,QAAQ,CAAC,CAAC;;EAEjC;EACAhB,SAAS,CAAC,MAAM;IACd,IAAI,CAACe,oBAAoB,EAAE;MACzBY,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACxB,CAAC,CAACyB,wBAAwB,CAAC;IACzD;IACA,OAAO,MAAM;MACX,IAAI,CAAChB,oBAAoB,EAAE;QACzBY,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACG,MAAM,CAAC1B,CAAC,CAACyB,wBAAwB,CAAC;MAC5D;IACF,CAAC;EACH,CAAC,EAAE,CAAChB,oBAAoB,CAAC,CAAC;EAE1B,MAAMkB,SAAS,GAAGhC,OAAO,CAAC,mBACxBO,IAAA;IACE0B,OAAO,EAAEA,CAAA,KAAM;MACb,MAAMC,KAAK,GAAGb,YAAY,CAACc,OAAO,CAAEC,gBAAgB,CAAC,GAAG,CAAC;MACzD,KAAK,IAAIC,CAAC,GAAGH,KAAK,CAACI,MAAM,GAAG,CAAC,EAAED,CAAC,IAAI,CAAC,EAAE,EAAEA,CAAC,EAAE;QACzCH,KAAK,CAACG,CAAC,CAAC,CAAiBE,KAAK,CAAC,CAAC;QACjC,IAAIb,QAAQ,CAACc,aAAa,KAAKN,KAAK,CAACG,CAAC,CAAC,EAAE;MAC3C;MACAf,UAAU,CAACa,OAAO,EAAEI,KAAK,CAAC,CAAC;IAC7B;IACA;IACA;IAAA;IACAE,QAAQ,EAAE;EAAE,CACb,CACF,EAAE,EAAE,CAAC;EAEN,oBAAOvC,YAAY,cAEfO,KAAA;IAAAG,QAAA,GACGoB,SAAS,eACVzB,IAAA;MACE,cAAW,QAAQ;MACnBmC,SAAS,EAAEtB,KAAK,CAACuB,OAAQ;MACzB,eACEC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GACjCC,SAAS,GAAG5B,gBACjB;MACD6B,OAAO,EAAGC,CAAC,IAAK;QACd,IAAIlC,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAAC;UACVkC,CAAC,CAACC,eAAe,CAAC,CAAC;QACrB;MACF,CAAE;MACFC,SAAS,EAAGF,CAAC,IAAK;QAChB,IAAIA,CAAC,CAACG,GAAG,KAAK,QAAQ,IAAIrC,QAAQ,EAAE;UAClCA,QAAQ,CAAC,CAAC;UACVkC,CAAC,CAACC,eAAe,CAAC,CAAC;QACrB;MACF,CAAE;MACFG,GAAG,EAAGC,IAAI,IAAK;QACb,IAAIA,IAAI,IAAIA,IAAI,KAAKhC,UAAU,CAACa,OAAO,EAAE;UACvCb,UAAU,CAACa,OAAO,GAAGmB,IAAI;UACzBA,IAAI,CAACf,KAAK,CAAC,CAAC;QACd;MACF,CAAE;MACFgB,IAAI,EAAC,QAAQ;MACbtC,KAAK,EAAED,YAAa;MACpByB,QAAQ,EAAE;IAAE,CACb,CAAC,eAYFlC,IAAA;MAAK;MACH,cAAW,MAAM;MACjBmC,SAAS,EAAEtB,KAAK,CAACoC,SAAU;MAC3B,eAAaZ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGC,SAAS,GAAG7B,MAAO;MACxE8B,OAAO,EAAGC,CAAC,IAAK;QACdA,CAAC,CAACC,eAAe,CAAC,CAAC;MACrB,CAAE;MACFO,OAAO,EAAGC,KAAK,IAAK;QAClBA,KAAK,CAACR,eAAe,CAAC,CAAC;MACzB,CAAE;MACFG,GAAG,EAAEhC,YAAa;MAClBkC,IAAI,EAAC,QAAQ;MACbtC,KAAK,EAAEA,KAAK,IAAIJ,cAAe;MAAAD,QAAA,EAE9BA;IAAQ,CACN,CAAC,eACNL,IAAA;MACE0B,OAAO,EAAEA,CAAA,KAAM;QACbX,UAAU,CAACa,OAAO,EAAEI,KAAK,CAAC,CAAC;MAC7B;MACA;MACA;MAAA;MACAE,QAAQ,EAAE;IAAE,CACb,CAAC,EACDT,SAAS;EAAA,CACP,CAAC,EAERN,QAAQ,CAACC,IACX,CAAC;AACH,CAAC;AAED,eAAexB,MAAM,CAACO,SAAS,EAAE,OAAO,EAAEN,SAAS,CAAC;;AAEpD;AACA,SAASM,SAAS","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/web/shared/components/PageLayout/index.js

@@ -34,5 +34,5 @@ const PageLayout = ({
     children: rightSidePanelContent
   })]
 });
-export default themed(PageLayout, 'PageLayout', baseTheme);
+export default /* #__PURE__ */themed(PageLayout, 'PageLayout', baseTheme);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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 themed(PageLayout, 'PageLayout', baseTheme);\n"],"mappings":"AAEA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,SAAS;AAA0B,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,eAAeT,MAAM,CAACM,UAAU,EAAE,YAAY,EAAEL,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;AAE7D,OAAOC,SAAS;AAA0B,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/web/shared/components/TextArea/index.js

@@ -102,5 +102,5 @@ const TextArea = ({
     }) : null]
   });
 };
-export default themed(TextArea, 'TextArea', defaultTheme);
+export default /* #__PURE__ */themed(TextArea, 'TextArea', defaultTheme);
 //# sourceMappingURL=index.js.map

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

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

@@ -22,5 +22,5 @@ const Throbber = ({
     className: theme.circle
   })]
 });
-export default themed(Throbber, 'Throbber', defaultTheme);
+export default /* #__PURE__ */themed(Throbber, 'Throbber', defaultTheme);
 //# sourceMappingURL=index.js.map

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

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

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

@@ -110,7 +110,7 @@ const Wrapper = ({
     }) : null, children]
   });
 };
-const ThemedWrapper = themed(Wrapper, 'WithTooltip', defaultTheme);
+const ThemedWrapper = /* #__PURE__ */themed(Wrapper, 'WithTooltip', defaultTheme);
 const e = ThemedWrapper;
 e.PLACEMENTS = PLACEMENTS;
 export default e;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useEffect","useRef","useState","themed","Tooltip","PLACEMENTS","defaultTheme","jsx","_jsx","jsxs","_jsxs","Wrapper","children","placement","ABOVE_CURSOR","tip","theme","current","heap","lastCursorX","lastCursorY","timerId","undefined","triggeredByTouch","tooltipRef","wrapperRef","showTooltip","setShowTooltip","updatePortalPosition","cursorX","cursorY","wrapperRect","getBoundingClientRect","left","right","top","bottom","pointTo","window","scrollX","scrollY","setTimeout","listener","addEventListener","removeEventListener","className","wrapper","onClick","clearTimeout","onMouseLeave","onMouseMove","e","clientX","clientY","onTouchStart","ref","role","ThemedWrapper"],"sources":["../../../../../src/shared/components/WithTooltip/index.tsx"],"sourcesContent":["/* global window */\n\nimport {\n  type FunctionComponent,\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  type ThemeKeysT as TooltipThemeKeysT,\n  PLACEMENTS,\n} from './Tooltip';\n\nimport defaultTheme from './default-theme.scss';\n\ntype PropsT = {\n  children?: ReactNode;\n  placement?: PLACEMENTS;\n  tip?: ReactNode;\n  theme: Theme<'wrapper' | TooltipThemeKeysT>;\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 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: FunctionComponent<PropsT> = ({\n  children,\n  placement = PLACEMENTS.ABOVE_CURSOR,\n  tip,\n  theme,\n}) => {\n  const { current: heap } = useRef<HeapT>({\n    lastCursorX: 0,\n    lastCursorY: 0,\n    timerId: undefined,\n    triggeredByTouch: false,\n  });\n  const tooltipRef = useRef<TooltipRefT>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const updatePortalPosition = (cursorX: number, cursorY: number) => {\n    if (showTooltip) {\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    } else {\n      heap.lastCursorX = cursorX;\n      heap.lastCursorY = cursorY;\n\n      // If tooltip was triggered by a touch, we delay its opening by a bit,\n      // to ensure it was not a touch-click - in the case of touch click we\n      // want to do the click, rather than show the tooltip, and the delay\n      // gives click handler a chance to abort the tooltip openning.\n      if (heap.triggeredByTouch) {\n        heap.timerId ??= setTimeout(() => {\n          heap.triggeredByTouch = false;\n          heap.timerId = undefined;\n          setShowTooltip(true);\n        }, 300);\n\n      // Otherwise we can just open the tooltip right away.\n      } else setShowTooltip(true);\n    }\n  };\n\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 = () => {\n        setShowTooltip(false);\n      };\n      window.addEventListener('scroll', listener);\n      return () => {\n        window.removeEventListener('scroll', listener);\n      };\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      onClick={() => {\n        if (heap.timerId) {\n          clearTimeout(heap.timerId);\n          heap.timerId = undefined;\n          heap.triggeredByTouch = false;\n        }\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n      }}\n      onMouseMove={(e) => {\n        updatePortalPosition(e.clientX, e.clientY);\n      }}\n      onTouchStart={() => {\n        heap.triggeredByTouch = true;\n      }}\n      ref={wrapperRef}\n      role=\"presentation\"\n    >\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(Wrapper, 'WithTooltip', defaultTheme);\n\ntype ExportT = typeof ThemedWrapper & {\n  PLACEMENTS: typeof PLACEMENTS;\n};\n\nconst e: ExportT = ThemedWrapper as ExportT;\n\ne.PLACEMENTS = PLACEMENTS;\n\nexport default e;\n"],"mappings":"AAAA;;AAEA,SAGEA,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,OAAOC,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,OAAO,IAEZC,UAAU;AAGZ,OAAOC,YAAY;AAA6B,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAyBhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAkC,GAAGA,CAAC;EAC1CC,QAAQ;EACRC,SAAS,GAAGR,UAAU,CAACS,YAAY;EACnCC,GAAG;EACHC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC,OAAO,EAAEC;EAAK,CAAC,GAAGjB,MAAM,CAAQ;IACtCkB,WAAW,EAAE,CAAC;IACdC,WAAW,EAAE,CAAC;IACdC,OAAO,EAAEC,SAAS;IAClBC,gBAAgB,EAAE;EACpB,CAAC,CAAC;EACF,MAAMC,UAAU,GAAGvB,MAAM,CAAc,IAAI,CAAC;EAC5C,MAAMwB,UAAU,GAAGxB,MAAM,CAAiB,IAAI,CAAC;EAC/C,MAAM,CAACyB,WAAW,EAAEC,cAAc,CAAC,GAAGzB,QAAQ,CAAC,KAAK,CAAC;EAErD,MAAM0B,oBAAoB,GAAGA,CAACC,OAAe,EAAEC,OAAe,KAAK;IACjE,IAAIJ,WAAW,EAAE;MACf,MAAMK,WAAW,GAAGN,UAAU,CAACR,OAAO,CAAEe,qBAAqB,CAAC,CAAC;MAC/D,IACEH,OAAO,GAAGE,WAAW,CAACE,IAAI,IACvBJ,OAAO,GAAGE,WAAW,CAACG,KAAK,IAC3BJ,OAAO,GAAGC,WAAW,CAACI,GAAG,IACzBL,OAAO,GAAGC,WAAW,CAACK,MAAM,EAC/B;QACAT,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,MAAM,IAAIH,UAAU,CAACP,OAAO,EAAE;QAC7BO,UAAU,CAACP,OAAO,CAACoB,OAAO,CACxBR,OAAO,GAAGS,MAAM,CAACC,OAAO,EACxBT,OAAO,GAAGQ,MAAM,CAACE,OAAO,EACxB3B,SAAS,EACTY,UAAU,CAACR,OACb,CAAC;MACH;IACF,CAAC,MAAM;MACLC,IAAI,CAACC,WAAW,GAAGU,OAAO;MAC1BX,IAAI,CAACE,WAAW,GAAGU,OAAO;;MAE1B;MACA;MACA;MACA;MACA,IAAIZ,IAAI,CAACK,gBAAgB,EAAE;QACzBL,IAAI,CAACG,OAAO,KAAKoB,UAAU,CAAC,MAAM;UAChCvB,IAAI,CAACK,gBAAgB,GAAG,KAAK;UAC7BL,IAAI,CAACG,OAAO,GAAGC,SAAS;UACxBK,cAAc,CAAC,IAAI,CAAC;QACtB,CAAC,EAAE,GAAG,CAAC;;QAET;MACA,CAAC,MAAMA,cAAc,CAAC,IAAI,CAAC;IAC7B;EACF,CAAC;EAED3B,SAAS,CAAC,MAAM;IACd,IAAI0B,WAAW,IAAIX,GAAG,KAAK,IAAI,EAAE;MAC/B;MACA;MACA;MACA;MACA;MACA,IAAIS,UAAU,CAACP,OAAO,EAAE;QACtBO,UAAU,CAACP,OAAO,CAACoB,OAAO,CACxBnB,IAAI,CAACC,WAAW,GAAGmB,MAAM,CAACC,OAAO,EACjCrB,IAAI,CAACE,WAAW,GAAGkB,MAAM,CAACE,OAAO,EACjC3B,SAAS,EACTY,UAAU,CAACR,OACb,CAAC;MACH;MAEA,MAAMyB,QAAQ,GAAGA,CAAA,KAAM;QACrBf,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC;MACDW,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAED,QAAQ,CAAC;MAC3C,OAAO,MAAM;QACXJ,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;MAChD,CAAC;IACH;IACA,OAAOpB,SAAS;EAClB,CAAC,EAAE,CACDJ,IAAI,CAACC,WAAW,EAChBD,IAAI,CAACE,WAAW,EAChBP,SAAS,EACTa,WAAW,EACXX,GAAG,CACJ,CAAC;EAEF,oBACEL,KAAA;IACEmC,SAAS,EAAE7B,KAAK,CAAC8B,OAAQ;IACzBC,OAAO,EAAEA,CAAA,KAAM;MACb,IAAI7B,IAAI,CAACG,OAAO,EAAE;QAChB2B,YAAY,CAAC9B,IAAI,CAACG,OAAO,CAAC;QAC1BH,IAAI,CAACG,OAAO,GAAGC,SAAS;QACxBJ,IAAI,CAACK,gBAAgB,GAAG,KAAK;MAC/B;IACF,CAAE;IACF0B,YAAY,EAAEA,CAAA,KAAM;MAClBtB,cAAc,CAAC,KAAK,CAAC;IACvB,CAAE;IACFuB,WAAW,EAAGC,CAAC,IAAK;MAClBvB,oBAAoB,CAACuB,CAAC,CAACC,OAAO,EAAED,CAAC,CAACE,OAAO,CAAC;IAC5C,CAAE;IACFC,YAAY,EAAEA,CAAA,KAAM;MAClBpC,IAAI,CAACK,gBAAgB,GAAG,IAAI;IAC9B,CAAE;IACFgC,GAAG,EAAE9B,UAAW;IAChB+B,IAAI,EAAC,cAAc;IAAA5C,QAAA,GAGjBc,WAAW,IAAIX,GAAG,KAAK,IAAI,gBACvBP,IAAA,CAACJ,OAAO;MAACmD,GAAG,EAAE/B,UAAW;MAACR,KAAK,EAAEA,KAAM;MAAAJ,QAAA,EAAEG;IAAG,CAAU,CAAC,GACvD,IAAI,EAETH,QAAQ;EAAA,CACN,CAAC;AAEV,CAAC;AAED,MAAM6C,aAAa,GAAGtD,MAAM,CAACQ,OAAO,EAAE,aAAa,EAAEL,YAAY,CAAC;AAMlE,MAAM6C,CAAU,GAAGM,aAAwB;AAE3CN,CAAC,CAAC9C,UAAU,GAAGA,UAAU;AAEzB,eAAe8C,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useEffect","useRef","useState","themed","Tooltip","PLACEMENTS","defaultTheme","jsx","_jsx","jsxs","_jsxs","Wrapper","children","placement","ABOVE_CURSOR","tip","theme","current","heap","lastCursorX","lastCursorY","timerId","undefined","triggeredByTouch","tooltipRef","wrapperRef","showTooltip","setShowTooltip","updatePortalPosition","cursorX","cursorY","wrapperRect","getBoundingClientRect","left","right","top","bottom","pointTo","window","scrollX","scrollY","setTimeout","listener","addEventListener","removeEventListener","className","wrapper","onClick","clearTimeout","onMouseLeave","onMouseMove","e","clientX","clientY","onTouchStart","ref","role","ThemedWrapper"],"sources":["../../../../../src/shared/components/WithTooltip/index.tsx"],"sourcesContent":["/* global window */\n\nimport {\n  type FunctionComponent,\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  type ThemeKeysT as TooltipThemeKeysT,\n  PLACEMENTS,\n} from './Tooltip';\n\nimport defaultTheme from './default-theme.scss';\n\ntype PropsT = {\n  children?: ReactNode;\n  placement?: PLACEMENTS;\n  tip?: ReactNode;\n  theme: Theme<'wrapper' | TooltipThemeKeysT>;\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 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: FunctionComponent<PropsT> = ({\n  children,\n  placement = PLACEMENTS.ABOVE_CURSOR,\n  tip,\n  theme,\n}) => {\n  const { current: heap } = useRef<HeapT>({\n    lastCursorX: 0,\n    lastCursorY: 0,\n    timerId: undefined,\n    triggeredByTouch: false,\n  });\n  const tooltipRef = useRef<TooltipRefT>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const updatePortalPosition = (cursorX: number, cursorY: number) => {\n    if (showTooltip) {\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    } else {\n      heap.lastCursorX = cursorX;\n      heap.lastCursorY = cursorY;\n\n      // If tooltip was triggered by a touch, we delay its opening by a bit,\n      // to ensure it was not a touch-click - in the case of touch click we\n      // want to do the click, rather than show the tooltip, and the delay\n      // gives click handler a chance to abort the tooltip openning.\n      if (heap.triggeredByTouch) {\n        heap.timerId ??= setTimeout(() => {\n          heap.triggeredByTouch = false;\n          heap.timerId = undefined;\n          setShowTooltip(true);\n        }, 300);\n\n      // Otherwise we can just open the tooltip right away.\n      } else setShowTooltip(true);\n    }\n  };\n\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 = () => {\n        setShowTooltip(false);\n      };\n      window.addEventListener('scroll', listener);\n      return () => {\n        window.removeEventListener('scroll', listener);\n      };\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      onClick={() => {\n        if (heap.timerId) {\n          clearTimeout(heap.timerId);\n          heap.timerId = undefined;\n          heap.triggeredByTouch = false;\n        }\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n      }}\n      onMouseMove={(e) => {\n        updatePortalPosition(e.clientX, e.clientY);\n      }}\n      onTouchStart={() => {\n        heap.triggeredByTouch = true;\n      }}\n      ref={wrapperRef}\n      role=\"presentation\"\n    >\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 = /* #__PURE__ */ themed(Wrapper, 'WithTooltip', defaultTheme);\n\ntype ExportT = typeof ThemedWrapper & {\n  PLACEMENTS: typeof PLACEMENTS;\n};\n\nconst e: ExportT = ThemedWrapper as ExportT;\n\ne.PLACEMENTS = PLACEMENTS;\n\nexport default e;\n"],"mappings":"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","ignoreList":[]}

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

@@ -52,5 +52,5 @@ const YouTubeVideo = ({
     })]
   });
 };
-export default themed(YouTubeVideo, 'YouTubeVideo', baseTheme);
+export default /* #__PURE__ */themed(YouTubeVideo, 'YouTubeVideo', baseTheme);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["qs","themed","Throbber","baseTheme","throbberTheme","jsx","_jsx","jsxs","_jsxs","YouTubeVideo","autoplay","src","theme","title","srcParts","split","url","queryString","query","parse","videoId","v","match","stringify","className","container","children","allow","allowFullScreen","video"],"sources":["../../../../../src/shared/components/YouTubeVideo/index.tsx"],"sourcesContent":["import qs from 'qs';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Throbber from 'components/Throbber';\n\nimport baseTheme from './base.scss';\nimport throbberTheme from './throbber.scss';\n\ntype ComponentThemeT = Theme<'container' | 'video'>;\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;\n  const [, queryString] = srcParts;\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 as string}`;\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    <div className={theme.container}>\n      <Throbber theme={throbberTheme} />\n      {/* TODO: I guess, we better add the sanbox, but right now I don't have\n          time to carefully explore which restrictions should be lifted to allow\n          embed YouTube player to work... sometime later we'll take care of it */\n      }\n      <iframe // eslint-disable-line react/iframe-missing-sandbox\n        allow=\"autoplay\"\n        allowFullScreen\n        className={theme.video}\n        src={url}\n        title={title}\n      />\n    </div>\n  );\n};\n\nexport default themed(YouTubeVideo, 'YouTubeVideo', baseTheme);\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,IAAI;AAEnB,OAAOC,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,QAAQ;AAEf,OAAOC,SAAS;AAChB,OAAOC,aAAa;AAAwB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW5C;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,IAAI,CAACC,GAAG,CAAC,GAAGF,QAAQ;EACpB,MAAM,GAAGG,WAAW,CAAC,GAAGH,QAAQ;EAChC,MAAMI,KAAK,GAAGD,WAAW,GAAGjB,EAAE,CAACmB,KAAK,CAACF,WAAW,CAAC,GAAG,CAAC,CAAC;EAEtD,MAAMG,OAAO,GAAGF,KAAK,CAACG,CAAC,IAAIL,GAAG,EAAEM,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;EACjEN,GAAG,GAAG,iCAAiCI,OAAO,EAAY;EAE1D,OAAOF,KAAK,CAACG,CAAC;EACdH,KAAK,CAACR,QAAQ,GAAGA,QAAQ,GAAG,GAAG,GAAG,GAAG;EACrCM,GAAG,IAAI,IAAIhB,EAAE,CAACuB,SAAS,CAACL,KAAK,CAAC,EAAE;;EAEhC;EACA;;EAEA,oBACEV,KAAA;IAAKgB,SAAS,EAAEZ,KAAK,CAACa,SAAU;IAAAC,QAAA,gBAC9BpB,IAAA,CAACJ,QAAQ;MAACU,KAAK,EAAER;IAAc,CAAE,CAAC,eAKlCE,IAAA;MAAQ;MACNqB,KAAK,EAAC,UAAU;MAChBC,eAAe;MACfJ,SAAS,EAAEZ,KAAK,CAACiB,KAAM;MACvBlB,GAAG,EAAEK,GAAI;MACTH,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACC,CAAC;AAEV,CAAC;AAED,eAAeZ,MAAM,CAACQ,YAAY,EAAE,cAAc,EAAEN,SAAS,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["qs","themed","Throbber","baseTheme","throbberTheme","jsx","_jsx","jsxs","_jsxs","YouTubeVideo","autoplay","src","theme","title","srcParts","split","url","queryString","query","parse","videoId","v","match","stringify","className","container","children","allow","allowFullScreen","video"],"sources":["../../../../../src/shared/components/YouTubeVideo/index.tsx"],"sourcesContent":["import qs from 'qs';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Throbber from 'components/Throbber';\n\nimport baseTheme from './base.scss';\nimport throbberTheme from './throbber.scss';\n\ntype ComponentThemeT = Theme<'container' | 'video'>;\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;\n  const [, queryString] = srcParts;\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 as string}`;\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    <div className={theme.container}>\n      <Throbber theme={throbberTheme} />\n      {/* TODO: I guess, we better add the sanbox, but right now I don't have\n          time to carefully explore which restrictions should be lifted to allow\n          embed YouTube player to work... sometime later we'll take care of it */\n      }\n      <iframe // eslint-disable-line react/iframe-missing-sandbox\n        allow=\"autoplay\"\n        allowFullScreen\n        className={theme.video}\n        src={url}\n        title={title}\n      />\n    </div>\n  );\n};\n\nexport default /* #__PURE__ */ themed(YouTubeVideo, 'YouTubeVideo', baseTheme);\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,IAAI;AAEnB,OAAOC,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,QAAQ;AAEf,OAAOC,SAAS;AAChB,OAAOC,aAAa;AAAwB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW5C;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,IAAI,CAACC,GAAG,CAAC,GAAGF,QAAQ;EACpB,MAAM,GAAGG,WAAW,CAAC,GAAGH,QAAQ;EAChC,MAAMI,KAAK,GAAGD,WAAW,GAAGjB,EAAE,CAACmB,KAAK,CAACF,WAAW,CAAC,GAAG,CAAC,CAAC;EAEtD,MAAMG,OAAO,GAAGF,KAAK,CAACG,CAAC,IAAIL,GAAG,EAAEM,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;EACjEN,GAAG,GAAG,iCAAiCI,OAAO,EAAY;EAE1D,OAAOF,KAAK,CAACG,CAAC;EACdH,KAAK,CAACR,QAAQ,GAAGA,QAAQ,GAAG,GAAG,GAAG,GAAG;EACrCM,GAAG,IAAI,IAAIhB,EAAE,CAACuB,SAAS,CAACL,KAAK,CAAC,EAAE;;EAEhC;EACA;;EAEA,oBACEV,KAAA;IAAKgB,SAAS,EAAEZ,KAAK,CAACa,SAAU;IAAAC,QAAA,gBAC9BpB,IAAA,CAACJ,QAAQ;MAACU,KAAK,EAAER;IAAc,CAAE,CAAC,eAKlCE,IAAA;MAAQ;MACNqB,KAAK,EAAC,UAAU;MAChBC,eAAe;MACfJ,SAAS,EAAEZ,KAAK,CAACiB,KAAM;MACvBlB,GAAG,EAAEK,GAAI;MACTH,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACC,CAAC;AAEV,CAAC;AAED,eAAe,eAAgBZ,MAAM,CAACQ,YAAY,EAAE,cAAc,EAAEN,SAAS,CAAC","ignoreList":[]}

package/build/web/shared/components/selectors/CustomDropdown/index.js

@@ -118,5 +118,5 @@ const BaseCustomDropdown = ({
     }) : null]
   });
 };
-export default themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);
+export default /* #__PURE__ */themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);
 //# sourceMappingURL=index.js.map

package/build/web/shared/components/selectors/CustomDropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useEffect","useRef","useState","themed","optionValueName","Options","areEqual","defaultTheme","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","BaseCustomDropdown","filter","label","onChange","options","theme","value","active","setActive","dropdownRef","opsRef","opsPos","setOpsPos","upward","setUpward","undefined","id","cb","anchor","current","getBoundingClientRect","opsRect","measure","fitsDown","bottom","height","window","visualViewport","fitsUp","top","up","pos","left","width","now","requestAnimationFrame","cancelAnimationFrame","openList","e","view","rect","stopPropagation","selected","children","option","iValue","iName","containerClassName","container","opsContainerClass","select","className","dropdown","onClick","onKeyDown","key","ref","role","tabIndex","arrow","containerClass","containerStyle","onCancel","newValue","optionClass"],"sources":["../../../../../../src/shared/components/selectors/CustomDropdown/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport { type PropsT, type ValueT, optionValueName } from '../common';\n\nimport Options, { type ContainerPosT, type RefT, areEqual } from './Options';\n\nimport defaultTheme from './theme.scss';\n\nconst BaseCustomDropdown: React.FunctionComponent<\n  PropsT<React.ReactNode, (value: ValueT) => void>\n> = ({\n  filter,\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  const [active, setActive] = useState(false);\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const opsRef = useRef<RefT>(null);\n\n  const [opsPos, setOpsPos] = useState<ContainerPosT>();\n  const [upward, setUpward] = useState(false);\n\n  useEffect(() => {\n    if (!active) return undefined;\n\n    let id: number;\n    const cb = () => {\n      const anchor = dropdownRef.current?.getBoundingClientRect();\n      const opsRect = opsRef.current?.measure();\n      if (anchor && opsRect) {\n        const fitsDown = anchor.bottom + opsRect.height\n          < (window.visualViewport?.height ?? 0);\n        const fitsUp = anchor.top - opsRect.height > 0;\n\n        const up = !fitsDown && fitsUp;\n        setUpward(up);\n\n        const pos = up ? {\n          left: anchor.left,\n          top: anchor.top - opsRect.height - 1,\n          width: anchor.width,\n        } : {\n          left: anchor.left,\n          top: anchor.bottom,\n          width: anchor.width,\n        };\n\n        setOpsPos((now) => (areEqual(now, pos) ? now : pos));\n      }\n      id = requestAnimationFrame(cb);\n    };\n    requestAnimationFrame(cb);\n\n    return () => {\n      cancelAnimationFrame(id);\n    };\n  }, [active]);\n\n  const openList = (\n    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,\n  ) => {\n    const view = window.visualViewport;\n    const rect = dropdownRef.current!.getBoundingClientRect();\n    setActive(true);\n\n    // NOTE: This first opens the dropdown off-screen, where it is measured\n    // by an effect declared above, and then positioned below, or above\n    // the original dropdown element, depending where it fits best\n    // (if we first open it downward, it would flick if we immediately\n    // move it above, at least with the current position update via local\n    // react state, and not imperatively).\n    setOpsPos({\n      left: view?.width ?? 0,\n      top: view?.height ?? 0,\n      width: rect.width,\n    });\n\n    e.stopPropagation();\n  };\n\n  let selected: React.ReactNode = <>&zwnj;</>;\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      if (iValue === value) {\n        selected = iName;\n        break;\n      }\n    }\n  }\n\n  let containerClassName = theme.container;\n  if (active) containerClassName += ` ${theme.active}`;\n\n  let opsContainerClass = theme.select ?? '';\n  if (upward) {\n    containerClassName += ` ${theme.upward}`;\n    opsContainerClass += ` ${theme.upward}`;\n  }\n\n  return (\n    <div className={containerClassName}>\n      {label === undefined ? null\n        : <div className={theme.label}>{label}</div>}\n      <div\n        className={theme.dropdown}\n        onClick={openList}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') openList(e);\n        }}\n        ref={dropdownRef}\n        role=\"listbox\"\n        tabIndex={0}\n      >\n        {selected}\n        <div className={theme.arrow} />\n      </div>\n      {\n        active ? (\n          <Options\n            containerClass={opsContainerClass}\n            containerStyle={opsPos}\n            onCancel={() => {\n              setActive(false);\n            }}\n            onChange={(newValue) => {\n              setActive(false);\n              if (onChange) onChange(newValue);\n            }}\n            optionClass={theme.option ?? ''}\n            options={options}\n            ref={opsRef}\n          />\n        ) : null\n      }\n    </div>\n  );\n};\n\nexport default themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useEffect","useRef","useState","themed","optionValueName","Options","areEqual","defaultTheme","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","BaseCustomDropdown","filter","label","onChange","options","theme","value","active","setActive","dropdownRef","opsRef","opsPos","setOpsPos","upward","setUpward","undefined","id","cb","anchor","current","getBoundingClientRect","opsRect","measure","fitsDown","bottom","height","window","visualViewport","fitsUp","top","up","pos","left","width","now","requestAnimationFrame","cancelAnimationFrame","openList","e","view","rect","stopPropagation","selected","children","option","iValue","iName","containerClassName","container","opsContainerClass","select","className","dropdown","onClick","onKeyDown","key","ref","role","tabIndex","arrow","containerClass","containerStyle","onCancel","newValue","optionClass"],"sources":["../../../../../../src/shared/components/selectors/CustomDropdown/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport { type PropsT, type ValueT, optionValueName } from '../common';\n\nimport Options, { type ContainerPosT, type RefT, areEqual } from './Options';\n\nimport defaultTheme from './theme.scss';\n\nconst BaseCustomDropdown: React.FunctionComponent<\n  PropsT<React.ReactNode, (value: ValueT) => void>\n> = ({\n  filter,\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  const [active, setActive] = useState(false);\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const opsRef = useRef<RefT>(null);\n\n  const [opsPos, setOpsPos] = useState<ContainerPosT>();\n  const [upward, setUpward] = useState(false);\n\n  useEffect(() => {\n    if (!active) return undefined;\n\n    let id: number;\n    const cb = () => {\n      const anchor = dropdownRef.current?.getBoundingClientRect();\n      const opsRect = opsRef.current?.measure();\n      if (anchor && opsRect) {\n        const fitsDown = anchor.bottom + opsRect.height\n          < (window.visualViewport?.height ?? 0);\n        const fitsUp = anchor.top - opsRect.height > 0;\n\n        const up = !fitsDown && fitsUp;\n        setUpward(up);\n\n        const pos = up ? {\n          left: anchor.left,\n          top: anchor.top - opsRect.height - 1,\n          width: anchor.width,\n        } : {\n          left: anchor.left,\n          top: anchor.bottom,\n          width: anchor.width,\n        };\n\n        setOpsPos((now) => (areEqual(now, pos) ? now : pos));\n      }\n      id = requestAnimationFrame(cb);\n    };\n    requestAnimationFrame(cb);\n\n    return () => {\n      cancelAnimationFrame(id);\n    };\n  }, [active]);\n\n  const openList = (\n    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,\n  ) => {\n    const view = window.visualViewport;\n    const rect = dropdownRef.current!.getBoundingClientRect();\n    setActive(true);\n\n    // NOTE: This first opens the dropdown off-screen, where it is measured\n    // by an effect declared above, and then positioned below, or above\n    // the original dropdown element, depending where it fits best\n    // (if we first open it downward, it would flick if we immediately\n    // move it above, at least with the current position update via local\n    // react state, and not imperatively).\n    setOpsPos({\n      left: view?.width ?? 0,\n      top: view?.height ?? 0,\n      width: rect.width,\n    });\n\n    e.stopPropagation();\n  };\n\n  let selected: React.ReactNode = <>&zwnj;</>;\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      if (iValue === value) {\n        selected = iName;\n        break;\n      }\n    }\n  }\n\n  let containerClassName = theme.container;\n  if (active) containerClassName += ` ${theme.active}`;\n\n  let opsContainerClass = theme.select ?? '';\n  if (upward) {\n    containerClassName += ` ${theme.upward}`;\n    opsContainerClass += ` ${theme.upward}`;\n  }\n\n  return (\n    <div className={containerClassName}>\n      {label === undefined ? null\n        : <div className={theme.label}>{label}</div>}\n      <div\n        className={theme.dropdown}\n        onClick={openList}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') openList(e);\n        }}\n        ref={dropdownRef}\n        role=\"listbox\"\n        tabIndex={0}\n      >\n        {selected}\n        <div className={theme.arrow} />\n      </div>\n      {\n        active ? (\n          <Options\n            containerClass={opsContainerClass}\n            containerStyle={opsPos}\n            onCancel={() => {\n              setActive(false);\n            }}\n            onChange={(newValue) => {\n              setActive(false);\n              if (onChange) onChange(newValue);\n            }}\n            optionClass={theme.option ?? ''}\n            options={options}\n            ref={opsRef}\n          />\n        ) : null\n      }\n    </div>\n  );\n};\n\nexport default /* #__PURE__ */ themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);\n"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEnD,OAAOC,MAAM,MAAM,0BAA0B;AAE7C,SAAmCC,eAAe;AAElD,OAAOC,OAAO,IAAmCC,QAAQ;AAEzD,OAAOC,YAAY;AAAqB,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAExC,MAAMC,kBAEL,GAAGA,CAAC;EACHC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EAE3C,MAAMqB,WAAW,GAAGtB,MAAM,CAAiB,IAAI,CAAC;EAChD,MAAMuB,MAAM,GAAGvB,MAAM,CAAO,IAAI,CAAC;EAEjC,MAAM,CAACwB,MAAM,EAAEC,SAAS,CAAC,GAAGxB,QAAQ,CAAgB,CAAC;EACrD,MAAM,CAACyB,MAAM,EAAEC,SAAS,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EAE3CF,SAAS,CAAC,MAAM;IACd,IAAI,CAACqB,MAAM,EAAE,OAAOQ,SAAS;IAE7B,IAAIC,EAAU;IACd,MAAMC,EAAE,GAAGA,CAAA,KAAM;MACf,MAAMC,MAAM,GAAGT,WAAW,CAACU,OAAO,EAAEC,qBAAqB,CAAC,CAAC;MAC3D,MAAMC,OAAO,GAAGX,MAAM,CAACS,OAAO,EAAEG,OAAO,CAAC,CAAC;MACzC,IAAIJ,MAAM,IAAIG,OAAO,EAAE;QACrB,MAAME,QAAQ,GAAGL,MAAM,CAACM,MAAM,GAAGH,OAAO,CAACI,MAAM,IAC1CC,MAAM,CAACC,cAAc,EAAEF,MAAM,IAAI,CAAC,CAAC;QACxC,MAAMG,MAAM,GAAGV,MAAM,CAACW,GAAG,GAAGR,OAAO,CAACI,MAAM,GAAG,CAAC;QAE9C,MAAMK,EAAE,GAAG,CAACP,QAAQ,IAAIK,MAAM;QAC9Bd,SAAS,CAACgB,EAAE,CAAC;QAEb,MAAMC,GAAG,GAAGD,EAAE,GAAG;UACfE,IAAI,EAAEd,MAAM,CAACc,IAAI;UACjBH,GAAG,EAAEX,MAAM,CAACW,GAAG,GAAGR,OAAO,CAACI,MAAM,GAAG,CAAC;UACpCQ,KAAK,EAAEf,MAAM,CAACe;QAChB,CAAC,GAAG;UACFD,IAAI,EAAEd,MAAM,CAACc,IAAI;UACjBH,GAAG,EAAEX,MAAM,CAACM,MAAM;UAClBS,KAAK,EAAEf,MAAM,CAACe;QAChB,CAAC;QAEDrB,SAAS,CAAEsB,GAAG,IAAM1C,QAAQ,CAAC0C,GAAG,EAAEH,GAAG,CAAC,GAAGG,GAAG,GAAGH,GAAI,CAAC;MACtD;MACAf,EAAE,GAAGmB,qBAAqB,CAAClB,EAAE,CAAC;IAChC,CAAC;IACDkB,qBAAqB,CAAClB,EAAE,CAAC;IAEzB,OAAO,MAAM;MACXmB,oBAAoB,CAACpB,EAAE,CAAC;IAC1B,CAAC;EACH,CAAC,EAAE,CAACT,MAAM,CAAC,CAAC;EAEZ,MAAM8B,QAAQ,GACZC,CAAyE,IACtE;IACH,MAAMC,IAAI,GAAGb,MAAM,CAACC,cAAc;IAClC,MAAMa,IAAI,GAAG/B,WAAW,CAACU,OAAO,CAAEC,qBAAqB,CAAC,CAAC;IACzDZ,SAAS,CAAC,IAAI,CAAC;;IAEf;IACA;IACA;IACA;IACA;IACA;IACAI,SAAS,CAAC;MACRoB,IAAI,EAAEO,IAAI,EAAEN,KAAK,IAAI,CAAC;MACtBJ,GAAG,EAAEU,IAAI,EAAEd,MAAM,IAAI,CAAC;MACtBQ,KAAK,EAAEO,IAAI,CAACP;IACd,CAAC,CAAC;IAEFK,CAAC,CAACG,eAAe,CAAC,CAAC;EACrB,CAAC;EAED,IAAIC,QAAyB,gBAAG7C,IAAA,CAAAF,SAAA;IAAAgD,QAAA,EAAE;EAAM,CAAE,CAAC;EAC3C,KAAK,MAAMC,MAAM,IAAIxC,OAAO,EAAE;IAC5B,IAAI,CAACH,MAAM,IAAIA,MAAM,CAAC2C,MAAM,CAAC,EAAE;MAC7B,MAAM,CAACC,MAAM,EAAEC,KAAK,CAAC,GAAGxD,eAAe,CAACsD,MAAM,CAAC;MAC/C,IAAIC,MAAM,KAAKvC,KAAK,EAAE;QACpBoC,QAAQ,GAAGI,KAAK;QAChB;MACF;IACF;EACF;EAEA,IAAIC,kBAAkB,GAAG1C,KAAK,CAAC2C,SAAS;EACxC,IAAIzC,MAAM,EAAEwC,kBAAkB,IAAI,IAAI1C,KAAK,CAACE,MAAM,EAAE;EAEpD,IAAI0C,iBAAiB,GAAG5C,KAAK,CAAC6C,MAAM,IAAI,EAAE;EAC1C,IAAIrC,MAAM,EAAE;IACVkC,kBAAkB,IAAI,IAAI1C,KAAK,CAACQ,MAAM,EAAE;IACxCoC,iBAAiB,IAAI,IAAI5C,KAAK,CAACQ,MAAM,EAAE;EACzC;EAEA,oBACEd,KAAA;IAAKoD,SAAS,EAAEJ,kBAAmB;IAAAJ,QAAA,GAChCzC,KAAK,KAAKa,SAAS,GAAG,IAAI,gBACvBlB,IAAA;MAAKsD,SAAS,EAAE9C,KAAK,CAACH,KAAM;MAAAyC,QAAA,EAAEzC;IAAK,CAAM,CAAC,eAC9CH,KAAA;MACEoD,SAAS,EAAE9C,KAAK,CAAC+C,QAAS;MAC1BC,OAAO,EAAEhB,QAAS;MAClBiB,SAAS,EAAGhB,CAAC,IAAK;QAChB,IAAIA,CAAC,CAACiB,GAAG,KAAK,OAAO,EAAElB,QAAQ,CAACC,CAAC,CAAC;MACpC,CAAE;MACFkB,GAAG,EAAE/C,WAAY;MACjBgD,IAAI,EAAC,SAAS;MACdC,QAAQ,EAAE,CAAE;MAAAf,QAAA,GAEXD,QAAQ,eACT7C,IAAA;QAAKsD,SAAS,EAAE9C,KAAK,CAACsD;MAAM,CAAE,CAAC;IAAA,CAC5B,CAAC,EAEJpD,MAAM,gBACJV,IAAA,CAACN,OAAO;MACNqE,cAAc,EAAEX,iBAAkB;MAClCY,cAAc,EAAElD,MAAO;MACvBmD,QAAQ,EAAEA,CAAA,KAAM;QACdtD,SAAS,CAAC,KAAK,CAAC;MAClB,CAAE;MACFL,QAAQ,EAAG4D,QAAQ,IAAK;QACtBvD,SAAS,CAAC,KAAK,CAAC;QAChB,IAAIL,QAAQ,EAAEA,QAAQ,CAAC4D,QAAQ,CAAC;MAClC,CAAE;MACFC,WAAW,EAAE3D,KAAK,CAACuC,MAAM,IAAI,EAAG;MAChCxC,OAAO,EAAEA,OAAQ;MACjBoD,GAAG,EAAE9C;IAAO,CACb,CAAC,GACA,IAAI;EAAA,CAEP,CAAC;AAEV,CAAC;AAED,eAAe,eAAgBrB,MAAM,CAACW,kBAAkB,EAAE,gBAAgB,EAAEP,YAAY,CAAC","ignoreList":[]}

package/build/web/shared/components/selectors/NativeDropdown/index.js

@@ -81,5 +81,5 @@ const Dropdown = ({
     })]
   });
 };
-export default themed(Dropdown, 'Dropdown', defaultTheme);
+export default /* #__PURE__ */themed(Dropdown, 'Dropdown', defaultTheme);
 //# sourceMappingURL=index.js.map

package/build/web/shared/components/selectors/NativeDropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["themed","optionValueName","defaultTheme","jsx","_jsx","jsxs","_jsxs","Dropdown","filter","label","onChange","options","testId","theme","value","isValidValue","optionElements","option","iValue","iName","push","className","children","hiddenOption","disabled","selectClassName","select","invalid","container","undefined","dropdown","process","env","NODE_ENV","arrow"],"sources":["../../../../../../src/shared/components/selectors/NativeDropdown/index.tsx"],"sourcesContent":["// Implements dropdown based on the native HTML <select> element.\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport { type PropsT, optionValueName } from '../common';\n\nimport defaultTheme from './theme.scss';\n\n/**\n * Implements a themeable dropdown list. Internally it is rendered with help of\n * the standard HTML `<select>` element, thus the styling support is somewhat\n * limited.\n * @param [props] Component properties.\n * @param [props.filter] Options filter function. If provided, only\n * those elements of `options` list will be used by the dropdown, for which this\n * filter returns `true`.\n * @param [props.label] Dropdown label.\n * @param [props.onChange] Selection event handler.\n * @param [props.options=[]] Array of dropdown\n * options. For string elements the option value and name will be the same.\n * It is allowed to mix DropdownOption and string elements in the same option\n * list.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.value] Currently selected value.\n * @param [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst Dropdown: React.FunctionComponent<PropsT<string>> = ({\n  filter,\n  label,\n  onChange,\n  options,\n  testId,\n  theme,\n  value,\n}) => {\n  let isValidValue = false;\n  const optionElements = [];\n\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      isValidValue ||= iValue === value;\n      optionElements.push(\n        <option className={theme.option} key={iValue} value={iValue}>\n          {iName}\n        </option>,\n      );\n    }\n  }\n\n  // NOTE: This element represents the current `value` when it does not match\n  // any valid option. In Chrome, and some other browsers, we are able to hide\n  // it from the opened dropdown; in others, e.g. Safari, the best we can do is\n  // to show it as disabled.\n  const hiddenOption = isValidValue ? null : (\n    <option\n      className={theme.hiddenOption}\n      disabled\n      key=\"__reactUtilsHiddenOption\"\n      value={value}\n    >\n      {value}\n    </option>\n  );\n\n  let selectClassName = theme.select;\n  if (!isValidValue) selectClassName += ` ${theme.invalid}`;\n\n  return (\n    <div className={theme.container}>\n      { label === undefined\n        ? null : <div className={theme.label}>{label}</div> }\n      <div className={theme.dropdown}>\n        <select\n          className={selectClassName}\n          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n          onChange={onChange}\n          value={value}\n        >\n          {hiddenOption}\n          {optionElements}\n        </select>\n        <div className={theme.arrow} />\n      </div>\n    </div>\n  );\n};\n\nexport default themed(Dropdown, 'Dropdown', defaultTheme);\n"],"mappings":";;;AAAA;;AAEA,OAAOA,MAAM,MAAM,0BAA0B;AAE7C,SAAsBC,eAAe;AAErC,OAAOC,YAAY;;AAEnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmBA,MAAMC,QAAiD,GAAGA,CAAC;EACzDC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAIC,YAAY,GAAG,KAAK;EACxB,MAAMC,cAAc,GAAG,EAAE;EAEzB,KAAK,MAAMC,MAAM,IAAIN,OAAO,EAAE;IAC5B,IAAI,CAACH,MAAM,IAAIA,MAAM,CAACS,MAAM,CAAC,EAAE;MAC7B,MAAM,CAACC,MAAM,EAAEC,KAAK,CAAC,GAAGlB,eAAe,CAACgB,MAAM,CAAC;MAC/CF,YAAY,KAAKG,MAAM,KAAKJ,KAAK;MACjCE,cAAc,CAACI,IAAI,cACjBhB,IAAA;QAAQiB,SAAS,EAAER,KAAK,CAACI,MAAO;QAAcH,KAAK,EAAEI,MAAO;QAAAI,QAAA,EACzDH;MAAK,GAD8BD,MAE9B,CACV,CAAC;IACH;EACF;;EAEA;EACA;EACA;EACA;EACA,MAAMK,YAAY,GAAGR,YAAY,GAAG,IAAI,gBACtCX,IAAA;IACEiB,SAAS,EAAER,KAAK,CAACU,YAAa;IAC9BC,QAAQ;IAERV,KAAK,EAAEA,KAAM;IAAAQ,QAAA,EAEZR;EAAK,GAHF,0BAIE,CACT;EAED,IAAIW,eAAe,GAAGZ,KAAK,CAACa,MAAM;EAClC,IAAI,CAACX,YAAY,EAAEU,eAAe,IAAI,IAAIZ,KAAK,CAACc,OAAO,EAAE;EAEzD,oBACErB,KAAA;IAAKe,SAAS,EAAER,KAAK,CAACe,SAAU;IAAAN,QAAA,GAC5Bb,KAAK,KAAKoB,SAAS,GACjB,IAAI,gBAAGzB,IAAA;MAAKiB,SAAS,EAAER,KAAK,CAACJ,KAAM;MAAAa,QAAA,EAAEb;IAAK,CAAM,CAAC,eACrDH,KAAA;MAAKe,SAAS,EAAER,KAAK,CAACiB,QAAS;MAAAR,QAAA,gBAC7BhB,KAAA;QACEe,SAAS,EAAEI,eAAgB;QAC3B,eAAaM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGJ,SAAS,GAAGjB,MAAO;QACxEF,QAAQ,EAAEA,QAAS;QACnBI,KAAK,EAAEA,KAAM;QAAAQ,QAAA,GAEZC,YAAY,EACZP,cAAc;MAAA,CACT,CAAC,eACTZ,IAAA;QAAKiB,SAAS,EAAER,KAAK,CAACqB;MAAM,CAAE,CAAC;IAAA,CAC5B,CAAC;EAAA,CACH,CAAC;AAEV,CAAC;AAED,eAAelC,MAAM,CAACO,QAAQ,EAAE,UAAU,EAAEL,YAAY,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["themed","optionValueName","defaultTheme","jsx","_jsx","jsxs","_jsxs","Dropdown","filter","label","onChange","options","testId","theme","value","isValidValue","optionElements","option","iValue","iName","push","className","children","hiddenOption","disabled","selectClassName","select","invalid","container","undefined","dropdown","process","env","NODE_ENV","arrow"],"sources":["../../../../../../src/shared/components/selectors/NativeDropdown/index.tsx"],"sourcesContent":["// Implements dropdown based on the native HTML <select> element.\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport { type PropsT, optionValueName } from '../common';\n\nimport defaultTheme from './theme.scss';\n\n/**\n * Implements a themeable dropdown list. Internally it is rendered with help of\n * the standard HTML `<select>` element, thus the styling support is somewhat\n * limited.\n * @param [props] Component properties.\n * @param [props.filter] Options filter function. If provided, only\n * those elements of `options` list will be used by the dropdown, for which this\n * filter returns `true`.\n * @param [props.label] Dropdown label.\n * @param [props.onChange] Selection event handler.\n * @param [props.options=[]] Array of dropdown\n * options. For string elements the option value and name will be the same.\n * It is allowed to mix DropdownOption and string elements in the same option\n * list.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props.value] Currently selected value.\n * @param [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst Dropdown: React.FunctionComponent<PropsT<string>> = ({\n  filter,\n  label,\n  onChange,\n  options,\n  testId,\n  theme,\n  value,\n}) => {\n  let isValidValue = false;\n  const optionElements = [];\n\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      isValidValue ||= iValue === value;\n      optionElements.push(\n        <option className={theme.option} key={iValue} value={iValue}>\n          {iName}\n        </option>,\n      );\n    }\n  }\n\n  // NOTE: This element represents the current `value` when it does not match\n  // any valid option. In Chrome, and some other browsers, we are able to hide\n  // it from the opened dropdown; in others, e.g. Safari, the best we can do is\n  // to show it as disabled.\n  const hiddenOption = isValidValue ? null : (\n    <option\n      className={theme.hiddenOption}\n      disabled\n      key=\"__reactUtilsHiddenOption\"\n      value={value}\n    >\n      {value}\n    </option>\n  );\n\n  let selectClassName = theme.select;\n  if (!isValidValue) selectClassName += ` ${theme.invalid}`;\n\n  return (\n    <div className={theme.container}>\n      { label === undefined\n        ? null : <div className={theme.label}>{label}</div> }\n      <div className={theme.dropdown}>\n        <select\n          className={selectClassName}\n          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n          onChange={onChange}\n          value={value}\n        >\n          {hiddenOption}\n          {optionElements}\n        </select>\n        <div className={theme.arrow} />\n      </div>\n    </div>\n  );\n};\n\nexport default /* #__PURE__ */ themed(Dropdown, 'Dropdown', defaultTheme);\n"],"mappings":";;;AAAA;;AAEA,OAAOA,MAAM,MAAM,0BAA0B;AAE7C,SAAsBC,eAAe;AAErC,OAAOC,YAAY;;AAEnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmBA,MAAMC,QAAiD,GAAGA,CAAC;EACzDC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAIC,YAAY,GAAG,KAAK;EACxB,MAAMC,cAAc,GAAG,EAAE;EAEzB,KAAK,MAAMC,MAAM,IAAIN,OAAO,EAAE;IAC5B,IAAI,CAACH,MAAM,IAAIA,MAAM,CAACS,MAAM,CAAC,EAAE;MAC7B,MAAM,CAACC,MAAM,EAAEC,KAAK,CAAC,GAAGlB,eAAe,CAACgB,MAAM,CAAC;MAC/CF,YAAY,KAAKG,MAAM,KAAKJ,KAAK;MACjCE,cAAc,CAACI,IAAI,cACjBhB,IAAA;QAAQiB,SAAS,EAAER,KAAK,CAACI,MAAO;QAAcH,KAAK,EAAEI,MAAO;QAAAI,QAAA,EACzDH;MAAK,GAD8BD,MAE9B,CACV,CAAC;IACH;EACF;;EAEA;EACA;EACA;EACA;EACA,MAAMK,YAAY,GAAGR,YAAY,GAAG,IAAI,gBACtCX,IAAA;IACEiB,SAAS,EAAER,KAAK,CAACU,YAAa;IAC9BC,QAAQ;IAERV,KAAK,EAAEA,KAAM;IAAAQ,QAAA,EAEZR;EAAK,GAHF,0BAIE,CACT;EAED,IAAIW,eAAe,GAAGZ,KAAK,CAACa,MAAM;EAClC,IAAI,CAACX,YAAY,EAAEU,eAAe,IAAI,IAAIZ,KAAK,CAACc,OAAO,EAAE;EAEzD,oBACErB,KAAA;IAAKe,SAAS,EAAER,KAAK,CAACe,SAAU;IAAAN,QAAA,GAC5Bb,KAAK,KAAKoB,SAAS,GACjB,IAAI,gBAAGzB,IAAA;MAAKiB,SAAS,EAAER,KAAK,CAACJ,KAAM;MAAAa,QAAA,EAAEb;IAAK,CAAM,CAAC,eACrDH,KAAA;MAAKe,SAAS,EAAER,KAAK,CAACiB,QAAS;MAAAR,QAAA,gBAC7BhB,KAAA;QACEe,SAAS,EAAEI,eAAgB;QAC3B,eAAaM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGJ,SAAS,GAAGjB,MAAO;QACxEF,QAAQ,EAAEA,QAAS;QACnBI,KAAK,EAAEA,KAAM;QAAAQ,QAAA,GAEZC,YAAY,EACZP,cAAc;MAAA,CACT,CAAC,eACTZ,IAAA;QAAKiB,SAAS,EAAER,KAAK,CAACqB;MAAM,CAAE,CAAC;IAAA,CAC5B,CAAC;EAAA,CACH,CAAC;AAEV,CAAC;AAED,eAAe,eAAgBlC,MAAM,CAACO,QAAQ,EAAE,UAAU,EAAEL,YAAY,CAAC","ignoreList":[]}

package/build/web/shared/components/selectors/Switch/index.js

@@ -46,5 +46,5 @@ const BaseSwitch = ({
     })]
   });
 };
-export default themed(BaseSwitch, 'Switch', defaultTheme);
+export default /* #__PURE__ */themed(BaseSwitch, 'Switch', defaultTheme);
 //# sourceMappingURL=index.js.map

package/build/web/shared/components/selectors/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["themed","optionValueName","defaultTheme","jsx","_jsx","jsxs","_jsxs","BaseSwitch","label","onChange","options","theme","value","option","Error","optionNodes","iValue","iName","className","onPress","selected","push","onClick","onKeyDown","e","key","role","tabIndex","children","container"],"sources":["../../../../../../src/shared/components/selectors/Switch/index.tsx"],"sourcesContent":["import themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport {\n  type OptionsT,\n  type ValueT,\n  optionValueName,\n} from '../common';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'container' | 'label' | 'option' | 'options' | 'selected';\n\ntype PropsT = {\n  label?: React.ReactNode;\n  onChange?: (value: ValueT) => void;\n  options?: Readonly<OptionsT<React.ReactNode>>;\n  theme: Theme<ThemeKeyT>;\n  value?: ValueT;\n};\n\nconst BaseSwitch: React.FunctionComponent<PropsT> = ({\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  if (!options || !theme.option) throw Error('Internal error');\n\n  const optionNodes: React.ReactNode[] = [];\n  for (const option of options) {\n    const [iValue, iName] = optionValueName(option);\n\n    let className: string = theme.option;\n    let onPress: (() => void) | undefined;\n    if (iValue === value) className += ` ${theme.selected}`;\n    else if (onChange) {\n      onPress = () => {\n        onChange(iValue);\n      };\n    }\n\n    optionNodes.push(\n      onPress\n        ? (\n          <div\n            className={className}\n            key={iValue}\n            onClick={onPress}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') onPress();\n            }}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {iName}\n          </div>\n        )\n        : <div className={className} key={iValue}>{iName}</div>,\n    );\n  }\n\n  return (\n    <div className={theme.container}>\n      {label ? <div className={theme.label}>{label}</div> : null}\n\n      <div className={theme.options}>\n        {optionNodes}\n      </div>\n    </div>\n  );\n};\n\nexport default themed(BaseSwitch, 'Switch', defaultTheme);\n"],"mappings":";AAAA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,SAGEC,eAAe;AAGjB,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYxC,MAAMC,UAA2C,GAAGA,CAAC;EACnDC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAI,CAACF,OAAO,IAAI,CAACC,KAAK,CAACE,MAAM,EAAE,MAAMC,KAAK,CAAC,gBAAgB,CAAC;EAE5D,MAAMC,WAA8B,GAAG,EAAE;EACzC,KAAK,MAAMF,MAAM,IAAIH,OAAO,EAAE;IAC5B,MAAM,CAACM,MAAM,EAAEC,KAAK,CAAC,GAAGhB,eAAe,CAACY,MAAM,CAAC;IAE/C,IAAIK,SAAiB,GAAGP,KAAK,CAACE,MAAM;IACpC,IAAIM,OAAiC;IACrC,IAAIH,MAAM,KAAKJ,KAAK,EAAEM,SAAS,IAAI,IAAIP,KAAK,CAACS,QAAQ,EAAE,CAAC,KACnD,IAAIX,QAAQ,EAAE;MACjBU,OAAO,GAAGA,CAAA,KAAM;QACdV,QAAQ,CAACO,MAAM,CAAC;MAClB,CAAC;IACH;IAEAD,WAAW,CAACM,IAAI,CACdF,OAAO,gBAEHf,IAAA;MACEc,SAAS,EAAEA,SAAU;MAErBI,OAAO,EAAEH,OAAQ;MACjBI,SAAS,EAAGC,CAAC,IAAK;QAChB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEN,OAAO,CAAC,CAAC;MAClC,CAAE;MACFO,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAE;MAAAC,QAAA,EAEXX;IAAK,GARDD,MASF,CAAC,gBAENZ,IAAA;MAAKc,SAAS,EAAEA,SAAU;MAAAU,QAAA,EAAeX;IAAK,GAAdD,MAAoB,CAC1D,CAAC;EACH;EAEA,oBACEV,KAAA;IAAKY,SAAS,EAAEP,KAAK,CAACkB,SAAU;IAAAD,QAAA,GAC7BpB,KAAK,gBAAGJ,IAAA;MAAKc,SAAS,EAAEP,KAAK,CAACH,KAAM;MAAAoB,QAAA,EAAEpB;IAAK,CAAM,CAAC,GAAG,IAAI,eAE1DJ,IAAA;MAAKc,SAAS,EAAEP,KAAK,CAACD,OAAQ;MAAAkB,QAAA,EAC3Bb;IAAW,CACT,CAAC;EAAA,CACH,CAAC;AAEV,CAAC;AAED,eAAef,MAAM,CAACO,UAAU,EAAE,QAAQ,EAAEL,YAAY,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["themed","optionValueName","defaultTheme","jsx","_jsx","jsxs","_jsxs","BaseSwitch","label","onChange","options","theme","value","option","Error","optionNodes","iValue","iName","className","onPress","selected","push","onClick","onKeyDown","e","key","role","tabIndex","children","container"],"sources":["../../../../../../src/shared/components/selectors/Switch/index.tsx"],"sourcesContent":["import themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport {\n  type OptionsT,\n  type ValueT,\n  optionValueName,\n} from '../common';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'container' | 'label' | 'option' | 'options' | 'selected';\n\ntype PropsT = {\n  label?: React.ReactNode;\n  onChange?: (value: ValueT) => void;\n  options?: Readonly<OptionsT<React.ReactNode>>;\n  theme: Theme<ThemeKeyT>;\n  value?: ValueT;\n};\n\nconst BaseSwitch: React.FunctionComponent<PropsT> = ({\n  label,\n  onChange,\n  options,\n  theme,\n  value,\n}) => {\n  if (!options || !theme.option) throw Error('Internal error');\n\n  const optionNodes: React.ReactNode[] = [];\n  for (const option of options) {\n    const [iValue, iName] = optionValueName(option);\n\n    let className: string = theme.option;\n    let onPress: (() => void) | undefined;\n    if (iValue === value) className += ` ${theme.selected}`;\n    else if (onChange) {\n      onPress = () => {\n        onChange(iValue);\n      };\n    }\n\n    optionNodes.push(\n      onPress\n        ? (\n          <div\n            className={className}\n            key={iValue}\n            onClick={onPress}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') onPress();\n            }}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {iName}\n          </div>\n        )\n        : <div className={className} key={iValue}>{iName}</div>,\n    );\n  }\n\n  return (\n    <div className={theme.container}>\n      {label ? <div className={theme.label}>{label}</div> : null}\n\n      <div className={theme.options}>\n        {optionNodes}\n      </div>\n    </div>\n  );\n};\n\nexport default /* #__PURE__ */ themed(BaseSwitch, 'Switch', defaultTheme);\n"],"mappings":";AAAA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,SAGEC,eAAe;AAGjB,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYxC,MAAMC,UAA2C,GAAGA,CAAC;EACnDC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAI,CAACF,OAAO,IAAI,CAACC,KAAK,CAACE,MAAM,EAAE,MAAMC,KAAK,CAAC,gBAAgB,CAAC;EAE5D,MAAMC,WAA8B,GAAG,EAAE;EACzC,KAAK,MAAMF,MAAM,IAAIH,OAAO,EAAE;IAC5B,MAAM,CAACM,MAAM,EAAEC,KAAK,CAAC,GAAGhB,eAAe,CAACY,MAAM,CAAC;IAE/C,IAAIK,SAAiB,GAAGP,KAAK,CAACE,MAAM;IACpC,IAAIM,OAAiC;IACrC,IAAIH,MAAM,KAAKJ,KAAK,EAAEM,SAAS,IAAI,IAAIP,KAAK,CAACS,QAAQ,EAAE,CAAC,KACnD,IAAIX,QAAQ,EAAE;MACjBU,OAAO,GAAGA,CAAA,KAAM;QACdV,QAAQ,CAACO,MAAM,CAAC;MAClB,CAAC;IACH;IAEAD,WAAW,CAACM,IAAI,CACdF,OAAO,gBAEHf,IAAA;MACEc,SAAS,EAAEA,SAAU;MAErBI,OAAO,EAAEH,OAAQ;MACjBI,SAAS,EAAGC,CAAC,IAAK;QAChB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEN,OAAO,CAAC,CAAC;MAClC,CAAE;MACFO,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAE;MAAAC,QAAA,EAEXX;IAAK,GARDD,MASF,CAAC,gBAENZ,IAAA;MAAKc,SAAS,EAAEA,SAAU;MAAAU,QAAA,EAAeX;IAAK,GAAdD,MAAoB,CAC1D,CAAC;EACH;EAEA,oBACEV,KAAA;IAAKY,SAAS,EAAEP,KAAK,CAACkB,SAAU;IAAAD,QAAA,GAC7BpB,KAAK,gBAAGJ,IAAA;MAAKc,SAAS,EAAEP,KAAK,CAACH,KAAM;MAAAoB,QAAA,EAAEpB;IAAK,CAAM,CAAC,GAAG,IAAI,eAE1DJ,IAAA;MAAKc,SAAS,EAAEP,KAAK,CAACD,OAAQ;MAAAkB,QAAA,EAC3Bb;IAAW,CACT,CAAC;EAAA,CACH,CAAC;AAEV,CAAC;AAED,eAAe,eAAgBf,MAAM,CAACO,UAAU,EAAE,QAAQ,EAAEL,YAAY,CAAC","ignoreList":[]}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.47.0-alpha.7",
+  "version": "1.47.0-alpha.8",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -14,7 +14,7 @@
     "@dr.pogodin/js-utils": "^0.1.4",
     "@dr.pogodin/react-global-state": "^0.21.1",
     "@dr.pogodin/react-helmet": "^3.0.4",
-    "@dr.pogodin/react-themes": "^1.9.3",
+    "@dr.pogodin/react-themes": "^1.9.4",
     "@jest/environment": "^30.2.0",
     "axios": "^1.13.2",
     "commander": "^14.0.2",
@@ -124,13 +124,12 @@
     "npm": ">=10.9"
   },
   "main": "./build/production/index.js",
-  "source": "./src/index.ts",
   "types": "./build/types-code/index.d.ts",
   "exports": {
     ".": {
-      "browser": "./build/web/index.js",
+      "types": "./build/types-code/index.d.ts",
+      "webpack": "./build/web/index.js",
       "node": {
-        "webpack": "./build/web/index.js",
         "development": "./build/development/index.js",
         "default": "./build/production/index.js"
       },
@@ -139,12 +138,24 @@
         "types": "./build/types-code/index.d.ts"
       }
     },
+    "./client": {
+      "types": "./build/types-code/client/index.d.ts",
+      "default": "./build/web/client/index.js"
+    },
     "./config/*": "./config/*.js",
     "./config/eslint/*": "./config/eslint/*.mjs",
     "./config/*.json": "./config/*.json",
     "./global-styles": "./build/web/styles/global.scss",
-    "./jest": "./build/production/shared/utils/jest/index.js",
+    "./jest": {
+      "types": "./build/types-code/shared/utils/jest/index.d.ts",
+      "default": "./build/production/shared/utils/jest/index.js"
+    },
     "./mixins": "./build/web/styles/mixins.scss",
+    "./server": {
+      "types": "./build/types-code/server/index.d.ts",
+      "development": "./build/development/server/index.js",
+      "default": "./build/production/server/index.js"
+    },
     "./build/development/client/init": "./build/development/client/init.js",
     "./build/production/client/init": "./build/production/client/init.js",
     "./jest-e2e-ssr-env": "./build/production/shared/utils/jest/E2eSsrEnv.js"

package/src/client/getInj.ts

@@ -1,71 +0,0 @@
-// Encapsulates retrieval of server-side data injection into HTML template.
-
-/* global document */
-
-import type { InjT } from 'utils/globalState';
-
-import { getBuildInfo } from 'utils/isomorphy/buildInfo';
-
-let inj: InjT | Promise<InjT> | undefined;
-
-export default function getInj(): InjT | Promise<InjT> {
-  inj ??= (async () => {
-    const metaElement: HTMLMetaElement | null = typeof document === 'undefined'
-      ? null : document.querySelector('meta[itemprop="drpruinj"]');
-
-    if (metaElement) {
-      metaElement.remove();
-
-      // NOTE: Since 2025 there is Uint8Array.fromBase64(), which should be
-      // preferred, but it is not supported by older environments yet.
-      const data = atob(metaElement.content);
-
-      // TODO: Our current handling of this encryption / decryption follows
-      // a legacy approach, and can be enhanced by using Crypto features.
-      // Though, this is not strictly intended to be secure (it is more
-      // to obfurscate injected data, rather than really keeping them
-      // secure), thus it is fine like this for now.
-      const { key } = getBuildInfo();
-
-      const code = (x: string) => x.charCodeAt(0);
-      const dataBuffer = Uint8Array.from(data.slice(16), code);
-      const ivBuffer = Uint8Array.from(data.slice(0, 16), code);
-      const keyBuffer = Uint8Array.from(atob(key), code);
-
-      const cKey = await window.crypto.subtle.importKey(
-        'raw',
-        keyBuffer,
-        { name: 'AES-CBC' },
-        false,
-        ['decrypt'],
-      );
-
-      const buffer = await window.crypto.subtle.decrypt({
-        iv: ivBuffer,
-        name: 'AES-CBC',
-      }, cKey, dataBuffer);
-
-      const decoder = new TextDecoder();
-
-      // eslint-disable-next-line no-eval
-      const res = eval(`(${decoder.decode(buffer)})`) as InjT;
-
-      // NOTE: This is important, to be able to return the injection
-      // synchronously once it is initialized.
-      inj = res;
-
-      return res;
-    } else if (typeof window !== 'undefined' && window.REACT_UTILS_INJECTION) {
-      const res = window.REACT_UTILS_INJECTION;
-      delete window.REACT_UTILS_INJECTION;
-      return res;
-    }
-
-    // Otherwise, a bunch of dependent stuff will easily fail in non-standard
-    // environments, where no client-side initialization is performed. Like tests,
-    // Docusaurus examples, etc.
-    return {};
-  })();
-
-  return inj;
-}

package/src/client/index.tsx

@@ -1,45 +0,0 @@
-// Initialization of client-side code.
-/* global document */
-
-import type { ComponentType } from 'react';
-import { createRoot, hydrateRoot } from 'react-dom/client';
-import { HelmetProvider } from '@dr.pogodin/react-helmet';
-import { BrowserRouter } from 'react-router';
-
-import { GlobalStateProvider } from '@dr.pogodin/react-global-state';
-
-import getInj from './getInj';
-
-type OptionsT = {
-  dontHydrate?: boolean;
-  initialState?: unknown;
-};
-
-/**
- * Prepares and launches the app at client side.
- * @param Application Root application component
- * @param [options={}] Optional. Additional settings.
- */
-export default async function Launch(
-  Application: ComponentType,
-  options: OptionsT = {},
-): Promise<void> {
-  const inj = await getInj();
-
-  const container = document.getElementById('react-view');
-  if (!container) throw Error('Failed to find container for React app');
-  const scene = (
-    <GlobalStateProvider initialState={inj.ISTATE ?? options.initialState}>
-      <BrowserRouter>
-        <HelmetProvider>
-          <Application />
-        </HelmetProvider>
-      </BrowserRouter>
-    </GlobalStateProvider>
-  );
-
-  if (options.dontHydrate) {
-    const root = createRoot(container);
-    root.render(scene);
-  } else hydrateRoot(container, scene);
-}