@dr.pogodin/react-utils 1.37.0 → 1.38.1

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

@@ -28,6 +28,7 @@ const BaseButton = ({
   onMouseDown,
   openNewTab,
   replace,
+  testId,
   theme,
   to
 }) => {
@@ -37,12 +38,14 @@ const BaseButton = ({
     if (theme.disabled) className += ` ${theme.disabled}`;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: className,
+      "data-testid": testId,
       children: children
     });
   }
   if (to) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
       className: className,
+      "data-testid": testId,
       enforceA: enforceA,
       onClick: onClick,
       onMouseDown: onMouseDown,
@@ -54,6 +57,7 @@ const BaseButton = ({
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: className,
+    "data-testid": testId,
     onClick: onClick,
     onKeyDown: onClick && (e => {
       if (e.key === 'Enter') onClick(e);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["require","_Link","_interopRequireDefault","_reactThemes","_jsxRuntime","defaultTheme","BaseButton","active","children","disabled","enforceA","onClick","onMouseDown","openNewTab","replace","theme","to","className","button","jsx","default","onKeyDown","e","key","role","tabIndex","exports","_default","themed"],"sources":["../../../../../src/shared/components/Button/index.tsx"],"sourcesContent":["// The <Button> component implements a standard button / button-like link.\n\nimport { type ReactNode } from 'react';\n\nimport Link from 'components/Link';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype PropsT = {\n  active?: boolean;\n  children?: ReactNode;\n  disabled?: boolean;\n  enforceA?: boolean;\n  onClick?: React.MouseEventHandler & React.KeyboardEventHandler;\n  onMouseDown?: React.MouseEventHandler;\n  openNewTab?: boolean;\n  replace?: boolean;\n  theme: Theme<'active' | 'button' | 'disabled'>;\n  // TODO: It needs a more precise typing of the object option.\n  to?: object | string;\n};\n\n/* eslint-disable react/function-component-definition */\nexport const BaseButton: React.FunctionComponent<PropsT> = ({\n  active,\n  children,\n  disabled,\n  enforceA,\n  onClick,\n  onMouseDown,\n  openNewTab,\n  replace,\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 className={className}>\n        {children}\n      </div>\n    );\n  }\n  if (to) {\n    return (\n      <Link\n        className={className}\n        enforceA={enforceA}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\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      onClick={onClick}\n      onKeyDown={onClick && ((e) => {\n        if (e.key === 'Enter') onClick(e);\n      })}\n      onMouseDown={onMouseDown}\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":";;;;;;;AAEAA,OAAA;AAEA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA8D,IAAAI,WAAA,GAAAJ,OAAA;AAN9D;AAAA,MAAAK,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAwBA;AACO,MAAMC,UAA2C,GAAGA,CAAC;EAC1DC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,WAAW;EACXC,UAAU;EACVC,OAAO;EACPC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAIC,SAAS,GAAGF,KAAK,CAACG,MAAM;EAC5B,IAAIX,MAAM,IAAIQ,KAAK,CAACR,MAAM,EAAEU,SAAS,IAAI,IAAIF,KAAK,CAACR,MAAM,EAAE;EAC3D,IAAIE,QAAQ,EAAE;IACZ,IAAIM,KAAK,CAACN,QAAQ,EAAEQ,SAAS,IAAI,IAAIF,KAAK,CAACN,QAAQ,EAAE;IACrD,oBACE,IAAAL,WAAA,CAAAe,GAAA;MAAKF,SAAS,EAAEA,SAAU;MAAAT,QAAA,EACvBA;IAAQ,CACN,CAAC;EAEV;EACA,IAAIQ,EAAE,EAAE;IACN,oBACE,IAAAZ,WAAA,CAAAe,GAAA,EAAClB,KAAA,CAAAmB,OAAI;MACHH,SAAS,EAAEA,SAAU;MACrBP,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBC,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBE,EAAE,EAAEA,EAAG;MAAAR,QAAA,EAENA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACE,IAAAJ,WAAA,CAAAe,GAAA;IACEF,SAAS,EAAEA,SAAU;IACrBN,OAAO,EAAEA,OAAQ;IACjBU,SAAS,EAAEV,OAAO,KAAMW,CAAC,IAAK;MAC5B,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEZ,OAAO,CAACW,CAAC,CAAC;IACnC,CAAC,CAAE;IACHV,WAAW,EAAEA,WAAY;IACzBY,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IAAAjB,QAAA,EAEXA;EAAQ,CACN,CAAC;AAEV,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AANAkB,OAAA,CAAApB,UAAA,GAAAA,UAAA;AAAA,IAAAqB,QAAA,GAAAD,OAAA,CAAAN,OAAA,GAOe,IAAAQ,oBAAM,EAACtB,UAAU,EAAE,QAAQ,EAAED,YAAY,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["require","_Link","_interopRequireDefault","_reactThemes","_jsxRuntime","defaultTheme","BaseButton","active","children","disabled","enforceA","onClick","onMouseDown","openNewTab","replace","testId","theme","to","className","button","jsx","default","onKeyDown","e","key","role","tabIndex","exports","_default","themed"],"sources":["../../../../../src/shared/components/Button/index.tsx"],"sourcesContent":["// The <Button> component implements a standard button / button-like link.\n\nimport { type ReactNode } from 'react';\n\nimport Link from 'components/Link';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype PropsT = {\n  active?: boolean;\n  children?: ReactNode;\n  disabled?: boolean;\n  enforceA?: boolean;\n  onClick?: React.MouseEventHandler & React.KeyboardEventHandler;\n  onMouseDown?: React.MouseEventHandler;\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\n/* eslint-disable react/function-component-definition */\nexport const BaseButton: React.FunctionComponent<PropsT> = ({\n  active,\n  children,\n  disabled,\n  enforceA,\n  onClick,\n  onMouseDown,\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 className={className} data-testid={testId}>\n        {children}\n      </div>\n    );\n  }\n  if (to) {\n    return (\n      <Link\n        className={className}\n        data-testid={testId}\n        enforceA={enforceA}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\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={testId}\n      onClick={onClick}\n      onKeyDown={onClick && ((e) => {\n        if (e.key === 'Enter') onClick(e);\n      })}\n      onMouseDown={onMouseDown}\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":";;;;;;;AAEAA,OAAA;AAEA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA8D,IAAAI,WAAA,GAAAJ,OAAA;AAN9D;AAAA,MAAAK,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAyBA;AACO,MAAMC,UAA2C,GAAGA,CAAC;EAC1DC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,WAAW;EACXC,UAAU;EACVC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAIC,SAAS,GAAGF,KAAK,CAACG,MAAM;EAC5B,IAAIZ,MAAM,IAAIS,KAAK,CAACT,MAAM,EAAEW,SAAS,IAAI,IAAIF,KAAK,CAACT,MAAM,EAAE;EAC3D,IAAIE,QAAQ,EAAE;IACZ,IAAIO,KAAK,CAACP,QAAQ,EAAES,SAAS,IAAI,IAAIF,KAAK,CAACP,QAAQ,EAAE;IACrD,oBACE,IAAAL,WAAA,CAAAgB,GAAA;MAAKF,SAAS,EAAEA,SAAU;MAAC,eAAaH,MAAO;MAAAP,QAAA,EAC5CA;IAAQ,CACN,CAAC;EAEV;EACA,IAAIS,EAAE,EAAE;IACN,oBACE,IAAAb,WAAA,CAAAgB,GAAA,EAACnB,KAAA,CAAAoB,OAAI;MACHH,SAAS,EAAEA,SAAU;MACrB,eAAaH,MAAO;MACpBL,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBC,UAAU,EAAEA,UAAW;MACvBC,OAAO,EAAEA,OAAQ;MACjBG,EAAE,EAAEA,EAAG;MAAAT,QAAA,EAENA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACE,IAAAJ,WAAA,CAAAgB,GAAA;IACEF,SAAS,EAAEA,SAAU;IACrB,eAAaH,MAAO;IACpBJ,OAAO,EAAEA,OAAQ;IACjBW,SAAS,EAAEX,OAAO,KAAMY,CAAC,IAAK;MAC5B,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEb,OAAO,CAACY,CAAC,CAAC;IACnC,CAAC,CAAE;IACHX,WAAW,EAAEA,WAAY;IACzBa,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IAAAlB,QAAA,EAEXA;EAAQ,CACN,CAAC;AAEV,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AANAmB,OAAA,CAAArB,UAAA,GAAAA,UAAA;AAAA,IAAAsB,QAAA,GAAAD,OAAA,CAAAN,OAAA,GAOe,IAAAQ,oBAAM,EAACvB,UAAU,EAAE,QAAQ,EAAED,YAAY,CAAC","ignoreList":[]}

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

@@ -37,6 +37,8 @@ const BaseModal = ({
   containerStyle,
   dontDisableScrolling,
   onCancel,
+  style,
+  testId,
   theme
 }) => {
   const containerRef = (0, _react.useRef)(null);
@@ -116,11 +118,12 @@ const BaseModal = ({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-modal": "true",
       className: theme.container,
+      "data-testid": testId,
       onClick: e => e.stopPropagation(),
       onWheel: event => event.stopPropagation(),
       ref: containerRef,
       role: "dialog",
-      style: containerStyle,
+      style: style ?? containerStyle,
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       onFocus: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_reactDom","_interopRequireDefault","_reactThemes","_jsxRuntime","baseTheme","S","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","appendChild","removeChild","window","addEventListener","removeEventListener","classList","add","scrollingDisabledByModal","remove","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event","style","exports","_default","default","themed"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  containerStyle?: React.CSSProperties;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  theme: Theme<'container' | 'overlay'>;\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: React.FunctionComponent<PropsT> = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const [portal, setPortal] = useState<HTMLDivElement>();\n\n  useEffect(() => {\n    const p = document.createElement('div');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.removeChild(p);\n    };\n  }, []);\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('*') as NodeListOf<HTMLElement>;\n        for (let i = elems.length - 1; i >= 0; --i) {\n          elems[i]?.focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n      tabIndex={0}\n      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n    />\n  ), []);\n\n  return portal ? ReactDom.createPortal(\n    (\n      <>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\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          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          /* eslint-disable jsx-a11y/click-events-have-key-events,\n             jsx-a11y/no-noninteractive-element-interactions */\n        }\n        <div\n          aria-modal=\"true\"\n          className={theme.container}\n          onClick={(e) => e.stopPropagation()}\n          onWheel={(event) => event.stopPropagation()}\n          ref={containerRef}\n          role=\"dialog\"\n          style={containerStyle}\n        >\n          {children}\n        </div>\n        {/* eslint-enable jsx-a11y/click-events-have-key-events,\n            jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n          tabIndex={0}\n          /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n        />\n        {focusLast}\n      </>\n    ),\n    portal,\n  ) : null;\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":["_react","require","_reactDom","_interopRequireDefault","_reactThemes","_jsxRuntime","baseTheme","S","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","style","testId","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","appendChild","removeChild","window","addEventListener","removeEventListener","classList","add","scrollingDisabledByModal","remove","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event","exports","_default","default","themed"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  style?: React.CSSProperties;\n  testId?: string;\n  theme: Theme<'container' | 'overlay'>;\n\n  /** @deprecated */\n  containerStyle?: React.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: React.FunctionComponent<PropsT> = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  style,\n  testId,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const [portal, setPortal] = useState<HTMLDivElement>();\n\n  useEffect(() => {\n    const p = document.createElement('div');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.removeChild(p);\n    };\n  }, []);\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('*') as NodeListOf<HTMLElement>;\n        for (let i = elems.length - 1; i >= 0; --i) {\n          elems[i]?.focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n      tabIndex={0}\n      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n    />\n  ), []);\n\n  return portal ? ReactDom.createPortal(\n    (\n      <>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\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          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          /* eslint-disable jsx-a11y/click-events-have-key-events,\n             jsx-a11y/no-noninteractive-element-interactions */\n        }\n        <div\n          aria-modal=\"true\"\n          className={theme.container}\n          data-testid={testId}\n          onClick={(e) => e.stopPropagation()}\n          onWheel={(event) => event.stopPropagation()}\n          ref={containerRef}\n          role=\"dialog\"\n          style={style ?? containerStyle}\n        >\n          {children}\n        </div>\n        {/* eslint-enable jsx-a11y/click-events-have-key-events,\n            jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n          tabIndex={0}\n          /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n        />\n        {focusLast}\n      </>\n    ),\n    portal,\n  ) : null;\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":[]}

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

@@ -20,7 +20,8 @@ const defaultTheme = {
   "label": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___label___K7JYKw",
   "option": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W",
   "hiddenOption": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hiddenOption___clAKFJ",
-  "select": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___select___N0Fc14"
+  "select": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___select___N0Fc14",
+  "invalid": "-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___invalid___wL4umU"
 };
 /**
  * Implements a themeable dropdown list. Internally it is rendered with help of
@@ -46,6 +47,7 @@ const Dropdown = ({
   label,
   onChange,
   options,
+  testId,
   theme,
   value
 }) => {
@@ -75,6 +77,8 @@ const Dropdown = ({
     value: value,
     children: value
   }, "__reactUtilsHiddenOption");
+  let selectClassName = theme.select;
+  if (!isValidValue) selectClassName += ` ${theme.invalid}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: theme.container,
     children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -83,7 +87,8 @@ const Dropdown = ({
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: theme.dropdown,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-        className: theme.select,
+        className: selectClassName,
+        "data-testid": testId,
         onChange: onChange,
         value: value,
         children: [hiddenOption, optionElements]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_reactThemes","_interopRequireDefault","require","_common","_jsxRuntime","defaultTheme","Dropdown","filter","label","onChange","options","theme","value","Error","isValidValue","optionElements","i","length","option","undefined","iValue","iName","optionValueName","push","jsx","className","children","hiddenOption","disabled","jsxs","container","dropdown","select","arrow","_default","exports","default","themed"],"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 defaultTheme from './theme.scss';\n\nimport { type PropsT, optionValueName } from '../common';\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  theme,\n  value,\n}) => {\n  if (!options) throw Error('Internal error');\n\n  let isValidValue = false;\n  const optionElements = [];\n\n  for (let i = 0; i < options.length; ++i) {\n    const option = options[i];\n    if (option !== undefined && (!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      disabled\n      className={theme.hiddenOption}\n      key=\"__reactUtilsHiddenOption\"\n      value={value}\n    >\n      {value}\n    </option>\n  );\n\n  return (\n    <div className={theme.container}>\n      { label === undefined ? null : <div className={theme.label}>{label}</div> }\n      <div className={theme.dropdown}>\n        <select\n          className={theme.select}\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":";;;;;;;AAEA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAIA,IAAAC,OAAA,GAAAD,OAAA;AAAyD,IAAAE,WAAA,GAAAF,OAAA;AANzD;AAAA,MAAAG,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAiD,GAAGA,CAAC;EACzDC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAI,CAACF,OAAO,EAAE,MAAMG,KAAK,CAAC,gBAAgB,CAAC;EAE3C,IAAIC,YAAY,GAAG,KAAK;EACxB,MAAMC,cAAc,GAAG,EAAE;EAEzB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,OAAO,CAACO,MAAM,EAAE,EAAED,CAAC,EAAE;IACvC,MAAME,MAAM,GAAGR,OAAO,CAACM,CAAC,CAAC;IACzB,IAAIE,MAAM,KAAKC,SAAS,KAAK,CAACZ,MAAM,IAAIA,MAAM,CAACW,MAAM,CAAC,CAAC,EAAE;MACvD,MAAM,CAACE,MAAM,EAAEC,KAAK,CAAC,GAAG,IAAAC,uBAAe,EAACJ,MAAM,CAAC;MAC/CJ,YAAY,KAAKM,MAAM,KAAKR,KAAK;MACjCG,cAAc,CAACQ,IAAI,eACjB,IAAAnB,WAAA,CAAAoB,GAAA;QAAQC,SAAS,EAAEd,KAAK,CAACO,MAAO;QAAcN,KAAK,EAAEQ,MAAO;QAAAM,QAAA,EACzDL;MAAK,GAD8BD,MAE9B,CACV,CAAC;IACH;EACF;;EAEA;EACA;EACA;EACA;EACA,MAAMO,YAAY,GAAGb,YAAY,GAAG,IAAI,gBACtC,IAAAV,WAAA,CAAAoB,GAAA;IACEI,QAAQ;IACRH,SAAS,EAAEd,KAAK,CAACgB,YAAa;IAE9Bf,KAAK,EAAEA,KAAM;IAAAc,QAAA,EAEZd;EAAK,GAHF,0BAIE,CACT;EAED,oBACE,IAAAR,WAAA,CAAAyB,IAAA;IAAKJ,SAAS,EAAEd,KAAK,CAACmB,SAAU;IAAAJ,QAAA,GAC5BlB,KAAK,KAAKW,SAAS,GAAG,IAAI,gBAAG,IAAAf,WAAA,CAAAoB,GAAA;MAAKC,SAAS,EAAEd,KAAK,CAACH,KAAM;MAAAkB,QAAA,EAAElB;IAAK,CAAM,CAAC,eACzE,IAAAJ,WAAA,CAAAyB,IAAA;MAAKJ,SAAS,EAAEd,KAAK,CAACoB,QAAS;MAAAL,QAAA,gBAC7B,IAAAtB,WAAA,CAAAyB,IAAA;QACEJ,SAAS,EAAEd,KAAK,CAACqB,MAAO;QACxBvB,QAAQ,EAAEA,QAAS;QACnBG,KAAK,EAAEA,KAAM;QAAAc,QAAA,GAEZC,YAAY,EACZZ,cAAc;MAAA,CACT,CAAC,eACT,IAAAX,WAAA,CAAAoB,GAAA;QAAKC,SAAS,EAAEd,KAAK,CAACsB;MAAM,CAAE,CAAC;IAAA,CAC5B,CAAC;EAAA,CACH,CAAC;AAEV,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa,IAAAC,oBAAM,EAAC/B,QAAQ,EAAE,UAAU,EAAED,YAAY,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_reactThemes","_interopRequireDefault","require","_common","_jsxRuntime","defaultTheme","Dropdown","filter","label","onChange","options","testId","theme","value","Error","isValidValue","optionElements","i","length","option","undefined","iValue","iName","optionValueName","push","jsx","className","children","hiddenOption","disabled","selectClassName","select","invalid","jsxs","container","dropdown","arrow","_default","exports","default","themed"],"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 defaultTheme from './theme.scss';\n\nimport { type PropsT, optionValueName } from '../common';\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  if (!options) throw Error('Internal error');\n\n  let isValidValue = false;\n  const optionElements = [];\n\n  for (let i = 0; i < options.length; ++i) {\n    const option = options[i];\n    if (option !== undefined && (!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      disabled\n      className={theme.hiddenOption}\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 ? null : <div className={theme.label}>{label}</div> }\n      <div className={theme.dropdown}>\n        <select\n          className={selectClassName}\n          data-testid={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":";;;;;;;AAEA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAIA,IAAAC,OAAA,GAAAD,OAAA;AAAyD,IAAAE,WAAA,GAAAF,OAAA;AANzD;AAAA,MAAAG,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAiD,GAAGA,CAAC;EACzDC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAI,CAACH,OAAO,EAAE,MAAMI,KAAK,CAAC,gBAAgB,CAAC;EAE3C,IAAIC,YAAY,GAAG,KAAK;EACxB,MAAMC,cAAc,GAAG,EAAE;EAEzB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGP,OAAO,CAACQ,MAAM,EAAE,EAAED,CAAC,EAAE;IACvC,MAAME,MAAM,GAAGT,OAAO,CAACO,CAAC,CAAC;IACzB,IAAIE,MAAM,KAAKC,SAAS,KAAK,CAACb,MAAM,IAAIA,MAAM,CAACY,MAAM,CAAC,CAAC,EAAE;MACvD,MAAM,CAACE,MAAM,EAAEC,KAAK,CAAC,GAAG,IAAAC,uBAAe,EAACJ,MAAM,CAAC;MAC/CJ,YAAY,KAAKM,MAAM,KAAKR,KAAK;MACjCG,cAAc,CAACQ,IAAI,eACjB,IAAApB,WAAA,CAAAqB,GAAA;QAAQC,SAAS,EAAEd,KAAK,CAACO,MAAO;QAAcN,KAAK,EAAEQ,MAAO;QAAAM,QAAA,EACzDL;MAAK,GAD8BD,MAE9B,CACV,CAAC;IACH;EACF;;EAEA;EACA;EACA;EACA;EACA,MAAMO,YAAY,GAAGb,YAAY,GAAG,IAAI,gBACtC,IAAAX,WAAA,CAAAqB,GAAA;IACEI,QAAQ;IACRH,SAAS,EAAEd,KAAK,CAACgB,YAAa;IAE9Bf,KAAK,EAAEA,KAAM;IAAAc,QAAA,EAEZd;EAAK,GAHF,0BAIE,CACT;EAED,IAAIiB,eAAe,GAAGlB,KAAK,CAACmB,MAAM;EAClC,IAAI,CAAChB,YAAY,EAAEe,eAAe,IAAI,IAAIlB,KAAK,CAACoB,OAAO,EAAE;EAEzD,oBACE,IAAA5B,WAAA,CAAA6B,IAAA;IAAKP,SAAS,EAAEd,KAAK,CAACsB,SAAU;IAAAP,QAAA,GAC5BnB,KAAK,KAAKY,SAAS,GAAG,IAAI,gBAAG,IAAAhB,WAAA,CAAAqB,GAAA;MAAKC,SAAS,EAAEd,KAAK,CAACJ,KAAM;MAAAmB,QAAA,EAAEnB;IAAK,CAAM,CAAC,eACzE,IAAAJ,WAAA,CAAA6B,IAAA;MAAKP,SAAS,EAAEd,KAAK,CAACuB,QAAS;MAAAR,QAAA,gBAC7B,IAAAvB,WAAA,CAAA6B,IAAA;QACEP,SAAS,EAAEI,eAAgB;QAC3B,eAAanB,MAAO;QACpBF,QAAQ,EAAEA,QAAS;QACnBI,KAAK,EAAEA,KAAM;QAAAc,QAAA,GAEZC,YAAY,EACZZ,cAAc;MAAA,CACT,CAAC,eACT,IAAAZ,WAAA,CAAAqB,GAAA;QAAKC,SAAS,EAAEd,KAAK,CAACwB;MAAM,CAAE,CAAC;IAAA,CAC5B,CAAC;EAAA,CACH,CAAC;AAEV,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa,IAAAC,oBAAM,EAAClC,QAAQ,EAAE,UAAU,EAAED,YAAY,CAAC","ignoreList":[]}

package/build/development/shared/components/selectors/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","names":["isValue","x","type","optionValueName","option","value","name"],"sources":["../../../../../src/shared/components/selectors/common.ts"],"sourcesContent":["// The stuff common between different dropdown implementations.\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\ntype ThemeKeyT =\n  | 'active'\n  | 'arrow'\n  | 'container'\n  | 'dropdown'\n  | 'hiddenOption'\n  | 'label'\n  | 'option'\n  | 'select'\n\n  // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it\n  // into a separate theme spec for that component.\n  | 'upward';\n\nexport type ValueT = number | string;\n\nexport type OptionT<NameT> = {\n  name?: NameT | null;\n  value: ValueT;\n};\n\nexport type OptionsT<NameT> = Readonly<Array<OptionT<NameT> | ValueT>>;\n\nexport type PropsT<\n  NameT,\n  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,\n> = {\n  filter?: (item: OptionT<NameT> | ValueT) => boolean;\n  label?: React.ReactNode;\n  onChange?: OnChangeT;\n  options?: Readonly<OptionsT<NameT>>;\n  theme: Theme<ThemeKeyT>;\n  value?: ValueT;\n};\n\nfunction isValue<T>(x: OptionT<T> | ValueT): x is ValueT {\n  const type = typeof x;\n  return type === 'number' || type === 'string';\n}\n\n/** Returns option value and name as a tuple. */\nexport function optionValueName<NameT>(\n  option: OptionT<NameT> | ValueT,\n): [ValueT, NameT | ValueT] {\n  return isValue(option)\n    ? [option, option]\n    : [option.value, option.name ?? option.value];\n}\n"],"mappings":";;;;;;AAAA;;AAuCA,SAASA,OAAOA,CAAIC,CAAsB,EAAe;EACvD,MAAMC,IAAI,GAAG,OAAOD,CAAC;EACrB,OAAOC,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ;AAC/C;;AAEA;AACO,SAASC,eAAeA,CAC7BC,MAA+B,EACL;EAC1B,OAAOJ,OAAO,CAACI,MAAM,CAAC,GAClB,CAACA,MAAM,EAAEA,MAAM,CAAC,GAChB,CAACA,MAAM,CAACC,KAAK,EAAED,MAAM,CAACE,IAAI,IAAIF,MAAM,CAACC,KAAK,CAAC;AACjD","ignoreList":[]}
+{"version":3,"file":"common.js","names":["isValue","x","type","optionValueName","option","value","name"],"sources":["../../../../../src/shared/components/selectors/common.ts"],"sourcesContent":["// The stuff common between different dropdown implementations.\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\ntype ThemeKeyT =\n  | 'active'\n  | 'arrow'\n  | 'container'\n  | 'dropdown'\n  | 'hiddenOption'\n  | 'label'\n  | 'option'\n  | 'select'\n\n  // TODO: This is currently only valid for (native) <Dropdown>,\n  // other kinds of selectors should be evaluated, and aligned with this\n  // feature, if appropriate.\n  | 'invalid'\n\n  // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it\n  // into a separate theme spec for that component.\n  | 'upward';\n\nexport type ValueT = number | string;\n\nexport type OptionT<NameT> = {\n  name?: NameT | null;\n  value: ValueT;\n};\n\nexport type OptionsT<NameT> = Readonly<Array<OptionT<NameT> | ValueT>>;\n\nexport type PropsT<\n  NameT,\n  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,\n> = {\n  filter?: (item: OptionT<NameT> | ValueT) => boolean;\n  label?: React.ReactNode;\n  onChange?: OnChangeT;\n  options?: Readonly<OptionsT<NameT>>;\n  testId?: string;\n  theme: Theme<ThemeKeyT>;\n  value?: ValueT;\n};\n\nfunction isValue<T>(x: OptionT<T> | ValueT): x is ValueT {\n  const type = typeof x;\n  return type === 'number' || type === 'string';\n}\n\n/** Returns option value and name as a tuple. */\nexport function optionValueName<NameT>(\n  option: OptionT<NameT> | ValueT,\n): [ValueT, NameT | ValueT] {\n  return isValue(option)\n    ? [option, option]\n    : [option.value, option.name ?? option.value];\n}\n"],"mappings":";;;;;;AAAA;;AA6CA,SAASA,OAAOA,CAAIC,CAAsB,EAAe;EACvD,MAAMC,IAAI,GAAG,OAAOD,CAAC;EACrB,OAAOC,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,QAAQ;AAC/C;;AAEA;AACO,SAASC,eAAeA,CAC7BC,MAA+B,EACL;EAC1B,OAAOJ,OAAO,CAACI,MAAM,CAAC,GAClB,CAACA,MAAM,EAAEA,MAAM,CAAC,GAChB,CAACA,MAAM,CAACC,KAAK,EAAED,MAAM,CAACE,IAAI,IAAIF,MAAM,CAACC,KAAK,CAAC;AACjD","ignoreList":[]}

package/build/development/shared/utils/jest/index.js

@@ -97,6 +97,9 @@ function mount(scene) {
     (0, _react.act)(() => root.unmount());
     res.remove();
   };
+  res.snapshot = () => {
+    expect(res).toMatchSnapshot();
+  };
 
   // NOTE: As it seems @testing-library may reset this flag to false
   // when it is simulating user events.

package/build/development/shared/utils/jest/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_mockdate","_interopRequireDefault","require","_react","_client","_react2","_global","global","IS_REACT_ACT_ENVIRONMENT","originalProcessVersions","process","versions","mockClientSide","Object","defineProperty","value","unmockClientSide","writable","getMockUuid","seed","x","toString","padStart","slice","mockTimer","time","mockdate","set","Date","now","jest","advanceTimersByTime","mount","scene","root","element","document","createElement","body","appendChild","res","destroy","act","unmount","remove","createRoot","render","snapshot","options","promise","await","undefined","Error","nodes","asFragment","childNodes","expect","length","toMatchSnapshot"],"sources":["../../../../../src/shared/utils/jest/index.tsx"],"sourcesContent":["/* global jest, document */\n/* eslint-disable import/no-extraneous-dependencies */\n\nimport mockdate from 'mockdate';\nimport { type ReactNode, act } from 'react';\nimport { type Root, createRoot } from 'react-dom/client';\n\nimport { type RenderResult, render } from '@testing-library/react';\n\n/**\n * An alias for [act(..)](https://reactjs.org/docs/test-utils.html#act)\n * from `react`.\n */\nexport { act };\n\nexport { default as getGlobal } from './global';\n\ndeclare global {\n  // eslint-disable-next-line no-var, vars-on-top\n  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;\n}\n\nglobal.IS_REACT_ACT_ENVIRONMENT = true;\n\nconst originalProcessVersions = process.versions;\n\n/**\n * Tricks **react-utils** into thinking the test is running within client-side\n * (browser) environment.\n */\nexport function mockClientSide() {\n  Object.defineProperty(process, 'versions', { value: null });\n}\n\n/**\n * Reverts the effect of {@link module:JU.mockClientSide mockClientSide(..)}.\n */\nexport function unmockClientSide() {\n  Object.defineProperty(process, 'versions', {\n    value: originalProcessVersions,\n    writable: false,\n  });\n}\n\n/**\n * Generates a mock UUID, or better said it determenistically transforms given\n * `seed` number into a UUID-formatted string.\n * @param {number} seed\n * @return {string}\n */\nexport function getMockUuid(seed = 0) {\n  const x = seed.toString(16).padStart(32, '0');\n  return `${x.slice(0, 8)}-${x.slice(8, 12)}-${x.slice(12, 16)}-${x.slice(16, 20)}-${x.slice(20)}`;\n}\n\n/**\n * Advances mock timers, and mock date by the specified time.\n * @param {number} time Time step [ms].\n * @returns {Promise} Wait for this to \"jump after\" any async code which should\n * be executed because of the mock time movement.\n */\nexport async function mockTimer(time: number) {\n  mockdate.set(time + Date.now());\n  jest.advanceTimersByTime(time);\n}\n\nexport type MountedSceneT = HTMLElement & {\n  destroy: () => void;\n};\n\n/**\n * Mounts `scene` to the DOM, and returns the root scene element.\n * @param scene\n * @return Created container DOM element with destroy() function\n *  attached.\n */\nexport function mount(scene: ReactNode): MountedSceneT {\n  let root: Root;\n  const element = document.createElement('div');\n  document.body.appendChild(element);\n\n  const res: MountedSceneT = (element as unknown) as MountedSceneT;\n  res.destroy = () => {\n    // NOTE: As it seems @testing-library may reset this flag to false\n    // when it is simulating user events.\n    global.IS_REACT_ACT_ENVIRONMENT = true;\n\n    act(() => root.unmount());\n    res.remove();\n  };\n\n  // NOTE: As it seems @testing-library may reset this flag to false\n  // when it is simulating user events.\n  global.IS_REACT_ACT_ENVIRONMENT = true;\n\n  act(() => {\n    root = createRoot(res);\n    root.render(scene);\n  });\n  return res;\n}\n\ntype SnapshotOptionsT = {\n  await?: Promise<void>;\n};\n\nexport async function snapshot(\n  element: React.ReactElement,\n  options?: SnapshotOptionsT,\n) {\n  let res: RenderResult | undefined;\n\n  const promise = act(() => {\n    res = render(element);\n    return options?.await;\n  });\n\n  if (res === undefined) throw Error('Render failed');\n  if (options?.await) await promise;\n\n  const nodes = res.asFragment().childNodes;\n  expect(nodes.length > 1 ? [...nodes] : nodes[0]).toMatchSnapshot();\n  return res;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_mockdate","_interopRequireDefault","require","_react","_client","_react2","_global","global","IS_REACT_ACT_ENVIRONMENT","originalProcessVersions","process","versions","mockClientSide","Object","defineProperty","value","unmockClientSide","writable","getMockUuid","seed","x","toString","padStart","slice","mockTimer","time","mockdate","set","Date","now","jest","advanceTimersByTime","mount","scene","root","element","document","createElement","body","appendChild","res","destroy","act","unmount","remove","snapshot","expect","toMatchSnapshot","createRoot","render","options","promise","await","undefined","Error","nodes","asFragment","childNodes","length"],"sources":["../../../../../src/shared/utils/jest/index.tsx"],"sourcesContent":["/* global jest, document */\n/* eslint-disable import/no-extraneous-dependencies */\n\nimport mockdate from 'mockdate';\nimport { type ReactNode, act } from 'react';\nimport { type Root, createRoot } from 'react-dom/client';\n\nimport { type RenderResult, render } from '@testing-library/react';\n\n/**\n * An alias for [act(..)](https://reactjs.org/docs/test-utils.html#act)\n * from `react`.\n */\nexport { act };\n\nexport { default as getGlobal } from './global';\n\ndeclare global {\n  // eslint-disable-next-line no-var, vars-on-top\n  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;\n}\n\nglobal.IS_REACT_ACT_ENVIRONMENT = true;\n\nconst originalProcessVersions = process.versions;\n\n/**\n * Tricks **react-utils** into thinking the test is running within client-side\n * (browser) environment.\n */\nexport function mockClientSide() {\n  Object.defineProperty(process, 'versions', { value: null });\n}\n\n/**\n * Reverts the effect of {@link module:JU.mockClientSide mockClientSide(..)}.\n */\nexport function unmockClientSide() {\n  Object.defineProperty(process, 'versions', {\n    value: originalProcessVersions,\n    writable: false,\n  });\n}\n\n/**\n * Generates a mock UUID, or better said it determenistically transforms given\n * `seed` number into a UUID-formatted string.\n * @param {number} seed\n * @return {string}\n */\nexport function getMockUuid(seed = 0) {\n  const x = seed.toString(16).padStart(32, '0');\n  return `${x.slice(0, 8)}-${x.slice(8, 12)}-${x.slice(12, 16)}-${x.slice(16, 20)}-${x.slice(20)}`;\n}\n\n/**\n * Advances mock timers, and mock date by the specified time.\n * @param {number} time Time step [ms].\n * @returns {Promise} Wait for this to \"jump after\" any async code which should\n * be executed because of the mock time movement.\n */\nexport async function mockTimer(time: number) {\n  mockdate.set(time + Date.now());\n  jest.advanceTimersByTime(time);\n}\n\nexport type MountedSceneT = HTMLElement & {\n  destroy: () => void;\n  snapshot: () => void;\n};\n\n/**\n * Mounts `scene` to the DOM, and returns the root scene element.\n * @param scene\n * @return Created container DOM element with destroy() function\n *  attached.\n */\nexport function mount(scene: ReactNode): MountedSceneT {\n  let root: Root;\n  const element = document.createElement('div');\n  document.body.appendChild(element);\n\n  const res: MountedSceneT = (element as unknown) as MountedSceneT;\n  res.destroy = () => {\n    // NOTE: As it seems @testing-library may reset this flag to false\n    // when it is simulating user events.\n    global.IS_REACT_ACT_ENVIRONMENT = true;\n\n    act(() => root.unmount());\n    res.remove();\n  };\n\n  res.snapshot = () => {\n    expect(res).toMatchSnapshot();\n  };\n\n  // NOTE: As it seems @testing-library may reset this flag to false\n  // when it is simulating user events.\n  global.IS_REACT_ACT_ENVIRONMENT = true;\n\n  act(() => {\n    root = createRoot(res);\n    root.render(scene);\n  });\n  return res;\n}\n\ntype SnapshotOptionsT = {\n  await?: Promise<void>;\n};\n\nexport async function snapshot(\n  element: React.ReactElement,\n  options?: SnapshotOptionsT,\n) {\n  let res: RenderResult | undefined;\n\n  const promise = act(() => {\n    res = render(element);\n    return options?.await;\n  });\n\n  if (res === undefined) throw Error('Render failed');\n  if (options?.await) await promise;\n\n  const nodes = res.asFragment().childNodes;\n  expect(nodes.length > 1 ? [...nodes] : nodes[0]).toMatchSnapshot();\n  return res;\n}\n"],"mappings":"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","ignoreList":[]}

package/build/development/style.css

@@ -317,6 +317,8 @@ body {
 *.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___dropdown___kI9A9U,
 .-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___dropdown___kI9A9U,
 .-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___dropdown___kI9A9U {
+  display: flex;
+  overflow: hidden;
   position: relative;
 }
 *.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___arrow___DubGkT,
@@ -366,7 +368,9 @@ body {
 }
 *.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W,
 .-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W,
-.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W { /* Empty style */ }
+.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W {
+  color: black;
+}
 *.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hiddenOption___clAKFJ,
 .-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hiddenOption___clAKFJ,
 .-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hiddenOption___clAKFJ {
@@ -384,6 +388,7 @@ body {
   color: inherit;
   cursor: pointer;
   display: inline-block;
+  flex: 1;
   font: inherit;
   outline: none;
   padding: 0.3em 3.3em calc(0.3em + 1px) 1.2em;
@@ -401,6 +406,11 @@ body {
   border-color: blue;
   box-shadow: 0 0 3px 1px lightblue;
 }
+*.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___select___N0Fc14.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___invalid___wL4umU,
+.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___select___N0Fc14.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___invalid___wL4umU,
+.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___select___N0Fc14.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___invalid___wL4umU {
+  color: gray;
+}
 /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./src/shared/components/selectors/Switch/theme.scss ***!
   \*********************************************************************************************************************************************************************************************************************************************************************************************************************/

package/build/development/web.bundle.js

@@ -56,7 +56,7 @@ eval("var __dirname = \"/\";\n__webpack_require__.r(__webpack_exports__);\n/* ha
   \************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BaseButton: function() { return /* binding */ BaseButton; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Link */ \"./src/shared/components/Link.tsx\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style.scss */ \"./src/shared/components/Button/style.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n// The <Button> component implements a standard button / button-like link.\n\n\n\n\n\n\n/* eslint-disable react/function-component-definition */\nconst BaseButton = _ref => {\n  let {\n    active,\n    children,\n    disabled,\n    enforceA,\n    onClick,\n    onMouseDown,\n    openNewTab,\n    replace,\n    theme,\n    to\n  } = _ref;\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 /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: className,\n      children: children\n    });\n  }\n  if (to) {\n    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      className: className,\n      enforceA: enforceA,\n      onClick: onClick,\n      onMouseDown: onMouseDown,\n      openNewTab: openNewTab,\n      replace: replace,\n      to: to,\n      children: children\n    });\n  }\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n    className: className,\n    onClick: onClick,\n    onKeyDown: onClick && (e => {\n      if (e.key === 'Enter') onClick(e);\n    }),\n    onMouseDown: onMouseDown,\n    role: \"button\",\n    tabIndex: 0,\n    children: children\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 */\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default()(BaseButton, 'Button', _style_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"]));\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/Button/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BaseButton: function() { return /* binding */ BaseButton; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Link */ \"./src/shared/components/Link.tsx\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style.scss */ \"./src/shared/components/Button/style.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n// The <Button> component implements a standard button / button-like link.\n\n\n\n\n\n\n/* eslint-disable react/function-component-definition */\nconst BaseButton = _ref => {\n  let {\n    active,\n    children,\n    disabled,\n    enforceA,\n    onClick,\n    onMouseDown,\n    openNewTab,\n    replace,\n    testId,\n    theme,\n    to\n  } = _ref;\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 /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: className,\n      \"data-testid\": testId,\n      children: children\n    });\n  }\n  if (to) {\n    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      className: className,\n      \"data-testid\": testId,\n      enforceA: enforceA,\n      onClick: onClick,\n      onMouseDown: onMouseDown,\n      openNewTab: openNewTab,\n      replace: replace,\n      to: to,\n      children: children\n    });\n  }\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n    className: className,\n    \"data-testid\": testId,\n    onClick: onClick,\n    onKeyDown: onClick && (e => {\n      if (e.key === 'Enter') onClick(e);\n    }),\n    onMouseDown: onMouseDown,\n    role: \"button\",\n    tabIndex: 0,\n    children: children\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 */\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default()(BaseButton, 'Button', _style_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"]));\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/Button/index.tsx?");
 
 /***/ }),
 
@@ -116,7 +116,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
   \***********************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BaseModal: function() { return /* binding */ BaseModal; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _base_theme_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./base-theme.scss */ \"./src/shared/components/Modal/base-theme.scss\");\n/* harmony import */ var _styles_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styles.scss */ \"./src/shared/components/Modal/styles.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* global document */\n\n\n\n\n\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 = _ref => {\n  let {\n    cancelOnScrolling,\n    children,\n    containerStyle,\n    dontDisableScrolling,\n    onCancel,\n    theme\n  } = _ref;\n  const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const overlayRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [portal, setPortal] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const p = document.createElement('div');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.removeChild(p);\n    };\n  }, []);\n\n  // Sets up modal cancellation of scrolling, if opted-in.\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.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  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(_styles_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(_styles_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\n  const focusLast = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n    onFocus: () => {\n      var _containerRef$current, _overlayRef$current;\n      const elems = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelectorAll('*');\n      for (let i = elems.length - 1; i >= 0; --i) {\n        var _elems$i;\n        (_elems$i = elems[i]) === null || _elems$i === void 0 || _elems$i.focus();\n        if (document.activeElement === elems[i]) return;\n      }\n      (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 || _overlayRef$current.focus();\n    }\n    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */,\n    tabIndex: 0\n    /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n  }), []);\n  return portal ? /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {\n    children: [focusLast, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      \"aria-label\": \"Cancel\",\n      className: theme.overlay,\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      tabIndex: 0\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      \"aria-modal\": \"true\",\n      className: theme.container,\n      onClick: e => e.stopPropagation(),\n      onWheel: event => event.stopPropagation(),\n      ref: containerRef,\n      role: \"dialog\",\n      style: containerStyle,\n      children: children\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      onFocus: () => {\n        var _overlayRef$current2;\n        (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 || _overlayRef$current2.focus();\n      }\n      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */,\n      tabIndex: 0\n      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n    }), focusLast]\n  }), portal) : null;\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default()(BaseModal, 'Modal', _base_theme_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"]));\n\n/* Non-themed version of the Modal. */\n\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/Modal/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BaseModal: function() { return /* binding */ BaseModal; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _base_theme_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./base-theme.scss */ \"./src/shared/components/Modal/base-theme.scss\");\n/* harmony import */ var _styles_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styles.scss */ \"./src/shared/components/Modal/styles.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* global document */\n\n\n\n\n\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 = _ref => {\n  let {\n    cancelOnScrolling,\n    children,\n    containerStyle,\n    dontDisableScrolling,\n    onCancel,\n    style,\n    testId,\n    theme\n  } = _ref;\n  const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const overlayRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [portal, setPortal] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const p = document.createElement('div');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.removeChild(p);\n    };\n  }, []);\n\n  // Sets up modal cancellation of scrolling, if opted-in.\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.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  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(_styles_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(_styles_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\n  const focusLast = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n    onFocus: () => {\n      var _containerRef$current, _overlayRef$current;\n      const elems = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelectorAll('*');\n      for (let i = elems.length - 1; i >= 0; --i) {\n        var _elems$i;\n        (_elems$i = elems[i]) === null || _elems$i === void 0 || _elems$i.focus();\n        if (document.activeElement === elems[i]) return;\n      }\n      (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 || _overlayRef$current.focus();\n    }\n    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */,\n    tabIndex: 0\n    /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n  }), []);\n  return portal ? /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {\n    children: [focusLast, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      \"aria-label\": \"Cancel\",\n      className: theme.overlay,\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      tabIndex: 0\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      \"aria-modal\": \"true\",\n      className: theme.container,\n      \"data-testid\": testId,\n      onClick: e => e.stopPropagation(),\n      onWheel: event => event.stopPropagation(),\n      ref: containerRef,\n      role: \"dialog\",\n      style: style !== null && style !== void 0 ? style : containerStyle,\n      children: children\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      onFocus: () => {\n        var _overlayRef$current2;\n        (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 || _overlayRef$current2.focus();\n      }\n      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */,\n      tabIndex: 0\n      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n    }), focusLast]\n  }), portal) : null;\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default()(BaseModal, 'Modal', _base_theme_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"]));\n\n/* Non-themed version of the Modal. */\n\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/Modal/index.tsx?");
 
 /***/ }),
 
@@ -226,7 +226,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
   \******************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _theme_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./theme.scss */ \"./src/shared/components/selectors/NativeDropdown/theme.scss\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../common */ \"./src/shared/components/selectors/common.ts\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n// Implements dropdown based on the native HTML <select> element.\n\n\n\n\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 */\n\nconst Dropdown = _ref => {\n  let {\n    filter,\n    label,\n    onChange,\n    options,\n    theme,\n    value\n  } = _ref;\n  if (!options) throw Error('Internal error');\n  let isValidValue = false;\n  const optionElements = [];\n  for (let i = 0; i < options.length; ++i) {\n    const option = options[i];\n    if (option !== undefined && (!filter || filter(option))) {\n      const [iValue, iName] = (0,_common__WEBPACK_IMPORTED_MODULE_2__.optionValueName)(option);\n      isValidValue || (isValidValue = iValue === value);\n      optionElements.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"option\", {\n        className: theme.option,\n        value: iValue,\n        children: iName\n      }, iValue));\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 : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"option\", {\n    disabled: true,\n    className: theme.hiddenOption,\n    value: value,\n    children: value\n  }, \"__reactUtilsHiddenOption\");\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n    className: theme.container,\n    children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n      className: theme.label,\n      children: label\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n      className: theme.dropdown,\n      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"select\", {\n        className: theme.select,\n        onChange: onChange,\n        value: value,\n        children: [hiddenOption, optionElements]\n      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: theme.arrow\n      })]\n    })]\n  });\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_0___default()(Dropdown, 'Dropdown', _theme_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"]));\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/NativeDropdown/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _theme_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./theme.scss */ \"./src/shared/components/selectors/NativeDropdown/theme.scss\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../common */ \"./src/shared/components/selectors/common.ts\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n// Implements dropdown based on the native HTML <select> element.\n\n\n\n\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 */\n\nconst Dropdown = _ref => {\n  let {\n    filter,\n    label,\n    onChange,\n    options,\n    testId,\n    theme,\n    value\n  } = _ref;\n  if (!options) throw Error('Internal error');\n  let isValidValue = false;\n  const optionElements = [];\n  for (let i = 0; i < options.length; ++i) {\n    const option = options[i];\n    if (option !== undefined && (!filter || filter(option))) {\n      const [iValue, iName] = (0,_common__WEBPACK_IMPORTED_MODULE_2__.optionValueName)(option);\n      isValidValue || (isValidValue = iValue === value);\n      optionElements.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"option\", {\n        className: theme.option,\n        value: iValue,\n        children: iName\n      }, iValue));\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 : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"option\", {\n    disabled: true,\n    className: theme.hiddenOption,\n    value: value,\n    children: value\n  }, \"__reactUtilsHiddenOption\");\n  let selectClassName = theme.select;\n  if (!isValidValue) selectClassName += ` ${theme.invalid}`;\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n    className: theme.container,\n    children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n      className: theme.label,\n      children: label\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n      className: theme.dropdown,\n      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"select\", {\n        className: selectClassName,\n        \"data-testid\": testId,\n        onChange: onChange,\n        value: value,\n        children: [hiddenOption, optionElements]\n      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: theme.arrow\n      })]\n    })]\n  });\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_0___default()(Dropdown, 'Dropdown', _theme_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"]));\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/NativeDropdown/index.tsx?");
 
 /***/ }),
 
@@ -506,7 +506,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
   \*******************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\"dropdown\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___dropdown___kI9A9U\",\"context\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4\",\"ad\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e\",\"hoc\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb\",\"arrow\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___arrow___DubGkT\",\"container\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___container___WtSZPd\",\"active\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___active___ayMn7O\",\"label\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___label___K7JYKw\",\"option\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W\",\"hiddenOption\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hiddenOption___clAKFJ\",\"select\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___select___N0Fc14\"});\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/NativeDropdown/theme.scss?");
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\"dropdown\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___dropdown___kI9A9U\",\"context\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4\",\"ad\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e\",\"hoc\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb\",\"arrow\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___arrow___DubGkT\",\"container\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___container___WtSZPd\",\"active\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___active___ayMn7O\",\"label\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___label___K7JYKw\",\"option\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W\",\"hiddenOption\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hiddenOption___clAKFJ\",\"select\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___select___N0Fc14\",\"invalid\":\"-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___invalid___wL4umU\"});\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/NativeDropdown/theme.scss?");
 
 /***/ }),
 

package/build/production/shared/components/Button/index.js

@@ -1,5 +1,5 @@
 "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.BaseButton=void 0;require("react");var _Link=_interopRequireDefault(require("../Link"));var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");// The <Button> component implements a standard button / button-like link.
-const defaultTheme={"context":"KM0v4f","ad":"_3jm1-Q","hoc":"_0plpDL","button":"E1FNQT","active":"MAe9O6","disabled":"Br9IWV"};/* eslint-disable react/function-component-definition */const BaseButton=({active,children,disabled,enforceA,onClick,onMouseDown,openNewTab,replace,theme,to})=>{let className=theme.button;if(active&&theme.active)className+=` ${theme.active}`;if(disabled){if(theme.disabled)className+=` ${theme.disabled}`;return/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:className,children:children})}if(to){return/*#__PURE__*/(0,_jsxRuntime.jsx)(_Link.default,{className:className,enforceA:enforceA,onClick:onClick,onMouseDown:onMouseDown,openNewTab:openNewTab,replace:replace,to:to,children:children})}return/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:className,onClick:onClick,onKeyDown:onClick&&(e=>{if(e.key==="Enter")onClick(e)}),onMouseDown:onMouseDown,role:"button",tabIndex:0,children:children})};/**
+const defaultTheme={"context":"KM0v4f","ad":"_3jm1-Q","hoc":"_0plpDL","button":"E1FNQT","active":"MAe9O6","disabled":"Br9IWV"};/* eslint-disable react/function-component-definition */const BaseButton=({active,children,disabled,enforceA,onClick,onMouseDown,openNewTab,replace,testId,theme,to})=>{let className=theme.button;if(active&&theme.active)className+=` ${theme.active}`;if(disabled){if(theme.disabled)className+=` ${theme.disabled}`;return/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:className,"data-testid":testId,children:children})}if(to){return/*#__PURE__*/(0,_jsxRuntime.jsx)(_Link.default,{className:className,"data-testid":testId,enforceA:enforceA,onClick:onClick,onMouseDown:onMouseDown,openNewTab:openNewTab,replace:replace,to:to,children:children})}return/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:className,"data-testid":testId,onClick:onClick,onKeyDown:onClick&&(e=>{if(e.key==="Enter")onClick(e)}),onMouseDown:onMouseDown,role:"button",tabIndex:0,children:children})};/**
  * Button component theme: a map of CSS
  * class names to append to button elements:
  * @prop {string} [active] to the root element of active button.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["require","_Link","_interopRequireDefault","_reactThemes","_jsxRuntime","defaultTheme","BaseButton","active","children","disabled","enforceA","onClick","onMouseDown","openNewTab","replace","theme","to","className","button","jsx","default","onKeyDown","e","key","role","tabIndex","exports","_default","themed"],"sources":["../../../../../src/shared/components/Button/index.tsx"],"sourcesContent":["// The <Button> component implements a standard button / button-like link.\n\nimport { type ReactNode } from 'react';\n\nimport Link from 'components/Link';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype PropsT = {\n  active?: boolean;\n  children?: ReactNode;\n  disabled?: boolean;\n  enforceA?: boolean;\n  onClick?: React.MouseEventHandler & React.KeyboardEventHandler;\n  onMouseDown?: React.MouseEventHandler;\n  openNewTab?: boolean;\n  replace?: boolean;\n  theme: Theme<'active' | 'button' | 'disabled'>;\n  // TODO: It needs a more precise typing of the object option.\n  to?: object | string;\n};\n\n/* eslint-disable react/function-component-definition */\nexport const BaseButton: React.FunctionComponent<PropsT> = ({\n  active,\n  children,\n  disabled,\n  enforceA,\n  onClick,\n  onMouseDown,\n  openNewTab,\n  replace,\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 className={className}>\n        {children}\n      </div>\n    );\n  }\n  if (to) {\n    return (\n      <Link\n        className={className}\n        enforceA={enforceA}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\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      onClick={onClick}\n      onKeyDown={onClick && ((e) => {\n        if (e.key === 'Enter') onClick(e);\n      })}\n      onMouseDown={onMouseDown}\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":"mMAEAA,OAAA,UAEA,IAAAC,KAAA,CAAAC,sBAAA,CAAAF,OAAA,aAEA,IAAAG,YAAA,CAAAD,sBAAA,CAAAF,OAAA,8BAA8D,IAAAI,WAAA,CAAAJ,OAAA,sBAN9D;AAAA,MAAAK,YAAA,6GAwBA,wDACO,KAAM,CAAAC,UAA2C,CAAGA,CAAC,CAC1DC,MAAM,CACNC,QAAQ,CACRC,QAAQ,CACRC,QAAQ,CACRC,OAAO,CACPC,WAAW,CACXC,UAAU,CACVC,OAAO,CACPC,KAAK,CACLC,EACF,CAAC,GAAK,CACJ,GAAI,CAAAC,SAAS,CAAGF,KAAK,CAACG,MAAM,CAC5B,GAAIX,MAAM,EAAIQ,KAAK,CAACR,MAAM,CAAEU,SAAS,EAAI,IAAIF,KAAK,CAACR,MAAM,EAAE,CAC3D,GAAIE,QAAQ,CAAE,CACZ,GAAIM,KAAK,CAACN,QAAQ,CAAEQ,SAAS,EAAI,IAAIF,KAAK,CAACN,QAAQ,EAAE,CACrD,mBACE,GAAAL,WAAA,CAAAe,GAAA,SAAKF,SAAS,CAAEA,SAAU,CAAAT,QAAA,CACvBA,QAAQ,CACN,CAET,CACA,GAAIQ,EAAE,CAAE,CACN,mBACE,GAAAZ,WAAA,CAAAe,GAAA,EAAClB,KAAA,CAAAmB,OAAI,EACHH,SAAS,CAAEA,SAAU,CACrBP,QAAQ,CAAEA,QAAS,CACnBC,OAAO,CAAEA,OAAQ,CACjBC,WAAW,CAAEA,WAAY,CACzBC,UAAU,CAAEA,UAAW,CACvBC,OAAO,CAAEA,OAAQ,CACjBE,EAAE,CAAEA,EAAG,CAAAR,QAAA,CAENA,QAAQ,CACL,CAEV,CAEA,mBACE,GAAAJ,WAAA,CAAAe,GAAA,SACEF,SAAS,CAAEA,SAAU,CACrBN,OAAO,CAAEA,OAAQ,CACjBU,SAAS,CAAEV,OAAO,GAAMW,CAAC,EAAK,CAC5B,GAAIA,CAAC,CAACC,GAAG,GAAK,OAAO,CAAEZ,OAAO,CAACW,CAAC,CAClC,CAAC,CAAE,CACHV,WAAW,CAAEA,WAAY,CACzBY,IAAI,CAAC,QAAQ,CACbC,QAAQ,CAAE,CAAE,CAAAjB,QAAA,CAEXA,QAAQ,CACN,CAET,CAAC,CAED;AACA;AACA;AACA;AACA;AACA;AACA,GANAkB,OAAA,CAAApB,UAAA,CAAAA,UAAA,KAAAqB,QAAA,CAAAD,OAAA,CAAAN,OAAA,CAOe,GAAAQ,oBAAM,EAACtB,UAAU,CAAE,QAAQ,CAAED,YAAY,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["require","_Link","_interopRequireDefault","_reactThemes","_jsxRuntime","defaultTheme","BaseButton","active","children","disabled","enforceA","onClick","onMouseDown","openNewTab","replace","testId","theme","to","className","button","jsx","default","onKeyDown","e","key","role","tabIndex","exports","_default","themed"],"sources":["../../../../../src/shared/components/Button/index.tsx"],"sourcesContent":["// The <Button> component implements a standard button / button-like link.\n\nimport { type ReactNode } from 'react';\n\nimport Link from 'components/Link';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype PropsT = {\n  active?: boolean;\n  children?: ReactNode;\n  disabled?: boolean;\n  enforceA?: boolean;\n  onClick?: React.MouseEventHandler & React.KeyboardEventHandler;\n  onMouseDown?: React.MouseEventHandler;\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\n/* eslint-disable react/function-component-definition */\nexport const BaseButton: React.FunctionComponent<PropsT> = ({\n  active,\n  children,\n  disabled,\n  enforceA,\n  onClick,\n  onMouseDown,\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 className={className} data-testid={testId}>\n        {children}\n      </div>\n    );\n  }\n  if (to) {\n    return (\n      <Link\n        className={className}\n        data-testid={testId}\n        enforceA={enforceA}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\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={testId}\n      onClick={onClick}\n      onKeyDown={onClick && ((e) => {\n        if (e.key === 'Enter') onClick(e);\n      })}\n      onMouseDown={onMouseDown}\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":"mMAEAA,OAAA,UAEA,IAAAC,KAAA,CAAAC,sBAAA,CAAAF,OAAA,aAEA,IAAAG,YAAA,CAAAD,sBAAA,CAAAF,OAAA,8BAA8D,IAAAI,WAAA,CAAAJ,OAAA,sBAN9D;AAAA,MAAAK,YAAA,6GAyBA,wDACO,KAAM,CAAAC,UAA2C,CAAGA,CAAC,CAC1DC,MAAM,CACNC,QAAQ,CACRC,QAAQ,CACRC,QAAQ,CACRC,OAAO,CACPC,WAAW,CACXC,UAAU,CACVC,OAAO,CACPC,MAAM,CACNC,KAAK,CACLC,EACF,CAAC,GAAK,CACJ,GAAI,CAAAC,SAAS,CAAGF,KAAK,CAACG,MAAM,CAC5B,GAAIZ,MAAM,EAAIS,KAAK,CAACT,MAAM,CAAEW,SAAS,EAAI,IAAIF,KAAK,CAACT,MAAM,EAAE,CAC3D,GAAIE,QAAQ,CAAE,CACZ,GAAIO,KAAK,CAACP,QAAQ,CAAES,SAAS,EAAI,IAAIF,KAAK,CAACP,QAAQ,EAAE,CACrD,mBACE,GAAAL,WAAA,CAAAgB,GAAA,SAAKF,SAAS,CAAEA,SAAU,CAAC,cAAaH,MAAO,CAAAP,QAAA,CAC5CA,QAAQ,CACN,CAET,CACA,GAAIS,EAAE,CAAE,CACN,mBACE,GAAAb,WAAA,CAAAgB,GAAA,EAACnB,KAAA,CAAAoB,OAAI,EACHH,SAAS,CAAEA,SAAU,CACrB,cAAaH,MAAO,CACpBL,QAAQ,CAAEA,QAAS,CACnBC,OAAO,CAAEA,OAAQ,CACjBC,WAAW,CAAEA,WAAY,CACzBC,UAAU,CAAEA,UAAW,CACvBC,OAAO,CAAEA,OAAQ,CACjBG,EAAE,CAAEA,EAAG,CAAAT,QAAA,CAENA,QAAQ,CACL,CAEV,CAEA,mBACE,GAAAJ,WAAA,CAAAgB,GAAA,SACEF,SAAS,CAAEA,SAAU,CACrB,cAAaH,MAAO,CACpBJ,OAAO,CAAEA,OAAQ,CACjBW,SAAS,CAAEX,OAAO,GAAMY,CAAC,EAAK,CAC5B,GAAIA,CAAC,CAACC,GAAG,GAAK,OAAO,CAAEb,OAAO,CAACY,CAAC,CAClC,CAAC,CAAE,CACHX,WAAW,CAAEA,WAAY,CACzBa,IAAI,CAAC,QAAQ,CACbC,QAAQ,CAAE,CAAE,CAAAlB,QAAA,CAEXA,QAAQ,CACN,CAET,CAAC,CAED;AACA;AACA;AACA;AACA;AACA;AACA,GANAmB,OAAA,CAAArB,UAAA,CAAAA,UAAA,KAAAsB,QAAA,CAAAD,OAAA,CAAAN,OAAA,CAOe,GAAAQ,oBAAM,EAACvB,UAAU,CAAE,QAAQ,CAAED,YAAY,CAAC","ignoreList":[]}

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

@@ -8,7 +8,7 @@
  * clicks outside the modal, or presses Escape. It is expected to hide the
  * modal.
  * @param {ModalTheme} [props.theme] _Ad hoc_ theme.
- */const BaseModal=({cancelOnScrolling,children,containerStyle,dontDisableScrolling,onCancel,theme})=>{const containerRef=(0,_react.useRef)(null);const overlayRef=(0,_react.useRef)(null);const[portal,setPortal]=(0,_react.useState)();(0,_react.useEffect)(()=>{const p=document.createElement("div");document.body.appendChild(p);setPortal(p);return()=>{document.body.removeChild(p)}},[]);// Sets up modal cancellation of scrolling, if opted-in.
+ */const BaseModal=({cancelOnScrolling,children,containerStyle,dontDisableScrolling,onCancel,style,testId,theme})=>{const containerRef=(0,_react.useRef)(null);const overlayRef=(0,_react.useRef)(null);const[portal,setPortal]=(0,_react.useState)();(0,_react.useEffect)(()=>{const p=document.createElement("div");document.body.appendChild(p);setPortal(p);return()=>{document.body.removeChild(p)}},[]);// Sets up modal cancellation of scrolling, if opted-in.
 (0,_react.useEffect)(()=>{if(cancelOnScrolling&&onCancel){window.addEventListener("scroll",onCancel);window.addEventListener("wheel",onCancel)}return()=>{if(cancelOnScrolling&&onCancel){window.removeEventListener("scroll",onCancel);window.removeEventListener("wheel",onCancel)}}},[cancelOnScrolling,onCancel]);// Disables window scrolling, if it is not opted-out.
-(0,_react.useEffect)(()=>{if(!dontDisableScrolling){document.body.classList.add(S.scrollingDisabledByModal)}return()=>{if(!dontDisableScrolling){document.body.classList.remove(S.scrollingDisabledByModal)}}},[dontDisableScrolling]);const focusLast=(0,_react.useMemo)(()=>/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{onFocus:()=>{const elems=containerRef.current?.querySelectorAll("*");for(let i=elems.length-1;i>=0;--i){elems[i]?.focus();if(document.activeElement===elems[i])return}overlayRef.current?.focus()}/* eslint-disable jsx-a11y/no-noninteractive-tabindex */,tabIndex:0/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}),[]);return portal?/*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[focusLast,/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{"aria-label":"Cancel",className:theme.overlay,onClick:e=>{if(onCancel){onCancel();e.stopPropagation()}},onKeyDown:e=>{if(e.key==="Escape"&&onCancel){onCancel();e.stopPropagation()}},ref:node=>{if(node&&node!==overlayRef.current){overlayRef.current=node;node.focus()}},role:"button",tabIndex:0}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{"aria-modal":"true",className:theme.container,onClick:e=>e.stopPropagation(),onWheel:event=>event.stopPropagation(),ref:containerRef,role:"dialog",style:containerStyle,children:children}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{onFocus:()=>{overlayRef.current?.focus()}/* eslint-disable jsx-a11y/no-noninteractive-tabindex */,tabIndex:0/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}),focusLast]}),portal):null};exports.BaseModal=BaseModal;var _default=exports.default=(0,_reactThemes.default)(BaseModal,"Modal",baseTheme);/* Non-themed version of the Modal. */
+(0,_react.useEffect)(()=>{if(!dontDisableScrolling){document.body.classList.add(S.scrollingDisabledByModal)}return()=>{if(!dontDisableScrolling){document.body.classList.remove(S.scrollingDisabledByModal)}}},[dontDisableScrolling]);const focusLast=(0,_react.useMemo)(()=>/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{onFocus:()=>{const elems=containerRef.current?.querySelectorAll("*");for(let i=elems.length-1;i>=0;--i){elems[i]?.focus();if(document.activeElement===elems[i])return}overlayRef.current?.focus()}/* eslint-disable jsx-a11y/no-noninteractive-tabindex */,tabIndex:0/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}),[]);return portal?/*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[focusLast,/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{"aria-label":"Cancel",className:theme.overlay,onClick:e=>{if(onCancel){onCancel();e.stopPropagation()}},onKeyDown:e=>{if(e.key==="Escape"&&onCancel){onCancel();e.stopPropagation()}},ref:node=>{if(node&&node!==overlayRef.current){overlayRef.current=node;node.focus()}},role:"button",tabIndex:0}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{"aria-modal":"true",className:theme.container,"data-testid":testId,onClick:e=>e.stopPropagation(),onWheel:event=>event.stopPropagation(),ref:containerRef,role:"dialog",style:style??containerStyle,children:children}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{onFocus:()=>{overlayRef.current?.focus()}/* eslint-disable jsx-a11y/no-noninteractive-tabindex */,tabIndex:0/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}),focusLast]}),portal):null};exports.BaseModal=BaseModal;var _default=exports.default=(0,_reactThemes.default)(BaseModal,"Modal",baseTheme);/* Non-themed version of the Modal. */
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_reactDom","_interopRequireDefault","_reactThemes","_jsxRuntime","baseTheme","S","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","appendChild","removeChild","window","addEventListener","removeEventListener","classList","add","scrollingDisabledByModal","remove","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event","style","exports","_default","default","themed"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  containerStyle?: React.CSSProperties;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  theme: Theme<'container' | 'overlay'>;\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: React.FunctionComponent<PropsT> = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const [portal, setPortal] = useState<HTMLDivElement>();\n\n  useEffect(() => {\n    const p = document.createElement('div');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.removeChild(p);\n    };\n  }, []);\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('*') as NodeListOf<HTMLElement>;\n        for (let i = elems.length - 1; i >= 0; --i) {\n          elems[i]?.focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n      tabIndex={0}\n      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n    />\n  ), []);\n\n  return portal ? ReactDom.createPortal(\n    (\n      <>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\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          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          /* eslint-disable jsx-a11y/click-events-have-key-events,\n             jsx-a11y/no-noninteractive-element-interactions */\n        }\n        <div\n          aria-modal=\"true\"\n          className={theme.container}\n          onClick={(e) => e.stopPropagation()}\n          onWheel={(event) => event.stopPropagation()}\n          ref={containerRef}\n          role=\"dialog\"\n          style={containerStyle}\n        >\n          {children}\n        </div>\n        {/* eslint-enable jsx-a11y/click-events-have-key-events,\n            jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n          tabIndex={0}\n          /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n        />\n        {focusLast}\n      </>\n    ),\n    portal,\n  ) : null;\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":["_react","require","_reactDom","_interopRequireDefault","_reactThemes","_jsxRuntime","baseTheme","S","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","style","testId","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","appendChild","removeChild","window","addEventListener","removeEventListener","classList","add","scrollingDisabledByModal","remove","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event","exports","_default","default","themed"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  style?: React.CSSProperties;\n  testId?: string;\n  theme: Theme<'container' | 'overlay'>;\n\n  /** @deprecated */\n  containerStyle?: React.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: React.FunctionComponent<PropsT> = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  style,\n  testId,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const [portal, setPortal] = useState<HTMLDivElement>();\n\n  useEffect(() => {\n    const p = document.createElement('div');\n    document.body.appendChild(p);\n    setPortal(p);\n    return () => {\n      document.body.removeChild(p);\n    };\n  }, []);\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('*') as NodeListOf<HTMLElement>;\n        for (let i = elems.length - 1; i >= 0; --i) {\n          elems[i]?.focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n      tabIndex={0}\n      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n    />\n  ), []);\n\n  return portal ? ReactDom.createPortal(\n    (\n      <>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\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          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          /* eslint-disable jsx-a11y/click-events-have-key-events,\n             jsx-a11y/no-noninteractive-element-interactions */\n        }\n        <div\n          aria-modal=\"true\"\n          className={theme.container}\n          data-testid={testId}\n          onClick={(e) => e.stopPropagation()}\n          onWheel={(event) => event.stopPropagation()}\n          ref={containerRef}\n          role=\"dialog\"\n          style={style ?? containerStyle}\n        >\n          {children}\n        </div>\n        {/* eslint-enable jsx-a11y/click-events-have-key-events,\n            jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n          tabIndex={0}\n          /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n        />\n        {focusLast}\n      </>\n    ),\n    portal,\n  ) : null;\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":[]}

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

@@ -1,5 +1,5 @@
 "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _common=require("../common");var _jsxRuntime=require("react/jsx-runtime");// Implements dropdown based on the native HTML <select> element.
-const defaultTheme={"context":"xHyZo4","ad":"ADu59e","hoc":"FTP2bb","dropdown":"kI9A9U","arrow":"DubGkT","container":"WtSZPd","active":"ayMn7O","label":"K7JYKw","option":"_27pZ6W","hiddenOption":"clAKFJ","select":"N0Fc14"};/**
+const defaultTheme={"context":"xHyZo4","ad":"ADu59e","hoc":"FTP2bb","dropdown":"kI9A9U","arrow":"DubGkT","container":"WtSZPd","active":"ayMn7O","label":"K7JYKw","option":"_27pZ6W","hiddenOption":"clAKFJ","select":"N0Fc14","invalid":"wL4umU"};/**
  * Implements a themeable dropdown list. Internally it is rendered with help of
  * the standard HTML `<select>` element, thus the styling support is somewhat
  * limited.
@@ -17,9 +17,9 @@ const defaultTheme={"context":"xHyZo4","ad":"ADu59e","hoc":"FTP2bb","dropdown":"
  * @param [props.value] Currently selected value.
  * @param [props....]
  * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
- */const Dropdown=({filter,label,onChange,options,theme,value})=>{if(!options)throw Error("Internal error");let isValidValue=false;const optionElements=[];for(let i=0;i<options.length;++i){const option=options[i];if(option!==undefined&&(!filter||filter(option))){const[iValue,iName]=(0,_common.optionValueName)(option);isValidValue||=iValue===value;optionElements.push(/*#__PURE__*/(0,_jsxRuntime.jsx)("option",{className:theme.option,value:iValue,children:iName},iValue))}}// NOTE: This element represents the current `value` when it does not match
+ */const Dropdown=({filter,label,onChange,options,testId,theme,value})=>{if(!options)throw Error("Internal error");let isValidValue=false;const optionElements=[];for(let i=0;i<options.length;++i){const option=options[i];if(option!==undefined&&(!filter||filter(option))){const[iValue,iName]=(0,_common.optionValueName)(option);isValidValue||=iValue===value;optionElements.push(/*#__PURE__*/(0,_jsxRuntime.jsx)("option",{className:theme.option,value:iValue,children:iName},iValue))}}// NOTE: This element represents the current `value` when it does not match
 // 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:/*#__PURE__*/(0,_jsxRuntime.jsx)("option",{disabled:true,className:theme.hiddenOption,value:value,children:value},"__reactUtilsHiddenOption");return/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.container,children:[label===undefined?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.label,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.dropdown,children:[/*#__PURE__*/(0,_jsxRuntime.jsxs)("select",{className:theme.select,onChange:onChange,value:value,children:[hiddenOption,optionElements]}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.arrow})]})]})};var _default=exports.default=(0,_reactThemes.default)(Dropdown,"Dropdown",defaultTheme);
+const hiddenOption=isValidValue?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("option",{disabled:true,className:theme.hiddenOption,value:value,children:value},"__reactUtilsHiddenOption");let selectClassName=theme.select;if(!isValidValue)selectClassName+=` ${theme.invalid}`;return/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.container,children:[label===undefined?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.label,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.dropdown,children:[/*#__PURE__*/(0,_jsxRuntime.jsxs)("select",{className:selectClassName,"data-testid":testId,onChange:onChange,value:value,children:[hiddenOption,optionElements]}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.arrow})]})]})};var _default=exports.default=(0,_reactThemes.default)(Dropdown,"Dropdown",defaultTheme);
 //# sourceMappingURL=index.js.map