@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

package/dist/IconPicker.js

@@ -1,115 +1,21 @@
-import React, { useState, useRef, useEffect } from 'react';
+import _extends from '@babel/runtime/helpers/extends';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default, { 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';
+import useDebounce from '@bigbinary/neeto-commons-frontend/react-utils/useDebounce';
 import { Close } from '@bigbinary/neeto-icons';
 import { Tooltip, Typography, Label, Dropdown, Input, Button } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
 import { FixedSizeGrid } from 'react-window';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
+import { n } from './inject-css-c86de496.js';
 
 var GRID_PROPERTIES = {
   gridWidth: 300,
   gridHeight: 300,
-  columnWidth: 100,
+  columnWidthDesktop: 100,
+  columnWidthMobile: 90,
   rowHeight: 100,
   columnCount: 3
 };
@@ -121,10 +27,10 @@ var Icon = function Icon(_ref) {
     _onClick = _ref.onClick,
     symbolsStyle = _ref.symbolsStyle,
     style = _ref.style;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
     content: humanize(icon),
     position: "bottom"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__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", {
@@ -134,31 +40,29 @@ var Icon = function Icon(_ref) {
     onClick: function onClick() {
       return _onClick(icon);
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-11/12 flex-col justify-center p-1",
     style: symbolsStyle
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "material-symbols-rounded mx-auto"
-  }, icon), /*#__PURE__*/React.createElement(Typography, {
+  }, icon), /*#__PURE__*/React__default.createElement(Typography, {
     className: "text-center line-clamp-2",
     style: "body3"
   }, humanize(icon)))));
 };
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
 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.createElement(Typography, {
+  return /*#__PURE__*/React__default.createElement(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.memo(NoResults);
+var NoResults$1 = /*#__PURE__*/React__default.memo(NoResults);
 
 var _excluded = ["filled", "label", "value", "onClick", "className"];
 var IconPicker = function IconPicker(_ref) {
@@ -188,6 +92,9 @@ var IconPicker = function IconPicker(_ref) {
   var debouncedSearchTerm = useDebounce(searchTerm);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var isLargerScreen = function isLargerScreen() {
+    return window.innerWidth > 768;
+  };
   var handleSearch = function handleSearch(term) {
     var _gridRef$current;
     var searchTerm = term.toLowerCase().trim().replace(/\s+/g, "_");
@@ -229,17 +136,17 @@ var IconPicker = function IconPicker(_ref) {
       onClick(icon);
       setActiveIcon(icon);
     };
-    return icon ? /*#__PURE__*/React.createElement(Icon, {
-      active: icon === activeIcon,
+    return icon ? /*#__PURE__*/React__default.createElement(Icon, {
       icon: icon,
       style: style,
       symbolsStyle: symbolsStyle,
+      active: icon === activeIcon,
       onClick: handleIconClick
     }) : null;
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col items-start gap-2"
-  }, label && /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(Dropdown, _extends({
+  }, label && /*#__PURE__*/React__default.createElement(Label, null, label), /*#__PURE__*/React__default.createElement(Dropdown, _extends({
     buttonSize: "small",
     buttonStyle: "secondary",
     closeOnSelect: false,
@@ -252,22 +159,22 @@ var IconPicker = function IconPicker(_ref) {
       "data-testid": "icon-picker-dropdown",
       onClick: handleDropdownClick
     },
-    label: /*#__PURE__*/React.createElement("span", {
+    label: /*#__PURE__*/React__default.createElement("span", {
       className: "flex items-center gap-2",
       style: symbolsStyle
-    }, value && /*#__PURE__*/React.createElement("span", {
+    }, value && /*#__PURE__*/React__default.createElement("span", {
       className: "material-symbols-rounded neeto-ui-text-base mx-auto"
-    }, value), /*#__PURE__*/React.createElement(Typography, {
+    }, value), /*#__PURE__*/React__default.createElement(Typography, {
       style: "body2"
     }, humanize(value) || t("neetoMolecules.iconPicker.dropdown.label"))),
     onClose: function onClose() {
       return setSearchTerm("");
     }
-  }, otherProps), /*#__PURE__*/React.createElement("div", {
-    className: "w-80 flex-grow p-2"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, 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.createElement(Input, {
+  }, /*#__PURE__*/React__default.createElement(Input, {
     autoFocus: true,
     autoComplete: "off",
     "data-cy": "pick-icon-text-field",
@@ -275,7 +182,7 @@ var IconPicker = function IconPicker(_ref) {
     placeholder: t("neetoMolecules.common.search", {
       entity: t("neetoMolecules.iconPicker.entity")
     }),
-    suffix: /*#__PURE__*/React.createElement(Button, {
+    suffix: /*#__PURE__*/React__default.createElement(Button, {
       icon: Close,
       size: "small",
       style: "link",
@@ -286,9 +193,9 @@ var IconPicker = function IconPicker(_ref) {
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
     }
-  }), value && /*#__PURE__*/React.createElement("div", {
+  }), value && /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-bg-white flex justify-center"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     className: "text-sm",
     "data-cy": "icon-remove-button",
     "data-testid": "icon-remove-button",
@@ -296,17 +203,17 @@ var IconPicker = function IconPicker(_ref) {
     label: t("neetoMolecules.iconPicker.dropdown.removeButton"),
     style: "link",
     onClick: handleRemoveClick
-  }))), isNotEmpty(iconList) ? /*#__PURE__*/React.createElement(FixedSizeGrid, {
-    className: "overflow-x-hidden",
+  }))), isNotEmpty(iconList) ? /*#__PURE__*/React__default.createElement(FixedSizeGrid, {
+    className: "w-full overflow-x-hidden",
     columnCount: GRID_PROPERTIES.columnCount,
-    columnWidth: GRID_PROPERTIES.columnWidth,
     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.createElement(NoResults$1, null))));
+  }, renderGridCell) : /*#__PURE__*/React__default.createElement(NoResults$1, null))));
 };
 
 export { IconPicker as default };