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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["themed","Link","defaultTheme","jsx","_jsx","BaseButton","active","children","disabled","enforceA","onClick","onKeyDown","onKeyDownProp","onKeyUp","onMouseDown","onMouseUp","onPointerDown","onPointerUp","openNewTab","replace","testId","theme","to","className","button","process","env","NODE_ENV","undefined","e","key","role","tabIndex"],"sources":["../../../../../src/shared/components/Button/index.tsx"],"sourcesContent":["// The <Button> component implements a standard button / button-like link.\n\nimport type {\n  FunctionComponent,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  PointerEventHandler,\n  ReactNode,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Link from 'components/Link';\n\nimport defaultTheme from './style.scss';\n\ntype PropsT = {\n  active?: boolean;\n  children?: ReactNode;\n  disabled?: boolean;\n  enforceA?: boolean;\n  onClick?: MouseEventHandler & KeyboardEventHandler;\n  onKeyDown?: KeyboardEventHandler;\n  onKeyUp?: KeyboardEventHandler;\n  onMouseDown?: MouseEventHandler;\n  onMouseUp?: MouseEventHandler;\n  onPointerDown?: PointerEventHandler;\n  onPointerUp?: PointerEventHandler;\n  openNewTab?: boolean;\n  replace?: boolean;\n  testId?: string;\n  theme: Theme<'active' | 'button' | 'disabled'>;\n  // TODO: It needs a more precise typing of the object option.\n  to?: object | string;\n};\n\nexport const BaseButton: FunctionComponent<PropsT> = ({\n  active,\n  children,\n  disabled,\n  enforceA,\n  onClick,\n  onKeyDown: onKeyDownProp,\n  onKeyUp,\n  onMouseDown,\n  onMouseUp,\n  onPointerDown,\n  onPointerUp,\n  openNewTab,\n  replace,\n  testId,\n  theme,\n  to,\n}) => {\n  let className = theme.button;\n  if (active && theme.active) className += ` ${theme.active}`;\n  if (disabled) {\n    if (theme.disabled) className += ` ${theme.disabled}`;\n    return (\n      <div\n        className={className}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  let onKeyDown = onKeyDownProp;\n  if (!onKeyDown && onClick) {\n    onKeyDown = (e) => {\n      if (e.key === 'Enter') onClick(e);\n    };\n  }\n\n  if (to) {\n    return (\n      <Link\n        className={className}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n        enforceA={enforceA}\n        onClick={onClick}\n\n        // TODO: For now, the `onKeyDown` handler is not passed to the <Link>,\n        // as <Link> component does not call it anyway, presumably due to\n        // the inner implementation details. We should look into supporting it:\n        // https://github.com/birdofpreyru/react-utils/issues/444\n        // onKeyDown={onKeyDown}\n\n        onKeyUp={onKeyUp}\n        onMouseDown={onMouseDown}\n        onMouseUp={onMouseUp}\n        onPointerDown={onPointerDown}\n        onPointerUp={onPointerUp}\n        openNewTab={openNewTab}\n        replace={replace}\n        to={to}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return (\n    <div\n      className={className}\n      data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onKeyUp={onKeyUp}\n      onMouseDown={onMouseDown}\n      onMouseUp={onMouseUp}\n      onPointerDown={onPointerDown}\n      onPointerUp={onPointerUp}\n      role=\"button\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Button component theme: a map of CSS\n * class names to append to button elements:\n * @prop {string} [active] to the root element of active button.\n * @prop {string} [button] to the root element of any button.\n * @prop {string} [disabled] to the root element of disabled button.\n */\nexport default themed(BaseButton, 'Button', defaultTheme);\n"],"mappings":"AAAA;;AAUA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,IAAI;AAEX,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAsBxC,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,SAAS,EAAEC,aAAa;EACxBC,OAAO;EACPC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,UAAU;EACVC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAIC,SAAS,GAAGF,KAAK,CAACG,MAAM;EAC5B,IAAIlB,MAAM,IAAIe,KAAK,CAACf,MAAM,EAAEiB,SAAS,IAAI,IAAIF,KAAK,CAACf,MAAM,EAAE;EAC3D,IAAIE,QAAQ,EAAE;IACZ,IAAIa,KAAK,CAACb,QAAQ,EAAEe,SAAS,IAAI,IAAIF,KAAK,CAACb,QAAQ,EAAE;IACrD,oBACEJ,IAAA;MACEmB,SAAS,EAAEA,SAAU;MACrB,eAAaE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGC,SAAS,GAAGR,MAAO;MAAAb,QAAA,EAEvEA;IAAQ,CACN,CAAC;EAEV;EAEA,IAAII,SAAS,GAAGC,aAAa;EAC7B,IAAI,CAACD,SAAS,IAAID,OAAO,EAAE;IACzBC,SAAS,GAAIkB,CAAC,IAAK;MACjB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEpB,OAAO,CAACmB,CAAC,CAAC;IACnC,CAAC;EACH;EAEA,IAAIP,EAAE,EAAE;IACN,oBACElB,IAAA,CAACH,IAAI;MACHsB,SAAS,EAAEA,SAAU;MACrB,eAAaE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGC,SAAS,GAAGR,MAAO;MACxEX,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA;;MAET;MACA;MACA;MACA;MACA;MAAA;;MAEAG,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBC,SAAS,EAAEA,SAAU;MACrBC,aAAa,EAAEA,aAAc;MAC7BC,WAAW,EAAEA,WAAY;MACzBC,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBG,EAAE,EAAEA,EAAG;MAAAf,QAAA,EAENA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEH,IAAA;IACEmB,SAAS,EAAEA,SAAU;IACrB,eAAaE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGC,SAAS,GAAGR,MAAO;IACxEV,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBE,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAY;IACzBC,SAAS,EAAEA,SAAU;IACrBC,aAAa,EAAEA,aAAc;IAC7BC,WAAW,EAAEA,WAAY;IACzBc,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IAAAzB,QAAA,EAEXA;EAAQ,CACN,CAAC;AAEV,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeP,MAAM,CAACK,UAAU,EAAE,QAAQ,EAAEH,YAAY,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["themed","Link","defaultTheme","jsx","_jsx","BaseButton","active","children","disabled","enforceA","onClick","onKeyDown","onKeyDownProp","onKeyUp","onMouseDown","onMouseUp","onPointerDown","onPointerUp","openNewTab","replace","testId","theme","to","className","button","process","env","NODE_ENV","undefined","e","key","role","tabIndex"],"sources":["../../../../../src/shared/components/Button/index.tsx"],"sourcesContent":["// The <Button> component implements a standard button / button-like link.\n\nimport type {\n  FunctionComponent,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  PointerEventHandler,\n  ReactNode,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Link from 'components/Link';\n\nimport defaultTheme from './style.scss';\n\ntype PropsT = {\n  active?: boolean;\n  children?: ReactNode;\n  disabled?: boolean;\n  enforceA?: boolean;\n  onClick?: MouseEventHandler & KeyboardEventHandler;\n  onKeyDown?: KeyboardEventHandler;\n  onKeyUp?: KeyboardEventHandler;\n  onMouseDown?: MouseEventHandler;\n  onMouseUp?: MouseEventHandler;\n  onPointerDown?: PointerEventHandler;\n  onPointerUp?: PointerEventHandler;\n  openNewTab?: boolean;\n  replace?: boolean;\n  testId?: string;\n  theme: Theme<'active' | 'button' | 'disabled'>;\n  // TODO: It needs a more precise typing of the object option.\n  to?: object | string;\n};\n\nexport const BaseButton: FunctionComponent<PropsT> = ({\n  active,\n  children,\n  disabled,\n  enforceA,\n  onClick,\n  onKeyDown: onKeyDownProp,\n  onKeyUp,\n  onMouseDown,\n  onMouseUp,\n  onPointerDown,\n  onPointerUp,\n  openNewTab,\n  replace,\n  testId,\n  theme,\n  to,\n}) => {\n  let className = theme.button;\n  if (active && theme.active) className += ` ${theme.active}`;\n  if (disabled) {\n    if (theme.disabled) className += ` ${theme.disabled}`;\n    return (\n      <div\n        className={className}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  let onKeyDown = onKeyDownProp;\n  if (!onKeyDown && onClick) {\n    onKeyDown = (e) => {\n      if (e.key === 'Enter') onClick(e);\n    };\n  }\n\n  if (to) {\n    return (\n      <Link\n        className={className}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n        enforceA={enforceA}\n        onClick={onClick}\n\n        // TODO: For now, the `onKeyDown` handler is not passed to the <Link>,\n        // as <Link> component does not call it anyway, presumably due to\n        // the inner implementation details. We should look into supporting it:\n        // https://github.com/birdofpreyru/react-utils/issues/444\n        // onKeyDown={onKeyDown}\n\n        onKeyUp={onKeyUp}\n        onMouseDown={onMouseDown}\n        onMouseUp={onMouseUp}\n        onPointerDown={onPointerDown}\n        onPointerUp={onPointerUp}\n        openNewTab={openNewTab}\n        replace={replace}\n        to={to}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return (\n    <div\n      className={className}\n      data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onKeyUp={onKeyUp}\n      onMouseDown={onMouseDown}\n      onMouseUp={onMouseUp}\n      onPointerDown={onPointerDown}\n      onPointerUp={onPointerUp}\n      role=\"button\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n};\n\n/**\n * Button component theme: a map of CSS\n * class names to append to button elements:\n * @prop {string} [active] to the root element of active button.\n * @prop {string} [button] to the root element of any button.\n * @prop {string} [disabled] to the root element of disabled button.\n */\nexport default /* #__PURE__ */ themed(BaseButton, 'Button', defaultTheme);\n"],"mappings":"AAAA;;AAUA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,IAAI;AAEX,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAsBxC,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,SAAS,EAAEC,aAAa;EACxBC,OAAO;EACPC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,UAAU;EACVC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAIC,SAAS,GAAGF,KAAK,CAACG,MAAM;EAC5B,IAAIlB,MAAM,IAAIe,KAAK,CAACf,MAAM,EAAEiB,SAAS,IAAI,IAAIF,KAAK,CAACf,MAAM,EAAE;EAC3D,IAAIE,QAAQ,EAAE;IACZ,IAAIa,KAAK,CAACb,QAAQ,EAAEe,SAAS,IAAI,IAAIF,KAAK,CAACb,QAAQ,EAAE;IACrD,oBACEJ,IAAA;MACEmB,SAAS,EAAEA,SAAU;MACrB,eAAaE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGC,SAAS,GAAGR,MAAO;MAAAb,QAAA,EAEvEA;IAAQ,CACN,CAAC;EAEV;EAEA,IAAII,SAAS,GAAGC,aAAa;EAC7B,IAAI,CAACD,SAAS,IAAID,OAAO,EAAE;IACzBC,SAAS,GAAIkB,CAAC,IAAK;MACjB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEpB,OAAO,CAACmB,CAAC,CAAC;IACnC,CAAC;EACH;EAEA,IAAIP,EAAE,EAAE;IACN,oBACElB,IAAA,CAACH,IAAI;MACHsB,SAAS,EAAEA,SAAU;MACrB,eAAaE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGC,SAAS,GAAGR,MAAO;MACxEX,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA;;MAET;MACA;MACA;MACA;MACA;MAAA;;MAEAG,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBC,SAAS,EAAEA,SAAU;MACrBC,aAAa,EAAEA,aAAc;MAC7BC,WAAW,EAAEA,WAAY;MACzBC,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBG,EAAE,EAAEA,EAAG;MAAAf,QAAA,EAENA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEH,IAAA;IACEmB,SAAS,EAAEA,SAAU;IACrB,eAAaE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGC,SAAS,GAAGR,MAAO;IACxEV,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBE,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAY;IACzBC,SAAS,EAAEA,SAAU;IACrBC,aAAa,EAAEA,aAAc;IAC7BC,WAAW,EAAEA,WAAY;IACzBc,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IAAAzB,QAAA,EAEXA;EAAQ,CACN,CAAC;AAEV,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,eAAgBP,MAAM,CAACK,UAAU,EAAE,QAAQ,EAAEH,YAAY,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["themed","defaultTheme","jsx","_jsx","jsxs","_jsxs","Checkbox","checked","disabled","label","onChange","testId","theme","containerClassName","container","checkboxClassName","checkbox","indeterminate","className","children","undefined","process","env","NODE_ENV","onClick","e","stopPropagation","type"],"sources":["../../../../../src/shared/components/Checkbox/index.tsx"],"sourcesContent":["import themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype PropT<ValueT> = {\n  checked?: ValueT;\n  disabled?: boolean;\n  label?: React.ReactNode;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  testId?: string;\n  theme: Theme<\n    | 'checkbox'\n    | 'container'\n    | 'disabled'\n    | 'indeterminate'\n    | 'label'\n  >;\n};\n\nconst Checkbox = <ValueT extends boolean | 'indeterminate' = boolean>({\n  checked,\n  disabled,\n  label,\n  onChange,\n  testId,\n  theme,\n}: PropT<ValueT>) => {\n  let containerClassName = theme.container;\n  if (disabled) containerClassName += ` ${theme.disabled}`;\n\n  let checkboxClassName = theme.checkbox;\n  if (checked === 'indeterminate') checkboxClassName += ` ${theme.indeterminate}`;\n\n  return (\n    <div className={containerClassName}>\n      { label === undefined\n        ? null : <div className={theme.label}>{label}</div> }\n      <input\n        checked={checked === undefined ? undefined : checked === true}\n        className={checkboxClassName}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n        disabled={disabled}\n        onChange={onChange}\n        onClick={(e) => {\n          e.stopPropagation();\n        }}\n        type=\"checkbox\"\n      />\n    </div>\n  );\n};\n\nexport default themed(Checkbox, 'Checkbox', defaultTheme);\n"],"mappings":"AAAA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBxC,MAAMC,QAAQ,GAAGA,CAAqD;EACpEC,OAAO;EACPC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC;AACa,CAAC,KAAK;EACnB,IAAIC,kBAAkB,GAAGD,KAAK,CAACE,SAAS;EACxC,IAAIN,QAAQ,EAAEK,kBAAkB,IAAI,IAAID,KAAK,CAACJ,QAAQ,EAAE;EAExD,IAAIO,iBAAiB,GAAGH,KAAK,CAACI,QAAQ;EACtC,IAAIT,OAAO,KAAK,eAAe,EAAEQ,iBAAiB,IAAI,IAAIH,KAAK,CAACK,aAAa,EAAE;EAE/E,oBACEZ,KAAA;IAAKa,SAAS,EAAEL,kBAAmB;IAAAM,QAAA,GAC/BV,KAAK,KAAKW,SAAS,GACjB,IAAI,gBAAGjB,IAAA;MAAKe,SAAS,EAAEN,KAAK,CAACH,KAAM;MAAAU,QAAA,EAAEV;IAAK,CAAM,CAAC,eACrDN,IAAA;MACEI,OAAO,EAAEA,OAAO,KAAKa,SAAS,GAAGA,SAAS,GAAGb,OAAO,KAAK,IAAK;MAC9DW,SAAS,EAAEH,iBAAkB;MAC7B,eAAaM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGH,SAAS,GAAGT,MAAO;MACxEH,QAAQ,EAAEA,QAAS;MACnBE,QAAQ,EAAEA,QAAS;MACnBc,OAAO,EAAGC,CAAC,IAAK;QACdA,CAAC,CAACC,eAAe,CAAC,CAAC;MACrB,CAAE;MACFC,IAAI,EAAC;IAAU,CAChB,CAAC;EAAA,CACC,CAAC;AAEV,CAAC;AAED,eAAe3B,MAAM,CAACM,QAAQ,EAAE,UAAU,EAAEL,YAAY,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["themed","defaultTheme","jsx","_jsx","jsxs","_jsxs","Checkbox","checked","disabled","label","onChange","testId","theme","containerClassName","container","checkboxClassName","checkbox","indeterminate","className","children","undefined","process","env","NODE_ENV","onClick","e","stopPropagation","type"],"sources":["../../../../../src/shared/components/Checkbox/index.tsx"],"sourcesContent":["import themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype PropT<ValueT> = {\n  checked?: ValueT;\n  disabled?: boolean;\n  label?: React.ReactNode;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  testId?: string;\n  theme: Theme<\n    | 'checkbox'\n    | 'container'\n    | 'disabled'\n    | 'indeterminate'\n    | 'label'\n  >;\n};\n\nconst Checkbox = <ValueT extends boolean | 'indeterminate' = boolean>({\n  checked,\n  disabled,\n  label,\n  onChange,\n  testId,\n  theme,\n}: PropT<ValueT>) => {\n  let containerClassName = theme.container;\n  if (disabled) containerClassName += ` ${theme.disabled}`;\n\n  let checkboxClassName = theme.checkbox;\n  if (checked === 'indeterminate') checkboxClassName += ` ${theme.indeterminate}`;\n\n  return (\n    <div className={containerClassName}>\n      { label === undefined\n        ? null : <div className={theme.label}>{label}</div> }\n      <input\n        checked={checked === undefined ? undefined : checked === true}\n        className={checkboxClassName}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n        disabled={disabled}\n        onChange={onChange}\n        onClick={(e) => {\n          e.stopPropagation();\n        }}\n        type=\"checkbox\"\n      />\n    </div>\n  );\n};\n\nexport default /* #__PURE__ */ themed(Checkbox, 'Checkbox', defaultTheme);\n"],"mappings":"AAAA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBxC,MAAMC,QAAQ,GAAGA,CAAqD;EACpEC,OAAO;EACPC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC;AACa,CAAC,KAAK;EACnB,IAAIC,kBAAkB,GAAGD,KAAK,CAACE,SAAS;EACxC,IAAIN,QAAQ,EAAEK,kBAAkB,IAAI,IAAID,KAAK,CAACJ,QAAQ,EAAE;EAExD,IAAIO,iBAAiB,GAAGH,KAAK,CAACI,QAAQ;EACtC,IAAIT,OAAO,KAAK,eAAe,EAAEQ,iBAAiB,IAAI,IAAIH,KAAK,CAACK,aAAa,EAAE;EAE/E,oBACEZ,KAAA;IAAKa,SAAS,EAAEL,kBAAmB;IAAAM,QAAA,GAC/BV,KAAK,KAAKW,SAAS,GACjB,IAAI,gBAAGjB,IAAA;MAAKe,SAAS,EAAEN,KAAK,CAACH,KAAM;MAAAU,QAAA,EAAEV;IAAK,CAAM,CAAC,eACrDN,IAAA;MACEI,OAAO,EAAEA,OAAO,KAAKa,SAAS,GAAGA,SAAS,GAAGb,OAAO,KAAK,IAAK;MAC9DW,SAAS,EAAEH,iBAAkB;MAC7B,eAAaM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGH,SAAS,GAAGT,MAAO;MACxEH,QAAQ,EAAEA,QAAS;MACnBE,QAAQ,EAAEA,QAAS;MACnBc,OAAO,EAAGC,CAAC,IAAK;QACdA,CAAC,CAACC,eAAe,CAAC,CAAC;MACrB,CAAE;MACFC,IAAI,EAAC;IAAU,CAChB,CAAC;EAAA,CACC,CAAC;AAEV,CAAC;AAED,eAAe,eAAgB3B,MAAM,CAACM,QAAQ,EAAE,UAAU,EAAEL,YAAY,CAAC","ignoreList":[]}

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

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

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

package/build/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":"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","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":"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,GAAG,eAAgBtD,MAAM,CAACQ,OAAO,EAAE,aAAa,EAAEL,YAAY,CAAC;AAMlF,MAAM6C,CAAU,GAAGM,aAAwB;AAE3CN,CAAC,CAAC9C,UAAU,GAAGA,UAAU;AAEzB,eAAe8C,CAAC","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/Options/index.js

@@ -1,3 +1,6 @@
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.filter.js";
 import { useImperativeHandle, useRef } from 'react';
 import { BaseModal } from "../../../Modal";
 import { optionValueName } from "../../common";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useImperativeHandle","useRef","BaseModal","optionValueName","S","jsx","_jsx","areEqual","a","b","left","top","width","Options","containerClass","containerStyle","filter","onCancel","onChange","optionClass","options","ref","opsRef","measure","e","current","parentElement","undefined","rect","getBoundingClientRect","style","window","getComputedStyle","mBottom","parseFloat","marginBottom","mTop","marginTop","height","optionNodes","option","iValue","iName","push","className","onClick","stopPropagation","onKeyDown","key","role","tabIndex","children","cancelOnScrolling","dontDisableScrolling","theme","ad","container","context","hoc","overlay"],"sources":["../../../../../../../src/shared/components/selectors/CustomDropdown/Options/index.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type ReactNode,\n  type RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { BaseModal } from 'components/Modal';\n\nimport {\n  type OptionT,\n  type OptionsT,\n  type ValueT,\n  optionValueName,\n} from '../../common';\n\nimport S from './style.scss';\n\nexport type ContainerPosT = {\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport function areEqual(a?: ContainerPosT, b?: ContainerPosT): boolean {\n  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;\n}\n\nexport type RefT = {\n  measure: () => DOMRect | undefined;\n};\n\ntype PropsT = {\n  containerClass: string;\n  containerStyle?: ContainerPosT;\n  filter?: (item: OptionT<ReactNode> | ValueT) => boolean;\n  optionClass: string;\n  options: Readonly<OptionsT<ReactNode>>;\n  onCancel: () => void;\n  onChange: (value: ValueT) => void;\n  ref?: RefObject<RefT | null>;\n};\n\nconst Options: FunctionComponent<PropsT> = ({\n  containerClass,\n  containerStyle,\n  filter,\n  onCancel,\n  onChange,\n  optionClass,\n  options,\n  ref,\n}) => {\n  const opsRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    measure: () => {\n      const e = opsRef.current?.parentElement;\n      if (!e) return undefined;\n\n      const rect = opsRef.current!.getBoundingClientRect();\n      const style = window.getComputedStyle(e);\n      const mBottom = parseFloat(style.marginBottom);\n      const mTop = parseFloat(style.marginTop);\n\n      rect.height += mBottom + mTop;\n\n      return rect;\n    },\n  }), []);\n\n  const optionNodes: ReactNode[] = [];\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      optionNodes.push(\n        <div\n          className={optionClass}\n          key={iValue}\n          onClick={(e) => {\n            onChange(iValue);\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onChange(iValue);\n              e.stopPropagation();\n            }\n          }}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {iName}\n        </div>,\n      );\n    }\n  }\n\n  return (\n    <BaseModal\n      // Closes the dropdown (cancels the selection) on any page scrolling attempt.\n      // This is the same native <select> elements do on scrolling, and at least for\n      // now we have no reason to deal with complications needed to support open\n      // dropdowns during the scrolling (that would need to re-position it in\n      // response to the position changes of the root dropdown element).\n      cancelOnScrolling\n      dontDisableScrolling\n      onCancel={onCancel}\n      style={containerStyle}\n      theme={{\n        ad: '',\n        container: containerClass,\n        context: '',\n        hoc: '',\n        overlay: S.overlay,\n      }}\n    >\n      <div ref={opsRef}>{optionNodes}</div>\n    </BaseModal>\n  );\n};\n\nexport default Options;\n"],"mappings":"AAAA,SAIEA,mBAAmB,EACnBC,MAAM,QACD,OAAO;AAEd,SAASC,SAAS;AAElB,SAIEC,eAAe;AAGjB,OAAOC,CAAC;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAQ7B,OAAO,SAASC,QAAQA,CAACC,CAAiB,EAAEC,CAAiB,EAAW;EACtE,OAAOD,CAAC,EAAEE,IAAI,KAAKD,CAAC,EAAEC,IAAI,IAAIF,CAAC,EAAEG,GAAG,KAAKF,CAAC,EAAEE,GAAG,IAAIH,CAAC,EAAEI,KAAK,KAAKH,CAAC,EAAEG,KAAK;AAC1E;AAiBA,MAAMC,OAAkC,GAAGA,CAAC;EAC1CC,cAAc;EACdC,cAAc;EACdC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC;AACF,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EAE3CD,mBAAmB,CAACqB,GAAG,EAAE,OAAO;IAC9BE,OAAO,EAAEA,CAAA,KAAM;MACb,MAAMC,CAAC,GAAGF,MAAM,CAACG,OAAO,EAAEC,aAAa;MACvC,IAAI,CAACF,CAAC,EAAE,OAAOG,SAAS;MAExB,MAAMC,IAAI,GAAGN,MAAM,CAACG,OAAO,CAAEI,qBAAqB,CAAC,CAAC;MACpD,MAAMC,KAAK,GAAGC,MAAM,CAACC,gBAAgB,CAACR,CAAC,CAAC;MACxC,MAAMS,OAAO,GAAGC,UAAU,CAACJ,KAAK,CAACK,YAAY,CAAC;MAC9C,MAAMC,IAAI,GAAGF,UAAU,CAACJ,KAAK,CAACO,SAAS,CAAC;MAExCT,IAAI,CAACU,MAAM,IAAIL,OAAO,GAAGG,IAAI;MAE7B,OAAOR,IAAI;IACb;EACF,CAAC,CAAC,EAAE,EAAE,CAAC;EAEP,MAAMW,WAAwB,GAAG,EAAE;EACnC,KAAK,MAAMC,MAAM,IAAIpB,OAAO,EAAE;IAC5B,IAAI,CAACJ,MAAM,IAAIA,MAAM,CAACwB,MAAM,CAAC,EAAE;MAC7B,MAAM,CAACC,MAAM,EAAEC,KAAK,CAAC,GAAGvC,eAAe,CAACqC,MAAM,CAAC;MAC/CD,WAAW,CAACI,IAAI,cACdrC,IAAA;QACEsC,SAAS,EAAEzB,WAAY;QAEvB0B,OAAO,EAAGrB,CAAC,IAAK;UACdN,QAAQ,CAACuB,MAAM,CAAC;UAChBjB,CAAC,CAACsB,eAAe,CAAC,CAAC;QACrB,CAAE;QACFC,SAAS,EAAGvB,CAAC,IAAK;UAChB,IAAIA,CAAC,CAACwB,GAAG,KAAK,OAAO,EAAE;YACrB9B,QAAQ,CAACuB,MAAM,CAAC;YAChBjB,CAAC,CAACsB,eAAe,CAAC,CAAC;UACrB;QACF,CAAE;QACFG,IAAI,EAAC,QAAQ;QACbC,QAAQ,EAAE,CAAE;QAAAC,QAAA,EAEXT;MAAK,GAdDD,MAeF,CACP,CAAC;IACH;EACF;EAEA,oBACEnC,IAAA,CAACJ;EACC;EACA;EACA;EACA;EACA;EAAA;IACAkD,iBAAiB;IACjBC,oBAAoB;IACpBpC,QAAQ,EAAEA,QAAS;IACnBa,KAAK,EAAEf,cAAe;IACtBuC,KAAK,EAAE;MACLC,EAAE,EAAE,EAAE;MACNC,SAAS,EAAE1C,cAAc;MACzB2C,OAAO,EAAE,EAAE;MACXC,GAAG,EAAE,EAAE;MACPC,OAAO,EAAEvD,CAAC,CAACuD;IACb,CAAE;IAAAR,QAAA,eAEF7C,IAAA;MAAKe,GAAG,EAAEC,MAAO;MAAA6B,QAAA,EAAEZ;IAAW,CAAM;EAAC,CAC5B,CAAC;AAEhB,CAAC;AAED,eAAe1B,OAAO","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useImperativeHandle","useRef","BaseModal","optionValueName","S","jsx","_jsx","areEqual","a","b","left","top","width","Options","containerClass","containerStyle","filter","onCancel","onChange","optionClass","options","ref","opsRef","measure","e","current","parentElement","undefined","rect","getBoundingClientRect","style","window","getComputedStyle","mBottom","parseFloat","marginBottom","mTop","marginTop","height","optionNodes","option","iValue","iName","push","className","onClick","stopPropagation","onKeyDown","key","role","tabIndex","children","cancelOnScrolling","dontDisableScrolling","theme","ad","container","context","hoc","overlay"],"sources":["../../../../../../../src/shared/components/selectors/CustomDropdown/Options/index.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type ReactNode,\n  type RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { BaseModal } from 'components/Modal';\n\nimport {\n  type OptionT,\n  type OptionsT,\n  type ValueT,\n  optionValueName,\n} from '../../common';\n\nimport S from './style.scss';\n\nexport type ContainerPosT = {\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport function areEqual(a?: ContainerPosT, b?: ContainerPosT): boolean {\n  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;\n}\n\nexport type RefT = {\n  measure: () => DOMRect | undefined;\n};\n\ntype PropsT = {\n  containerClass: string;\n  containerStyle?: ContainerPosT;\n  filter?: (item: OptionT<ReactNode> | ValueT) => boolean;\n  optionClass: string;\n  options: Readonly<OptionsT<ReactNode>>;\n  onCancel: () => void;\n  onChange: (value: ValueT) => void;\n  ref?: RefObject<RefT | null>;\n};\n\nconst Options: FunctionComponent<PropsT> = ({\n  containerClass,\n  containerStyle,\n  filter,\n  onCancel,\n  onChange,\n  optionClass,\n  options,\n  ref,\n}) => {\n  const opsRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    measure: () => {\n      const e = opsRef.current?.parentElement;\n      if (!e) return undefined;\n\n      const rect = opsRef.current!.getBoundingClientRect();\n      const style = window.getComputedStyle(e);\n      const mBottom = parseFloat(style.marginBottom);\n      const mTop = parseFloat(style.marginTop);\n\n      rect.height += mBottom + mTop;\n\n      return rect;\n    },\n  }), []);\n\n  const optionNodes: ReactNode[] = [];\n  for (const option of options) {\n    if (!filter || filter(option)) {\n      const [iValue, iName] = optionValueName(option);\n      optionNodes.push(\n        <div\n          className={optionClass}\n          key={iValue}\n          onClick={(e) => {\n            onChange(iValue);\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onChange(iValue);\n              e.stopPropagation();\n            }\n          }}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {iName}\n        </div>,\n      );\n    }\n  }\n\n  return (\n    <BaseModal\n      // Closes the dropdown (cancels the selection) on any page scrolling attempt.\n      // This is the same native <select> elements do on scrolling, and at least for\n      // now we have no reason to deal with complications needed to support open\n      // dropdowns during the scrolling (that would need to re-position it in\n      // response to the position changes of the root dropdown element).\n      cancelOnScrolling\n      dontDisableScrolling\n      onCancel={onCancel}\n      style={containerStyle}\n      theme={{\n        ad: '',\n        container: containerClass,\n        context: '',\n        hoc: '',\n        overlay: S.overlay,\n      }}\n    >\n      <div ref={opsRef}>{optionNodes}</div>\n    </BaseModal>\n  );\n};\n\nexport default Options;\n"],"mappings":";;;AAAA,SAIEA,mBAAmB,EACnBC,MAAM,QACD,OAAO;AAEd,SAASC,SAAS;AAElB,SAIEC,eAAe;AAGjB,OAAOC,CAAC;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAQ7B,OAAO,SAASC,QAAQA,CAACC,CAAiB,EAAEC,CAAiB,EAAW;EACtE,OAAOD,CAAC,EAAEE,IAAI,KAAKD,CAAC,EAAEC,IAAI,IAAIF,CAAC,EAAEG,GAAG,KAAKF,CAAC,EAAEE,GAAG,IAAIH,CAAC,EAAEI,KAAK,KAAKH,CAAC,EAAEG,KAAK;AAC1E;AAiBA,MAAMC,OAAkC,GAAGA,CAAC;EAC1CC,cAAc;EACdC,cAAc;EACdC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC;AACF,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EAE3CD,mBAAmB,CAACqB,GAAG,EAAE,OAAO;IAC9BE,OAAO,EAAEA,CAAA,KAAM;MACb,MAAMC,CAAC,GAAGF,MAAM,CAACG,OAAO,EAAEC,aAAa;MACvC,IAAI,CAACF,CAAC,EAAE,OAAOG,SAAS;MAExB,MAAMC,IAAI,GAAGN,MAAM,CAACG,OAAO,CAAEI,qBAAqB,CAAC,CAAC;MACpD,MAAMC,KAAK,GAAGC,MAAM,CAACC,gBAAgB,CAACR,CAAC,CAAC;MACxC,MAAMS,OAAO,GAAGC,UAAU,CAACJ,KAAK,CAACK,YAAY,CAAC;MAC9C,MAAMC,IAAI,GAAGF,UAAU,CAACJ,KAAK,CAACO,SAAS,CAAC;MAExCT,IAAI,CAACU,MAAM,IAAIL,OAAO,GAAGG,IAAI;MAE7B,OAAOR,IAAI;IACb;EACF,CAAC,CAAC,EAAE,EAAE,CAAC;EAEP,MAAMW,WAAwB,GAAG,EAAE;EACnC,KAAK,MAAMC,MAAM,IAAIpB,OAAO,EAAE;IAC5B,IAAI,CAACJ,MAAM,IAAIA,MAAM,CAACwB,MAAM,CAAC,EAAE;MAC7B,MAAM,CAACC,MAAM,EAAEC,KAAK,CAAC,GAAGvC,eAAe,CAACqC,MAAM,CAAC;MAC/CD,WAAW,CAACI,IAAI,cACdrC,IAAA;QACEsC,SAAS,EAAEzB,WAAY;QAEvB0B,OAAO,EAAGrB,CAAC,IAAK;UACdN,QAAQ,CAACuB,MAAM,CAAC;UAChBjB,CAAC,CAACsB,eAAe,CAAC,CAAC;QACrB,CAAE;QACFC,SAAS,EAAGvB,CAAC,IAAK;UAChB,IAAIA,CAAC,CAACwB,GAAG,KAAK,OAAO,EAAE;YACrB9B,QAAQ,CAACuB,MAAM,CAAC;YAChBjB,CAAC,CAACsB,eAAe,CAAC,CAAC;UACrB;QACF,CAAE;QACFG,IAAI,EAAC,QAAQ;QACbC,QAAQ,EAAE,CAAE;QAAAC,QAAA,EAEXT;MAAK,GAdDD,MAeF,CACP,CAAC;IACH;EACF;EAEA,oBACEnC,IAAA,CAACJ;EACC;EACA;EACA;EACA;EACA;EAAA;IACAkD,iBAAiB;IACjBC,oBAAoB;IACpBpC,QAAQ,EAAEA,QAAS;IACnBa,KAAK,EAAEf,cAAe;IACtBuC,KAAK,EAAE;MACLC,EAAE,EAAE,EAAE;MACNC,SAAS,EAAE1C,cAAc;MACzB2C,OAAO,EAAE,EAAE;MACXC,GAAG,EAAE,EAAE;MACPC,OAAO,EAAEvD,CAAC,CAACuD;IACb,CAAE;IAAAR,QAAA,eAEF7C,IAAA;MAAKe,GAAG,EAAEC,MAAO;MAAA6B,QAAA,EAAEZ;IAAW,CAAM;EAAC,CAC5B,CAAC;AAEhB,CAAC;AAED,eAAe1B,OAAO","ignoreList":[]}

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

@@ -1,3 +1,5 @@
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.filter.js";
 import { useEffect, useRef, useState } from 'react';
 import themed from '@dr.pogodin/react-themes';
 import { optionValueName } from "../common";
@@ -116,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":"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","ignoreList":[]}

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

@@ -1,3 +1,6 @@
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.filter.js";
 // Implements dropdown based on the native HTML <select> element.
 
 import themed from '@dr.pogodin/react-themes';
@@ -78,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

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.push.js";
 import themed from '@dr.pogodin/react-themes';
 import { optionValueName } from "../common";
 import defaultTheme from "./theme.scss";
@@ -45,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/build/web/shared/utils/jest/E2eSsrEnv.js

@@ -1,3 +1,5 @@
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.for-each.js";
 /**
  * Jest environment for end-to-end SSR and client-side testing. It relies on
  * the standard react-utils mechanics to execute SSR of given scene, and also