@bigbinary/neeto-molecules 3.16.22 → 3.16.23

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.
@@ -56,6 +56,9 @@ var HelpPopover = function HelpPopover(_ref) {
56
56
  }, popoverProps), {}, {
57
57
  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
58
58
  className: "flex flex-col",
59
+ onClick: function onClick(event) {
60
+ return event.stopPropagation();
61
+ },
59
62
  children: [title && /*#__PURE__*/jsxRuntime.jsx(Popover.Title, {
60
63
  "data-cy": "help-popover-title",
61
64
  "data-testid": "help-popover-title",
@@ -1 +1 @@
1
- {"version":3,"file":"HelpPopover.js","sources":["../../src/components/HelpPopover/constants.js","../../src/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import { useRef } from \"react\";\n\nimport classNames from \"classnames\";\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { SIZE } from \"./constants\";\n\nconst HelpPopover = ({\n title,\n size = \"default\",\n description,\n helpLinkProps,\n popoverProps,\n className,\n iconColor = \"currentColor\",\n icon: IconComponent = Help,\n ...otherProps\n}) => {\n const { t } = useTranslation();\n\n const popoverRef = useRef();\n\n return (\n <>\n <Button\n {...otherProps}\n data-cy=\"help-popover-button\"\n data-testid=\"help-popover-button\"\n icon={() => <IconComponent color={iconColor} size={SIZE[size]} />}\n ref={popoverRef}\n style=\"text\"\n className={classNames(\n \"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\",\n className\n )}\n />\n <Popover\n appendTo={() => document.body}\n reference={popoverRef}\n {...popoverProps}\n >\n <div className=\"flex flex-col\">\n {title && (\n <Popover.Title\n data-cy=\"help-popover-title\"\n data-testid=\"help-popover-title\"\n >\n {title}\n </Popover.Title>\n )}\n {typeof description === \"string\" ? (\n <Typography\n data-cy=\"help-popover-description\"\n data-testid=\"help-popover-description\"\n lineHeight=\"normal\"\n style=\"body2\"\n >\n {description}\n </Typography>\n ) : (\n description\n )}\n {helpLinkProps && (\n <Button\n className=\"neeto-ui-mt-3\"\n data-cy=\"help-popover-link-button\"\n label={t(\"neetoMolecules.common.viewHelpArticle\")}\n size=\"small\"\n {...helpLinkProps}\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n </Popover>\n </>\n );\n};\n\nHelpPopover.propTypes = {\n /**\n * To set the title of the help popover.\n */\n title: PropTypes.string,\n /**\n * To set the size of the popover help icon.\n */\n size: PropTypes.oneOf([\"default\", \"large\"]),\n /**\n * To set the description of the popover, this can be a string or a custom component.\n */\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /**\n * To set the props of the help link which is displayed below the description.\n */\n helpLinkProps: PropTypes.object,\n /**\n * To set the props of the popover to customize it further.\n */\n popoverProps: PropTypes.object,\n /**\n * Additional classes passed on to the help button element.\n */\n className: PropTypes.string,\n /**\n * To set the default icon color of the help icon.\n */\n iconColor: PropTypes.string,\n /**\n * To customize the icon of the help popover.\n */\n icon: PropTypes.node,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","className","_ref$iconColor","iconColor","_ref$icon","icon","IconComponent","Help","otherProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","popoverRef","useRef","_jsxs","_Fragment","children","_jsx","Button","_objectSpread","color","ref","style","classNames","Popover","appendTo","document","body","reference","Title","Typography","lineHeight","label","target"],"mappings":"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"}
1
+ {"version":3,"file":"HelpPopover.js","sources":["../../src/components/HelpPopover/constants.js","../../src/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import { useRef } from \"react\";\n\nimport classNames from \"classnames\";\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { SIZE } from \"./constants\";\n\nconst HelpPopover = ({\n title,\n size = \"default\",\n description,\n helpLinkProps,\n popoverProps,\n className,\n iconColor = \"currentColor\",\n icon: IconComponent = Help,\n ...otherProps\n}) => {\n const { t } = useTranslation();\n\n const popoverRef = useRef();\n\n return (\n <>\n <Button\n {...otherProps}\n data-cy=\"help-popover-button\"\n data-testid=\"help-popover-button\"\n icon={() => <IconComponent color={iconColor} size={SIZE[size]} />}\n ref={popoverRef}\n style=\"text\"\n className={classNames(\n \"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\",\n className\n )}\n />\n <Popover\n appendTo={() => document.body}\n reference={popoverRef}\n {...popoverProps}\n >\n <div\n className=\"flex flex-col\"\n onClick={event => event.stopPropagation()}\n >\n {title && (\n <Popover.Title\n data-cy=\"help-popover-title\"\n data-testid=\"help-popover-title\"\n >\n {title}\n </Popover.Title>\n )}\n {typeof description === \"string\" ? (\n <Typography\n data-cy=\"help-popover-description\"\n data-testid=\"help-popover-description\"\n lineHeight=\"normal\"\n style=\"body2\"\n >\n {description}\n </Typography>\n ) : (\n description\n )}\n {helpLinkProps && (\n <Button\n className=\"neeto-ui-mt-3\"\n data-cy=\"help-popover-link-button\"\n label={t(\"neetoMolecules.common.viewHelpArticle\")}\n size=\"small\"\n {...helpLinkProps}\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n </Popover>\n </>\n );\n};\n\nHelpPopover.propTypes = {\n /**\n * To set the title of the help popover.\n */\n title: PropTypes.string,\n /**\n * To set the size of the popover help icon.\n */\n size: PropTypes.oneOf([\"default\", \"large\"]),\n /**\n * To set the description of the popover, this can be a string or a custom component.\n */\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /**\n * To set the props of the help link which is displayed below the description.\n */\n helpLinkProps: PropTypes.object,\n /**\n * To set the props of the popover to customize it further.\n */\n popoverProps: PropTypes.object,\n /**\n * Additional classes passed on to the help button element.\n */\n className: PropTypes.string,\n /**\n * To set the default icon color of the help icon.\n */\n iconColor: PropTypes.string,\n /**\n * To customize the icon of the help popover.\n */\n icon: PropTypes.node,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","className","_ref$iconColor","iconColor","_ref$icon","icon","IconComponent","Help","otherProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","popoverRef","useRef","_jsxs","_Fragment","children","_jsx","Button","_objectSpread","color","ref","style","classNames","Popover","appendTo","document","body","reference","onClick","event","stopPropagation","Title","Typography","lineHeight","label","target"],"mappings":"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"}
@@ -39,6 +39,7 @@ var DatePicker = require('@bigbinary/neetoui/DatePicker');
39
39
  var Share = require('@bigbinary/neeto-icons/Share');
40
40
  var QrCode = require('@bigbinary/neeto-icons/QrCode');
41
41
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
42
+ var HelpPopover = require('./HelpPopover.js');
42
43
  var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
43
44
  var CardLayout = require('./CardLayout.js');
44
45
  var Header$1 = require('./Header.js');
@@ -53,9 +54,8 @@ require('@bigbinary/neeto-icons/MenuHorizontal');
53
54
  require('@bigbinary/neeto-icons/MenuVertical');
54
55
  require('@bigbinary/neetoui/Dropdown');
55
56
  require('@bigbinary/neetoui/Tooltip');
56
- require('./Breadcrumbs.js');
57
- require('./HelpPopover.js');
58
57
  require('@bigbinary/neetoui/Popover');
58
+ require('./Breadcrumbs.js');
59
59
  require('./Search.js');
60
60
  require('@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce');
61
61
  require('@bigbinary/neeto-commons-frontend/react-utils/useQueryParams');
@@ -561,7 +561,7 @@ var Link = function Link(_ref) {
561
561
  });
562
562
  };
563
563
 
564
- var _excluded = ["title", "link", "description", "Icon", "onClick"];
564
+ var _excluded = ["title", "link", "description", "Icon", "onClick", "helpPopoverProps"];
565
565
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
566
566
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
567
567
  var Card = function Card(_ref) {
@@ -571,6 +571,7 @@ var Card = function Card(_ref) {
571
571
  Icon = _ref.Icon,
572
572
  _ref$onClick = _ref.onClick,
573
573
  onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
574
+ helpPopoverProps = _ref.helpPopoverProps,
574
575
  otherProps = _objectWithoutProperties(_ref, _excluded);
575
576
  var Component = neetoCist.isPresent(link) ? reactRouterDom.Link : "div";
576
577
  return /*#__PURE__*/jsxRuntime.jsxs(Component, _objectSpread(_objectSpread({
@@ -587,7 +588,7 @@ var Card = function Card(_ref) {
587
588
  className: "min-w-0 flex-grow break-words",
588
589
  style: "h4",
589
590
  children: title
590
- })]
591
+ }), helpPopoverProps && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread({}, helpPopoverProps))]
591
592
  }), description && /*#__PURE__*/jsxRuntime.jsx(Typography, {
592
593
  className: "break-words",
593
594
  lineHeight: "normal",
@@ -621,10 +622,12 @@ var ShareBlock = function ShareBlock(_ref) {
621
622
  Icon = _ref2.icon,
622
623
  onClick = _ref2.onClick,
623
624
  dataCy = _ref2.dataCy,
624
- description = _ref2.description;
625
+ description = _ref2.description,
626
+ helpPopoverProps = _ref2.helpPopoverProps;
625
627
  return /*#__PURE__*/React.createElement(Card, {
626
628
  Icon: Icon,
627
629
  description: description,
630
+ helpPopoverProps: helpPopoverProps,
628
631
  link: link,
629
632
  onClick: onClick,
630
633
  title: title,