@synerise/ds-items-roll 1.5.10 → 1.5.12

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.11...@synerise/ds-items-roll@1.5.12) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-items-roll
+
+## [1.5.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.10...@synerise/ds-items-roll@1.5.11) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-items-roll
+
 ## [1.5.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.9...@synerise/ds-items-roll@1.5.10) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-items-roll

package/README.md

@@ -11,6 +11,8 @@ ItemsRoll UI Component
 npm i @synerise/ds-items-roll
 or
 yarn add @synerise/ds-items-roll
+or
+pnpm add @synerise/ds-items-roll
 ```
 
 ## Usage
@@ -41,8 +43,8 @@ import ItemsRoll from '@synerise/ds-items-roll';
 | className                    | Additional class for ItemsRoll wrapper                                                                            | string                                                  | -       |
 | 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                                                 | -       |
+| 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      |
 | onClearAll                   | Callback function that is fired when click on clearAll button                                                     | () => void                                              | -       |
@@ -58,9 +60,9 @@ 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                                                 | -       |
-| useVirtualizedList           | Whether to use react-virtualized for list                                                                         | boolean                                                 | `false` |
-| virtualizedRowHeight         | Height of virtualizedlist row                                                                                     | number                                                  | 32px    |
-| virtualizedRowWidth          | Width of virtualized list                                                                                         | number                                                  | -       |
+| useVirtualizedList           | **@deprecated** Virtualized list was removed; prop is accepted but ignored                                        | boolean                                                 | -       |
+| virtualizedRowHeight         | **@deprecated** Ignored                                                                                           | number                                                  | -       |
+| virtualizedRowWidth          | **@deprecated** Ignored                                                                                           | number                                                  | -       |
 
 #### ItemRollElement
 
@@ -69,7 +71,7 @@ import ItemsRoll from '@synerise/ds-items-roll';
 | group    | Define affiliation to a specific group in groups Array passed as props to ItemsRoll | string | -       |
 | id       | Unique identifier for element. Used as a key in map                                 | string | -       |
 
-Rest of the `ItemRollElement` props is inherited from [MenuItemProps](https://design.synerise.com/docs/components/menu#menuitemprops)
+Rest of the `ItemRollElement` props is inherited from `ListItemProps` (default) or `MenuItemProps` — the generic `BaseType` parameter controls which base type is used.
 
 #### Texts
 
@@ -84,3 +86,6 @@ Rest of the `ItemRollElement` props is inherited from [MenuItemProps](https://de
 | searchClearTooltipLabel | Input clear tooltip label     | string / React.ReactNode | 'clear'            |
 | showLabel               | Show more first part label    | string / React.ReactNode | 'Show'             |
 | showLessLabel           | Show less button label        | string / React.ReactNode | 'Show less'        |
+| popconfirmTitleLabel    | Clear-all confirmation title  | string / React.ReactNode | 'Are you sure?'    |
+| popconfirmYesLabel      | Clear-all confirm button      | string / React.ReactNode | 'Yes'              |
+| popconfirmNoLabel       | Clear-all cancel button       | string / React.ReactNode | 'No'               |

package/dist/Extras/Extras.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { type ListItemProps } from '@synerise/ds-list-item';
-import type { ItemRollElement } from '../ItemsRoll.types';
+import { default as React } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { ItemRollElement } from '../ItemsRoll.types';
 export type ExtrasProps = {
     actions: ItemRollElement<ListItemProps>[];
 };

package/dist/Extras/Extras.js

@@ -1,22 +1,14 @@
-import React from 'react';
-import Button from '@synerise/ds-button';
-import { DropdownMenu } from '@synerise/ds-dropdown';
-import Icon, { OptionHorizontalM } from '@synerise/ds-icon';
-var Extras = function Extras(_ref) {
-  var actions = _ref.actions;
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    dataSource: actions,
-    trigger: ['click'],
-    placement: "bottomRight",
-    popoverProps: {
-      testId: 'items-roll-actions'
-    },
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: "single-icon"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
-  })));
+import { jsx } from "react/jsx-runtime";
+import Button from "@synerise/ds-button";
+import { DropdownMenu } from "@synerise/ds-dropdown";
+import Icon, { OptionHorizontalM } from "@synerise/ds-icon";
+const Extras = ({
+  actions
+}) => {
+  return /* @__PURE__ */ jsx(DropdownMenu, { dataSource: actions, trigger: ["click"], placement: "bottomRight", popoverProps: {
+    testId: "items-roll-actions"
+  }, asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionHorizontalM, {}) }) }) });
+};
+export {
+  Extras as default
 };
-export default Extras;

package/dist/Extras/index.js

@@ -1 +1,4 @@
-export { default } from './Extras';
+import { default as default2 } from "./Extras.js";
+export {
+  default2 as default
+};

package/dist/ItemsRoll.d.ts

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

package/dist/ItemsRoll.js

@@ -1,137 +1,107 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import Panel from '@synerise/ds-panel';
-import * as S from './ItemsRoll.styles';
-import { Footer, Header, List } from './ItemsRollComponents';
-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,
-    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;
-  var intl = useIntl();
-  var defaultTexts = {
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useIntl } from "react-intl";
+import Panel from "@synerise/ds-panel";
+import { Bold, Divider } from "./ItemsRoll.styles.js";
+import Footer from "./ItemsRollComponents/Footer.js";
+import Header from "./ItemsRollComponents/Header.js";
+import List from "./ItemsRollComponents/List.js";
+const ItemsRoll = ({
+  actions,
+  changeSelectionIcon,
+  changeSelectionDropdownProps,
+  className,
+  customSidebarActions,
+  groups,
+  hideSearch,
+  isDisabled,
+  items,
+  maxToShowItems = 10,
+  onClearAll,
+  onChangeSelection,
+  onItemClick,
+  onItemRemove,
+  onSearchClear,
+  onSearch,
+  renderCount,
+  searchValue,
+  searchPlaceholder,
+  showMoreStep = 10,
+  style,
+  texts,
+  useFooter
+}) => {
+  const intl = useIntl();
+  const defaultTexts = {
     changeSelectionLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.CHANGE-SELECTION'
+      id: "DS.ITEMS-ROLL.CHANGE-SELECTION"
     }),
     clearAllLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.CLEAR-ALL'
+      id: "DS.ITEMS-ROLL.CLEAR-ALL"
     }),
     searchClearTooltipLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.CLEAR-TOOLTIP'
+      id: "DS.ITEMS-ROLL.CLEAR-TOOLTIP"
     }),
     itemsLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.ITEMS'
+      id: "DS.ITEMS-ROLL.ITEMS"
     }),
     moreLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.MORE'
+      id: "DS.ITEMS-ROLL.MORE"
     }),
     noResultsLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.NO-RESULTS'
+      id: "DS.ITEMS-ROLL.NO-RESULTS"
     }),
     popconfirmNoLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.CONFIRM-NO'
+      id: "DS.ITEMS-ROLL.CONFIRM-NO"
     }),
     popconfirmTitleLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.CONFIRM-TITLE'
+      id: "DS.ITEMS-ROLL.CONFIRM-TITLE"
     }),
     popconfirmYesLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.CONFIRM-YES'
+      id: "DS.ITEMS-ROLL.CONFIRM-YES"
     }),
     removeTooltipLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.REMOVE-TOOLTIP'
+      id: "DS.ITEMS-ROLL.REMOVE-TOOLTIP"
     }),
     showLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.SHOW'
+      id: "DS.ITEMS-ROLL.SHOW"
     }),
     showLessLabel: intl.formatMessage({
-      id: 'DS.ITEMS-ROLL.SHOW-LESS'
+      id: "DS.ITEMS-ROLL.SHOW-LESS"
     })
   };
-  var allTexts = texts ? _extends({}, defaultTexts, texts) : defaultTexts;
-  var _useState = useState(maxToShowItems),
-    visibleItemsAmount = _useState[0],
-    setVisibleItemsAmount = _useState[1];
-  useEffect(function () {
+  const allTexts = texts ? {
+    ...defaultTexts,
+    ...texts
+  } : defaultTexts;
+  const [visibleItemsAmount, setVisibleItemsAmount] = useState(maxToShowItems);
+  useEffect(() => {
     setVisibleItemsAmount(maxToShowItems);
   }, [maxToShowItems]);
-  var showAdditionalItems = useCallback(function () {
+  const showAdditionalItems = useCallback(() => {
     if (visibleItemsAmount + showMoreStep < items.length) {
       setVisibleItemsAmount(visibleItemsAmount + showMoreStep);
     } else {
       setVisibleItemsAmount(items.length);
     }
   }, [items.length, visibleItemsAmount, showMoreStep]);
-  var visibleItems = useMemo(function () {
-    return visibleItemsAmount === items.length ? items : items.slice(0, visibleItemsAmount);
-  }, [items, visibleItemsAmount]);
-  var showDefaultItemsAmount = useCallback(function () {
+  const visibleItems = useMemo(() => visibleItemsAmount === items.length ? items : items.slice(0, visibleItemsAmount), [items, visibleItemsAmount]);
+  const showDefaultItemsAmount = useCallback(() => {
     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(Panel, {
-    style: style || {},
-    className: className || '',
-    "data-testid": "ds-items-roll",
-    radius: 3,
-    p: 12
-  }, /*#__PURE__*/React.createElement(Header, {
-    actions: actions,
-    allTexts: allTexts,
-    changeSelectionIcon: changeSelectionIcon,
-    changeSelectionDropdownProps: changeSelectionDropdownProps,
-    customSidebarActions: customSidebarActions,
-    hideSearch: hideSearch,
-    itemsCount: itemsCount,
-    onChangeSelection: onChangeSelection,
-    onSearch: onSearch,
-    onSearchClear: onSearchClear,
-    searchValue: searchValue,
-    searchPlaceholder: searchPlaceholder
-  }), /*#__PURE__*/React.createElement(S.Divider, {
-    dashed: true
-  }), /*#__PURE__*/React.createElement(List, {
-    groups: groups,
-    items: items,
-    onItemClick: onItemClick,
-    onItemRemove: !isDisabled ? onItemRemove : undefined,
-    noResultsLabel: allTexts.noResultsLabel,
-    removeTooltipLabel: allTexts.removeTooltipLabel,
-    searchValue: searchValue,
-    visibleItems: visibleItems
-  }), useFooter && /*#__PURE__*/React.createElement(Footer, {
-    searchMode: Boolean(searchValue),
-    allTexts: allTexts,
-    itemsCount: items.length,
-    maxToShowItems: maxToShowItems,
-    onClearAll: !isDisabled ? onClearAll : undefined,
-    showAdditionalItems: showAdditionalItems,
-    showDefaultItemsAmount: showDefaultItemsAmount,
-    showMoreStep: showMoreStep,
-    visibleItemsCount: visibleItems.length
-  }));
+  const itemsCount = useMemo(() => renderCount ? renderCount(items.length) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    allTexts.itemsLabel,
+    ": ",
+    /* @__PURE__ */ jsx(Bold, { children: items.length })
+  ] }), [allTexts.itemsLabel, items.length, renderCount]);
+  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 }),
+    useFooter && /* @__PURE__ */ jsx(Footer, { searchMode: Boolean(searchValue), allTexts, itemsCount: items.length, maxToShowItems, onClearAll: !isDisabled ? onClearAll : void 0, showAdditionalItems, showDefaultItemsAmount, showMoreStep, visibleItemsCount: visibleItems.length })
+  ] });
+};
+export {
+  ItemsRoll,
+  ItemsRoll as default
 };
-export default ItemsRoll;

package/dist/ItemsRoll.styles.d.ts

@@ -1,19 +1,19 @@
-import { type StyledButton } from '@synerise/ds-button';
-export declare const ContainerSpaceBetween: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ShowButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Bold: import("styled-components").StyledComponent<"span", any, {}, never>;
+import { StyledButton } from '@synerise/ds-button';
+export declare const ContainerSpaceBetween: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const HeaderRight: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const HeaderLeft: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ShowButtonsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ListWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Bold: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const ChangeSelection: StyledButton;
-export declare const SearchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const ShowButton: StyledButton;
-export declare const ShowButtonLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ShowButtonLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const ClearButton: StyledButton;
-export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, 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) => React.JSX.Element, any, {
+export declare const ArrowIcon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, 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) => React.JSX.Element, any, {
     footer?: boolean;
 }, never>;
-export declare const WarningIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const WarningIcon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/ItemsRoll.styles.js

@@ -1,115 +1,116 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-import DividerBase from '@synerise/ds-divider';
-import Icon from '@synerise/ds-icon';
-export var ContainerSpaceBetween = styled.div.withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+import DividerBase from "@synerise/ds-divider";
+import Icon from "@synerise/ds-icon";
+const ContainerSpaceBetween = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemsRollstyles__ContainerSpaceBetween",
   componentId: "sc-579u47-0"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
-export var HeaderRight = styled.div.withConfig({
+const HeaderRight = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemsRollstyles__HeaderRight",
   componentId: "sc-579u47-1"
 })(["display:flex;align-items:center;justify-content:flex-end;"]);
-export var HeaderLeft = styled.div.withConfig({
+const HeaderLeft = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemsRollstyles__HeaderLeft",
   componentId: "sc-579u47-2"
-})(["color:", ";margin-left:12px;height:34px;display:flex;align-items:center;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette['grey-800'];
-});
-export var ShowButtonsWrapper = styled.div.withConfig({
+})(["color:", ";margin-left:12px;height:34px;display:flex;align-items:center;"], ({
+  theme
+}) => theme.palette["grey-800"]);
+const ShowButtonsWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemsRollstyles__ShowButtonsWrapper",
   componentId: "sc-579u47-3"
 })(["display:flex;align-items:center;justify-content:flex-start;"]);
-export var ListWrapper = styled.div.withConfig({
+const ListWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemsRollstyles__ListWrapper",
   componentId: "sc-579u47-4"
-})(["&&&{.ant-menu-inline,.-inline{border:none;}.ant-menu{.items-roll-list-item{padding-left:12px !important;:hover{svg{fill:", ";}.element-remove-icon{svg{fill:", " !important;:hover{fill:", " !important;}}}}:focus{box-shadow:none !important;background:transparent;}:focus:hover{background-color:", ";}}.ant-menu-item-group-list,.-item-group-list{margin-left:-12px;}.ant-menu-item-group-title,.-item-group-title{font-size:10px;text-transform:uppercase;color:", ";font-weight:500;padding-left:0;padding-right:0;margin-left:-12px;}.ant-menu-item-group:not(:first-child):before,.-item-group:not(:first-child):before{content:'';width:calc(100% + 12px);height:1px;display:block;border-bottom:1px dashed ", ";margin:12px 0px 12px -12px;}}}"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette['blue-600'];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.palette['red-600'];
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.palette['red-600'];
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.palette['grey-050'];
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.palette['grey-500'];
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.palette['grey-300'];
-});
-export var Bold = styled.span.withConfig({
+})(["&&&{.ant-menu-inline,.-inline{border:none;}.ant-menu{.items-roll-list-item{padding-left:12px !important;:hover{svg{fill:", ";}.element-remove-icon{svg{fill:", " !important;:hover{fill:", " !important;}}}}:focus{box-shadow:none !important;background:transparent;}:focus:hover{background-color:", ";}}.ant-menu-item-group-list,.-item-group-list{margin-left:-12px;}.ant-menu-item-group-title,.-item-group-title{font-size:10px;text-transform:uppercase;color:", ";font-weight:500;padding-left:0;padding-right:0;margin-left:-12px;}.ant-menu-item-group:not(:first-child):before,.-item-group:not(:first-child):before{content:'';width:calc(100% + 12px);height:1px;display:block;border-bottom:1px dashed ", ";margin:12px 0px 12px -12px;}}}"], ({
+  theme
+}) => theme.palette["blue-600"], ({
+  theme
+}) => theme.palette["red-600"], ({
+  theme
+}) => theme.palette["red-600"], ({
+  theme
+}) => theme.palette["grey-050"], ({
+  theme
+}) => theme.palette["grey-500"], ({
+  theme
+}) => theme.palette["grey-300"]);
+const Bold = /* @__PURE__ */ styled.span.withConfig({
   displayName: "ItemsRollstyles__Bold",
   componentId: "sc-579u47-5"
-})(["color:", ";font-weight:500;margin-left:2px;"], function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.palette['grey-800'];
-});
-export var ChangeSelection = styled(Button).withConfig({
+})(["color:", ";font-weight:500;margin-left:2px;"], ({
+  theme
+}) => theme.palette["grey-800"]);
+const ChangeSelection = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "ItemsRollstyles__ChangeSelection",
   componentId: "sc-579u47-6"
-})(["width:157px;display:flex;align-items:center;padding:4px 9px;font-weight:500;&&&{color:", ";.ds-icon{margin-right:4px;svg{fill:", ";}}}"], function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.palette['blue-600'];
-}, function (_ref0) {
-  var theme = _ref0.theme;
-  return theme.palette['blue-600'];
-});
-export var SearchWrapper = styled.div.withConfig({
+})(["width:157px;display:flex;align-items:center;padding:4px 9px;font-weight:500;&&&{color:", ";.ds-icon{margin-right:4px;svg{fill:", ";}}}"], ({
+  theme
+}) => theme.palette["blue-600"], ({
+  theme
+}) => theme.palette["blue-600"]);
+const SearchWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemsRollstyles__SearchWrapper",
   componentId: "sc-579u47-7"
 })(["margin:0 8px;min-width:32px;flex:1 1 auto;"]);
-export var ShowButton = styled(Button).withConfig({
+const ShowButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "ItemsRollstyles__ShowButton",
   componentId: "sc-579u47-8"
-})(["margin-right:8px;span{font-weight:400;color:", ";}.bold-label{font-weight:500;}"], function (_ref1) {
-  var theme = _ref1.theme;
-  return theme.palette['grey-700'];
-});
-export var ShowButtonLabel = styled.span.withConfig({
+})(["margin-right:8px;span{font-weight:400;color:", ";}.bold-label{font-weight:500;}"], ({
+  theme
+}) => theme.palette["grey-700"]);
+const ShowButtonLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "ItemsRollstyles__ShowButtonLabel",
   componentId: "sc-579u47-9"
 })(["font-weight:400;"]);
-export var ClearButton = styled(Button).withConfig({
+const ClearButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "ItemsRollstyles__ClearButton",
   componentId: "sc-579u47-10"
 })(["margin-left:auto;&&&{.ds-icon{margin-top:1px;}}"]);
-export var ArrowIcon = styled(Icon).withConfig({
+const ArrowIcon = /* @__PURE__ */ styled(Icon).withConfig({
   displayName: "ItemsRollstyles__ArrowIcon",
   componentId: "sc-579u47-11"
-})(["svg{fill:", ";}"], function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.palette['grey-600'];
-});
-export var NoResults = styled.div.withConfig({
+})(["svg{fill:", ";}"], ({
+  theme
+}) => theme.palette["grey-600"]);
+const NoResults = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemsRollstyles__NoResults",
   componentId: "sc-579u47-12"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;height:144px;color:", ";"], function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.palette['grey-600'];
-});
-export var NoResultIconWrapper = styled.div.withConfig({
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;height:144px;color:", ";"], ({
+  theme
+}) => theme.palette["grey-600"]);
+const NoResultIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemsRollstyles__NoResultIconWrapper",
   componentId: "sc-579u47-13"
-})(["width:40px;height:40px;border-radius:50%;margin-bottom:16px;display:flex;align-items:center;justify-content:center;.ds-icon{svg{fill:", ";}}"], function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.palette['grey-600'];
-});
-export var Divider = styled(DividerBase).withConfig({
+})(["width:40px;height:40px;border-radius:50%;margin-bottom:16px;display:flex;align-items:center;justify-content:center;.ds-icon{svg{fill:", ";}}"], ({
+  theme
+}) => theme.palette["grey-600"]);
+const Divider = /* @__PURE__ */ styled(DividerBase).withConfig({
   displayName: "ItemsRollstyles__Divider",
   componentId: "sc-579u47-14"
-})(["&&{margin:", ";}"], function (props) {
-  return props.footer ? '8px 0 12px' : '12px 0 8px';
-});
-export var WarningIcon = styled(Icon).withConfig({
+})(["&&{margin:", ";}"], (props) => props.footer ? "8px 0 12px" : "12px 0 8px");
+const WarningIcon = /* @__PURE__ */ styled(Icon).withConfig({
   displayName: "ItemsRollstyles__WarningIcon",
   componentId: "sc-579u47-15"
-})(["svg{fill:", ";}"], function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.palette['yellow-500'];
-});
+})(["svg{fill:", ";}"], ({
+  theme
+}) => theme.palette["yellow-500"]);
+export {
+  ArrowIcon,
+  Bold,
+  ChangeSelection,
+  ClearButton,
+  ContainerSpaceBetween,
+  Divider,
+  HeaderLeft,
+  HeaderRight,
+  ListWrapper,
+  NoResultIconWrapper,
+  NoResults,
+  SearchWrapper,
+  ShowButton,
+  ShowButtonLabel,
+  ShowButtonsWrapper,
+  WarningIcon
+};

package/dist/ItemsRoll.types.d.ts

@@ -1,8 +1,8 @@
-import type { CSSProperties, ReactNode, SVGProps } from 'react';
-import type { IntlShape } from 'react-intl';
-import type { DropdownProps } from '@synerise/ds-dropdown';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import type { MenuItemProps } from '@synerise/ds-menu';
+import { CSSProperties, ReactNode, SVGProps } from 'react';
+import { IntlShape } from 'react-intl';
+import { DropdownProps } from '@synerise/ds-dropdown';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { MenuItemProps } from '@synerise/ds-menu';
 export type ItemRollElement<BaseType extends ListItemProps | MenuItemProps = ListItemProps> = BaseType & {
     id: string;
     group?: string;

package/dist/ItemsRoll.types.js

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

package/dist/ItemsRollComponents/Footer.d.ts

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