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

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

@@ -0,0 +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 = /* #__PURE__ */ themed(Wrapper, 'WithTooltip', defaultTheme);\n\ntype ExportT = typeof ThemedWrapper & {\n  PLACEMENTS: typeof PLACEMENTS;\n};\n\nconst e: ExportT = ThemedWrapper as ExportT;\n\ne.PLACEMENTS = PLACEMENTS;\n\nexport default e;\n"],"mappings":"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","ignoreList":[]}

package/{src/shared/components/YouTubeVideo/index.tsx → build/web/shared/components/YouTubeVideo/index.js}

@@ -1,21 +1,9 @@
 import qs from 'qs';
-
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import Throbber from 'components/Throbber';
-
-import baseTheme from './base.scss';
-import throbberTheme from './throbber.scss';
-
-type ComponentThemeT = Theme<'container' | 'video'>;
-
-type PropsT = {
-  autoplay?: boolean;
-  src: string;
-  theme: ComponentThemeT;
-  title?: string;
-};
-
+import themed from '@dr.pogodin/react-themes';
+import Throbber from "../Throbber";
+import baseTheme from "./base.scss";
+import throbberTheme from "./throbber.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A component for embeding a YouTube video.
  * @param [props] Component properties.
@@ -31,20 +19,18 @@ type PropsT = {
  * @param [props.title] The `title` attribute to add to the player
  * IFrame.
  */
-const YouTubeVideo: React.FunctionComponent<PropsT> = ({
+const YouTubeVideo = ({
   autoplay,
   src,
   theme,
-  title,
+  title
 }) => {
   const srcParts = src.split('?');
   let [url] = srcParts;
   const [, queryString] = srcParts;
   const query = queryString ? qs.parse(queryString) : {};
-
   const videoId = query.v ?? url?.match(/\/([a-zA-Z0-9-_]*)$/)?.[1];
-  url = `https://www.youtube.com/embed/${videoId as string}`;
-
+  url = `https://www.youtube.com/embed/${videoId}`;
   delete query.v;
   query.autoplay = autoplay ? '1' : '0';
   url += `?${qs.stringify(query)}`;
@@ -52,22 +38,19 @@ const YouTubeVideo: React.FunctionComponent<PropsT> = ({
   // TODO: https://developers.google.com/youtube/player_parameters
   // More query parameters can be exposed via the component props.
 
-  return (
-    <div className={theme.container}>
-      <Throbber theme={throbberTheme} />
-      {/* TODO: I guess, we better add the sanbox, but right now I don't have
-          time to carefully explore which restrictions should be lifted to allow
-          embed YouTube player to work... sometime later we'll take care of it */
-      }
-      <iframe // eslint-disable-line react/iframe-missing-sandbox
-        allow="autoplay"
-        allowFullScreen
-        className={theme.video}
-        src={url}
-        title={title}
-      />
-    </div>
-  );
+  return /*#__PURE__*/_jsxs("div", {
+    className: theme.container,
+    children: [/*#__PURE__*/_jsx(Throbber, {
+      theme: throbberTheme
+    }), /*#__PURE__*/_jsx("iframe", {
+      // eslint-disable-line react/iframe-missing-sandbox
+      allow: "autoplay",
+      allowFullScreen: true,
+      className: theme.video,
+      src: url,
+      title: title
+    })]
+  });
 };
-
-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

@@ -0,0 +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 /* #__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/index.js

@@ -0,0 +1,18 @@
+/**
+ * Just an aggregation of all exported components into a single module.
+ */
+
+export { MetaTags } from '@dr.pogodin/react-helmet';
+export * from "./selectors";
+export { default as Button, BaseButton } from "./Button";
+export { default as Checkbox } from "./Checkbox";
+export { default as Input } from "./Input";
+export { default as Link } from "./Link";
+export { default as PageLayout } from "./PageLayout";
+export { default as Modal, BaseModal } from "./Modal";
+export { default as NavLink } from "./NavLink";
+export { default as Throbber } from "./Throbber";
+export { default as WithTooltip } from "./WithTooltip";
+export { default as YouTubeVideo } from "./YouTubeVideo";
+export { default as TextArea } from "./TextArea";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["MetaTags","default","Button","BaseButton","Checkbox","Input","Link","PageLayout","Modal","BaseModal","NavLink","Throbber","WithTooltip","YouTubeVideo","TextArea"],"sources":["../../../../src/shared/components/index.ts"],"sourcesContent":["/**\n * Just an aggregation of all exported components into a single module.\n */\n\nexport { MetaTags } from '@dr.pogodin/react-helmet';\n\nexport * from 'components/selectors';\n\nexport { default as Button, BaseButton } from 'components/Button';\nexport { default as Checkbox } from 'components/Checkbox';\nexport { default as Input } from 'components/Input';\nexport { default as Link } from 'components/Link';\nexport { default as PageLayout } from 'components/PageLayout';\nexport { default as Modal, BaseModal } from 'components/Modal';\nexport { default as NavLink } from 'components/NavLink';\nexport { default as Throbber } from 'components/Throbber';\nexport { default as WithTooltip } from 'components/WithTooltip';\nexport { default as YouTubeVideo } from 'components/YouTubeVideo';\n\nexport { default as TextArea } from './TextArea';\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,0BAA0B;AAEnD;AAEA,SAASC,OAAO,IAAIC,MAAM,EAAEC,UAAU;AACtC,SAASF,OAAO,IAAIG,QAAQ;AAC5B,SAASH,OAAO,IAAII,KAAK;AACzB,SAASJ,OAAO,IAAIK,IAAI;AACxB,SAASL,OAAO,IAAIM,UAAU;AAC9B,SAASN,OAAO,IAAIO,KAAK,EAAEC,SAAS;AACpC,SAASR,OAAO,IAAIS,OAAO;AAC3B,SAAST,OAAO,IAAIU,QAAQ;AAC5B,SAASV,OAAO,IAAIW,WAAW;AAC/B,SAASX,OAAO,IAAIY,YAAY;AAEhC,SAASZ,OAAO,IAAIa,QAAQ","ignoreList":[]}

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

@@ -0,0 +1,82 @@
+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";
+import S from "./style.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function areEqual(a, b) {
+  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;
+}
+const Options = ({
+  containerClass,
+  containerStyle,
+  filter,
+  onCancel,
+  onChange,
+  optionClass,
+  options,
+  ref
+}) => {
+  const opsRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    measure: () => {
+      const e = opsRef.current?.parentElement;
+      if (!e) return undefined;
+      const rect = opsRef.current.getBoundingClientRect();
+      const style = window.getComputedStyle(e);
+      const mBottom = parseFloat(style.marginBottom);
+      const mTop = parseFloat(style.marginTop);
+      rect.height += mBottom + mTop;
+      return rect;
+    }
+  }), []);
+  const optionNodes = [];
+  for (const option of options) {
+    if (!filter || filter(option)) {
+      const [iValue, iName] = optionValueName(option);
+      optionNodes.push(/*#__PURE__*/_jsx("div", {
+        className: optionClass,
+        onClick: e => {
+          onChange(iValue);
+          e.stopPropagation();
+        },
+        onKeyDown: e => {
+          if (e.key === 'Enter') {
+            onChange(iValue);
+            e.stopPropagation();
+          }
+        },
+        role: "button",
+        tabIndex: 0,
+        children: iName
+      }, iValue));
+    }
+  }
+  return /*#__PURE__*/_jsx(BaseModal
+  // Closes the dropdown (cancels the selection) on any page scrolling attempt.
+  // This is the same native <select> elements do on scrolling, and at least for
+  // now we have no reason to deal with complications needed to support open
+  // dropdowns during the scrolling (that would need to re-position it in
+  // response to the position changes of the root dropdown element).
+  , {
+    cancelOnScrolling: true,
+    dontDisableScrolling: true,
+    onCancel: onCancel,
+    style: containerStyle,
+    theme: {
+      ad: '',
+      container: containerClass,
+      context: '',
+      hoc: '',
+      overlay: S.overlay
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ref: opsRef,
+      children: optionNodes
+    })
+  });
+};
+export default Options;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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":[]}

package/{src/shared/components/selectors/CustomDropdown/index.tsx → build/web/shared/components/selectors/CustomDropdown/index.js}

@@ -1,72 +1,56 @@
+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 { type PropsT, type ValueT, optionValueName } from '../common';
-
-import Options, { type ContainerPosT, type RefT, areEqual } from './Options';
-
-import defaultTheme from './theme.scss';
-
-const BaseCustomDropdown: React.FunctionComponent<
-  PropsT<React.ReactNode, (value: ValueT) => void>
-> = ({
+import { optionValueName } from "../common";
+import Options, { areEqual } from "./Options";
+import defaultTheme from "./theme.scss";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BaseCustomDropdown = ({
   filter,
   label,
   onChange,
   options,
   theme,
-  value,
+  value
 }) => {
   const [active, setActive] = useState(false);
-
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const opsRef = useRef<RefT>(null);
-
-  const [opsPos, setOpsPos] = useState<ContainerPosT>();
+  const dropdownRef = useRef(null);
+  const opsRef = useRef(null);
+  const [opsPos, setOpsPos] = useState();
   const [upward, setUpward] = useState(false);
-
   useEffect(() => {
     if (!active) return undefined;
-
-    let id: number;
+    let id;
     const cb = () => {
       const anchor = dropdownRef.current?.getBoundingClientRect();
       const opsRect = opsRef.current?.measure();
       if (anchor && opsRect) {
-        const fitsDown = anchor.bottom + opsRect.height
-          < (window.visualViewport?.height ?? 0);
+        const fitsDown = anchor.bottom + opsRect.height < (window.visualViewport?.height ?? 0);
         const fitsUp = anchor.top - opsRect.height > 0;
-
         const up = !fitsDown && fitsUp;
         setUpward(up);
-
         const pos = up ? {
           left: anchor.left,
           top: anchor.top - opsRect.height - 1,
-          width: anchor.width,
+          width: anchor.width
         } : {
           left: anchor.left,
           top: anchor.bottom,
-          width: anchor.width,
+          width: anchor.width
         };
-
-        setOpsPos((now) => (areEqual(now, pos) ? now : pos));
+        setOpsPos(now => areEqual(now, pos) ? now : pos);
       }
       id = requestAnimationFrame(cb);
     };
     requestAnimationFrame(cb);
-
     return () => {
       cancelAnimationFrame(id);
     };
   }, [active]);
-
-  const openList = (
-    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
-  ) => {
+  const openList = e => {
     const view = window.visualViewport;
-    const rect = dropdownRef.current!.getBoundingClientRect();
+    const rect = dropdownRef.current.getBoundingClientRect();
     setActive(true);
 
     // NOTE: This first opens the dropdown off-screen, where it is measured
@@ -78,13 +62,13 @@ const BaseCustomDropdown: React.FunctionComponent<
     setOpsPos({
       left: view?.width ?? 0,
       top: view?.height ?? 0,
-      width: rect.width,
+      width: rect.width
     });
-
     e.stopPropagation();
   };
-
-  let selected: React.ReactNode = <>&zwnj;</>;
+  let selected = /*#__PURE__*/_jsx(_Fragment, {
+    children: "\u200C"
+  });
   for (const option of options) {
     if (!filter || filter(option)) {
       const [iValue, iName] = optionValueName(option);
@@ -94,53 +78,45 @@ const BaseCustomDropdown: React.FunctionComponent<
       }
     }
   }
-
   let containerClassName = theme.container;
   if (active) containerClassName += ` ${theme.active}`;
-
   let opsContainerClass = theme.select ?? '';
   if (upward) {
     containerClassName += ` ${theme.upward}`;
     opsContainerClass += ` ${theme.upward}`;
   }
-
-  return (
-    <div className={containerClassName}>
-      {label === undefined ? null
-        : <div className={theme.label}>{label}</div>}
-      <div
-        className={theme.dropdown}
-        onClick={openList}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') openList(e);
-        }}
-        ref={dropdownRef}
-        role="listbox"
-        tabIndex={0}
-      >
-        {selected}
-        <div className={theme.arrow} />
-      </div>
-      {
-        active ? (
-          <Options
-            containerClass={opsContainerClass}
-            containerStyle={opsPos}
-            onCancel={() => {
-              setActive(false);
-            }}
-            onChange={(newValue) => {
-              setActive(false);
-              if (onChange) onChange(newValue);
-            }}
-            optionClass={theme.option ?? ''}
-            options={options}
-            ref={opsRef}
-          />
-        ) : null
-      }
-    </div>
-  );
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassName,
+    children: [label === undefined ? null : /*#__PURE__*/_jsx("div", {
+      className: theme.label,
+      children: label
+    }), /*#__PURE__*/_jsxs("div", {
+      className: theme.dropdown,
+      onClick: openList,
+      onKeyDown: e => {
+        if (e.key === 'Enter') openList(e);
+      },
+      ref: dropdownRef,
+      role: "listbox",
+      tabIndex: 0,
+      children: [selected, /*#__PURE__*/_jsx("div", {
+        className: theme.arrow
+      })]
+    }), active ? /*#__PURE__*/_jsx(Options, {
+      containerClass: opsContainerClass,
+      containerStyle: opsPos,
+      onCancel: () => {
+        setActive(false);
+      },
+      onChange: newValue => {
+        setActive(false);
+        if (onChange) onChange(newValue);
+      },
+      optionClass: theme.option ?? '',
+      options: options,
+      ref: opsRef
+    }) : 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

@@ -0,0 +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 /* #__PURE__ */ themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);\n"],"mappings":"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","ignoreList":[]}

package/{src/shared/components/selectors/NativeDropdown/index.tsx → build/web/shared/components/selectors/NativeDropdown/index.js}

@@ -1,10 +1,11 @@
+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';
-
-import { type PropsT, optionValueName } from '../common';
-
-import defaultTheme from './theme.scss';
+import { optionValueName } from "../common";
+import defaultTheme from "./theme.scss";
 
 /**
  * Implements a themeable dropdown list. Internally it is rendered with help of
@@ -25,27 +26,27 @@ import defaultTheme from './theme.scss';
  * @param [props....]
  * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  */
-const Dropdown: React.FunctionComponent<PropsT<string>> = ({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Dropdown = ({
   filter,
   label,
   onChange,
   options,
   testId,
   theme,
-  value,
+  value
 }) => {
   let isValidValue = false;
   const optionElements = [];
-
   for (const option of options) {
     if (!filter || filter(option)) {
       const [iValue, iName] = optionValueName(option);
       isValidValue ||= iValue === value;
-      optionElements.push(
-        <option className={theme.option} key={iValue} value={iValue}>
-          {iName}
-        </option>,
-      );
+      optionElements.push(/*#__PURE__*/_jsx("option", {
+        className: theme.option,
+        value: iValue,
+        children: iName
+      }, iValue));
     }
   }
 
@@ -53,38 +54,32 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
   // any valid option. In Chrome, and some other browsers, we are able to hide
   // it from the opened dropdown; in others, e.g. Safari, the best we can do is
   // to show it as disabled.
-  const hiddenOption = isValidValue ? null : (
-    <option
-      className={theme.hiddenOption}
-      disabled
-      key="__reactUtilsHiddenOption"
-      value={value}
-    >
-      {value}
-    </option>
-  );
-
+  const hiddenOption = isValidValue ? null : /*#__PURE__*/_jsx("option", {
+    className: theme.hiddenOption,
+    disabled: true,
+    value: value,
+    children: value
+  }, "__reactUtilsHiddenOption");
   let selectClassName = theme.select;
   if (!isValidValue) selectClassName += ` ${theme.invalid}`;
-
-  return (
-    <div className={theme.container}>
-      { label === undefined
-        ? null : <div className={theme.label}>{label}</div> }
-      <div className={theme.dropdown}>
-        <select
-          className={selectClassName}
-          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-          onChange={onChange}
-          value={value}
-        >
-          {hiddenOption}
-          {optionElements}
-        </select>
-        <div className={theme.arrow} />
-      </div>
-    </div>
-  );
+  return /*#__PURE__*/_jsxs("div", {
+    className: theme.container,
+    children: [label === undefined ? null : /*#__PURE__*/_jsx("div", {
+      className: theme.label,
+      children: label
+    }), /*#__PURE__*/_jsxs("div", {
+      className: theme.dropdown,
+      children: [/*#__PURE__*/_jsxs("select", {
+        className: selectClassName,
+        "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
+        onChange: onChange,
+        value: value,
+        children: [hiddenOption, optionElements]
+      }), /*#__PURE__*/_jsx("div", {
+        className: theme.arrow
+      })]
+    })]
+  });
 };
-
-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

@@ -0,0 +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 /* #__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":[]}