@dr.pogodin/react-utils 1.35.3 → 1.36.0
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.
- package/LICENSE.md +1 -1
- package/bin/build.js +7 -6
- package/build/development/client/getInj.js +3 -10
- package/build/development/client/getInj.js.map +1 -1
- package/build/development/client/index.js +2 -9
- package/build/development/client/index.js.map +1 -1
- package/build/development/index.js +1 -15
- package/build/development/index.js.map +1 -1
- package/build/development/server/Cache.js +19 -19
- package/build/development/server/Cache.js.map +1 -1
- package/build/development/server/renderer.js +7 -4
- package/build/development/server/renderer.js.map +1 -1
- package/build/development/server/server.js +4 -1
- package/build/development/server/server.js.map +1 -1
- package/build/development/shared/components/Button/index.js +1 -16
- package/build/development/shared/components/Button/index.js.map +1 -1
- package/build/development/shared/components/Checkbox/index.js +1 -29
- package/build/development/shared/components/Checkbox/index.js.map +1 -1
- package/build/development/shared/components/GenericLink/index.js +0 -15
- package/build/development/shared/components/GenericLink/index.js.map +1 -1
- package/build/development/shared/components/Input/index.js +1 -8
- package/build/development/shared/components/Input/index.js.map +1 -1
- package/build/development/shared/components/MetaTags.js +0 -12
- package/build/development/shared/components/MetaTags.js.map +1 -1
- package/build/development/shared/components/Modal/index.js +2 -13
- package/build/development/shared/components/Modal/index.js.map +1 -1
- package/build/development/shared/components/PageLayout/index.js +1 -10
- package/build/development/shared/components/PageLayout/index.js.map +1 -1
- package/build/development/shared/components/TextArea/index.js +1 -12
- package/build/development/shared/components/TextArea/index.js.map +1 -1
- package/build/development/shared/components/Throbber/index.js +1 -6
- package/build/development/shared/components/Throbber/index.js.map +1 -1
- package/build/development/shared/components/WithTooltip/Tooltip.js +1 -8
- package/build/development/shared/components/WithTooltip/Tooltip.js.map +1 -1
- package/build/development/shared/components/WithTooltip/index.js +1 -9
- package/build/development/shared/components/WithTooltip/index.js.map +1 -1
- package/build/development/shared/components/YouTubeVideo/index.js +2 -11
- package/build/development/shared/components/YouTubeVideo/index.js.map +1 -1
- package/build/development/shared/components/selectors/CustomDropdown/Options/index.js +1 -16
- package/build/development/shared/components/selectors/CustomDropdown/Options/index.js.map +1 -1
- package/build/development/shared/components/selectors/CustomDropdown/index.js +2 -12
- package/build/development/shared/components/selectors/CustomDropdown/index.js.map +1 -1
- package/build/development/shared/components/selectors/NativeDropdown/index.js +2 -12
- package/build/development/shared/components/selectors/NativeDropdown/index.js.map +1 -1
- package/build/development/shared/components/selectors/Switch/index.js +21 -28
- package/build/development/shared/components/selectors/Switch/index.js.map +1 -1
- package/build/development/shared/components/selectors/common.js +0 -19
- package/build/development/shared/components/selectors/common.js.map +1 -1
- package/build/development/shared/components/selectors/index.js +0 -13
- package/build/development/shared/components/selectors/index.js.map +1 -1
- package/build/development/shared/utils/globalState.js.map +1 -1
- package/build/development/shared/utils/jest/index.js +4 -2
- package/build/development/shared/utils/jest/index.js.map +1 -1
- package/build/development/shared/utils/splitComponent.js +21 -28
- package/build/development/shared/utils/splitComponent.js.map +1 -1
- package/build/development/web.bundle.js +28 -38
- package/build/production/client/getInj.js +3 -7
- package/build/production/client/getInj.js.map +1 -1
- package/build/production/client/index.js +1 -1
- package/build/production/client/index.js.map +1 -1
- package/build/production/index.js +1 -4
- package/build/production/index.js.map +1 -1
- package/build/production/server/Cache.js +3 -3
- package/build/production/server/Cache.js.map +1 -1
- package/build/production/server/renderer.js +2 -2
- package/build/production/server/renderer.js.map +1 -1
- package/build/production/server/server.js +1 -1
- package/build/production/server/server.js.map +1 -1
- package/build/production/shared/components/Button/index.js +3 -3
- package/build/production/shared/components/Button/index.js.map +1 -1
- package/build/production/shared/components/Checkbox/index.js +1 -16
- package/build/production/shared/components/Checkbox/index.js.map +1 -1
- package/build/production/shared/components/GenericLink/index.js +2 -2
- package/build/production/shared/components/GenericLink/index.js.map +1 -1
- package/build/production/shared/components/Input/index.js +2 -2
- package/build/production/shared/components/Input/index.js.map +1 -1
- package/build/production/shared/components/MetaTags.js +2 -2
- package/build/production/shared/components/MetaTags.js.map +1 -1
- package/build/production/shared/components/Modal/index.js +2 -2
- package/build/production/shared/components/Modal/index.js.map +1 -1
- package/build/production/shared/components/PageLayout/index.js +2 -2
- package/build/production/shared/components/PageLayout/index.js.map +1 -1
- package/build/production/shared/components/TextArea/index.js +2 -2
- package/build/production/shared/components/TextArea/index.js.map +1 -1
- package/build/production/shared/components/Throbber/index.js +2 -2
- package/build/production/shared/components/Throbber/index.js.map +1 -1
- package/build/production/shared/components/WithTooltip/Tooltip.js +3 -3
- package/build/production/shared/components/WithTooltip/Tooltip.js.map +1 -1
- package/build/production/shared/components/WithTooltip/index.js +2 -2
- package/build/production/shared/components/WithTooltip/index.js.map +1 -1
- package/build/production/shared/components/YouTubeVideo/index.js +3 -3
- package/build/production/shared/components/YouTubeVideo/index.js.map +1 -1
- package/build/production/shared/components/selectors/CustomDropdown/Options/index.js +2 -2
- package/build/production/shared/components/selectors/CustomDropdown/Options/index.js.map +1 -1
- package/build/production/shared/components/selectors/CustomDropdown/index.js +2 -2
- package/build/production/shared/components/selectors/CustomDropdown/index.js.map +1 -1
- package/build/production/shared/components/selectors/NativeDropdown/index.js +3 -3
- package/build/production/shared/components/selectors/NativeDropdown/index.js.map +1 -1
- package/build/production/shared/components/selectors/Switch/index.js +1 -1
- package/build/production/shared/components/selectors/Switch/index.js.map +1 -1
- package/build/production/shared/components/selectors/common.js +2 -4
- package/build/production/shared/components/selectors/common.js.map +1 -1
- package/build/production/shared/components/selectors/index.js +1 -1
- package/build/production/shared/components/selectors/index.js.map +1 -1
- package/build/production/shared/utils/globalState.js.map +1 -1
- package/build/production/shared/utils/jest/index.js +1 -1
- package/build/production/shared/utils/jest/index.js.map +1 -1
- package/build/production/shared/utils/splitComponent.js +10 -12
- package/build/production/shared/utils/splitComponent.js.map +1 -1
- package/build/production/web.bundle.js +1 -1
- package/build/production/web.bundle.js.map +1 -1
- package/build/types-code/client/getInj.d.ts +0 -6
- package/build/types-code/client/index.d.ts +1 -2
- package/build/types-code/index.d.ts +2 -3
- package/build/types-code/server/Cache.d.ts +3 -11
- package/build/types-code/server/index.d.ts +0 -2
- package/build/types-code/server/renderer.d.ts +0 -1
- package/build/types-code/server/server.d.ts +0 -1
- package/build/types-code/shared/components/Button/index.d.ts +3 -4
- package/build/types-code/shared/components/Checkbox/index.d.ts +3 -12
- package/build/types-code/shared/components/Input/index.d.ts +4 -5
- package/build/types-code/shared/components/Link.d.ts +0 -1
- package/build/types-code/shared/components/Modal/index.d.ts +3 -4
- package/build/types-code/shared/components/NavLink.d.ts +0 -1
- package/build/types-code/shared/components/PageLayout/index.d.ts +4 -4
- package/build/types-code/shared/components/TextArea/index.d.ts +4 -5
- package/build/types-code/shared/components/Throbber/index.d.ts +4 -4
- package/build/types-code/shared/components/WithTooltip/Tooltip.d.ts +1 -1
- package/build/types-code/shared/components/WithTooltip/index.d.ts +2 -3
- package/build/types-code/shared/components/YouTubeVideo/index.d.ts +3 -4
- package/build/types-code/shared/components/selectors/CustomDropdown/Options/index.d.ts +1 -2
- package/build/types-code/shared/components/selectors/CustomDropdown/index.d.ts +2 -3
- package/build/types-code/shared/components/selectors/NativeDropdown/index.d.ts +2 -2
- package/build/types-code/shared/components/selectors/Switch/index.d.ts +4 -5
- package/build/types-code/shared/components/selectors/common.d.ts +5 -11
- package/build/types-code/shared/components/selectors/index.d.ts +1 -1
- package/build/types-code/shared/utils/globalState.d.ts +6 -2
- package/build/types-code/shared/utils/jest/index.d.ts +4 -1
- package/build/types-code/shared/utils/splitComponent.d.ts +0 -1
- package/build/types-code/shared/utils/webpack.d.ts +0 -1
- package/config/babel/node-ssr.js +1 -1
- package/config/babel/webpack.js +1 -1
- package/config/eslint/default.json +1 -0
- package/config/eslint/jest.json +1 -0
- package/config/eslint/typescript.js +7 -0
- package/config/typescript/base.json +9 -0
- package/config/webpack/app-base.d.ts +0 -1
- package/config/webpack/app-base.js +1 -1
- package/config/webpack/app-development.js +1 -1
- package/config/webpack/app-production.js +1 -1
- package/config/webpack/lib-base.js +1 -2
- package/config/webpack/lib-development.js +1 -1
- package/config/webpack/lib-production.js +1 -1
- package/package.json +28 -27
- package/src/client/getInj.ts +3 -9
- package/src/client/index.tsx +1 -3
- package/src/index.ts +1 -10
- package/src/server/Cache.ts +31 -30
- package/src/server/renderer.tsx +8 -5
- package/src/server/server.ts +6 -1
- package/src/shared/components/Button/index.tsx +2 -20
- package/src/shared/components/Checkbox/index.tsx +2 -37
- package/src/shared/components/GenericLink/index.tsx +0 -15
- package/src/shared/components/Input/index.tsx +6 -15
- package/src/shared/components/MetaTags.tsx +0 -12
- package/src/shared/components/Modal/index.tsx +3 -22
- package/src/shared/components/PageLayout/index.tsx +8 -24
- package/src/shared/components/TextArea/index.tsx +6 -24
- package/src/shared/components/Throbber/index.tsx +6 -18
- package/src/shared/components/WithTooltip/Tooltip.tsx +6 -14
- package/src/shared/components/WithTooltip/index.tsx +3 -24
- package/src/shared/components/YouTubeVideo/index.tsx +3 -20
- package/src/shared/components/selectors/CustomDropdown/Options/index.tsx +2 -20
- package/src/shared/components/selectors/CustomDropdown/index.tsx +3 -27
- package/src/shared/components/selectors/NativeDropdown/index.tsx +3 -27
- package/src/shared/components/selectors/Switch/index.tsx +34 -50
- package/src/shared/components/selectors/common.ts +13 -45
- package/src/shared/components/selectors/index.ts +0 -2
- package/src/shared/utils/globalState.ts +6 -0
- package/src/shared/utils/jest/index.tsx +13 -2
- package/src/shared/utils/splitComponent.tsx +24 -29
- package/tsconfig.configs.json +7 -3
- package/tsconfig.json +3 -10
- package/tsconfig.types.json +1 -7
- package/tstyche.config.json +6 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;require("react");require("react-router-dom");var _jsxRuntime=require("react/jsx-runtime");/* global window */ /**
|
|
2
2
|
* The `<Link>` component, and almost identical `<NavLink>` component, are
|
|
3
3
|
* auxiliary wrappers around
|
|
4
4
|
* [React Router](https://github.com/ReactTraining/react-router)'s
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
,href:to,onClick:disabled?e=>e.preventDefault():onClick,onMouseDown:disabled?e=>e.preventDefault():onMouseDown,rel:"noopener noreferrer",target:openNewTab?"_blank":"",children:children})}const L=routerLinkType;return/*#__PURE__*/(0,_jsxRuntime.jsx)(L,{className:className// disabled
|
|
49
49
|
,onMouseDown:onMouseDown,replace:replace,to:to,onClick:e=>{// Executes the user-provided event handler, if any.
|
|
50
50
|
if(onClick)onClick(e);// By default, clicking the link scrolls the page to beginning.
|
|
51
|
-
if(!keepScrollPosition)window.scroll(0,0)},...rest,children:children})};
|
|
51
|
+
if(!keepScrollPosition)window.scroll(0,0)},...rest,children:children})};var _default=exports.default=GenericLink;
|
|
52
52
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["require","_jsxRuntime","GenericLink","children","className","disabled","enforceA","keepScrollPosition","onClick","onMouseDown","openNewTab","replace","routerLinkType","to","rest","match","jsx","href","e","preventDefault","rel","target","L","window","scroll","_default","exports","default"],"sources":["../../../../../src/shared/components/GenericLink/index.tsx"],"sourcesContent":["/* global window */\n\nimport { type ReactNode } from 'react';\n\nimport { type Link, type NavLink } from 'react-router-dom';\n\nimport './style.scss';\n\ntype ToT = Parameters<typeof Link>[0]['to'];\n\ninterface LinkI {}\n\nexport type PropsT = {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n enforceA?: boolean;\n keepScrollPosition?: boolean;\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n onMouseDown?: React.MouseEventHandler<HTMLAnchorElement>;\n openNewTab?: boolean;\n replace?: boolean;\n routerLinkType: LinkI;\n to?: ToT;\n};\n\n/**\n * The `<Link>` component, and almost identical `<NavLink>` component, are\n * auxiliary wrappers around\n * [React Router](https://github.com/ReactTraining/react-router)'s\n * `<Link>` and `<NavLink>` components; they help to handle external and\n * internal links in uniform manner.\n *\n * @param [props] Component properties.\n * @param [props.className] CSS classes to apply to the link.\n * @param [props.disabled] Disables the link.\n * @param [props.enforceA] `true` enforces rendering of the link as\n * a simple `<a>` element.\n * @param [props.keepScrollPosition] If `true`, and the link is\n * rendered as a React Router's component, it won't reset the viewport scrolling\n * position to the origin when clicked.\n * @param [props.onClick] Event handler to trigger upon click.\n * @param [props.onMouseDown] Event handler to trigger on MouseDown\n * event.\n * @param [props.openNewTab] If `true` the link opens in a new tab.\n * @param [props.replace] When `true`, the link will replace current\n * entry in the history stack instead of adding a new one.\n * @param [props.to] Link URL.\n * @param [props.activeClassName] **`<NavLink>`** only: CSS class(es)\n * to apply to rendered link when it is active.\n * @param [props.activeStyle] **`<NavLink>`** only: CSS styles\n * to apply to the rendered link when it is active.\n * @param [props.exact] **`<NavLink>`** only: if `true`, the active\n * class/style will only be applied if the location is matched exactly.\n * @param [props.isActive] **`<NavLink>`** only: Add extra\n * logic for determining whether the link is active. This should be used if you\n * want to do more than verify that the link’s pathname matches the current URL\n * pathname.\n * @param [props.location] **`<NavLink>`** only: `isActive` compares\n * current history location (usually the current browser URL). To compare to\n * a different location, a custom `location` can be passed.\n * @param [props.strict] **`<NavLink>`** only: . When `true`, trailing\n * slash on a location’s pathname will be taken into consideration when\n * determining if the location matches the current URL. See the `<Route strict>`\n * documentation for more information.\n */\nconst GenericLink: React.FunctionComponent<PropsT> = ({\n children,\n className,\n disabled,\n enforceA,\n keepScrollPosition,\n onClick,\n onMouseDown,\n openNewTab,\n replace,\n routerLinkType,\n to,\n ...rest\n}) => {\n /* Renders Link as <a> element if:\n * - It is opted explicitely by `enforceA` prop;\n * - It should be opened in a new tab;\n * - It is an absolte URL (starts with http:// or https://);\n * - It is anchor link (starts with #). */\n if (disabled || enforceA || openNewTab || (to as string)?.match(/^(#|(https?|mailto):)/)) {\n return (\n <a\n className={className}\n // TODO: This requires a fix: disabled is not really an attribute of <a>\n // tag, thus for disabled option we rather should render a plain text\n // styled as a link.\n // disabled={disabled}\n href={to as string}\n onClick={disabled ? (e) => e.preventDefault() : onClick}\n onMouseDown={disabled ? (e) => e.preventDefault() : onMouseDown}\n rel=\"noopener noreferrer\"\n styleName=\"link\"\n target={openNewTab ? '_blank' : ''}\n >\n {children}\n </a>\n );\n }\n\n const L = routerLinkType as typeof NavLink;\n\n return (\n <L\n className={className}\n // disabled\n onMouseDown={onMouseDown}\n replace={replace}\n to={to!}\n onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {\n // Executes the user-provided event handler, if any.\n if (onClick) onClick(e);\n\n // By default, clicking the link scrolls the page to beginning.\n if (!keepScrollPosition) window.scroll(0, 0);\n }}\n {...rest} // eslint-disable-line react/jsx-props-no-spreading\n >\n {children}\n </L>\n );\n};\n\nexport default GenericLink;\n"],"mappings":"6FAEAA,OAAA,UAEAA,OAAA,qBAA2D,IAAAC,WAAA,CAAAD,OAAA,sBAJ3D,oBA0BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,KAAM,CAAAE,WAA4C,CAAGA,CAAC,CACpDC,QAAQ,CACRC,SAAS,CACTC,QAAQ,CACRC,QAAQ,CACRC,kBAAkB,CAClBC,OAAO,CACPC,WAAW,CACXC,UAAU,CACVC,OAAO,CACPC,cAAc,CACdC,EAAE,CACF,GAAGC,IACL,CAAC,GAAK,CACJ;AACF;AACA;AACA;AACA,4CACE,GAAIT,QAAQ,EAAIC,QAAQ,EAAII,UAAU,EAAKG,EAAE,EAAaE,KAAK,CAAC,uBAAuB,CAAC,CAAE,CACxF,mBACE,GAAAd,WAAA,CAAAe,GAAA,OACEZ,SAAS,EAAEA,SAAS,CAATA,SAAS,iBACpB;AACA;AACA;AACA;AAAA,CACAa,IAAI,CAAEJ,EAAa,CACnBL,OAAO,CAAEH,QAAQ,CAAIa,CAAC,EAAKA,CAAC,CAACC,cAAc,CAAC,CAAC,CAAGX,OAAQ,CACxDC,WAAW,CAAEJ,QAAQ,CAAIa,CAAC,EAAKA,CAAC,CAACC,cAAc,CAAC,CAAC,CAAGV,WAAY,CAChEW,GAAG,CAAC,qBAAqB,CAEzBC,MAAM,CAAEX,UAAU,CAAG,QAAQ,CAAG,EAAG,CAAAP,QAAA,CAElCA,QAAQ,CACR,CAEP,CAEA,KAAM,CAAAmB,CAAC,CAAGV,cAAgC,CAE1C,mBACE,GAAAX,WAAA,CAAAe,GAAA,EAACM,CAAC,EACAlB,SAAS,CAAEA,SACX;AAAA,CACAK,WAAW,CAAEA,WAAY,CACzBE,OAAO,CAAEA,OAAQ,CACjBE,EAAE,CAAEA,EAAI,CACRL,OAAO,CAAGU,CAAsC,EAAK,CACnD;AACA,GAAIV,OAAO,CAAEA,OAAO,CAACU,CAAC,CAAC,CAEvB;AACA,GAAI,CAACX,kBAAkB,CAAEgB,MAAM,CAACC,MAAM,CAAC,CAAC,CAAE,CAAC,CAC7C,CAAE,IACEV,IAAI,CAAAX,QAAA,CAEPA,QAAQ,CACR,CAEP,CAAC,CAAC,IAAAsB,QAAA,CAAAC,OAAA,CAAAC,OAAA,CAEazB,WAAW","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=require("react");var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"X5WszA","ad":"_8s7GCr","hoc":"TVlBYc","container":"Cxx397","input":"M07d4s","label":"gfbdq-"};/**
|
|
2
2
|
* Themeable input field, based on the standard HTML `<input>` element.
|
|
3
3
|
* @param [props]
|
|
4
4
|
* @param [props.label] Input label.
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
* @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
|
|
7
7
|
* @param [props...] Any other properties are passed to the underlying
|
|
8
8
|
* `<input>` element.
|
|
9
|
-
*/const Input=/*#__PURE__*/(0,_react.forwardRef)(({label,theme,...rest},ref)=>/*#__PURE__*/(0,_jsxRuntime.jsxs)("span",{className:theme.container,children:[label===undefined?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.label,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsx)("input",{className:theme.input,ref:ref,...rest})]}));
|
|
9
|
+
*/const Input=/*#__PURE__*/(0,_react.forwardRef)(({label,theme,...rest},ref)=>/*#__PURE__*/(0,_jsxRuntime.jsxs)("span",{className:theme.container,children:[label===undefined?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.label,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsx)("input",{className:theme.input,ref:ref,...rest})]}));var _default=exports.default=(0,_reactThemes.default)(Input,"Input",defaultTheme);
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","Input","forwardRef","label","theme","rest","ref","jsxs","className","container","children","undefined","jsx","input","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT =\n | 'container'\n | 'input'\n | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: React.ReactNode;\n theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props]\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input = forwardRef<HTMLInputElement, PropsT>((\n {\n label,\n theme,\n ...rest\n }: PropsT,\n ref,\n) => (\n <span className={theme.container}>\n { label === undefined ? null : <div className={theme.label}>{label}</div> }\n <input\n className={theme.input}\n ref={ref}\n {...rest} // eslint-disable-line react/jsx-props-no-spreading\n />\n </span>\n));\n\nexport default themed(Input, 'Input', defaultTheme);\n"],"mappings":"gLAAA,IAAAA,MAAA,CAAAC,OAAA,UAEA,IAAAC,YAAA,CAAAC,sBAAA,CAAAF,OAAA,8BAA8D,IAAAG,WAAA,CAAAH,OAAA,4BAAAI,YAAA,2GAc9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,KAAM,CAAAC,KAAK,cAAG,GAAAC,iBAAU,EAA2B,CACjD,CACEC,KAAK,CACLC,KAAK,CACL,GAAGC,IACG,CAAC,CACTC,GAAG,gBAEH,GAAAP,WAAA,CAAAQ,IAAA,UAAMC,SAAS,CAAEJ,KAAK,CAACK,SAAU,CAAAC,QAAA,EAC7BP,KAAK,GAAKQ,SAAS,CAAG,IAAI,cAAG,GAAAZ,WAAA,CAAAa,GAAA,SAAKJ,SAAS,CAAEJ,KAAK,CAACD,KAAM,CAAAO,QAAA,CAAEP,KAAK,CAAM,CAAC,cACzE,GAAAJ,WAAA,CAAAa,GAAA,WACEJ,SAAS,CAAEJ,KAAK,CAACS,KAAM,CACvBP,GAAG,CAAEA,GAAI,IACLD,IAAI,CACT,CAAC,EACE,CACP,CAAC,CAAC,IAAAS,QAAA,CAAAC,OAAA,CAAAC,OAAA,CAEY,GAAAC,oBAAM,EAAChB,KAAK,CAAE,OAAO,CAAED,YAAY,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=require("react");var _reactHelmet=require("react-helmet");var _jsxRuntime=require("react/jsx-runtime");const Context=/*#__PURE__*/(0,_react.createContext)({description:"",title:""});/**
|
|
2
2
|
* The `<MetaTags>` component is an auxiliary wrapper around `react-helmet`,
|
|
3
3
|
* which helps to inject meta tags (page title, a brief content description,
|
|
4
4
|
* and social media thumbnails) into generated pages.
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
*
|
|
51
51
|
* @param [props.url] The page URL to use in `og:url` tag.
|
|
52
52
|
* By default the tag is not injected.
|
|
53
|
-
*/const MetaTags=({children,description,image,siteName,socialDescription,socialTitle,title,url})=>{const socTitle=socialTitle||title;const socDesc=socialDescription||description;const context=(0,_react.useMemo)(()=>({description,image,siteName,socialDescription,socialTitle,title,url}),[description,image,siteName,socialDescription,socialTitle,title,url]);return/*#__PURE__*/(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[/*#__PURE__*/(0,_jsxRuntime.jsxs)(_reactHelmet.Helmet,{children:[/*#__PURE__*/(0,_jsxRuntime.jsx)("title",{children:title}),/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"description",content:description}),/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:title",content:socTitle}),/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:description",content:socDesc}),image?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:image",content:image}):null,siteName?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:site",content:`@${siteName}`}):null,/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:title",content:socTitle}),image?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:image",content:image}):null,image?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:image:alt",content:socTitle}):null,/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:description",content:socDesc}),siteName?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:sitename",content:siteName}):null,url?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:url",content:url}):null]}),children?/*#__PURE__*/(0,_jsxRuntime.jsx)(Context.Provider,{value:context,children:children}):null]})};MetaTags.Context=Context;
|
|
53
|
+
*/const MetaTags=({children,description,image,siteName,socialDescription,socialTitle,title,url})=>{const socTitle=socialTitle||title;const socDesc=socialDescription||description;const context=(0,_react.useMemo)(()=>({description,image,siteName,socialDescription,socialTitle,title,url}),[description,image,siteName,socialDescription,socialTitle,title,url]);return/*#__PURE__*/(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[/*#__PURE__*/(0,_jsxRuntime.jsxs)(_reactHelmet.Helmet,{children:[/*#__PURE__*/(0,_jsxRuntime.jsx)("title",{children:title}),/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"description",content:description}),/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:title",content:socTitle}),/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:description",content:socDesc}),image?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:image",content:image}):null,siteName?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"twitter:site",content:`@${siteName}`}):null,/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:title",content:socTitle}),image?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:image",content:image}):null,image?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:image:alt",content:socTitle}):null,/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:description",content:socDesc}),siteName?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:sitename",content:siteName}):null,url?/*#__PURE__*/(0,_jsxRuntime.jsx)("meta",{name:"og:url",content:url}):null]}),children?/*#__PURE__*/(0,_jsxRuntime.jsx)(Context.Provider,{value:context,children:children}):null]})};MetaTags.Context=Context;var _default=exports.default=MetaTags;
|
|
54
54
|
//# sourceMappingURL=MetaTags.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetaTags.js","names":["
|
|
1
|
+
{"version":3,"file":"MetaTags.js","names":["_react","require","_reactHelmet","_jsxRuntime","Context","createContext","description","title","MetaTags","children","image","siteName","socialDescription","socialTitle","url","socTitle","socDesc","context","useMemo","jsxs","Fragment","Helmet","jsx","name","content","Provider","value","_default","exports","default"],"sources":["../../../../src/shared/components/MetaTags.tsx"],"sourcesContent":["import { type ReactNode, createContext, useMemo } from 'react';\nimport { Helmet } from 'react-helmet';\n\ntype PropsT = {\n children?: ReactNode;\n description: string;\n image?: string;\n siteName?: string;\n socialDescription?: string;\n socialTitle?: string;\n title: string;\n url?: string;\n};\n\nconst Context = createContext<PropsT>({\n description: '',\n title: '',\n});\n\n/**\n * The `<MetaTags>` component is an auxiliary wrapper around `react-helmet`,\n * which helps to inject meta tags (page title, a brief content description,\n * and social media thumbnails) into generated pages.\n *\n * When `<MetaTags>` are nested within the app's component tree, meta tags\n * content injected by components encountered down the tree overrides tags\n * injected by previously encountered `<MetaTags>` components.\n *\n * **Children:** `<MetaTags>` children, if any, are rendered at the component's\n * location. The context passes down all meta tag properties of parent\n * `<MetaTag>` instances. These properties can fetched within children\n * hierarchy in the following way, thus facilitating tags modification by\n * children:\n * ```jsx\n * import { useContext } from 'react';\n * import { MetaTags } from '@dr.pogodin/react-utils';\n * export default function SampleComponent() {\n * const { title, description, ...rest } = useContext(MetaTags.Context);\n * // Do something with these props here, e.g. prefix the page title with\n * // the component name:\n * return (\n * <MetaTags title={`Sample component - ${title}`} />\n * );\n * }\n * ```\n * @param [props]\n * @param [props.description] Page description to use in\n * the `description` meta tag, and as a default description of Open Graph Tags.\n * @param [props.image] The absolute URL of thumbnail image to use\n * in Open Graph Tags (`twitter:image`, and `og:image`). By default these tags\n * are not injected.\n *\n * **BEWARE:** It must be a complete, absolute URL, including the correct\n * website domain and HTTP schema.\n *\n * @param [props.siteName]: The site name to use in `twitter:site`,\n * and `og:sitename` tags. By default these tags are not injected.\n *\n * @param [props.socialDescription] The site description to use in\n * `twitter:description` and `og:description` meta tags. By default the value of\n * `description` prop is used.\n * @param [props.socialTitle] The page title to use in\n * `twitter:title`, `og:title`, and `og:image:alt` tags. By default the value of\n * `title` prop is used. Also the `og:image:alt` tag is only injected if `image`\n * prop is present.\n *\n * @param props.title: The page name to use in the `<title>` tag.\n * It is also used as the default value of `socialTitle` prop.\n *\n * @param [props.url] The page URL to use in `og:url` tag.\n * By default the tag is not injected.\n */\nconst MetaTags: React.FunctionComponent<PropsT> & {\n Context: React.Context<PropsT>;\n} = ({\n children,\n description,\n image,\n siteName,\n socialDescription,\n socialTitle,\n title,\n url,\n}) => {\n const socTitle = socialTitle || title;\n const socDesc = socialDescription || description;\n\n const context = useMemo(() => ({\n description,\n image,\n siteName,\n socialDescription,\n socialTitle,\n title,\n url,\n }), [\n description,\n image,\n siteName,\n socialDescription,\n socialTitle,\n title,\n url,\n ]);\n\n return (\n <>\n <Helmet>\n {/* General tags. */}\n <title>\n {title}\n </title>\n <meta name=\"description\" content={description} />\n\n {/* Twitter cards. */}\n <meta name=\"twitter:card\" content=\"summary_large_image\" />\n <meta name=\"twitter:title\" content={socTitle} />\n <meta name=\"twitter:description\" content={socDesc} />\n { image ? <meta name=\"twitter:image\" content={image} /> : null }\n {\n siteName ? (\n <meta name=\"twitter:site\" content={`@${siteName}`} />\n ) : null\n }\n\n {/* Open Graph data. */}\n <meta name=\"og:title\" content={socTitle} />\n { image ? <meta name=\"og:image\" content={image} /> : null }\n { image ? <meta name=\"og:image:alt\" content={socTitle} /> : null }\n <meta name=\"og:description\" content={socDesc} />\n {\n siteName ? (<meta name=\"og:sitename\" content={siteName} />) : null\n }\n { url ? (<meta name=\"og:url\" content={url} />) : null }\n </Helmet>\n {\n children ? (\n <Context.Provider value={context}>\n {children}\n </Context.Provider>\n ) : null\n }\n </>\n );\n};\n\nMetaTags.Context = Context;\n\nexport default MetaTags;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.BaseModal=void 0;var _react=require("react");var _reactDom=_interopRequireDefault(require("react-dom"));var
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.BaseModal=void 0;var _react=require("react");var _reactDom=_interopRequireDefault(require("react-dom"));var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");/* global document */const baseTheme={"context":"Szmbbz","ad":"Ah-Nsc","hoc":"Wki41G","overlay":"ye2BZo","container":"gyZ4rc"};const S={"scrollingDisabledByModal":"_5fRFtF"};/**
|
|
2
2
|
* The `<Modal>` component implements a simple themeable modal window, wrapped
|
|
3
3
|
* into the default theme. `<BaseModal>` exposes the base non-themed component.
|
|
4
4
|
* **Children:** Component children are rendered as the modal content.
|
|
@@ -10,5 +10,5 @@
|
|
|
10
10
|
* @param {ModalTheme} [props.theme] _Ad hoc_ theme.
|
|
11
11
|
*/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.
|
|
12
12
|
(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.
|
|
13
|
-
(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]
|
|
13
|
+
(0,_react.useEffect)(()=>{if(!dontDisableScrolling){document.body.classList.add(S.scrollingDisabledByModal)}return()=>{if(!dontDisableScrolling){document.body.classList.remove(S.scrollingDisabledByModal)}}},[dontDisableScrolling]);const focusLast=(0,_react.useMemo)(()=>/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{onFocus:()=>{const elems=containerRef.current?.querySelectorAll("*");for(let i=elems.length-1;i>=0;--i){elems[i]?.focus();if(document.activeElement===elems[i])return}overlayRef.current?.focus()}/* eslint-disable jsx-a11y/no-noninteractive-tabindex */,tabIndex:0/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}),[]);return portal?/*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[focusLast,/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{"aria-label":"Cancel",className:theme.overlay,onClick:e=>{if(onCancel){onCancel();e.stopPropagation()}},onKeyDown:e=>{if(e.key==="Escape"&&onCancel){onCancel();e.stopPropagation()}},ref:node=>{if(node&&node!==overlayRef.current){overlayRef.current=node;node.focus()}},role:"button",tabIndex:0}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{"aria-modal":"true",className:theme.container,onClick:e=>e.stopPropagation(),onWheel:event=>event.stopPropagation(),ref:containerRef,role:"dialog",style:containerStyle,children:children}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{onFocus:()=>{overlayRef.current?.focus()}/* eslint-disable jsx-a11y/no-noninteractive-tabindex */,tabIndex:0/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}),focusLast]}),portal):null};exports.BaseModal=BaseModal;var _default=exports.default=(0,_reactThemes.default)(BaseModal,"Modal",baseTheme);/* Non-themed version of the Modal. */
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_reactDom","_interopRequireDefault","_propTypes","_reactThemes","_jsxRuntime","baseTheme","S","validThemeKeys","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","appendChild","removeChild","window","addEventListener","removeEventListener","classList","add","scrollingDisabledByModal","remove","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event","style","exports","ThemedModal","themed","propTypes","PT","bool","shape","func","themeType","isRequired","_default","default"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport {\n type ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport PT from 'prop-types';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\nconst validThemeKeys = ['container', 'overlay'] as const;\n\ntype PropsT = {\n cancelOnScrolling?: boolean;\n children?: ReactNode;\n containerStyle?: React.CSSProperties;\n dontDisableScrolling?: boolean;\n onCancel?: () => void;\n theme: Theme<typeof validThemeKeys>;\n};\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal: React.FunctionComponent<PropsT> = ({\n cancelOnScrolling,\n children,\n containerStyle,\n dontDisableScrolling,\n onCancel,\n theme,\n}) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const overlayRef = useRef<HTMLDivElement | null>(null);\n const [portal, setPortal] = useState<HTMLDivElement>();\n\n useEffect(() => {\n const p = document.createElement('div');\n document.body.appendChild(p);\n setPortal(p);\n return () => {\n document.body.removeChild(p);\n };\n }, []);\n\n // Sets up modal cancellation of scrolling, if opted-in.\n useEffect(() => {\n if (cancelOnScrolling && onCancel) {\n window.addEventListener('scroll', onCancel);\n window.addEventListener('wheel', onCancel);\n }\n return () => {\n if (cancelOnScrolling && onCancel) {\n window.removeEventListener('scroll', onCancel);\n window.removeEventListener('wheel', onCancel);\n }\n };\n }, [cancelOnScrolling, onCancel]);\n\n // Disables window scrolling, if it is not opted-out.\n useEffect(() => {\n if (!dontDisableScrolling) {\n document.body.classList.add(S.scrollingDisabledByModal);\n }\n return () => {\n if (!dontDisableScrolling) {\n document.body.classList.remove(S.scrollingDisabledByModal);\n }\n };\n }, [dontDisableScrolling]);\n\n const focusLast = useMemo(() => (\n <div\n onFocus={() => {\n const elems = containerRef.current?.querySelectorAll('*') as NodeListOf<HTMLElement>;\n for (let i = elems.length - 1; i >= 0; --i) {\n elems[i].focus();\n if (document.activeElement === elems[i]) return;\n }\n overlayRef.current?.focus();\n }}\n /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n tabIndex={0}\n /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n />\n ), []);\n\n return portal ? ReactDom.createPortal(\n (\n <>\n {focusLast}\n <div\n aria-label=\"Cancel\"\n className={theme.overlay}\n onClick={(e) => {\n if (onCancel) {\n onCancel();\n e.stopPropagation();\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Escape' && onCancel) {\n onCancel();\n e.stopPropagation();\n }\n }}\n ref={(node) => {\n if (node && node !== overlayRef.current) {\n overlayRef.current = node;\n node.focus();\n }\n }}\n role=\"button\"\n tabIndex={0}\n />\n {\n // NOTE: These rules are disabled because our intention is to keep\n // the element non-interactive (thus not on the keyboard focus chain),\n // and it has `onClick` handler merely to stop propagation of click\n // events to its parent container. This is needed because, for example\n // when the modal is wrapped into an interactive element we don't want\n // any clicks inside the modal to bubble-up to that parent element\n // (because visually and logically the modal dialog does not belong\n // to its parent container, where it technically belongs from\n // the HTML mark-up perpective).\n /* eslint-disable jsx-a11y/click-events-have-key-events,\n jsx-a11y/no-noninteractive-element-interactions */\n }\n <div\n aria-modal=\"true\"\n className={theme.container}\n onClick={(e) => e.stopPropagation()}\n onWheel={(event) => event.stopPropagation()}\n ref={containerRef}\n role=\"dialog\"\n style={containerStyle}\n >\n {children}\n </div>\n {/* eslint-enable jsx-a11y/click-events-have-key-events,\n jsx-a11y/no-noninteractive-element-interactions */}\n <div\n onFocus={() => {\n overlayRef.current?.focus();\n }}\n /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n tabIndex={0}\n /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n />\n {focusLast}\n </>\n ),\n portal,\n ) : null;\n};\n\nconst ThemedModal = themed(\n BaseModal,\n 'Modal',\n validThemeKeys,\n baseTheme,\n);\n\nBaseModal.propTypes = {\n cancelOnScrolling: PT.bool,\n children: PT.node,\n containerStyle: PT.shape({}),\n dontDisableScrolling: PT.bool,\n onCancel: PT.func,\n theme: ThemedModal.themeType.isRequired,\n};\n\nexport default ThemedModal;\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_reactDom","_interopRequireDefault","_reactThemes","_jsxRuntime","baseTheme","S","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","theme","containerRef","useRef","overlayRef","portal","setPortal","useState","useEffect","p","document","createElement","body","appendChild","removeChild","window","addEventListener","removeEventListener","classList","add","scrollingDisabledByModal","remove","focusLast","useMemo","jsx","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","ReactDom","createPortal","jsxs","Fragment","className","overlay","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event","style","exports","_default","default","themed"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["/* global document */\n\nimport {\n type ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\ntype PropsT = {\n cancelOnScrolling?: boolean;\n children?: ReactNode;\n containerStyle?: React.CSSProperties;\n dontDisableScrolling?: boolean;\n onCancel?: () => void;\n theme: Theme<'container' | 'overlay'>;\n};\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal: React.FunctionComponent<PropsT> = ({\n cancelOnScrolling,\n children,\n containerStyle,\n dontDisableScrolling,\n onCancel,\n theme,\n}) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const overlayRef = useRef<HTMLDivElement | null>(null);\n const [portal, setPortal] = useState<HTMLDivElement>();\n\n useEffect(() => {\n const p = document.createElement('div');\n document.body.appendChild(p);\n setPortal(p);\n return () => {\n document.body.removeChild(p);\n };\n }, []);\n\n // Sets up modal cancellation of scrolling, if opted-in.\n useEffect(() => {\n if (cancelOnScrolling && onCancel) {\n window.addEventListener('scroll', onCancel);\n window.addEventListener('wheel', onCancel);\n }\n return () => {\n if (cancelOnScrolling && onCancel) {\n window.removeEventListener('scroll', onCancel);\n window.removeEventListener('wheel', onCancel);\n }\n };\n }, [cancelOnScrolling, onCancel]);\n\n // Disables window scrolling, if it is not opted-out.\n useEffect(() => {\n if (!dontDisableScrolling) {\n document.body.classList.add(S.scrollingDisabledByModal);\n }\n return () => {\n if (!dontDisableScrolling) {\n document.body.classList.remove(S.scrollingDisabledByModal);\n }\n };\n }, [dontDisableScrolling]);\n\n const focusLast = useMemo(() => (\n <div\n onFocus={() => {\n const elems = containerRef.current?.querySelectorAll('*') as NodeListOf<HTMLElement>;\n for (let i = elems.length - 1; i >= 0; --i) {\n elems[i]?.focus();\n if (document.activeElement === elems[i]) return;\n }\n overlayRef.current?.focus();\n }}\n /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n tabIndex={0}\n /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n />\n ), []);\n\n return portal ? ReactDom.createPortal(\n (\n <>\n {focusLast}\n <div\n aria-label=\"Cancel\"\n className={theme.overlay}\n onClick={(e) => {\n if (onCancel) {\n onCancel();\n e.stopPropagation();\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Escape' && onCancel) {\n onCancel();\n e.stopPropagation();\n }\n }}\n ref={(node) => {\n if (node && node !== overlayRef.current) {\n overlayRef.current = node;\n node.focus();\n }\n }}\n role=\"button\"\n tabIndex={0}\n />\n {\n // NOTE: These rules are disabled because our intention is to keep\n // the element non-interactive (thus not on the keyboard focus chain),\n // and it has `onClick` handler merely to stop propagation of click\n // events to its parent container. This is needed because, for example\n // when the modal is wrapped into an interactive element we don't want\n // any clicks inside the modal to bubble-up to that parent element\n // (because visually and logically the modal dialog does not belong\n // to its parent container, where it technically belongs from\n // the HTML mark-up perpective).\n /* eslint-disable jsx-a11y/click-events-have-key-events,\n jsx-a11y/no-noninteractive-element-interactions */\n }\n <div\n aria-modal=\"true\"\n className={theme.container}\n onClick={(e) => e.stopPropagation()}\n onWheel={(event) => event.stopPropagation()}\n ref={containerRef}\n role=\"dialog\"\n style={containerStyle}\n >\n {children}\n </div>\n {/* eslint-enable jsx-a11y/click-events-have-key-events,\n jsx-a11y/no-noninteractive-element-interactions */}\n <div\n onFocus={() => {\n overlayRef.current?.focus();\n }}\n /* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n tabIndex={0}\n /* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n />\n {focusLast}\n </>\n ),\n portal,\n ) : null;\n};\n\nexport default themed(BaseModal, 'Modal', baseTheme);\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const baseTheme={"context":"m4mL-M","ad":"m3-mdC","hoc":"J15Z4H","container":"T3cuHB","mainPanel":"pPlQO2","sidePanel":"lqNh4h"};/**
|
|
2
2
|
* Simple and themeable page layout. It keeps the main content centered in
|
|
3
3
|
* a column of limited width, which fills entire viewport on small screens
|
|
4
4
|
* (under `$screen-md = 1024px` size). At larger screens the column keeps
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
* @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.
|
|
13
13
|
* @param {...any} [props....]
|
|
14
14
|
* [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
|
|
15
|
-
*/const PageLayout=({children,leftSidePanelContent,rightSidePanelContent,theme})=>/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.container,children:[/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:[theme.sidePanel,theme.leftSidePanel].join(" "),children:leftSidePanelContent}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.mainPanel,children:children}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:[theme.sidePanel,theme.rightSidePanel].join(" "),children:rightSidePanelContent})]});
|
|
15
|
+
*/const PageLayout=({children,leftSidePanelContent,rightSidePanelContent,theme})=>/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.container,children:[/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:[theme.sidePanel,theme.leftSidePanel].join(" "),children:leftSidePanelContent}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.mainPanel,children:children}),/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:[theme.sidePanel,theme.rightSidePanel].join(" "),children:rightSidePanelContent})]});var _default=exports.default=(0,_reactThemes.default)(PageLayout,"PageLayout",baseTheme);
|
|
16
16
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["_reactThemes","_interopRequireDefault","require","_jsxRuntime","baseTheme","PageLayout","children","leftSidePanelContent","rightSidePanelContent","theme","jsxs","className","container","jsx","sidePanel","leftSidePanel","join","mainPanel","rightSidePanel","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/PageLayout/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\n\ntype ThemeKeyT =\n | 'container'\n | 'leftSidePanel'\n | 'mainPanel'\n | 'rightSidePanel'\n | 'sidePanel';\n\ntype PropsT = {\n children?: ReactNode;\n leftSidePanelContent?: ReactNode;\n rightSidePanelContent?: ReactNode;\n theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Simple and themeable page layout. It keeps the main content centered in\n * a column of limited width, which fills entire viewport on small screens\n * (under `$screen-md = 1024px` size). At larger screens the column keeps\n * `$screen-md` size, and it is centered at the page, surrounded by side\n * panels, where additional content can be displayed.\n *\n * **Children:** Component children are rendered as the content of main panel.\n * @param {object} [props] Component properties.\n * @param {Node} [props.leftSidePanelContent] The content for left side panel.\n * @param {Node} [props.rightSidePanelContent] The content for right side panel.\n * @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.\n * @param {...any} [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst PageLayout: React.FunctionComponent<PropsT> = ({\n children,\n leftSidePanelContent,\n rightSidePanelContent,\n theme,\n}) => (\n <div className={theme.container}>\n <div className={[theme.sidePanel, theme.leftSidePanel].join(' ')}>\n {leftSidePanelContent}\n </div>\n <div className={theme.mainPanel}>\n {children}\n </div>\n <div className={[theme.sidePanel, theme.rightSidePanel].join(' ')}>\n {rightSidePanelContent}\n </div>\n </div>\n);\n\nexport default themed(PageLayout, 'PageLayout', baseTheme);\n"],"mappings":"gLAEA,IAAAA,YAAA,CAAAC,sBAAA,CAAAC,OAAA,8BAA8D,IAAAC,WAAA,CAAAD,OAAA,4BAAAE,SAAA,kHAkB9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,KAAM,CAAAC,UAA2C,CAAGA,CAAC,CACnDC,QAAQ,CACRC,oBAAoB,CACpBC,qBAAqB,CACrBC,KACF,CAAC,gBACC,GAAAN,WAAA,CAAAO,IAAA,SAAKC,SAAS,CAAEF,KAAK,CAACG,SAAU,CAAAN,QAAA,eAC9B,GAAAH,WAAA,CAAAU,GAAA,SAAKF,SAAS,CAAE,CAACF,KAAK,CAACK,SAAS,CAAEL,KAAK,CAACM,aAAa,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE,CAAAV,QAAA,CAC9DC,oBAAoB,CAClB,CAAC,cACN,GAAAJ,WAAA,CAAAU,GAAA,SAAKF,SAAS,CAAEF,KAAK,CAACQ,SAAU,CAAAX,QAAA,CAC7BA,QAAQ,CACN,CAAC,cACN,GAAAH,WAAA,CAAAU,GAAA,SAAKF,SAAS,CAAE,CAACF,KAAK,CAACK,SAAS,CAAEL,KAAK,CAACS,cAAc,CAAC,CAACF,IAAI,CAAC,GAAG,CAAE,CAAAV,QAAA,CAC/DE,qBAAqB,CACnB,CAAC,EACH,CACN,CAAC,IAAAW,QAAA,CAAAC,OAAA,CAAAC,OAAA,CAEa,GAAAC,oBAAM,EAACjB,UAAU,CAAE,YAAY,CAAED,SAAS,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=require("react");var
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=require("react");var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"KVPc7g","ad":"z2GQ0Z","hoc":"_8R1Qdj","container":"dzMVIB","textarea":"zd-OFg","hidden":"GiHBXI"};const TextArea=({disabled,onChange,onKeyDown,placeholder,theme,value})=>{const hiddenAreaRef=(0,_react.useRef)(null);const[height,setHeight]=(0,_react.useState)();const[localValue,setLocalValue]=(0,_react.useState)(value||"");if(value!==undefined&&localValue!==value)setLocalValue(value);// This resizes text area's height when its width is changed for any reason.
|
|
2
2
|
(0,_react.useEffect)(()=>{const el=hiddenAreaRef.current;if(!el)return undefined;const cb=()=>{setHeight(el.scrollHeight)};const observer=new ResizeObserver(cb);observer.observe(el);return()=>{observer.disconnect()}},[]);// This resizes the text area when its content is modified.
|
|
3
3
|
(0,_react.useEffect)(()=>{const el=hiddenAreaRef.current;if(el)setHeight(el.scrollHeight)},[localValue]);return/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.container,children:[/*#__PURE__*/(0,_jsxRuntime.jsx)("textarea",{// This text area is hidden underneath the primary one below,
|
|
4
4
|
// and it is used for text measurements, to implement auto-scaling
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
readOnly:true,ref:hiddenAreaRef,className:`${theme.textarea} ${theme.hidden}`,value:localValue}),/*#__PURE__*/(0,_jsxRuntime.jsx)("textarea",{disabled:disabled// When value is "undefined" the text area is not-managed, and we should
|
|
7
7
|
// manage it internally for the measurement / resizing functionality
|
|
8
8
|
// to work.
|
|
9
|
-
,onChange:value===undefined?e=>{setLocalValue(e.target.value)}:onChange,onKeyDown:onKeyDown,placeholder:placeholder,style:{height},className:theme.textarea,value:localValue})]})};
|
|
9
|
+
,onChange:value===undefined?e=>{setLocalValue(e.target.value)}:onChange,onKeyDown:onKeyDown,placeholder:placeholder,style:{height},className:theme.textarea,value:localValue})]})};var _default=exports.default=(0,_reactThemes.default)(TextArea,"TextArea",defaultTheme);
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","TextArea","disabled","onChange","onKeyDown","placeholder","theme","value","hiddenAreaRef","useRef","height","setHeight","useState","localValue","setLocalValue","undefined","useEffect","el","current","cb","scrollHeight","observer","ResizeObserver","observe","disconnect","jsxs","className","container","children","jsx","readOnly","ref","textarea","hidden","e","target","style","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/TextArea/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype ThemeKeyT =\n | 'container'\n | 'hidden'\n | 'textarea';\n\ntype Props = {\n disabled?: boolean;\n onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n placeholder?: string;\n theme: Theme<ThemeKeyT>;\n value?: string;\n};\n\nconst TextArea: React.FunctionComponent<Props> = ({\n disabled,\n onChange,\n onKeyDown,\n placeholder,\n theme,\n value,\n}) => {\n const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);\n const [height, setHeight] = useState<number | undefined>();\n\n const [localValue, setLocalValue] = useState(value || '');\n if (value !== undefined && localValue !== value) setLocalValue(value);\n\n // This resizes text area's height when its width is changed for any reason.\n useEffect(() => {\n const el = hiddenAreaRef.current;\n if (!el) return undefined;\n\n const cb = () => {\n setHeight(el.scrollHeight);\n };\n const observer = new ResizeObserver(cb);\n observer.observe(el);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n // This resizes the text area when its content is modified.\n useEffect(() => {\n const el = hiddenAreaRef.current;\n if (el) setHeight(el.scrollHeight);\n }, [localValue]);\n\n return (\n <div className={theme.container}>\n <textarea\n // This text area is hidden underneath the primary one below,\n // and it is used for text measurements, to implement auto-scaling\n // of the primary textarea's height.\n readOnly\n ref={hiddenAreaRef}\n className={`${theme.textarea} ${theme.hidden}`}\n value={localValue}\n />\n <textarea\n disabled={disabled}\n // When value is \"undefined\" the text area is not-managed, and we should\n // manage it internally for the measurement / resizing functionality\n // to work.\n onChange={value === undefined ? ((e) => {\n setLocalValue(e.target.value);\n }) : onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n style={{ height }}\n className={theme.textarea}\n value={localValue}\n />\n </div>\n );\n};\n\nexport default themed(TextArea, 'TextArea', defaultTheme);\n"],"mappings":"gLAAA,IAAAA,MAAA,CAAAC,OAAA,UAEA,IAAAC,YAAA,CAAAC,sBAAA,CAAAF,OAAA,8BAA8D,IAAAG,WAAA,CAAAH,OAAA,4BAAAI,YAAA,+GAkB9D,KAAM,CAAAC,QAAwC,CAAGA,CAAC,CAChDC,QAAQ,CACRC,QAAQ,CACRC,SAAS,CACTC,WAAW,CACXC,KAAK,CACLC,KACF,CAAC,GAAK,CACJ,KAAM,CAAAC,aAAa,CAAG,GAAAC,aAAM,EAAsB,IAAI,CAAC,CACvD,KAAM,CAACC,MAAM,CAAEC,SAAS,CAAC,CAAG,GAAAC,eAAQ,EAAqB,CAAC,CAE1D,KAAM,CAACC,UAAU,CAAEC,aAAa,CAAC,CAAG,GAAAF,eAAQ,EAACL,KAAK,EAAI,EAAE,CAAC,CACzD,GAAIA,KAAK,GAAKQ,SAAS,EAAIF,UAAU,GAAKN,KAAK,CAAEO,aAAa,CAACP,KAAK,CAAC,CAErE;AACA,GAAAS,gBAAS,EAAC,IAAM,CACd,KAAM,CAAAC,EAAE,CAAGT,aAAa,CAACU,OAAO,CAChC,GAAI,CAACD,EAAE,CAAE,MAAO,CAAAF,SAAS,CAEzB,KAAM,CAAAI,EAAE,CAAGA,CAAA,GAAM,CACfR,SAAS,CAACM,EAAE,CAACG,YAAY,CAC3B,CAAC,CACD,KAAM,CAAAC,QAAQ,CAAG,GAAI,CAAAC,cAAc,CAACH,EAAE,CAAC,CACvCE,QAAQ,CAACE,OAAO,CAACN,EAAE,CAAC,CAEpB,MAAO,IAAM,CACXI,QAAQ,CAACG,UAAU,CAAC,CACtB,CACF,CAAC,CAAE,EAAE,CAAC,CAEN;AACA,GAAAR,gBAAS,EAAC,IAAM,CACd,KAAM,CAAAC,EAAE,CAAGT,aAAa,CAACU,OAAO,CAChC,GAAID,EAAE,CAAEN,SAAS,CAACM,EAAE,CAACG,YAAY,CACnC,CAAC,CAAE,CAACP,UAAU,CAAC,CAAC,CAEhB,mBACE,GAAAd,WAAA,CAAA0B,IAAA,SAAKC,SAAS,CAAEpB,KAAK,CAACqB,SAAU,CAAAC,QAAA,eAC9B,GAAA7B,WAAA,CAAA8B,GAAA,cACE;AACA;AACA;AACAC,QAAQ,MACRC,GAAG,CAAEvB,aAAc,CACnBkB,SAAS,CAAE,GAAGpB,KAAK,CAAC0B,QAAQ,IAAI1B,KAAK,CAAC2B,MAAM,EAAG,CAC/C1B,KAAK,CAAEM,UAAW,CACnB,CAAC,cACF,GAAAd,WAAA,CAAA8B,GAAA,cACE3B,QAAQ,CAAEA,QACV;AACA;AACA;AAAA,CACAC,QAAQ,CAAEI,KAAK,GAAKQ,SAAS,CAAKmB,CAAC,EAAK,CACtCpB,aAAa,CAACoB,CAAC,CAACC,MAAM,CAAC5B,KAAK,CAC9B,CAAC,CAAIJ,QAAS,CACdC,SAAS,CAAEA,SAAU,CACrBC,WAAW,CAAEA,WAAY,CACzB+B,KAAK,CAAE,CAAE1B,MAAO,CAAE,CAClBgB,SAAS,CAAEpB,KAAK,CAAC0B,QAAS,CAC1BzB,KAAK,CAAEM,UAAW,CACnB,CAAC,EACC,CAET,CAAC,CAAC,IAAAwB,QAAA,CAAAC,OAAA,CAAAC,OAAA,CAEa,GAAAC,oBAAM,EAACvC,QAAQ,CAAE,UAAU,CAAED,YAAY,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"uIObt7","ad":"XIxe9o","hoc":"YOyORH","bouncing":"TJe-6j","container":"_7zdld4","circle":"dBrB4g"}
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"uIObt7","ad":"XIxe9o","hoc":"YOyORH","bouncing":"TJe-6j","container":"_7zdld4","circle":"dBrB4g"};/**
|
|
2
2
|
* Throbber is an "action in progress" indicator, which renders
|
|
3
3
|
* three bouncing circles as a simple pending activity indicator,
|
|
4
4
|
* and can be further themed to a certain degree.
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
* @param {ThrobberTheme} [props.theme] _Ad hoc_ theme.
|
|
7
7
|
* @param {...any} [props....]
|
|
8
8
|
* [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
|
|
9
|
-
*/const Throbber=({theme})=>/*#__PURE__*/(0,_jsxRuntime.jsxs)("span",{className:theme.container,children:[/*#__PURE__*/(0,_jsxRuntime.jsx)("span",{className:theme.circle}),/*#__PURE__*/(0,_jsxRuntime.jsx)("span",{className:theme.circle}),/*#__PURE__*/(0,_jsxRuntime.jsx)("span",{className:theme.circle})]});
|
|
9
|
+
*/const Throbber=({theme})=>/*#__PURE__*/(0,_jsxRuntime.jsxs)("span",{className:theme.container,children:[/*#__PURE__*/(0,_jsxRuntime.jsx)("span",{className:theme.circle}),/*#__PURE__*/(0,_jsxRuntime.jsx)("span",{className:theme.circle}),/*#__PURE__*/(0,_jsxRuntime.jsx)("span",{className:theme.circle})]});var _default=exports.default=(0,_reactThemes.default)(Throbber,"Throbber",defaultTheme);
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_reactThemes","_interopRequireDefault","require","_jsxRuntime","defaultTheme","
|
|
1
|
+
{"version":3,"file":"index.js","names":["_reactThemes","_interopRequireDefault","require","_jsxRuntime","defaultTheme","Throbber","theme","jsxs","className","container","children","jsx","circle","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/Throbber/index.tsx"],"sourcesContent":["import themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT =\n | 'bouncing'\n | 'circle'\n | 'container';\n\ntype PropsT = {\n theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Throbber is an \"action in progress\" indicator, which renders\n * three bouncing circles as a simple pending activity indicator,\n * and can be further themed to a certain degree.\n * @param {object} [props] Component properties.\n * @param {ThrobberTheme} [props.theme] _Ad hoc_ theme.\n * @param {...any} [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst Throbber: React.FunctionComponent<PropsT> = ({ theme }) => (\n <span className={theme.container}>\n <span className={theme.circle} />\n <span className={theme.circle} />\n <span className={theme.circle} />\n </span>\n);\n\nexport default themed(Throbber, 'Throbber', defaultTheme);\n"],"mappings":"gLAAA,IAAAA,YAAA,CAAAC,sBAAA,CAAAC,OAAA,8BAA8D,IAAAC,WAAA,CAAAD,OAAA,4BAAAE,YAAA,+GAa9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,KAAM,CAAAC,QAAyC,CAAGA,CAAC,CAAEC,KAAM,CAAC,gBAC1D,GAAAH,WAAA,CAAAI,IAAA,UAAMC,SAAS,CAAEF,KAAK,CAACG,SAAU,CAAAC,QAAA,eAC/B,GAAAP,WAAA,CAAAQ,GAAA,UAAMH,SAAS,CAAEF,KAAK,CAACM,MAAO,CAAE,CAAC,cACjC,GAAAT,WAAA,CAAAQ,GAAA,UAAMH,SAAS,CAAEF,KAAK,CAACM,MAAO,CAAE,CAAC,cACjC,GAAAT,WAAA,CAAAQ,GAAA,UAAMH,SAAS,CAAEF,KAAK,CAACM,MAAO,CAAE,CAAC,EAC7B,CACP,CAAC,IAAAC,QAAA,CAAAC,OAAA,CAAAC,OAAA,CAEa,GAAAC,oBAAM,EAACX,QAAQ,CAAE,UAAU,CAAED,YAAY,CAAC","ignoreList":[]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.PLACEMENTS=void 0;var _react=require("react");var _reactDom=require("react-dom");/**
|
|
2
2
|
* The actual tooltip component. It is rendered outside the regular document
|
|
3
3
|
* hierarchy, and with sub-components managed without React to achieve the best
|
|
4
4
|
* performance during animation.
|
|
5
5
|
*/ /* global document, window */ /* Valid placements of the rendered tooltip. They will be overriden when
|
|
6
|
-
* necessary to fit the tooltip within the viewport. */let PLACEMENTS=exports.PLACEMENTS=/*#__PURE__*/function(PLACEMENTS){PLACEMENTS["ABOVE_CURSOR"]="ABOVE_CURSOR";PLACEMENTS["ABOVE_ELEMENT"]="ABOVE_ELEMENT";PLACEMENTS["BELOW_CURSOR"]="BELOW_CURSOR";PLACEMENTS["BELOW_ELEMENT"]="BELOW_ELEMENT";return PLACEMENTS}({});const ARROW_STYLE_DOWN=["border-bottom-color:transparent","border-left-color:transparent","border-right-color:transparent"].join(";");const ARROW_STYLE_UP=["border-top-color:transparent","border-left-color:transparent","border-right-color:transparent"].join(";")
|
|
6
|
+
* necessary to fit the tooltip within the viewport. */let PLACEMENTS=exports.PLACEMENTS=/*#__PURE__*/function(PLACEMENTS){PLACEMENTS["ABOVE_CURSOR"]="ABOVE_CURSOR";PLACEMENTS["ABOVE_ELEMENT"]="ABOVE_ELEMENT";PLACEMENTS["BELOW_CURSOR"]="BELOW_CURSOR";PLACEMENTS["BELOW_ELEMENT"]="BELOW_ELEMENT";return PLACEMENTS}({});const ARROW_STYLE_DOWN=["border-bottom-color:transparent","border-left-color:transparent","border-right-color:transparent"].join(";");const ARROW_STYLE_UP=["border-top-color:transparent","border-left-color:transparent","border-right-color:transparent"].join(";");/**
|
|
7
7
|
* Creates tooltip components.
|
|
8
8
|
* @ignore
|
|
9
9
|
* @param {object} theme Themes to use for tooltip container, arrow,
|
|
@@ -107,5 +107,5 @@ const{current:heap}=(0,_react.useRef)({lastElement:undefined,lastPageX:0,lastPag
|
|
|
107
107
|
// happen now just because the mouse movements themselves are not causing
|
|
108
108
|
// the component re-rendering, thus dependencies of this effect are not
|
|
109
109
|
// really re-evaluated.
|
|
110
|
-
heap.lastPageX,heap.lastPageY,heap.lastPlacement,heap.lastElement]);return components?/*#__PURE__*/(0,_reactDom.createPortal)(children,components.content):null});
|
|
110
|
+
heap.lastPageX,heap.lastPageY,heap.lastPlacement,heap.lastElement]);return components?/*#__PURE__*/(0,_reactDom.createPortal)(children,components.content):null});var _default=exports.default=Tooltip;
|
|
111
111
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["_react","require","_reactDom","_propTypes","_interopRequireDefault","PLACEMENTS","exports","ARROW_STYLE_DOWN","join","ARROW_STYLE_UP","validThemeKeys","createTooltipComponents","theme","arrow","document","createElement","setAttribute","content","container","appendChild","body","calcTooltipRects","tooltip","getBoundingClientRect","calcViewportRect","scrollX","scrollY","window","documentElement","clientHeight","clientWidth","left","right","top","bottom","calcPositionAboveXY","x","y","tooltipRects","arrowX","width","arrowY","height","containerX","containerY","baseArrowStyle","setComponentPositions","pageX","pageY","placement","element","viewportRect","pos","Math","max","maxX","min","containerStyle","arrowStyle","Tooltip","forwardRef","children","ref","current","heap","useRef","lastElement","undefined","lastPageX","lastPageY","lastPlacement","components","setComponents","useState","pointTo","useImperativeHandle","useEffect","removeChild","createPortal","propTypes","PT","node","shape","isRequired","_default","default"],"sources":["../../../../../src/shared/components/WithTooltip/Tooltip.tsx"],"sourcesContent":["/**\n * The actual tooltip component. It is rendered outside the regular document\n * hierarchy, and with sub-components managed without React to achieve the best\n * performance during animation.\n */\n/* global document, window */\n\nimport {\n type ReactNode,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport PT from 'prop-types';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\n/* Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport. */\nexport enum PLACEMENTS {\n ABOVE_CURSOR = 'ABOVE_CURSOR',\n ABOVE_ELEMENT = 'ABOVE_ELEMENT',\n BELOW_CURSOR = 'BELOW_CURSOR',\n BELOW_ELEMENT = 'BELOW_ELEMENT',\n}\n\nconst ARROW_STYLE_DOWN = [\n 'border-bottom-color:transparent',\n 'border-left-color:transparent',\n 'border-right-color:transparent',\n].join(';');\n\nconst ARROW_STYLE_UP = [\n 'border-top-color:transparent',\n 'border-left-color:transparent',\n 'border-right-color:transparent',\n].join(';');\n\ntype ComponentsT = {\n container: HTMLDivElement;\n arrow: HTMLDivElement;\n content: HTMLDivElement;\n};\n\ntype HeapT = {\n lastElement?: HTMLElement;\n lastPageX: number;\n lastPageY: number;\n lastPlacement?: PLACEMENTS | undefined;\n};\n\nexport const validThemeKeys = [\n 'appearance',\n 'arrow',\n 'content',\n 'container',\n] as const;\n\ntype TooltipThemeT = Theme<typeof validThemeKeys>;\n\n/**\n * Creates tooltip components.\n * @ignore\n * @param {object} theme Themes to use for tooltip container, arrow,\n * and content.\n * @return {object} Object with DOM references to the container components:\n * container, arrow, content.\n */\nfunction createTooltipComponents(theme: TooltipThemeT): ComponentsT {\n const arrow = document.createElement('div');\n if (theme.arrow) arrow.setAttribute('class', theme.arrow);\n\n const content = document.createElement('div');\n if (theme.content) content.setAttribute('class', theme.content);\n\n const container = document.createElement('div');\n if (theme.container) container.setAttribute('class', theme.container);\n\n container.appendChild(arrow);\n container.appendChild(content);\n document.body.appendChild(container);\n\n return { container, arrow, content };\n}\n\ntype TooltipRectsT = {\n arrow: DOMRect;\n container: DOMRect;\n};\n\n/**\n * Generates bounding client rectangles for tooltip components.\n * @ignore\n * @param tooltip DOM references to the tooltip components.\n * @param tooltip.arrow\n * @param tooltip.container\n * @return Object holding tooltip rectangles in\n * two fields.\n */\nfunction calcTooltipRects(tooltip: ComponentsT): TooltipRectsT {\n return {\n arrow: tooltip.arrow.getBoundingClientRect(),\n container: tooltip.container.getBoundingClientRect(),\n };\n}\n\n/**\n * Calculates the document viewport size.\n * @ignore\n * @return {{x, y, width, height}}\n */\nfunction calcViewportRect() {\n const { scrollX, scrollY } = window;\n const { documentElement: { clientHeight, clientWidth } } = document;\n return {\n left: scrollX,\n right: scrollX + clientWidth,\n top: scrollY,\n bottom: scrollY + clientHeight,\n };\n}\n\n/**\n * Calculates tooltip and arrow positions for the placement just above\n * the cursor.\n * @ignore\n * @param {number} x Cursor page-x position.\n * @param {number} y Cursor page-y position.\n * @param {object} tooltipRects Bounding client rectangles of tooltip parts.\n * @param {object} tooltipRects.arrow\n * @param {object} tooltipRects.container\n * @return {object} Contains the following fields:\n * - {number} arrowX\n * - {number} arrowY\n * - {number} containerX\n * - {number} containerY\n * - {string} baseArrowStyle\n */\nfunction calcPositionAboveXY(\n x: number,\n y: number,\n tooltipRects: TooltipRectsT,\n) {\n const { arrow, container } = tooltipRects;\n return {\n arrowX: 0.5 * (container.width - arrow.width),\n arrowY: container.height,\n containerX: x - container.width / 2,\n containerY: y - container.height - arrow.height / 1.5,\n\n // TODO: Instead of already setting the base style here, we should\n // introduce a set of constants for arrow directions, which will help\n // to do checks dependant on the arrow direction.\n baseArrowStyle: ARROW_STYLE_DOWN,\n };\n}\n\n/*\nconst HIT = {\n NONE: false,\n LEFT: 'LEFT',\n RIGHT: 'RIGHT',\n TOP: 'TOP',\n BOTTOM: 'BOTTOM',\n};\n*/\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n/*\nfunction checkViewportFit(pos, tooltipRects, viewportRect) {\n const { containerX, containerY } = pos;\n if (containerX < viewportRect.left + 6) return HIT.LEFT;\n if (containerX > viewportRect.right - 6) return HIT.RIGHT;\n return HIT.NONE;\n}\n*/\n\n/**\n * Shifts tooltip horizontally to fit into the viewport, while keeping\n * the arrow pointed to the XY point.\n * @param {number} x\n * @param {number} y\n * @param {object} pos\n * @param {number} pageXOffset\n * @param {number} pageXWidth\n */\n/*\nfunction xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {\n if (pos.containerX < pageXOffset + 6) {\n pos.containerX = pageXOffset + 6;\n pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);\n } else {\n const maxX = pageXOffset + docRect.width - containerRect.width - 6;\n if (containerX > maxX) {\n containerX = maxX;\n arrowX = Math.min(\n containerRect.width - 6,\n pageX - containerX - arrowRect.width / 2,\n );\n }\n }\n}\n*/\n\n/**\n * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param pageX\n * @param pageY\n * @param placement\n * @param element DOM reference to the element wrapped by the tooltip.\n * @param tooltip\n * @param tooltip.arrow DOM reference to the tooltip arrow.\n * @param tooltip.container DOM reference to the tooltip container.\n */\nfunction setComponentPositions(\n pageX: number,\n pageY: number,\n placement: PLACEMENTS | undefined,\n element: HTMLElement | undefined,\n tooltip: ComponentsT,\n) {\n const tooltipRects = calcTooltipRects(tooltip);\n const viewportRect = calcViewportRect();\n\n /* Default container coords: tooltip at the top. */\n const pos = calcPositionAboveXY(pageX, pageY, tooltipRects);\n\n if (pos.containerX < viewportRect.left + 6) {\n pos.containerX = viewportRect.left + 6;\n pos.arrowX = Math.max(\n 6,\n pageX - pos.containerX - tooltipRects.arrow.width / 2,\n );\n } else {\n const maxX = viewportRect.right - 6 - tooltipRects.container.width;\n if (pos.containerX > maxX) {\n pos.containerX = maxX;\n pos.arrowX = Math.min(\n tooltipRects.container.width - 6,\n pageX - pos.containerX - tooltipRects.arrow.width / 2,\n );\n }\n }\n\n /* If tooltip has not enough space on top - make it bottom tooltip. */\n if (pos.containerY < viewportRect.top + 6) {\n pos.containerY += tooltipRects.container.height\n + 2 * tooltipRects.arrow.height;\n pos.arrowY -= tooltipRects.container.height\n + tooltipRects.arrow.height;\n pos.baseArrowStyle = ARROW_STYLE_UP;\n }\n\n const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;\n tooltip.container.setAttribute('style', containerStyle);\n\n const arrowStyle = `${pos.baseArrowStyle};left:${pos.arrowX}px;top:${pos.arrowY}px`;\n tooltip.arrow.setAttribute('style', arrowStyle);\n}\n\n/* The Tooltip component itself. */\nconst Tooltip = forwardRef<unknown, {\n children?: ReactNode;\n theme: any;\n}>(({ children, theme }, ref) => {\n // NOTE: The way it has to be implemented, for clean mounting and unmounting\n // at the client side, the <Tooltip> is fully mounted into DOM in the next\n // rendering cycles, and only then it can be correctly measured and positioned.\n // Thus, when we create the <Tooltip> we have to record its target positioning\n // details, and then apply them when it is created.\n\n const { current: heap } = useRef<HeapT>({\n lastElement: undefined,\n lastPageX: 0,\n lastPageY: 0,\n lastPlacement: undefined,\n });\n\n const [components, setComponents] = useState<ComponentsT | null>(null);\n\n const pointTo = (\n pageX: number,\n pageY: number,\n placement: PLACEMENTS,\n element: HTMLElement,\n ) => {\n heap.lastElement = element;\n heap.lastPageX = pageX;\n heap.lastPageY = pageY;\n heap.lastPlacement = placement;\n\n if (components) {\n setComponentPositions(pageX, pageY, placement, element, components);\n }\n };\n useImperativeHandle(ref, () => ({ pointTo }));\n\n /* Inits and destroys tooltip components. */\n useEffect(() => {\n const x = createTooltipComponents(theme);\n setComponents(x);\n return () => {\n document.body.removeChild(x.container);\n setComponents(null);\n };\n }, [theme]);\n\n useEffect(() => {\n if (components) {\n setComponentPositions(\n heap.lastPageX,\n heap.lastPageY,\n heap.lastPlacement,\n heap.lastElement,\n components,\n );\n }\n }, [\n components,\n // BEWARE: Careful about these dependencies - they are updated when mouse\n // is moved over the tool-tipped element, thus potentially may cause\n // unnecessary firing of this effect on each mouse event. It does not\n // happen now just because the mouse movements themselves are not causing\n // the component re-rendering, thus dependencies of this effect are not\n // really re-evaluated.\n heap.lastPageX,\n heap.lastPageY,\n heap.lastPlacement,\n heap.lastElement,\n ]);\n\n return components ? createPortal(children, components.content) : null;\n});\n\nTooltip.propTypes = {\n children: PT.node,\n theme: PT.shape({}).isRequired,\n};\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["_react","require","_reactDom","PLACEMENTS","exports","ARROW_STYLE_DOWN","join","ARROW_STYLE_UP","createTooltipComponents","theme","arrow","document","createElement","setAttribute","content","container","appendChild","body","calcTooltipRects","tooltip","getBoundingClientRect","calcViewportRect","scrollX","scrollY","window","documentElement","clientHeight","clientWidth","left","right","top","bottom","calcPositionAboveXY","x","y","tooltipRects","arrowX","width","arrowY","height","containerX","containerY","baseArrowStyle","setComponentPositions","pageX","pageY","placement","element","viewportRect","pos","Math","max","maxX","min","containerStyle","arrowStyle","Tooltip","forwardRef","children","ref","current","heap","useRef","lastElement","undefined","lastPageX","lastPageY","lastPlacement","components","setComponents","useState","pointTo","useImperativeHandle","useEffect","removeChild","createPortal","_default","default"],"sources":["../../../../../src/shared/components/WithTooltip/Tooltip.tsx"],"sourcesContent":["/**\n * The actual tooltip component. It is rendered outside the regular document\n * hierarchy, and with sub-components managed without React to achieve the best\n * performance during animation.\n */\n/* global document, window */\n\nimport {\n type ReactNode,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport type { Theme } from '@dr.pogodin/react-themes';\n\n/* Valid placements of the rendered tooltip. They will be overriden when\n * necessary to fit the tooltip within the viewport. */\nexport enum PLACEMENTS {\n ABOVE_CURSOR = 'ABOVE_CURSOR',\n ABOVE_ELEMENT = 'ABOVE_ELEMENT',\n BELOW_CURSOR = 'BELOW_CURSOR',\n BELOW_ELEMENT = 'BELOW_ELEMENT',\n}\n\nconst ARROW_STYLE_DOWN = [\n 'border-bottom-color:transparent',\n 'border-left-color:transparent',\n 'border-right-color:transparent',\n].join(';');\n\nconst ARROW_STYLE_UP = [\n 'border-top-color:transparent',\n 'border-left-color:transparent',\n 'border-right-color:transparent',\n].join(';');\n\ntype ComponentsT = {\n container: HTMLDivElement;\n arrow: HTMLDivElement;\n content: HTMLDivElement;\n};\n\ntype HeapT = {\n lastElement?: HTMLElement;\n lastPageX: number;\n lastPageY: number;\n lastPlacement?: PLACEMENTS | undefined;\n};\n\nexport type ThemeKeysT =\n | 'appearance'\n | 'arrow'\n | 'content'\n | 'container';\n\ntype TooltipThemeT = Theme<ThemeKeysT>;\n\n/**\n * Creates tooltip components.\n * @ignore\n * @param {object} theme Themes to use for tooltip container, arrow,\n * and content.\n * @return {object} Object with DOM references to the container components:\n * container, arrow, content.\n */\nfunction createTooltipComponents(theme: TooltipThemeT): ComponentsT {\n const arrow = document.createElement('div');\n if (theme.arrow) arrow.setAttribute('class', theme.arrow);\n\n const content = document.createElement('div');\n if (theme.content) content.setAttribute('class', theme.content);\n\n const container = document.createElement('div');\n if (theme.container) container.setAttribute('class', theme.container);\n\n container.appendChild(arrow);\n container.appendChild(content);\n document.body.appendChild(container);\n\n return { container, arrow, content };\n}\n\ntype TooltipRectsT = {\n arrow: DOMRect;\n container: DOMRect;\n};\n\n/**\n * Generates bounding client rectangles for tooltip components.\n * @ignore\n * @param tooltip DOM references to the tooltip components.\n * @param tooltip.arrow\n * @param tooltip.container\n * @return Object holding tooltip rectangles in\n * two fields.\n */\nfunction calcTooltipRects(tooltip: ComponentsT): TooltipRectsT {\n return {\n arrow: tooltip.arrow.getBoundingClientRect(),\n container: tooltip.container.getBoundingClientRect(),\n };\n}\n\n/**\n * Calculates the document viewport size.\n * @ignore\n * @return {{x, y, width, height}}\n */\nfunction calcViewportRect() {\n const { scrollX, scrollY } = window;\n const { documentElement: { clientHeight, clientWidth } } = document;\n return {\n left: scrollX,\n right: scrollX + clientWidth,\n top: scrollY,\n bottom: scrollY + clientHeight,\n };\n}\n\n/**\n * Calculates tooltip and arrow positions for the placement just above\n * the cursor.\n * @ignore\n * @param {number} x Cursor page-x position.\n * @param {number} y Cursor page-y position.\n * @param {object} tooltipRects Bounding client rectangles of tooltip parts.\n * @param {object} tooltipRects.arrow\n * @param {object} tooltipRects.container\n * @return {object} Contains the following fields:\n * - {number} arrowX\n * - {number} arrowY\n * - {number} containerX\n * - {number} containerY\n * - {string} baseArrowStyle\n */\nfunction calcPositionAboveXY(\n x: number,\n y: number,\n tooltipRects: TooltipRectsT,\n) {\n const { arrow, container } = tooltipRects;\n return {\n arrowX: 0.5 * (container.width - arrow.width),\n arrowY: container.height,\n containerX: x - container.width / 2,\n containerY: y - container.height - arrow.height / 1.5,\n\n // TODO: Instead of already setting the base style here, we should\n // introduce a set of constants for arrow directions, which will help\n // to do checks dependant on the arrow direction.\n baseArrowStyle: ARROW_STYLE_DOWN,\n };\n}\n\n/*\nconst HIT = {\n NONE: false,\n LEFT: 'LEFT',\n RIGHT: 'RIGHT',\n TOP: 'TOP',\n BOTTOM: 'BOTTOM',\n};\n*/\n\n/**\n * Checks whether\n * @param {object} pos\n * @param {object} tooltipRects\n * @param {object} viewportRect\n * @return {HIT}\n */\n/*\nfunction checkViewportFit(pos, tooltipRects, viewportRect) {\n const { containerX, containerY } = pos;\n if (containerX < viewportRect.left + 6) return HIT.LEFT;\n if (containerX > viewportRect.right - 6) return HIT.RIGHT;\n return HIT.NONE;\n}\n*/\n\n/**\n * Shifts tooltip horizontally to fit into the viewport, while keeping\n * the arrow pointed to the XY point.\n * @param {number} x\n * @param {number} y\n * @param {object} pos\n * @param {number} pageXOffset\n * @param {number} pageXWidth\n */\n/*\nfunction xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {\n if (pos.containerX < pageXOffset + 6) {\n pos.containerX = pageXOffset + 6;\n pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);\n } else {\n const maxX = pageXOffset + docRect.width - containerRect.width - 6;\n if (containerX > maxX) {\n containerX = maxX;\n arrowX = Math.min(\n containerRect.width - 6,\n pageX - containerX - arrowRect.width / 2,\n );\n }\n }\n}\n*/\n\n/**\n * Sets positions of tooltip components to point the tooltip to the specified\n * page point.\n * @ignore\n * @param pageX\n * @param pageY\n * @param placement\n * @param element DOM reference to the element wrapped by the tooltip.\n * @param tooltip\n * @param tooltip.arrow DOM reference to the tooltip arrow.\n * @param tooltip.container DOM reference to the tooltip container.\n */\nfunction setComponentPositions(\n pageX: number,\n pageY: number,\n placement: PLACEMENTS | undefined,\n element: HTMLElement | undefined,\n tooltip: ComponentsT,\n) {\n const tooltipRects = calcTooltipRects(tooltip);\n const viewportRect = calcViewportRect();\n\n /* Default container coords: tooltip at the top. */\n const pos = calcPositionAboveXY(pageX, pageY, tooltipRects);\n\n if (pos.containerX < viewportRect.left + 6) {\n pos.containerX = viewportRect.left + 6;\n pos.arrowX = Math.max(\n 6,\n pageX - pos.containerX - tooltipRects.arrow.width / 2,\n );\n } else {\n const maxX = viewportRect.right - 6 - tooltipRects.container.width;\n if (pos.containerX > maxX) {\n pos.containerX = maxX;\n pos.arrowX = Math.min(\n tooltipRects.container.width - 6,\n pageX - pos.containerX - tooltipRects.arrow.width / 2,\n );\n }\n }\n\n /* If tooltip has not enough space on top - make it bottom tooltip. */\n if (pos.containerY < viewportRect.top + 6) {\n pos.containerY += tooltipRects.container.height\n + 2 * tooltipRects.arrow.height;\n pos.arrowY -= tooltipRects.container.height\n + tooltipRects.arrow.height;\n pos.baseArrowStyle = ARROW_STYLE_UP;\n }\n\n const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;\n tooltip.container.setAttribute('style', containerStyle);\n\n const arrowStyle = `${pos.baseArrowStyle};left:${pos.arrowX}px;top:${pos.arrowY}px`;\n tooltip.arrow.setAttribute('style', arrowStyle);\n}\n\n/* The Tooltip component itself. */\nconst Tooltip = forwardRef<unknown, {\n children?: ReactNode;\n theme: any;\n}>(({ children, theme }, ref) => {\n // NOTE: The way it has to be implemented, for clean mounting and unmounting\n // at the client side, the <Tooltip> is fully mounted into DOM in the next\n // rendering cycles, and only then it can be correctly measured and positioned.\n // Thus, when we create the <Tooltip> we have to record its target positioning\n // details, and then apply them when it is created.\n\n const { current: heap } = useRef<HeapT>({\n lastElement: undefined,\n lastPageX: 0,\n lastPageY: 0,\n lastPlacement: undefined,\n });\n\n const [components, setComponents] = useState<ComponentsT | null>(null);\n\n const pointTo = (\n pageX: number,\n pageY: number,\n placement: PLACEMENTS,\n element: HTMLElement,\n ) => {\n heap.lastElement = element;\n heap.lastPageX = pageX;\n heap.lastPageY = pageY;\n heap.lastPlacement = placement;\n\n if (components) {\n setComponentPositions(pageX, pageY, placement, element, components);\n }\n };\n useImperativeHandle(ref, () => ({ pointTo }));\n\n /* Inits and destroys tooltip components. */\n useEffect(() => {\n const x = createTooltipComponents(theme);\n setComponents(x);\n return () => {\n document.body.removeChild(x.container);\n setComponents(null);\n };\n }, [theme]);\n\n useEffect(() => {\n if (components) {\n setComponentPositions(\n heap.lastPageX,\n heap.lastPageY,\n heap.lastPlacement,\n heap.lastElement,\n components,\n );\n }\n }, [\n components,\n // BEWARE: Careful about these dependencies - they are updated when mouse\n // is moved over the tool-tipped element, thus potentially may cause\n // unnecessary firing of this effect on each mouse event. It does not\n // happen now just because the mouse movements themselves are not causing\n // the component re-rendering, thus dependencies of this effect are not\n // really re-evaluated.\n heap.lastPageX,\n heap.lastPageY,\n heap.lastPlacement,\n heap.lastElement,\n ]);\n\n return components ? createPortal(children, components.content) : null;\n});\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=require("react");var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _Tooltip=_interopRequireWildcard(require("./Tooltip"));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}/* global window */const defaultTheme={"ad":"_4xT7zE","hoc":"zd-vnH","context":"GdZucr","appearance":"L4ubm-","arrow":"M9gywF","container":"f9gY8K","wrapper":"_4qDBRM"};/**
|
|
2
2
|
* Implements a simple to use and themeable tooltip component, _e.g._
|
|
3
3
|
* ```js
|
|
4
4
|
* <WithTooltip tip="This is example tooltip.">
|
|
@@ -22,5 +22,5 @@ if(heap.triggeredByTouch){if(!heap.timerId){heap.timerId=setTimeout(()=>{heap.tr
|
|
|
22
22
|
// once opened (because similar call above does not have effect until
|
|
23
23
|
// the tooltip is fully mounted, and that is delayed to future rendering
|
|
24
24
|
// cycle due to the implementation).
|
|
25
|
-
if(tooltipRef.current){tooltipRef.current.pointTo(heap.lastCursorX+window.scrollX,heap.lastCursorY+window.scrollY,placement,wrapperRef.current)}const listener=()=>setShowTooltip(false);window.addEventListener("scroll",listener);return()=>window.removeEventListener("scroll",listener)}return undefined},[heap.lastCursorX,heap.lastCursorY,placement,showTooltip,tip]);return/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.wrapper,onMouseLeave:()=>setShowTooltip(false),onMouseMove:e=>updatePortalPosition(e.clientX,e.clientY),onClick:()=>{if(heap.timerId){clearTimeout(heap.timerId);heap.timerId=undefined;heap.triggeredByTouch=false}},onTouchStart:()=>{heap.triggeredByTouch=true},ref:wrapperRef,role:"presentation",children:[showTooltip&&tip!==null?/*#__PURE__*/(0,_jsxRuntime.jsx)(_Tooltip.default,{ref:tooltipRef,theme:theme,children:tip}):null,children]})};const ThemedWrapper=(0,_reactThemes.default)(Wrapper,"WithTooltip",
|
|
25
|
+
if(tooltipRef.current){tooltipRef.current.pointTo(heap.lastCursorX+window.scrollX,heap.lastCursorY+window.scrollY,placement,wrapperRef.current)}const listener=()=>setShowTooltip(false);window.addEventListener("scroll",listener);return()=>window.removeEventListener("scroll",listener)}return undefined},[heap.lastCursorX,heap.lastCursorY,placement,showTooltip,tip]);return/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.wrapper,onMouseLeave:()=>setShowTooltip(false),onMouseMove:e=>updatePortalPosition(e.clientX,e.clientY),onClick:()=>{if(heap.timerId){clearTimeout(heap.timerId);heap.timerId=undefined;heap.triggeredByTouch=false}},onTouchStart:()=>{heap.triggeredByTouch=true},ref:wrapperRef,role:"presentation",children:[showTooltip&&tip!==null?/*#__PURE__*/(0,_jsxRuntime.jsx)(_Tooltip.default,{ref:tooltipRef,theme:theme,children:tip}):null,children]})};const ThemedWrapper=(0,_reactThemes.default)(Wrapper,"WithTooltip",defaultTheme);const e=ThemedWrapper;e.PLACEMENTS=_Tooltip.PLACEMENTS;var _default=exports.default=e;
|
|
26
26
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_propTypes","_interopRequireDefault","require","_react","_reactThemes","_Tooltip","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","defaultTheme","validThemeKeys","validTooltipThemeKeys","Wrapper","children","placement","PLACEMENTS","ABOVE_CURSOR","tip","theme","current","heap","useRef","lastCursorX","lastCursorY","triggeredByTouch","timerId","undefined","tooltipRef","wrapperRef","showTooltip","setShowTooltip","useState","updatePortalPosition","cursorX","cursorY","setTimeout","wrapperRect","getBoundingClientRect","left","right","top","bottom","pointTo","window","scrollX","scrollY","useEffect","listener","addEventListener","removeEventListener","jsxs","className","wrapper","onMouseLeave","onMouseMove","clientX","clientY","onClick","clearTimeout","onTouchStart","ref","role","jsx","ThemedWrapper","themed","propTypes","PT","node","oneOf","values","themeType","isRequired","_default","exports"],"sources":["../../../../../src/shared/components/WithTooltip/index.tsx"],"sourcesContent":["/* global window */\n\nimport PT from 'prop-types';\nimport {\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Tooltip, {\n PLACEMENTS,\n validThemeKeys as validTooltipThemeKeys,\n} from './Tooltip';\n\nimport defaultTheme from './default-theme.scss';\n\nconst validThemeKeys = [...validTooltipThemeKeys, 'wrapper'] as const;\n\ntype PropsT = {\n children?: ReactNode;\n placement?: PLACEMENTS;\n tip?: ReactNode;\n theme: Theme<typeof validThemeKeys>;\n};\n\ntype TooltipRefT = {\n pointTo: (\n x: number,\n y: number,\n placement: PLACEMENTS,\n wrapperRef: HTMLDivElement,\n ) => void;\n};\n\ntype HeapT = {\n lastCursorX: number;\n lastCursorY: number;\n triggeredByTouch: boolean;\n timerId?: NodeJS.Timeout;\n};\n\n/**\n * Implements a simple to use and themeable tooltip component, _e.g._\n * ```js\n * <WithTooltip tip=\"This is example tooltip.\">\n * <p>Hover to see the tooltip.</p>\n * </WithTooltip>\n * ```\n * **Children:** Children are rendered in the place of `<WithTooltip>`,\n * and when hovered the tooltip is shown. By default the wrapper itself is\n * `<div>` block with `display: inline-block`.\n * @param {object} props Component properties.\n * @param {React.node} props.tip – Anything React is able to render,\n * _e.g._ a tooltip text. This will be the tooltip content.\n * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.\n */\nconst Wrapper: React.FunctionComponent<PropsT> = ({\n children,\n placement = PLACEMENTS.ABOVE_CURSOR,\n tip,\n theme,\n}) => {\n const { current: heap } = useRef<HeapT>({\n lastCursorX: 0,\n lastCursorY: 0,\n triggeredByTouch: false,\n timerId: undefined,\n });\n const tooltipRef = useRef<TooltipRefT>();\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n\n const updatePortalPosition = (cursorX: number, cursorY: number) => {\n if (!showTooltip) {\n heap.lastCursorX = cursorX;\n heap.lastCursorY = cursorY;\n\n // If tooltip was triggered by a touch, we delay its opening by a bit,\n // to ensure it was not a touch-click - in the case of touch click we\n // want to do the click, rather than show the tooltip, and the delay\n // gives click handler a chance to abort the tooltip openning.\n if (heap.triggeredByTouch) {\n if (!heap.timerId) {\n heap.timerId = setTimeout(() => {\n heap.triggeredByTouch = false;\n heap.timerId = undefined;\n setShowTooltip(true);\n }, 300);\n }\n\n // Otherwise we can just open the tooltip right away.\n } else setShowTooltip(true);\n } else {\n const wrapperRect = wrapperRef.current!.getBoundingClientRect();\n if (\n cursorX < wrapperRect.left\n || cursorX > wrapperRect.right\n || cursorY < wrapperRect.top\n || cursorY > wrapperRect.bottom\n ) {\n setShowTooltip(false);\n } else if (tooltipRef.current) {\n tooltipRef.current.pointTo(\n cursorX + window.scrollX,\n cursorY + window.scrollY,\n placement!,\n wrapperRef.current!,\n );\n }\n }\n };\n\n useEffect(() => {\n if (showTooltip && tip !== null) {\n // This is necessary to ensure that even when a single mouse event\n // arrives to a tool-tipped component, the tooltip is correctly positioned\n // once opened (because similar call above does not have effect until\n // the tooltip is fully mounted, and that is delayed to future rendering\n // cycle due to the implementation).\n if (tooltipRef.current) {\n tooltipRef.current.pointTo(\n heap.lastCursorX + window.scrollX,\n heap.lastCursorY + window.scrollY,\n placement!,\n wrapperRef.current!,\n );\n }\n\n const listener = () => setShowTooltip(false);\n window.addEventListener('scroll', listener);\n return () => window.removeEventListener('scroll', listener);\n }\n return undefined;\n }, [\n heap.lastCursorX,\n heap.lastCursorY,\n placement,\n showTooltip,\n tip,\n ]);\n\n return (\n <div\n className={theme.wrapper}\n onMouseLeave={() => setShowTooltip(false)}\n onMouseMove={(e) => updatePortalPosition(e.clientX, e.clientY)}\n onClick={() => {\n if (heap.timerId) {\n clearTimeout(heap.timerId);\n heap.timerId = undefined;\n heap.triggeredByTouch = false;\n }\n }}\n onTouchStart={() => {\n heap.triggeredByTouch = true;\n }}\n ref={wrapperRef}\n role=\"presentation\"\n >\n {\n showTooltip && tip !== null ? (\n <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>\n ) : null\n }\n {children}\n </div>\n );\n};\n\nconst ThemedWrapper = themed(\n Wrapper,\n 'WithTooltip',\n [\n 'appearance',\n 'arrow',\n 'container',\n 'content',\n 'wrapper',\n ],\n defaultTheme,\n);\n\ntype ExportT = typeof ThemedWrapper & {\n PLACEMENTS: typeof PLACEMENTS;\n};\n\nconst e: ExportT = ThemedWrapper as ExportT;\n\ne.PLACEMENTS = PLACEMENTS;\n\nWrapper.propTypes = {\n children: PT.node,\n placement: PT.oneOf(Object.values(PLACEMENTS)),\n theme: ThemedWrapper.themeType.isRequired,\n tip: PT.node,\n};\n\nexport default e;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_Tooltip","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","defaultTheme","Wrapper","children","placement","PLACEMENTS","ABOVE_CURSOR","tip","theme","current","heap","useRef","lastCursorX","lastCursorY","triggeredByTouch","timerId","undefined","tooltipRef","wrapperRef","showTooltip","setShowTooltip","useState","updatePortalPosition","cursorX","cursorY","setTimeout","wrapperRect","getBoundingClientRect","left","right","top","bottom","pointTo","window","scrollX","scrollY","useEffect","listener","addEventListener","removeEventListener","jsxs","className","wrapper","onMouseLeave","onMouseMove","clientX","clientY","onClick","clearTimeout","onTouchStart","ref","role","jsx","ThemedWrapper","themed","_default","exports"],"sources":["../../../../../src/shared/components/WithTooltip/index.tsx"],"sourcesContent":["/* global window */\n\nimport {\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport Tooltip, {\n type ThemeKeysT as TooltipThemeKeysT,\n PLACEMENTS,\n} from './Tooltip';\n\nimport defaultTheme from './default-theme.scss';\n\ntype PropsT = {\n children?: ReactNode;\n placement?: PLACEMENTS;\n tip?: ReactNode;\n theme: Theme<'wrapper' | TooltipThemeKeysT>;\n};\n\ntype TooltipRefT = {\n pointTo: (\n x: number,\n y: number,\n placement: PLACEMENTS,\n wrapperRef: HTMLDivElement,\n ) => void;\n};\n\ntype HeapT = {\n lastCursorX: number;\n lastCursorY: number;\n triggeredByTouch: boolean;\n timerId?: NodeJS.Timeout;\n};\n\n/**\n * Implements a simple to use and themeable tooltip component, _e.g._\n * ```js\n * <WithTooltip tip=\"This is example tooltip.\">\n * <p>Hover to see the tooltip.</p>\n * </WithTooltip>\n * ```\n * **Children:** Children are rendered in the place of `<WithTooltip>`,\n * and when hovered the tooltip is shown. By default the wrapper itself is\n * `<div>` block with `display: inline-block`.\n * @param {object} props Component properties.\n * @param {React.node} props.tip – Anything React is able to render,\n * _e.g._ a tooltip text. This will be the tooltip content.\n * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.\n */\nconst Wrapper: React.FunctionComponent<PropsT> = ({\n children,\n placement = PLACEMENTS.ABOVE_CURSOR,\n tip,\n theme,\n}) => {\n const { current: heap } = useRef<HeapT>({\n lastCursorX: 0,\n lastCursorY: 0,\n triggeredByTouch: false,\n timerId: undefined,\n });\n const tooltipRef = useRef<TooltipRefT>();\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n\n const updatePortalPosition = (cursorX: number, cursorY: number) => {\n if (!showTooltip) {\n heap.lastCursorX = cursorX;\n heap.lastCursorY = cursorY;\n\n // If tooltip was triggered by a touch, we delay its opening by a bit,\n // to ensure it was not a touch-click - in the case of touch click we\n // want to do the click, rather than show the tooltip, and the delay\n // gives click handler a chance to abort the tooltip openning.\n if (heap.triggeredByTouch) {\n if (!heap.timerId) {\n heap.timerId = setTimeout(() => {\n heap.triggeredByTouch = false;\n heap.timerId = undefined;\n setShowTooltip(true);\n }, 300);\n }\n\n // Otherwise we can just open the tooltip right away.\n } else setShowTooltip(true);\n } else {\n const wrapperRect = wrapperRef.current!.getBoundingClientRect();\n if (\n cursorX < wrapperRect.left\n || cursorX > wrapperRect.right\n || cursorY < wrapperRect.top\n || cursorY > wrapperRect.bottom\n ) {\n setShowTooltip(false);\n } else if (tooltipRef.current) {\n tooltipRef.current.pointTo(\n cursorX + window.scrollX,\n cursorY + window.scrollY,\n placement!,\n wrapperRef.current!,\n );\n }\n }\n };\n\n useEffect(() => {\n if (showTooltip && tip !== null) {\n // This is necessary to ensure that even when a single mouse event\n // arrives to a tool-tipped component, the tooltip is correctly positioned\n // once opened (because similar call above does not have effect until\n // the tooltip is fully mounted, and that is delayed to future rendering\n // cycle due to the implementation).\n if (tooltipRef.current) {\n tooltipRef.current.pointTo(\n heap.lastCursorX + window.scrollX,\n heap.lastCursorY + window.scrollY,\n placement!,\n wrapperRef.current!,\n );\n }\n\n const listener = () => setShowTooltip(false);\n window.addEventListener('scroll', listener);\n return () => window.removeEventListener('scroll', listener);\n }\n return undefined;\n }, [\n heap.lastCursorX,\n heap.lastCursorY,\n placement,\n showTooltip,\n tip,\n ]);\n\n return (\n <div\n className={theme.wrapper}\n onMouseLeave={() => setShowTooltip(false)}\n onMouseMove={(e) => updatePortalPosition(e.clientX, e.clientY)}\n onClick={() => {\n if (heap.timerId) {\n clearTimeout(heap.timerId);\n heap.timerId = undefined;\n heap.triggeredByTouch = false;\n }\n }}\n onTouchStart={() => {\n heap.triggeredByTouch = true;\n }}\n ref={wrapperRef}\n role=\"presentation\"\n >\n {\n showTooltip && tip !== null ? (\n <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>\n ) : null\n }\n {children}\n </div>\n );\n};\n\nconst ThemedWrapper = themed(Wrapper, 'WithTooltip', defaultTheme);\n\ntype ExportT = typeof ThemedWrapper & {\n PLACEMENTS: typeof PLACEMENTS;\n};\n\nconst e: ExportT = ThemedWrapper as ExportT;\n\ne.PLACEMENTS = PLACEMENTS;\n\nexport default e;\n"],"mappings":"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","ignoreList":[]}
|