@bigbinary/neeto-molecules 3.3.11 → 3.3.13

package/dist/HelpPopover.js.map

@@ -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 React, { 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 = \"#1f1f1f\",\n  icon = Help,\n  ...otherProps\n}) => {\n  const { t } = useTranslation();\n\n  const popoverRef = useRef();\n\n  const Icon = () => {\n    const Component = icon;\n\n    return <Component color={iconColor} size={SIZE[size]} />;\n  };\n\n  return (\n    <>\n      <Button\n        {...otherProps}\n        data-cy=\"help-popover-button\"\n        data-testid=\"help-popover-button\"\n        icon={Icon}\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","Help","otherProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","popoverRef","useRef","Icon","Component","React","createElement","color","Fragment","Button","_extends","ref","style","classNames","Popover","appendTo","document","body","reference","Title","Typography","lineHeight","label","target"],"mappings":"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"}
+{"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 = \"#1f1f1f\",\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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"}

package/dist/IconPicker.js

@@ -1,7 +1,7 @@
-import _extends$1 from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React__default, { createElement, PureComponent, useState, useRef, useEffect } from 'react';
+import { createElement, PureComponent, memo, useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import useDebounce from '@bigbinary/neeto-commons-frontend/react-utils/useDebounce';
@@ -17,7 +17,9 @@ import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitial
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { n } from './inject-css-c86de496.js';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 
 var safeIsNaN = Number.isNaN ||
     function ponyfill(value) {
@@ -944,44 +946,51 @@ var Icon = function Icon(_ref) {
     _onClick = _ref.onClick,
     symbolsStyle = _ref.symbolsStyle,
     style = _ref.style;
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
+  return /*#__PURE__*/jsx(Tooltip, {
     content: humanize(icon),
-    position: "bottom"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    "data-testid": "icon-picker-icon-".concat(icon),
-    style: style,
-    className: classnames("neeto-ui-rounded-md flex cursor-pointer items-center justify-center", {
-      "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-100": !active,
-      "neeto-ui-text-white neeto-ui-bg-primary-500": active
-    }),
-    onClick: function onClick() {
-      return _onClick(icon);
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-11/12 flex-col justify-center p-1",
-    style: symbolsStyle
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "material-symbols-rounded mx-auto"
-  }, icon), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "text-center line-clamp-2",
-    style: "body3"
-  }, humanize(icon)))));
+    position: "bottom",
+    children: /*#__PURE__*/jsx("div", {
+      style: style,
+      "data-testid": "icon-picker-icon-".concat(icon),
+      className: classnames("neeto-ui-rounded-md flex cursor-pointer items-center justify-center", {
+        "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-100": !active,
+        "neeto-ui-text-white neeto-ui-bg-primary-500": active
+      }),
+      onClick: function onClick() {
+        return _onClick(icon);
+      },
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex w-11/12 flex-col justify-center p-1",
+        style: symbolsStyle,
+        children: [/*#__PURE__*/jsx("span", {
+          className: "material-symbols-rounded mx-auto",
+          children: icon
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "line-clamp-2 text-center",
+          style: "body3",
+          children: humanize(icon)
+        })]
+      })
+    })
+  });
 };
 
 var css = "@import url(\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0..1,0\");";
 n(css,{});
 
-var NoResults = function NoResults() {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default.createElement(Typography, {
+var NoResults = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/jsx(Typography, {
     className: "neeto-ui-text-gray-400 flex h-64 items-center justify-center text-lg",
-    "data-cy": "no-icon-results-found-text"
-  }, t("neetoMolecules.iconPicker.dropdown.noResults"));
-};
-var NoResults$1 = /*#__PURE__*/React__default.memo(NoResults);
+    "data-cy": "no-icon-results-found-text",
+    children: t("neetoMolecules.iconPicker.dropdown.noResults")
+  });
+});
+var NoResults$1 = /*#__PURE__*/memo(NoResults);
 
 var _excluded = ["filled", "label", "value", "onClick", "className"];
+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; }
+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; }
 var IconPicker = function IconPicker(_ref) {
   var _ref$filled = _ref.filled,
     filled = _ref$filled === void 0 ? false : _ref$filled,
@@ -1053,7 +1062,7 @@ var IconPicker = function IconPicker(_ref) {
       onClick(icon);
       setActiveIcon(icon);
     };
-    return icon ? /*#__PURE__*/React__default.createElement(Icon, {
+    return icon ? /*#__PURE__*/jsx(Icon, {
       icon: icon,
       style: style,
       symbolsStyle: symbolsStyle,
@@ -1061,76 +1070,88 @@ var IconPicker = function IconPicker(_ref) {
       onClick: handleIconClick
     }) : null;
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-start gap-2"
-  }, label && /*#__PURE__*/React__default.createElement(Label, null, label), /*#__PURE__*/React__default.createElement(Dropdown, _extends$1({
-    buttonSize: "small",
-    buttonStyle: "secondary",
-    closeOnSelect: false,
-    dropdownProps: {
-      className: classnames("h-96", className)
-    },
-    position: "bottom-start",
-    strategy: "fixed",
-    buttonProps: {
-      "data-testid": "icon-picker-dropdown",
-      onClick: handleDropdownClick
-    },
-    label: /*#__PURE__*/React__default.createElement("span", {
-      className: "flex items-center gap-2",
-      style: symbolsStyle
-    }, value && /*#__PURE__*/React__default.createElement("span", {
-      className: "material-symbols-rounded neeto-ui-text-base mx-auto"
-    }, value), /*#__PURE__*/React__default.createElement(Typography, {
-      style: "body2"
-    }, humanize(value) || t("neetoMolecules.iconPicker.dropdown.label"))),
-    onClose: function onClose() {
-      return setSearchTerm("");
-    }
-  }, otherProps), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-72 flex-grow p-2 md:w-80"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-1 space-y-2"
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    autoFocus: true,
-    autoComplete: "off",
-    "data-cy": "pick-icon-text-field",
-    value: searchTerm,
-    placeholder: t("neetoMolecules.common.search", {
-      entity: t("neetoMolecules.iconPicker.entity")
-    }),
-    suffix: /*#__PURE__*/React__default.createElement(Button, {
-      icon: Close,
-      size: "small",
-      style: "link",
-      onClick: function onClick() {
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col items-start gap-2",
+    children: [label && /*#__PURE__*/jsx(Label, {
+      children: label
+    }), /*#__PURE__*/jsx(Dropdown, _objectSpread(_objectSpread({
+      buttonSize: "small",
+      buttonStyle: "secondary",
+      closeOnSelect: false,
+      dropdownProps: {
+        className: classnames("h-96", className)
+      },
+      position: "bottom-start",
+      strategy: "fixed",
+      buttonProps: {
+        "data-testid": "icon-picker-dropdown",
+        onClick: handleDropdownClick
+      },
+      label: /*#__PURE__*/jsxs("span", {
+        className: "flex items-center gap-2",
+        style: symbolsStyle,
+        children: [value && /*#__PURE__*/jsx("span", {
+          className: "material-symbols-rounded neeto-ui-text-base mx-auto",
+          children: value
+        }), /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: humanize(value) || t("neetoMolecules.iconPicker.dropdown.label")
+        })]
+      }),
+      onClose: function onClose() {
         return setSearchTerm("");
       }
-    }),
-    onChange: function onChange(e) {
-      return setSearchTerm(e.target.value);
-    }
-  }), value && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-white flex justify-center"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    className: "text-sm",
-    "data-cy": "icon-remove-button",
-    "data-testid": "icon-remove-button",
-    icon: Close,
-    label: t("neetoMolecules.iconPicker.dropdown.removeButton"),
-    style: "link",
-    onClick: handleRemoveClick
-  }))), isNotEmpty(iconList) ? /*#__PURE__*/React__default.createElement(FixedSizeGrid, {
-    className: "w-full overflow-x-hidden",
-    columnCount: GRID_PROPERTIES.columnCount,
-    height: GRID_PROPERTIES.gridHeight,
-    itemData: iconList,
-    ref: gridRef,
-    rowHeight: GRID_PROPERTIES.rowHeight,
-    width: GRID_PROPERTIES.gridWidth,
-    columnWidth: isLargerScreen() ? GRID_PROPERTIES.columnWidthDesktop : GRID_PROPERTIES.columnWidthMobile,
-    rowCount: Math.ceil(iconList.length / GRID_PROPERTIES.columnCount)
-  }, renderGridCell) : /*#__PURE__*/React__default.createElement(NoResults$1, null))));
+    }, otherProps), {}, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: "w-72 flex-grow p-2 md:w-80",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "mb-1 space-y-2",
+          children: [/*#__PURE__*/jsx(Input, {
+            autoFocus: true,
+            autoComplete: "off",
+            "data-cy": "pick-icon-text-field",
+            value: searchTerm,
+            placeholder: t("neetoMolecules.common.search", {
+              entity: t("neetoMolecules.iconPicker.entity")
+            }),
+            suffix: /*#__PURE__*/jsx(Button, {
+              icon: Close,
+              size: "small",
+              style: "link",
+              onClick: function onClick() {
+                return setSearchTerm("");
+              }
+            }),
+            onChange: function onChange(e) {
+              return setSearchTerm(e.target.value);
+            }
+          }), value && /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-white flex justify-center",
+            children: /*#__PURE__*/jsx(Button, {
+              className: "text-sm",
+              "data-cy": "icon-remove-button",
+              "data-testid": "icon-remove-button",
+              icon: Close,
+              label: t("neetoMolecules.iconPicker.dropdown.removeButton"),
+              style: "link",
+              onClick: handleRemoveClick
+            })
+          })]
+        }), isNotEmpty(iconList) ? /*#__PURE__*/jsx(FixedSizeGrid, {
+          className: "w-full overflow-x-hidden",
+          columnCount: GRID_PROPERTIES.columnCount,
+          height: GRID_PROPERTIES.gridHeight,
+          itemData: iconList,
+          ref: gridRef,
+          rowHeight: GRID_PROPERTIES.rowHeight,
+          width: GRID_PROPERTIES.gridWidth,
+          columnWidth: isLargerScreen() ? GRID_PROPERTIES.columnWidthDesktop : GRID_PROPERTIES.columnWidthMobile,
+          rowCount: Math.ceil(iconList.length / GRID_PROPERTIES.columnCount),
+          children: renderGridCell
+        }) : /*#__PURE__*/jsx(NoResults$1, {})]
+      })
+    }))]
+  });
 };
 
 export { IconPicker as default };