@synerise/ds-items-roll 0.7.16 → 0.8.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@0.8.0...@synerise/ds-items-roll@0.8.1) (2024-11-29)
+
+**Note:** Version bump only for package @synerise/ds-items-roll
+
+
+
+
+
+# [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@0.7.16...@synerise/ds-items-roll@0.8.0) (2024-11-28)
+
+
+### Features
+
+* **items-roll:** add renderCount prop ([ec61af1](https://github.com/Synerise/synerise-design/commit/ec61af19b812608c1f12a736eeceaf32c85722e7))
+* **items-roll:** isDisabled prop added ([e7eec53](https://github.com/Synerise/synerise-design/commit/e7eec53b482981a424c5b5ab80899407e660999b))
+* **items-roll:** replaced Menu.Item with ListItem ([2cfcbdc](https://github.com/Synerise/synerise-design/commit/2cfcbdc501c0ad21557372c0f9d9cb76b3d034cb))
+
+
+
+
+
 ## [0.7.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@0.7.15...@synerise/ds-items-roll@0.7.16) (2024-11-22)
 
 **Note:** Version bump only for package @synerise/ds-items-roll

package/README.md

@@ -34,7 +34,7 @@ import ItemsRoll from '@synerise/ds-items-roll';
 ## API
 
 | Property                     | Description                                                                                                       | Type                                                    | Default |
-| ---------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
+|------------------------------|-------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|---------|
 | actions                      | ItemRollElement array with configuration for action dropdown menu                                                 | ItemRollElement[]                                       | -       |
 | changeSelectionIcon          | The custom changeSelection icon                                                                                   | `(props: React.SVGProps<SVGSVGElement>) => JSX.Element` | EditM   |
 | changeSelectionDropdownProps | Object with ds-dropdown props                                                                                     | DropdownProps                                           |         |
@@ -42,6 +42,7 @@ import ItemsRoll from '@synerise/ds-items-roll';
 | customSidebarActions         | Allow put developer sidebar actions that are not defined                                                          | React.ReactNode                                         | -       |
 | groups                       | Array of strings where each one corresponds to a group prop in ItemRollElement                                    | string[]                                                | -       |
 | hideSearch                   | Hide search component in itemsroll                                                                                | booleam                                                 | -       |
+| isDisabled                   | prevents rendering 'remove' / 'clear all' buttons                                                                 | booleam                                                 | -       |
 | items                        | ItemRollElement array for list                                                                                    | ItemRollElement[]                                       | -       |
 | maxToShowItems               | Amount of initial ItemsRollElement to render. Note that if number is greater than 20, list will becoma scrollable | number                                                  | 10      |
 | onClearAll                   | Callback function that is fired when click on clearAll button                                                     | () => void                                              | -       |
@@ -54,12 +55,14 @@ import ItemsRoll from '@synerise/ds-items-roll';
 | searchValue                  | Value of search input component                                                                                   | string                                                  | -       |
 | showMoreStep                 | Amount of items to load on show more button click                                                                 | number                                                  | 10      |
 | style                        | Object with CSS properties                                                                                        | React.CSSProperties                                     | -       |
+| renderCount                  | Custom items count renderer                                                                                       | (count: number) => ReactNode                            | -       |
 | texts                        | Object contains texts for buttons, title etc.                                                                     | Texts                                                   | -       |
 | useFooter                    | Whether the footer is visibile                                                                                    | boolean                                                 | -       |
 | useVirtualizedList           | Whether to use react-virtualized for list                                                                         | boolean                                                 | `false` |
 | virtualizedRowHeight         | Height of virtualizedlist row                                                                                     | number                                                  | 32px    |
 | virtualizedRowWidth          | Width of virtualized list                                                                                         | number                                                  | -       |
 
+
 #### ItemRollElement
 
 | Property | Description                                                                         | Type   | Default |

package/dist/Extras/Extras.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { ItemRollElement } from '../ItemsRoll.types';
+import { MenuItemProps } from '@synerise/ds-menu';
+import type { ItemRollElement } from '../ItemsRoll.types';
 export type ExtrasProps = {
-    actions: ItemRollElement[];
+    actions: ItemRollElement<MenuItemProps>[];
 };
-declare const Extras: React.FC<ExtrasProps>;
+declare const Extras: ({ actions }: ExtrasProps) => React.JSX.Element;
 export default Extras;

package/dist/Extras/Extras.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import styled from 'styled-components';
 import Dropdown from '@synerise/ds-dropdown';
@@ -14,12 +13,10 @@ var Extras = function Extras(_ref) {
   return /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ['click'],
     placement: "bottomRight",
-    overlay: /*#__PURE__*/React.createElement(ItemMenu, {
+    overlay: /*#__PURE__*/React.createElement("div", {
       "data-testid": "items-roll-action-menu"
-    }, actions.map(function (action) {
-      return /*#__PURE__*/React.createElement(Menu.Item, _extends({}, action, {
-        key: action.id
-      }), action.text);
+    }, /*#__PURE__*/React.createElement(ItemMenu, {
+      dataSource: actions
     }))
   }, /*#__PURE__*/React.createElement(Button, {
     type: "ghost",

package/dist/ItemsRoll.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ItemsRollProps } from './ItemsRoll.types';
-export declare const ItemsRoll: ({ actions, changeSelectionIcon, changeSelectionDropdownProps, className, customSidebarActions, groups, hideSearch, items, maxToShowItems, onClearAll, onChangeSelection, onItemClick, onItemRemove, onSearchClear, onSearch, searchValue, searchPlaceholder, showMoreStep, style, texts, useFooter, useVirtualizedList, virtualizedRowWidth, virtualizedRowHeight, }: ItemsRollProps) => React.JSX.Element;
+export declare const ItemsRoll: ({ actions, changeSelectionIcon, changeSelectionDropdownProps, className, customSidebarActions, groups, hideSearch, isDisabled, items, maxToShowItems, onClearAll, onChangeSelection, onItemClick, onItemRemove, onSearchClear, onSearch, renderCount, searchValue, searchPlaceholder, showMoreStep, style, texts, useFooter, useVirtualizedList, virtualizedRowWidth, virtualizedRowHeight, }: ItemsRollProps) => React.JSX.Element;
 export default ItemsRoll;

package/dist/ItemsRoll.js

@@ -3,7 +3,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Footer, Header, List } from './ItemsRollComponents';
 import * as S from './ItemsRoll.styles';
@@ -15,6 +15,7 @@ export var ItemsRoll = function ItemsRoll(_ref) {
     customSidebarActions = _ref.customSidebarActions,
     groups = _ref.groups,
     hideSearch = _ref.hideSearch,
+    isDisabled = _ref.isDisabled,
     items = _ref.items,
     _ref$maxToShowItems = _ref.maxToShowItems,
     maxToShowItems = _ref$maxToShowItems === void 0 ? 10 : _ref$maxToShowItems,
@@ -24,6 +25,7 @@ export var ItemsRoll = function ItemsRoll(_ref) {
     onItemRemove = _ref.onItemRemove,
     onSearchClear = _ref.onSearchClear,
     onSearch = _ref.onSearch,
+    renderCount = _ref.renderCount,
     searchValue = _ref.searchValue,
     searchPlaceholder = _ref.searchPlaceholder,
     _ref$showMoreStep = _ref.showMoreStep,
@@ -74,25 +76,28 @@ export var ItemsRoll = function ItemsRoll(_ref) {
     })
   };
   var allTexts = texts ? _objectSpread({}, defaultTexts, {}, texts) : defaultTexts;
-  var _React$useState = React.useState(maxToShowItems),
-    visibleItemsAmount = _React$useState[0],
-    setVisibleItemsAmount = _React$useState[1];
-  React.useEffect(function () {
+  var _useState = useState(maxToShowItems),
+    visibleItemsAmount = _useState[0],
+    setVisibleItemsAmount = _useState[1];
+  useEffect(function () {
     setVisibleItemsAmount(maxToShowItems);
   }, [maxToShowItems]);
-  var showAdditionalItems = React.useCallback(function () {
+  var showAdditionalItems = useCallback(function () {
     if (visibleItemsAmount + showMoreStep < items.length) {
       setVisibleItemsAmount(visibleItemsAmount + showMoreStep);
     } else {
       setVisibleItemsAmount(items.length);
     }
   }, [items.length, visibleItemsAmount, showMoreStep]);
-  var visibleItems = React.useMemo(function () {
+  var visibleItems = useMemo(function () {
     return visibleItemsAmount === items.length ? items : items.slice(0, visibleItemsAmount);
   }, [items, visibleItemsAmount]);
-  var showDefaultItemsAmount = React.useCallback(function () {
+  var showDefaultItemsAmount = useCallback(function () {
     setVisibleItemsAmount(maxToShowItems);
   }, [maxToShowItems]);
+  var itemsCount = useMemo(function () {
+    return renderCount ? renderCount(items.length) : /*#__PURE__*/React.createElement(React.Fragment, null, allTexts.itemsLabel, ": ", /*#__PURE__*/React.createElement(S.Bold, null, items.length));
+  }, [allTexts.itemsLabel, items.length, renderCount]);
   return /*#__PURE__*/React.createElement(S.Wrapper, {
     style: style || {},
     className: className || '',
@@ -104,7 +109,7 @@ export var ItemsRoll = function ItemsRoll(_ref) {
     changeSelectionDropdownProps: changeSelectionDropdownProps,
     customSidebarActions: customSidebarActions,
     hideSearch: hideSearch,
-    itemsCount: items.length,
+    itemsCount: itemsCount,
     onChangeSelection: onChangeSelection,
     onSearch: onSearch,
     onSearchClear: onSearchClear,
@@ -116,7 +121,7 @@ export var ItemsRoll = function ItemsRoll(_ref) {
     groups: groups,
     items: items,
     onItemClick: onItemClick,
-    onItemRemove: onItemRemove,
+    onItemRemove: !isDisabled ? onItemRemove : undefined,
     noResultsLabel: allTexts.noResultsLabel,
     removeTooltipLabel: allTexts.removeTooltipLabel,
     searchValue: searchValue,
@@ -129,7 +134,7 @@ export var ItemsRoll = function ItemsRoll(_ref) {
     allTexts: allTexts,
     itemsCount: items.length,
     maxToShowItems: maxToShowItems,
-    onClearAll: onClearAll,
+    onClearAll: !isDisabled ? onClearAll : undefined,
     showAdditionalItems: showAdditionalItems,
     showDefaultItemsAmount: showDefaultItemsAmount,
     showMoreStep: showMoreStep,

package/dist/ItemsRoll.types.d.ts

@@ -1,8 +1,9 @@
-import { ReactNode, CSSProperties, SVGProps } from 'react';
-import { IntlShape } from 'react-intl';
-import { MenuItemProps } from '@synerise/ds-menu/dist/Elements/Item/MenuItem.types';
-import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
-export type ItemRollElement = MenuItemProps & {
+import type { ReactNode, CSSProperties, SVGProps } from 'react';
+import type { IntlShape } from 'react-intl';
+import type { MenuItemProps } from '@synerise/ds-menu';
+import type { ListItemProps } from '@synerise/ds-list-item';
+import type { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
+export type ItemRollElement<BaseType extends ListItemProps | MenuItemProps = ListItemProps> = BaseType & {
     id: string;
     group?: string;
 };
@@ -10,12 +11,14 @@ export type Texts = 'changeSelectionLabel' | 'clearAllLabel' | 'itemsLabel' | 'm
 export type ItemsRollGroup = string;
 export type ItemsRollProps = {
     intl?: IntlShape;
+    isDisabled?: boolean;
     items: ItemRollElement[];
     onSearch?: (value: string) => void;
+    renderCount?: (count: number) => ReactNode;
     onSearchClear?: () => void;
     searchValue?: string;
     searchPlaceholder?: string;
-    actions?: ItemRollElement[];
+    actions?: ItemRollElement<MenuItemProps>[];
     changeSelectionIcon?: (props: SVGProps<SVGSVGElement>) => JSX.Element;
     changeSelectionDropdownProps?: DropdownProps;
     customSidebarActions?: ReactNode;

package/dist/ItemsRollComponents/Footer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { FooterProps } from './Footer.types';
-declare const Footer: React.FC<FooterProps>;
+declare const Footer: ({ allTexts, itemsCount, maxToShowItems, onClearAll, showAdditionalItems, showDefaultItemsAmount, showMoreStep, visibleItemsCount, searchMode, }: FooterProps) => React.JSX.Element | null;
 export default Footer;

package/dist/ItemsRollComponents/Footer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import Popconfirm from '@synerise/ds-popconfirm';
 import Icon, { ArrowDownCircleM, ArrowUpCircleM, CloseS, WarningFillM } from '@synerise/ds-icon';
 import * as S from '../ItemsRoll.styles';
@@ -44,13 +44,13 @@ var Footer = function Footer(_ref3) {
     showMoreStep = _ref3$showMoreStep === void 0 ? 10 : _ref3$showMoreStep,
     visibleItemsCount = _ref3.visibleItemsCount,
     searchMode = _ref3.searchMode;
-  var getShowMoreNumber = React.useMemo(function () {
+  var getShowMoreNumber = useMemo(function () {
     return visibleItemsCount + showMoreStep < itemsCount ? showMoreStep : itemsCount - visibleItemsCount;
   }, [itemsCount, showMoreStep, visibleItemsCount]);
-  var showDivider = React.useMemo(function () {
+  var showDivider = useMemo(function () {
     return !searchMode || searchMode && itemsCount > maxToShowItems;
   }, [searchMode, maxToShowItems, itemsCount]);
-  var buttonsConfiguration = React.useMemo(function () {
+  var buttonsConfiguration = useMemo(function () {
     if (visibleItemsCount === itemsCount) return /*#__PURE__*/React.createElement(ShowLessButton, {
       showLessLabel: allTexts.showLessLabel,
       showDefaultItemsAmount: showDefaultItemsAmount

package/dist/ItemsRollComponents/Footer.types.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { Texts, ItemsRollProps } from '../ItemsRoll.types';
+import type { ReactNode } from 'react';
+import type { Texts, ItemsRollProps } from '../ItemsRoll.types';
 export type FooterProps = Pick<ItemsRollProps, 'onClearAll' | 'maxToShowItems' | 'showMoreStep'> & {
     allTexts: {
-        [k in Texts]: string | React.ReactNode;
+        [k in Texts]: ReactNode;
     };
     itemsCount: number;
     showAdditionalItems: () => void;
@@ -12,11 +12,11 @@ export type FooterProps = Pick<ItemsRollProps, 'onClearAll' | 'maxToShowItems' |
 };
 export type ShowLessButtonProps = {
     showDefaultItemsAmount: () => void;
-    showLessLabel: string | React.ReactNode;
+    showLessLabel: ReactNode;
 };
 export type ShowMoreButtonProps = {
     getShowMoreNumber: number;
-    moreLabel: string | React.ReactNode;
+    moreLabel: ReactNode;
     showAdditionalItems: () => void;
-    showLabel: string | React.ReactNode;
+    showLabel: ReactNode;
 };

package/dist/ItemsRollComponents/Header.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { HeaderProps } from './Header.types';
-declare const Header: React.FC<HeaderProps>;
+declare const Header: ({ actions, allTexts, changeSelectionIcon: ChangeSelectionIcon, changeSelectionDropdownProps, customSidebarActions, hideSearch, itemsCount, onChangeSelection, onSearch, searchValue, onSearchClear, searchPlaceholder, }: HeaderProps) => React.JSX.Element;
 export default Header;

package/dist/ItemsRollComponents/Header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SearchInput } from '@synerise/ds-search/dist/Elements';
 import Icon, { EditM } from '@synerise/ds-icon';
 import Dropdown from '@synerise/ds-dropdown';
@@ -19,7 +19,7 @@ var Header = function Header(_ref) {
     searchValue = _ref.searchValue,
     onSearchClear = _ref.onSearchClear,
     searchPlaceholder = _ref.searchPlaceholder;
-  var ChangeSelectionButton = React.useMemo(function () {
+  var ChangeSelectionButton = useMemo(function () {
     return /*#__PURE__*/React.createElement(S.ChangeSelection, {
       type: "ghost",
       mode: "icon-label",
@@ -29,7 +29,7 @@ var Header = function Header(_ref) {
       size: 24
     }), allTexts.changeSelectionLabel);
   }, [ChangeSelectionIcon, onChangeSelection, allTexts.changeSelectionLabel]);
-  return /*#__PURE__*/React.createElement(S.ContainerSpaceBetween, null, /*#__PURE__*/React.createElement(S.HeaderLeft, null, allTexts.itemsLabel, ": ", /*#__PURE__*/React.createElement(S.Bold, null, itemsCount)), /*#__PURE__*/React.createElement(S.HeaderRight, null, onChangeSelection && (changeSelectionDropdownProps ? /*#__PURE__*/React.createElement(Dropdown, changeSelectionDropdownProps, ChangeSelectionButton) : ChangeSelectionButton), !hideSearch && /*#__PURE__*/React.createElement(S.SearchWrapper, null, /*#__PURE__*/React.createElement(SearchInput, {
+  return /*#__PURE__*/React.createElement(S.ContainerSpaceBetween, null, /*#__PURE__*/React.createElement(S.HeaderLeft, null, itemsCount), /*#__PURE__*/React.createElement(S.HeaderRight, null, onChangeSelection && (changeSelectionDropdownProps ? /*#__PURE__*/React.createElement(Dropdown, changeSelectionDropdownProps, ChangeSelectionButton) : ChangeSelectionButton), !hideSearch && /*#__PURE__*/React.createElement(S.SearchWrapper, null, /*#__PURE__*/React.createElement(SearchInput, {
     clearTooltip: allTexts.searchClearTooltipLabel,
     onClear: onSearchClear || NOOP,
     onChange: onSearch || NOOP,

package/dist/ItemsRollComponents/Header.types.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { ItemsRollProps, Texts } from '../ItemsRoll.types';
+import type { ReactNode } from 'react';
+import type { ItemsRollProps, Texts } from '../ItemsRoll.types';
 export type HeaderProps = Pick<ItemsRollProps, 'actions' | 'changeSelectionIcon' | 'changeSelectionDropdownProps' | 'onChangeSelection' | 'onSearch' | 'onSearchClear' | 'searchValue' | 'searchPlaceholder' | 'hideSearch' | 'customSidebarActions'> & {
     allTexts: {
-        [k in Texts]: string | React.ReactNode;
+        [k in Texts]: ReactNode;
     };
-    itemsCount: number;
+    itemsCount: ReactNode;
 };

package/dist/ItemsRollComponents/ItemRemoveIcon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { RemoveIconProps } from './ItemRemoveIcon.types';
-export declare const RemoveIcon: React.FC<RemoveIconProps>;
+export declare const RemoveIcon: ({ id, handleRemove, tooltipLabel, group }: RemoveIconProps) => React.JSX.Element;

package/dist/ItemsRollComponents/ItemRemoveIcon.js

@@ -3,7 +3,6 @@ import Icon, { CloseS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import { theme } from '@synerise/ds-core';
 import { RemoveIconWrapper } from './ItemRemoveIcon.styles';
-// eslint-disable-next-line import/prefer-default-export
 export var RemoveIcon = function RemoveIcon(_ref) {
   var id = _ref.id,
     handleRemove = _ref.handleRemove,
@@ -11,10 +10,12 @@ export var RemoveIcon = function RemoveIcon(_ref) {
     group = _ref.group;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipLabel
-  }, /*#__PURE__*/React.createElement(RemoveIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(RemoveIconWrapper, {
+    "data-testid": "items-roll-remove-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
     className: "element-remove-icon",
-    onClick: function onClick(e) {
-      e.stopPropagation();
+    onClick: function onClick(event) {
+      event.stopPropagation();
       handleRemove(id, group);
     },
     component: /*#__PURE__*/React.createElement(CloseS, null),

package/dist/ItemsRollComponents/ItemRemoveIcon.styles.js

@@ -1,6 +1,4 @@
 import styled from 'styled-components';
-
-// eslint-disable-next-line import/prefer-default-export
 export var RemoveIconWrapper = styled.div.withConfig({
   displayName: "ItemRemoveIconstyles__RemoveIconWrapper",
   componentId: "sc-1uw1dzt-0"

package/dist/ItemsRollComponents/ItemRemoveIcon.types.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { ItemsRollGroup } from '../ItemsRoll.types';
+import type { ReactNode } from 'react';
+import type { ItemsRollGroup } from '../ItemsRoll.types';
 export type RemoveIconProps = {
     id: string;
     group?: ItemsRollGroup;
     handleRemove: (id: string, group?: ItemsRollGroup) => void;
-    tooltipLabel: string | React.ReactNode;
+    tooltipLabel: ReactNode;
 };

package/dist/ItemsRollComponents/List.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { ItemRollElement } from '../ItemsRoll.types';
 import { ListProps } from './List.types';
 export declare const itemsInGroup: (group: string, items: ItemRollElement[]) => ItemRollElement[];
-declare const List: React.FC<ListProps>;
+declare const List: ({ groups, items, onItemClick, onItemRemove, noResultsLabel, removeTooltipLabel, searchValue, useVirtualizedList, visibleItems, virtualizedRowHeight, virtualizedRowWidth, }: ListProps) => React.JSX.Element;
 export default List;

package/dist/ItemsRollComponents/List.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FixedSizeList } from 'react-window';
 import Icon, { SearchNoResultsM } from '@synerise/ds-icon';
-import Menu from '@synerise/ds-menu';
+import { GroupItem } from '@synerise/ds-list-item';
 import ItemElement from './ListItem';
 import ItemRenderer from './VirtualizedListItem';
 import * as S from '../ItemsRoll.styles';
@@ -23,10 +23,45 @@ var List = function List(_ref) {
     _ref$virtualizedRowHe = _ref.virtualizedRowHeight,
     virtualizedRowHeight = _ref$virtualizedRowHe === void 0 ? 32 : _ref$virtualizedRowHe,
     virtualizedRowWidth = _ref.virtualizedRowWidth;
+  var groupedList = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, groups == null ? void 0 : groups.map(function (group) {
+      var groupItems = itemsInGroup(group, visibleItems);
+      return groupItems.length > 0 ?
+      /*#__PURE__*/
+      // @ts-ignore
+      React.createElement(GroupItem, {
+        key: group,
+        title: group
+      }, groupItems.map(function (item) {
+        return /*#__PURE__*/React.createElement(ItemElement, {
+          group: group,
+          key: item.id,
+          highlight: searchValue,
+          onItemClick: onItemClick,
+          onItemRemove: onItemRemove,
+          item: item,
+          removeTooltipLabel: removeTooltipLabel
+        });
+      })) : null;
+    }));
+  }, [groups, onItemClick, onItemRemove, removeTooltipLabel, searchValue, visibleItems]);
+  var standardList = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, visibleItems.map(function (item) {
+      return /*#__PURE__*/React.createElement(ItemElement, {
+        key: item.id,
+        highlight: searchValue,
+        item: item,
+        onItemClick: onItemClick,
+        onItemRemove: onItemRemove,
+        removeTooltipLabel: removeTooltipLabel
+      });
+    }));
+  }, [onItemClick, onItemRemove, removeTooltipLabel, searchValue, visibleItems]);
+  var finalItems = groups ? groupedList : standardList;
   return visibleItems.length === 0 ? /*#__PURE__*/React.createElement(S.NoResults, null, /*#__PURE__*/React.createElement(S.NoResultIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(SearchNoResultsM, null),
     size: 25
-  })), noResultsLabel) : /*#__PURE__*/React.createElement(S.ListWrapper, null, useVirtualizedList && !groups ? /*#__PURE__*/React.createElement(Menu, {
+  })), noResultsLabel) : /*#__PURE__*/React.createElement(S.ListWrapper, null, useVirtualizedList && !groups ? /*#__PURE__*/React.createElement("div", {
     "data-testid": "items-roll-virtualized-list"
   }, /*#__PURE__*/React.createElement(FixedSizeList, {
     height: visibleItems.length * virtualizedRowHeight,
@@ -39,34 +74,6 @@ var List = function List(_ref) {
     onItemClick: onItemClick,
     onItemRemove: onItemRemove,
     tooltipLabel: removeTooltipLabel
-  }))) : /*#__PURE__*/React.createElement(Menu, null, groups ? groups.map(function (group) {
-    var groupItems = itemsInGroup(group, visibleItems);
-    return groupItems.length > 0 ?
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(Menu.ItemGroup, {
-      key: group,
-      title: group
-    }, groupItems.map(function (item) {
-      return /*#__PURE__*/React.createElement(ItemElement, {
-        group: group,
-        key: item.id,
-        highlight: searchValue,
-        onItemClick: onItemClick,
-        onItemRemove: onItemRemove,
-        item: item,
-        removeTooltipLabel: removeTooltipLabel
-      });
-    })) : null;
-  }) : visibleItems.map(function (item) {
-    return /*#__PURE__*/React.createElement(ItemElement, {
-      key: item.id,
-      highlight: searchValue,
-      item: item,
-      onItemClick: onItemClick,
-      onItemRemove: onItemRemove,
-      removeTooltipLabel: removeTooltipLabel
-    });
-  })));
+  }))) : finalItems);
 };
 export default List;

package/dist/ItemsRollComponents/List.types.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ItemRollElement, ItemsRollProps } from '../ItemsRoll.types';
+import type { ReactNode } from 'react';
+import type { ItemRollElement, ItemsRollProps } from '../ItemsRoll.types';
 export type ListProps = Pick<ItemsRollProps, 'groups' | 'items' | 'onItemClick' | 'onItemRemove' | 'searchValue' | 'useVirtualizedList' | 'virtualizedRowHeight' | 'virtualizedRowWidth'> & {
-    noResultsLabel: string | React.ReactNode;
-    removeTooltipLabel: string | React.ReactNode;
+    noResultsLabel: ReactNode;
+    removeTooltipLabel: ReactNode;
     visibleItems: ItemRollElement[];
 };

package/dist/ItemsRollComponents/ListItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ItemElementProps } from './ListItem.types';
-declare const ItemElement: React.FC<ItemElementProps>;
+declare const ItemElement: ({ item, group, highlight, onItemClick, onItemRemove, removeTooltipLabel }: ItemElementProps) => React.JSX.Element;
 export default ItemElement;

package/dist/ItemsRollComponents/ListItem.js

@@ -1,6 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from 'react';
-import { NOOP } from '@synerise/ds-utils';
+import React, { useCallback } from 'react';
 import { RemoveIcon } from './ItemRemoveIcon';
 import * as S from './ListItem.styles';
 var ItemElement = function ItemElement(_ref) {
@@ -10,7 +9,7 @@ var ItemElement = function ItemElement(_ref) {
     onItemClick = _ref.onItemClick,
     onItemRemove = _ref.onItemRemove,
     removeTooltipLabel = _ref.removeTooltipLabel;
-  var onClick = React.useCallback(function () {
+  var onClick = useCallback(function () {
     return onItemClick && onItemClick(item.id, group);
   }, [onItemClick, item.id, group]);
   var renderSuffixElement = function renderSuffixElement(hovered) {
@@ -19,7 +18,6 @@ var ItemElement = function ItemElement(_ref) {
   return /*#__PURE__*/React.createElement(S.ListItem, _extends({}, item, {
     className: "items-roll-list-item",
     highlight: highlight,
-    onItemHover: NOOP,
     suffixel: function suffixel(hovered) {
       return /*#__PURE__*/React.createElement(S.SuffixelWrapper, null, renderSuffixElement(hovered) || null, onItemRemove && /*#__PURE__*/React.createElement(RemoveIcon, {
         id: item.id,

package/dist/ItemsRollComponents/ListItem.styles.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const ListItem: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-menu/dist/Elements/SubMenu/SubMenu.types").SubMenuProps & import("@synerise/ds-menu").MenuItemProps>, any, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<(props: import("@synerise/ds-list-item").ListItemProps) => import("react").JSX.Element, any, {}, never>;
 export declare const SuffixelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ItemsRollComponents/ListItem.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import Menu from '@synerise/ds-menu';
+import DSListItem from '@synerise/ds-list-item';
 import { RemoveIconWrapper } from './ItemRemoveIcon.styles';
-export var ListItem = styled(Menu.Item).withConfig({
+export var ListItem = styled(DSListItem).withConfig({
   displayName: "ListItemstyles__ListItem",
   componentId: "x6qavm-0"
 })(["&{", "{opacity:0;display:none;}}&:hover{", "{opacity:1;display:flex;}}"], RemoveIconWrapper, RemoveIconWrapper);

package/dist/ItemsRollComponents/ListItem.types.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ItemRollElement, ItemsRollGroup } from '../ItemsRoll.types';
+import type { ReactNode } from 'react';
+import type { ItemRollElement, ItemsRollGroup } from '../ItemsRoll.types';
 export type ItemElementProps = {
     highlight?: string;
     item: ItemRollElement;
     group?: ItemsRollGroup;
     onItemClick?: (id: string, group?: ItemsRollGroup) => void;
     onItemRemove?: (id: string, group?: ItemsRollGroup) => void;
-    removeTooltipLabel: string | React.ReactNode;
+    removeTooltipLabel: ReactNode;
 };

package/dist/ItemsRollComponents/VirtualizedListItem.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ItemRendererProps } from './VirtualizedListItem.types';
-declare const ItemRenderer: ({ highlight, onItemClick, onItemRemove, tooltipLabel, group }: ItemRendererProps) => ({ index, style, data }: ListChildComponentProps) => JSX.Element;
+declare const ItemRenderer: ({ highlight, onItemClick, onItemRemove, tooltipLabel, group }: ItemRendererProps) => ({ index, style, data }: ListChildComponentProps) => React.JSX.Element;
 export default ItemRenderer;

package/dist/ItemsRollComponents/VirtualizedListItem.js

@@ -1,8 +1,6 @@
 var _excluded = ["suffixel"];
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React from 'react';
-import Menu from '@synerise/ds-menu';
-import { NOOP } from '@synerise/ds-utils';
+import React, { useCallback } from 'react';
 import * as S from './ListItem.styles';
 import { RemoveIcon } from './ItemRemoveIcon';
 var ItemRenderer = function ItemRenderer(_ref) {
@@ -21,22 +19,21 @@ var ItemRenderer = function ItemRenderer(_ref) {
       item = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    var onClick = React.useCallback(function () {
+    var onClick = useCallback(function () {
       return onItemClick && onItemClick(item.id, group);
     }, [item.id]);
-    return /*#__PURE__*/React.createElement(S.ListItem, null, /*#__PURE__*/React.createElement(Menu.Item, {
+    return /*#__PURE__*/React.createElement(S.ListItem, {
       className: "items-roll-list-item",
       highlight: highlight,
-      onItemHover: NOOP,
       onClick: onClick,
       style: style,
-      suffixel: /*#__PURE__*/React.createElement(S.SuffixelWrapper, null, suffixel, !!onItemRemove && /*#__PURE__*/React.createElement(RemoveIcon, {
+      suffixel: /*#__PURE__*/React.createElement(S.SuffixelWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, suffixel, !!onItemRemove && /*#__PURE__*/React.createElement(RemoveIcon, {
         id: item.id,
         handleRemove: onItemRemove,
         tooltipLabel: tooltipLabel,
         group: group
-      }))
-    }, item.text));
+      })))
+    }, item.text);
   };
 };
 export default ItemRenderer;

package/dist/ItemsRollComponents/VirtualizedListItem.types.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-import { ItemsRollGroup } from '../ItemsRoll.types';
+import type { ReactNode } from 'react';
+import type { ItemsRollGroup } from '../ItemsRoll.types';
 export type ItemRendererProps = {
     highlight?: string;
     group?: ItemsRollGroup;
     onItemClick?: (id: string, group?: ItemsRollGroup) => void;
     onItemRemove?: (id: string, group?: ItemsRollGroup) => void;
-    tooltipLabel: string | React.ReactNode;
+    tooltipLabel: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-items-roll",
-  "version": "0.7.16",
+  "version": "0.8.1",
   "description": "ItemsRoll UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,14 +34,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.19",
-    "@synerise/ds-divider": "^0.7.15",
-    "@synerise/ds-dropdown": "^0.18.24",
-    "@synerise/ds-icon": "^0.67.0",
-    "@synerise/ds-menu": "^0.20.6",
-    "@synerise/ds-popconfirm": "^0.10.61",
-    "@synerise/ds-search": "^0.9.19",
-    "@synerise/ds-tooltip": "^0.14.49",
+    "@synerise/ds-button": "^0.21.21",
+    "@synerise/ds-divider": "^0.7.17",
+    "@synerise/ds-dropdown": "^0.18.26",
+    "@synerise/ds-icon": "^0.68.0",
+    "@synerise/ds-list-item": "^0.5.1",
+    "@synerise/ds-menu": "^0.20.8",
+    "@synerise/ds-popconfirm": "^0.10.63",
+    "@synerise/ds-search": "^0.9.21",
+    "@synerise/ds-tooltip": "^0.14.51",
     "@synerise/ds-utils": "^0.31.2",
     "react-window": "^1.8.5"
   },
@@ -50,5 +51,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "e9897e5ecb13a9c022f5ed002db76e4ab78318c5"
+  "gitHead": "9ebd107163650754a5f55680d62d30812d740084"
 }