@synerise/ds-emoji-picker 1.3.22 → 1.3.24

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-emoji-picker@1.3.23...@synerise/ds-emoji-picker@1.3.24) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-emoji-picker
+
+## [1.3.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-emoji-picker@1.3.22...@synerise/ds-emoji-picker@1.3.23) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-emoji-picker
+
 ## [1.3.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-emoji-picker@1.3.21...@synerise/ds-emoji-picker@1.3.22) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-emoji-picker

package/README.md

@@ -33,5 +33,5 @@ import EmojiPicker from '@synerise/ds-emoji-picker'
 | children      | the element that triggers showing the picker                                             | ReactElement              | -       |
 | onSelect      | triggered when an emoji has been selected                                                | (emoji: Emoji) => void    | -       |
 | closeOnSelect | determines whether dropdown should hide when an emoji has been selected. true by default | boolean                   | true    |
-| dropdownProps | Dropdown customisation props see ds-dropdown                                             | Partial<DropdownProps>    | -       |
+| dropdownProps | Dropdown customisation props (see ds-dropdown). `size`, `overlay`, and `open` are controlled internally and cannot be overridden. | Partial<DropdownSharedProps> | -       |
 | texts         | customise texts / labels                                                                 | Partial<EmojiPickerTexts> | -       |

package/dist/EmojiList/EmojiList.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import type { EmojiListProps } from './EmojiList.types';
+import { default as React } from 'react';
+import { EmojiListProps } from './EmojiList.types';
 export declare const EmojiList: ({ texts: customTexts, onSelect, searchQuery, }: EmojiListProps) => React.JSX.Element;

package/dist/EmojiList/EmojiList.js

@@ -1,31 +1,26 @@
-import React, { useMemo, useRef } from 'react';
-import EmptyState, { EmptyStatesSize } from '@synerise/ds-empty-states';
-import { SearchNoResultsL } from '@synerise/ds-icon';
-import Scrollbar from '@synerise/ds-scrollbar';
-import { ITEMS_PER_ROW, ITEM_SIZE } from '../EmojiPicker.const';
-import { useEmojiTranslations } from '../hooks/useEmojiTranslations';
-import { useMultipleItemsPerRow } from '../hooks/useMultipleItemsPerRow';
-import * as S from './EmojiList.styles';
-import { createItemData, getEmojisByGroup } from './EmojiList.utils';
-import { EmojiListItem } from './EmojiListItem';
-export var EmojiList = function EmojiList(_ref) {
-  var customTexts = _ref.texts,
-    onSelect = _ref.onSelect,
-    searchQuery = _ref.searchQuery;
-  var texts = useEmojiTranslations(customTexts);
-  var listRef = useRef(null);
-  var grouped = useMemo(function () {
-    return getEmojisByGroup('group');
-  }, []);
-  var filteredList = useMemo(function () {
-    var items = [];
-    grouped.forEach(function (emojis, category) {
-      var matching = searchQuery ? emojis.filter(function (emoji) {
-        var _emoji$keywords;
-        return (_emoji$keywords = emoji.keywords) == null ? void 0 : _emoji$keywords.find(function (keyword) {
-          return keyword.match(searchQuery);
-        });
-      }) : emojis;
+import { jsx } from "react/jsx-runtime";
+import { useRef, useMemo } from "react";
+import EmptyState, { EmptyStatesSize } from "@synerise/ds-empty-states";
+import { SearchNoResultsL } from "@synerise/ds-icon";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { ITEMS_PER_ROW, ITEM_SIZE } from "../EmojiPicker.const.js";
+import { useEmojiTranslations } from "../hooks/useEmojiTranslations.js";
+import { useMultipleItemsPerRow } from "../hooks/useMultipleItemsPerRow.js";
+import { VirtualList, EmptyList } from "./EmojiList.styles.js";
+import { getEmojisByGroup, createItemData } from "./EmojiList.utils.js";
+import { EmojiListItem } from "./EmojiListItem.js";
+const EmojiList = ({
+  texts: customTexts,
+  onSelect,
+  searchQuery
+}) => {
+  const texts = useEmojiTranslations(customTexts);
+  const listRef = useRef(null);
+  const grouped = useMemo(() => getEmojisByGroup("group"), []);
+  const filteredList = useMemo(() => {
+    const items = [];
+    grouped.forEach((emojis, category) => {
+      const matching = searchQuery ? emojis.filter((emoji) => emoji.keywords?.find((keyword) => keyword.match(searchQuery))) : emojis;
       if (matching.length) {
         items.push({
           title: texts[category] || category,
@@ -35,31 +30,20 @@ export var EmojiList = function EmojiList(_ref) {
     });
     return items;
   }, [searchQuery, grouped, texts]);
-  var virtualListData = useMultipleItemsPerRow(filteredList, ITEMS_PER_ROW);
-  var itemData = createItemData(virtualListData, ITEM_SIZE, onSelect, ITEMS_PER_ROW);
-  var handleScroll = function handleScroll(_ref2) {
-    var currentTarget = _ref2.currentTarget;
-    var scrollTop = currentTarget.scrollTop;
+  const virtualListData = useMultipleItemsPerRow(filteredList, ITEMS_PER_ROW);
+  const itemData = createItemData(virtualListData, ITEM_SIZE, onSelect, ITEMS_PER_ROW);
+  const handleScroll = ({
+    currentTarget
+  }) => {
+    const {
+      scrollTop
+    } = currentTarget;
     if (listRef.current) {
       listRef.current.scrollTo(scrollTop);
     }
   };
-  return filteredList.length ? /*#__PURE__*/React.createElement(Scrollbar, {
-    maxHeight: 330,
-    onScroll: handleScroll
-  }, /*#__PURE__*/React.createElement(S.VirtualList, {
-    listHeight: 330,
-    ref: listRef,
-    height: 330,
-    itemCount: virtualListData.length,
-    itemData: itemData,
-    itemSize: ITEM_SIZE,
-    width: "100%"
-  }, function (props) {
-    return /*#__PURE__*/React.createElement(EmojiListItem, props);
-  })) : /*#__PURE__*/React.createElement(S.EmptyList, null, /*#__PURE__*/React.createElement(EmptyState, {
-    customIcon: /*#__PURE__*/React.createElement(SearchNoResultsL, null),
-    size: EmptyStatesSize.SMALL,
-    text: texts.empty
-  }));
-};
+  return filteredList.length ? /* @__PURE__ */ jsx(Scrollbar, { maxHeight: 330, onScroll: handleScroll, children: /* @__PURE__ */ jsx(VirtualList, { listHeight: 330, ref: listRef, height: 330, itemCount: virtualListData.length, itemData, itemSize: ITEM_SIZE, width: "100%", children: (props) => /* @__PURE__ */ jsx(EmojiListItem, { ...props }) }) }) : /* @__PURE__ */ jsx(EmptyList, { children: /* @__PURE__ */ jsx(EmptyState, { customIcon: /* @__PURE__ */ jsx(SearchNoResultsL, {}), size: EmptyStatesSize.SMALL, text: texts.empty }) });
+};
+export {
+  EmojiList
+};

package/dist/EmojiList/EmojiList.styles.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-import { FixedSizeList } from 'react-window';
-export declare const EmojiItem: import("styled-components").StyledComponent<"div", any, {
+import { default as React } from 'react';
+import { FixedSizeList } from '../../../../../config/vitest/__mocks__/reactWindowMock.js';
+export declare const EmojiItem: import('styled-components').StyledComponent<"div", any, {
     itemsPerRow: number;
 }, never>;
-export declare const EmojiButton: import("styled-components").StyledComponent<(props: any) => React.JSX.Element, any, {}, never>;
-export declare const EmptyList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmojiCategoryWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VirtualList: import("styled-components").StyledComponent<typeof FixedSizeList, any, {
+export declare const EmojiButton: import('styled-components').StyledComponent<(props: any) => React.JSX.Element, any, {}, never>;
+export declare const EmptyList: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const EmojiCategoryWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const VirtualList: import('styled-components').StyledComponent<typeof FixedSizeList, any, {
     listHeight: number;
 }, never>;
-export declare const ListRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<"div", any, {
+export declare const ListRow: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Title: import('styled-components').StyledComponent<"div", any, {
     elementSize: string;
 }, never>;

package/dist/EmojiList/EmojiList.styles.js

@@ -1,48 +1,41 @@
-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 from 'react';
-import { FixedSizeList } from 'react-window';
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-export var EmojiItem = styled.div.withConfig({
+import { jsx } from "react/jsx-runtime";
+import { FixedSizeList } from "react-window";
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+const EmojiItem = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmojiListstyles__EmojiItem",
   componentId: "sc-1yme2ir-0"
-})(["display:flex;width:", "%;align-items:center;justify-content:center;"], function (props) {
-  return 100 / props.itemsPerRow;
-});
-export var EmojiButton = styled(function (props) {
-  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-    type: "ghost",
-    mode: "single-icon"
-  }));
-}).withConfig({
+})(["display:flex;width:", "%;align-items:center;justify-content:center;"], (props) => 100 / props.itemsPerRow);
+const EmojiButton = /* @__PURE__ */ styled((props) => /* @__PURE__ */ jsx(Button, { ...props, type: "ghost", mode: "single-icon" })).withConfig({
   displayName: "EmojiListstyles__EmojiButton",
   componentId: "sc-1yme2ir-1"
 })(["&&{font-size:24px;display:flex;align-items:center;cursor:pointer;}"]);
-export var EmptyList = styled.div.withConfig({
+const EmptyList = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmojiListstyles__EmptyList",
   componentId: "sc-1yme2ir-2"
 })(["padding:12px;"]);
-export var EmojiCategoryWrapper = styled.div.withConfig({
+const EmojiCategoryWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmojiListstyles__EmojiCategoryWrapper",
   componentId: "sc-1yme2ir-3"
 })(["display:flex;gap:4px;flex-wrap:wrap;"]);
-export var VirtualList = styled(FixedSizeList).withConfig({
+const VirtualList = /* @__PURE__ */ styled(FixedSizeList).withConfig({
   displayName: "EmojiListstyles__VirtualList",
   componentId: "sc-1yme2ir-4"
-})(["max-height:", "px;height:auto !important;overflow-x:unset !important;overflow-y:unset !important;"], function (props) {
-  return props.listHeight;
-});
-export var ListRow = styled.div.withConfig({
+})(["max-height:", "px;height:auto !important;overflow-x:unset !important;overflow-y:unset !important;"], (props) => props.listHeight);
+const ListRow = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmojiListstyles__ListRow",
   componentId: "sc-1yme2ir-5"
 })(["display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;box-sizing:border-box;width:100%;height:100%;max-width:100%;"]);
-export var Title = styled.div.withConfig({
+const Title = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmojiListstyles__Title",
   componentId: "sc-1yme2ir-6"
-})(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:0 12px;flex-basis:100%;height:", ";line-height:", ";"], function (props) {
-  return props.theme.palette['grey-500'];
-}, function (props) {
-  return props.elementSize;
-}, function (props) {
-  return props.elementSize;
-});
+})(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:0 12px;flex-basis:100%;height:", ";line-height:", ";"], (props) => props.theme.palette["grey-500"], (props) => props.elementSize, (props) => props.elementSize);
+export {
+  EmojiButton,
+  EmojiCategoryWrapper,
+  EmojiItem,
+  EmptyList,
+  ListRow,
+  Title,
+  VirtualList
+};

package/dist/EmojiList/EmojiList.types.d.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties, ReactNode } from 'react';
-import type { Emoji } from 'unicode-emoji-utils';
+import { CSSProperties, ReactNode } from 'react';
+import { Emoji } from 'unicode-emoji-utils';
 export type EmojiListTexts = {
     'smileys-emotion': ReactNode;
     'people-body': ReactNode;

package/dist/EmojiList/EmojiList.types.js

@@ -1 +1 @@
-export {};
+

package/dist/EmojiList/EmojiList.utils.d.ts

@@ -1,4 +1,4 @@
-import { type Emoji, getEmojisByGroup as getEmojisByGroupBase } from 'unicode-emoji-utils';
-import type { EmojiCategories, ListItemData } from './EmojiList.types';
+import { Emoji, getEmojisByGroup as getEmojisByGroupBase } from 'unicode-emoji-utils';
+import { EmojiCategories, ListItemData } from './EmojiList.types';
 export declare const createItemData: (items: ListItemData["items"], elementSize: ListItemData["elementSize"], onSelect: ListItemData["onSelect"], itemsPerRow: ListItemData["itemsPerRow"]) => ListItemData;
 export declare const getEmojisByGroup: (...props: Parameters<typeof getEmojisByGroupBase>) => Map<EmojiCategories, Emoji[]>;

package/dist/EmojiList/EmojiList.utils.js

@@ -1,11 +1,13 @@
-import memoize from 'memoize-one';
-import { getEmojisByGroup as getEmojisByGroupBase } from 'unicode-emoji-utils';
-export var createItemData = memoize(function (items, elementSize, onSelect, itemsPerRow) {
-  return {
-    items: items,
-    elementSize: elementSize,
-    onSelect: onSelect,
-    itemsPerRow: itemsPerRow
-  };
-});
-export var getEmojisByGroup = getEmojisByGroupBase;
+import memoize from "memoize-one";
+import { getEmojisByGroup as getEmojisByGroup$1 } from "unicode-emoji-utils";
+const createItemData = memoize((items, elementSize, onSelect, itemsPerRow) => ({
+  items,
+  elementSize,
+  onSelect,
+  itemsPerRow
+}));
+const getEmojisByGroup = getEmojisByGroup$1;
+export {
+  createItemData,
+  getEmojisByGroup
+};

package/dist/EmojiList/EmojiListItem.d.ts

@@ -1,3 +1,3 @@
-import React, { type ReactElement } from 'react';
-import { type RowItemProps } from './EmojiList.types';
+import { default as React, ReactElement } from 'react';
+import { RowItemProps } from './EmojiList.types';
 export declare const EmojiListItem: React.MemoExoticComponent<({ data, index, style }: RowItemProps) => ReactElement>;

package/dist/EmojiList/EmojiListItem.js

@@ -1,36 +1,27 @@
-import React, { memo } from 'react';
-import { areEqual } from 'react-window';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './EmojiList.styles';
-var isTitle = function isTitle(item) {
-  return item[0] && 'title' in item[0];
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { areEqual } from "react-window";
+import Tooltip from "@synerise/ds-tooltip";
+import { ListRow, Title, EmojiItem, EmojiButton } from "./EmojiList.styles.js";
+const isTitle = (item) => {
+  return item[0] && "title" in item[0];
+};
+const EmojiListItem = memo(({
+  data,
+  index,
+  style
+}) => {
+  const {
+    elementSize,
+    itemsPerRow,
+    onSelect,
+    items
+  } = data;
+  const rowItems = items[index];
+  return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(ListRow, { children: isTitle(rowItems) ? /* @__PURE__ */ jsx(Title, { elementSize: `${elementSize}px`, children: rowItems[0].title }) : rowItems.map((item) => {
+    return /* @__PURE__ */ jsx(Tooltip, { title: item.keywords?.join(", "), children: /* @__PURE__ */ jsx(EmojiItem, { onClick: () => onSelect && onSelect(item), itemsPerRow, children: /* @__PURE__ */ jsx(EmojiButton, { "data-testid": "ds-emoji-item", "data-keywords": item.keywords?.join(","), children: item.emoji }) }, item.emoji) });
+  }) }) });
+}, areEqual);
+export {
+  EmojiListItem
 };
-export var EmojiListItem = /*#__PURE__*/memo(function (_ref) {
-  var data = _ref.data,
-    index = _ref.index,
-    style = _ref.style;
-  var elementSize = data.elementSize,
-    itemsPerRow = data.itemsPerRow,
-    onSelect = data.onSelect,
-    items = data.items;
-  var rowItems = items[index];
-  return /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(S.ListRow, null, isTitle(rowItems) ? /*#__PURE__*/React.createElement(S.Title, {
-    elementSize: elementSize + "px"
-  }, rowItems[0].title) : rowItems.map(function (item) {
-    var _item$keywords, _item$keywords2;
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      title: (_item$keywords = item.keywords) == null ? void 0 : _item$keywords.join(', ')
-    }, /*#__PURE__*/React.createElement(S.EmojiItem, {
-      onClick: function onClick() {
-        return onSelect && onSelect(item);
-      },
-      itemsPerRow: itemsPerRow,
-      key: item.emoji
-    }, /*#__PURE__*/React.createElement(S.EmojiButton, {
-      "data-testid": "ds-emoji-item",
-      "data-keywords": (_item$keywords2 = item.keywords) == null ? void 0 : _item$keywords2.join(',')
-    }, item.emoji)));
-  })));
-}, areEqual);

package/dist/EmojiOverlay/EmojiOverlay.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type EmojiOverlayType } from './EmojiOverlay.types';
+import { default as React } from 'react';
+import { EmojiOverlayType } from './EmojiOverlay.types';
 export declare const EmojiOverlay: ({ texts: customTexts, onSelect, focus, }: EmojiOverlayType) => React.JSX.Element;

package/dist/EmojiOverlay/EmojiOverlay.js

@@ -1,36 +1,28 @@
-import React, { useState } from 'react';
-import { theme } from '@synerise/ds-core';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { SearchM } from '@synerise/ds-icon';
-import { EmojiList } from '../EmojiList/EmojiList';
-import { useEmojiTranslations } from '../hooks/useEmojiTranslations';
-export var EmojiOverlay = function EmojiOverlay(_ref) {
-  var customTexts = _ref.texts,
-    onSelect = _ref.onSelect,
-    focus = _ref.focus;
-  var texts = useEmojiTranslations(customTexts);
-  var _useState = useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var handleClearInput = function handleClearInput() {
-    setSearchQuery('');
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { theme } from "@synerise/ds-core";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { SearchM } from "@synerise/ds-icon";
+import { EmojiList } from "../EmojiList/EmojiList.js";
+import { useEmojiTranslations } from "../hooks/useEmojiTranslations.js";
+const EmojiOverlay = ({
+  texts: customTexts,
+  onSelect,
+  focus
+}) => {
+  const texts = useEmojiTranslations(customTexts);
+  const [searchQuery, setSearchQuery] = useState("");
+  const handleClearInput = () => {
+    setSearchQuery("");
   };
-  var handleSearchChange = function handleSearchChange(query) {
+  const handleSearchChange = (query) => {
     setSearchQuery(query);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown.SearchInput, {
-    onSearchChange: handleSearchChange,
-    onClearInput: handleClearInput,
-    placeholder: texts.placeholder,
-    value: searchQuery,
-    autofocus: focus,
-    iconLeft: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SearchM, null),
-      color: theme.palette['grey-600']
-    })
-  }), /*#__PURE__*/React.createElement(EmojiList, {
-    onSelect: onSelect,
-    searchQuery: searchQuery,
-    texts: texts
-  }));
-};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dropdown.SearchInput, { onSearchChange: handleSearchChange, onClearInput: handleClearInput, placeholder: texts.placeholder, value: searchQuery, autofocus: focus, iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }) }),
+    /* @__PURE__ */ jsx(EmojiList, { onSelect, searchQuery, texts })
+  ] });
+};
+export {
+  EmojiOverlay
+};

package/dist/EmojiOverlay/EmojiOverlay.types.d.ts

@@ -1,4 +1,4 @@
-import type { EmojiPickerProps } from '../EmojiPicker.types';
+import { EmojiPickerProps } from '../EmojiPicker.types';
 export type EmojiOverlayType = Pick<EmojiPickerProps, 'onSelect' | 'texts'> & {
     focus?: boolean;
 };

package/dist/EmojiOverlay/EmojiOverlay.types.js

@@ -1 +1 @@
-export {};
+

package/dist/EmojiPicker.const.js

@@ -1,2 +1,6 @@
-export var ITEMS_PER_ROW = 6;
-export var ITEM_SIZE = 32;
+const ITEMS_PER_ROW = 6;
+const ITEM_SIZE = 32;
+export {
+  ITEMS_PER_ROW,
+  ITEM_SIZE
+};

package/dist/EmojiPicker.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import type { EmojiPickerProps } from './EmojiPicker.types';
+import { default as React } from 'react';
+import { EmojiPickerProps } from './EmojiPicker.types';
 export declare const EmojiPicker: ({ children, closeOnSelect, onSelect, texts, dropdownProps, }: EmojiPickerProps) => React.JSX.Element;

package/dist/EmojiPicker.js

@@ -1,25 +1,21 @@
-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, { useRef, useState } from 'react';
-import Dropdown from '@synerise/ds-dropdown';
-import { useOnClickOutside } from '@synerise/ds-utils';
-import { EmojiOverlay } from './EmojiOverlay/EmojiOverlay';
-import * as S from './EmojiPicker.styles';
-export var EmojiPicker = function EmojiPicker(_ref) {
-  var children = _ref.children,
-    _ref$closeOnSelect = _ref.closeOnSelect,
-    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
-    _onSelect = _ref.onSelect,
-    texts = _ref.texts,
-    dropdownProps = _ref.dropdownProps;
-  var _useState = useState(false),
-    isOpen = _useState[0],
-    setOpen = _useState[1];
-  var _useState2 = useState(false),
-    focus = _useState2[0],
-    setFocus = _useState2[1];
-  var ref = useRef(null);
-  var triggerRef = useRef(null);
-  useOnClickOutside(ref, function (event) {
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import Dropdown from "@synerise/ds-dropdown";
+import { useOnClickOutside } from "@synerise/ds-utils";
+import { EmojiOverlay } from "./EmojiOverlay/EmojiOverlay.js";
+import { Overlay } from "./EmojiPicker.styles.js";
+const EmojiPicker = ({
+  children,
+  closeOnSelect = true,
+  onSelect,
+  texts,
+  dropdownProps
+}) => {
+  const [isOpen, setOpen] = useState(false);
+  const [focus, setFocus] = useState(false);
+  const ref = useRef(null);
+  const triggerRef = useRef(null);
+  useOnClickOutside(ref, (event) => {
     if (triggerRef.current && event.target) {
       if (triggerRef.current.contains(event.target)) {
         return;
@@ -27,32 +23,18 @@ export var EmojiPicker = function EmojiPicker(_ref) {
     }
     setOpen(false);
   });
-  var toggleOpen = function toggleOpen(newState) {
+  const toggleOpen = (newState) => {
     setOpen(newState);
     setFocus(newState);
   };
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    open: isOpen,
-    onOpenChange: toggleOpen,
-    placement: "bottomRight",
-    asChild: true
-  }, dropdownProps, {
-    popoverProps: _extends({
-      testId: 'emojipicker'
-    }, dropdownProps == null ? void 0 : dropdownProps.popoverProps),
-    size: "medium",
-    overlay: /*#__PURE__*/React.createElement(S.Overlay, {
-      ref: ref,
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement(EmojiOverlay, {
-      onSelect: function onSelect(val) {
-        closeOnSelect && toggleOpen(false);
-        _onSelect == null || _onSelect(val);
-      },
-      texts: texts,
-      focus: focus
-    }))
-  }), children);
-};
+  return /* @__PURE__ */ jsx(Dropdown, { open: isOpen, onOpenChange: toggleOpen, placement: "bottomRight", asChild: true, ...dropdownProps, popoverProps: {
+    testId: "emojipicker",
+    ...dropdownProps?.popoverProps
+  }, size: "medium", overlay: /* @__PURE__ */ jsx(Overlay, { ref, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(EmojiOverlay, { onSelect: (val) => {
+    closeOnSelect && toggleOpen(false);
+    onSelect?.(val);
+  }, texts, focus }) }), children });
+};
+export {
+  EmojiPicker
+};

package/dist/EmojiPicker.styles.d.ts

@@ -1 +1 @@
-export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Overlay: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/EmojiPicker.styles.js

@@ -1,5 +1,8 @@
-import styled from 'styled-components';
-export var Overlay = styled.div.withConfig({
+import styled from "styled-components";
+const Overlay = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EmojiPickerstyles__Overlay",
   componentId: "sc-562kws-0"
-})([""]);
+})([""]);
+export {
+  Overlay
+};

package/dist/EmojiPicker.types.d.ts

@@ -1,7 +1,7 @@
-import type { ReactElement, ReactNode } from 'react';
-import type { Emoji } from 'unicode-emoji-utils';
-import type { DropdownSharedProps } from '@synerise/ds-dropdown';
-import type { EmojiListTexts } from './EmojiList/EmojiList.types';
+import { ReactElement, ReactNode } from 'react';
+import { Emoji } from 'unicode-emoji-utils';
+import { DropdownSharedProps } from '@synerise/ds-dropdown';
+import { EmojiListTexts } from './EmojiList/EmojiList.types';
 export type EmojiPickerTexts = EmojiListTexts & {
     placeholder: string;
     empty: ReactNode;

package/dist/EmojiPicker.types.js

@@ -1 +1 @@
-export {};
+

package/dist/hooks/useEmojiTranslations.d.ts

@@ -1,2 +1,2 @@
-import { type EmojiPickerTexts } from '../EmojiPicker.types';
+import { EmojiPickerTexts } from '../EmojiPicker.types';
 export declare const useEmojiTranslations: (texts?: Partial<EmojiPickerTexts>) => EmojiPickerTexts;

package/dist/hooks/useEmojiTranslations.js

@@ -1,56 +1,29 @@
-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 } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-export var useEmojiTranslations = function useEmojiTranslations(texts) {
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var allTexts = useMemo(function () {
-    return _extends({
-      'smileys-emotion': /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "Smileys"
-      }),
-      'people-body': /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "People & body"
-      }),
-      'animals-nature': /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "Animals & nature"
-      }),
-      'food-drink': /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "Food & drink"
-      }),
-      'travel-places': /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "Travel & places"
-      }),
-      activities: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "Activities"
-      }),
-      objects: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "Objects"
-      }),
-      symbols: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "Symbols"
-      }),
-      flags: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.SMILEYS",
-        defaultMessage: "Flags"
-      }),
-      placeholder: formatMessage({
-        id: 'DS.ICON-PICKER.PLACEHOLDER',
-        defaultMessage: 'Search'
-      }),
-      empty: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.ICON-PICKER.NO-MATCHES",
-        defaultMessage: "No emojis found"
-      })
-    }, texts || {});
-  }, [texts, formatMessage]);
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+const useEmojiTranslations = (texts) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const allTexts = useMemo(() => ({
+    "smileys-emotion": /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "Smileys" }),
+    "people-body": /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "People & body" }),
+    "animals-nature": /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "Animals & nature" }),
+    "food-drink": /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "Food & drink" }),
+    "travel-places": /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "Travel & places" }),
+    activities: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "Activities" }),
+    objects: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "Objects" }),
+    symbols: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "Symbols" }),
+    flags: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.SMILEYS", defaultMessage: "Flags" }),
+    placeholder: formatMessage({
+      id: "DS.ICON-PICKER.PLACEHOLDER",
+      defaultMessage: "Search"
+    }),
+    empty: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.ICON-PICKER.NO-MATCHES", defaultMessage: "No emojis found" }),
+    ...texts || {}
+  }), [texts, formatMessage]);
   return allTexts;
-};
+};
+export {
+  useEmojiTranslations
+};

package/dist/hooks/useMultipleItemsPerRow.d.ts

@@ -1,2 +1,2 @@
-import type { EmojiCategory, EmojiVirtualListItem } from '../EmojiList/EmojiList.types';
+import { EmojiCategory, EmojiVirtualListItem } from '../EmojiList/EmojiList.types';
 export declare const useMultipleItemsPerRow: (data: EmojiCategory[], itemsPerRow: number) => EmojiVirtualListItem[];

package/dist/hooks/useMultipleItemsPerRow.js

@@ -1,18 +1,20 @@
-import { useMemo } from 'react';
-export var useMultipleItemsPerRow = function useMultipleItemsPerRow(data, itemsPerRow) {
-  var groupedData = useMemo(function () {
-    return data.reduce(function (flatItemsAndCategories, group) {
-      var title = group.title,
-        emojis = group.emojis;
+import { useMemo } from "react";
+const useMultipleItemsPerRow = (data, itemsPerRow) => {
+  const groupedData = useMemo(() => {
+    return data.reduce((flatItemsAndCategories, group) => {
+      const {
+        title,
+        emojis
+      } = group;
       flatItemsAndCategories.push([{
-        title: title
+        title
       }]);
-      var groupItemsLength = emojis.length;
-      var rowCount = Math.ceil(groupItemsLength / itemsPerRow);
-      for (var i = 0; i < rowCount; i += 1) {
-        var rowItems = [];
-        for (var j = 0; j < itemsPerRow; j += 1) {
-          var idx = itemsPerRow * i + j;
+      const groupItemsLength = emojis.length;
+      const rowCount = Math.ceil(groupItemsLength / itemsPerRow);
+      for (let i = 0; i < rowCount; i += 1) {
+        const rowItems = [];
+        for (let j = 0; j < itemsPerRow; j += 1) {
+          const idx = itemsPerRow * i + j;
           if (idx < groupItemsLength) {
             rowItems.push(emojis[idx]);
           }
@@ -23,4 +25,7 @@ export var useMultipleItemsPerRow = function useMultipleItemsPerRow(data, itemsP
     }, []);
   }, [data, itemsPerRow]);
   return groupedData;
-};
+};
+export {
+  useMultipleItemsPerRow
+};

package/dist/index.js

@@ -1 +1,5 @@
-export { EmojiPicker, EmojiPicker as default } from './EmojiPicker';
+import { EmojiPicker, EmojiPicker as EmojiPicker2 } from "./EmojiPicker.js";
+export {
+  EmojiPicker,
+  EmojiPicker2 as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-emoji-picker",
-  "version": "1.3.22",
+  "version": "1.3.24",
   "description": "EmojiPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,15 +35,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.16",
-    "@synerise/ds-divider": "^1.3.0",
-    "@synerise/ds-dropdown": "^1.3.0",
-    "@synerise/ds-empty-states": "^1.0.34",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-scrollbar": "^1.2.15",
-    "@synerise/ds-tooltip": "^1.4.8",
-    "@synerise/ds-utils": "^1.6.0",
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-divider": "^1.3.2",
+    "@synerise/ds-dropdown": "^1.3.2",
+    "@synerise/ds-empty-states": "^1.0.36",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-scrollbar": "^1.2.17",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1",
     "memoize-one": "^5.1.1",
+    "react-window": "^1.8.11",
     "unicode-emoji-utils": "^1.2.0"
   },
   "peerDependencies": {
@@ -52,5 +53,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }