@synerise/ds-list-item 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.5.1...@synerise/ds-list-item@1.6.0) (2026-07-09)
+
+### Features
+
+- **list-item:** add maxToShowItems show-more/less toggle to ListWrapper ([2477e7f](https://github.com/Synerise/synerise-design/commit/2477e7f781e4f421a602f1e9e960b10b39240a93))
+
+## [1.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.5.0...@synerise/ds-list-item@1.5.1) (2026-06-17)
+
+**Note:** Version bump only for package @synerise/ds-list-item
+
 # [1.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.4.22...@synerise/ds-list-item@1.5.0) (2026-06-11)
 
 ### Features

package/dist/components/ListWrapper/ListWrapper.d.ts

@@ -1,7 +1,13 @@
 import { default as React, ReactNode } from 'react';
 import { WithHTMLAttributes } from '@synerise/ds-utils';
 import { ListContextProps } from '../ListContext/ListContext';
+export type ListWrapperTexts = {
+    showMore: ReactNode;
+    showLess: ReactNode;
+};
 export type ListWrapperProps = WithHTMLAttributes<HTMLDivElement, ListContextProps & {
     children?: ReactNode;
+    maxToShowItems?: number;
+    texts?: Partial<ListWrapperTexts>;
 }>;
-export declare const ListWrapper: ({ children, onClick, ...htmlAttributes }: ListWrapperProps) => React.JSX.Element;
+export declare const ListWrapper: ({ children, onClick, maxToShowItems, texts, ...htmlAttributes }: ListWrapperProps) => React.JSX.Element;

package/dist/components/ListWrapper/ListWrapper.js

@@ -1,12 +1,42 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, Children } from "react";
+import { useIntl } from "react-intl";
+import Button from "@synerise/ds-button";
+import Icon, { ArrowUpCircleM, ArrowDownCircleM } from "@synerise/ds-icon";
 import { ListContextProvider } from "../ListContext/ListContextProvider.js";
-import { ListWrapperContainer } from "./ListWrapper.styles.js";
+import { ListWrapperContainer, ToggleButtonWrapper } from "./ListWrapper.styles.js";
 const ListWrapper = ({
   children,
   onClick,
+  maxToShowItems,
+  texts,
   ...htmlAttributes
 }) => {
-  return /* @__PURE__ */ jsx(ListWrapperContainer, { ...htmlAttributes, children: /* @__PURE__ */ jsx(ListContextProvider, { onClick, children }) });
+  const intl = useIntl();
+  const [allVisible, setAllVisible] = useState(false);
+  const resolvedTexts = {
+    showMore: intl.formatMessage({
+      id: "DS.LIST-ITEM.SHOW-MORE",
+      defaultMessage: "Show more"
+    }),
+    showLess: intl.formatMessage({
+      id: "DS.LIST-ITEM.SHOW-LESS",
+      defaultMessage: "Show less"
+    }),
+    ...texts
+  };
+  const isTogglable = maxToShowItems !== void 0;
+  const childrenArray = Children.toArray(children);
+  const hasItemsOverLimit = isTogglable && childrenArray.length > maxToShowItems;
+  const visibleChildren = !isTogglable ? children : allVisible ? childrenArray : childrenArray.slice(0, maxToShowItems);
+  const toggleButton = hasItemsOverLimit && /* @__PURE__ */ jsx(ToggleButtonWrapper, { children: /* @__PURE__ */ jsxs(Button, { onClick: () => setAllVisible((v) => !v), type: "ghost-primary", mode: "icon-label", "aria-expanded": allVisible, children: [
+    /* @__PURE__ */ jsx(Icon, { component: allVisible ? /* @__PURE__ */ jsx(ArrowUpCircleM, {}) : /* @__PURE__ */ jsx(ArrowDownCircleM, {}) }),
+    allVisible ? resolvedTexts.showLess : resolvedTexts.showMore
+  ] }) });
+  return /* @__PURE__ */ jsxs(ListWrapperContainer, { ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx(ListContextProvider, { onClick, children: visibleChildren }),
+    toggleButton
+  ] });
 };
 export {
   ListWrapper

package/dist/components/ListWrapper/ListWrapper.styles.d.ts

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

package/dist/components/ListWrapper/ListWrapper.styles.js

@@ -3,6 +3,11 @@ const ListWrapperContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ListWrapperstyles__ListWrapperContainer",
   componentId: "sc-1f54kju-0"
 })(["padding:8px;background:", ";border-radius:3px;"], (props) => props.theme.palette.white);
+const ToggleButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ListWrapperstyles__ToggleButtonWrapper",
+  componentId: "sc-1f54kju-1"
+})(["padding:4px 8px;"]);
 export {
-  ListWrapperContainer
+  ListWrapperContainer,
+  ToggleButtonWrapper
 };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { default } from './ListItem';
 export { HoverTooltip, GroupItem } from './components';
 export { HoverableSuffix } from './components/HoverableSuffix/HoverableSuffix';
 export { type HoverableSuffixProps } from './components/HoverableSuffix/HoverableSuffix.types';
-export { ListWrapper, type ListWrapperProps, } from './components/ListWrapper/ListWrapper';
+export { ListWrapper, type ListWrapperProps, type ListWrapperTexts, } from './components/ListWrapper/ListWrapper';
 export { useListContext } from './components/ListContext/ListContext';
 export { ListContextProvider } from './components/ListContext/ListContextProvider';
 export { itemSizes, itemTypes, type ListItemProps, type BasicItemProps, type ItemSize, type ItemType, type ItemData, type StyledListItem, type ListItemEventHandler, } from './ListItem.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-list-item",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "ListItem UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,11 +42,12 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@synerise/ds-divider": "^1.3.14",
-    "@synerise/ds-icon": "^1.18.3",
+    "@synerise/ds-button": "^1.5.33",
+    "@synerise/ds-divider": "^1.3.15",
+    "@synerise/ds-icon": "^1.18.4",
     "@synerise/ds-popover": "^1.6.1",
-    "@synerise/ds-tooltip": "^1.5.2",
-    "@synerise/ds-utils": "^1.10.0",
+    "@synerise/ds-tooltip": "^1.5.3",
+    "@synerise/ds-utils": "^1.10.1",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
@@ -59,5 +60,5 @@
     "@testing-library/react": "^14.0.0",
     "vitest": "^4.0.0"
   },
-  "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
+  "gitHead": "70c23de84f26001a3555ac65f44e12eec30aaf8c"
 }