@rescui/dropdown-menu 0.7.0 → 0.8.1

package/lib/dropdown-menu.js

@@ -6,6 +6,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["maxVisibleItems", "size", "children", "iconPlacement", "itemTag", "tag", "theme", "mode", "activateFirstItemOnOpen", "wrapItemsWithLi"],
     _excluded2 = ["maxHeight", "leastMaxHeight"];
@@ -14,10 +15,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useTheme, getInverseTheme } from '@rescui/ui-contexts';
 import { Dropdown } from '@rescui/dropdown';
 import { Menu } from '@rescui/menu';
+import { HeightObserver } from './height-observer.js';
 import styles from './index.p.module.css.js';
 var ITEM_HEIGHT_BY_SIZE = {
   s: 32,
@@ -47,9 +49,18 @@ var DropdownMenu = function DropdownMenu(_ref) {
       wrapItemsWithLi = _ref.wrapItemsWithLi,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var itemHeight = ITEM_HEIGHT_BY_SIZE[size]; // half of item added to show that there is more items even if scroll bar hidden
+  var itemHeight = ITEM_HEIGHT_BY_SIZE[size];
 
-  var maxHeight = (Math.ceil(maxVisibleItems) + 0.5) * itemHeight;
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1]; // a little buffer of 10% here
+
+
+  var isMoreThanPlusOne = height > (Math.ceil(maxVisibleItems) + 1.1) * itemHeight; // half of item added to show that there is more items even if scroll bar hidden
+  // in case there are only 1 more item than maxVisibleItems, show it without truncating
+
+  var maxHeight = (Math.ceil(maxVisibleItems) + (isMoreThanPlusOne ? 0.5 : 1.5)) * itemHeight;
 
   var cleanMaxHeight = restProps.maxHeight,
       leastMaxHeight = restProps.leastMaxHeight,
@@ -64,7 +75,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
     leastMaxHeight: itemHeight,
     maxHeight: maxHeight,
     className: SIZE_TO_CLASS[size]
-  }), /*#__PURE__*/React.createElement(Menu, {
+  }), /*#__PURE__*/React.createElement(HeightObserver, {
+    onHeightUpdate: setHeight
+  }, /*#__PURE__*/React.createElement(Menu, {
     size: size,
     iconPlacement: iconPlacement,
     itemTag: itemTag,
@@ -77,7 +90,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     returnFocusOnUnmount: true,
     activateFirstItem: activateFirstItemOnOpen,
     wrapItemsWithLi: wrapItemsWithLi
-  }, children));
+  }, children)));
 };
 
 export { DropdownMenu, DropdownMenu as default };

package/lib/height-observer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type HeightObserverProps = {
+    children?: React.ReactNode;
+    onHeightUpdate?: (newHeight: number) => void;
+};
+export declare const HeightObserver: React.FC<HeightObserverProps>;

package/lib/height-observer.js

@@ -0,0 +1,16 @@
+import React, { useRef } from 'react';
+import { useResizeObserver } from '@rescui/use-resize-observer';
+
+var HeightObserver = function HeightObserver(_ref) {
+  var children = _ref.children,
+      onHeightUpdate = _ref.onHeightUpdate;
+  var ref = useRef(null);
+  useResizeObserver(ref, function (entry) {
+    return onHeightUpdate(entry.target.offsetHeight);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, children);
+};
+
+export { HeightObserver };

package/lib/index.css

@@ -1,15 +1,15 @@
-._sizeS_1b6ux3g_8{
+._sizeS_1cepn01_8{
   min-width:316px;
   max-width:389px;
 }
 
-._sizeL_1b6ux3g_13,
-._sizeM_1b6ux3g_14{
+._sizeL_1cepn01_13,
+._sizeM_1cepn01_14{
   min-width:316px;
   max-width:494px;
 }
 
-._menu_1b6ux3g_19{
+._menu_1cepn01_19{
   margin:0;
   padding:0;
   list-style:none;

package/lib/index.p.module.css.js

@@ -1,7 +1,7 @@
 var styles = {
-  "sizeS": "_sizeS_1b6ux3g_8",
-  "sizeL": "_sizeL_1b6ux3g_13",
-  "sizeM": "_sizeM_1b6ux3g_14",
-  "menu": "_menu_1b6ux3g_19"
+  "sizeS": "_sizeS_1cepn01_8",
+  "sizeL": "_sizeL_1cepn01_13",
+  "sizeM": "_sizeM_1cepn01_14",
+  "menu": "_menu_1cepn01_19"
 };
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/dropdown-menu",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -15,8 +15,9 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.11.0",
-    "@rescui/dropdown": "^0.6.0",
-    "@rescui/menu": "^0.9.4",
+    "@rescui/dropdown": "^0.6.1",
+    "@rescui/menu": "^0.9.5",
+    "@rescui/use-resize-observer": "^0.1.6",
     "classnames": "^2.2.6",
     "core-js": "^3.9.1"
   },
@@ -28,11 +29,11 @@
   "devDependencies": {
     "@rescui/colors": "^0.1.9",
     "@rescui/scripts": "^0.2.2",
-    "@rescui/typography": "^0.11.0",
+    "@rescui/typography": "^0.12.0",
     "@rescui/visual-regression": "^0.1.0"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "2a57f292fde136628c5ed31a9da9149fd41d404f"
+  "gitHead": "5b8028f2a39036c58de3bfcba424df687b540f55"
 }