@rescui/dropdown-menu 0.8.5 → 0.9.1

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 (10) hide show
  1. package/lib/dropdown-menu.d.ts +1 -0
  2. package/lib/dropdown-menu.js +27 -10
  3. package/lib/index.css +25 -10
  4. package/lib/index.p.module.css.js +5 -4
  5. package/lib/menu-wrapper.d.ts +6 -0
  6. package/lib/{height-observer.js → menu-wrapper.js} +7 -8
  7. package/lib/public-api.p.css +238 -0
  8. package/lib/public-api.pcss +238 -0
  9. package/package.json +11 -10
  10. package/lib/height-observer.d.ts +0 -6
package/lib/dropdown-menu.d.ts CHANGED
@@ -24,6 +24,7 @@ export interface DropdownMenuProps extends Omit<DropdownProps, 'maxWidth' | 'min
24
24
  * @default "389px"(s); "494px"(m,l)
25
25
  * */
26
26
  maxWidth?: DropdownProps['maxWidth'];
27
+ className?: string;
27
28
  }
28
29
  export declare const DropdownMenu: React.FC<DropdownMenuProps>;
29
30
  export default DropdownMenu;
package/lib/dropdown-menu.js CHANGED
@@ -8,18 +8,19 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
8
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
9
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
10
10
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
11
- var _excluded = ["maxVisibleItems", "size", "children", "iconPlacement", "itemTag", "tag", "theme", "mode", "activateFirstItemOnOpen", "wrapItemsWithLi"],
11
+ var _excluded = ["maxVisibleItems", "size", "children", "iconPlacement", "itemTag", "tag", "theme", "mode", "activateFirstItemOnOpen", "wrapItemsWithLi", "className"],
12
12
  _excluded2 = ["maxHeight", "leastMaxHeight"];
13
13
 
14
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
15
 
16
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
17
 
18
- import React, { useState } from 'react';
19
- import { useTheme, getInverseTheme } from '@rescui/ui-contexts';
18
+ import React, { useRef, useState } from 'react';
19
+ import { useThemeWithUndefined } from '@rescui/ui-contexts';
20
20
  import { Dropdown } from '@rescui/dropdown';
21
21
  import { Menu } from '@rescui/menu';
22
- import { HeightObserver } from './height-observer.js';
22
+ import cn from 'classnames';
23
+ import { MenuWrapper } from './menu-wrapper.js';
23
24
  import styles from './index.p.module.css.js';
24
25
  var ITEM_HEIGHT_BY_SIZE = {
25
26
  s: 32,
@@ -47,15 +48,30 @@ var DropdownMenu = function DropdownMenu(_ref) {
47
48
  _ref$activateFirstIte = _ref.activateFirstItemOnOpen,
48
49
  activateFirstItemOnOpen = _ref$activateFirstIte === void 0 ? false : _ref$activateFirstIte,
49
50
  wrapItemsWithLi = _ref.wrapItemsWithLi,
51
+ className = _ref.className,
50
52
  restProps = _objectWithoutProperties(_ref, _excluded);
51
53
 
52
- var itemHeight = ITEM_HEIGHT_BY_SIZE[size];
54
+ var menuWrapperRef = useRef(null);
53
55
 
54
56
  var _useState = useState(0),
55
57
  _useState2 = _slicedToArray(_useState, 2),
56
58
  height = _useState2[0],
57
- setHeight = _useState2[1]; // a little buffer of 10% here
59
+ setHeight = _useState2[1];
58
60
 
61
+ var itemHeightFromCss = null;
62
+
63
+ if (menuWrapperRef.current) {
64
+ // In theory this part of the code might cause issues with SSR.
65
+ // But in this specific context, because of checking ref "menuWrapperRef",
66
+ // we are sure that the value will still be "null" on the first render.
67
+ // Therefore, the first render on the client will be the same as on the server.
68
+ // Also, there will be no layout shifts on the following renders because
69
+ // it's a dropdown-content and in most cases it opens only on-demand
70
+ var menuWrapperStyles = getComputedStyle(menuWrapperRef.current);
71
+ itemHeightFromCss = parseInt(menuWrapperStyles.getPropertyValue('--_rs-dropdown-menu-item-height'), 10) || null;
72
+ }
73
+
74
+ var itemHeight = itemHeightFromCss || ITEM_HEIGHT_BY_SIZE[size]; // a little buffer of 10% here
59
75
 
60
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
61
77
  // in case there are only 1 more item than maxVisibleItems, show it without truncating
@@ -67,15 +83,16 @@ var DropdownMenu = function DropdownMenu(_ref) {
67
83
  cleanedRestProps = _objectWithoutProperties(restProps, _excluded2); // cast to make runtime omit
68
84
 
69
85
 
70
- var theme = useTheme(themeFromProps);
86
+ var theme = useThemeWithUndefined(themeFromProps);
71
87
  return /*#__PURE__*/React.createElement(Dropdown, _objectSpread(_objectSpread({}, cleanedRestProps), {}, {
72
88
  closeOnTab: true,
73
89
  mode: mode,
74
90
  theme: theme,
75
91
  leastMaxHeight: itemHeight,
76
92
  maxHeight: maxHeight,
77
- className: SIZE_TO_CLASS[size]
78
- }), /*#__PURE__*/React.createElement(HeightObserver, {
93
+ className: cn(SIZE_TO_CLASS[size], styles.dropdownMenu, className)
94
+ }), /*#__PURE__*/React.createElement(MenuWrapper, {
95
+ ref: menuWrapperRef,
79
96
  onHeightUpdate: setHeight
80
97
  }, /*#__PURE__*/React.createElement(Menu, {
81
98
  size: size,
@@ -83,8 +100,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
83
100
  itemTag: itemTag,
84
101
  tag: tag,
85
102
  mode: mode === 'rock' ? 'rock' : 'classic',
86
- theme: mode === 'rock' ? getInverseTheme(theme) : theme,
87
103
  "data-test": "dropdown-menu",
104
+ "data-rs-internal": 'dropdown-menu__menu',
88
105
  className: styles.menu,
89
106
  enableKeyboardNavigation: true,
90
107
  returnFocusOnUnmount: true,
package/lib/index.css CHANGED
@@ -1,16 +1,31 @@
1
- ._sizeS_7vvm0w_8{
2
- min-width:316px;
3
- max-width:389px;
1
+ ._sizeS_2ybbbp_8{
2
+ --_rs-dropdown-menu-min-width:316px;
3
+ --_rs-dropdown-menu-max-width:389px;
4
4
  }
5
-
6
- ._sizeL_7vvm0w_13,
7
- ._sizeM_7vvm0w_14{
8
- min-width:316px;
9
- max-width:494px;
5
+ ._sizeS_2ybbbp_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
6
+ --_rs-dropdown-menu-item-height:32px;
7
+ }
8
+ ._sizeM_2ybbbp_11{
9
+ --_rs-dropdown-menu-min-width:316px;
10
+ --_rs-dropdown-menu-max-width:494px;
10
11
  }
11
-
12
- ._menu_7vvm0w_19{
12
+ ._sizeM_2ybbbp_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
13
+ --_rs-dropdown-menu-item-height:40px;
14
+ }
15
+ ._sizeL_2ybbbp_14{
16
+ --_rs-dropdown-menu-min-width:316px;
17
+ --_rs-dropdown-menu-max-width:494px;
18
+ }
19
+ ._sizeL_2ybbbp_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
20
+ --_rs-dropdown-menu-item-height:52px;
21
+ }
22
+ ._dropdownMenu_2ybbbp_18{
23
+ min-width:var(--_rs-dropdown-menu-min-width);
24
+ max-width:var(--_rs-dropdown-menu-max-width);
25
+ }
26
+ ._menu_2ybbbp_23{
13
27
  margin:0;
14
28
  padding:0;
29
+
15
30
  list-style:none;
16
31
  }
package/lib/index.p.module.css.js CHANGED
@@ -1,7 +1,8 @@
1
1
  var styles = {
2
- "sizeS": "_sizeS_7vvm0w_8",
3
- "sizeL": "_sizeL_7vvm0w_13",
4
- "sizeM": "_sizeM_7vvm0w_14",
5
- "menu": "_menu_7vvm0w_19"
2
+ "sizeS": "_sizeS_2ybbbp_8",
3
+ "sizeM": "_sizeM_2ybbbp_11",
4
+ "sizeL": "_sizeL_2ybbbp_14",
5
+ "dropdownMenu": "_dropdownMenu_2ybbbp_18",
6
+ "menu": "_menu_2ybbbp_23"
6
7
  };
7
8
  export { styles as default };
package/lib/menu-wrapper.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ export declare type MenuWrapperProps = {
3
+ children?: React.ReactNode;
4
+ onHeightUpdate?: (newHeight: number) => void;
5
+ };
6
+ export declare const MenuWrapper: React.ForwardRefExoticComponent<MenuWrapperProps & React.RefAttributes<HTMLDivElement>>;
package/lib/{height-observer.js → menu-wrapper.js} RENAMED
@@ -1,16 +1,15 @@
1
- import React, { useRef } from 'react';
1
+ import React from 'react';
2
2
  import { useResizeObserver } from '@rescui/use-resize-observer';
3
-
4
- var HeightObserver = function HeightObserver(_ref) {
3
+ var MenuWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
5
4
  var children = _ref.children,
6
5
  onHeightUpdate = _ref.onHeightUpdate;
7
- var ref = useRef(null);
8
6
  useResizeObserver(ref, function (entry) {
9
7
  return onHeightUpdate(entry.target.offsetHeight);
10
8
  });
11
9
  return /*#__PURE__*/React.createElement("div", {
12
- ref: ref
10
+ ref: ref,
11
+ "data-rs-internal": 'dropdown-menu__menu-wrapper'
13
12
  }, children);
14
- };
15
-
16
- export { HeightObserver };
13
+ });
14
+ MenuWrapper.displayName = 'MenuWrapper';
15
+ export { MenuWrapper };
package/lib/public-api.p.css ADDED
@@ -0,0 +1,238 @@
1
+ @define-mixin rs-dropdown-menu-size-s{
2
+ &[class]{
3
+ --_rs-dropdown-menu-min-width:316px;
4
+ --_rs-dropdown-menu-max-width:389px;
5
+ }
6
+ &[class] [data-rs-internal='dropdown-menu__menu-wrapper']{
7
+ --_rs-dropdown-menu-item-height:32px;
8
+ }
9
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
10
+ --_rs-menu-mi-icon-offset:8px;
11
+ --_rs-menu-mi-vertical-padding:6px;
12
+ --_rs-menu-mi-horizontal-padding:8px;
13
+ --_rs-typography-letter-spacing:0.0045em;
14
+ --_rs-typography-text-transform:initial;
15
+ --_rs-typography-font-variant-numeric:initial;
16
+ --_rs-typography-font-family:var(
17
+ --rs-font-family-ui,
18
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
19
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
20
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
21
+ );
22
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
23
+ --_rs-typography-font-weight:var(
24
+ --rs-font-weight-regular,
25
+ 400
26
+ );
27
+ --_rs-typography-line-height:var(
28
+ --rs-text-3-line-height,
29
+ 20px
30
+ );
31
+ --_rs-typography-base-color:var(
32
+ --_rs-typography-hardness-color,
33
+ var(
34
+ --rs-color-average,
35
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
36
+ )
37
+ );
38
+ --_rs-typography-text-auto-offset:8px;
39
+ --_rs-typography-ul-list-li-padding-left:28px;
40
+ --_rs-typography-ol-list-li-padding-left:21px;
41
+ --_rs-typography-list-li-margin-top-from-text:8px;
42
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
43
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
44
+ --_rs-typography-link-border-bottom-width-from-text:1px;
45
+ }
46
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__group-header"]{
47
+ --_rs-menu-gh-vertical-padding:6px;
48
+ --_rs-menu-gh-horizontal-padding:8px;
49
+ --_rs-typography-letter-spacing:normal;
50
+ --_rs-typography-text-transform:initial;
51
+ --_rs-typography-font-variant-numeric:initial;
52
+ --_rs-typography-font-family:var(
53
+ --rs-font-family-ui,
54
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
55
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
56
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
57
+ );
58
+ --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
59
+ --_rs-typography-font-weight:var(
60
+ --rs-font-weight-semi-bold,
61
+ 600
62
+ );
63
+ --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
64
+ --_rs-typography-base-color:var(
65
+ --rs-color-hard,
66
+ rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
67
+ );
68
+ --_rs-typography-text-auto-offset:0;
69
+ --_rs-typography-ul-list-li-padding-left:initial;
70
+ --_rs-typography-ol-list-li-padding-left:initial;
71
+ --_rs-typography-list-li-margin-top-from-text:initial;
72
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
73
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
74
+ --_rs-typography-link-border-bottom-width-from-text:2px;
75
+ }
76
+ }
77
+ @define-mixin rs-dropdown-menu-size-m{
78
+ &[class]{
79
+ --_rs-dropdown-menu-min-width:316px;
80
+ --_rs-dropdown-menu-max-width:494px;
81
+ }
82
+ &[class] [data-rs-internal='dropdown-menu__menu-wrapper']{
83
+ --_rs-dropdown-menu-item-height:40px;
84
+ }
85
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
86
+ --_rs-menu-mi-icon-offset:8px;
87
+ --_rs-menu-mi-vertical-padding:8px;
88
+ --_rs-menu-mi-horizontal-padding:16px;
89
+ --_rs-typography-letter-spacing:0.0015em;
90
+ --_rs-typography-text-transform:initial;
91
+ --_rs-typography-font-variant-numeric:initial;
92
+ --_rs-typography-font-family:var(
93
+ --rs-font-family-ui,
94
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
95
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
96
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
97
+ );
98
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
99
+ --_rs-typography-font-weight:var(
100
+ --rs-font-weight-regular,
101
+ 400
102
+ );
103
+ --_rs-typography-line-height:var(
104
+ --rs-text-2-line-height,
105
+ 24px
106
+ );
107
+ --_rs-typography-base-color:var(
108
+ --_rs-typography-hardness-color,
109
+ var(
110
+ --rs-color-average,
111
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
112
+ )
113
+ );
114
+ --_rs-typography-text-auto-offset:16px;
115
+ --_rs-typography-ul-list-li-padding-left:22px;
116
+ --_rs-typography-ol-list-li-padding-left:26px;
117
+ --_rs-typography-list-li-margin-top-from-text:16px;
118
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
119
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
120
+ --_rs-typography-link-border-bottom-width-from-text:1px;
121
+ }
122
+ @media screen and (max-width: 640px){
123
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
124
+ --_rs-typography-list-li-margin-top-from-text:12px;
125
+ }
126
+ }
127
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__group-header"]{
128
+ --_rs-menu-gh-vertical-padding:8px;
129
+ --_rs-menu-gh-horizontal-padding:16px;
130
+ --_rs-typography-letter-spacing:normal;
131
+ --_rs-typography-text-transform:initial;
132
+ --_rs-typography-font-variant-numeric:initial;
133
+ --_rs-typography-font-family:var(
134
+ --rs-font-family-ui,
135
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
136
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
137
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
138
+ );
139
+ --_rs-typography-font-size:var(--rs-h4-font-size, 16px);
140
+ --_rs-typography-font-weight:var(
141
+ --rs-font-weight-semi-bold,
142
+ 600
143
+ );
144
+ --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
145
+ --_rs-typography-base-color:var(
146
+ --rs-color-hard,
147
+ rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
148
+ );
149
+ --_rs-typography-text-auto-offset:0;
150
+ --_rs-typography-ul-list-li-padding-left:initial;
151
+ --_rs-typography-ol-list-li-padding-left:initial;
152
+ --_rs-typography-list-li-margin-top-from-text:initial;
153
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
154
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
155
+ --_rs-typography-link-border-bottom-width-from-text:2px;
156
+ }
157
+ }
158
+ @define-mixin rs-dropdown-menu-size-l{
159
+ &[class]{
160
+ --_rs-dropdown-menu-min-width:316px;
161
+ --_rs-dropdown-menu-max-width:494px;
162
+ }
163
+ &[class] [data-rs-internal='dropdown-menu__menu-wrapper']{
164
+ --_rs-dropdown-menu-item-height:52px;
165
+ }
166
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
167
+ --_rs-menu-mi-icon-offset:16px;
168
+ --_rs-menu-mi-vertical-padding:12px;
169
+ --_rs-menu-mi-horizontal-padding:16px;
170
+ --_rs-typography-letter-spacing:normal;
171
+ --_rs-typography-text-transform:initial;
172
+ --_rs-typography-font-variant-numeric:initial;
173
+ --_rs-typography-font-family:var(
174
+ --rs-font-family-ui,
175
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
176
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
177
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
178
+ );
179
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
180
+ --_rs-typography-font-weight:var(
181
+ --rs-font-weight-regular,
182
+ 400
183
+ );
184
+ --_rs-typography-line-height:var(
185
+ --rs-text-1-line-height,
186
+ 28px
187
+ );
188
+ --_rs-typography-base-color:var(
189
+ --_rs-typography-hardness-color,
190
+ var(
191
+ --rs-color-average,
192
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
193
+ )
194
+ );
195
+ --_rs-typography-text-auto-offset:32px;
196
+ --_rs-typography-ul-list-li-padding-left:26px;
197
+ --_rs-typography-ol-list-li-padding-left:32px;
198
+ --_rs-typography-list-li-margin-top-from-text:24px;
199
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
200
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
201
+ --_rs-typography-link-border-bottom-width-from-text:1px;
202
+ }
203
+ @media screen and (max-width: 640px){
204
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
205
+ --_rs-typography-list-li-margin-top-from-text:16px;
206
+ }
207
+ }
208
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__group-header"]{
209
+ --_rs-menu-gh-vertical-padding:12px;
210
+ --_rs-menu-gh-horizontal-padding:16px;
211
+ --_rs-typography-letter-spacing:normal;
212
+ --_rs-typography-text-transform:initial;
213
+ --_rs-typography-font-variant-numeric:initial;
214
+ --_rs-typography-font-family:var(
215
+ --rs-font-family-ui,
216
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
217
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
218
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
219
+ );
220
+ --_rs-typography-font-size:var(--rs-h3-font-size, 20px);
221
+ --_rs-typography-font-weight:var(
222
+ --rs-font-weight-semi-bold,
223
+ 600
224
+ );
225
+ --_rs-typography-line-height:var(--rs-h3-line-height, 28px);
226
+ --_rs-typography-base-color:var(
227
+ --rs-color-hard,
228
+ rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
229
+ );
230
+ --_rs-typography-text-auto-offset:0;
231
+ --_rs-typography-ul-list-li-padding-left:initial;
232
+ --_rs-typography-ol-list-li-padding-left:initial;
233
+ --_rs-typography-list-li-margin-top-from-text:initial;
234
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
235
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
236
+ --_rs-typography-link-border-bottom-width-from-text:2px;
237
+ }
238
+ }
package/lib/public-api.pcss ADDED
@@ -0,0 +1,238 @@
1
+ @define-mixin rs-dropdown-menu-size-s{
2
+ &[class]{
3
+ --_rs-dropdown-menu-min-width:316px;
4
+ --_rs-dropdown-menu-max-width:389px;
5
+ }
6
+ &[class] [data-rs-internal='dropdown-menu__menu-wrapper']{
7
+ --_rs-dropdown-menu-item-height:32px;
8
+ }
9
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
10
+ --_rs-menu-mi-icon-offset:8px;
11
+ --_rs-menu-mi-vertical-padding:6px;
12
+ --_rs-menu-mi-horizontal-padding:8px;
13
+ --_rs-typography-letter-spacing:0.0045em;
14
+ --_rs-typography-text-transform:initial;
15
+ --_rs-typography-font-variant-numeric:initial;
16
+ --_rs-typography-font-family:var(
17
+ --rs-font-family-ui,
18
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
19
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
20
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
21
+ );
22
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
23
+ --_rs-typography-font-weight:var(
24
+ --rs-font-weight-regular,
25
+ 400
26
+ );
27
+ --_rs-typography-line-height:var(
28
+ --rs-text-3-line-height,
29
+ 20px
30
+ );
31
+ --_rs-typography-base-color:var(
32
+ --_rs-typography-hardness-color,
33
+ var(
34
+ --rs-color-average,
35
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
36
+ )
37
+ );
38
+ --_rs-typography-text-auto-offset:8px;
39
+ --_rs-typography-ul-list-li-padding-left:28px;
40
+ --_rs-typography-ol-list-li-padding-left:21px;
41
+ --_rs-typography-list-li-margin-top-from-text:8px;
42
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
43
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
44
+ --_rs-typography-link-border-bottom-width-from-text:1px;
45
+ }
46
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__group-header"]{
47
+ --_rs-menu-gh-vertical-padding:6px;
48
+ --_rs-menu-gh-horizontal-padding:8px;
49
+ --_rs-typography-letter-spacing:normal;
50
+ --_rs-typography-text-transform:initial;
51
+ --_rs-typography-font-variant-numeric:initial;
52
+ --_rs-typography-font-family:var(
53
+ --rs-font-family-ui,
54
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
55
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
56
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
57
+ );
58
+ --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
59
+ --_rs-typography-font-weight:var(
60
+ --rs-font-weight-semi-bold,
61
+ 600
62
+ );
63
+ --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
64
+ --_rs-typography-base-color:var(
65
+ --rs-color-hard,
66
+ rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
67
+ );
68
+ --_rs-typography-text-auto-offset:0;
69
+ --_rs-typography-ul-list-li-padding-left:initial;
70
+ --_rs-typography-ol-list-li-padding-left:initial;
71
+ --_rs-typography-list-li-margin-top-from-text:initial;
72
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
73
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
74
+ --_rs-typography-link-border-bottom-width-from-text:2px;
75
+ }
76
+ }
77
+ @define-mixin rs-dropdown-menu-size-m{
78
+ &[class]{
79
+ --_rs-dropdown-menu-min-width:316px;
80
+ --_rs-dropdown-menu-max-width:494px;
81
+ }
82
+ &[class] [data-rs-internal='dropdown-menu__menu-wrapper']{
83
+ --_rs-dropdown-menu-item-height:40px;
84
+ }
85
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
86
+ --_rs-menu-mi-icon-offset:8px;
87
+ --_rs-menu-mi-vertical-padding:8px;
88
+ --_rs-menu-mi-horizontal-padding:16px;
89
+ --_rs-typography-letter-spacing:0.0015em;
90
+ --_rs-typography-text-transform:initial;
91
+ --_rs-typography-font-variant-numeric:initial;
92
+ --_rs-typography-font-family:var(
93
+ --rs-font-family-ui,
94
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
95
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
96
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
97
+ );
98
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
99
+ --_rs-typography-font-weight:var(
100
+ --rs-font-weight-regular,
101
+ 400
102
+ );
103
+ --_rs-typography-line-height:var(
104
+ --rs-text-2-line-height,
105
+ 24px
106
+ );
107
+ --_rs-typography-base-color:var(
108
+ --_rs-typography-hardness-color,
109
+ var(
110
+ --rs-color-average,
111
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
112
+ )
113
+ );
114
+ --_rs-typography-text-auto-offset:16px;
115
+ --_rs-typography-ul-list-li-padding-left:22px;
116
+ --_rs-typography-ol-list-li-padding-left:26px;
117
+ --_rs-typography-list-li-margin-top-from-text:16px;
118
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
119
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
120
+ --_rs-typography-link-border-bottom-width-from-text:1px;
121
+ }
122
+ @media screen and (max-width: 640px){
123
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
124
+ --_rs-typography-list-li-margin-top-from-text:12px;
125
+ }
126
+ }
127
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__group-header"]{
128
+ --_rs-menu-gh-vertical-padding:8px;
129
+ --_rs-menu-gh-horizontal-padding:16px;
130
+ --_rs-typography-letter-spacing:normal;
131
+ --_rs-typography-text-transform:initial;
132
+ --_rs-typography-font-variant-numeric:initial;
133
+ --_rs-typography-font-family:var(
134
+ --rs-font-family-ui,
135
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
136
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
137
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
138
+ );
139
+ --_rs-typography-font-size:var(--rs-h4-font-size, 16px);
140
+ --_rs-typography-font-weight:var(
141
+ --rs-font-weight-semi-bold,
142
+ 600
143
+ );
144
+ --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
145
+ --_rs-typography-base-color:var(
146
+ --rs-color-hard,
147
+ rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
148
+ );
149
+ --_rs-typography-text-auto-offset:0;
150
+ --_rs-typography-ul-list-li-padding-left:initial;
151
+ --_rs-typography-ol-list-li-padding-left:initial;
152
+ --_rs-typography-list-li-margin-top-from-text:initial;
153
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
154
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
155
+ --_rs-typography-link-border-bottom-width-from-text:2px;
156
+ }
157
+ }
158
+ @define-mixin rs-dropdown-menu-size-l{
159
+ &[class]{
160
+ --_rs-dropdown-menu-min-width:316px;
161
+ --_rs-dropdown-menu-max-width:494px;
162
+ }
163
+ &[class] [data-rs-internal='dropdown-menu__menu-wrapper']{
164
+ --_rs-dropdown-menu-item-height:52px;
165
+ }
166
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
167
+ --_rs-menu-mi-icon-offset:16px;
168
+ --_rs-menu-mi-vertical-padding:12px;
169
+ --_rs-menu-mi-horizontal-padding:16px;
170
+ --_rs-typography-letter-spacing:normal;
171
+ --_rs-typography-text-transform:initial;
172
+ --_rs-typography-font-variant-numeric:initial;
173
+ --_rs-typography-font-family:var(
174
+ --rs-font-family-ui,
175
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
176
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
177
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
178
+ );
179
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
180
+ --_rs-typography-font-weight:var(
181
+ --rs-font-weight-regular,
182
+ 400
183
+ );
184
+ --_rs-typography-line-height:var(
185
+ --rs-text-1-line-height,
186
+ 28px
187
+ );
188
+ --_rs-typography-base-color:var(
189
+ --_rs-typography-hardness-color,
190
+ var(
191
+ --rs-color-average,
192
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
193
+ )
194
+ );
195
+ --_rs-typography-text-auto-offset:32px;
196
+ --_rs-typography-ul-list-li-padding-left:26px;
197
+ --_rs-typography-ol-list-li-padding-left:32px;
198
+ --_rs-typography-list-li-margin-top-from-text:24px;
199
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
200
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
201
+ --_rs-typography-link-border-bottom-width-from-text:1px;
202
+ }
203
+ @media screen and (max-width: 640px){
204
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__menu-item"]{
205
+ --_rs-typography-list-li-margin-top-from-text:16px;
206
+ }
207
+ }
208
+ & [data-rs-internal="dropdown-menu__menu"] [data-rs-internal="menu__group-header"]{
209
+ --_rs-menu-gh-vertical-padding:12px;
210
+ --_rs-menu-gh-horizontal-padding:16px;
211
+ --_rs-typography-letter-spacing:normal;
212
+ --_rs-typography-text-transform:initial;
213
+ --_rs-typography-font-variant-numeric:initial;
214
+ --_rs-typography-font-family:var(
215
+ --rs-font-family-ui,
216
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
217
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
218
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
219
+ );
220
+ --_rs-typography-font-size:var(--rs-h3-font-size, 20px);
221
+ --_rs-typography-font-weight:var(
222
+ --rs-font-weight-semi-bold,
223
+ 600
224
+ );
225
+ --_rs-typography-line-height:var(--rs-h3-line-height, 28px);
226
+ --_rs-typography-base-color:var(
227
+ --rs-color-hard,
228
+ rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
229
+ );
230
+ --_rs-typography-text-auto-offset:0;
231
+ --_rs-typography-ul-list-li-padding-left:initial;
232
+ --_rs-typography-ol-list-li-padding-left:initial;
233
+ --_rs-typography-list-li-margin-top-from-text:initial;
234
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
235
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
236
+ --_rs-typography-link-border-bottom-width-from-text:2px;
237
+ }
238
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/dropdown-menu",
3
- "version": "0.8.5",
3
+ "version": "0.9.1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -15,25 +15,26 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@babel/runtime-corejs3": "^7.11.0",
18
- "@rescui/dropdown": "^0.6.4",
19
- "@rescui/menu": "^0.9.8",
20
- "@rescui/use-resize-observer": "^0.1.7",
18
+ "@rescui/dropdown": "^0.7.1",
19
+ "@rescui/menu": "^0.10.1",
20
+ "@rescui/use-resize-observer": "^0.2.0",
21
21
  "classnames": "^2.2.6",
22
22
  "core-js": "^3.9.1"
23
23
  },
24
24
  "peerDependencies": {
25
- "@rescui/ui-contexts": "^0.4.0",
25
+ "@rescui/ui-contexts": "^0.5.0",
26
26
  "prop-types": "^15.7.2",
27
27
  "react": ">=16.8.0 <19"
28
28
  },
29
29
  "devDependencies": {
30
- "@rescui/colors": "^0.1.11",
31
- "@rescui/scripts": "^0.2.3",
32
- "@rescui/typography": "^0.15.0",
30
+ "@rescui/colors": "^0.2.0",
31
+ "@rescui/scripts": "^0.3.0",
32
+ "@rescui/typography": "^0.16.1",
33
33
  "@rescui/visual-regression": "^0.1.1"
34
34
  },
35
35
  "scripts": {
36
- "build": "rescui-scripts build"
36
+ "build": "rescui-scripts build && yarn run build-pcss-api",
37
+ "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
37
38
  },
38
- "gitHead": "e21b6f80037993b094ceaff022db6d4cd176a88d"
39
+ "gitHead": "6457f4265a1a30050b9f4cc1f0dd808c005d1ca0"
39
40
  }
package/lib/height-observer.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- export declare type HeightObserverProps = {
3
- children?: React.ReactNode;
4
- onHeightUpdate?: (newHeight: number) => void;
5
- };
6
- export declare const HeightObserver: React.FC<HeightObserverProps>;