@synerise/ds-manageable-list 0.26.72 → 0.28.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.28.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.27.0...@synerise/ds-manageable-list@0.28.0) (2024-10-01)
+
+
+### Features
+
+* **menu:** maxToShowItems props ([982d12c](https://github.com/Synerise/synerise-design/commit/982d12cf00dfd271bd75e3228e0e231ab26dc7f1))
+
+
+
+
+
+# [0.27.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.26.72...@synerise/ds-manageable-list@0.27.0) (2024-09-26)
+
+
+### Features
+
+* **manageable-list:** customisable toggle button ([7e0a2e5](https://github.com/Synerise/synerise-design/commit/7e0a2e550885ed581b2c4ec90319432c543b24c7))
+
+
+
+
+
 ## [0.26.72](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.26.71...@synerise/ds-manageable-list@0.26.72) (2024-09-26)
 
 **Note:** Version bump only for package @synerise/ds-manageable-list

package/dist/ManageableList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ManageableListProps } from './ManageableList.types';
-declare const ManageableList: (<T extends object>({ className, onItemAdd, onItemSelect, onItemDuplicate, onItemRemove, onItemEdit, onChangeOrder, items, maxToShowItems, loading, type, addButtonDisabled, changeOrderDisabled, greyBackground, placeholder, selectedItemId, searchQuery, expanderDisabled, onExpand, expandedIds, texts, changeOrderByButtons, additionalActions, style, renderCustomToggleButton, }: ManageableListProps<T>) => React.JSX.Element) & {
+declare const ManageableList: (<T extends object>({ className, onItemAdd, onItemSelect, onItemDuplicate, onItemRemove, onItemEdit, onChangeOrder, items, maxToShowItems, visibleItemsLimit, loading, type, addButtonDisabled, changeOrderDisabled, greyBackground, placeholder, selectedItemId, searchQuery, expanderDisabled, onExpand, expandedIds, texts, changeOrderByButtons, additionalActions, style, renderCustomToggleButton, }: ManageableListProps<T>) => React.JSX.Element) & {
     ManageableListContainer: import("styled-components").StyledComponent<"div", any, {
         listType: string;
         greyBackground: boolean;

package/dist/ManageableList.js

@@ -23,6 +23,7 @@ var SORTABLE_CONFIG = {
   group: 'column-manager',
   forceFallback: true
 };
+var INITIALLY_VISIBLE_COUNT = 5;
 
 var ManageableListComponent = function ManageableListComponent(_ref) {
   var className = _ref.className,
@@ -34,7 +35,9 @@ var ManageableListComponent = function ManageableListComponent(_ref) {
       onChangeOrder = _ref.onChangeOrder,
       items = _ref.items,
       _ref$maxToShowItems = _ref.maxToShowItems,
-      maxToShowItems = _ref$maxToShowItems === void 0 ? 5 : _ref$maxToShowItems,
+      maxToShowItems = _ref$maxToShowItems === void 0 ? INITIALLY_VISIBLE_COUNT : _ref$maxToShowItems,
+      _ref$visibleItemsLimi = _ref.visibleItemsLimit,
+      visibleItemsLimit = _ref$visibleItemsLimi === void 0 ? INITIALLY_VISIBLE_COUNT : _ref$visibleItemsLimi,
       loading = _ref.loading,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? ListType.DEFAULT : _ref$type,
@@ -61,6 +64,7 @@ var ManageableListComponent = function ManageableListComponent(_ref) {
       allItemsVisible = _useState[0],
       setAllItemsVisible = _useState[1];
 
+  var visibleLimit = visibleItemsLimit || maxToShowItems;
   var getExpandedIds = useCallback(function () {
     return expandedIds !== undefined ? expandedIds : items.filter(function (item) {
       return item.expanded;
@@ -161,11 +165,11 @@ var ManageableListComponent = function ManageableListComponent(_ref) {
     }, texts);
   }, [texts]);
   var getItemsOverLimit = useMemo(function () {
-    return items.length - maxToShowItems;
-  }, [items, maxToShowItems]);
+    return items.length - visibleLimit;
+  }, [items, visibleLimit]);
   var visibleItems = useMemo(function () {
-    return allItemsVisible ? items : items.slice(0, maxToShowItems);
-  }, [allItemsVisible, maxToShowItems, items]);
+    return allItemsVisible ? items : items.slice(0, visibleLimit);
+  }, [allItemsVisible, visibleLimit, items]);
   var buttonLabel = useMemo(function () {
     return allItemsVisible ? itemTexts.showLessLabel : itemTexts.showMoreLabel;
   }, [allItemsVisible, itemTexts.showLessLabel, itemTexts.showMoreLabel]);
@@ -215,11 +219,11 @@ var ManageableListComponent = function ManageableListComponent(_ref) {
       additionalActions: additionalActions
     });
   }, [items.length, type, onItemSelect, onItemEdit, onItemRemove, onItemDuplicate, onExpand, changeOrderByButtons, onMoveTop, onMoveBottom, onChangeOrder, changeOrderDisabled, greyBackground, selectedItemId, itemTexts, searchQuery, expanderDisabled, allExpandedIds, additionalActions]);
-  var toggleMoreItemsButton = items.length > maxToShowItems ? renderCustomToggleButton && renderCustomToggleButton({
+  var toggleMoreItemsButton = items.length > visibleLimit ? renderCustomToggleButton && renderCustomToggleButton({
     onClick: toggleAllItems,
     allItemsVisible: allItemsVisible,
     total: items.length,
-    limit: maxToShowItems
+    limit: visibleLimit
   }) || /*#__PURE__*/React.createElement(S.ShowMoreButton, {
     onClick: toggleAllItems,
     "data-testid": "show-more-button"

package/dist/ManageableList.types.d.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties, ReactNode, ReactText } from 'react';
+import type { ExactlyOne } from '@synerise/ds-utils';
 import type { ItemProps } from './Item/Item.types';
 export declare enum ExpansionBehaviour {
     DEFAULT = "default",
@@ -18,7 +19,6 @@ export type AdditionalAction = {
 };
 export type ManageableListProps<T extends object> = {
     className?: string;
-    maxToShowItems: number;
     onItemAdd?: (addParams?: {
         name: string;
     }) => void;
@@ -59,7 +59,14 @@ export type ManageableListProps<T extends object> = {
         limit: number;
         allItemsVisible: boolean;
     }) => ReactNode;
-};
+} & ExactlyOne<{
+    /**
+     * @deprecated - use visibleItemsLimit prop instead
+     */
+    maxToShowItems: number;
+}, {
+    visibleItemsLimit: number;
+}>;
 export type Texts = {
     addItemLabel?: ReactNode;
     showMoreLabel?: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-manageable-list",
-  "version": "0.26.72",
+  "version": "0.28.0",
   "description": "ManageableList UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,21 +34,21 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-avatar": "^0.17.13",
-    "@synerise/ds-button": "^0.21.12",
-    "@synerise/ds-dropdown": "^0.18.16",
-    "@synerise/ds-icon": "^0.65.7",
-    "@synerise/ds-inline-edit": "^0.8.12",
-    "@synerise/ds-input": "^0.24.6",
-    "@synerise/ds-list": "^0.6.86",
-    "@synerise/ds-menu": "^0.19.16",
-    "@synerise/ds-modal": "^0.17.43",
-    "@synerise/ds-popconfirm": "^0.10.53",
-    "@synerise/ds-result": "^0.7.6",
-    "@synerise/ds-tags": "^0.10.10",
-    "@synerise/ds-tooltip": "^0.14.42",
-    "@synerise/ds-typography": "^0.15.3",
-    "@synerise/ds-utils": "^0.29.4",
+    "@synerise/ds-avatar": "^0.17.14",
+    "@synerise/ds-button": "^0.21.13",
+    "@synerise/ds-dropdown": "^0.18.17",
+    "@synerise/ds-icon": "^0.65.8",
+    "@synerise/ds-inline-edit": "^0.8.13",
+    "@synerise/ds-input": "^0.24.7",
+    "@synerise/ds-list": "^0.6.87",
+    "@synerise/ds-menu": "^0.20.0",
+    "@synerise/ds-modal": "^0.17.44",
+    "@synerise/ds-popconfirm": "^0.10.54",
+    "@synerise/ds-result": "^0.7.7",
+    "@synerise/ds-tags": "^0.10.11",
+    "@synerise/ds-tooltip": "^0.14.43",
+    "@synerise/ds-typography": "^0.15.4",
+    "@synerise/ds-utils": "^0.30.0",
     "moment": "^2.30.1",
     "react-animate-height": "^2.0.23",
     "react-intl": "3.12.0",
@@ -61,5 +61,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "^5.0.1"
   },
-  "gitHead": "fc06bd0f13401a57329fb92985b735de33108dbc"
+  "gitHead": "2389b995aa44e42ec1dd9a177c7ab1f1a0001a70"
 }