@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTDotMenu/stories/UTDotMenu.stories.js

@@ -0,0 +1,263 @@
+/* eslint-disable no-alert */
+import React from 'react';
+import UTDotMenu from '..';
+const BASIC_OPTIONS = [{
+  name: 'Editar',
+  onPress: () => alert('Editar')
+}, {
+  name: 'Duplicar',
+  onPress: () => alert('Duplicar')
+}, {
+  name: 'Eliminar',
+  onPress: () => alert('Eliminar')
+}];
+const OPTIONS_WITH_ICONS = [{
+  name: 'Editar',
+  onPress: () => alert('Editar'),
+  icon: 'IconPencil'
+}, {
+  name: 'Duplicar',
+  onPress: () => alert('Duplicar'),
+  icon: 'IconCopy'
+}, {
+  name: 'Eliminar',
+  onPress: () => alert('Eliminar'),
+  icon: 'IconTrash',
+  colorTheme: 'error'
+}];
+export default {
+  args: {
+    options: BASIC_OPTIONS
+  },
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Clase CSS aplicada al contenedor raíz.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: 'Clases personalizadas para el botón trigger. Acepta `button` e `icon`.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'shape({ button: string, icon: string })'
+        }
+      }
+    },
+    Icon: {
+      control: 'text',
+      description: 'Ícono del botón trigger. Acepta un nombre de ícono de Tabler (string) o un componente React. Por defecto muestra el ícono de tres puntos verticales (MoreVertIcon).',
+      table: {
+        defaultValue: {
+          summary: 'MoreVertIcon'
+        },
+        type: {
+          summary: 'elementType | string'
+        }
+      }
+    },
+    menuItemProps: {
+      control: false,
+      description: 'Props pasadas a cada `MenuItem` de MUI. Útil para sobreescribir estilos como `minHeight` (ej: `{ style: { minHeight: "auto" } }`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    menuProps: {
+      control: false,
+      description: 'Props pasadas al `Menu` de MUI. El Paper tiene `borderRadius: 8px` por defecto, sobreescribible vía `menuProps.PaperProps`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    options: {
+      control: false,
+      description: 'Array de opciones del menú. Cada opción puede incluir `icon`, `colorTheme` e `iconProps` para pasar props extra a UTIcon.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf(shape({ name, onPress, colorTheme?, icon?, iconProps? }))'
+        }
+      }
+    },
+    size: {
+      control: 'inline-radio',
+      description: 'Tamaño del botón trigger. Se pasa directamente a UTButton.',
+      options: ['xs', 'small', 'medium', 'large'],
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  component: UTDotMenu,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Botón de tres puntos que despliega un menú de opciones. Cada opción acepta un ícono (UTIcon) y un colorTheme para el texto, ' + 'lo que permite marcar ítems destructivos (como "Eliminar") con color negativo. ' + 'El ícono del botón trigger también es configurable.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTDotMenu'
+};
+export const Playground = {
+  args: {
+    options: [{
+      name: 'Editar',
+      icon: 'IconPencil'
+    }, {
+      name: 'Duplicar',
+      icon: 'IconCopy'
+    }, {
+      name: 'Eliminar',
+      icon: 'IconTrash',
+      colorTheme: 'error'
+    }]
+  },
+  name: 'Playground'
+};
+export const Default = {
+  args: {
+    options: BASIC_OPTIONS
+  },
+  name: 'Default',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Uso básico: opciones sin ícono ni colorTheme. Comportamiento idéntico a la versión anterior del componente.'
+      }
+    }
+  }
+};
+export const ConIconos = {
+  args: {
+    options: OPTIONS_WITH_ICONS
+  },
+  name: 'Con íconos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Opciones con ícono a la izquierda del texto. El último ítem usa `colorTheme: "error"` para indicar una acción destructiva.'
+      }
+    }
+  }
+};
+export const AccionDestructiva = {
+  args: {
+    options: [{
+      name: 'Ver detalle',
+      icon: 'IconEye'
+    }, {
+      name: 'Editar',
+      icon: 'IconPencil'
+    }, {
+      name: 'Eliminar',
+      icon: 'IconTrash',
+      colorTheme: 'error'
+    }]
+  },
+  name: 'Acción destructiva',
+  parameters: {
+    docs: {
+      description: {
+        story: '`colorTheme: "error"` aplica el color destructivo del tema activo al texto y al ícono del ítem. ' + 'El color es resuelto internamente por `UTLabel` y `UTIcon`, adaptándose a los 14 temas de cliente.'
+      }
+    }
+  }
+};
+export const Small = {
+  args: {
+    menuItemProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    options: OPTIONS_WITH_ICONS,
+    size: 'small'
+  },
+  name: 'Small',
+  parameters: {
+    docs: {
+      description: {
+        story: '`size="small"` reduce el botón trigger. `menuItemProps={{ style: { minHeight: "auto" } }}` elimina el `min-height: 48px` que MUI aplica a los ítems en pantallas de 600px+.'
+      }
+    }
+  }
+};
+export const ConIconProps = {
+  args: {
+    options: [{
+      name: 'Editar',
+      icon: 'IconPencil',
+      iconProps: {
+        size: 20
+      }
+    }, {
+      name: 'Duplicar',
+      icon: 'IconCopy',
+      iconProps: {
+        size: 20
+      }
+    }, {
+      name: 'Eliminar',
+      icon: 'IconTrash',
+      colorTheme: 'error',
+      iconProps: {
+        size: 20
+      }
+    }]
+  },
+  name: 'Con iconProps',
+  parameters: {
+    docs: {
+      description: {
+        story: '`iconProps` permite pasar props extra directamente a `UTIcon` (ej: `size`, `shade`, `fillTheme`). ' + 'Si `iconProps` incluye `colorTheme`, sobreescribe el color del ícono sin afectar el color del texto.'
+      }
+    }
+  }
+};
+export const IconoPersonalizado = {
+  args: {
+    Icon: () => /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 20,
+        lineHeight: 1
+      }
+    }, "\u22EF"),
+    options: BASIC_OPTIONS
+  },
+  name: 'Ícono trigger personalizado',
+  parameters: {
+    docs: {
+      description: {
+        story: 'La prop `Icon` permite reemplazar el ícono de tres puntos por cualquier componente. ' + 'Por defecto usa `MoreVertIcon` de Material-UI.'
+      }
+    }
+  }
+};

package/dist/esm/components/UTDotMenu/styles.module.scss

@@ -0,0 +1,3 @@
+.optionIcon {
+  margin-right: var(--gap-sm);
+}

package/dist/esm/components/UTEmojiPicker/assets/creative.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#677489" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" />
+  <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" />
+  <line x1="9.7" y1="17" x2="14.3" y2="17" />
+</svg>

package/dist/esm/components/UTEmojiPicker/assets/faces.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mood-smile" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#677489" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="9" />
+  <line x1="9" y1="10" x2="9.01" y2="10" />
+  <line x1="15" y1="10" x2="15.01" y2="10" />
+  <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+</svg>

package/dist/esm/components/UTEmojiPicker/assets/flags.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-flag" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#677489" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="5" y1="5" x2="5" y2="21" />
+  <line x1="19" y1="5" x2="19" y2="14" />
+  <path d="M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0" />
+  <path d="M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0" />
+</svg>

package/dist/esm/components/UTEmojiPicker/assets/food.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-pizza" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#677489" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 21.5c-3.04 0 -5.952 -.714 -8.5 -1.983l8.5 -16.517l8.5 16.517a19.09 19.09 0 0 1 -8.5 1.983z" />
+  <path d="M5.38 15.866a14.94 14.94 0 0 0 6.815 1.634a14.944 14.944 0 0 0 6.502 -1.479" />
+  <path d="M13 11.01v-.01" />
+  <path d="M11 14v-.01" />
+</svg>

package/dist/esm/components/UTEmojiPicker/assets/language.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#677489" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
+</svg>

package/dist/esm/components/UTEmojiPicker/assets/nature.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-leaf" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#677489" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 21c.5 -4.5 2.5 -8 7 -10" />
+  <path d="M9 18c6.218 0 10.5 -3.288 11 -12v-2h-4.014c-9 0 -11.986 4 -12 9c0 1 0 3 2 5h3z" />
+</svg>

package/dist/esm/components/UTEmojiPicker/assets/sports.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ball-american-football" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#677489" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="15" y1="9" x2="9" y2="15" />
+  <line x1="10" y1="12" x2="12" y2="14" />
+  <line x1="12" y1="10" x2="14" y2="12" />
+  <path d="M8 21a5 5 0 0 0 -5 -5" />
+  <path d="M16 3c-7.18 0 -13 5.82 -13 13a5 5 0 0 0 5 5c7.18 0 13 -5.82 13 -13a5 5 0 0 0 -5 -5" />
+  <path d="M16 3a5 5 0 0 0 5 5" />
+</svg>

package/dist/esm/components/UTEmojiPicker/assets/travel.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plane" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#677489" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 10h4a2 2 0 0 1 0 4h-4l-4 7h-3l2 -7h-4l-2 2h-3l2 -4l-2 -4h3l2 2h4l-2 -7h3z" />
+</svg>

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

@@ -0,0 +1,195 @@
+import React from "react";
+var Faces = function Faces(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9 10h.01M15 10h.01M9.5 15a3.5 3.5 0 0 0 5 0"
+  }));
+};
+Faces.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "icon icon-tabler icon-tabler-mood-smile",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  strokeWidth: "2",
+  stroke: "#677489",
+  fill: "none",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var Nature = function Nature(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M5 21c.5-4.5 2.5-8 7-10"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9 18c6.218 0 10.5-3.288 11-12V4h-4.014c-9 0-11.986 4-12 9 0 1 0 3 2 5h3z"
+  }));
+};
+Nature.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "icon icon-tabler icon-tabler-leaf",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  strokeWidth: "2",
+  stroke: "#677489",
+  fill: "none",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var Language = function Language(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M19.5 13.572 12 21l-7.5-7.428m0 0A5 5 0 1 1 12 7.006a5 5 0 1 1 7.5 6.572"
+  }));
+};
+Language.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "icon icon-tabler icon-tabler-heart",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  strokeWidth: "2",
+  stroke: "#677489",
+  fill: "none",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var Sports = function Sports(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "m15 9-6 6M10 12l2 2M12 10l2 2M8 21a5 5 0 0 0-5-5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 3C8.82 3 3 8.82 3 16a5 5 0 0 0 5 5c7.18 0 13-5.82 13-13a5 5 0 0 0-5-5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 3a5 5 0 0 0 5 5"
+  }));
+};
+Sports.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "icon icon-tabler icon-tabler-ball-american-football",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  strokeWidth: "2",
+  stroke: "#677489",
+  fill: "none",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var Food = function Food(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M12 21.5c-3.04 0-5.952-.714-8.5-1.983L12 3l8.5 16.517A19.09 19.09 0 0 1 12 21.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5.38 15.866a14.94 14.94 0 0 0 6.815 1.634 14.944 14.944 0 0 0 6.502-1.479M13 11.01V11M11 14v-.01"
+  }));
+};
+Food.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "icon icon-tabler icon-tabler-pizza",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  strokeWidth: "2",
+  stroke: "#677489",
+  fill: "none",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var Travel = function Travel(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M16 10h4a2 2 0 0 1 0 4h-4l-4 7H9l2-7H7l-2 2H2l2-4-2-4h3l2 2h4L9 3h3z"
+  }));
+};
+Travel.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "icon icon-tabler icon-tabler-plane",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  strokeWidth: "2",
+  stroke: "#677489",
+  fill: "none",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var Creative = function Creative(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7-.7.7M9 16a5 5 0 1 1 6 0 3.5 3.5 0 0 0-1 3 2 2 0 0 1-4 0 3.5 3.5 0 0 0-1-3M9.7 17h4.6"
+  }));
+};
+Creative.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "icon icon-tabler icon-tabler-bulb",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  strokeWidth: "2",
+  stroke: "#677489",
+  fill: "none",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var Flags = function Flags(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M5 5v16M19 5v9M5 5a5 5 0 0 1 7 0 5 5 0 0 0 7 0M5 14a5 5 0 0 1 7 0 5 5 0 0 0 7 0"
+  }));
+};
+Flags.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  className: "icon icon-tabler icon-tabler-flag",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  strokeWidth: "2",
+  stroke: "#677489",
+  fill: "none",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+export const DEFAULT_EXCLUDED_EMOJIS = ['black cat', 'smiling_face', 'face exhaling', 'face in clouds', 'face exhaling', 'man beard', 'person_red_hair', 'person_curly_hair', 'person_white_hair', 'person_bald', 'health_worker', 'student', 'teacher', 'judge', 'farmer', 'cook', 'mechanic', 'factory_worker', 'office_worker', 'scientist', 'technologist', 'singer', 'artist', 'pilot', 'astronaut', 'firefighter', 'smiling face with tear', 'ninja', 'man in tuxedo', 'woman in tuxedo', 'man with veil', 'woman with veil', 'woman feeding baby', 'man feeding baby', 'person feeding baby', 'bison', 'mammoth', 'beaver', 'polar bear', 'dodo', 'feather', 'seal', 'beetle', 'cockroach', 'fly', 'worm', 'blueberries', 'olive', 'bell pepper', 'flatbread', 'tamale', 'fondue', 'teapot', 'person_in_manual_wheelchair', 'person_in_motorized_wheelchair', 'person_with_probing_cane', 'rock', 'wood', 'knot', 'sewing needle', 'nesting dolls', 'pinata', 'magic wand', 'roller skate', 'pickup truck', 'hut', 'thong sandal', 'military helmet', 'accordion', 'long drum', 'coin', 'boomerang', 'carpentry saw', 'screwdriver', 'hook', 'ladder', 'elevator', 'mirror', 'window', 'plunger', 'mouse trap', 'bucket', 'toothbrush', 'headstone', 'placard', 'pinched fingers', 'anatomical heart', 'pinched fingers', 'anatomical heart', 'heart on fire', 'mending heart', 'man beard', 'flag_england', 'flag_scotland', 'transgender flag'];
+export const DEFAULT_VIRTUALIZED_LIST_CONFIG = {
+  overscan: 10,
+  elementsPerRow: 8,
+  itemPadding: 0
+};
+export const DEFAULT_BUTTON_EMOJI_INDEX = 0;
+export const DEFAULT_POSITIONS = {
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight'
+};
+export const GROUPS = [{
+  key: 'faces',
+  ranges: [['grinning_face', 'hear_no_evil_monkey'], ['face exhaling'], ['face in clouds', 'face with spiral eyes'], ['man beard', 'woman beard'], ['baby', 'woman_getting_haircut'], ['smiling face with tear', 'disguised face'], ['ninja', 'mx claus']],
+  Icon: Faces
+}, {
+  key: 'nature',
+  ranges: [['footprints', 'leaf_fluttering_in_wind'], ['black cat', 'potted plant']],
+  Icon: Nature
+}, {
+  key: 'food',
+  ranges: [['grapes', 'amphora'], ['blueberries', 'bubble tea']],
+  Icon: Food
+}, {
+  key: 'sports',
+  ranges: [['person_walking', 'woman_in_lotus_position']],
+  Icon: Sports
+}, {
+  key: 'travel',
+  ranges: [['globe_showing_europe_africa', 'aerial_tramway']],
+  Icon: Travel
+}, {
+  key: 'creative',
+  ranges: [['satellite', 'moai'], ['rock', 'transgender symbol']],
+  Icon: Creative
+}, {
+  key: 'language',
+  ranges: [['kiss_mark', 'mouth'], ['person_taking_bath', 'busts_in_silhouette'], ['atm_sign', 'black_square_button'], ['pinched fingers', 'lungs'], ['heart on fire', ['mending heart']]],
+  Icon: Language
+}, {
+  key: 'flags',
+  ranges: [['chequered_flag', 'pirate_flag'], ['transgender flag']],
+  Icon: Flags
+}];

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

@@ -0,0 +1,95 @@
+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, { useCallback, useMemo, useState } from 'react';
+import { arrayOf, elementType, func, object, bool, objectOf, string } from 'prop-types';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import { UTVirtualizedList } from '../..';
+import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
+import { mergeClasses } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+import { getEmoji, getEmojis } from './utils';
+import { DEFAULT_POSITIONS, DEFAULT_VIRTUALIZED_LIST_CONFIG } from './constants';
+const UTEmojiPicker = _ref => {
+  let {
+    ButtonComponent = UTTouchableWithoutFeedback,
+    classes: themeClasses,
+    classNames,
+    closeOnPick = true,
+    excludedEmojis,
+    groupsModifier,
+    handlePick,
+    popperPosition = DEFAULT_POSITIONS.BOTTOM_RIGHT,
+    virtualizedListProps
+  } = _ref;
+  const [activeGroup, setActiveGroup] = useState();
+  const [isOpen, setIsOpen] = useState(false);
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const {
+    emojis,
+    groups,
+    buttonEmoji
+  } = useMemo(() => getEmojis(groupsModifier, excludedEmojis), [groupsModifier, excludedEmojis]);
+  const toggleOpen = () => {
+    setIsOpen(!isOpen);
+  };
+  const emojiRenderer = useCallback(emojiData => /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    onMouseDown: e => {
+      e.preventDefault();
+      if (closeOnPick) setIsOpen(false);
+      handlePick(emojiData);
+    },
+    className: "".concat(styles.emoji, " ").concat(classes.emoji)
+  }, getEmoji(emojiData)), [handlePick]);
+  const groupEmojiRenderer = useCallback(_ref2 => {
+    let {
+      Icon,
+      key
+    } = _ref2;
+    const isActive = key === activeGroup;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.groupItem, " ").concat(classes.groupItem),
+      key: key,
+      onClick: () => setActiveGroup(isActive ? null : key),
+      role: "button",
+      "aria-label": "group"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: isActive ? "".concat(styles.activeIcon, " ").concat(classes.activeIcon) : ''
+    }));
+  }, [activeGroup]);
+  return /*#__PURE__*/React.createElement(ClickAwayListener, {
+    onClickAway: () => setIsOpen(false)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.buttonContainer
+  }, /*#__PURE__*/React.createElement(ButtonComponent, {
+    className: classes.emojiButton,
+    onClick: toggleOpen
+  }, buttonEmoji), /*#__PURE__*/React.createElement("div", {
+    className: "\n            ".concat(styles.container, "\n            ").concat(classes.container, "\n            ").concat(styles[popperPosition], "\n            ").concat(!isOpen && styles.hiddenPicker, "\n          ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.groups, " ").concat(classes.groups)
+  }, groups.map(groupEmojiRenderer)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.listContainer, " ").concat(classes.listContainer)
+  }, /*#__PURE__*/React.createElement(UTVirtualizedList, _extends({
+    data: activeGroup ? groups.find(_ref3 => {
+      let {
+        key
+      } = _ref3;
+      return key === activeGroup;
+    }).emojis : emojis,
+    itemRenderer: emojiRenderer
+  }, DEFAULT_VIRTUALIZED_LIST_CONFIG, virtualizedListProps))))));
+};
+UTEmojiPicker.propTypes = {
+  ButtonComponent: elementType,
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  closeOnPick: bool,
+  excludedEmojis: arrayOf(string),
+  handlePick: func,
+  groupsModifier: func,
+  popperPosition: string,
+  virtualizedListProps: object
+};
+export default WithTheme(retrieveStyle)(UTEmojiPicker);