@synerise/ds-emoji-picker 1.1.5 → 1.2.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-emoji-picker@1.2.0...@synerise/ds-emoji-picker@1.2.1) (2025-05-26)
+
+**Note:** Version bump only for package @synerise/ds-emoji-picker
+
+
+
+
+
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-emoji-picker@1.1.5...@synerise/ds-emoji-picker@1.2.0) (2025-05-19)
+
+
+### Features
+
+* **emoji-picker:** changed list to virtualised list ([06e6f7a](https://github.com/Synerise/synerise-design/commit/06e6f7ab6f1bbef67adc8662888f35182828b2a4))
+
+
+
+
+
 ## [1.1.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-emoji-picker@1.1.4...@synerise/ds-emoji-picker@1.1.5) (2025-05-07)
 
 **Note:** Version bump only for package @synerise/ds-emoji-picker

package/dist/EmojiList/EmojiList.d.ts

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

package/dist/EmojiList/EmojiList.js

@@ -1,14 +1,20 @@
-import React, { useMemo } from 'react';
-import Divider from '@synerise/ds-divider';
-import Scrollbar from '@synerise/ds-scrollbar';
+import React, { useMemo, useRef } from 'react';
 import { getEmojisByGroup } from 'unicode-emoji-utils';
+import EmptyState, { EmptyStatesSize } from '@synerise/ds-empty-states';
+import Scrollbar from '@synerise/ds-scrollbar';
+import { SearchNoResultsL } from '@synerise/ds-icon';
 import * as S from './EmojiList.styles';
 import { useEmojiTranslations } from '../hooks/useEmojiTranslations';
+import { useMultipleItemsPerRow } from '../hooks/useMultipleItemsPerRow';
+import { ITEMS_PER_ROW, ITEM_SIZE } from '../EmojiPicker.const';
+import { createItemData } 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');
   }, []);
@@ -30,26 +36,31 @@ export var EmojiList = function EmojiList(_ref) {
     });
     return items;
   }, [searchQuery, grouped, texts]);
-  var handleClick = function handleClick(emoji) {
-    // eslint-disable-next-line no-unused-expressions
-    onSelect == null || onSelect(emoji);
+  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;
+    if (listRef.current) {
+      listRef.current.scrollTo(scrollTop);
+    }
   };
-  return /*#__PURE__*/React.createElement(Scrollbar, {
-    maxHeight: 330
-  }, filteredList.map(function (_ref2, index) {
-    var title = _ref2.title,
-      emojis = _ref2.emojis;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-      labelBelow: title,
-      hiddenLine: index === 0
-    }), /*#__PURE__*/React.createElement(S.EmojiCategoryWrapper, null, emojis.map(function (emoji) {
-      return /*#__PURE__*/React.createElement(S.EmojiItem, {
-        key: emoji.emoji,
-        "data-testid": "ds-emoji-item",
-        onClick: function onClick() {
-          return handleClick(emoji);
-        }
-      }, emoji.emoji);
-    })));
+  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
   }));
 };

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

@@ -1,3 +1,15 @@
 import React from 'react';
-export declare const EmojiItem: import("styled-components").StyledComponent<(props: any) => React.JSX.Element, any, {}, never>;
+import { FixedSizeList } from 'react-window';
+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, {
+    listHeight: number;
+}, never>;
+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

@@ -2,16 +2,47 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import styled from 'styled-components';
 import Button from '@synerise/ds-button';
-export var EmojiItem = styled(function (props) {
+import { FixedSizeList } from 'react-window';
+export var EmojiItem = 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({
-  displayName: "EmojiListstyles__EmojiItem",
-  componentId: "sc-1yme2ir-0"
-})(["font-size:18px;display:flex;align-items:center;cursor:pointer;"]);
+  displayName: "EmojiListstyles__EmojiButton",
+  componentId: "sc-1yme2ir-1"
+})(["font-size:24px;display:flex;align-items:center;cursor:pointer;"]);
+export var EmptyList = styled.div.withConfig({
+  displayName: "EmojiListstyles__EmptyList",
+  componentId: "sc-1yme2ir-2"
+})(["padding:12px;"]);
 export var EmojiCategoryWrapper = styled.div.withConfig({
   displayName: "EmojiListstyles__EmojiCategoryWrapper",
-  componentId: "sc-1yme2ir-1"
-})(["display:flex;gap:4px;flex-wrap:wrap;"]);
+  componentId: "sc-1yme2ir-3"
+})(["display:flex;gap:4px;flex-wrap:wrap;"]);
+export var VirtualList = 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({
+  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({
+  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;
+});

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { Emoji } from 'unicode-emoji-utils';
 export type EmojiListTexts = {
     'smileys-emotion': ReactNode;
@@ -20,3 +20,24 @@ export type EmojiCategory = {
     title: ReactNode;
     emojis: Emoji[];
 };
+export type RowItemProps = {
+    data: ListItemData;
+    index: number;
+    style: CSSProperties;
+};
+export type TitleItem = {
+    title: ReactNode;
+};
+export type EmojiVirtualListItem = Emoji[] | TitleItem[];
+export type ListItemData = {
+    items: EmojiVirtualListItem[];
+    onSelect?: (emoji: Emoji) => void;
+    itemsPerRow: number;
+    elementSize: number;
+};
+export type ListItemProps = {
+    element: Emoji;
+    index: number;
+    itemsPerRow: number;
+    onSelect: (emoji: Emoji) => void;
+};

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

@@ -0,0 +1,2 @@
+import type { ListItemData } from './EmojiList.types';
+export declare const createItemData: (items: ListItemData['items'], elementSize: ListItemData['elementSize'], onSelect: ListItemData['onSelect'], itemsPerRow: ListItemData['itemsPerRow']) => ListItemData;

package/dist/EmojiList/EmojiList.utils.js

@@ -0,0 +1,9 @@
+import memoize from 'memoize-one';
+export var createItemData = memoize(function (items, elementSize, onSelect, itemsPerRow) {
+  return {
+    items: items,
+    elementSize: elementSize,
+    onSelect: onSelect,
+    itemsPerRow: itemsPerRow
+  };
+});

package/dist/EmojiList/EmojiListItem.d.ts

@@ -0,0 +1,3 @@
+import 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

@@ -0,0 +1,31 @@
+import React, { memo } from 'react';
+import { areEqual } from 'react-window';
+import * as S from './EmojiList.styles';
+var isTitle = function isTitle(item) {
+  return item[0] && 'title' in item[0];
+};
+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) {
+    return /*#__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"
+    }, item.emoji));
+  })));
+}, areEqual);

package/dist/EmojiPicker.const.d.ts

@@ -0,0 +1,2 @@
+export declare const ITEMS_PER_ROW = 6;
+export declare const ITEM_SIZE = 32;

package/dist/EmojiPicker.const.js

@@ -0,0 +1,2 @@
+export var ITEMS_PER_ROW = 6;
+export var ITEM_SIZE = 32;

package/dist/EmojiPicker.js

@@ -31,7 +31,10 @@ export var EmojiPicker = function EmojiPicker(_ref) {
     placement: "bottomRight"
   }, dropdownProps, {
     overlay: /*#__PURE__*/React.createElement(S.Overlay, {
-      ref: ref
+      ref: ref,
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
     }, /*#__PURE__*/React.createElement(EmojiOverlay, {
       onSelect: function onSelect(val) {
         closeOnSelect && toggleOpen(false);

package/dist/EmojiPicker.types.d.ts

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

package/dist/hooks/useEmojiTranslations.js

@@ -45,6 +45,10 @@ export var useEmojiTranslations = function useEmojiTranslations(texts) {
       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]);

package/dist/hooks/useMultipleItemsPerRow.d.ts

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

package/dist/hooks/useMultipleItemsPerRow.js

@@ -0,0 +1,26 @@
+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;
+      flatItemsAndCategories.push([{
+        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;
+          if (idx < groupItemsLength) {
+            rowItems.push(emojis[idx]);
+          }
+        }
+        flatItemsAndCategories.push(rowItems);
+      }
+      return flatItemsAndCategories;
+    }, []);
+  }, [data, itemsPerRow]);
+  return groupedData;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-emoji-picker",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "description": "EmojiPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,12 +34,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.2.0",
-    "@synerise/ds-divider": "^1.0.7",
-    "@synerise/ds-dropdown": "^1.0.7",
-    "@synerise/ds-icon": "^1.4.2",
-    "@synerise/ds-scrollbar": "^1.0.7",
-    "@synerise/ds-utils": "^1.1.0",
+    "@synerise/ds-button": "^1.3.1",
+    "@synerise/ds-divider": "^1.0.9",
+    "@synerise/ds-dropdown": "^1.0.9",
+    "@synerise/ds-icon": "^1.5.1",
+    "@synerise/ds-scrollbar": "^1.0.9",
+    "@synerise/ds-utils": "^1.1.1",
     "unicode-emoji-utils": "^1.2.0"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "90af7549cf0f556340bdd0deec4bb59bacf3e95e"
+  "gitHead": "9e9cc54e3690b4d51323f91c81b3b79305984da6"
 }