@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTEmojiPicker/theme.js

@@ -1 +1,46 @@
-import Colors from"../../scss/variables/colors.module.scss";export const retrieveStyle=_ref=>{var _theme$UTEmojiPicker,_theme$UTEmojiPicker2,_theme$UTEmojiPicker3,_theme$UTEmojiPicker4,_theme$UTEmojiPicker5,_theme$UTEmojiPicker6,_theme$UTEmojiPicker7,_theme$UTEmojiPicker8,_theme$UTEmojiPicker9,_theme$UTEmojiPicker0,_theme$UTEmojiPicker1,_theme$UTEmojiPicker10,_theme$UTEmojiPicker11,_theme$UTEmojiPicker12,_theme$UTEmojiPicker13,_theme$UTEmojiPicker14,_theme$UTEmojiPicker15,_theme$UTEmojiPicker16,_theme$UTEmojiPicker17,_theme$UTEmojiPicker18,_theme$UTEmojiPicker19,_theme$UTEmojiPicker20,_theme$UTEmojiPicker21;let{theme:theme}=_ref;return{container:{backgroundColor:(null==theme||null===(_theme$UTEmojiPicker=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker||null===(_theme$UTEmojiPicker=_theme$UTEmojiPicker.container)||void 0===_theme$UTEmojiPicker?void 0:_theme$UTEmojiPicker.backgroundColor)||Colors.white,borderRadius:null==theme||null===(_theme$UTEmojiPicker2=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker2||null===(_theme$UTEmojiPicker2=_theme$UTEmojiPicker2.container)||void 0===_theme$UTEmojiPicker2?void 0:_theme$UTEmojiPicker2.borderRadius,bottom:null==theme||null===(_theme$UTEmojiPicker3=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker3||null===(_theme$UTEmojiPicker3=_theme$UTEmojiPicker3.container)||void 0===_theme$UTEmojiPicker3?void 0:_theme$UTEmojiPicker3.bottom,boxShadow:(null==theme||null===(_theme$UTEmojiPicker4=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker4||null===(_theme$UTEmojiPicker4=_theme$UTEmojiPicker4.container)||void 0===_theme$UTEmojiPicker4?void 0:_theme$UTEmojiPicker4.boxShadow)||"0px 3px 6px #E4E6EA",left:null==theme||null===(_theme$UTEmojiPicker5=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker5||null===(_theme$UTEmojiPicker5=_theme$UTEmojiPicker5.container)||void 0===_theme$UTEmojiPicker5?void 0:_theme$UTEmojiPicker5.left,right:null==theme||null===(_theme$UTEmojiPicker6=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker6||null===(_theme$UTEmojiPicker6=_theme$UTEmojiPicker6.container)||void 0===_theme$UTEmojiPicker6?void 0:_theme$UTEmojiPicker6.right,top:null==theme||null===(_theme$UTEmojiPicker7=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker7||null===(_theme$UTEmojiPicker7=_theme$UTEmojiPicker7.container)||void 0===_theme$UTEmojiPicker7?void 0:_theme$UTEmojiPicker7.top},listContainer:{height:(null==theme||null===(_theme$UTEmojiPicker8=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker8||null===(_theme$UTEmojiPicker8=_theme$UTEmojiPicker8.listContainer)||void 0===_theme$UTEmojiPicker8?void 0:_theme$UTEmojiPicker8.height)||216,width:(null==theme||null===(_theme$UTEmojiPicker9=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker9||null===(_theme$UTEmojiPicker9=_theme$UTEmojiPicker9.listContainer)||void 0===_theme$UTEmojiPicker9?void 0:_theme$UTEmojiPicker9.width)||336},emoji:{borderRadius:(null==theme||null===(_theme$UTEmojiPicker0=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker0||null===(_theme$UTEmojiPicker0=_theme$UTEmojiPicker0.emoji)||void 0===_theme$UTEmojiPicker0?void 0:_theme$UTEmojiPicker0.borderRadius)||4,fontSize:(null==theme||null===(_theme$UTEmojiPicker1=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker1||null===(_theme$UTEmojiPicker1=_theme$UTEmojiPicker1.emoji)||void 0===_theme$UTEmojiPicker1?void 0:_theme$UTEmojiPicker1.fontSize)||20,height:(null==theme||null===(_theme$UTEmojiPicker10=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker10||null===(_theme$UTEmojiPicker10=_theme$UTEmojiPicker10.emoji)||void 0===_theme$UTEmojiPicker10?void 0:_theme$UTEmojiPicker10.height)||32,margin:(null==theme||null===(_theme$UTEmojiPicker11=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker11||null===(_theme$UTEmojiPicker11=_theme$UTEmojiPicker11.emoji)||void 0===_theme$UTEmojiPicker11?void 0:_theme$UTEmojiPicker11.margin)||4,width:(null==theme||null===(_theme$UTEmojiPicker12=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker12||null===(_theme$UTEmojiPicker12=_theme$UTEmojiPicker12.emoji)||void 0===_theme$UTEmojiPicker12?void 0:_theme$UTEmojiPicker12.width)||32,"&:hover":{backgroundColor:(null==theme||null===(_theme$UTEmojiPicker13=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker13||null===(_theme$UTEmojiPicker13=_theme$UTEmojiPicker13.emoji)||void 0===_theme$UTEmojiPicker13||null===(_theme$UTEmojiPicker13=_theme$UTEmojiPicker13.hover)||void 0===_theme$UTEmojiPicker13?void 0:_theme$UTEmojiPicker13.backgroundColor)||"#E9F0FD"}},groupItem:{height:(null==theme||null===(_theme$UTEmojiPicker14=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker14||null===(_theme$UTEmojiPicker14=_theme$UTEmojiPicker14.groupItem)||void 0===_theme$UTEmojiPicker14?void 0:_theme$UTEmojiPicker14.height)||40,fill:(null==theme||null===(_theme$UTEmojiPicker15=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker15||null===(_theme$UTEmojiPicker15=_theme$UTEmojiPicker15.groupItem)||void 0===_theme$UTEmojiPicker15?void 0:_theme$UTEmojiPicker15.color)||"#677489",stroke:(null==theme||null===(_theme$UTEmojiPicker16=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker16||null===(_theme$UTEmojiPicker16=_theme$UTEmojiPicker16.groupItem)||void 0===_theme$UTEmojiPicker16?void 0:_theme$UTEmojiPicker16.color)||"#677489"},activeIcon:{backgroundColor:(null==theme||null===(_theme$UTEmojiPicker17=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker17||null===(_theme$UTEmojiPicker17=_theme$UTEmojiPicker17.groupItem)||void 0===_theme$UTEmojiPicker17||null===(_theme$UTEmojiPicker17=_theme$UTEmojiPicker17.active)||void 0===_theme$UTEmojiPicker17?void 0:_theme$UTEmojiPicker17.backgroundColor)||"#E9F0FD",borderRadius:(null==theme||null===(_theme$UTEmojiPicker18=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker18||null===(_theme$UTEmojiPicker18=_theme$UTEmojiPicker18.groupItem)||void 0===_theme$UTEmojiPicker18||null===(_theme$UTEmojiPicker18=_theme$UTEmojiPicker18.active)||void 0===_theme$UTEmojiPicker18?void 0:_theme$UTEmojiPicker18.borderRadius)||5,stroke:(null==theme||null===(_theme$UTEmojiPicker19=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker19||null===(_theme$UTEmojiPicker19=_theme$UTEmojiPicker19.groupItem)||void 0===_theme$UTEmojiPicker19||null===(_theme$UTEmojiPicker19=_theme$UTEmojiPicker19.active)||void 0===_theme$UTEmojiPicker19?void 0:_theme$UTEmojiPicker19.color)||"#2b70fb"},groups:{borderBottom:(null==theme||null===(_theme$UTEmojiPicker20=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker20||null===(_theme$UTEmojiPicker20=_theme$UTEmojiPicker20.groups)||void 0===_theme$UTEmojiPicker20?void 0:_theme$UTEmojiPicker20.borderBottom)||"1px solid #E4E6EA",padding:(null==theme||null===(_theme$UTEmojiPicker21=theme.UTEmojiPicker)||void 0===_theme$UTEmojiPicker21||null===(_theme$UTEmojiPicker21=_theme$UTEmojiPicker21.groups)||void 0===_theme$UTEmojiPicker21?void 0:_theme$UTEmojiPicker21.padding)||8}}};
+import Colors from '../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  var _theme$UTEmojiPicker, _theme$UTEmojiPicker2, _theme$UTEmojiPicker3, _theme$UTEmojiPicker4, _theme$UTEmojiPicker5, _theme$UTEmojiPicker6, _theme$UTEmojiPicker7, _theme$UTEmojiPicker8, _theme$UTEmojiPicker9, _theme$UTEmojiPicker0, _theme$UTEmojiPicker1, _theme$UTEmojiPicker10, _theme$UTEmojiPicker11, _theme$UTEmojiPicker12, _theme$UTEmojiPicker13, _theme$UTEmojiPicker14, _theme$UTEmojiPicker15, _theme$UTEmojiPicker16, _theme$UTEmojiPicker17, _theme$UTEmojiPicker18, _theme$UTEmojiPicker19, _theme$UTEmojiPicker20, _theme$UTEmojiPicker21;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker === void 0 || (_theme$UTEmojiPicker = _theme$UTEmojiPicker.container) === null || _theme$UTEmojiPicker === void 0 ? void 0 : _theme$UTEmojiPicker.backgroundColor) || Colors.white,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTEmojiPicker2 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker2 === void 0 || (_theme$UTEmojiPicker2 = _theme$UTEmojiPicker2.container) === null || _theme$UTEmojiPicker2 === void 0 ? void 0 : _theme$UTEmojiPicker2.borderRadius,
+      bottom: theme === null || theme === void 0 || (_theme$UTEmojiPicker3 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker3 === void 0 || (_theme$UTEmojiPicker3 = _theme$UTEmojiPicker3.container) === null || _theme$UTEmojiPicker3 === void 0 ? void 0 : _theme$UTEmojiPicker3.bottom,
+      boxShadow: (theme === null || theme === void 0 || (_theme$UTEmojiPicker4 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker4 === void 0 || (_theme$UTEmojiPicker4 = _theme$UTEmojiPicker4.container) === null || _theme$UTEmojiPicker4 === void 0 ? void 0 : _theme$UTEmojiPicker4.boxShadow) || '0px 3px 6px #E4E6EA',
+      left: theme === null || theme === void 0 || (_theme$UTEmojiPicker5 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker5 === void 0 || (_theme$UTEmojiPicker5 = _theme$UTEmojiPicker5.container) === null || _theme$UTEmojiPicker5 === void 0 ? void 0 : _theme$UTEmojiPicker5.left,
+      right: theme === null || theme === void 0 || (_theme$UTEmojiPicker6 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker6 === void 0 || (_theme$UTEmojiPicker6 = _theme$UTEmojiPicker6.container) === null || _theme$UTEmojiPicker6 === void 0 ? void 0 : _theme$UTEmojiPicker6.right,
+      top: theme === null || theme === void 0 || (_theme$UTEmojiPicker7 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker7 === void 0 || (_theme$UTEmojiPicker7 = _theme$UTEmojiPicker7.container) === null || _theme$UTEmojiPicker7 === void 0 ? void 0 : _theme$UTEmojiPicker7.top
+    },
+    listContainer: {
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker8 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker8 === void 0 || (_theme$UTEmojiPicker8 = _theme$UTEmojiPicker8.listContainer) === null || _theme$UTEmojiPicker8 === void 0 ? void 0 : _theme$UTEmojiPicker8.height) || 216,
+      width: (theme === null || theme === void 0 || (_theme$UTEmojiPicker9 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker9 === void 0 || (_theme$UTEmojiPicker9 = _theme$UTEmojiPicker9.listContainer) === null || _theme$UTEmojiPicker9 === void 0 ? void 0 : _theme$UTEmojiPicker9.width) || 336
+    },
+    emoji: {
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTEmojiPicker0 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker0 === void 0 || (_theme$UTEmojiPicker0 = _theme$UTEmojiPicker0.emoji) === null || _theme$UTEmojiPicker0 === void 0 ? void 0 : _theme$UTEmojiPicker0.borderRadius) || 4,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTEmojiPicker1 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker1 === void 0 || (_theme$UTEmojiPicker1 = _theme$UTEmojiPicker1.emoji) === null || _theme$UTEmojiPicker1 === void 0 ? void 0 : _theme$UTEmojiPicker1.fontSize) || 20,
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker10 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker10 === void 0 || (_theme$UTEmojiPicker10 = _theme$UTEmojiPicker10.emoji) === null || _theme$UTEmojiPicker10 === void 0 ? void 0 : _theme$UTEmojiPicker10.height) || 32,
+      margin: (theme === null || theme === void 0 || (_theme$UTEmojiPicker11 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker11 === void 0 || (_theme$UTEmojiPicker11 = _theme$UTEmojiPicker11.emoji) === null || _theme$UTEmojiPicker11 === void 0 ? void 0 : _theme$UTEmojiPicker11.margin) || 4,
+      width: (theme === null || theme === void 0 || (_theme$UTEmojiPicker12 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker12 === void 0 || (_theme$UTEmojiPicker12 = _theme$UTEmojiPicker12.emoji) === null || _theme$UTEmojiPicker12 === void 0 ? void 0 : _theme$UTEmojiPicker12.width) || 32,
+      '&:hover': {
+        backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker13 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker13 === void 0 || (_theme$UTEmojiPicker13 = _theme$UTEmojiPicker13.emoji) === null || _theme$UTEmojiPicker13 === void 0 || (_theme$UTEmojiPicker13 = _theme$UTEmojiPicker13.hover) === null || _theme$UTEmojiPicker13 === void 0 ? void 0 : _theme$UTEmojiPicker13.backgroundColor) || '#E9F0FD'
+      }
+    },
+    groupItem: {
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker14 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker14 === void 0 || (_theme$UTEmojiPicker14 = _theme$UTEmojiPicker14.groupItem) === null || _theme$UTEmojiPicker14 === void 0 ? void 0 : _theme$UTEmojiPicker14.height) || 40,
+      fill: (theme === null || theme === void 0 || (_theme$UTEmojiPicker15 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker15 === void 0 || (_theme$UTEmojiPicker15 = _theme$UTEmojiPicker15.groupItem) === null || _theme$UTEmojiPicker15 === void 0 ? void 0 : _theme$UTEmojiPicker15.color) || '#677489',
+      stroke: (theme === null || theme === void 0 || (_theme$UTEmojiPicker16 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker16 === void 0 || (_theme$UTEmojiPicker16 = _theme$UTEmojiPicker16.groupItem) === null || _theme$UTEmojiPicker16 === void 0 ? void 0 : _theme$UTEmojiPicker16.color) || '#677489'
+    },
+    activeIcon: {
+      backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker17 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker17 === void 0 || (_theme$UTEmojiPicker17 = _theme$UTEmojiPicker17.groupItem) === null || _theme$UTEmojiPicker17 === void 0 || (_theme$UTEmojiPicker17 = _theme$UTEmojiPicker17.active) === null || _theme$UTEmojiPicker17 === void 0 ? void 0 : _theme$UTEmojiPicker17.backgroundColor) || '#E9F0FD',
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTEmojiPicker18 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker18 === void 0 || (_theme$UTEmojiPicker18 = _theme$UTEmojiPicker18.groupItem) === null || _theme$UTEmojiPicker18 === void 0 || (_theme$UTEmojiPicker18 = _theme$UTEmojiPicker18.active) === null || _theme$UTEmojiPicker18 === void 0 ? void 0 : _theme$UTEmojiPicker18.borderRadius) || 5,
+      stroke: (theme === null || theme === void 0 || (_theme$UTEmojiPicker19 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker19 === void 0 || (_theme$UTEmojiPicker19 = _theme$UTEmojiPicker19.groupItem) === null || _theme$UTEmojiPicker19 === void 0 || (_theme$UTEmojiPicker19 = _theme$UTEmojiPicker19.active) === null || _theme$UTEmojiPicker19 === void 0 ? void 0 : _theme$UTEmojiPicker19.color) || '#2b70fb'
+    },
+    groups: {
+      borderBottom: (theme === null || theme === void 0 || (_theme$UTEmojiPicker20 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker20 === void 0 || (_theme$UTEmojiPicker20 = _theme$UTEmojiPicker20.groups) === null || _theme$UTEmojiPicker20 === void 0 ? void 0 : _theme$UTEmojiPicker20.borderBottom) || '1px solid #E4E6EA',
+      padding: (theme === null || theme === void 0 || (_theme$UTEmojiPicker21 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker21 === void 0 || (_theme$UTEmojiPicker21 = _theme$UTEmojiPicker21.groups) === null || _theme$UTEmojiPicker21 === void 0 ? void 0 : _theme$UTEmojiPicker21.padding) || 8
+    }
+  };
+};

package/dist/esm/components/UTEmojiPicker/utils.js

@@ -1 +1,28 @@
-import emojilib from"emojilib";import{DEFAULT_BUTTON_EMOJI_INDEX,DEFAULT_EXCLUDED_EMOJIS,GROUPS}from"./constants";const getKey=emoji=>emoji[1][0];export const getEmoji=emoji=>emoji[0];const findEmojiIndex=(emojis,key)=>emojis.findIndex(emoji=>key===getKey(emoji)),getGroups=emojis=>GROUPS.map(groupDefinition=>({key:groupDefinition.key,Icon:groupDefinition.Icon,emojis:groupDefinition.ranges.flatMap(range=>{const subgroupStart=findEmojiIndex(emojis,range[0]),subgroupEnd=range.length>1&&findEmojiIndex(emojis,range[1]);return subgroupEnd?emojis.slice(subgroupStart,subgroupEnd):[emojis[subgroupStart]]})}));export const getEmojis=function(groupsModifier){let excludedEmojis=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];const legacyGroups=getGroups(Object.entries(emojilib)).map(group=>({...group,emojis:group.emojis.filter(emoji=>![...DEFAULT_EXCLUDED_EMOJIS,...excludedEmojis].includes(getKey(emoji)))})),filteredEmojisArray=[].concat(...legacyGroups.map(group=>group.emojis));return{emojis:filteredEmojisArray,groups:groupsModifier?groupsModifier(legacyGroups):legacyGroups,buttonEmoji:getEmoji(filteredEmojisArray[DEFAULT_BUTTON_EMOJI_INDEX])}};
+import emojilib from 'emojilib';
+import { DEFAULT_BUTTON_EMOJI_INDEX, DEFAULT_EXCLUDED_EMOJIS, GROUPS } from './constants';
+const getKey = emoji => emoji[1][0];
+export const getEmoji = emoji => emoji[0];
+const findEmojiIndex = (emojis, key) => emojis.findIndex(emoji => key === getKey(emoji));
+const getGroups = emojis => GROUPS.map(groupDefinition => ({
+  key: groupDefinition.key,
+  Icon: groupDefinition.Icon,
+  emojis: groupDefinition.ranges.flatMap(range => {
+    const subgroupStart = findEmojiIndex(emojis, range[0]);
+    const subgroupEnd = range.length > 1 && findEmojiIndex(emojis, range[1]);
+    return subgroupEnd ? emojis.slice(subgroupStart, subgroupEnd) : [emojis[subgroupStart]];
+  })
+}));
+export const getEmojis = function (groupsModifier) {
+  let excludedEmojis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const legacyGroups = getGroups(Object.entries(emojilib)).map(group => ({
+    ...group,
+    emojis: group.emojis.filter(emoji => ![...DEFAULT_EXCLUDED_EMOJIS, ...excludedEmojis].includes(getKey(emoji)))
+  }));
+  const filteredEmojisArray = [].concat(...legacyGroups.map(group => group.emojis));
+  const groups = groupsModifier ? groupsModifier(legacyGroups) : legacyGroups;
+  return {
+    emojis: filteredEmojisArray,
+    groups,
+    buttonEmoji: getEmoji(filteredEmojisArray[DEFAULT_BUTTON_EMOJI_INDEX])
+  };
+};

package/dist/esm/components/UTExternalLink/constants.js

@@ -1 +1,9 @@
-export const DEFAULT_PROPS={colorTheme:"secondary"};export const COLORS_MAPPER={primary:"accent",secondary:"neutral",error:"error",negative:"negative"};
+export const DEFAULT_PROPS = {
+  colorTheme: 'secondary'
+};
+export const COLORS_MAPPER = {
+  primary: 'accent',
+  secondary: 'neutral',
+  error: 'error',
+  negative: 'negative'
+};

package/dist/esm/components/UTExternalLink/index.js

@@ -1 +1,46 @@
-import React from"react";import{objectOf,shape,string}from"prop-types";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";const UTExternalLink=_ref=>{let{children:children,className:className,classes:classes,dataTestId:dataTestId,openProps:openProps,url:url}=_ref;return React.createElement("a",{className:"".concat(classes.root," ").concat(className),"data-testid":dataTestId,href:url,onClick:openProps&&(event=>{event.preventDefault();const{openUrl:openUrl,targetName:targetName,options:options,replace:replace}=openProps,win=window.open(openUrl||url,targetName||"_blank",options,replace);win.opener=null,win.location=openUrl||url}),rel:"noopener noreferrer",target:"_blank"},children)};UTExternalLink.propTypes={className:string,classes:objectOf(string),dataTestId:string,openProps:shape({openUrl:string,targetName:string,options:string,replace:string}),url:string.isRequired};export default WithTheme(retrieveStyle)(UTExternalLink);
+import React from 'react';
+import { objectOf, shape, string } from 'prop-types';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+const UTExternalLink = _ref => {
+  let {
+    children,
+    className,
+    classes,
+    dataTestId,
+    openProps,
+    url
+  } = _ref;
+  return /*#__PURE__*/React.createElement("a", {
+    className: "".concat(classes.root, " ").concat(className),
+    "data-testid": dataTestId,
+    href: url,
+    onClick: openProps && (event => {
+      event.preventDefault();
+      const {
+        openUrl,
+        targetName,
+        options,
+        replace
+      } = openProps;
+      const win = window.open(openUrl || url, targetName || '_blank', options, replace);
+      win.opener = null;
+      win.location = openUrl || url;
+    }),
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, children);
+};
+UTExternalLink.propTypes = {
+  className: string,
+  classes: objectOf(string),
+  dataTestId: string,
+  openProps: shape({
+    openUrl: string,
+    targetName: string,
+    options: string,
+    replace: string
+  }),
+  url: string.isRequired
+};
+export default WithTheme(retrieveStyle)(UTExternalLink);

package/dist/esm/components/UTExternalLink/theme.js

@@ -1 +1,19 @@
-import{withImportant}from"../../utils/classesUtils";import{COLORS_MAPPER,DEFAULT_PROPS}from"./constants";export const variantsColorTheme=(colorTheme,theme)=>{var _theme$Palette$action;const actionColorName=COLORS_MAPPER[colorTheme]||COLORS_MAPPER[DEFAULT_PROPS.colorTheme];return((null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action[actionColorName])||theme.Palette[actionColorName])["05"]};export const retrieveStyle=_ref=>{let{colorTheme:colorTheme,theme:theme}=_ref;return{root:{color:withImportant(variantsColorTheme(colorTheme,theme))}}};
+import { withImportant } from '../../utils/classesUtils';
+import { COLORS_MAPPER, DEFAULT_PROPS } from './constants';
+export const variantsColorTheme = (colorTheme, theme) => {
+  var _theme$Palette$action;
+  const actionColorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
+  const actionTheme = ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[actionColorName]) || theme.Palette[actionColorName];
+  return actionTheme['05'];
+};
+export const retrieveStyle = _ref => {
+  let {
+    colorTheme,
+    theme
+  } = _ref;
+  return {
+    root: {
+      color: withImportant(variantsColorTheme(colorTheme, theme))
+    }
+  };
+};

package/dist/esm/components/UTFieldLabel/constants.js

@@ -1 +1 @@
-export const REQUIRED_LABEL="*";
+export const REQUIRED_LABEL = '*';

package/dist/esm/components/UTFieldLabel/index.js

@@ -1 +1,70 @@
-import React from"react";import isEmpty from"lodash/isEmpty";import isArray from"lodash/isArray";import{arrayOf,bool,object,string}from"prop-types";import UTLabel from"../UTLabel";import UTButton from"../UTButton";import UTTooltip from"../UTTooltip";import{TITLE_VARIANTS}from"../../constants/inputs";import UTIcon from"../UTIcon";import{REQUIRED_LABEL}from"./constants";import styles from"./styles.module.scss";const UTFieldLabel=_ref=>{let{actions:actions,children:children,className:className,dataTestId:dataTestId,highlighted:highlighted,icon:icon,readOnly:readOnly,required:required,size:size="large",weight:weight}=_ref;return React.createElement("div",{className:"".concat(isEmpty(actions)?"":styles.labelWithActions)},React.createElement("div",{className:"".concat(styles.label," ").concat(className)},React.createElement("div",{className:styles.labelContent},icon&&React.createElement(UTIcon,{name:icon}),React.createElement(UTLabel,{colorTheme:readOnly?"gray":highlighted?"accent":"dark",dataTestId:dataTestId,variant:TITLE_VARIANTS[size],withMarkdown:!0},children)),required&&React.createElement(UTLabel,{colorTheme:"error",shade:"04",variant:TITLE_VARIANTS[size],weight:weight},REQUIRED_LABEL)),!isEmpty(actions)&&isArray(actions)&&React.createElement("div",{className:styles.actionsContainer},actions.map(action=>{var _action$title,_action$tooltipProps;return React.createElement(UTTooltip,{arrow:!1,key:"".concat(null!==(_action$title=action.title)&&void 0!==_action$title?_action$title:action.Icon),tippyProps:{appendTo:()=>document.body,interactive:!1},content:action.tooltip,stringContentProps:null==action||null===(_action$tooltipProps=action.tooltipProps)||void 0===_action$tooltipProps?void 0:_action$tooltipProps.stringContentProps},React.createElement("div",null,React.createElement(UTButton,action,action.title)))})))};UTFieldLabel.propTypes={actions:arrayOf(object),className:string,dataTestId:string,highlighted:bool,icon:string,readOnly:bool,required:bool,size:string,weight:string};export default UTFieldLabel;
+import React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import isArray from 'lodash/isArray';
+import { arrayOf, bool, object, string } from 'prop-types';
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+import UTTooltip from '../UTTooltip';
+import { TITLE_VARIANTS } from '../../constants/inputs';
+import UTIcon from '../UTIcon';
+import { REQUIRED_LABEL } from './constants';
+import styles from './styles.module.scss';
+const UTFieldLabel = _ref => {
+  let {
+    actions,
+    children,
+    className,
+    dataTestId,
+    highlighted,
+    icon,
+    readOnly,
+    required,
+    size = 'large',
+    weight
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(!isEmpty(actions) ? styles.labelWithActions : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.label, " ").concat(className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.labelContent
+  }, icon && /*#__PURE__*/React.createElement(UTIcon, {
+    name: icon
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: readOnly ? 'gray' : highlighted ? 'accent' : 'dark',
+    dataTestId: dataTestId,
+    variant: TITLE_VARIANTS[size],
+    withMarkdown: true
+  }, children)), required && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "error",
+    shade: "04",
+    variant: TITLE_VARIANTS[size],
+    weight: weight
+  }, REQUIRED_LABEL)), !isEmpty(actions) && isArray(actions) && /*#__PURE__*/React.createElement("div", {
+    className: styles.actionsContainer
+  }, actions.map(action => {
+    var _action$title, _action$tooltipProps;
+    return /*#__PURE__*/React.createElement(UTTooltip, {
+      arrow: false,
+      key: "".concat((_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.Icon),
+      tippyProps: {
+        appendTo: () => document.body,
+        interactive: false
+      },
+      content: action.tooltip,
+      stringContentProps: action === null || action === void 0 || (_action$tooltipProps = action.tooltipProps) === null || _action$tooltipProps === void 0 ? void 0 : _action$tooltipProps.stringContentProps
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTButton, action, action.title)));
+  })));
+};
+UTFieldLabel.propTypes = {
+  actions: arrayOf(object),
+  className: string,
+  dataTestId: string,
+  highlighted: bool,
+  icon: string,
+  readOnly: bool,
+  required: bool,
+  size: string,
+  weight: string
+};
+export default UTFieldLabel;

package/dist/esm/components/UTFileInput/constants.js

@@ -1 +1,2 @@
-export const SELECT_FILE="Seleccionar archivo";export const UPLOADING="Subiendo...";
+export const SELECT_FILE = 'Seleccionar archivo';
+export const UPLOADING = 'Subiendo...';

package/dist/esm/components/UTFileInput/index.js

@@ -1 +1,8 @@
-import React,{PureComponent}from"react";import UTFileInput from"./layout";class UTFileInputContainer extends PureComponent{render(){return React.createElement(UTFileInput,this.props)}}export default UTFileInputContainer;
+import React, { PureComponent } from 'react';
+import UTFileInput from './layout';
+class UTFileInputContainer extends PureComponent {
+  render() {
+    return /*#__PURE__*/React.createElement(UTFileInput, this.props);
+  }
+}
+export default UTFileInputContainer;

package/dist/esm/components/UTFileInput/layout.js

@@ -1 +1,116 @@
-function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import React,{PureComponent,Fragment}from"react";import{string,func,bool,objectOf}from"prop-types";import UTLabel from"../UTLabel";import styles from"./styles.module.scss";var uploadIcon=function(props){return React.createElement("svg",props,React.createElement("g",{fill:"#4d97fa"},React.createElement("path",{d:"M185.749 81.664v204.501h42.667V81.664l70.251 70.251 30.165-30.166L207.083 0 85.333 121.749l30.166 30.166zM335.083 328.832v42.667h-256v-42.667H36.416v42.667c0 23.509 19.115 42.667 42.667 42.667h256c23.552 0 42.667-19.157 42.667-42.667v-42.667h-42.667z"})))};uploadIcon.defaultProps={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 414.165 414.165",style:{enableBackground:"new 0 0 414.165 414.165"},xmlSpace:"preserve",width:"512",height:"512"};import{UPLOADING,SELECT_FILE}from"./constants";class UTFileInput extends PureComponent{constructor(props){super(props),_defineProperty(this,"handleDragLeave",()=>this.setState({hasDrag:!1})),_defineProperty(this,"handleDragOver",target=>target&&this.setState({hasDrag:!0})),_defineProperty(this,"handleOnDrop",()=>this.setState({hasDrag:!1})),this.state={hasDrag:!1}}render(){const{classes:classes,containerClassname:containerClassname,dataTestId:dataTestId,disabled:disabled,error:error,errorClassname:errorClassname,errorText:errorText,fileType:fileType,icon:Icon,inputClassname:inputClassname,label:label,loading:loading,loadingTextClassname:loadingTextClassname,name:name,onChange:onChange,uploadingText:uploadingText}=this.props,UploadImage=uploadIcon;return React.createElement(Fragment,null,React.createElement("div",{className:"\n            ".concat(styles.inputContainer,"\n            ").concat(this.state.hasDrag&&styles.inputContainerDrag,"\n            ").concat(loading&&styles.inputContainerLoading,"\n            ").concat(classes.container,"\n            ").concat(containerClassname,"\n          "),onDragLeave:this.handleDragLeave,onDragOver:this.handleDragOver,onDrop:this.handleOnDrop},loading?React.createElement(Fragment,null,React.createElement(UTLabel,{colorTheme:"gray",className:"".concat(styles.loadingLabel," ").concat(loadingTextClassname)},uploadingText),React.createElement("div",{className:styles.loading})):React.createElement("div",{className:"".concat(styles.insideContainer," ").concat(disabled?styles.disabled:"")},Icon||React.createElement(UploadImage,{className:"".concat(styles.icon," ").concat(classes.icon)}),React.createElement(UTLabel,{variant:"small",className:"".concat(styles.label," ").concat(classes.fileInputLabel)},label)),React.createElement("input",{accept:fileType,className:"".concat(styles.input," ").concat(inputClassname),"data-testid":dataTestId,disabled:disabled,name:name,onChange:onChange,type:"file"})),error&&React.createElement(UTLabel,{className:errorClassname,colorTheme:"error",variant:"small"},errorText))}}UTFileInput.defaultProps={label:SELECT_FILE,uploadingText:UPLOADING},UTFileInput.propTypes={classes:objectOf(string),containerClassname:string,dataTestId:string,disabled:bool,error:bool,errorClassname:string,errorText:string,fileType:string,icon:string,inputClassname:string,label:string,loading:bool,loadingTextClassname:string,name:string,onChange:func.isRequired,uploadingText:string};export default UTFileInput;
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { PureComponent, Fragment } from 'react';
+import { string, func, bool, objectOf } from 'prop-types';
+import UTLabel from '../UTLabel';
+import styles from './styles.module.scss';
+var uploadIcon = function uploadIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("g", {
+    fill: "#4d97fa"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M185.749 81.664v204.501h42.667V81.664l70.251 70.251 30.165-30.166L207.083 0 85.333 121.749l30.166 30.166zM335.083 328.832v42.667h-256v-42.667H36.416v42.667c0 23.509 19.115 42.667 42.667 42.667h256c23.552 0 42.667-19.157 42.667-42.667v-42.667h-42.667z"
+  })));
+};
+uploadIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 414.165 414.165",
+  style: {
+    enableBackground: "new 0 0 414.165 414.165"
+  },
+  xmlSpace: "preserve",
+  width: "512",
+  height: "512"
+};
+import { UPLOADING, SELECT_FILE } from './constants';
+class UTFileInput extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleDragLeave", () => this.setState({
+      hasDrag: false
+    }));
+    _defineProperty(this, "handleDragOver", target => target && this.setState({
+      hasDrag: true
+    }));
+    _defineProperty(this, "handleOnDrop", () => this.setState({
+      hasDrag: false
+    }));
+    this.state = {
+      hasDrag: false
+    };
+  }
+  render() {
+    const {
+      classes,
+      containerClassname,
+      dataTestId,
+      disabled,
+      error,
+      errorClassname,
+      errorText,
+      fileType,
+      icon: Icon,
+      inputClassname,
+      label,
+      loading,
+      loadingTextClassname,
+      name,
+      onChange,
+      uploadingText
+    } = this.props;
+    const UploadImage = uploadIcon;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "\n            ".concat(styles.inputContainer, "\n            ").concat(this.state.hasDrag && styles.inputContainerDrag, "\n            ").concat(loading && styles.inputContainerLoading, "\n            ").concat(classes.container, "\n            ").concat(containerClassname, "\n          "),
+      onDragLeave: this.handleDragLeave,
+      onDragOver: this.handleDragOver,
+      onDrop: this.handleOnDrop
+    }, loading ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "gray",
+      className: "".concat(styles.loadingLabel, " ").concat(loadingTextClassname)
+    }, uploadingText), /*#__PURE__*/React.createElement("div", {
+      className: styles.loading
+    })) : /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.insideContainer, " ").concat(disabled ? styles.disabled : '')
+    }, Icon || /*#__PURE__*/React.createElement(UploadImage, {
+      className: "".concat(styles.icon, " ").concat(classes.icon)
+    }), /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "small",
+      className: "".concat(styles.label, " ").concat(classes.fileInputLabel)
+    }, label)), /*#__PURE__*/React.createElement("input", {
+      accept: fileType,
+      className: "".concat(styles.input, " ").concat(inputClassname),
+      "data-testid": dataTestId,
+      disabled: disabled,
+      name: name,
+      onChange: onChange,
+      type: "file"
+    })), error && /*#__PURE__*/React.createElement(UTLabel, {
+      className: errorClassname,
+      colorTheme: "error",
+      variant: "small"
+    }, errorText));
+  }
+}
+UTFileInput.defaultProps = {
+  label: SELECT_FILE,
+  uploadingText: UPLOADING
+};
+UTFileInput.propTypes = {
+  classes: objectOf(string),
+  containerClassname: string,
+  dataTestId: string,
+  disabled: bool,
+  error: bool,
+  errorClassname: string,
+  errorText: string,
+  fileType: string,
+  icon: string,
+  inputClassname: string,
+  label: string,
+  loading: bool,
+  loadingTextClassname: string,
+  name: string,
+  onChange: func.isRequired,
+  uploadingText: string
+};
+export default UTFileInput;

package/dist/esm/components/UTGoogleAutocomplete/README.md

@@ -0,0 +1,25 @@
+# UTGoogleAutocomplete
+
+Component used for searching for addresses and getting their details from Google Api.
+
+## Props
+
+
+| Name                  | Type   | Default                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                              |
+| ----------------------- | -------- | -------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiKey                | string |                                                                                | Google Api Key provided.                                                                                                                                                                                                                                                                                                                                                                                 |
+| classes               | string |                                                                                | Classes returned by UTGoogleAutocomplete's own [Theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                                                                                                                                                                                   |
+| detailErrorLabel      | string | "Hubo un error al intentar recuperar el detalle de la dirección seleccionada" | Message to show when the Google Api places detail service fails.                                                                                                                                                                                                                                                                                                                                         |
+| inputProps            | object |                                                                                | [UTTextInput](../UTTextInput/index.js) inputProps. This allows you to customize the autocomplete input.                                                                                                                                                                                                                                                                                                  |
+| minChar               | number | 3                                                                              | The component won´t call google predictions (Autocomplete service) until the user had entered at least the number indicated by minChar.                                                                                                                                                                                                                                                                 |
+| noResultsLabel        | string | 'No se encuentran resultados. Ingresa una dirección valida.'                  | Message to show to the user when google predictions don´t return anything.                                                                                                                                                                                                                                                                                                                              |
+| predictionsErrorLabel | string | "Hubo un error al intentar recuperar la dirección ingresada"                  | Message to show when the Google Api places autocomplete service fails.                                                                                                                                                                                                                                                                                                                                   |
+| retrieveError         | string | () => {}                                                                       | Func to execute when any google service fails. It retrieves the status code, since google doesn´t return the error message. Check[PlacesServiceStatus](https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=es-419#PlacesServiceStatus) for status descriptions. <br />The ideal case is to use this function to log the error into rollbar so we can be aware of it. |
+| searchRestrictions    | object | {}                                                                             | Autocomplete service restrictions. Check [AutocompletionRequest](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service?hl=es-419#AutocompletionRequest) for more information                                                                                                                                                                                  |
+| setSelectedPlace      | func   | () => {}                                                                       | Func to execute when a result from the predictions is selected.                                                                                                                                                                                                                                                                                                                                          |
+
+### Use
+
+```JSX
+<UTGoogleAutocomplete apiKey={apiKey} />
+```

package/dist/esm/components/UTGoogleAutocomplete/index.js

@@ -1 +1,132 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React,{useMemo,useRef,useState}from"react";import isEmpty from"lodash/isEmpty";import WithGoogleMapScript from"../WithGoogleMaps";import WithTheme from"../WithTheme";import UTTouchableWithoutFeedback from"../UTTouchableWithoutFeedback";import UTTextInput from"../UTTextInput";import UTIcon from"../UTIcon";import UTLabel from"../UTLabel";import AlertHandler from"../UTAlert/AlertHandler";import UTAlert from"../UTAlert";import{UTGoogleAutocompletePropTypes}from"../../types/googleMapsTypes";import{retrieveStyle}from"./theme";import googleLogo from"./assets/google_on_white.png";const UTGoogleAutocomplete=_ref=>{let{alert:alert,classes:classes,dataTestId:dataTestId,detailErrorLabel:detailErrorLabel="Hubo un error al intentar recuperar el detalle de la dirección seleccionada",helperTextDataTestId:helperTextDataTestId,inputProps:inputProps,minChar:minChar=3,noResultsLabel:noResultsLabel="No se encuentran resultados. Ingresa una dirección valida.",onChange:onChange,predictionsErrorLabel:predictionsErrorLabel="Hubo un error al intentar recuperar la dirección ingresada",retrieveError:retrieveError=()=>{},searchRestrictions:searchRestrictions={},setSelectedPlace:setSelectedPlace=()=>{},value:value}=_ref;const[autoCompletePredictions,setAutoCompletePredictions]=useState([]),[predictionsNotFound,setPredictionsNotFound]=useState(!1),[showPredictions,setShowPredicitions]=useState(!1),placeDetailRef=useRef(),{google:google}=window,googleAutocompleteService=new google.maps.places.AutocompleteService,GOOGLE_OK_STATUS=google.maps.places.PlacesServiceStatus.OK,GOOGLE_ZERO_STATUS=google.maps.places.PlacesServiceStatus.ZERO_RESULTS,sessionToken=useMemo(()=>new google.maps.places.AutocompleteSessionToken,[google.maps.places.AutocompleteSessionToken]),handlePredictions=(predictions,status)=>{if(status===GOOGLE_OK_STATUS){setShowPredicitions(!0),setPredictionsNotFound(!1);const autocompleteSuggestions=predictions.map(prediction=>({id:prediction.place_id,name:prediction.description}));return setAutoCompletePredictions(autocompleteSuggestions)}status===GOOGLE_ZERO_STATUS?(setPredictionsNotFound(!0),setAutoCompletePredictions([])):(AlertHandler.error(predictionsErrorLabel),retrieveError(status))},handleGetDetails=(place,status)=>{status===GOOGLE_OK_STATUS?(setShowPredicitions(!1),setSelectedPlace(place)):(AlertHandler.error(detailErrorLabel),retrieveError(status))};return React.createElement("div",{className:classes.inputContainer},React.createElement(UTAlert,{content:alert}),React.createElement(UTTextInput,_extends({dataTestId:dataTestId,helperTextDataTestId:helperTextDataTestId,input:{value:value,onChange:inputValue=>{onChange(inputValue),inputValue.length>=minChar?googleAutocompleteService.getPlacePredictions({input:inputValue,sessionToken:sessionToken,...searchRestrictions},handlePredictions):(setAutoCompletePredictions([]),setSelectedPlace(null))}},inputClassName:classes.inputClassName},inputProps)),showPredictions&&!isEmpty(autoCompletePredictions)&&autoCompletePredictions.map(_ref2=>{let{id:id,name:name}=_ref2;return React.createElement("div",{ref:placeDetailRef,key:id},React.createElement(UTTouchableWithoutFeedback,{onClick:()=>{onChange(name);new google.maps.places.PlacesService(placeDetailRef.current).getDetails({placeId:id},handleGetDetails)},className:classes.resultsContainer},React.createElement(UTIcon,{size:20,name:"IconMapPin",className:classes.resultIcon}),React.createElement(UTLabel,null,name)))}),value.length>=minChar&&predictionsNotFound&&React.createElement("div",{className:classes.noResultsContainer},React.createElement(UTIcon,{size:32,name:"IconSearchOff",className:classes.noResultsIcon}),React.createElement(UTLabel,{colorTheme:"gray"},noResultsLabel)),React.createElement("img",{className:classes.googlelogo,src:googleLogo,alt:"googleLogo"}))};UTGoogleAutocomplete.propTypes=UTGoogleAutocompletePropTypes;export default WithTheme(retrieveStyle)(WithGoogleMapScript()(UTGoogleAutocomplete));
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useMemo, useRef, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import WithGoogleMapScript from '../WithGoogleMaps';
+import WithTheme from '../WithTheme';
+import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
+import UTTextInput from '../UTTextInput';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import AlertHandler from '../UTAlert/AlertHandler';
+import UTAlert from '../UTAlert';
+import { UTGoogleAutocompletePropTypes } from '../../types/googleMapsTypes';
+import { retrieveStyle } from './theme';
+import googleLogo from './assets/google_on_white.png';
+const UTGoogleAutocomplete = _ref => {
+  let {
+    alert,
+    classes,
+    dataTestId,
+    detailErrorLabel = 'Hubo un error al intentar recuperar el detalle de la dirección seleccionada',
+    helperTextDataTestId,
+    inputProps,
+    minChar = 3,
+    noResultsLabel = 'No se encuentran resultados. Ingresa una dirección valida.',
+    onChange,
+    predictionsErrorLabel = 'Hubo un error al intentar recuperar la dirección ingresada',
+    retrieveError = () => {},
+    searchRestrictions = {},
+    setSelectedPlace = () => {},
+    value
+  } = _ref;
+  const [autoCompletePredictions, setAutoCompletePredictions] = useState([]);
+  const [predictionsNotFound, setPredictionsNotFound] = useState(false);
+  const [showPredictions, setShowPredicitions] = useState(false);
+  const placeDetailRef = useRef();
+  const {
+    google
+  } = window;
+  const googleAutocompleteService = new google.maps.places.AutocompleteService();
+  const GOOGLE_OK_STATUS = google.maps.places.PlacesServiceStatus.OK;
+  const GOOGLE_ZERO_STATUS = google.maps.places.PlacesServiceStatus.ZERO_RESULTS;
+  const sessionToken = useMemo(() => new google.maps.places.AutocompleteSessionToken(), [google.maps.places.AutocompleteSessionToken]);
+  const handlePredictions = (predictions, status) => {
+    if (status === GOOGLE_OK_STATUS) {
+      setShowPredicitions(true);
+      setPredictionsNotFound(false);
+      const autocompleteSuggestions = predictions.map(prediction => ({
+        id: prediction.place_id,
+        name: prediction.description
+      }));
+      return setAutoCompletePredictions(autocompleteSuggestions);
+    }
+    if (status === GOOGLE_ZERO_STATUS) {
+      setPredictionsNotFound(true);
+      setAutoCompletePredictions([]);
+    } else {
+      AlertHandler.error(predictionsErrorLabel);
+      retrieveError(status);
+    }
+  };
+  const handleInputChange = inputValue => {
+    onChange(inputValue);
+    if (inputValue.length >= minChar) {
+      googleAutocompleteService.getPlacePredictions({
+        input: inputValue,
+        sessionToken,
+        ...searchRestrictions
+      }, handlePredictions);
+    } else {
+      setAutoCompletePredictions([]);
+      setSelectedPlace(null);
+    }
+  };
+  const handleGetDetails = (place, status) => {
+    if (status === GOOGLE_OK_STATUS) {
+      setShowPredicitions(false);
+      setSelectedPlace(place);
+    } else {
+      AlertHandler.error(detailErrorLabel);
+      retrieveError(status);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.inputContainer
+  }, /*#__PURE__*/React.createElement(UTAlert, {
+    content: alert
+  }), /*#__PURE__*/React.createElement(UTTextInput, _extends({
+    dataTestId: dataTestId,
+    helperTextDataTestId: helperTextDataTestId,
+    input: {
+      value,
+      onChange: handleInputChange
+    },
+    inputClassName: classes.inputClassName
+  }, inputProps)), showPredictions && !isEmpty(autoCompletePredictions) && autoCompletePredictions.map(_ref2 => {
+    let {
+      id,
+      name
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: placeDetailRef,
+      key: id
+    }, /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+      onClick: () => {
+        onChange(name);
+        const googleGetPlaceService = new google.maps.places.PlacesService(placeDetailRef.current);
+        googleGetPlaceService.getDetails({
+          placeId: id
+        }, handleGetDetails);
+      },
+      className: classes.resultsContainer
+    }, /*#__PURE__*/React.createElement(UTIcon, {
+      size: 20,
+      name: "IconMapPin",
+      className: classes.resultIcon
+    }), /*#__PURE__*/React.createElement(UTLabel, null, name)));
+  }), value.length >= minChar && predictionsNotFound && /*#__PURE__*/React.createElement("div", {
+    className: classes.noResultsContainer
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    size: 32,
+    name: "IconSearchOff",
+    className: classes.noResultsIcon
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray"
+  }, noResultsLabel)), /*#__PURE__*/React.createElement("img", {
+    className: classes.googlelogo,
+    src: googleLogo,
+    alt: "googleLogo"
+  }));
+};
+UTGoogleAutocomplete.propTypes = UTGoogleAutocompletePropTypes;
+export default WithTheme(retrieveStyle)(WithGoogleMapScript()(UTGoogleAutocomplete));

package/dist/esm/components/UTGoogleAutocomplete/theme.js

@@ -1 +1,45 @@
-export const retrieveStyle=_ref=>{var _theme$Palette$action;let{theme:theme}=_ref;return{googlelogo:{width:"45px"},inputContainer:{borderRadius:"8px",display:"flex",flexDirection:"column",gridGap:"8px",maxWidth:"480px",padding:"16px",width:"480px"},inputClassName:{width:"480px"},noResultsContainer:{alignItems:"center",display:"flex",flexDirection:"column",gridGap:"24px",padding:"16px"},noResultsIcon:{backgroundColor:theme.Palette.light["03"],borderRadius:"25px",color:theme.Palette.light["05"],padding:"9px"},resultsContainer:{display:"flex",gridGap:"16px",padding:"12px 0"},resultIcon:{color:(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action.neutral["05"])||theme.Palette.neutral["05"],minWidth:"20px"}}};
+export const retrieveStyle = _ref => {
+  var _theme$Palette$action;
+  let {
+    theme
+  } = _ref;
+  return {
+    googlelogo: {
+      width: '45px'
+    },
+    inputContainer: {
+      borderRadius: '8px',
+      display: 'flex',
+      flexDirection: 'column',
+      gridGap: '8px',
+      maxWidth: '480px',
+      padding: '16px',
+      width: '480px'
+    },
+    inputClassName: {
+      width: '480px'
+    },
+    noResultsContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      gridGap: '24px',
+      padding: '16px'
+    },
+    noResultsIcon: {
+      backgroundColor: theme.Palette.light['03'],
+      borderRadius: '25px',
+      color: theme.Palette.light['05'],
+      padding: '9px'
+    },
+    resultsContainer: {
+      display: 'flex',
+      gridGap: '16px',
+      padding: '12px 0'
+    },
+    resultIcon: {
+      color: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.neutral['05']) || theme.Palette.neutral['05'],
+      minWidth: '20px'
+    }
+  };
+};