@synerise/ds-items-roll 0.7.15 → 0.8.0

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.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
+
+
+
+
+
 ## [0.7.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@0.7.14...@synerise/ds-items-roll@0.7.15) (2024-11-21)
 
 **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,5 +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';
@@ -10,18 +8,15 @@ var ItemMenu = styled(Menu).withConfig({
   displayName: "Extras__ItemMenu",
   componentId: "sc-1cdoprb-0"
 })(["padding:8px;"]);
-
 var Extras = function Extras(_ref) {
   var actions = _ref.actions;
   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",
@@ -30,5 +25,4 @@ var Extras = function Extras(_ref) {
     component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
   })));
 };
-
 export default Extras;

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

@@ -1,44 +1,41 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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';
 export var ItemsRoll = function ItemsRoll(_ref) {
   var actions = _ref.actions,
-      changeSelectionIcon = _ref.changeSelectionIcon,
-      changeSelectionDropdownProps = _ref.changeSelectionDropdownProps,
-      className = _ref.className,
-      customSidebarActions = _ref.customSidebarActions,
-      groups = _ref.groups,
-      hideSearch = _ref.hideSearch,
-      items = _ref.items,
-      _ref$maxToShowItems = _ref.maxToShowItems,
-      maxToShowItems = _ref$maxToShowItems === void 0 ? 10 : _ref$maxToShowItems,
-      onClearAll = _ref.onClearAll,
-      onChangeSelection = _ref.onChangeSelection,
-      onItemClick = _ref.onItemClick,
-      onItemRemove = _ref.onItemRemove,
-      onSearchClear = _ref.onSearchClear,
-      onSearch = _ref.onSearch,
-      searchValue = _ref.searchValue,
-      searchPlaceholder = _ref.searchPlaceholder,
-      _ref$showMoreStep = _ref.showMoreStep,
-      showMoreStep = _ref$showMoreStep === void 0 ? 10 : _ref$showMoreStep,
-      style = _ref.style,
-      texts = _ref.texts,
-      useFooter = _ref.useFooter,
-      useVirtualizedList = _ref.useVirtualizedList,
-      virtualizedRowWidth = _ref.virtualizedRowWidth,
-      virtualizedRowHeight = _ref.virtualizedRowHeight;
+    changeSelectionIcon = _ref.changeSelectionIcon,
+    changeSelectionDropdownProps = _ref.changeSelectionDropdownProps,
+    className = _ref.className,
+    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,
+    onClearAll = _ref.onClearAll,
+    onChangeSelection = _ref.onChangeSelection,
+    onItemClick = _ref.onItemClick,
+    onItemRemove = _ref.onItemRemove,
+    onSearchClear = _ref.onSearchClear,
+    onSearch = _ref.onSearch,
+    renderCount = _ref.renderCount,
+    searchValue = _ref.searchValue,
+    searchPlaceholder = _ref.searchPlaceholder,
+    _ref$showMoreStep = _ref.showMoreStep,
+    showMoreStep = _ref$showMoreStep === void 0 ? 10 : _ref$showMoreStep,
+    style = _ref.style,
+    texts = _ref.texts,
+    useFooter = _ref.useFooter,
+    useVirtualizedList = _ref.useVirtualizedList,
+    virtualizedRowWidth = _ref.virtualizedRowWidth,
+    virtualizedRowHeight = _ref.virtualizedRowHeight;
   var intl = useIntl();
   var defaultTexts = {
     changeSelectionLabel: intl.formatMessage({
@@ -79,27 +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 || '',
@@ -111,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,
@@ -123,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,
@@ -136,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,11 +1,10 @@
-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';
-
 var ShowLessButton = function ShowLessButton(_ref) {
   var showDefaultItemsAmount = _ref.showDefaultItemsAmount,
-      showLessLabel = _ref.showLessLabel;
+    showLessLabel = _ref.showLessLabel;
   return /*#__PURE__*/React.createElement(S.ShowButton, {
     type: "ghost",
     mode: "icon-label",
@@ -17,12 +16,11 @@ var ShowLessButton = function ShowLessButton(_ref) {
     className: "bold-label"
   }, showLessLabel));
 };
-
 var ShowMoreButton = function ShowMoreButton(_ref2) {
   var showLabel = _ref2.showLabel,
-      moreLabel = _ref2.moreLabel,
-      showAdditionalItems = _ref2.showAdditionalItems,
-      getShowMoreNumber = _ref2.getShowMoreNumber;
+    moreLabel = _ref2.moreLabel,
+    showAdditionalItems = _ref2.showAdditionalItems,
+    getShowMoreNumber = _ref2.getShowMoreNumber;
   return /*#__PURE__*/React.createElement(S.ShowButton, {
     type: "ghost",
     mode: "icon-label",
@@ -34,26 +32,25 @@ var ShowMoreButton = function ShowMoreButton(_ref2) {
     className: "bold-label"
   }, getShowMoreNumber), " ", moreLabel));
 };
-
 var Footer = function Footer(_ref3) {
   var allTexts = _ref3.allTexts,
-      itemsCount = _ref3.itemsCount,
-      _ref3$maxToShowItems = _ref3.maxToShowItems,
-      maxToShowItems = _ref3$maxToShowItems === void 0 ? 10 : _ref3$maxToShowItems,
-      onClearAll = _ref3.onClearAll,
-      showAdditionalItems = _ref3.showAdditionalItems,
-      showDefaultItemsAmount = _ref3.showDefaultItemsAmount,
-      _ref3$showMoreStep = _ref3.showMoreStep,
-      showMoreStep = _ref3$showMoreStep === void 0 ? 10 : _ref3$showMoreStep,
-      visibleItemsCount = _ref3.visibleItemsCount,
-      searchMode = _ref3.searchMode;
-  var getShowMoreNumber = React.useMemo(function () {
+    itemsCount = _ref3.itemsCount,
+    _ref3$maxToShowItems = _ref3.maxToShowItems,
+    maxToShowItems = _ref3$maxToShowItems === void 0 ? 10 : _ref3$maxToShowItems,
+    onClearAll = _ref3.onClearAll,
+    showAdditionalItems = _ref3.showAdditionalItems,
+    showDefaultItemsAmount = _ref3.showDefaultItemsAmount,
+    _ref3$showMoreStep = _ref3.showMoreStep,
+    showMoreStep = _ref3$showMoreStep === void 0 ? 10 : _ref3$showMoreStep,
+    visibleItemsCount = _ref3.visibleItemsCount,
+    searchMode = _ref3.searchMode;
+  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
@@ -96,5 +93,4 @@ var Footer = function Footer(_ref3) {
     size: 22
   }), allTexts.clearAllLabel)))) : null;
 };
-
 export default Footer;

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,26 +1,25 @@
-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';
 import { NOOP } from '@synerise/ds-utils';
 import Extras from '../Extras';
 import * as S from '../ItemsRoll.styles';
-
 var Header = function Header(_ref) {
   var actions = _ref.actions,
-      allTexts = _ref.allTexts,
-      _ref$changeSelectionI = _ref.changeSelectionIcon,
-      ChangeSelectionIcon = _ref$changeSelectionI === void 0 ? EditM : _ref$changeSelectionI,
-      changeSelectionDropdownProps = _ref.changeSelectionDropdownProps,
-      customSidebarActions = _ref.customSidebarActions,
-      hideSearch = _ref.hideSearch,
-      itemsCount = _ref.itemsCount,
-      onChangeSelection = _ref.onChangeSelection,
-      onSearch = _ref.onSearch,
-      searchValue = _ref.searchValue,
-      onSearchClear = _ref.onSearchClear,
-      searchPlaceholder = _ref.searchPlaceholder;
-  var ChangeSelectionButton = React.useMemo(function () {
+    allTexts = _ref.allTexts,
+    _ref$changeSelectionI = _ref.changeSelectionIcon,
+    ChangeSelectionIcon = _ref$changeSelectionI === void 0 ? EditM : _ref$changeSelectionI,
+    changeSelectionDropdownProps = _ref.changeSelectionDropdownProps,
+    customSidebarActions = _ref.customSidebarActions,
+    hideSearch = _ref.hideSearch,
+    itemsCount = _ref.itemsCount,
+    onChangeSelection = _ref.onChangeSelection,
+    onSearch = _ref.onSearch,
+    searchValue = _ref.searchValue,
+    onSearchClear = _ref.onSearchClear,
+    searchPlaceholder = _ref.searchPlaceholder;
+  var ChangeSelectionButton = useMemo(function () {
     return /*#__PURE__*/React.createElement(S.ChangeSelection, {
       type: "ghost",
       mode: "icon-label",
@@ -30,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,
@@ -41,5 +40,4 @@ var Header = function Header(_ref) {
     actions: actions
   })));
 };
-
 export default Header;

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,18 +3,19 @@ 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,
-      tooltipLabel = _ref.tooltipLabel,
-      group = _ref.group;
+    handleRemove = _ref.handleRemove,
+    tooltipLabel = _ref.tooltipLabel,
+    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,5 +1,4 @@
-import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
-
+import styled from 'styled-components';
 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';
@@ -10,24 +10,58 @@ export var itemsInGroup = function itemsInGroup(group, items) {
     return item.group === group;
   });
 };
-
 var List = function List(_ref) {
   var groups = _ref.groups,
-      items = _ref.items,
-      onItemClick = _ref.onItemClick,
-      onItemRemove = _ref.onItemRemove,
-      noResultsLabel = _ref.noResultsLabel,
-      removeTooltipLabel = _ref.removeTooltipLabel,
-      searchValue = _ref.searchValue,
-      useVirtualizedList = _ref.useVirtualizedList,
-      visibleItems = _ref.visibleItems,
-      _ref$virtualizedRowHe = _ref.virtualizedRowHeight,
-      virtualizedRowHeight = _ref$virtualizedRowHe === void 0 ? 32 : _ref$virtualizedRowHe,
-      virtualizedRowWidth = _ref.virtualizedRowWidth;
+    items = _ref.items,
+    onItemClick = _ref.onItemClick,
+    onItemRemove = _ref.onItemRemove,
+    noResultsLabel = _ref.noResultsLabel,
+    removeTooltipLabel = _ref.removeTooltipLabel,
+    searchValue = _ref.searchValue,
+    useVirtualizedList = _ref.useVirtualizedList,
+    visibleItems = _ref.visibleItems,
+    _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,
@@ -40,35 +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,29 +1,23 @@
 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) {
   var item = _ref.item,
-      group = _ref.group,
-      highlight = _ref.highlight,
-      onItemClick = _ref.onItemClick,
-      onItemRemove = _ref.onItemRemove,
-      removeTooltipLabel = _ref.removeTooltipLabel;
-  var onClick = React.useCallback(function () {
+    group = _ref.group,
+    highlight = _ref.highlight,
+    onItemClick = _ref.onItemClick,
+    onItemRemove = _ref.onItemRemove,
+    removeTooltipLabel = _ref.removeTooltipLabel;
+  var onClick = useCallback(function () {
     return onItemClick && onItemClick(item.id, group);
   }, [onItemClick, item.id, group]);
-
   var renderSuffixElement = function renderSuffixElement(hovered) {
     return item.suffixel instanceof Function ? item.suffixel(hovered) : item.suffixel;
   };
-
   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,
@@ -35,5 +29,4 @@ var ItemElement = function ItemElement(_ref) {
     onClick: onClick
   }), item.text);
 };
-
 export default ItemElement;

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,47 +1,39 @@
 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) {
   var highlight = _ref.highlight,
-      onItemClick = _ref.onItemClick,
-      onItemRemove = _ref.onItemRemove,
-      tooltipLabel = _ref.tooltipLabel,
-      group = _ref.group;
+    onItemClick = _ref.onItemClick,
+    onItemRemove = _ref.onItemRemove,
+    tooltipLabel = _ref.tooltipLabel,
+    group = _ref.group;
   return function (_ref2) {
     var index = _ref2.index,
-        style = _ref2.style,
-        data = _ref2.data;
-
+      style = _ref2.style,
+      data = _ref2.data;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var _ref3 = data[index],
-        suffixel = _ref3.suffixel,
-        item = _objectWithoutPropertiesLoose(_ref3, _excluded); // eslint-disable-next-line react-hooks/rules-of-hooks
+      suffixel = _ref3.suffixel,
+      item = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
-
-    var onClick = React.useCallback(function () {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    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.15",
+  "version": "0.8.0",
   "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.60",
-    "@synerise/ds-search": "^0.9.19",
-    "@synerise/ds-tooltip": "^0.14.49",
+    "@synerise/ds-button": "^0.21.20",
+    "@synerise/ds-divider": "^0.7.16",
+    "@synerise/ds-dropdown": "^0.18.25",
+    "@synerise/ds-icon": "^0.67.1",
+    "@synerise/ds-list-item": "^0.5.0",
+    "@synerise/ds-menu": "^0.20.7",
+    "@synerise/ds-popconfirm": "^0.10.62",
+    "@synerise/ds-search": "^0.9.20",
+    "@synerise/ds-tooltip": "^0.14.50",
     "@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": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
+  "gitHead": "4a56ee7ef816c22341ce704154dc7aa65b7d1dcc"
 }