@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -0,0 +1,328 @@
+/* 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'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'Test id del contenedor raíz. El botón trigger recibe automáticamente el valor de esta prop con el sufijo `.button`. ' + 'Cada ítem del menú usa su propio `dataTestId` directamente (sin concatenación con el contenedor).',
+      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 })'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el botón trigger. Cuando es `true`, el menú no puede abrirse.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    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`, `iconProps` para props extra a UTIcon, ' + 'y `dataTestId` para identificar el ítem. El test id del ítem se usa directamente tal como se provee en la opción.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf(shape({ name, onPress, colorTheme?, dataTestId?, 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 ConTestIds = {
+  args: {
+    dataTestId: 'section.dotMenu',
+    options: [{
+      name: 'Editar',
+      icon: 'IconPencil',
+      dataTestId: 'section.dotMenu.edit'
+    }, {
+      name: 'Duplicar',
+      icon: 'IconCopy',
+      dataTestId: 'section.dotMenu.duplicate'
+    }, {
+      name: 'Eliminar',
+      icon: 'IconTrash',
+      colorTheme: 'error',
+      dataTestId: 'section.dotMenu.delete'
+    }]
+  },
+  name: 'Con test ids',
+  parameters: {
+    docs: {
+      description: {
+        story: 'El contenedor recibe `dataTestId="section.dotMenu"` y el botón trigger recibe `"section.dotMenu.button"` automáticamente. ' + 'Cada ítem usa su propio `dataTestId` tal como se provee, sin concatenación con el contenedor.'
+      }
+    }
+  }
+};
+export const BotonDeshabilitado = {
+  args: {
+    disabled: true,
+    options: BASIC_OPTIONS
+  },
+  name: 'Botón deshabilitado',
+  parameters: {
+    docs: {
+      description: {
+        story: '`disabled={true}` deshabilita el botón trigger. El menú no puede abrirse.'
+      }
+    }
+  }
+};
+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/UTEmojiPicker/constants.js

@@ -1 +1,195 @@
-import React from"react";var Faces=function(props){return React.createElement("svg",props,React.createElement("circle",{cx:"12",cy:"12",r:"9"}),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(props){return React.createElement("svg",props,React.createElement("path",{d:"M5 21c.5-4.5 2.5-8 7-10"}),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(props){return React.createElement("svg",props,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(props){return React.createElement("svg",props,React.createElement("path",{d:"m15 9-6 6M10 12l2 2M12 10l2 2M8 21a5 5 0 0 0-5-5"}),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"}),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(props){return React.createElement("svg",props,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"}),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(props){return React.createElement("svg",props,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(props){return React.createElement("svg",props,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(props){return React.createElement("svg",props,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}];
+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

@@ -1 +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:ButtonComponent=UTTouchableWithoutFeedback,classes:themeClasses,classNames:classNames,closeOnPick:closeOnPick=!0,excludedEmojis:excludedEmojis,groupsModifier:groupsModifier,handlePick:handlePick,popperPosition:popperPosition=DEFAULT_POSITIONS.BOTTOM_RIGHT,virtualizedListProps:virtualizedListProps}=_ref;const[activeGroup,setActiveGroup]=useState(),[isOpen,setIsOpen]=useState(!1),classes=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]),{emojis:emojis,groups:groups,buttonEmoji:buttonEmoji}=useMemo(()=>getEmojis(groupsModifier,excludedEmojis),[groupsModifier,excludedEmojis]),emojiRenderer=useCallback(emojiData=>React.createElement("div",{role:"button",onMouseDown:e=>{e.preventDefault(),closeOnPick&&setIsOpen(!1),handlePick(emojiData)},className:"".concat(styles.emoji," ").concat(classes.emoji)},getEmoji(emojiData)),[handlePick]),groupEmojiRenderer=useCallback(_ref2=>{let{Icon:Icon,key:key}=_ref2;const isActive=key===activeGroup;return React.createElement("div",{className:"".concat(styles.groupItem," ").concat(classes.groupItem),key:key,onClick:()=>setActiveGroup(isActive?null:key),role:"button","aria-label":"group"},React.createElement(Icon,{className:isActive?"".concat(styles.activeIcon," ").concat(classes.activeIcon):""}))},[activeGroup]);return React.createElement(ClickAwayListener,{onClickAway:()=>setIsOpen(!1)},React.createElement("div",{className:styles.buttonContainer},React.createElement(ButtonComponent,{className:classes.emojiButton,onClick:()=>{setIsOpen(!isOpen)}},buttonEmoji),React.createElement("div",{className:"\n            ".concat(styles.container,"\n            ").concat(classes.container,"\n            ").concat(styles[popperPosition],"\n            ").concat(!isOpen&&styles.hiddenPicker,"\n          ")},React.createElement("div",{className:"".concat(styles.groups," ").concat(classes.groups)},groups.map(groupEmojiRenderer)),React.createElement("div",{className:"".concat(styles.listContainer," ").concat(classes.listContainer)},React.createElement(UTVirtualizedList,_extends({data:activeGroup?groups.find(_ref3=>{let{key: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);
+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);