@rescui/dropdown-menu 0.9.11 → 0.9.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/dropdown-menu.js +32 -57
  2. package/lib/index.css +8 -8
  3. package/lib/index.p.module.css.js +5 -5
  4. package/lib/menu-wrapper.js +6 -6
  5. package/package.json +11 -12
package/lib/dropdown-menu.js CHANGED
@@ -1,20 +1,3 @@
1
- import "core-js/modules/es.object.to-string.js";
2
- import "core-js/modules/web.dom-collections.for-each.js";
3
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
4
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
5
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
6
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
7
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
8
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
- import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
10
- import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
11
- var _excluded = ["maxVisibleItems", "size", "children", "iconPlacement", "itemTag", "tag", "theme", "mode", "activateFirstItemOnOpen", "wrapItemsWithLi", "className"],
12
- _excluded2 = ["maxHeight", "leastMaxHeight"];
13
-
14
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
-
16
- 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; }
17
-
18
1
  import React, { useRef, useState } from 'react';
19
2
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
20
3
  import { Dropdown } from '@rescui/dropdown';
@@ -22,43 +5,35 @@ import { Menu } from '@rescui/menu';
22
5
  import cn from 'classnames';
23
6
  import { MenuWrapper } from './menu-wrapper.js';
24
7
  import styles from './index.p.module.css.js';
25
- var ITEM_HEIGHT_BY_SIZE = {
8
+ const ITEM_HEIGHT_BY_SIZE = {
26
9
  s: 32,
27
10
  m: 40,
28
11
  l: 52
29
12
  };
30
- var SIZE_TO_CLASS = {
13
+ const SIZE_TO_CLASS = {
31
14
  s: styles.sizeS,
32
15
  m: styles.sizeM,
33
16
  l: styles.sizeL
34
17
  };
35
18
 
36
- var DropdownMenu = function DropdownMenu(_ref) {
37
- var _ref$maxVisibleItems = _ref.maxVisibleItems,
38
- maxVisibleItems = _ref$maxVisibleItems === void 0 ? 5 : _ref$maxVisibleItems,
39
- _ref$size = _ref.size,
40
- size = _ref$size === void 0 ? 'm' : _ref$size,
41
- children = _ref.children,
42
- iconPlacement = _ref.iconPlacement,
43
- itemTag = _ref.itemTag,
44
- tag = _ref.tag,
45
- themeFromProps = _ref.theme,
46
- _ref$mode = _ref.mode,
47
- mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
48
- _ref$activateFirstIte = _ref.activateFirstItemOnOpen,
49
- activateFirstItemOnOpen = _ref$activateFirstIte === void 0 ? false : _ref$activateFirstIte,
50
- wrapItemsWithLi = _ref.wrapItemsWithLi,
51
- className = _ref.className,
52
- restProps = _objectWithoutProperties(_ref, _excluded);
53
-
54
- var menuWrapperRef = useRef(null);
55
-
56
- var _useState = useState(0),
57
- _useState2 = _slicedToArray(_useState, 2),
58
- height = _useState2[0],
59
- setHeight = _useState2[1];
60
-
61
- var itemHeightFromCss = null;
19
+ const DropdownMenu = _ref => {
20
+ let {
21
+ maxVisibleItems = 5,
22
+ size = 'm',
23
+ children,
24
+ iconPlacement,
25
+ itemTag,
26
+ tag,
27
+ theme: themeFromProps,
28
+ mode = 'classic',
29
+ activateFirstItemOnOpen = false,
30
+ wrapItemsWithLi,
31
+ className,
32
+ ...restProps
33
+ } = _ref;
34
+ const menuWrapperRef = useRef(null);
35
+ const [height, setHeight] = useState(0);
36
+ let itemHeightFromCss = null;
62
37
 
63
38
  if (menuWrapperRef.current) {
64
39
  // In theory this part of the code might cause issues with SSR.
@@ -67,31 +42,31 @@ var DropdownMenu = function DropdownMenu(_ref) {
67
42
  // Therefore, the first render on the client will be the same as on the server.
68
43
  // Also, there will be no layout shifts on the following renders because
69
44
  // it's a dropdown-content and in most cases it opens only on-demand
70
- var menuWrapperStyles = getComputedStyle(menuWrapperRef.current);
45
+ const menuWrapperStyles = getComputedStyle(menuWrapperRef.current);
71
46
  itemHeightFromCss = parseInt(menuWrapperStyles.getPropertyValue('--_rs-dropdown-menu-item-height'), 10) || null;
72
47
  }
73
48
 
74
- var itemHeight = itemHeightFromCss || ITEM_HEIGHT_BY_SIZE[size]; // a little buffer of 10% here
49
+ const itemHeight = itemHeightFromCss || ITEM_HEIGHT_BY_SIZE[size]; // a little buffer of 10% here
75
50
 
76
- 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
51
+ const isMoreThanPlusOne = height > (Math.ceil(maxVisibleItems) + 1.1) * itemHeight; // half of item added to show that there is more items even if scroll bar hidden
77
52
  // in case there are only 1 more item than maxVisibleItems, show it without truncating
78
53
 
79
- var maxHeight = (Math.ceil(maxVisibleItems) + (isMoreThanPlusOne ? 0.5 : 1.5)) * itemHeight;
80
-
81
- var cleanMaxHeight = restProps.maxHeight,
82
- leastMaxHeight = restProps.leastMaxHeight,
83
- cleanedRestProps = _objectWithoutProperties(restProps, _excluded2); // cast to make runtime omit
84
-
54
+ const maxHeight = (Math.ceil(maxVisibleItems) + (isMoreThanPlusOne ? 0.5 : 1.5)) * itemHeight;
55
+ const {
56
+ maxHeight: cleanMaxHeight,
57
+ leastMaxHeight,
58
+ ...cleanedRestProps
59
+ } = restProps; // cast to make runtime omit
85
60
 
86
- var theme = useThemeWithUndefined(themeFromProps);
87
- return /*#__PURE__*/React.createElement(Dropdown, _objectSpread(_objectSpread({}, cleanedRestProps), {}, {
61
+ const theme = useThemeWithUndefined(themeFromProps);
62
+ return /*#__PURE__*/React.createElement(Dropdown, { ...cleanedRestProps,
88
63
  closeOnTab: true,
89
64
  mode: mode,
90
65
  theme: theme,
91
66
  leastMaxHeight: itemHeight,
92
67
  maxHeight: maxHeight,
93
68
  className: cn(SIZE_TO_CLASS[size], styles.dropdownMenu, className)
94
- }), /*#__PURE__*/React.createElement(MenuWrapper, {
69
+ }, /*#__PURE__*/React.createElement(MenuWrapper, {
95
70
  ref: menuWrapperRef,
96
71
  onHeightUpdate: setHeight
97
72
  }, /*#__PURE__*/React.createElement(Menu, {
package/lib/index.css CHANGED
@@ -1,29 +1,29 @@
1
- ._sizeS_1mrot4z_8{
1
+ ._sizeS_18bx5j_8{
2
2
  --_rs-dropdown-menu-min-width:316px;
3
3
  --_rs-dropdown-menu-max-width:389px;
4
4
  }
5
- ._sizeS_1mrot4z_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
5
+ ._sizeS_18bx5j_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
6
6
  --_rs-dropdown-menu-item-height:32px;
7
7
  }
8
- ._sizeM_1mrot4z_11{
8
+ ._sizeM_18bx5j_11{
9
9
  --_rs-dropdown-menu-min-width:316px;
10
10
  --_rs-dropdown-menu-max-width:494px;
11
11
  }
12
- ._sizeM_1mrot4z_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
12
+ ._sizeM_18bx5j_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
13
13
  --_rs-dropdown-menu-item-height:40px;
14
14
  }
15
- ._sizeL_1mrot4z_14{
15
+ ._sizeL_18bx5j_14{
16
16
  --_rs-dropdown-menu-min-width:316px;
17
17
  --_rs-dropdown-menu-max-width:494px;
18
18
  }
19
- ._sizeL_1mrot4z_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
19
+ ._sizeL_18bx5j_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
20
20
  --_rs-dropdown-menu-item-height:52px;
21
21
  }
22
- ._dropdownMenu_1mrot4z_18{
22
+ ._dropdownMenu_18bx5j_18{
23
23
  min-width:var(--_rs-dropdown-menu-min-width);
24
24
  max-width:var(--_rs-dropdown-menu-max-width);
25
25
  }
26
- ._menu_1mrot4z_23{
26
+ ._menu_18bx5j_23{
27
27
  margin:0;
28
28
  padding:0;
29
29
 
package/lib/index.p.module.css.js CHANGED
@@ -1,8 +1,8 @@
1
1
  var styles = {
2
- "sizeS": "_sizeS_1mrot4z_8",
3
- "sizeM": "_sizeM_1mrot4z_11",
4
- "sizeL": "_sizeL_1mrot4z_14",
5
- "dropdownMenu": "_dropdownMenu_1mrot4z_18",
6
- "menu": "_menu_1mrot4z_23"
2
+ "sizeS": "_sizeS_18bx5j_8",
3
+ "sizeM": "_sizeM_18bx5j_11",
4
+ "sizeL": "_sizeL_18bx5j_14",
5
+ "dropdownMenu": "_dropdownMenu_18bx5j_18",
6
+ "menu": "_menu_18bx5j_23"
7
7
  };
8
8
  export { styles as default };
package/lib/menu-wrapper.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
  import { useResizeObserver } from '@rescui/use-resize-observer';
3
- var MenuWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
4
- var children = _ref.children,
5
- onHeightUpdate = _ref.onHeightUpdate;
6
- useResizeObserver(ref, function (entry) {
7
- return onHeightUpdate(entry.target.offsetHeight);
8
- });
3
+ const MenuWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
4
+ let {
5
+ children,
6
+ onHeightUpdate
7
+ } = _ref;
8
+ useResizeObserver(ref, entry => onHeightUpdate(entry.target.offsetHeight));
9
9
  return /*#__PURE__*/React.createElement("div", {
10
10
  ref: ref,
11
11
  "data-rs-internal": 'dropdown-menu__menu-wrapper'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/dropdown-menu",
3
- "version": "0.9.11",
3
+ "version": "0.9.13",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -14,12 +14,11 @@
14
14
  "access": "public"
15
15
  },
16
16
  "dependencies": {
17
- "@babel/runtime-corejs3": "^7.11.0",
18
- "@rescui/dropdown": "^0.7.11",
19
- "@rescui/menu": "^0.10.9",
20
- "@rescui/use-resize-observer": "^0.2.4",
21
- "classnames": "^2.2.6",
22
- "core-js": "^3.9.1"
17
+ "@babel/runtime-corejs3": "^7.26.0",
18
+ "@rescui/dropdown": "^0.7.13",
19
+ "@rescui/menu": "^0.10.11",
20
+ "@rescui/use-resize-observer": "^0.2.5",
21
+ "classnames": "^2.2.6"
23
22
  },
24
23
  "peerDependencies": {
25
24
  "@rescui/ui-contexts": "^0.5.0",
@@ -27,10 +26,10 @@
27
26
  "react": ">=16.8.0 <19"
28
27
  },
29
28
  "devDependencies": {
30
- "@rescui/colors": "^0.2.5",
31
- "@rescui/icons": "^0.16.11",
32
- "@rescui/scripts": "^0.3.4",
33
- "@rescui/typography": "^0.19.0",
29
+ "@rescui/colors": "^0.2.6",
30
+ "@rescui/icons": "^0.16.13",
31
+ "@rescui/scripts": "^0.3.5",
32
+ "@rescui/typography": "^0.20.0",
34
33
  "@rescui/visual-regression": "^0.1.2"
35
34
  },
36
35
  "scripts": {
@@ -38,5 +37,5 @@
38
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
39
38
  },
40
39
  "nx": {},
41
- "gitHead": "3ef429c66a082b71861a814ba508693c68a94842"
40
+ "gitHead": "5531e3d285d6e38bf5536ff0690a252f1308c49b"
42
41
  }