@synerise/ds-items-roll 1.0.20 → 1.0.22

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.0.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.0.21...@synerise/ds-items-roll@1.0.22) (2025-07-24)
+
+**Note:** Version bump only for package @synerise/ds-items-roll
+
+
+
+
+
+## [1.0.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.0.20...@synerise/ds-items-roll@1.0.21) (2025-07-17)
+
+
+### Bug Fixes
+
+* **items-roll:** change icons and add new stories ([c813c6f](https://github.com/Synerise/synerise-design/commit/c813c6f10d2a5b107a534f7abfd54765a6e5e7a7))
+
+
+
+
+
 ## [1.0.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.0.19...@synerise/ds-items-roll@1.0.20) (2025-07-15)
 
 **Note:** Version bump only for package @synerise/ds-items-roll

package/dist/ItemsRoll.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type ItemsRollProps } from './ItemsRoll.types';
-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 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, }: ItemsRollProps) => React.JSX.Element;
 export default ItemsRoll;

package/dist/ItemsRoll.js

@@ -28,10 +28,7 @@ export var ItemsRoll = function ItemsRoll(_ref) {
     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;
+    useFooter = _ref.useFooter;
   var intl = useIntl();
   var defaultTexts = {
     changeSelectionLabel: intl.formatMessage({
@@ -121,10 +118,7 @@ export var ItemsRoll = function ItemsRoll(_ref) {
     noResultsLabel: allTexts.noResultsLabel,
     removeTooltipLabel: allTexts.removeTooltipLabel,
     searchValue: searchValue,
-    useVirtualizedList: useVirtualizedList,
-    visibleItems: visibleItems,
-    virtualizedRowHeight: virtualizedRowHeight,
-    virtualizedRowWidth: virtualizedRowWidth
+    visibleItems: visibleItems
   }), useFooter && /*#__PURE__*/React.createElement(Footer, {
     searchMode: Boolean(searchValue),
     allTexts: allTexts,

package/dist/ItemsRoll.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import Button from '@synerise/ds-button';
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContainerSpaceBetween: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -12,10 +11,10 @@ export declare const SearchWrapper: import("styled-components").StyledComponent<
 export declare const ShowButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 export declare const ShowButtonLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ClearButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
-export declare const ArrowIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
+export declare const ArrowIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
 export declare const NoResults: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NoResultIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Divider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => import("react").JSX.Element, any, {
-    footer?: boolean | undefined;
+export declare const Divider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {
+    footer?: boolean;
 }, never>;
-export declare const WarningIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
+export declare const WarningIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;

package/dist/ItemsRoll.styles.js

@@ -103,11 +103,8 @@ export var NoResults = styled.div.withConfig({
 export var NoResultIconWrapper = styled.div.withConfig({
   displayName: "ItemsRollstyles__NoResultIconWrapper",
   componentId: "sc-579u47-14"
-})(["width:40px;height:40px;border-radius:50%;background:", ";margin-bottom:16px;display:flex;align-items:center;justify-content:center;.ds-icon{svg{fill:", ";}}"], function (_ref15) {
+})(["width:40px;height:40px;border-radius:50%;margin-bottom:16px;display:flex;align-items:center;justify-content:center;.ds-icon{svg{fill:", ";}}"], function (_ref15) {
   var theme = _ref15.theme;
-  return theme.palette['grey-200'];
-}, function (_ref16) {
-  var theme = _ref16.theme;
   return theme.palette['grey-600'];
 });
 export var Divider = styled(DividerBase).withConfig({
@@ -119,7 +116,7 @@ export var Divider = styled(DividerBase).withConfig({
 export var WarningIcon = styled(Icon).withConfig({
   displayName: "ItemsRollstyles__WarningIcon",
   componentId: "sc-579u47-16"
-})(["svg{fill:", ";}"], function (_ref17) {
-  var theme = _ref17.theme;
+})(["svg{fill:", ";}"], function (_ref16) {
+  var theme = _ref16.theme;
   return theme.palette['yellow-500'];
 });

package/dist/ItemsRoll.types.d.ts

@@ -36,7 +36,10 @@ export type ItemsRollProps = {
         [k in Texts]?: ReactNode;
     };
     useFooter?: boolean;
+    /** @deprecated */
     useVirtualizedList?: boolean;
+    /** @deprecated */
     virtualizedRowHeight?: number;
+    /** @deprecated */
     virtualizedRowWidth?: number;
 };

package/dist/ItemsRollComponents/List.d.ts

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

package/dist/ItemsRollComponents/List.js

@@ -1,10 +1,8 @@
 import React, { useMemo } from 'react';
-import { FixedSizeList } from 'react-window';
-import Icon, { SearchNoResultsM } from '@synerise/ds-icon';
+import Icon, { InformationNoSearchResultL } from '@synerise/ds-icon';
 import { GroupItem } from '@synerise/ds-list-item';
 import * as S from '../ItemsRoll.styles';
 import ItemElement from './ListItem';
-import ItemRenderer from './VirtualizedListItem';
 export var itemsInGroup = function itemsInGroup(group, items) {
   return items.filter(function (item) {
     return item.group === group;
@@ -12,17 +10,12 @@ export var itemsInGroup = function itemsInGroup(group, items) {
 };
 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;
+    visibleItems = _ref.visibleItems;
   var groupedList = useMemo(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, groups == null ? void 0 : groups.map(function (group) {
       var groupItems = itemsInGroup(group, visibleItems);
@@ -56,21 +49,8 @@ var List = function List(_ref) {
   }, [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("div", {
-    "data-testid": "items-roll-virtualized-list"
-  }, /*#__PURE__*/React.createElement(FixedSizeList, {
-    height: visibleItems.length * virtualizedRowHeight,
-    itemData: items,
-    itemCount: visibleItems.length,
-    itemSize: virtualizedRowHeight,
-    width: virtualizedRowWidth || '100%'
-  }, ItemRenderer({
-    highlight: searchValue,
-    onItemClick: onItemClick,
-    onItemRemove: onItemRemove,
-    tooltipLabel: removeTooltipLabel
-  }))) : finalItems);
+    component: /*#__PURE__*/React.createElement(InformationNoSearchResultL, null),
+    size: 48
+  })), noResultsLabel) : /*#__PURE__*/React.createElement(S.ListWrapper, null, finalItems);
 };
 export default List;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-items-roll",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "ItemsRoll UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,22 +34,21 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.4.4",
-    "@synerise/ds-divider": "^1.0.15",
-    "@synerise/ds-dropdown": "^1.0.17",
-    "@synerise/ds-icon": "^1.6.0",
-    "@synerise/ds-list-item": "^1.0.15",
-    "@synerise/ds-menu": "^1.0.16",
-    "@synerise/ds-popconfirm": "^1.0.16",
-    "@synerise/ds-search": "^1.2.4",
-    "@synerise/ds-tooltip": "^1.1.13",
-    "@synerise/ds-utils": "^1.3.1",
-    "react-window": "^1.8.5"
+    "@synerise/ds-button": "^1.4.6",
+    "@synerise/ds-divider": "^1.0.17",
+    "@synerise/ds-dropdown": "^1.0.19",
+    "@synerise/ds-icon": "^1.6.2",
+    "@synerise/ds-list-item": "^1.0.17",
+    "@synerise/ds-menu": "^1.0.18",
+    "@synerise/ds-popconfirm": "^1.0.18",
+    "@synerise/ds-search": "^1.2.6",
+    "@synerise/ds-tooltip": "^1.1.15",
+    "@synerise/ds-utils": "^1.4.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "f7c362a4f370d86b51df9aba9e91ac8f7fe4ed8f"
+  "gitHead": "b35b1875727156fe9f5b3bad55aed5ca447c8c8d"
 }

package/dist/ItemsRollComponents/VirtualizedListItem.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { type ListChildComponentProps } from 'react-window';
-import { type ItemRendererProps } from './VirtualizedListItem.types';
-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,38 +0,0 @@
-var _excluded = ["suffixel"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback } from 'react';
-import { RemoveIcon } from './ItemRemoveIcon';
-import * as S from './ListItem.styles';
-var ItemRenderer = function ItemRenderer(_ref) {
-  var highlight = _ref.highlight,
-    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;
-    var _ref3 = data[index],
-      suffixel = _ref3.suffixel,
-      item = _objectWithoutPropertiesLoose(_ref3, _excluded);
-
-    // 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, {
-      className: "items-roll-list-item",
-      highlight: highlight,
-      onClick: onClick,
-      style: style,
-      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);
-  };
-};
-export default ItemRenderer;

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

@@ -1,9 +0,0 @@
-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: ReactNode;
-};

package/dist/ItemsRollComponents/VirtualizedListItem.types.js

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