npm - @dr.pogodin/react-utils - Versions diffs - 1.31.1 → 1.31.2 - Mend

@dr.pogodin/react-utils 1.31.1 → 1.31.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

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

@@ -58,10 +58,12 @@ const BaseModal = ({
   (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]);

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

	@@ -1 +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 }\n return () => {\n if (cancelOnScrolling && onCancel) {\n window.removeEventListener('scroll', 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;~~IAC7C~~;IACA,OAAO,MAAM;MACX,IAAIJ,iBAAiB,IAAII,QAAQ,EAAE;QACjCe,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEjB,QAAQ,CAAC;~~MAChD~~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","ignoreList":[]}
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":[]}

package/build/development/shared/components/selectors/CustomDropdown/Options/index.js CHANGED Viewed

@@ -4,23 +4,32 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.areEqual = areEqual;
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _Modal = require("../../../Modal");
 var _common = require("../../common");
 var _jsxRuntime = require("react/jsx-runtime");
 const S = {
   "overlay": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-Options-style___overlay___jKsMKG"
 };
-const Options = ({
-  anchorRect,
+function areEqual(a, b) {
+  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;
+}
+const Options = /*#__PURE__*/(0, _react.forwardRef)(({
   containerClass,
+  containerStyle,
   filter,
   onCancel,
   onChange,
   optionClass,
   options
-}) => {
+}, ref) => {
+  const opsRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    measure: () => opsRef.current?.getBoundingClientRect()
+  }), []);
   const optionNodes = [];
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
@@ -48,11 +57,7 @@ const Options = ({
   // response to the position changes of the root dropdown element).
   , {
     cancelOnScrolling: true,
-    containerStyle: {
-      left: anchorRect.left,
-      top: anchorRect.bottom,
-      width: anchorRect.width
-    },
+    containerStyle: containerStyle,
     dontDisableScrolling: true,
     onCancel: onCancel,
     theme: {
@@ -62,16 +67,19 @@ const Options = ({
       context: '',
       overlay: S.overlay
     },
-    children: optionNodes
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: opsRef,
+      children: optionNodes
+    })
   });
-};
+});
 Options.propTypes = {
-  anchorRect: _propTypes.default.shape({
-    bottom: _propTypes.default.number.isRequired,
+  containerClass: _propTypes.default.string.isRequired,
+  containerStyle: _propTypes.default.shape({
     left: _propTypes.default.number.isRequired,
+    top: _propTypes.default.number.isRequired,
     width: _propTypes.default.number.isRequired
-  }).isRequired,
-  containerClass: _propTypes.default.string.isRequired,
+  }),
   filter: _propTypes.default.func,
   onCancel: _propTypes.default.func.isRequired,
   onChange: _propTypes.default.func.isRequired,
@@ -79,6 +87,7 @@ Options.propTypes = {
   options: _common.optionsValidator.isRequired
 };
 Options.defaultProps = {
+  containerStyle: undefined,
   filter: undefined
 };
 var _default = exports.default = Options;

package/build/development/shared/components/selectors/CustomDropdown/Options/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_Modal","_common","_jsxRuntime","S","Options","~~anchorRect~~","containerClass","filter","onCancel","onChange","optionClass","options","optionNodes","i","length","option","iValue","iName","optionValueName","push","jsx","className","onClick","onKeyDown","e","key","role","tabIndex","children","BaseModal","cancelOnScrolling","~~containerStyle","left","top","bottom","width","~~dontDisableScrolling","theme","ad","hoc","container","context","overlay","propTypes","PT","~~shape~~","~~number~~","~~isRequired~~","~~string~~","func","optionsValidator","defaultProps","undefined","_default","exports","default"],"sources":["../../../../../../../src/shared/components/selectors/CustomDropdown/Options/index.tsx"],"sourcesContent":["import PT from 'prop-types';\n\nimport { BaseModal } from 'components/Modal';\n\nimport S from './style.scss';\n\nimport {\n type OptionT,\n type OptionsT,\n optionsValidator,\n optionValueName,\n} from '../../common';\n\~~ntype~~ ~~PropsT~~ = {\n ~~anchorRect~~: {\n ~~bottom~~: number;\n ~~left~~: number;\n width: ~~number~~;\n };\n containerClass: string;\n filter?: (item: OptionT<React.ReactNode> \| string) => boolean;\n optionClass: string;\n options: OptionsT<React.ReactNode>;\n onCancel: () => void;\n onChange: (value: string) => void;\n};\n\nconst Options: ~~React.FunctionComponent~~<PropsT> = ({\n ~~anchorRect~~,\n ~~containerClass~~,\n filter,\n onCancel,\n onChange,\n optionClass,\n options,\n}) => {\n const optionNodes: React.ReactNode[] = [];\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 optionNodes.push(\n <div\n className={optionClass}\n onClick={() => onChange(iValue)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n onChange(iValue);\n }\n }}\n key={iValue}\n role=\"button\"\n tabIndex={0}\n >\n {iName}\n </div>,\n );\n }\n }\n\n return (\n <BaseModal\n // Closes the dropdown (cancels the selection) on any page scrolling attempt.\n // This is the same native <select> elements do on scrolling, and at least for\n // now we have no reason to deal with complications needed to support open\n // dropdowns during the scrolling (that would need to re-position it in\n // response to the position changes of the root dropdown element).\n cancelOnScrolling\n containerStyle={~~{\n left: anchorRect.left,\n top: anchorRect.bottom,\n width: anchorRect.width,\n~~ }}\n dontDisableScrolling\n onCancel={onCancel}\n theme={{\n ad: '',\n hoc: '',\n container: containerClass,\n context: '',\n overlay: S.overlay,\n }}\n >\n {optionNodes}\n </BaseModal>\n );\n};\n\nOptions.propTypes = {\n ~~anchorRect~~: PT.shape({\n ~~bottom~~: PT.number.isRequired,\n ~~left~~: PT.number.isRequired,\n width: PT.number.isRequired,\n })~~.isRequired~~,\n ~~containerClass: PT.string.isRequired,\~~n filter: PT.func,\n onCancel: PT.func.isRequired,\n onChange: PT.func.isRequired,\n optionClass: PT.string.isRequired,\n options: optionsValidator.isRequired,\n};\n\nOptions.defaultProps = {\n filter: undefined,\n};\n\nexport default Options;\n"],"mappings":"~~;;;;;;;~~AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;~~AAEA~~,IAAAC,MAAA,GAAAD,OAAA;~~AAIA~~,IAAAE,~~OAAA~~,GAAAF,OAAA;~~AAKsB~~,IAAAG,~~WAAA~~,GAAAH,OAAA;AAAA,~~MAAAI~~,CAAA;EAAA;AAAA;~~AAgBtB~~,MAAMC,~~OAAwC~~,~~GAAGA~~,CAAC;~~EAChDC~~,~~UAAU~~;~~EACVC~~,cAAc;EACdC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC;AACF,CAAC,KAAK;~~EACJ~~,MAAMC,WAA8B,GAAG,EAAE;EACzC,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,~~GAAGF~~,OAAO,~~CAACG~~,MAAM,EAAE,EAAED,CAAC,EAAE;IACvC,MAAME,MAAM,~~GAAGJ~~,OAAO,~~CAACE~~,CAAC,CAAC;IACzB,IAAI,~~CAACN~~,MAAM,IAAIA,MAAM,~~CAACQ~~,MAAM,CAAC,EAAE;MAC7B,MAAM,CAACC,MAAM,EAAEC,KAAK,CAAC,GAAG,IAAAC,uBAAe,EAACH,MAAM,CAAC;MAC/CH,WAAW,CAACO,IAAI,eACd,~~IAAAjB~~,WAAA,~~CAAAkB~~,GAAA;QACEC,SAAS,~~EAAEX~~,WAAY;~~QACvBY~~,OAAO,EAAEA,CAAA,~~KAAMb~~,QAAQ,~~CAACO~~,MAAM,CAAE;QAChCO,SAAS,EAAGC,CAAC,IAAK;UAChB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;~~YACrBhB~~,QAAQ,~~CAACO~~,MAAM,CAAC;UAClB;QACF,CAAE;QAEFU,IAAI,EAAC,QAAQ;QACbC,QAAQ,EAAE,CAAE;QAAAC,QAAA,EAEXX;MAAK,GAJDD,MAKF,CACP,CAAC;IACH;EACF;EAEA,oBACE,~~IAAAd~~,WAAA,~~CAAAkB~~,GAAA,~~EAACpB~~,MAAA,~~CAAA6B~~;EACC;EACA;EACA;EACA;EACA;EAAA;IACAC,iBAAiB;~~IACjBC~~,cAAc,~~EAAE;MACdC~~,~~IAAI,EAAE3B,UAAU,CAAC2B,IAAI~~;~~MACrBC~~,~~GAAG,EAAE5B,UAAU,CAAC6B,MAAM;MACtBC,KAAK,EAAE9B,UAAU,CAAC8B;IACpB,CAAE;IACFC,~~oBAAoB;~~IACpB5B~~,QAAQ,EAAEA,QAAS;~~IACnB6B~~,KAAK,EAAE;MACLC,EAAE,EAAE,EAAE;MACNC,GAAG,EAAE,EAAE;MACPC,SAAS,~~EAAElC~~,cAAc;~~MACzBmC~~,OAAO,EAAE,EAAE;MACXC,OAAO,~~EAAEvC~~,CAAC,~~CAACuC~~;IACb,CAAE;~~IAAAd~~,QAAA,~~EAEDhB~~;~~EAAW~~,~~CACH~~,CAAC;AAEhB,CAAC;~~AAEDR~~,OAAO,~~CAACuC~~,SAAS,GAAG;~~EAClBtC~~,~~UAAU~~,~~EAAEuC~~,kBAAE,CAACC,~~KAAK~~,~~CAAC~~;~~IACnBX~~,~~MAAM~~,~~EAAEU~~,kBAAE,~~CAACE~~,~~MAAM~~,~~CAACC,UAAU~~;~~IAC5Bf~~,IAAI,~~EAAEY~~,kBAAE,~~CAACE~~,MAAM,~~CAACC~~,UAAU;~~IAC1BZ~~,~~KAAK~~,~~EAAES~~,kBAAE,~~CAACE~~,MAAM,~~CAACC;EACnB~~,~~CAAC,CAAC,CAACA,~~UAAU;~~EACbzC~~,~~cAAc~~,~~EAAEsC~~,kBAAE,CAACI,MAAM,~~CAACD~~,~~UAAU~~;~~EACpCxC~~,MAAM,~~EAAEqC~~,kBAAE,CAACK,IAAI;~~EACfzC~~,QAAQ,~~EAAEoC~~,kBAAE,CAACK,IAAI,~~CAACF~~,UAAU;~~EAC5BtC~~,QAAQ,~~EAAEmC~~,kBAAE,CAACK,IAAI,~~CAACF~~,UAAU;~~EAC5BrC~~,WAAW,~~EAAEkC~~,kBAAE,~~CAACI~~,MAAM,~~CAACD~~,UAAU;~~EACjCpC~~,OAAO,~~EAAEuC~~,wBAAgB,~~CAACH~~;AAC5B,CAAC;~~AAED3C~~,OAAO,~~CAAC+C~~,YAAY,GAAG;~~EACrB5C~~,MAAM,~~EAAE6C~~;AACV,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,~~GAEanD~~,OAAO","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_Modal","_common","_jsxRuntime","S","areEqual","a","b","left","top","width","Options","forwardRef","containerClass","containerStyle","filter","onCancel","onChange","optionClass","options","ref","opsRef","useRef","useImperativeHandle","measure","current","getBoundingClientRect","optionNodes","i","length","option","iValue","iName","optionValueName","push","jsx","className","onClick","onKeyDown","e","key","role","tabIndex","children","BaseModal","cancelOnScrolling","dontDisableScrolling","theme","ad","hoc","container","context","overlay","propTypes","PT","string","isRequired","shape","number","func","optionsValidator","defaultProps","undefined","_default","exports","default"],"sources":["../../../../../../../src/shared/components/selectors/CustomDropdown/Options/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\n\nimport { BaseModal } from 'components/Modal';\n\nimport S from './style.scss';\n\nimport {\n type OptionT,\n type OptionsT,\n optionsValidator,\n optionValueName,\n} from '../../common';\n\nexport type ContainerPosT = {\n left: number;\n top: number;\n width: number;\n};\n\nexport function areEqual(a?: ContainerPosT, b?: ContainerPosT): boolean {\n return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;\n}\n\nexport type RefT = {\n measure: () => DOMRect \| undefined;\n};\n\ntype PropsT = {\n containerClass: string;\n containerStyle?: ContainerPosT;\n filter?: (item: OptionT<React.ReactNode> \| string) => boolean;\n optionClass: string;\n options: OptionsT<React.ReactNode>;\n onCancel: () => void;\n onChange: (value: string) => void;\n};\n\nconst Options = forwardRef<RefT, PropsT>(({\n containerClass,\n containerStyle,\n filter,\n onCancel,\n onChange,\n optionClass,\n options,\n}, ref) => {\n const opsRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({\n measure: () => opsRef.current?.getBoundingClientRect(),\n }), []);\n\n const optionNodes: React.ReactNode[] = [];\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 optionNodes.push(\n <div\n className={optionClass}\n onClick={() => onChange(iValue)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n onChange(iValue);\n }\n }}\n key={iValue}\n role=\"button\"\n tabIndex={0}\n >\n {iName}\n </div>,\n );\n }\n }\n\n return (\n <BaseModal\n // Closes the dropdown (cancels the selection) on any page scrolling attempt.\n // This is the same native <select> elements do on scrolling, and at least for\n // now we have no reason to deal with complications needed to support open\n // dropdowns during the scrolling (that would need to re-position it in\n // response to the position changes of the root dropdown element).\n cancelOnScrolling\n containerStyle={containerStyle}\n dontDisableScrolling\n onCancel={onCancel}\n theme={{\n ad: '',\n hoc: '',\n container: containerClass,\n context: '',\n overlay: S.overlay,\n }}\n >\n <div ref={opsRef}>{optionNodes}</div>\n </BaseModal>\n );\n});\n\nOptions.propTypes = {\n containerClass: PT.string.isRequired,\n\n containerStyle: PT.shape({\n left: PT.number.isRequired,\n top: PT.number.isRequired,\n width: PT.number.isRequired,\n }),\n\n filter: PT.func,\n onCancel: PT.func.isRequired,\n onChange: PT.func.isRequired,\n optionClass: PT.string.isRequired,\n options: optionsValidator.isRequired,\n};\n\nOptions.defaultProps = {\n containerStyle: undefined,\n filter: undefined,\n};\n\nexport default Options;\n"],"mappings":"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","ignoreList":[]}

package/build/development/shared/components/selectors/CustomDropdown/index.js CHANGED Viewed

@@ -8,9 +8,11 @@ exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
-var _Options = _interopRequireDefault(require("./Options"));
+var _Options = _interopRequireWildcard(require("./Options"));
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const defaultTheme = {
   "context": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___context___9Tod5r",
   "ad": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___ad___R58zIg",
@@ -21,7 +23,8 @@ const defaultTheme = {
   "option": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___option___LD2Kzy",
   "select": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___select___LP5azC",
   "arrow": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___arrow___-wscve",
-  "active": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV"
+  "active": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV",
+  "upward": "-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4"
 };
 const BaseCustomDropdown = ({
   filter,
@@ -32,13 +35,56 @@ const BaseCustomDropdown = ({
   value
 }) => {
   if (!options) throw Error('Internal error');
+  const [active, setActive] = (0, _react.useState)(false);
   const dropdownRef = (0, _react.useRef)(null);
-  // If "null" the dropdown is closed, otherwise it is displayed
-  // at the specified coordinates.
-  const [anchor, setAnchor] = (0, _react.useState)(null);
+  const opsRef = (0, _react.useRef)(null);
+  const [opsPos, setOpsPos] = (0, _react.useState)();
+  const [upward, setUpward] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (!active) return undefined;
+    let id;
+    const cb = () => {
+      const anchor = dropdownRef.current?.getBoundingClientRect();
+      const opsRect = opsRef.current?.measure();
+      if (anchor && opsRect) {
+        const fitsDown = anchor.bottom + opsRect.height < (window.visualViewport?.height ?? 0);
+        const fitsUp = anchor.top - opsRect.height > 0;
+        const up = !fitsDown && fitsUp;
+        setUpward(up);
+        const pos = up ? {
+          top: anchor.top - opsRect.height - 1,
+          left: anchor.left,
+          width: anchor.width
+        } : {
+          left: anchor.left,
+          top: anchor.bottom,
+          width: anchor.width
+        };
+        setOpsPos(now => (0, _Options.areEqual)(now, pos) ? now : pos);
+      }
+      id = requestAnimationFrame(cb);
+    };
+    requestAnimationFrame(cb);
+    return () => {
+      cancelAnimationFrame(id);
+    };
+  }, [active]);
   const openList = () => {
-    setAnchor(dropdownRef.current.getBoundingClientRect());
+    const view = window.visualViewport;
+    const rect = dropdownRef.current.getBoundingClientRect();
+    setActive(true);
+    // NOTE: This first opens the dropdown off-screen, where it is measured
+    // by an effect declared above, and then positioned below, or above
+    // the original dropdown element, depending where it fits best
+    // (if we first open it downward, it would flick if we immediately
+    // move it above, at least with the current position update via local
+    // react state, and not imperatively).
+    setOpsPos({
+      left: view?.width || 0,
+      top: view?.height || 0,
+      width: rect.width
+    });
   };
   let selected = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: "\u200C"
@@ -54,7 +100,12 @@ const BaseCustomDropdown = ({
     }
   }
   let containerClassName = theme.container;
-  if (anchor) containerClassName += ` ${theme.active}`;
+  if (active) containerClassName += ` ${theme.active}`;
+  let opsContainerClass = theme.select || '';
+  if (upward) {
+    containerClassName += ` ${theme.upward}`;
+    opsContainerClass += ` ${theme.upward}`;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: containerClassName,
     children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -72,16 +123,19 @@ const BaseCustomDropdown = ({
       children: [selected, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: theme.arrow
       })]
-    }), anchor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
-      anchorRect: anchor,
-      containerClass: theme.select || '',
-      onCancel: () => setAnchor(null),
+    }), active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
+      containerClass: opsContainerClass,
+      containerStyle: opsPos,
+      onCancel: () => {
+        setActive(false);
+      },
       onChange: newValue => {
-        setAnchor(null);
+        setActive(false);
         if (onChange) onChange(newValue);
       },
       optionClass: theme.option || '',
-      options: options
+      options: options,
+      ref: opsRef
     }) : null]
   });
 };

package/build/development/shared/components/selectors/CustomDropdown/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_reactThemes","_Options","_common","_jsxRuntime","defaultTheme","BaseCustomDropdown","filter","label","onChange","options","theme","value","Error","dropdownRef","useRef","anchor","setAnchor","useState","openList","current","getBoundingClientRect","selected","jsx","Fragment","children","i","length","option","iValue","iName","optionValueName","containerClassName","container","active","jsxs","className","undefined","dropdown","onClick","onKeyDown","e","key","ref","role","tabIndex","arrow","default","anchorRect","containerClass","select","onCancel","newValue","optionClass","ThemedCustomDropdown","themed","validThemeKeys","propTypes","PT","func","node","arrayOf","optionValidator","isRequired","themeType","string","defaultProps","_default","exports"],"sources":["../../../../../../src/shared/components/selectors/CustomDropdown/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport { useRef, useState } from 'react';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport Options from './Options';\n\nimport defaultTheme from './theme.scss';\n\nimport {\n type PropsT,\n optionValidator,\n optionValueName,\n validThemeKeys,\n} from '../common';\n\nconst BaseCustomDropdown: React.FunctionComponent<\nPropsT<React.ReactNode, (value: string) => void>\n> = ({\n filter,\n label,\n onChange,\n options,\n theme,\n value,\n}) => {\n if (!options) throw Error('Internal error');\n\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n // If \"null\" the dropdown is closed, otherwise it is displayed\n // at the specified coordinates.\n const [anchor, setAnchor] = useState<DOMRect \| null>(null);\n\n const openList = () => {\n setAnchor(dropdownRef.current!.getBoundingClientRect());\n };\n\n let selected: React.ReactNode = <>&zwnj;</>;\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 if (iValue === value) {\n selected = iName;\n break;\n }\n }\n }\n\n let containerClassName = theme.container;\n if (anchor) containerClassName += ` ${theme.active}`;\n\n return (\n <div className={containerClassName}>\n {label === undefined ? null : (\n <div className={theme.label}>{label}</div>\n )}\n <div\n className={theme.dropdown}\n onClick={openList}\n onKeyDown={(e) => {\n if (e.key === 'Enter') openList();\n }}\n ref={dropdownRef}\n role=\"listbox\"\n tabIndex={0}\n >\n {selected}\n <div className={theme.arrow} />\n </div>\n {\n anchor ? (\n <Options\n anchorRect={anchor}\n containerClass={theme.select \|\| ''}\n onCancel={() => setAnchor(null)}\n onChange={(newValue) => {\n setAnchor(null);\n if (onChange) onChange(newValue);\n }}\n optionClass={theme.option \|\| ''}\n options={options}\n />\n ) : null\n }\n </div>\n );\n};\n\nconst ThemedCustomDropdown = themed(\n BaseCustomDropdown,\n 'CustomDropdown',\n validThemeKeys,\n defaultTheme,\n);\n\nBaseCustomDropdown.propTypes = {\n filter: PT.func,\n label: PT.node,\n onChange: PT.func,\n options: PT.arrayOf(optionValidator.isRequired),\n theme: ThemedCustomDropdown.themeType.isRequired,\n value: PT.string,\n};\n\nBaseCustomDropdown.defaultProps = {\n filter: undefined,\n label: undefined,\n onChange: undefined,\n options: [],\n value: undefined,\n};\n\nexport default ThemedCustomDropdown;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_reactThemes","_Options","_interopRequireWildcard","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","defaultTheme","BaseCustomDropdown","filter","label","onChange","options","theme","value","Error","active","setActive","useState","dropdownRef","useRef","opsRef","opsPos","setOpsPos","upward","setUpward","useEffect","undefined","id","cb","anchor","current","getBoundingClientRect","opsRect","measure","fitsDown","bottom","height","window","visualViewport","fitsUp","top","up","pos","left","width","now","areEqual","requestAnimationFrame","cancelAnimationFrame","openList","view","rect","selected","jsx","Fragment","children","length","option","iValue","iName","optionValueName","containerClassName","container","opsContainerClass","select","jsxs","className","dropdown","onClick","onKeyDown","key","ref","role","tabIndex","arrow","containerClass","containerStyle","onCancel","newValue","optionClass","ThemedCustomDropdown","themed","validThemeKeys","propTypes","PT","func","node","arrayOf","optionValidator","isRequired","themeType","string","defaultProps","_default","exports"],"sources":["../../../../../../src/shared/components/selectors/CustomDropdown/index.tsx"],"sourcesContent":["import PT from 'prop-types';\nimport { useEffect, useRef, useState } from 'react';\n\nimport themed from '@dr.pogodin/react-themes';\n\nimport Options, { type ContainerPosT, type RefT, areEqual } from './Options';\n\nimport defaultTheme from './theme.scss';\n\nimport {\n type PropsT,\n optionValidator,\n optionValueName,\n validThemeKeys,\n} from '../common';\n\nconst BaseCustomDropdown: React.FunctionComponent<\nPropsT<React.ReactNode, (value: string) => void>\n> = ({\n filter,\n label,\n onChange,\n options,\n theme,\n value,\n}) => {\n if (!options) throw Error('Internal error');\n\n const [active, setActive] = useState(false);\n\n const dropdownRef = useRef<HTMLDivElement>(null);\n const opsRef = useRef<RefT>(null);\n\n const [opsPos, setOpsPos] = useState<ContainerPosT>();\n const [upward, setUpward] = useState(false);\n\n useEffect(() => {\n if (!active) return undefined;\n\n let id: number;\n const cb = () => {\n const anchor = dropdownRef.current?.getBoundingClientRect();\n const opsRect = opsRef.current?.measure();\n if (anchor && opsRect) {\n const fitsDown = anchor.bottom + opsRect.height\n < (window.visualViewport?.height ?? 0);\n const fitsUp = anchor.top - opsRect.height > 0;\n\n const up = !fitsDown && fitsUp;\n setUpward(up);\n\n const pos = up ? {\n top: anchor.top - opsRect.height - 1,\n left: anchor.left,\n width: anchor.width,\n } : {\n left: anchor.left,\n top: anchor.bottom,\n width: anchor.width,\n };\n\n setOpsPos((now) => (areEqual(now, pos) ? now : pos));\n }\n id = requestAnimationFrame(cb);\n };\n requestAnimationFrame(cb);\n\n return () => {\n cancelAnimationFrame(id);\n };\n }, [active]);\n\n const openList = () => {\n const view = window.visualViewport;\n const rect = dropdownRef.current!.getBoundingClientRect();\n setActive(true);\n\n // NOTE: This first opens the dropdown off-screen, where it is measured\n // by an effect declared above, and then positioned below, or above\n // the original dropdown element, depending where it fits best\n // (if we first open it downward, it would flick if we immediately\n // move it above, at least with the current position update via local\n // react state, and not imperatively).\n setOpsPos({\n left: view?.width \|\| 0,\n top: view?.height \|\| 0,\n width: rect.width,\n });\n };\n\n let selected: React.ReactNode = <>&zwnj;</>;\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 if (iValue === value) {\n selected = iName;\n break;\n }\n }\n }\n\n let containerClassName = theme.container;\n if (active) containerClassName += ` ${theme.active}`;\n\n let opsContainerClass = theme.select \|\| '';\n if (upward) {\n containerClassName += ` ${theme.upward}`;\n opsContainerClass += ` ${theme.upward}`;\n }\n\n return (\n <div className={containerClassName}>\n {label === undefined ? null : (\n <div className={theme.label}>{label}</div>\n )}\n <div\n className={theme.dropdown}\n onClick={openList}\n onKeyDown={(e) => {\n if (e.key === 'Enter') openList();\n }}\n ref={dropdownRef}\n role=\"listbox\"\n tabIndex={0}\n >\n {selected}\n <div className={theme.arrow} />\n </div>\n {\n active ? (\n <Options\n containerClass={opsContainerClass}\n containerStyle={opsPos}\n onCancel={() => {\n setActive(false);\n }}\n onChange={(newValue) => {\n setActive(false);\n if (onChange) onChange(newValue);\n }}\n optionClass={theme.option \|\| ''}\n options={options}\n ref={opsRef}\n />\n ) : null\n }\n </div>\n );\n};\n\nconst ThemedCustomDropdown = themed(\n BaseCustomDropdown,\n 'CustomDropdown',\n validThemeKeys,\n defaultTheme,\n);\n\nBaseCustomDropdown.propTypes = {\n filter: PT.func,\n label: PT.node,\n onChange: PT.func,\n options: PT.arrayOf(optionValidator.isRequired),\n theme: ThemedCustomDropdown.themeType.isRequired,\n value: PT.string,\n};\n\nBaseCustomDropdown.defaultProps = {\n filter: undefined,\n label: undefined,\n onChange: undefined,\n options: [],\n value: undefined,\n};\n\nexport default ThemedCustomDropdown;\n"],"mappings":"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","ignoreList":[]}

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

@@ -10,7 +10,10 @@ exports.validThemeKeys = 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'];
+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

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

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

package/build/development/style.css CHANGED Viewed

@@ -223,8 +223,6 @@ body {
   border-top: none;
   box-shadow: 0 6px 12px 3px lightgray;
   position: fixed;
-  top: 20px;
-  left: 10px;
   z-index: 1001;
 }
 *.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___arrow___-wscve,
@@ -255,6 +253,24 @@ body {
   border-color: blue;
   border-radius: 0.3em 0.3em 0 0;
 }
+*.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV .-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___arrow___-wscve,
+.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___context___9Tod5r.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV .-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___arrow___-wscve,
+.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___ad___R58zIg.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___hoc___O-Tp1i.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV .-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___arrow___-wscve {
+  border-radius: 0 0 0.3em;
+}
+*.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV .-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___dropdown___pNEyAA,
+.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___context___9Tod5r.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV .-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___dropdown___pNEyAA,
+.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___ad___R58zIg.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___hoc___O-Tp1i.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV .-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___dropdown___pNEyAA {
+  border-radius: 0 0 0.3em 0.3em;
+}
+*.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___select___LP5azC,
+.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___context___9Tod5r.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___select___LP5azC,
+.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___ad___R58zIg.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___hoc___O-Tp1i.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4.-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___select___LP5azC {
+  border-bottom: none;
+  border-top: 1px solid gray;
+  border-radius: 0.3em 0.3em 0 0;
+  box-shadow: none;
+}
 /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./src/shared/components/selectors/NativeDropdown/theme.scss ***!
   \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/

package/build/development/web.bundle.js CHANGED Viewed

@@ -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    }\n    return () => {\n      if (cancelOnScrolling && onCancel) {\n        window.removeEventListener('scroll', 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: () => 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?");
 /***/ }),
@@ -206,7 +206,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**************************************************************************/
 /***/ (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 _Modal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../Modal */ \"./src/shared/components/Modal/index.tsx\");\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ \"./src/shared/components/selectors/CustomDropdown/Options/style.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\n\n\n\n\nconst Options = _ref => {\n  let {\n    anchorRect,\n    containerClass,\n    filter,\n    onCancel,\n    onChange,\n    optionClass,\n    options\n  } = _ref;\n  const optionNodes = [];\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      optionNodes.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n        className: optionClass,\n        onClick: () => onChange(iValue),\n        onKeyDown: e => {\n          if (e.key === 'Enter') {\n            onChange(iValue);\n          }\n        },\n        role: \"button\",\n        tabIndex: 0,\n        children: iName\n      }, iValue));\n    }\n  }\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Modal__WEBPACK_IMPORTED_MODULE_1__.BaseModal\n  // Closes the dropdown (cancels the selection) on any page scrolling attempt.\n  // This is the same native <select> elements do on scrolling, and at least for\n  // now we have no reason to deal with complications needed to support open\n  // dropdowns during the scrolling (that would need to re-position it in\n  // response to the position changes of the root dropdown element).\n  , {\n    cancelOnScrolling: true,\n    containerStyle: {\n      left: anchorRect.left,\n      top: anchorRect.bottom,\n      width: anchorRect.width\n    },\n    dontDisableScrolling: true,\n    onCancel: onCancel,\n    theme: {\n      ad: '',\n      hoc: '',\n      container: containerClass,\n      context: '',\n      overlay: _style_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].overlay\n    },\n    children: optionNodes\n  });\n};\nOptions.propTypes = {\n  anchorRect: prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({\n    bottom: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number).isRequired,\n    left: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number).isRequired,\n    width: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number).isRequired\n  }).isRequired,\n  containerClass: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired,\n  filter: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),\n  onCancel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func).isRequired,\n  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func).isRequired,\n  optionClass: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired,\n  options: _common__WEBPACK_IMPORTED_MODULE_3__.optionsValidator.isRequired\n};\nOptions.defaultProps = {\n  filter: undefined\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Options);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/Options/index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   areEqual: function() { return /* binding */ areEqual; }\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/* 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 _Modal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../Modal */ \"./src/shared/components/Modal/index.tsx\");\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style.scss */ \"./src/shared/components/selectors/CustomDropdown/Options/style.scss\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../common */ \"./src/shared/components/selectors/common.ts\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\nfunction areEqual(a, b) {\n  return (a === null || a === void 0 ? void 0 : a.left) === (b === null || b === void 0 ? void 0 : b.left) && (a === null || a === void 0 ? void 0 : a.top) === (b === null || b === void 0 ? void 0 : b.top) && (a === null || a === void 0 ? void 0 : a.width) === (b === null || b === void 0 ? void 0 : b.width);\n}\nconst Options = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((_ref, ref) => {\n  let {\n    containerClass,\n    containerStyle,\n    filter,\n    onCancel,\n    onChange,\n    optionClass,\n    options\n  } = _ref;\n  const opsRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, () => ({\n    measure: () => {\n      var _opsRef$current;\n      return (_opsRef$current = opsRef.current) === null || _opsRef$current === void 0 ? void 0 : _opsRef$current.getBoundingClientRect();\n    }\n  }), []);\n  const optionNodes = [];\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_4__.optionValueName)(option);\n      optionNodes.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n        className: optionClass,\n        onClick: () => onChange(iValue),\n        onKeyDown: e => {\n          if (e.key === 'Enter') {\n            onChange(iValue);\n          }\n        },\n        role: \"button\",\n        tabIndex: 0,\n        children: iName\n      }, iValue));\n    }\n  }\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Modal__WEBPACK_IMPORTED_MODULE_2__.BaseModal\n  // Closes the dropdown (cancels the selection) on any page scrolling attempt.\n  // This is the same native <select> elements do on scrolling, and at least for\n  // now we have no reason to deal with complications needed to support open\n  // dropdowns during the scrolling (that would need to re-position it in\n  // response to the position changes of the root dropdown element).\n  , {\n    cancelOnScrolling: true,\n    containerStyle: containerStyle,\n    dontDisableScrolling: true,\n    onCancel: onCancel,\n    theme: {\n      ad: '',\n      hoc: '',\n      container: containerClass,\n      context: '',\n      overlay: _style_scss__WEBPACK_IMPORTED_MODULE_3__[\"default\"].overlay\n    },\n    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(\"div\", {\n      ref: opsRef,\n      children: optionNodes\n    })\n  });\n});\nOptions.propTypes = {\n  containerClass: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired,\n  containerStyle: prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({\n    left: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number).isRequired,\n    top: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number).isRequired,\n    width: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number).isRequired\n  }),\n  filter: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),\n  onCancel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func).isRequired,\n  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func).isRequired,\n  optionClass: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string).isRequired,\n  options: _common__WEBPACK_IMPORTED_MODULE_4__.optionsValidator.isRequired\n};\nOptions.defaultProps = {\n  containerStyle: undefined,\n  filter: undefined\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Options);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/Options/index.tsx?");
 /***/ }),
@@ -216,7 +216,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 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 _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options */ \"./src/shared/components/selectors/CustomDropdown/Options/index.tsx\");\n/* harmony import */ var _theme_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./theme.scss */ \"./src/shared/components/selectors/CustomDropdown/theme.scss\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../common */ \"./src/shared/components/selectors/common.ts\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\nconst BaseCustomDropdown = _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  const dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n\n  // If \"null\" the dropdown is closed, otherwise it is displayed\n  // at the specified coordinates.\n  const [anchor, setAnchor] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null);\n  const openList = () => {\n    setAnchor(dropdownRef.current.getBoundingClientRect());\n  };\n  let selected = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {\n    children: \"\\u200C\"\n  });\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_5__.optionValueName)(option);\n      if (iValue === value) {\n        selected = iName;\n        break;\n      }\n    }\n  }\n  let containerClassName = theme.container;\n  if (anchor) containerClassName += ` ${theme.active}`;\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n    className: containerClassName,\n    children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n      className: theme.label,\n      children: label\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n      className: theme.dropdown,\n      onClick: openList,\n      onKeyDown: e => {\n        if (e.key === 'Enter') openList();\n      },\n      ref: dropdownRef,\n      role: \"listbox\",\n      tabIndex: 0,\n      children: [selected, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n        className: theme.arrow\n      })]\n    }), anchor ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_Options__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      anchorRect: anchor,\n      containerClass: theme.select || '',\n      onCancel: () => setAnchor(null),\n      onChange: newValue => {\n        setAnchor(null);\n        if (onChange) onChange(newValue);\n      },\n      optionClass: theme.option || '',\n      options: options\n    }) : null]\n  });\n};\nconst ThemedCustomDropdown = _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default()(BaseCustomDropdown, 'CustomDropdown', _common__WEBPACK_IMPORTED_MODULE_5__.validThemeKeys, _theme_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"]);\nBaseCustomDropdown.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: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(_common__WEBPACK_IMPORTED_MODULE_5__.optionValidator.isRequired),\n  theme: ThemedCustomDropdown.themeType.isRequired,\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)\n};\nBaseCustomDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: undefined\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (ThemedCustomDropdown);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/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 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 _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _Options__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options */ \"./src/shared/components/selectors/CustomDropdown/Options/index.tsx\");\n/* harmony import */ var _theme_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./theme.scss */ \"./src/shared/components/selectors/CustomDropdown/theme.scss\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../common */ \"./src/shared/components/selectors/common.ts\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\nconst BaseCustomDropdown = _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  const [active, setActive] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  const dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const opsRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const [opsPos, setOpsPos] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)();\n  const [upward, setUpward] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (!active) return undefined;\n    let id;\n    const cb = () => {\n      var _dropdownRef$current, _opsRef$current;\n      const anchor = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getBoundingClientRect();\n      const opsRect = (_opsRef$current = opsRef.current) === null || _opsRef$current === void 0 ? void 0 : _opsRef$current.measure();\n      if (anchor && opsRect) {\n        var _window$visualViewpor, _window$visualViewpor2;\n        const fitsDown = anchor.bottom + opsRect.height < ((_window$visualViewpor = (_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 ? void 0 : _window$visualViewpor2.height) !== null && _window$visualViewpor !== void 0 ? _window$visualViewpor : 0);\n        const fitsUp = anchor.top - opsRect.height > 0;\n        const up = !fitsDown && fitsUp;\n        setUpward(up);\n        const pos = up ? {\n          top: anchor.top - opsRect.height - 1,\n          left: anchor.left,\n          width: anchor.width\n        } : {\n          left: anchor.left,\n          top: anchor.bottom,\n          width: anchor.width\n        };\n        setOpsPos(now => (0,_Options__WEBPACK_IMPORTED_MODULE_3__.areEqual)(now, pos) ? now : pos);\n      }\n      id = requestAnimationFrame(cb);\n    };\n    requestAnimationFrame(cb);\n    return () => {\n      cancelAnimationFrame(id);\n    };\n  }, [active]);\n  const openList = () => {\n    const view = window.visualViewport;\n    const rect = dropdownRef.current.getBoundingClientRect();\n    setActive(true);\n\n    // NOTE: This first opens the dropdown off-screen, where it is measured\n    // by an effect declared above, and then positioned below, or above\n    // the original dropdown element, depending where it fits best\n    // (if we first open it downward, it would flick if we immediately\n    // move it above, at least with the current position update via local\n    // react state, and not imperatively).\n    setOpsPos({\n      left: (view === null || view === void 0 ? void 0 : view.width) || 0,\n      top: (view === null || view === void 0 ? void 0 : view.height) || 0,\n      width: rect.width\n    });\n  };\n  let selected = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {\n    children: \"\\u200C\"\n  });\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_5__.optionValueName)(option);\n      if (iValue === value) {\n        selected = iName;\n        break;\n      }\n    }\n  }\n  let containerClassName = theme.container;\n  if (active) containerClassName += ` ${theme.active}`;\n  let opsContainerClass = theme.select || '';\n  if (upward) {\n    containerClassName += ` ${theme.upward}`;\n    opsContainerClass += ` ${theme.upward}`;\n  }\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n    className: containerClassName,\n    children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n      className: theme.label,\n      children: label\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n      className: theme.dropdown,\n      onClick: openList,\n      onKeyDown: e => {\n        if (e.key === 'Enter') openList();\n      },\n      ref: dropdownRef,\n      role: \"listbox\",\n      tabIndex: 0,\n      children: [selected, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n        className: theme.arrow\n      })]\n    }), active ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_Options__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      containerClass: opsContainerClass,\n      containerStyle: opsPos,\n      onCancel: () => {\n        setActive(false);\n      },\n      onChange: newValue => {\n        setActive(false);\n        if (onChange) onChange(newValue);\n      },\n      optionClass: theme.option || '',\n      options: options,\n      ref: opsRef\n    }) : null]\n  });\n};\nconst ThemedCustomDropdown = _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_2___default()(BaseCustomDropdown, 'CustomDropdown', _common__WEBPACK_IMPORTED_MODULE_5__.validThemeKeys, _theme_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"]);\nBaseCustomDropdown.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: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(_common__WEBPACK_IMPORTED_MODULE_5__.optionValidator.isRequired),\n  theme: ThemedCustomDropdown.themeType.isRequired,\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)\n};\nBaseCustomDropdown.defaultProps = {\n  filter: undefined,\n  label: undefined,\n  onChange: undefined,\n  options: [],\n  value: undefined\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (ThemedCustomDropdown);\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/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'];\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 */   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?");
 /***/ }),
@@ -496,7 +496,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
   \*******************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\"container\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___container___oQKv0Y\",\"context\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___context___9Tod5r\",\"ad\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___ad___R58zIg\",\"hoc\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___hoc___O-Tp1i\",\"label\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___label___YUPUNs\",\"dropdown\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___dropdown___pNEyAA\",\"option\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___option___LD2Kzy\",\"select\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___select___LP5azC\",\"arrow\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___arrow___-wscve\",\"active\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV\"});\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/theme.scss?");
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\"container\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___container___oQKv0Y\",\"context\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___context___9Tod5r\",\"ad\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___ad___R58zIg\",\"hoc\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___hoc___O-Tp1i\",\"label\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___label___YUPUNs\",\"dropdown\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___dropdown___pNEyAA\",\"option\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___option___LD2Kzy\",\"select\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___select___LP5azC\",\"arrow\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___arrow___-wscve\",\"active\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___active___k2UDsV\",\"upward\":\"-dr-pogodin-react-utils___src-shared-components-selectors-CustomDropdown-theme___upward___HWRvu4\"});\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/theme.scss?");
 /***/ }),

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

@@ -9,6 +9,6 @@
  * modal.
  * @param {ModalTheme} [props.theme] _Ad hoc_ theme.
  */const BaseModal=({cancelOnScrolling,children,containerStyle,dontDisableScrolling,onCancel,theme})=>{const containerRef=(0,_react.useRef)(null);const overlayRef=(0,_react.useRef)(null);const[portal,setPortal]=(0,_react.useState)();(0,_react.useEffect)(()=>{const p=document.createElement("div");document.body.appendChild(p);setPortal(p);return()=>{document.body.removeChild(p)}},[]);// Sets up modal cancellation of scrolling, if opted-in.
-(0,_react.useEffect)(()=>{if(cancelOnScrolling&&onCancel){window.addEventListener("scroll",onCancel)}return()=>{if(cancelOnScrolling&&onCancel){window.removeEventListener("scroll",onCancel)}}},[cancelOnScrolling,onCancel]);// Disables window scrolling, if it is not opted-out.
+(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. */
 //# sourceMappingURL=index.js.map