@synerise/ds-menu 0.19.15 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.20.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.19.16...@synerise/ds-menu@0.20.0) (2024-10-01)
+
+
+### Features
+
+* **menu:** maxToShowItems props ([982d12c](https://github.com/Synerise/synerise-design/commit/982d12cf00dfd271bd75e3228e0e231ab26dc7f1))
+
+
+
+
+
+## [0.19.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.19.15...@synerise/ds-menu@0.19.16) (2024-09-26)
+
+**Note:** Version bump only for package @synerise/ds-menu
+
+
+
+
+
 ## [0.19.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@0.19.14...@synerise/ds-menu@0.19.15) (2024-09-17)
 
 **Note:** Version bump only for package @synerise/ds-menu

package/README.md

@@ -56,6 +56,8 @@ const items = [
 | asDropdownwMenu | Add additional styles for dropdown menu                                      | boolean         | `false` |
 | dataSource      | Array of items to display in menu                                            | MenuItemProps[] | -       |
 | ordered         | Determines if items should be displayed with index prefix (starting from 01) | boolean         | `false` |
+| maxToShowItems  | limits the number of items rendered. remaining are shown after button click  | number          | -       |
+| texts           | custom translations                                                          | MenuTexts       | -       |
 
 ### MenuItemProps
 
@@ -79,3 +81,10 @@ const items = [
 | subMenu                 | Array of nested items                                          | MenuItemProps[]                                         |           |
 | text                    | Text displayed inside the item                                 | string / React.ReactNode                                | -         |
 | type                    | Type of the item                                               | `default` / `select` / `danger`                         | `default` |
+
+### MenuTexts
+
+| Property | Description         | Type      | Default |
+|----------|---------------------|-----------|---------|
+| showLess | toggle button label | ReactNode | -       |
+| showMore | toggle button label | ReactNode | -       |

package/dist/Menu.d.ts

@@ -1,18 +1,24 @@
-import React from 'react';
+import { Component, ReactNode } from 'react';
 import '@synerise/ds-core/dist/js/style';
 import './style/index.less';
 import * as S from './Menu.styles';
-import { AntdMenuProps } from './Menu.types';
+import type { AntdMenuProps } from './Menu.types';
 import MenuItem from './Elements/Item/MenuItem';
 import Breadcrumb from './Elements/Breadcrumb/Breadcrumb';
 import Header from './Elements/Header/Header';
-declare class Menu extends React.Component<AntdMenuProps> {
+export declare class Menu extends Component<AntdMenuProps, {
+    allItemsVisible: boolean;
+}> {
     static Item: typeof MenuItem;
     static Breadcrumb: typeof Breadcrumb;
     static Header: typeof Header;
     static ItemGroup: typeof S.AntdMenu.ItemGroup;
     static SubMenu: typeof import("antd/lib/menu/SubMenu").default;
     static Divider: import("styled-components").StyledComponent<"div", any, import("./Menu.types").MenuDividerProps, never>;
-    render(): React.ReactNode;
+    state: {
+        allItemsVisible: boolean;
+    };
+    toggleItems(): void;
+    render(): ReactNode;
 }
 export default Menu;

package/dist/Menu.js

@@ -1,48 +1,107 @@
-var _excluded = ["dataSource", "ordered", "selectable", "children", "showTextTooltip"];
+var _excluded = ["dataSource", "ordered", "selectable", "children", "showTextTooltip", "texts", "maxToShowItems"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React from 'react';
-import '@synerise/ds-core/dist/js/style';
+import React, { Children, Component } from 'react';
+import Button from '@synerise/ds-button';
+import Icon, { ArrowDownCircleM, ArrowUpCircleM } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
+import '@synerise/ds-core/dist/js/style';
 import "./style/index.css";
+import { FormattedMessage } from 'react-intl';
 import * as S from './Menu.styles';
 import SubMenuItem from './Elements/SubMenu/SubMenu';
 import MenuItem from './Elements/Item/MenuItem';
 import Breadcrumb from './Elements/Breadcrumb/Breadcrumb';
 import Header from './Elements/Header/Header';
-
-var Menu = /*#__PURE__*/function (_React$Component) {
+export var Menu = /*#__PURE__*/function (_Component) {
   function Menu() {
-    return _React$Component.apply(this, arguments) || this;
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+
+    _defineProperty(_this, "state", {
+      allItemsVisible: false
+    });
+
+    return _this;
   }
 
-  _inheritsLoose(Menu, _React$Component);
+  _inheritsLoose(Menu, _Component);
 
   var _proto = Menu.prototype;
 
+  _proto.toggleItems = function toggleItems() {
+    var allItemsVisible = this.state.allItemsVisible;
+    this.setState({
+      allItemsVisible: !allItemsVisible
+    });
+  };
+
   _proto.render = function render() {
+    var _this2 = this;
+
     var _this$props = this.props,
         dataSource = _this$props.dataSource,
         ordered = _this$props.ordered,
         selectable = _this$props.selectable,
         children = _this$props.children,
         showTextTooltip = _this$props.showTextTooltip,
+        texts = _this$props.texts,
+        maxToShowItems = _this$props.maxToShowItems,
         rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    return /*#__PURE__*/React.createElement(S.AntdMenu, _extends({
+    var allItemsVisible = this.state.allItemsVisible;
+
+    var allTexts = _objectSpread({
+      showLess: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.MENU.SHOW-LESS",
+        defaultMessage: "Show less"
+      }),
+      showMore: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "DS.MENU.SHOW-MORE",
+        defaultMessage: "Show more"
+      })
+    }, texts);
+
+    var isListTogglable = maxToShowItems !== undefined;
+    var isDataSource = dataSource !== undefined;
+    var childrenArray = Children.toArray(children);
+    var itemsCount = (isDataSource ? dataSource.length : childrenArray.length) || 0;
+    var itemsOverLimit = isListTogglable ? itemsCount - maxToShowItems : 0;
+    var visibleItems = allItemsVisible || !isListTogglable ? dataSource : dataSource == null ? void 0 : dataSource.slice(0, maxToShowItems);
+    var visibleChildren = allItemsVisible || !isListTogglable ? children : childrenArray.slice(0, maxToShowItems);
+    var toggleButtonLabel = allItemsVisible ? allTexts.showLess : allTexts.showMore;
+    var toggleButton = isListTogglable && itemsOverLimit > 0 && /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return _this2.toggleItems();
+      },
+      type: "ghost-primary",
+      mode: "icon-label"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      component: allItemsVisible ? /*#__PURE__*/React.createElement(ArrowUpCircleM, null) : /*#__PURE__*/React.createElement(ArrowDownCircleM, null)
+    }), toggleButtonLabel);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.AntdMenu, _extends({
       ordered: ordered,
       mode: "inline",
       inlineIndent: ordered ? 20 : 18
     }, rest, {
       selectable: selectable === undefined ? false : selectable
-    }), children || (dataSource == null ? void 0 : dataSource.map(function (item, index) {
+    }), isDataSource ? visibleItems == null ? void 0 : visibleItems.map(function (item, index) {
       return item.subMenu ? /*#__PURE__*/React.createElement(SubMenuItem, _extends({
         parent: item.parent,
         prefixel: item.prefixel,
@@ -86,11 +145,11 @@ var Menu = /*#__PURE__*/function (_React$Component) {
         ,
         menuItemKey: item.key || "" + item.text + index
       }, rest, item));
-    })));
+    }) : visibleChildren), toggleButton);
   };
 
   return Menu;
-}(React.Component);
+}(Component);
 
 _defineProperty(Menu, "Item", MenuItem);
 

package/dist/Menu.styles.d.ts

@@ -1,8 +1,16 @@
 import { ReactNode } from 'react';
 import { Menu } from 'antd';
-import { AntdMenuProps, MenuDividerProps } from './Menu.types';
+import { MenuDividerProps } from './Menu.types';
 export declare const MenuDivider: import("styled-components").StyledComponent<"div", any, MenuDividerProps, never>;
-export declare const AntdMenu: import("styled-components").StyledComponent<typeof Menu, any, AntdMenuProps, never>;
+export declare const AntdMenu: import("styled-components").StyledComponent<typeof Menu, any, Omit<import("antd/lib/menu").MenuProps, "dataSource" | "footer"> & {
+    dataSource?: import(".").MenuItemProps[] | undefined;
+    ordered?: boolean | undefined;
+    asDropdownMenu?: boolean | undefined;
+    showTextTooltip?: boolean | undefined;
+    asInfoCardContainer?: boolean | undefined;
+    maxToShowItems?: number | undefined;
+    texts?: Partial<import("./Menu.types").MenuTexts> | undefined;
+}, never>;
 export declare const SubMenuItem: import("styled-components").StyledComponent<typeof import("antd/lib/menu/SubMenu").default, any, {
     ordered?: boolean | undefined;
     disabled?: boolean | undefined;

package/dist/Menu.types.d.ts

@@ -1,12 +1,19 @@
+import { ReactNode } from 'react';
 import { MenuProps } from 'antd/lib/menu';
 import { MenuItemProps } from './Elements/Item/MenuItem.types';
-export interface AntdMenuProps extends Omit<MenuProps, 'dataSource' | 'footer'> {
+export type MenuTexts = {
+    showLess: ReactNode;
+    showMore: ReactNode;
+};
+export type AntdMenuProps = Omit<MenuProps, 'dataSource' | 'footer'> & {
     dataSource?: MenuItemProps[];
     ordered?: boolean;
     asDropdownMenu?: boolean;
     showTextTooltip?: boolean;
     asInfoCardContainer?: boolean;
-}
+    maxToShowItems?: number;
+    texts?: Partial<MenuTexts>;
+};
 export type MenuDividerProps = {
     higher?: boolean;
     level?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-menu",
-  "version": "0.19.15",
+  "version": "0.20.0",
   "description": "Menu UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -25,7 +25,8 @@
     "prepublish": "npm run build",
     "test": "jest",
     "test:watch": "npm run test -- --watchAll",
-    "types": "tsc --noEmit"
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
   "sideEffects": [
     "dist/style/*",
@@ -33,9 +34,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.65.6",
-    "@synerise/ds-tooltip": "^0.14.41",
-    "@synerise/ds-utils": "^0.29.3",
+    "@synerise/ds-button": "^0.21.13",
+    "@synerise/ds-icon": "^0.65.8",
+    "@synerise/ds-tooltip": "^0.14.43",
+    "@synerise/ds-utils": "^0.30.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
     "rc-menu": "8.10.7",
@@ -48,5 +50,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "^5.0.1"
   },
-  "gitHead": "ae3c38b44ca0f9071cd55f7b82c182a99b5710e8"
+  "gitHead": "2389b995aa44e42ec1dd9a177c7ab1f1a0001a70"
 }