@dr.pogodin/react-utils 1.33.0 → 1.33.1

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

@@ -96,9 +96,17 @@ const BaseModal = ({
     children: [focusLast, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-label": "Cancel",
       className: theme.overlay,
-      onClick: () => onCancel && onCancel(),
+      onClick: e => {
+        if (onCancel) {
+          onCancel();
+          e.stopPropagation();
+        }
+      },
       onKeyDown: e => {
-        if (e.key === 'Escape' && onCancel) onCancel();
+        if (e.key === 'Escape' && onCancel) {
+          onCancel();
+          e.stopPropagation();
+        }
       },
       ref: node => {
         if (node && node !== overlayRef.current) {
@@ -111,6 +119,7 @@ const BaseModal = ({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-modal": "true",
       className: theme.container,
+      onClick: e => e.stopPropagation(),
       onWheel: event => event.stopPropagation(),
       ref: containerRef,
       role: "dialog",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_lodash","require","_react","_reactDom","_interopRequireDefault","_propTypes","_reactThemes","_jsxRuntime","baseTheme","S","validThemeKeys","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","onKeyDown","e","key","ref","node","role","container","onWheel","event","stopPropagation","style","exports","ThemedModal","themed","propTypes","PT","bool","shape","func","themeType","isRequired","defaultProps","undefined","noop","_default","default"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport { noop } from 'lodash';\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\nconst validThemeKeys = ['container', 'overlay'] as const;\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  containerStyle?: React.CSSProperties;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  theme: Theme<typeof validThemeKeys>;\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={() => onCancel && onCancel()}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' && onCancel) onCancel();\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        <div\n          aria-modal=\"true\"\n          className={theme.container}\n          onWheel={(event) => event.stopPropagation()}\n          ref={containerRef}\n          role=\"dialog\"\n          style={containerStyle}\n        >\n          {children}\n        </div>\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\nconst ThemedModal = themed(\n  BaseModal,\n  'Modal',\n  validThemeKeys,\n  baseTheme,\n);\n\nBaseModal.propTypes = {\n  cancelOnScrolling: PT.bool,\n  children: PT.node,\n  containerStyle: PT.shape({}),\n  dontDisableScrolling: PT.bool,\n  onCancel: PT.func,\n  theme: ThemedModal.themeType.isRequired,\n};\n\nBaseModal.defaultProps = {\n  cancelOnScrolling: false,\n  children: null,\n  containerStyle: undefined,\n  dontDisableScrolling: false,\n  onCancel: noop,\n};\n\nexport default ThemedModal;\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":";;;;;;;AAEA,IAAAA,OAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAQA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,UAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,YAAA,GAAAF,sBAAA,CAAAH,OAAA;AAA8D,IAAAM,WAAA,GAAAN,OAAA;AAd9D;AAAA,MAAAO,SAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,MAAAC,CAAA;EAAA;AAAA;AAmBA,MAAMC,cAAc,GAAG,CAAC,WAAW,EAAE,SAAS,CAAU;AAWxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAA0C,GAAGA,CAAC;EAClDC,iBAAiB;EACjBC,QAAQ;EACRC,cAAc;EACdC,oBAAoB;EACpBC,QAAQ;EACRC;AACF,CAAC,KAAK;EACJ,MAAMC,YAAY,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACxD,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAAwB,IAAI,CAAC;EACtD,MAAM,CAACE,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAiB,CAAC;EAEtD,IAAAC,gBAAS,EAAC,MAAM;IACd,MAAMC,CAAC,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IACvCD,QAAQ,CAACE,IAAI,CAACC,WAAW,CAACJ,CAAC,CAAC;IAC5BH,SAAS,CAACG,CAAC,CAAC;IACZ,OAAO,MAAM;MACXC,QAAQ,CAACE,IAAI,CAACE,WAAW,CAACL,CAAC,CAAC;IAC9B,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,IAAAD,gBAAS,EAAC,MAAM;IACd,IAAIZ,iBAAiB,IAAII,QAAQ,EAAE;MACjCe,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEhB,QAAQ,CAAC;MAC3Ce,MAAM,CAACC,gBAAgB,CAAC,OAAO,EAAEhB,QAAQ,CAAC;IAC5C;IACA,OAAO,MAAM;MACX,IAAIJ,iBAAiB,IAAII,QAAQ,EAAE;QACjCe,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEjB,QAAQ,CAAC;QAC9Ce,MAAM,CAACE,mBAAmB,CAAC,OAAO,EAAEjB,QAAQ,CAAC;MAC/C;IACF,CAAC;EACH,CAAC,EAAE,CAACJ,iBAAiB,EAAEI,QAAQ,CAAC,CAAC;;EAEjC;EACA,IAAAQ,gBAAS,EAAC,MAAM;IACd,IAAI,CAACT,oBAAoB,EAAE;MACzBW,QAAQ,CAACE,IAAI,CAACM,SAAS,CAACC,GAAG,CAAC1B,CAAC,CAAC2B,wBAAwB,CAAC;IACzD;IACA,OAAO,MAAM;MACX,IAAI,CAACrB,oBAAoB,EAAE;QACzBW,QAAQ,CAACE,IAAI,CAACM,SAAS,CAACG,MAAM,CAAC5B,CAAC,CAAC2B,wBAAwB,CAAC;MAC5D;IACF,CAAC;EACH,CAAC,EAAE,CAACrB,oBAAoB,CAAC,CAAC;EAE1B,MAAMuB,SAAS,GAAG,IAAAC,cAAO,EAAC,mBACxB,IAAAhC,WAAA,CAAAiC,GAAA;IACEC,OAAO,EAAEA,CAAA,KAAM;MACb,MAAMC,KAAK,GAAGxB,YAAY,CAACyB,OAAO,EAAEC,gBAAgB,CAAC,GAAG,CAA4B;MACpF,KAAK,IAAIC,CAAC,GAAGH,KAAK,CAACI,MAAM,GAAG,CAAC,EAAED,CAAC,IAAI,CAAC,EAAE,EAAEA,CAAC,EAAE;QAC1CH,KAAK,CAACG,CAAC,CAAC,CAACE,KAAK,CAAC,CAAC;QAChB,IAAIrB,QAAQ,CAACsB,aAAa,KAAKN,KAAK,CAACG,CAAC,CAAC,EAAE;MAC3C;MACAzB,UAAU,CAACuB,OAAO,EAAEI,KAAK,CAAC,CAAC;IAC7B;IACA;IACAE,QAAQ,EAAE;IACV;EAAA,CACD,CACF,EAAE,EAAE,CAAC;EAEN,OAAO5B,MAAM,gBAAG6B,iBAAQ,CAACC,YAAY,eAEjC,IAAA5C,WAAA,CAAA6C,IAAA,EAAA7C,WAAA,CAAA8C,QAAA;IAAAxC,QAAA,GACGyB,SAAS,eACV,IAAA/B,WAAA,CAAAiC,GAAA;MACE,cAAW,QAAQ;MACnBc,SAAS,EAAErC,KAAK,CAACsC,OAAQ;MACzBC,OAAO,EAAEA,CAAA,KAAMxC,QAAQ,IAAIA,QAAQ,CAAC,CAAE;MACtCyC,SAAS,EAAGC,CAAC,IAAK;QAChB,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,IAAI3C,QAAQ,EAAEA,QAAQ,CAAC,CAAC;MAChD,CAAE;MACF4C,GAAG,EAAGC,IAAI,IAAK;QACb,IAAIA,IAAI,IAAIA,IAAI,KAAKzC,UAAU,CAACuB,OAAO,EAAE;UACvCvB,UAAU,CAACuB,OAAO,GAAGkB,IAAI;UACzBA,IAAI,CAACd,KAAK,CAAC,CAAC;QACd;MACF,CAAE;MACFe,IAAI,EAAC,QAAQ;MACbb,QAAQ,EAAE;IAAE,CACb,CAAC,eACF,IAAA1C,WAAA,CAAAiC,GAAA;MACE,cAAW,MAAM;MACjBc,SAAS,EAAErC,KAAK,CAAC8C,SAAU;MAC3BC,OAAO,EAAGC,KAAK,IAAKA,KAAK,CAACC,eAAe,CAAC,CAAE;MAC5CN,GAAG,EAAE1C,YAAa;MAClB4C,IAAI,EAAC,QAAQ;MACbK,KAAK,EAAErD,cAAe;MAAAD,QAAA,EAErBA;IAAQ,CACN,CAAC,eACN,IAAAN,WAAA,CAAAiC,GAAA;MACEC,OAAO,EAAEA,CAAA,KAAM;QACbrB,UAAU,CAACuB,OAAO,EAAEI,KAAK,CAAC,CAAC;MAC7B;MACA;MACAE,QAAQ,EAAE;MACV;IAAA,CACD,CAAC,EACDX,SAAS;EAAA,CACV,CAAC,EAELjB,MACF,CAAC,GAAG,IAAI;AACV,CAAC;AAAC+C,OAAA,CAAAzD,SAAA,GAAAA,SAAA;AAEF,MAAM0D,WAAW,GAAG,IAAAC,oBAAM,EACxB3D,SAAS,EACT,OAAO,EACPD,cAAc,EACdF,SACF,CAAC;AAEDG,SAAS,CAAC4D,SAAS,GAAG;EACpB3D,iBAAiB,EAAE4D,kBAAE,CAACC,IAAI;EAC1B5D,QAAQ,EAAE2D,kBAAE,CAACX,IAAI;EACjB/C,cAAc,EAAE0D,kBAAE,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC;EAC5B3D,oBAAoB,EAAEyD,kBAAE,CAACC,IAAI;EAC7BzD,QAAQ,EAAEwD,kBAAE,CAACG,IAAI;EACjB1D,KAAK,EAAEoD,WAAW,CAACO,SAAS,CAACC;AAC/B,CAAC;AAEDlE,SAAS,CAACmE,YAAY,GAAG;EACvBlE,iBAAiB,EAAE,KAAK;EACxBC,QAAQ,EAAE,IAAI;EACdC,cAAc,EAAEiE,SAAS;EACzBhE,oBAAoB,EAAE,KAAK;EAC3BC,QAAQ,EAAEgE;AACZ,CAAC;AAAC,IAAAC,QAAA,GAAAb,OAAA,CAAAc,OAAA,GAEab,WAAW;AAE1B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_lodash","require","_react","_reactDom","_interopRequireDefault","_propTypes","_reactThemes","_jsxRuntime","baseTheme","S","validThemeKeys","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","ThemedModal","themed","propTypes","PT","bool","shape","func","themeType","isRequired","defaultProps","undefined","noop","_default","default"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport { noop } from 'lodash';\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\nconst validThemeKeys = ['container', 'overlay'] as const;\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  containerStyle?: React.CSSProperties;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  theme: Theme<typeof validThemeKeys>;\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\nconst ThemedModal = themed(\n  BaseModal,\n  'Modal',\n  validThemeKeys,\n  baseTheme,\n);\n\nBaseModal.propTypes = {\n  cancelOnScrolling: PT.bool,\n  children: PT.node,\n  containerStyle: PT.shape({}),\n  dontDisableScrolling: PT.bool,\n  onCancel: PT.func,\n  theme: ThemedModal.themeType.isRequired,\n};\n\nBaseModal.defaultProps = {\n  cancelOnScrolling: false,\n  children: null,\n  containerStyle: undefined,\n  dontDisableScrolling: false,\n  onCancel: noop,\n};\n\nexport default ThemedModal;\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

@@ -99,7 +99,7 @@ Dropdown.propTypes = {
   filter: _propTypes.default.func,
   label: _propTypes.default.node,
   onChange: _propTypes.default.func,
-  options: _common.optionsValidator,
+  options: _common.stringOptionsValidator,
   theme: ThemedDropdown.themeType.isRequired,
   value: _propTypes.default.string
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_common","_jsxRuntime","defaultTheme","Dropdown","filter","label","onChange","options","theme","value","Error","isValidValue","optionElements","i","length","option","iValue","iName","optionValueName","push","jsx","className","children","hiddenOption","disabled","jsxs","container","undefined","dropdown","select","arrow","ThemedDropdown","themed","validThemeKeys","propTypes","PT","func","node","optionsValidator","themeType","isRequired","string","defaultProps","_default","exports","default"],"sources":["../../../../../../src/shared/components/selectors/NativeDropdown/index.tsx"],"sourcesContent":["// Implements dropdown based on the native HTML <select> element.\n\nimport PT from 'prop-types';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nimport {\n  type PropsT,\n  optionsValidator,\n  optionValueName,\n  validThemeKeys,\n} 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 (!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\nconst ThemedDropdown = themed(\n  Dropdown,\n  'Dropdown',\n  validThemeKeys,\n  defaultTheme,\n);\n\nDropdown.propTypes = {\n  filter: PT.func,\n  label: PT.node,\n  onChange: PT.func,\n  options: optionsValidator,\n  theme: ThemedDropdown.themeType.isRequired,\n  value: PT.string,\n};\n\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: '',\n};\n\nexport default ThemedDropdown;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_common","_jsxRuntime","defaultTheme","Dropdown","filter","label","onChange","options","theme","value","Error","isValidValue","optionElements","i","length","option","iValue","iName","optionValueName","push","jsx","className","children","hiddenOption","disabled","jsxs","container","undefined","dropdown","select","arrow","ThemedDropdown","themed","validThemeKeys","propTypes","PT","func","node","stringOptionsValidator","themeType","isRequired","string","defaultProps","_default","exports","default"],"sources":["../../../../../../src/shared/components/selectors/NativeDropdown/index.tsx"],"sourcesContent":["// Implements dropdown based on the native HTML <select> element.\n\nimport PT from 'prop-types';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nimport {\n  type PropsT,\n  optionValueName,\n  stringOptionsValidator,\n  validThemeKeys,\n} 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 (!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\nconst ThemedDropdown = themed(\n  Dropdown,\n  'Dropdown',\n  validThemeKeys,\n  defaultTheme,\n);\n\nDropdown.propTypes = {\n  filter: PT.func,\n  label: PT.node,\n  onChange: PT.func,\n  options: stringOptionsValidator,\n  theme: ThemedDropdown.themeType.isRequired,\n  value: PT.string,\n};\n\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: '',\n};\n\nexport default ThemedDropdown;\n"],"mappings":"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","ignoreList":[]}

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.optionValidator = void 0;
 exports.optionValueName = optionValueName;
-exports.validThemeKeys = exports.optionsValidator = void 0;
+exports.validThemeKeys = exports.stringOptionsValidator = exports.stringOptionValidator = exports.optionsValidator = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 // The stuff common between different dropdown implementations.
 
@@ -15,10 +15,15 @@ const validThemeKeys = exports.validThemeKeys = ['active', 'arrow', 'container',
 // into a separate theme spec for that component.
 'upward'];
 const optionValidator = exports.optionValidator = _propTypes.default.oneOfType([_propTypes.default.shape({
-  name: _propTypes.default.string,
+  name: _propTypes.default.node,
   value: _propTypes.default.string.isRequired
 }).isRequired, _propTypes.default.string.isRequired]);
 const optionsValidator = exports.optionsValidator = _propTypes.default.arrayOf(optionValidator.isRequired);
+const stringOptionValidator = exports.stringOptionValidator = _propTypes.default.oneOfType([_propTypes.default.shape({
+  name: _propTypes.default.string,
+  value: _propTypes.default.string.isRequired
+}).isRequired, _propTypes.default.string.isRequired]);
+const stringOptionsValidator = exports.stringOptionsValidator = _propTypes.default.arrayOf(stringOptionValidator.isRequired);
 
 /** Returns option value and name as a tuple. */
 function optionValueName(option) {

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

@@ -1 +1 @@
-{"version":3,"file":"common.js","names":["_propTypes","_interopRequireDefault","require","validThemeKeys","exports","optionValidator","PT","oneOfType","shape","name","string","value","isRequired","optionsValidator","arrayOf","optionValueName","option"],"sources":["../../../../../src/shared/components/selectors/common.ts"],"sourcesContent":["// The stuff common between different dropdown implementations.\n\nimport PT from 'prop-types';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\nexport const validThemeKeys = [\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] as const;\n\nexport type OptionT<NameT> = {\n  name?: NameT | null;\n  value: string;\n};\n\nexport type OptionsT<NameT> = Array<OptionT<NameT> | string>;\n\nexport type PropsT<\n  NameT,\n  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,\n> = {\n  filter?: (item: OptionT<NameT> | string) => boolean;\n  label?: React.ReactNode;\n  onChange?: OnChangeT;\n  options?: OptionsT<NameT>;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\nexport const optionValidator = PT.oneOfType([\n  PT.shape({\n    name: PT.string,\n    value: PT.string.isRequired,\n  }).isRequired,\n  PT.string.isRequired,\n]);\n\nexport const optionsValidator = PT.arrayOf(optionValidator.isRequired);\n\n/** Returns option value and name as a tuple. */\nexport function optionValueName<NameT>(\n  option: OptionT<NameT> | string,\n): [string, NameT | string] {\n  return typeof option === 'string'\n    ? [option, option]\n    : [option.value, option.name ?? option.value];\n}\n"],"mappings":";;;;;;;;;AAEA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAFA;;AAMO,MAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,CAC5B,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAU,EACV,cAAc,EACd,OAAO,EACP,QAAQ,EACR,QAAQ;AAER;AACA;AACA,QAAQ,CACA;AAqBH,MAAME,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAGC,kBAAE,CAACC,SAAS,CAAC,CAC1CD,kBAAE,CAACE,KAAK,CAAC;EACPC,IAAI,EAAEH,kBAAE,CAACI,MAAM;EACfC,KAAK,EAAEL,kBAAE,CAACI,MAAM,CAACE;AACnB,CAAC,CAAC,CAACA,UAAU,EACbN,kBAAE,CAACI,MAAM,CAACE,UAAU,CACrB,CAAC;AAEK,MAAMC,gBAAgB,GAAAT,OAAA,CAAAS,gBAAA,GAAGP,kBAAE,CAACQ,OAAO,CAACT,eAAe,CAACO,UAAU,CAAC;;AAEtE;AACO,SAASG,eAAeA,CAC7BC,MAA+B,EACL;EAC1B,OAAO,OAAOA,MAAM,KAAK,QAAQ,GAC7B,CAACA,MAAM,EAAEA,MAAM,CAAC,GAChB,CAACA,MAAM,CAACL,KAAK,EAAEK,MAAM,CAACP,IAAI,IAAIO,MAAM,CAACL,KAAK,CAAC;AACjD","ignoreList":[]}
+{"version":3,"file":"common.js","names":["_propTypes","_interopRequireDefault","require","validThemeKeys","exports","optionValidator","PT","oneOfType","shape","name","node","value","string","isRequired","optionsValidator","arrayOf","stringOptionValidator","stringOptionsValidator","optionValueName","option"],"sources":["../../../../../src/shared/components/selectors/common.ts"],"sourcesContent":["// The stuff common between different dropdown implementations.\n\nimport PT from 'prop-types';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\nexport const validThemeKeys = [\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] as const;\n\nexport type OptionT<NameT> = {\n  name?: NameT | null;\n  value: string;\n};\n\nexport type OptionsT<NameT> = Array<OptionT<NameT> | string>;\n\nexport type PropsT<\n  NameT,\n  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,\n> = {\n  filter?: (item: OptionT<NameT> | string) => boolean;\n  label?: React.ReactNode;\n  onChange?: OnChangeT;\n  options?: OptionsT<NameT>;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\nexport const optionValidator:\nPT.Requireable<OptionT<React.ReactNode> | string> = PT.oneOfType([\n  PT.shape({\n    name: PT.node,\n    value: PT.string.isRequired,\n  }).isRequired,\n  PT.string.isRequired,\n]);\n\nexport const optionsValidator = PT.arrayOf(optionValidator.isRequired);\n\nexport const stringOptionValidator:\nPT.Requireable<OptionT<string> | string> = PT.oneOfType([\n  PT.shape({\n    name: PT.string,\n    value: PT.string.isRequired,\n  }).isRequired,\n  PT.string.isRequired,\n]);\n\nexport const stringOptionsValidator = PT.arrayOf(stringOptionValidator.isRequired);\n\n/** Returns option value and name as a tuple. */\nexport function optionValueName<NameT>(\n  option: OptionT<NameT> | string,\n): [string, NameT | string] {\n  return typeof option === 'string'\n    ? [option, option]\n    : [option.value, option.name ?? option.value];\n}\n"],"mappings":";;;;;;;;;AAEA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAFA;;AAMO,MAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,CAC5B,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAU,EACV,cAAc,EACd,OAAO,EACP,QAAQ,EACR,QAAQ;AAER;AACA;AACA,QAAQ,CACA;AAqBH,MAAME,eACoC,GAAAD,OAAA,CAAAC,eAAA,GAAGC,kBAAE,CAACC,SAAS,CAAC,CAC/DD,kBAAE,CAACE,KAAK,CAAC;EACPC,IAAI,EAAEH,kBAAE,CAACI,IAAI;EACbC,KAAK,EAAEL,kBAAE,CAACM,MAAM,CAACC;AACnB,CAAC,CAAC,CAACA,UAAU,EACbP,kBAAE,CAACM,MAAM,CAACC,UAAU,CACrB,CAAC;AAEK,MAAMC,gBAAgB,GAAAV,OAAA,CAAAU,gBAAA,GAAGR,kBAAE,CAACS,OAAO,CAACV,eAAe,CAACQ,UAAU,CAAC;AAE/D,MAAMG,qBAC2B,GAAAZ,OAAA,CAAAY,qBAAA,GAAGV,kBAAE,CAACC,SAAS,CAAC,CACtDD,kBAAE,CAACE,KAAK,CAAC;EACPC,IAAI,EAAEH,kBAAE,CAACM,MAAM;EACfD,KAAK,EAAEL,kBAAE,CAACM,MAAM,CAACC;AACnB,CAAC,CAAC,CAACA,UAAU,EACbP,kBAAE,CAACM,MAAM,CAACC,UAAU,CACrB,CAAC;AAEK,MAAMI,sBAAsB,GAAAb,OAAA,CAAAa,sBAAA,GAAGX,kBAAE,CAACS,OAAO,CAACC,qBAAqB,CAACH,UAAU,CAAC;;AAElF;AACO,SAASK,eAAeA,CAC7BC,MAA+B,EACL;EAC1B,OAAO,OAAOA,MAAM,KAAK,QAAQ,GAC7B,CAACA,MAAM,EAAEA,MAAM,CAAC,GAChB,CAACA,MAAM,CAACR,KAAK,EAAEQ,MAAM,CAACV,IAAI,IAAIU,MAAM,CAACR,KAAK,CAAC;AACjD","ignoreList":[]}

package/build/development/web.bundle.js

@@ -116,7 +116,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var prop
   \***********************************************/
 /***/ (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 lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ \"lodash\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ \"prop-types\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _base_theme_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./base-theme.scss */ \"./src/shared/components/Modal/base-theme.scss\");\n/* harmony import */ var _styles_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./styles.scss */ \"./src/shared/components/Modal/styles.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* global document */\n\n\n\n\n\n\n\n\n\nconst validThemeKeys = ['container', 'overlay'];\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_1__.useRef)(null);\n  const overlayRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const [portal, setPortal] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)();\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.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_1__.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_1__.useEffect)(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\n  const focusLast = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.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        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_2___default().createPortal( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {\n    children: [focusLast, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n      \"aria-label\": \"Cancel\",\n      className: theme.overlay,\n      onClick: () => onCancel && onCancel(),\n      onKeyDown: e => {\n        if (e.key === 'Escape' && onCancel) onCancel();\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_7__.jsx)(\"div\", {\n      \"aria-modal\": \"true\",\n      className: theme.container,\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_7__.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};\nconst ThemedModal = _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_4___default()(BaseModal, 'Modal', validThemeKeys, _base_theme_scss__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\nBaseModal.propTypes = {\n  cancelOnScrolling: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),\n  children: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().node),\n  containerStyle: prop_types__WEBPACK_IMPORTED_MODULE_3___default().shape({}),\n  dontDisableScrolling: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),\n  onCancel: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),\n  theme: ThemedModal.themeType.isRequired\n};\nBaseModal.defaultProps = {\n  cancelOnScrolling: false,\n  children: null,\n  containerStyle: undefined,\n  dontDisableScrolling: false,\n  onCancel: lodash__WEBPACK_IMPORTED_MODULE_0__.noop\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (ThemedModal);\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 lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ \"lodash\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ \"prop-types\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _base_theme_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./base-theme.scss */ \"./src/shared/components/Modal/base-theme.scss\");\n/* harmony import */ var _styles_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./styles.scss */ \"./src/shared/components/Modal/styles.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* global document */\n\n\n\n\n\n\n\n\n\nconst validThemeKeys = ['container', 'overlay'];\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_1__.useRef)(null);\n  const overlayRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const [portal, setPortal] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)();\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.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_1__.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_1__.useEffect)(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\n  const focusLast = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.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        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_2___default().createPortal( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {\n    children: [focusLast, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.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_7__.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_7__.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};\nconst ThemedModal = _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_4___default()(BaseModal, 'Modal', validThemeKeys, _base_theme_scss__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\nBaseModal.propTypes = {\n  cancelOnScrolling: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),\n  children: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().node),\n  containerStyle: prop_types__WEBPACK_IMPORTED_MODULE_3___default().shape({}),\n  dontDisableScrolling: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),\n  onCancel: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),\n  theme: ThemedModal.themeType.isRequired\n};\nBaseModal.defaultProps = {\n  cancelOnScrolling: false,\n  children: null,\n  containerStyle: undefined,\n  dontDisableScrolling: false,\n  onCancel: lodash__WEBPACK_IMPORTED_MODULE_0__.noop\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (ThemedModal);\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 prop
   \******************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ \"prop-types\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _theme_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./theme.scss */ \"./src/shared/components/selectors/NativeDropdown/theme.scss\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common */ \"./src/shared/components/selectors/common.ts\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __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/**\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 (!filter || filter(option)) {\n      const [iValue, iName] = (0,_common__WEBPACK_IMPORTED_MODULE_3__.optionValueName)(option);\n      isValidValue || (isValidValue = iValue === value);\n      optionElements.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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_4__.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_4__.jsxs)(\"div\", {\n    className: theme.container,\n    children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: theme.label,\n      children: label\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n      className: theme.dropdown,\n      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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_4__.jsx)(\"div\", {\n        className: theme.arrow\n      })]\n    })]\n  });\n};\nconst ThemedDropdown = _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default()(Dropdown, 'Dropdown', _common__WEBPACK_IMPORTED_MODULE_3__.validThemeKeys, _theme_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\nDropdown.propTypes = {\n  filter: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),\n  label: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),\n  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),\n  options: _common__WEBPACK_IMPORTED_MODULE_3__.optionsValidator,\n  theme: ThemedDropdown.themeType.isRequired,\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)\n};\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: ''\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (ThemedDropdown);\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 prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ \"prop-types\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _theme_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./theme.scss */ \"./src/shared/components/selectors/NativeDropdown/theme.scss\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common */ \"./src/shared/components/selectors/common.ts\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __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/**\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 (!filter || filter(option)) {\n      const [iValue, iName] = (0,_common__WEBPACK_IMPORTED_MODULE_3__.optionValueName)(option);\n      isValidValue || (isValidValue = iValue === value);\n      optionElements.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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_4__.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_4__.jsxs)(\"div\", {\n    className: theme.container,\n    children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n      className: theme.label,\n      children: label\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n      className: theme.dropdown,\n      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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_4__.jsx)(\"div\", {\n        className: theme.arrow\n      })]\n    })]\n  });\n};\nconst ThemedDropdown = _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default()(Dropdown, 'Dropdown', _common__WEBPACK_IMPORTED_MODULE_3__.validThemeKeys, _theme_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\nDropdown.propTypes = {\n  filter: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),\n  label: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),\n  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),\n  options: _common__WEBPACK_IMPORTED_MODULE_3__.stringOptionsValidator,\n  theme: ThemedDropdown.themeType.isRequired,\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)\n};\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: ''\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (ThemedDropdown);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/NativeDropdown/index.tsx?");
 
 /***/ }),
 
@@ -246,7 +246,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var prop
   \***************************************************/
 /***/ (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 */   optionValidator: function() { return /* binding */ optionValidator; },\n/* harmony export */   optionValueName: function() { return /* binding */ optionValueName; },\n/* harmony export */   optionsValidator: function() { return /* binding */ optionsValidator; },\n/* harmony export */   validThemeKeys: function() { return /* binding */ validThemeKeys; }\n/* harmony export */ });\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ \"prop-types\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);\n// The stuff common between different dropdown implementations.\n\n\nconst validThemeKeys = ['active', 'arrow', 'container', 'dropdown', 'hiddenOption', 'label', 'option', 'select',\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'];\nconst optionValidator = prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({\n  name: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired\n}).isRequired, (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired]);\nconst optionsValidator = prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(optionValidator.isRequired);\n\n/** Returns option value and name as a tuple. */\nfunction optionValueName(option) {\n  var _option$name;\n  return typeof option === 'string' ? [option, option] : [option.value, (_option$name = option.name) !== null && _option$name !== void 0 ? _option$name : option.value];\n}\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/common.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   optionValidator: function() { return /* binding */ optionValidator; },\n/* harmony export */   optionValueName: function() { return /* binding */ optionValueName; },\n/* harmony export */   optionsValidator: function() { return /* binding */ optionsValidator; },\n/* harmony export */   stringOptionValidator: function() { return /* binding */ stringOptionValidator; },\n/* harmony export */   stringOptionsValidator: function() { return /* binding */ stringOptionsValidator; },\n/* harmony export */   validThemeKeys: function() { return /* binding */ validThemeKeys; }\n/* harmony export */ });\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ \"prop-types\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);\n// The stuff common between different dropdown implementations.\n\n\nconst validThemeKeys = ['active', 'arrow', 'container', 'dropdown', 'hiddenOption', 'label', 'option', 'select',\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'];\nconst optionValidator = prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({\n  name: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired\n}).isRequired, (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired]);\nconst optionsValidator = prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(optionValidator.isRequired);\nconst stringOptionValidator = prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({\n  name: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired\n}).isRequired, (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired]);\nconst stringOptionsValidator = prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(stringOptionValidator.isRequired);\n\n/** Returns option value and name as a tuple. */\nfunction optionValueName(option) {\n  var _option$name;\n  return typeof option === 'string' ? [option, option] : [option.value, (_option$name = option.name) !== null && _option$name !== void 0 ? _option$name : option.value];\n}\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/common.ts?");
 
 /***/ }),
 

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

@@ -10,5 +10,5 @@
  * @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.
 (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:()=>onCancel&&onCancel(),onKeyDown:e=>{if(e.key==="Escape"&&onCancel)onCancel()},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,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;const ThemedModal=(0,_reactThemes.default)(BaseModal,"Modal",validThemeKeys,baseTheme);BaseModal.propTypes={cancelOnScrolling:_propTypes.default.bool,children:_propTypes.default.node,containerStyle:_propTypes.default.shape({}),dontDisableScrolling:_propTypes.default.bool,onCancel:_propTypes.default.func,theme:ThemedModal.themeType.isRequired};BaseModal.defaultProps={cancelOnScrolling:false,children:null,containerStyle:undefined,dontDisableScrolling:false,onCancel:_lodash.noop};var _default=exports.default=ThemedModal;/* 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,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;const ThemedModal=(0,_reactThemes.default)(BaseModal,"Modal",validThemeKeys,baseTheme);BaseModal.propTypes={cancelOnScrolling:_propTypes.default.bool,children:_propTypes.default.node,containerStyle:_propTypes.default.shape({}),dontDisableScrolling:_propTypes.default.bool,onCancel:_propTypes.default.func,theme:ThemedModal.themeType.isRequired};BaseModal.defaultProps={cancelOnScrolling:false,children:null,containerStyle:undefined,dontDisableScrolling:false,onCancel:_lodash.noop};var _default=exports.default=ThemedModal;/* 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":["_lodash","require","_react","_reactDom","_interopRequireDefault","_propTypes","_reactThemes","_jsxRuntime","baseTheme","S","validThemeKeys","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","onKeyDown","e","key","ref","node","role","container","onWheel","event","stopPropagation","style","exports","ThemedModal","themed","propTypes","PT","bool","shape","func","themeType","isRequired","defaultProps","undefined","noop","_default","default"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport { noop } from 'lodash';\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\nconst validThemeKeys = ['container', 'overlay'] as const;\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  containerStyle?: React.CSSProperties;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  theme: Theme<typeof validThemeKeys>;\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={() => onCancel && onCancel()}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' && onCancel) onCancel();\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        <div\n          aria-modal=\"true\"\n          className={theme.container}\n          onWheel={(event) => event.stopPropagation()}\n          ref={containerRef}\n          role=\"dialog\"\n          style={containerStyle}\n        >\n          {children}\n        </div>\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\nconst ThemedModal = themed(\n  BaseModal,\n  'Modal',\n  validThemeKeys,\n  baseTheme,\n);\n\nBaseModal.propTypes = {\n  cancelOnScrolling: PT.bool,\n  children: PT.node,\n  containerStyle: PT.shape({}),\n  dontDisableScrolling: PT.bool,\n  onCancel: PT.func,\n  theme: ThemedModal.themeType.isRequired,\n};\n\nBaseModal.defaultProps = {\n  cancelOnScrolling: false,\n  children: null,\n  containerStyle: undefined,\n  dontDisableScrolling: false,\n  onCancel: noop,\n};\n\nexport default ThemedModal;\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_lodash","require","_react","_reactDom","_interopRequireDefault","_propTypes","_reactThemes","_jsxRuntime","baseTheme","S","validThemeKeys","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","ThemedModal","themed","propTypes","PT","bool","shape","func","themeType","isRequired","defaultProps","undefined","noop","_default","default"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport { noop } from 'lodash';\n\nimport {\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\nconst validThemeKeys = ['container', 'overlay'] as const;\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  containerStyle?: React.CSSProperties;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  theme: Theme<typeof validThemeKeys>;\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\nconst ThemedModal = themed(\n  BaseModal,\n  'Modal',\n  validThemeKeys,\n  baseTheme,\n);\n\nBaseModal.propTypes = {\n  cancelOnScrolling: PT.bool,\n  children: PT.node,\n  containerStyle: PT.shape({}),\n  dontDisableScrolling: PT.bool,\n  onCancel: PT.func,\n  theme: ThemedModal.themeType.isRequired,\n};\n\nBaseModal.defaultProps = {\n  cancelOnScrolling: false,\n  children: null,\n  containerStyle: undefined,\n  dontDisableScrolling: false,\n  onCancel: noop,\n};\n\nexport default ThemedModal;\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

@@ -21,5 +21,5 @@ const defaultTheme={"context":"xHyZo4","ad":"ADu59e","hoc":"FTP2bb","dropdown":"
 // 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})]})]})};const ThemedDropdown=(0,_reactThemes.default)(Dropdown,"Dropdown",_common.validThemeKeys,defaultTheme);Dropdown.propTypes={filter:_propTypes.default.func,label:_propTypes.default.node,onChange:_propTypes.default.func,options:_common.optionsValidator,theme:ThemedDropdown.themeType.isRequired,value:_propTypes.default.string};Dropdown.defaultProps={filter:undefined,label:undefined,onChange:undefined,options:[],value:""};var _default=exports.default=ThemedDropdown;
+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})]})]})};const ThemedDropdown=(0,_reactThemes.default)(Dropdown,"Dropdown",_common.validThemeKeys,defaultTheme);Dropdown.propTypes={filter:_propTypes.default.func,label:_propTypes.default.node,onChange:_propTypes.default.func,options:_common.stringOptionsValidator,theme:ThemedDropdown.themeType.isRequired,value:_propTypes.default.string};Dropdown.defaultProps={filter:undefined,label:undefined,onChange:undefined,options:[],value:""};var _default=exports.default=ThemedDropdown;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_common","_jsxRuntime","defaultTheme","Dropdown","filter","label","onChange","options","theme","value","Error","isValidValue","optionElements","i","length","option","iValue","iName","optionValueName","push","jsx","className","children","hiddenOption","disabled","jsxs","container","undefined","dropdown","select","arrow","ThemedDropdown","themed","validThemeKeys","propTypes","PT","func","node","optionsValidator","themeType","isRequired","string","defaultProps","_default","exports","default"],"sources":["../../../../../../src/shared/components/selectors/NativeDropdown/index.tsx"],"sourcesContent":["// Implements dropdown based on the native HTML <select> element.\n\nimport PT from 'prop-types';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nimport {\n  type PropsT,\n  optionsValidator,\n  optionValueName,\n  validThemeKeys,\n} 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 (!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\nconst ThemedDropdown = themed(\n  Dropdown,\n  'Dropdown',\n  validThemeKeys,\n  defaultTheme,\n);\n\nDropdown.propTypes = {\n  filter: PT.func,\n  label: PT.node,\n  onChange: PT.func,\n  options: optionsValidator,\n  theme: ThemedDropdown.themeType.isRequired,\n  value: PT.string,\n};\n\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: '',\n};\n\nexport default ThemedDropdown;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_reactThemes","_common","_jsxRuntime","defaultTheme","Dropdown","filter","label","onChange","options","theme","value","Error","isValidValue","optionElements","i","length","option","iValue","iName","optionValueName","push","jsx","className","children","hiddenOption","disabled","jsxs","container","undefined","dropdown","select","arrow","ThemedDropdown","themed","validThemeKeys","propTypes","PT","func","node","stringOptionsValidator","themeType","isRequired","string","defaultProps","_default","exports","default"],"sources":["../../../../../../src/shared/components/selectors/NativeDropdown/index.tsx"],"sourcesContent":["// Implements dropdown based on the native HTML <select> element.\n\nimport PT from 'prop-types';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\nimport {\n  type PropsT,\n  optionValueName,\n  stringOptionsValidator,\n  validThemeKeys,\n} 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 (!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\nconst ThemedDropdown = themed(\n  Dropdown,\n  'Dropdown',\n  validThemeKeys,\n  defaultTheme,\n);\n\nDropdown.propTypes = {\n  filter: PT.func,\n  label: PT.node,\n  onChange: PT.func,\n  options: stringOptionsValidator,\n  theme: ThemedDropdown.themeType.isRequired,\n  value: PT.string,\n};\n\nDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: '',\n};\n\nexport default ThemedDropdown;\n"],"mappings":"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","ignoreList":[]}

package/build/production/shared/components/selectors/common.js

@@ -1,5 +1,5 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.optionValidator=void 0;exports.optionValueName=optionValueName;exports.validThemeKeys=exports.optionsValidator=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));// The stuff common between different dropdown implementations.
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.optionValidator=void 0;exports.optionValueName=optionValueName;exports.validThemeKeys=exports.stringOptionsValidator=exports.stringOptionValidator=exports.optionsValidator=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));// The stuff common between different dropdown implementations.
 const validThemeKeys=exports.validThemeKeys=["active","arrow","container","dropdown","hiddenOption","label","option","select",// TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it
 // into a separate theme spec for that component.
-"upward"];const optionValidator=exports.optionValidator=_propTypes.default.oneOfType([_propTypes.default.shape({name:_propTypes.default.string,value:_propTypes.default.string.isRequired}).isRequired,_propTypes.default.string.isRequired]);const optionsValidator=exports.optionsValidator=_propTypes.default.arrayOf(optionValidator.isRequired);/** Returns option value and name as a tuple. */function optionValueName(option){return typeof option==="string"?[option,option]:[option.value,option.name??option.value]}
+"upward"];const optionValidator=exports.optionValidator=_propTypes.default.oneOfType([_propTypes.default.shape({name:_propTypes.default.node,value:_propTypes.default.string.isRequired}).isRequired,_propTypes.default.string.isRequired]);const optionsValidator=exports.optionsValidator=_propTypes.default.arrayOf(optionValidator.isRequired);const stringOptionValidator=exports.stringOptionValidator=_propTypes.default.oneOfType([_propTypes.default.shape({name:_propTypes.default.string,value:_propTypes.default.string.isRequired}).isRequired,_propTypes.default.string.isRequired]);const stringOptionsValidator=exports.stringOptionsValidator=_propTypes.default.arrayOf(stringOptionValidator.isRequired);/** Returns option value and name as a tuple. */function optionValueName(option){return typeof option==="string"?[option,option]:[option.value,option.name??option.value]}
 //# sourceMappingURL=common.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.js","names":["_propTypes","_interopRequireDefault","require","validThemeKeys","exports","optionValidator","PT","oneOfType","shape","name","string","value","isRequired","optionsValidator","arrayOf","optionValueName","option"],"sources":["../../../../../src/shared/components/selectors/common.ts"],"sourcesContent":["// The stuff common between different dropdown implementations.\n\nimport PT from 'prop-types';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\nexport const validThemeKeys = [\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] as const;\n\nexport type OptionT<NameT> = {\n  name?: NameT | null;\n  value: string;\n};\n\nexport type OptionsT<NameT> = Array<OptionT<NameT> | string>;\n\nexport type PropsT<\n  NameT,\n  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,\n> = {\n  filter?: (item: OptionT<NameT> | string) => boolean;\n  label?: React.ReactNode;\n  onChange?: OnChangeT;\n  options?: OptionsT<NameT>;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\nexport const optionValidator = PT.oneOfType([\n  PT.shape({\n    name: PT.string,\n    value: PT.string.isRequired,\n  }).isRequired,\n  PT.string.isRequired,\n]);\n\nexport const optionsValidator = PT.arrayOf(optionValidator.isRequired);\n\n/** Returns option value and name as a tuple. */\nexport function optionValueName<NameT>(\n  option: OptionT<NameT> | string,\n): [string, NameT | string] {\n  return typeof option === 'string'\n    ? [option, option]\n    : [option.value, option.name ?? option.value];\n}\n"],"mappings":"uRAEA,IAAAA,UAAA,CAAAC,sBAAA,CAAAC,OAAA,gBAFA;AAMO,KAAM,CAAAC,cAAc,CAAAC,OAAA,CAAAD,cAAA,CAAG,CAC5B,QAAQ,CACR,OAAO,CACP,WAAW,CACX,UAAU,CACV,cAAc,CACd,OAAO,CACP,QAAQ,CACR,QAAQ,CAER;AACA;AACA,QAAQ,CACA,CAqBH,KAAM,CAAAE,eAAe,CAAAD,OAAA,CAAAC,eAAA,CAAGC,kBAAE,CAACC,SAAS,CAAC,CAC1CD,kBAAE,CAACE,KAAK,CAAC,CACPC,IAAI,CAAEH,kBAAE,CAACI,MAAM,CACfC,KAAK,CAAEL,kBAAE,CAACI,MAAM,CAACE,UACnB,CAAC,CAAC,CAACA,UAAU,CACbN,kBAAE,CAACI,MAAM,CAACE,UAAU,CACrB,CAAC,CAEK,KAAM,CAAAC,gBAAgB,CAAAT,OAAA,CAAAS,gBAAA,CAAGP,kBAAE,CAACQ,OAAO,CAACT,eAAe,CAACO,UAAU,CAAC,CAEtE,gDACO,QAAS,CAAAG,eAAeA,CAC7BC,MAA+B,CACL,CAC1B,MAAO,OAAO,CAAAA,MAAM,GAAK,QAAQ,CAC7B,CAACA,MAAM,CAAEA,MAAM,CAAC,CAChB,CAACA,MAAM,CAACL,KAAK,CAAEK,MAAM,CAACP,IAAI,EAAIO,MAAM,CAACL,KAAK,CAChD","ignoreList":[]}
+{"version":3,"file":"common.js","names":["_propTypes","_interopRequireDefault","require","validThemeKeys","exports","optionValidator","PT","oneOfType","shape","name","node","value","string","isRequired","optionsValidator","arrayOf","stringOptionValidator","stringOptionsValidator","optionValueName","option"],"sources":["../../../../../src/shared/components/selectors/common.ts"],"sourcesContent":["// The stuff common between different dropdown implementations.\n\nimport PT from 'prop-types';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\nexport const validThemeKeys = [\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] as const;\n\nexport type OptionT<NameT> = {\n  name?: NameT | null;\n  value: string;\n};\n\nexport type OptionsT<NameT> = Array<OptionT<NameT> | string>;\n\nexport type PropsT<\n  NameT,\n  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,\n> = {\n  filter?: (item: OptionT<NameT> | string) => boolean;\n  label?: React.ReactNode;\n  onChange?: OnChangeT;\n  options?: OptionsT<NameT>;\n  theme: Theme<typeof validThemeKeys>;\n  value?: string;\n};\n\nexport const optionValidator:\nPT.Requireable<OptionT<React.ReactNode> | string> = PT.oneOfType([\n  PT.shape({\n    name: PT.node,\n    value: PT.string.isRequired,\n  }).isRequired,\n  PT.string.isRequired,\n]);\n\nexport const optionsValidator = PT.arrayOf(optionValidator.isRequired);\n\nexport const stringOptionValidator:\nPT.Requireable<OptionT<string> | string> = PT.oneOfType([\n  PT.shape({\n    name: PT.string,\n    value: PT.string.isRequired,\n  }).isRequired,\n  PT.string.isRequired,\n]);\n\nexport const stringOptionsValidator = PT.arrayOf(stringOptionValidator.isRequired);\n\n/** Returns option value and name as a tuple. */\nexport function optionValueName<NameT>(\n  option: OptionT<NameT> | string,\n): [string, NameT | string] {\n  return typeof option === 'string'\n    ? [option, option]\n    : [option.value, option.name ?? option.value];\n}\n"],"mappings":"oVAEA,IAAAA,UAAA,CAAAC,sBAAA,CAAAC,OAAA,gBAFA;AAMO,KAAM,CAAAC,cAAc,CAAAC,OAAA,CAAAD,cAAA,CAAG,CAC5B,QAAQ,CACR,OAAO,CACP,WAAW,CACX,UAAU,CACV,cAAc,CACd,OAAO,CACP,QAAQ,CACR,QAAQ,CAER;AACA;AACA,QAAQ,CACA,CAqBH,KAAM,CAAAE,eACoC,CAAAD,OAAA,CAAAC,eAAA,CAAGC,kBAAE,CAACC,SAAS,CAAC,CAC/DD,kBAAE,CAACE,KAAK,CAAC,CACPC,IAAI,CAAEH,kBAAE,CAACI,IAAI,CACbC,KAAK,CAAEL,kBAAE,CAACM,MAAM,CAACC,UACnB,CAAC,CAAC,CAACA,UAAU,CACbP,kBAAE,CAACM,MAAM,CAACC,UAAU,CACrB,CAAC,CAEK,KAAM,CAAAC,gBAAgB,CAAAV,OAAA,CAAAU,gBAAA,CAAGR,kBAAE,CAACS,OAAO,CAACV,eAAe,CAACQ,UAAU,CAAC,CAE/D,KAAM,CAAAG,qBAC2B,CAAAZ,OAAA,CAAAY,qBAAA,CAAGV,kBAAE,CAACC,SAAS,CAAC,CACtDD,kBAAE,CAACE,KAAK,CAAC,CACPC,IAAI,CAAEH,kBAAE,CAACM,MAAM,CACfD,KAAK,CAAEL,kBAAE,CAACM,MAAM,CAACC,UACnB,CAAC,CAAC,CAACA,UAAU,CACbP,kBAAE,CAACM,MAAM,CAACC,UAAU,CACrB,CAAC,CAEK,KAAM,CAAAI,sBAAsB,CAAAb,OAAA,CAAAa,sBAAA,CAAGX,kBAAE,CAACS,OAAO,CAACC,qBAAqB,CAACH,UAAU,CAAC,CAElF,gDACO,QAAS,CAAAK,eAAeA,CAC7BC,MAA+B,CACL,CAC1B,MAAO,OAAO,CAAAA,MAAM,GAAK,QAAQ,CAC7B,CAACA,MAAM,CAAEA,MAAM,CAAC,CAChB,CAACA,MAAM,CAACR,KAAK,CAAEQ,MAAM,CAACV,IAAI,EAAIU,MAAM,CAACR,KAAK,CAChD","ignoreList":[]}