@synerise/ds-items-roll 1.5.11 → 1.5.12

package/dist/ItemsRollComponents/Footer.js

@@ -1,100 +1,68 @@
-import React, { useMemo } from 'react';
-import Icon, { ArrowDownCircleM, ArrowUpCircleM, CloseS, WarningFillM } from '@synerise/ds-icon';
-import Popconfirm from '@synerise/ds-popconfirm';
-import * as S from '../ItemsRoll.styles';
-var ShowLessButton = function ShowLessButton(_ref) {
-  var showDefaultItemsAmount = _ref.showDefaultItemsAmount,
-    showLessLabel = _ref.showLessLabel;
-  return /*#__PURE__*/React.createElement(S.ShowButton, {
-    type: "ghost",
-    mode: "icon-label",
-    onClick: showDefaultItemsAmount
-  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-    component: /*#__PURE__*/React.createElement(ArrowUpCircleM, null),
-    size: 20
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "bold-label"
-  }, showLessLabel));
-};
-var ShowMoreButton = function ShowMoreButton(_ref2) {
-  var showLabel = _ref2.showLabel,
-    moreLabel = _ref2.moreLabel,
-    showAdditionalItems = _ref2.showAdditionalItems,
-    getShowMoreNumber = _ref2.getShowMoreNumber;
-  return /*#__PURE__*/React.createElement(S.ShowButton, {
-    type: "ghost",
-    mode: "icon-label",
-    onClick: showAdditionalItems
-  }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-    component: /*#__PURE__*/React.createElement(ArrowDownCircleM, null),
-    size: 20
-  }), /*#__PURE__*/React.createElement(S.ShowButtonLabel, null, showLabel, " ", /*#__PURE__*/React.createElement("span", {
-    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 = useMemo(function () {
-    return visibleItemsCount + showMoreStep < itemsCount ? showMoreStep : itemsCount - visibleItemsCount;
-  }, [itemsCount, showMoreStep, visibleItemsCount]);
-  var showDivider = useMemo(function () {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Icon, { CloseS, WarningFillM, ArrowUpCircleM, ArrowDownCircleM } from "@synerise/ds-icon";
+import Popconfirm from "@synerise/ds-popconfirm";
+import { ShowButtonsWrapper, Divider, ContainerSpaceBetween, ClearButton, WarningIcon, ShowButton, ArrowIcon, ShowButtonLabel } from "../ItemsRoll.styles.js";
+const ShowLessButton = ({
+  showDefaultItemsAmount,
+  showLessLabel
+}) => /* @__PURE__ */ jsxs(ShowButton, { type: "ghost", mode: "icon-label", onClick: showDefaultItemsAmount, children: [
+  /* @__PURE__ */ jsx(ArrowIcon, { component: /* @__PURE__ */ jsx(ArrowUpCircleM, {}), size: 20 }),
+  /* @__PURE__ */ jsx("span", { className: "bold-label", children: showLessLabel })
+] });
+const ShowMoreButton = ({
+  showLabel,
+  moreLabel,
+  showAdditionalItems,
+  getShowMoreNumber
+}) => /* @__PURE__ */ jsxs(ShowButton, { type: "ghost", mode: "icon-label", onClick: showAdditionalItems, children: [
+  /* @__PURE__ */ jsx(ArrowIcon, { component: /* @__PURE__ */ jsx(ArrowDownCircleM, {}), size: 20 }),
+  /* @__PURE__ */ jsxs(ShowButtonLabel, { children: [
+    showLabel,
+    ` `,
+    /* @__PURE__ */ jsx("span", { className: "bold-label", children: getShowMoreNumber }),
+    ` `,
+    moreLabel
+  ] })
+] });
+const Footer = ({
+  allTexts,
+  itemsCount,
+  maxToShowItems = 10,
+  onClearAll,
+  showAdditionalItems,
+  showDefaultItemsAmount,
+  showMoreStep = 10,
+  visibleItemsCount,
+  searchMode
+}) => {
+  const getShowMoreNumber = useMemo(() => visibleItemsCount + showMoreStep < itemsCount ? showMoreStep : itemsCount - visibleItemsCount, [itemsCount, showMoreStep, visibleItemsCount]);
+  const showDivider = useMemo(() => {
     return !searchMode || searchMode && itemsCount > maxToShowItems;
   }, [searchMode, maxToShowItems, itemsCount]);
-  var buttonsConfiguration = useMemo(function () {
+  const buttonsConfiguration = useMemo(() => {
     if (visibleItemsCount === itemsCount) {
-      return /*#__PURE__*/React.createElement(ShowLessButton, {
-        showLessLabel: allTexts.showLessLabel,
-        showDefaultItemsAmount: showDefaultItemsAmount
-      });
+      return /* @__PURE__ */ jsx(ShowLessButton, { showLessLabel: allTexts.showLessLabel, showDefaultItemsAmount });
     }
     if (visibleItemsCount === maxToShowItems) {
-      return /*#__PURE__*/React.createElement(ShowMoreButton, {
-        getShowMoreNumber: getShowMoreNumber,
-        moreLabel: allTexts.moreLabel,
-        showLabel: allTexts.showLabel,
-        showAdditionalItems: showAdditionalItems
-      });
+      return /* @__PURE__ */ jsx(ShowMoreButton, { getShowMoreNumber, moreLabel: allTexts.moreLabel, showLabel: allTexts.showLabel, showAdditionalItems });
     }
-    return /*#__PURE__*/React.createElement(S.ShowButtonsWrapper, null, /*#__PURE__*/React.createElement(ShowMoreButton, {
-      getShowMoreNumber: getShowMoreNumber,
-      moreLabel: allTexts.moreLabel,
-      showLabel: allTexts.showLabel,
-      showAdditionalItems: showAdditionalItems
-    }), /*#__PURE__*/React.createElement(ShowLessButton, {
-      showLessLabel: allTexts.showLessLabel,
-      showDefaultItemsAmount: showDefaultItemsAmount
-    }));
+    return /* @__PURE__ */ jsxs(ShowButtonsWrapper, { children: [
+      /* @__PURE__ */ jsx(ShowMoreButton, { getShowMoreNumber, moreLabel: allTexts.moreLabel, showLabel: allTexts.showLabel, showAdditionalItems }),
+      /* @__PURE__ */ jsx(ShowLessButton, { showLessLabel: allTexts.showLessLabel, showDefaultItemsAmount })
+    ] });
   }, [itemsCount, maxToShowItems, visibleItemsCount, getShowMoreNumber, showDefaultItemsAmount, showAdditionalItems, allTexts]);
-  return visibleItemsCount !== 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, showDivider && /*#__PURE__*/React.createElement(S.Divider, {
-    dashed: true,
-    footer: true
-  }), /*#__PURE__*/React.createElement(S.ContainerSpaceBetween, {
-    "data-testid": "items-roll-footer"
-  }, itemsCount > maxToShowItems && buttonsConfiguration, onClearAll && !searchMode && /*#__PURE__*/React.createElement(Popconfirm, {
-    onConfirm: onClearAll,
-    icon: /*#__PURE__*/React.createElement(S.WarningIcon, {
-      component: /*#__PURE__*/React.createElement(WarningFillM, null)
-    }),
-    cancelText: allTexts.popconfirmNoLabel,
-    okText: allTexts.popconfirmYesLabel,
-    title: allTexts.popconfirmTitleLabel
-  }, /*#__PURE__*/React.createElement(S.ClearButton, {
-    type: "custom-color-ghost",
-    color: "red",
-    mode: "icon-label"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CloseS, null),
-    size: 22
-  }), allTexts.clearAllLabel)))) : null;
+  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: [
+        /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseS, {}), size: 22 }),
+        allTexts.clearAllLabel
+      ] }) })
+    ] })
+  ] }) : null;
+};
+export {
+  Footer as default
 };
-export default Footer;

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

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import type { ItemsRollProps, Texts } from '../ItemsRoll.types';
+import { ReactNode } from 'react';
+import { ItemsRollProps, Texts } from '../ItemsRoll.types';
 export type FooterProps = Pick<ItemsRollProps, 'onClearAll' | 'maxToShowItems' | 'showMoreStep'> & {
     allTexts: {
         [k in Texts]: ReactNode;

package/dist/ItemsRollComponents/Footer.types.js

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

package/dist/ItemsRollComponents/Header.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type HeaderProps } from './Header.types';
+import { default as React } from 'react';
+import { HeaderProps } from './Header.types';
 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,48 +1,42 @@
-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, { 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 { 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 = useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.ChangeSelection, {
-      type: "ghost",
-      mode: "icon-label",
-      onClick: onChangeSelection
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(ChangeSelectionIcon, null),
-      size: 24
-    }), allTexts.changeSelectionLabel);
-  }, [ChangeSelectionIcon, onChangeSelection, allTexts.changeSelectionLabel]);
-  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, _extends({}, changeSelectionDropdownProps, {
-    popoverProps: _extends({
-      testId: 'items-roll-change-selection'
-    }, changeSelectionDropdownProps == null ? void 0 : changeSelectionDropdownProps.popoverProps)
-  }), ChangeSelectionButton) : ChangeSelectionButton), !hideSearch && /*#__PURE__*/React.createElement(S.SearchWrapper, null, /*#__PURE__*/React.createElement(SearchInput, {
-    clearTooltip: allTexts.searchClearTooltipLabel,
-    onClear: onSearchClear || NOOP,
-    onChange: onSearch || NOOP,
-    placeholder: searchPlaceholder,
-    value: searchValue || '',
-    closeOnClickOutside: true
-  })), customSidebarActions, actions && /*#__PURE__*/React.createElement(Extras, {
-    actions: actions
-  })));
+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 { NOOP } from "@synerise/ds-utils";
+import Extras from "../Extras/Extras.js";
+import { ChangeSelection, ContainerSpaceBetween, HeaderLeft, HeaderRight, SearchWrapper } from "../ItemsRoll.styles.js";
+const Header = ({
+  actions,
+  allTexts,
+  changeSelectionIcon: ChangeSelectionIcon = EditM,
+  changeSelectionDropdownProps,
+  customSidebarActions,
+  hideSearch,
+  itemsCount,
+  onChangeSelection,
+  onSearch,
+  searchValue,
+  onSearchClear,
+  searchPlaceholder
+}) => {
+  const ChangeSelectionButton = useMemo(() => /* @__PURE__ */ jsxs(ChangeSelection, { type: "ghost", mode: "icon-label", onClick: onChangeSelection, children: [
+    /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ChangeSelectionIcon, {}), size: 24 }),
+    allTexts.changeSelectionLabel
+  ] }), [ChangeSelectionIcon, onChangeSelection, allTexts.changeSelectionLabel]);
+  return /* @__PURE__ */ jsxs(ContainerSpaceBetween, { children: [
+    /* @__PURE__ */ jsx(HeaderLeft, { children: itemsCount }),
+    /* @__PURE__ */ jsxs(HeaderRight, { children: [
+      onChangeSelection && (changeSelectionDropdownProps ? /* @__PURE__ */ jsx(Dropdown, { ...changeSelectionDropdownProps, popoverProps: {
+        testId: "items-roll-change-selection",
+        ...changeSelectionDropdownProps?.popoverProps
+      }, children: ChangeSelectionButton }) : ChangeSelectionButton),
+      !hideSearch && /* @__PURE__ */ jsx(SearchWrapper, { children: /* @__PURE__ */ jsx(SearchInput, { clearTooltip: allTexts.searchClearTooltipLabel, onClear: onSearchClear || NOOP, onChange: onSearch || NOOP, placeholder: searchPlaceholder, value: searchValue || "", closeOnClickOutside: true }) }),
+      customSidebarActions,
+      actions && /* @__PURE__ */ jsx(Extras, { actions })
+    ] })
+  ] });
+};
+export {
+  Header as default
 };
-export default Header;

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

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
-import { type ListItemProps } from '@synerise/ds-list-item';
-import { type MenuItemProps } from '@synerise/ds-menu';
-import type { ItemsRollProps, Texts } from '../ItemsRoll.types';
+import { ReactNode } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { MenuItemProps } from '@synerise/ds-menu';
+import { ItemsRollProps, Texts } from '../ItemsRoll.types';
 export type HeaderProps<ActionItemType extends ListItemProps | MenuItemProps = ListItemProps> = Pick<ItemsRollProps<ActionItemType>, 'actions' | 'changeSelectionIcon' | 'changeSelectionDropdownProps' | 'onChangeSelection' | 'onSearch' | 'onSearchClear' | 'searchValue' | 'searchPlaceholder' | 'hideSearch' | 'customSidebarActions'> & {
     allTexts: {
         [k in Texts]: ReactNode;

package/dist/ItemsRollComponents/Header.types.js

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

package/dist/ItemsRollComponents/ItemRemoveIcon.d.ts

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

package/dist/ItemsRollComponents/ItemRemoveIcon.js

@@ -1,25 +1,17 @@
-import React from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon, { CloseS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { RemoveIconWrapper } from './ItemRemoveIcon.styles';
-export var RemoveIcon = function RemoveIcon(_ref) {
-  var id = _ref.id,
-    handleRemove = _ref.handleRemove,
-    tooltipLabel = _ref.tooltipLabel,
-    group = _ref.group;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltipLabel
-  }, /*#__PURE__*/React.createElement(RemoveIconWrapper, {
-    "data-testid": "items-roll-remove-icon"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: "element-remove-icon",
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      handleRemove(id, group);
-    },
-    component: /*#__PURE__*/React.createElement(CloseS, null),
-    color: theme.palette['red-600'],
-    size: 24
-  })));
-};
+import { jsx } from "react/jsx-runtime";
+import { theme } from "@synerise/ds-core";
+import Icon, { CloseS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { RemoveIconWrapper } from "./ItemRemoveIcon.styles.js";
+const RemoveIcon = ({
+  id,
+  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) => {
+  event.stopPropagation();
+  handleRemove(id, group);
+}, component: /* @__PURE__ */ jsx(CloseS, {}), color: theme.palette["red-600"], size: 24 }) }) });
+export {
+  RemoveIcon
+};

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

@@ -1 +1 @@
-export declare const RemoveIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RemoveIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/ItemsRollComponents/ItemRemoveIcon.styles.js

@@ -1,5 +1,8 @@
-import styled from 'styled-components';
-export var RemoveIconWrapper = styled.div.withConfig({
+import styled from "styled-components";
+const RemoveIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemRemoveIconstyles__RemoveIconWrapper",
   componentId: "sc-1uw1dzt-0"
-})(["opacity:0;transition:opacity 0.1s ease-in;"]);
+})(["opacity:0;transition:opacity 0.1s ease-in;"]);
+export {
+  RemoveIconWrapper
+};

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

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import type { ItemsRollGroup } from '../ItemsRoll.types';
+import { ReactNode } from 'react';
+import { ItemsRollGroup } from '../ItemsRoll.types';
 export type RemoveIconProps = {
     id: string;
     group?: ItemsRollGroup;

package/dist/ItemsRollComponents/ItemRemoveIcon.types.js

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

package/dist/ItemsRollComponents/List.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { type ItemRollElement } from '../ItemsRoll.types';
-import { type ListProps } from './List.types';
+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

@@ -1,56 +1,35 @@
-import React, { useMemo } from 'react';
-import Icon, { InformationNoSearchResultL } from '@synerise/ds-icon';
-import { GroupItem, ListContextProvider } from '@synerise/ds-list-item';
-import * as S from '../ItemsRoll.styles';
-import ItemElement from './ListItem';
-export var itemsInGroup = function itemsInGroup(group, items) {
-  return items.filter(function (item) {
-    return item.group === group;
-  });
-};
-var List = function List(_ref) {
-  var groups = _ref.groups,
-    onItemClick = _ref.onItemClick,
-    onItemRemove = _ref.onItemRemove,
-    noResultsLabel = _ref.noResultsLabel,
-    removeTooltipLabel = _ref.removeTooltipLabel,
-    searchValue = _ref.searchValue,
-    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);
-      return groupItems.length > 0 ? /*#__PURE__*/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;
-    }));
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Icon, { InformationNoSearchResultL } from "@synerise/ds-icon";
+import { GroupItem, ListContextProvider } from "@synerise/ds-list-item";
+import { NoResults, NoResultIconWrapper, ListWrapper } from "../ItemsRoll.styles.js";
+import ItemElement from "./ListItem.js";
+const itemsInGroup = (group, items) => items.filter((item) => item.group === group);
+const List = ({
+  groups,
+  onItemClick,
+  onItemRemove,
+  noResultsLabel,
+  removeTooltipLabel,
+  searchValue,
+  visibleItems
+}) => {
+  const groupedList = useMemo(() => {
+    return /* @__PURE__ */ jsx(Fragment, { children: groups?.map((group) => {
+      const groupItems = itemsInGroup(group, visibleItems);
+      return groupItems.length > 0 ? /* @__PURE__ */ jsx(GroupItem, { title: group, children: groupItems.map((item) => /* @__PURE__ */ jsx(ItemElement, { group, highlight: searchValue, onItemClick, onItemRemove, item, removeTooltipLabel }, item.id)) }, group) : 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
-      });
-    }));
+  const standardList = useMemo(() => {
+    return /* @__PURE__ */ jsx(Fragment, { children: visibleItems.map((item) => /* @__PURE__ */ jsx(ItemElement, { highlight: searchValue, item, onItemClick, onItemRemove, removeTooltipLabel }, item.id)) });
   }, [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(InformationNoSearchResultL, null),
-    size: 48
-  })), noResultsLabel) : /*#__PURE__*/React.createElement(ListContextProvider, null, /*#__PURE__*/React.createElement(S.ListWrapper, null, finalItems));
+  const finalItems = groups ? groupedList : standardList;
+  return visibleItems.length === 0 ? /* @__PURE__ */ jsxs(NoResults, { children: [
+    /* @__PURE__ */ jsx(NoResultIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(InformationNoSearchResultL, {}), size: 48 }) }),
+    noResultsLabel
+  ] }) : /* @__PURE__ */ jsx(ListContextProvider, { children: /* @__PURE__ */ jsx(ListWrapper, { children: finalItems }) });
+};
+export {
+  List as default,
+  itemsInGroup
 };
-export default List;

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

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

package/dist/ItemsRollComponents/List.types.js

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

package/dist/ItemsRollComponents/ListItem.d.ts

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

package/dist/ItemsRollComponents/ListItem.js

@@ -1,32 +1,22 @@
-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 } 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 = 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,
-    suffixel: function suffixel(hovered) {
-      return /*#__PURE__*/React.createElement(S.SuffixelWrapper, null, renderSuffixElement(hovered) || null, onItemRemove && /*#__PURE__*/React.createElement(RemoveIcon, {
-        id: item.id,
-        handleRemove: onItemRemove,
-        tooltipLabel: removeTooltipLabel,
-        group: group
-      }));
-    },
-    onClick: onClick
-  }), item.text);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { RemoveIcon } from "./ItemRemoveIcon.js";
+import { ListItem, SuffixelWrapper } from "./ListItem.styles.js";
+const ItemElement = ({
+  item,
+  group,
+  highlight,
+  onItemClick,
+  onItemRemove,
+  removeTooltipLabel
+}) => {
+  const onClick = useCallback(() => onItemClick && onItemClick(item.id, group), [onItemClick, item.id, group]);
+  const renderSuffixElement = (hovered) => item.suffixel instanceof Function ? item.suffixel(hovered) : item.suffixel;
+  return /* @__PURE__ */ jsx(ListItem, { ...item, className: "items-roll-list-item", highlight, suffixel: (hovered) => /* @__PURE__ */ jsxs(SuffixelWrapper, { children: [
+    renderSuffixElement(hovered) || null,
+    onItemRemove && /* @__PURE__ */ jsx(RemoveIcon, { id: item.id, handleRemove: onItemRemove, tooltipLabel: removeTooltipLabel, group })
+  ] }), onClick, children: item.text });
+};
+export {
+  ItemElement as default
 };
-export default ItemElement;

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

@@ -1,3 +1,3 @@
-import { type StyledListItem } from '@synerise/ds-list-item';
+import { StyledListItem } from '@synerise/ds-list-item';
 export declare const ListItem: StyledListItem;
-export declare const SuffixelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SuffixelWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/ItemsRollComponents/ListItem.styles.js

@@ -1,11 +1,15 @@
-import styled from 'styled-components';
-import DSListItem from '@synerise/ds-list-item';
-import { RemoveIconWrapper } from './ItemRemoveIcon.styles';
-export var ListItem = styled(DSListItem).withConfig({
+import styled from "styled-components";
+import DSListItem from "@synerise/ds-list-item";
+import { RemoveIconWrapper } from "./ItemRemoveIcon.styles.js";
+const ListItem = /* @__PURE__ */ styled(DSListItem).withConfig({
   displayName: "ListItemstyles__ListItem",
   componentId: "sc-x6qavm-0"
 })(["&{", "{opacity:0;display:none;}}&:hover{", "{opacity:1;display:flex;}}"], RemoveIconWrapper, RemoveIconWrapper);
-export var SuffixelWrapper = styled.div.withConfig({
+const SuffixelWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ListItemstyles__SuffixelWrapper",
   componentId: "sc-x6qavm-1"
-})(["display:flex;align-items:center;"]);
+})(["display:flex;align-items:center;"]);
+export {
+  ListItem,
+  SuffixelWrapper
+};

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

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import type { ItemRollElement, ItemsRollGroup } from '../ItemsRoll.types';
+import { ReactNode } from 'react';
+import { ItemRollElement, ItemsRollGroup } from '../ItemsRoll.types';
 export type ItemElementProps = {
     highlight?: string;
     item: ItemRollElement;

package/dist/ItemsRollComponents/ListItem.types.js

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

package/dist/ItemsRollComponents/index.js

@@ -1,3 +1,8 @@
-export { default as Footer } from './Footer';
-export { default as Header } from './Header';
-export { default as List } from './List';
+import { default as default2 } from "./Footer.js";
+import { default as default3 } from "./Header.js";
+import { default as default4 } from "./List.js";
+export {
+  default2 as Footer,
+  default3 as Header,
+  default4 as List
+};