@synerise/ds-items-roll 1.5.15 → 1.5.16

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.15...@synerise/ds-items-roll@1.5.16) (2026-04-20)
+
+### Bug Fixes
+
+- **items-roll:** skip rendering divider if footer is empty ([f828790](https://github.com/Synerise/synerise-design/commit/f828790e8d79a5a1675fb1c0dc71fe049f66cef3))
+
 ## [1.5.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.14...@synerise/ds-items-roll@1.5.15) (2026-04-14)
 
 **Note:** Version bump only for package @synerise/ds-items-roll

package/README.md

@@ -46,7 +46,7 @@ import ItemsRoll from '@synerise/ds-items-roll';
 | hideSearch                   | Hide search component in itemsroll                                                                                | boolean                                                 | -       |
 | isDisabled                   | prevents rendering 'remove' / 'clear all' buttons                                                                 | boolean                                                 | -       |
 | 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      |
+| maxToShowItems               | Amount of initial ItemsRollElement to render. Note that if number is greater than 20, list will become scrollable | number                                                  | 10      |
 | onClearAll                   | Callback function that is fired when click on clearAll button                                                     | () => void                                              | -       |
 | onChangeSelection            | Callback function that is fired when click on changeSelection button                                              | () => void                                              | -       |
 | onItemClick                  | Callback function that is fired when list element is clicked                                                      | (id: string, group?: string) => void                    | -       |
@@ -60,6 +60,7 @@ import ItemsRoll from '@synerise/ds-items-roll';
 | renderCount                  | Custom items count renderer                                                                                       | (count: number) => ReactNode                            | -       |
 | texts                        | Object contains texts for buttons, title etc.                                                                     | Texts                                                   | -       |
 | useFooter                    | Whether the footer is visibile                                                                                    | boolean                                                 | -       |
+| intl                         | **@deprecated** Component uses `useIntl()` internally; prop is accepted but ignored                               | IntlShape                                               | -       |
 | useVirtualizedList           | **@deprecated** Virtualized list was removed; prop is accepted but ignored                                        | boolean                                                 | -       |
 | virtualizedRowHeight         | **@deprecated** Ignored                                                                                           | number                                                  | -       |
 | virtualizedRowWidth          | **@deprecated** Ignored                                                                                           | number                                                  | -       |

package/dist/ItemsRoll.js

@@ -97,7 +97,7 @@ const ItemsRoll = ({
   return /* @__PURE__ */ jsxs(Panel, { style: style || {}, className: className || "", "data-testid": "ds-items-roll", radius: 3, p: 12, children: [
     /* @__PURE__ */ jsx(Header, { actions, allTexts, changeSelectionIcon, changeSelectionDropdownProps, customSidebarActions, hideSearch, itemsCount, onChangeSelection, onSearch, onSearchClear, searchValue, searchPlaceholder }),
     /* @__PURE__ */ jsx(Divider, { dashed: true }),
-    /* @__PURE__ */ jsx(List, { groups, items, onItemClick, onItemRemove: !isDisabled ? onItemRemove : void 0, noResultsLabel: allTexts.noResultsLabel, removeTooltipLabel: allTexts.removeTooltipLabel, searchValue, visibleItems }),
+    /* @__PURE__ */ jsx(List, { groups, onItemClick, onItemRemove: !isDisabled ? onItemRemove : void 0, noResultsLabel: allTexts.noResultsLabel, removeTooltipLabel: allTexts.removeTooltipLabel, searchValue, visibleItems }),
     useFooter && /* @__PURE__ */ jsx(Footer, { searchMode: Boolean(searchValue), allTexts, itemsCount: items.length, maxToShowItems, onClearAll: !isDisabled ? onClearAll : void 0, showAdditionalItems, showDefaultItemsAmount, showMoreStep, visibleItemsCount: visibleItems.length })
   ] });
 };

package/dist/ItemsRollComponents/Footer.js

@@ -6,7 +6,7 @@ import { ShowButtonsWrapper, Divider, ContainerSpaceBetween, ClearButton, Warnin
 const ShowLessButton = ({
   showDefaultItemsAmount,
   showLessLabel
-}) => /* @__PURE__ */ jsxs(ShowButton, { type: "ghost", mode: "icon-label", onClick: showDefaultItemsAmount, children: [
+}) => /* @__PURE__ */ jsxs(ShowButton, { type: "ghost", mode: "icon-label", onClick: showDefaultItemsAmount, "data-testid": "ds-items-roll-show-less", children: [
   /* @__PURE__ */ jsx(ArrowIcon, { component: /* @__PURE__ */ jsx(ArrowUpCircleM, {}), size: 20 }),
   /* @__PURE__ */ jsx("span", { className: "bold-label", children: showLessLabel })
 ] });
@@ -15,7 +15,7 @@ const ShowMoreButton = ({
   moreLabel,
   showAdditionalItems,
   getShowMoreNumber
-}) => /* @__PURE__ */ jsxs(ShowButton, { type: "ghost", mode: "icon-label", onClick: showAdditionalItems, children: [
+}) => /* @__PURE__ */ jsxs(ShowButton, { type: "ghost", mode: "icon-label", onClick: showAdditionalItems, "data-testid": "ds-items-roll-show-more", children: [
   /* @__PURE__ */ jsx(ArrowIcon, { component: /* @__PURE__ */ jsx(ArrowDownCircleM, {}), size: 20 }),
   /* @__PURE__ */ jsxs(ShowButtonLabel, { children: [
     showLabel,
@@ -37,9 +37,11 @@ const Footer = ({
   searchMode
 }) => {
   const getShowMoreNumber = useMemo(() => visibleItemsCount + showMoreStep < itemsCount ? showMoreStep : itemsCount - visibleItemsCount, [itemsCount, showMoreStep, visibleItemsCount]);
+  const showButtons = useMemo(() => itemsCount > maxToShowItems, [itemsCount, maxToShowItems]);
+  const showClearButton = useMemo(() => onClearAll && !searchMode, [onClearAll, searchMode]);
   const showDivider = useMemo(() => {
-    return !searchMode || searchMode && itemsCount > maxToShowItems;
-  }, [searchMode, maxToShowItems, itemsCount]);
+    return showButtons || showClearButton;
+  }, [showButtons, showClearButton]);
   const buttonsConfiguration = useMemo(() => {
     if (visibleItemsCount === itemsCount) {
       return /* @__PURE__ */ jsx(ShowLessButton, { showLessLabel: allTexts.showLessLabel, showDefaultItemsAmount });
@@ -54,9 +56,9 @@ const Footer = ({
   }, [itemsCount, maxToShowItems, visibleItemsCount, getShowMoreNumber, showDefaultItemsAmount, showAdditionalItems, allTexts]);
   return visibleItemsCount !== 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
     showDivider && /* @__PURE__ */ jsx(Divider, { dashed: true, footer: true }),
-    /* @__PURE__ */ jsxs(ContainerSpaceBetween, { "data-testid": "items-roll-footer", children: [
-      itemsCount > maxToShowItems && buttonsConfiguration,
-      onClearAll && !searchMode && /* @__PURE__ */ jsx(Popconfirm, { onConfirm: onClearAll, icon: /* @__PURE__ */ jsx(WarningIcon, { component: /* @__PURE__ */ jsx(WarningFillM, {}) }), cancelText: allTexts.popconfirmNoLabel, okText: allTexts.popconfirmYesLabel, title: allTexts.popconfirmTitleLabel, children: /* @__PURE__ */ jsxs(ClearButton, { type: "custom-color-ghost", color: "red", mode: "icon-label", children: [
+    (showButtons || showClearButton) && /* @__PURE__ */ jsxs(ContainerSpaceBetween, { "data-testid": "items-roll-footer", children: [
+      showButtons && buttonsConfiguration,
+      showClearButton && /* @__PURE__ */ jsx(Popconfirm, { onConfirm: onClearAll, icon: /* @__PURE__ */ jsx(WarningIcon, { component: /* @__PURE__ */ jsx(WarningFillM, {}) }), cancelText: allTexts.popconfirmNoLabel, okText: allTexts.popconfirmYesLabel, title: allTexts.popconfirmTitleLabel, children: /* @__PURE__ */ jsxs(ClearButton, { type: "custom-color-ghost", color: "red", mode: "icon-label", children: [
         /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseS, {}), size: 22 }),
         allTexts.clearAllLabel
       ] }) })

package/dist/ItemsRollComponents/Header.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import Dropdown from "@synerise/ds-dropdown";
 import Icon, { EditM } from "@synerise/ds-icon";
-import { SearchInput } from "@synerise/ds-search/dist/Elements";
+import { SearchInput } from "@synerise/ds-search";
 import { NOOP } from "@synerise/ds-utils";
 import Extras from "../Extras/Extras.js";
 import { ChangeSelection, ContainerSpaceBetween, HeaderLeft, HeaderRight, SearchWrapper } from "../ItemsRoll.styles.js";

package/dist/ItemsRollComponents/ItemRemoveIcon.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { theme } from "@synerise/ds-core";
 import Icon, { CloseS } from "@synerise/ds-icon";
+import { FloatingDelayGroup } from "@synerise/ds-popover";
 import Tooltip from "@synerise/ds-tooltip";
 import { RemoveIconWrapper } from "./ItemRemoveIcon.styles.js";
 const RemoveIcon = ({
@@ -8,10 +9,13 @@ const RemoveIcon = ({
   handleRemove,
   tooltipLabel,
   group
-}) => /* @__PURE__ */ jsx(Tooltip, { title: tooltipLabel, children: /* @__PURE__ */ jsx(RemoveIconWrapper, { "data-testid": "items-roll-remove-icon", children: /* @__PURE__ */ jsx(Icon, { className: "element-remove-icon", onClick: (event) => {
+}) => /* @__PURE__ */ jsx(FloatingDelayGroup, { delay: {
+  open: 0,
+  close: 100
+}, children: /* @__PURE__ */ jsx(Tooltip, { title: tooltipLabel, children: /* @__PURE__ */ jsx(RemoveIconWrapper, { "data-testid": "items-roll-remove-icon", children: /* @__PURE__ */ jsx(Icon, { className: "element-remove-icon", onClick: (event) => {
   event.stopPropagation();
   handleRemove(id, group);
-}, component: /* @__PURE__ */ jsx(CloseS, {}), color: theme.palette["red-600"], size: 24 }) }) });
+}, component: /* @__PURE__ */ jsx(CloseS, {}), color: theme.palette["red-600"], size: 24 }) }) }) });
 export {
   RemoveIcon
 };

package/dist/ItemsRollComponents/List.d.ts

@@ -1,6 +1,4 @@
 import { default as 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: ({ groups, onItemClick, onItemRemove, noResultsLabel, removeTooltipLabel, searchValue, visibleItems, }: ListProps) => React.JSX.Element;
 export default List;

package/dist/ItemsRollComponents/List.js

@@ -30,6 +30,5 @@ const List = ({
   ] }) : /* @__PURE__ */ jsx(ListContextProvider, { children: /* @__PURE__ */ jsx(ListWrapper, { children: finalItems }) });
 };
 export {
-  List as default,
-  itemsInGroup
+  List as default
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-items-roll",
-  "version": "1.5.15",
+  "version": "1.5.16",
   "description": "ItemsRoll UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -40,12 +40,14 @@
     "@synerise/ds-menu": "^1.4.15",
     "@synerise/ds-panel": "^1.2.5",
     "@synerise/ds-popconfirm": "^1.3.12",
+    "@synerise/ds-popover": "^1.5.4",
     "@synerise/ds-search": "^1.5.13",
     "@synerise/ds-tooltip": "^1.4.12",
     "@synerise/ds-utils": "^1.8.0",
     "react-intl": "^6.8.7"
   },
   "devDependencies": {
+    "@testing-library/react": "^14",
     "@testing-library/user-event": "^14"
   },
   "peerDependencies": {
@@ -54,5 +56,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "f5437b2141f3dbad7319626fe5812bbb3488191a"
+  "gitHead": "4766ad0a45eea48ac75745bc9e7525f5dccc71e0"
 }