@rescui/menu 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.14.0

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.
@@ -0,0 +1,106 @@
1
+ import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
2
+ import React from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import cn from 'classnames';
5
+ import styles from './index.css.js';
6
+ const sizeStyles = {
7
+ "xs": styles.sizeXS,
8
+ "s": styles.sizeS,
9
+ "m": styles.sizeM,
10
+ "l": styles.sizeL
11
+ };
12
+ const Size = {
13
+ "xs": "xs",
14
+ "s": "s",
15
+ "m": "m",
16
+ "l": "l"
17
+ };
18
+ const CheckOutlineIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
19
+ viewBox: "0 0 16 16"
20
+ }, props, {
21
+ ref: ref
22
+ }), /*#__PURE__*/React.createElement("path", {
23
+ d: "M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0"
24
+ })));
25
+ CheckOutlineIcon16.displayName = 'CheckOutlineIcon16';
26
+ const CheckOutlineIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
27
+ viewBox: "0 0 20 20"
28
+ }, props, {
29
+ ref: ref
30
+ }), /*#__PURE__*/React.createElement("path", {
31
+ d: "M16.53 5.47a.75.75 0 0 1 0 1.06l-8 8a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 1 1 1.06-1.06L8 12.94l7.47-7.47a.75.75 0 0 1 1.06 0"
32
+ })));
33
+ CheckOutlineIcon20.displayName = 'CheckOutlineIcon20';
34
+ const CheckOutlineIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
35
+ viewBox: "0 0 24 24"
36
+ }, props, {
37
+ ref: ref
38
+ }), /*#__PURE__*/React.createElement("path", {
39
+ d: "M19.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586l9.293-9.293a1 1 0 0 1 1.414 0"
40
+ })));
41
+ CheckOutlineIcon24.displayName = 'CheckOutlineIcon24';
42
+ const CheckOutlineIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
43
+ viewBox: "0 0 28 28"
44
+ }, props, {
45
+ ref: ref
46
+ }), /*#__PURE__*/React.createElement("path", {
47
+ d: "M22.676 7.263a1 1 0 0 1 .061 1.413l-11 12a1 1 0 0 1-1.444.031l-6-6a1 1 0 1 1 1.414-1.414l5.262 5.261 10.294-11.23a1 1 0 0 1 1.413-.061"
48
+ })));
49
+ CheckOutlineIcon28.displayName = 'CheckOutlineIcon28';
50
+ const CheckOutlineIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
51
+ let {
52
+ theme,
53
+ size: sizeFromProps = "m",
54
+ className,
55
+ style,
56
+ ['data-render-all-sizes']: renderAllSizes = false,
57
+ ...props
58
+ } = _ref;
59
+ const size = sizeFromProps in Size ? sizeFromProps : "m";
60
+ const mainProps = { ...props,
61
+ className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
62
+ style: renderAllSizes ? {
63
+ '--rs-icon-ar-width': 28,
64
+ '--rs-icon-ar-height': 28,
65
+ ...style
66
+ } : style,
67
+ ref
68
+ };
69
+
70
+ if (renderAllSizes) {
71
+ return /*#__PURE__*/React.createElement("svg", _extends({
72
+ viewBox: "0 0 28 28"
73
+ }, mainProps), /*#__PURE__*/React.createElement(CheckOutlineIcon16, {
74
+ className: styles.variant16
75
+ }), /*#__PURE__*/React.createElement(CheckOutlineIcon20, {
76
+ className: styles.variant20
77
+ }), /*#__PURE__*/React.createElement(CheckOutlineIcon24, {
78
+ className: styles.variant24
79
+ }), /*#__PURE__*/React.createElement(CheckOutlineIcon28, {
80
+ className: styles.variant28
81
+ }));
82
+ }
83
+
84
+ if (size === Size['xs']) {
85
+ return /*#__PURE__*/React.createElement(CheckOutlineIcon16, mainProps);
86
+ }
87
+
88
+ if (size === Size['s']) {
89
+ return /*#__PURE__*/React.createElement(CheckOutlineIcon20, mainProps);
90
+ }
91
+
92
+ if (size === Size['m']) {
93
+ return /*#__PURE__*/React.createElement(CheckOutlineIcon24, mainProps);
94
+ }
95
+
96
+ return /*#__PURE__*/React.createElement(CheckOutlineIcon28, mainProps);
97
+ });
98
+ CheckOutlineIcon.displayName = 'CheckOutlineIcon';
99
+ CheckOutlineIcon.propTypes = {
100
+ className: PropTypes.string,
101
+ theme: PropTypes.oneOf(["light", "dark"]),
102
+ size: PropTypes.oneOf(["xs", "s", "m", "l"]),
103
+ 'data-render-all-sizes': PropTypes.bool,
104
+ style: PropTypes.object
105
+ };
106
+ export { Size, CheckOutlineIcon as default };
@@ -0,0 +1,15 @@
1
+ var styles = {
2
+ "icon": "_icon_3sp1p2_4",
3
+ "sizeXS": "_sizeXS_3sp1p2_14",
4
+ "sizeS": "_sizeS_3sp1p2_18",
5
+ "sizeM": "_sizeM_3sp1p2_22",
6
+ "sizeL": "_sizeL_3sp1p2_26",
7
+ "light": "_light_3sp1p2_30",
8
+ "dark": "_dark_3sp1p2_34",
9
+ "allVariants": "_allVariants_3sp1p2_48",
10
+ "variant16": "_variant16_3sp1p2_53",
11
+ "variant20": "_variant20_3sp1p2_54",
12
+ "variant24": "_variant24_3sp1p2_55",
13
+ "variant28": "_variant28_3sp1p2_58"
14
+ };
15
+ export { styles as default };
package/lib/index.css CHANGED
@@ -1,10 +1,111 @@
1
- ._themeLight_1be69r7_8{
1
+ ._icon_3sp1p2_4{
2
+ --_rs-theme-dark:var(
3
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
+ var(--rs-theme-dark, 0)
5
+ );
6
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
7
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
8
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
+ }
10
+ @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
+ ._icon_3sp1p2_4{
12
+ --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
13
+ --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
14
+ --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
15
+ --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
16
+ --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
17
+ }
18
+ }
19
+ @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
+ ._icon_3sp1p2_4{
21
+ --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
22
+ --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
23
+ --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
24
+ --_rs-color-primary-t-dim:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, 0.8);
25
+ --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
26
+ }
27
+ }
28
+ ._icon_3sp1p2_4{
29
+
30
+ fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
+
32
+ width:var(--rs-icons-width, auto);
33
+ height:var(--rs-icons-height, var(--_rs-icons-height));
34
+ }
35
+ ._sizeXS_3sp1p2_14{
36
+ --_rs-icons-height:16px;
37
+ }
38
+ ._sizeS_3sp1p2_18{
39
+ --_rs-icons-height:20px;
40
+ }
41
+ ._sizeM_3sp1p2_22{
42
+ --_rs-icons-height:24px;
43
+ }
44
+ ._sizeL_3sp1p2_26{
45
+ --_rs-icons-height:28px;
46
+ }
47
+ ._light_3sp1p2_30{
2
48
  --rs-theme-dark:0;
49
+ --_rs-icons-themed-fill-or-initial: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));
3
50
  }
4
- ._themeDark_1be69r7_11{
51
+ ._dark_3sp1p2_34{
5
52
  --rs-theme-dark:1;
53
+ --_rs-icons-themed-fill-or-initial: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));
54
+ }
55
+ @keyframes rs-icon-rotate{
56
+ from{
57
+ transform:rotate(0deg);
58
+ }
59
+ to{
60
+ transform:rotate(360deg);
61
+ }
62
+ }
63
+ ._allVariants_3sp1p2_48{
64
+ aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
+ container:rs-icon / size;
66
+ }
67
+ ._variant16_3sp1p2_53,
68
+ ._variant20_3sp1p2_54,
69
+ ._variant24_3sp1p2_55{
70
+ display:none;
6
71
  }
7
- ._sizeS_1be69r7_15{
72
+ ._variant28_3sp1p2_58{
73
+ display:block;
74
+ }
75
+ @container rs-icon (max-height: 24px){
76
+ ._variant24_3sp1p2_55{
77
+ display:block;
78
+ }
79
+ ._variant28_3sp1p2_58{
80
+ display:none;
81
+ }
82
+ }
83
+ @container rs-icon (max-height: 20px){
84
+ ._variant20_3sp1p2_54{
85
+ display:block;
86
+ }
87
+ ._variant24_3sp1p2_55{
88
+ display:none;
89
+ }
90
+ }
91
+ @container rs-icon (max-height: 16px){
92
+ ._variant16_3sp1p2_53{
93
+ display:block;
94
+ }
95
+ ._variant20_3sp1p2_54{
96
+ display:none;
97
+ }
98
+ }
99
+ ._themeLight_1t76rai_8{
100
+ --rs-theme-dark:0;
101
+ }
102
+ ._themeDark_1t76rai_11{
103
+ --rs-theme-dark:1;
104
+ }
105
+ ._menu_1t76rai_15:focus{
106
+ outline:none;
107
+ }
108
+ ._sizeS_1t76rai_21{
8
109
  --_rs-menu-mi-icon-offset:8px;
9
110
  --_rs-menu-mi-icon-size:20px;
10
111
  --_rs-menu-mi-vertical-padding:6px;
@@ -43,7 +144,7 @@
43
144
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
44
145
  --_rs-typography-link-border-bottom-width-from-text:1px;
45
146
  }
46
- ._sizeM_1be69r7_18{
147
+ ._sizeM_1t76rai_24{
47
148
  --_rs-menu-mi-icon-offset:8px;
48
149
  --_rs-menu-mi-icon-size:24px;
49
150
  --_rs-menu-mi-vertical-padding:8px;
@@ -86,11 +187,11 @@
86
187
  --_rs-typography-link-border-bottom-width-from-text:1px;
87
188
  }
88
189
  @media screen and (max-width: 640px){
89
- ._sizeM_1be69r7_18{
190
+ ._sizeM_1t76rai_24{
90
191
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
91
192
  }
92
193
  }
93
- ._sizeL_1be69r7_21{
194
+ ._sizeL_1t76rai_27{
94
195
  --_rs-menu-mi-icon-offset:16px;
95
196
  --_rs-menu-mi-icon-size:28px;
96
197
  --_rs-menu-mi-vertical-padding:12px;
@@ -133,60 +234,69 @@
133
234
  --_rs-typography-link-border-bottom-width-from-text:1px;
134
235
  }
135
236
  @media screen and (max-width: 640px){
136
- ._sizeL_1be69r7_21{
237
+ ._sizeL_1t76rai_27{
137
238
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
138
239
  }
139
240
  }
140
- ._modeClassic_1be69r7_25{
241
+ ._modeClassic_1t76rai_31{
141
242
  --_rs-menu-mi-horizontal-padding-with-mode:var(
142
243
  --_rs-menu-mi-horizontal-padding
143
244
  );
144
- --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
145
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
146
- --_rs-menu-mi-selected-background: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));
147
- --_rs-menu-mi-hover-color: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
- --_rs-menu-mi-hover-background: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.1);
149
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
150
- --_rs-menu-mi-selected-hover-background:rgb(
151
- calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
152
- );
153
245
  }
154
- ._modeRock_1be69r7_28{
246
+ ._modeClassic_1t76rai_31 [data-rs-internal="menu__menu-item__inner"]{
247
+ --_rs-menu-mi-color: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);
248
+ --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
249
+ --_rs-menu-mi-selected-color: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));
250
+ --_rs-menu-mi-selected-background: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.1);
251
+ --_rs-menu-mi-hover-color:rgb(
252
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
253
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
254
+ calc(255 - var(--rs-menu-contrast-primary, 0)*227)
255
+ );
256
+ --_rs-menu-mi-hover-background:var(--_rs-color-primary);
257
+ }
258
+ ._modeRock_1t76rai_34{
155
259
  --_rs-menu-mi-horizontal-padding-with-mode:var(
156
260
  --_rs-menu-mi-horizontal-padding
157
261
  );
158
- --_rs-menu-mi-active-background:none;
159
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
160
- --_rs-menu-mi-selected-background: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));
161
- --_rs-menu-mi-hover-color:#FFFFFF;
162
- --_rs-menu-mi-hover-background:var(--_rs-color-primary);
163
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
164
- --_rs-menu-mi-selected-hover-background:rgb(
165
- calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
166
- );
167
262
  }
168
- ._modeClear_1be69r7_31{
263
+ ._modeRock_1t76rai_34 [data-rs-internal="menu__menu-item__inner"]{
264
+ --_rs-menu-mi-color: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);
265
+ --_rs-menu-mi-active-background:transparent;
266
+ --_rs-menu-mi-selected-color: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));
267
+ --_rs-menu-mi-selected-background:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
268
+ --_rs-menu-mi-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
269
+ --_rs-menu-mi-hover-background: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));
270
+ }
271
+ ._modeClear_1t76rai_37{
169
272
  --_rs-menu-mi-horizontal-padding-with-mode:0;
170
- --_rs-menu-mi-active-background:none;
171
- --_rs-menu-mi-selected-color:var(--_rs-color-primary);
172
- --_rs-menu-mi-selected-background:none;
173
- --_rs-menu-mi-hover-color: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));
174
- --_rs-menu-mi-hover-background:none;
175
- --_rs-menu-mi-selected-hover-color: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));
176
- --_rs-menu-mi-selected-hover-background:rgba(
177
- 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),
178
- 0.1
179
- );
180
273
  }
181
- ._iconPlacementLeft_1be69r7_35{
274
+ ._modeClear_1t76rai_37 [data-rs-internal="menu__menu-item__inner"]{
275
+ --_rs-menu-mi-color: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));
276
+ --_rs-menu-mi-active-background:transparent;
277
+ --_rs-menu-mi-selected-color: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));
278
+ --_rs-menu-mi-selected-background: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.1);
279
+ --_rs-menu-mi-hover-color: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));
280
+ --_rs-menu-mi-hover-background:transparent;
281
+ }
282
+ ._iconPlacementLeft_1t76rai_41{
182
283
  --_rs-menu-mi-flex-direction:row;
183
284
  --_rs-menu-mi-justify-content:initial;
184
285
  }
185
- ._iconPlacementRight_1be69r7_39{
286
+ ._iconPlacementRight_1t76rai_45{
186
287
  --_rs-menu-mi-flex-direction:row-reverse;
187
288
  --_rs-menu-mi-justify-content:space-between;
188
289
  }
189
- ._wrapper_1be69r7_43{
290
+ ._wrapper_1t76rai_49{
291
+ display:flex;
292
+ }
293
+ ._hoverIcon_1t76rai_53{
294
+ visibility:hidden;
295
+ }
296
+ ._hoverIcon_1t76rai_53._hoverIconNoReserve_1t76rai_56{
297
+ display:none;
298
+ }
299
+ ._menuItem_1t76rai_61{
190
300
  --_rs-theme-dark:var(
191
301
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
192
302
  var(--rs-theme-dark, 0)
@@ -196,7 +306,7 @@
196
306
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
197
307
  }
198
308
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
199
- ._wrapper_1be69r7_43{
309
+ ._menuItem_1t76rai_61{
200
310
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
201
311
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
202
312
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -205,7 +315,7 @@
205
315
  }
206
316
  }
207
317
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
208
- ._wrapper_1be69r7_43{
318
+ ._menuItem_1t76rai_61{
209
319
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
210
320
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
211
321
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -213,11 +323,7 @@
213
323
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
214
324
  }
215
325
  }
216
- ._wrapper_1be69r7_43 {
217
-
218
- display:flex;
219
- }
220
- ._menuItem_1be69r7_50{
326
+ ._menuItem_1t76rai_61 {
221
327
  letter-spacing:var(
222
328
  --rs-text-base-letter-spacing,
223
329
  var(--_rs-typography-letter-spacing)
@@ -250,7 +356,7 @@
250
356
  text-align:start;
251
357
  text-decoration:none;
252
358
 
253
- color: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));
359
+ color:var(--_rs-menu-mi-color);
254
360
  background:none;
255
361
  -webkit-appearance:none;
256
362
  -moz-appearance:none;
@@ -258,52 +364,61 @@
258
364
  -webkit-font-smoothing:inherit;
259
365
  -moz-osx-font-smoothing:inherit;
260
366
  }
261
- ._menuItem_1be69r7_50:focus{
367
+ ._menuItem_1t76rai_61:focus{
262
368
  outline:none;
263
369
  }
264
- ._keyboardNavigationDisabled_1be69r7_85 ._menuItem_1be69r7_50:focus[data-focus-method='key']{
370
+ ._keyboardNavigationDisabled_1t76rai_98 ._menuItem_1t76rai_61:focus[data-focus-method='key']{
265
371
  box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
266
372
  }
267
- ._menuItem_1be69r7_50:active{
373
+ ._menuItem_1t76rai_61:active{
268
374
  color: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));
269
375
  background:var(--_rs-menu-mi-active-background);
270
376
  }
271
- ._menuItem_1be69r7_50._selected_1be69r7_99{
377
+ ._menuItem_1t76rai_61._selected_1t76rai_112{
272
378
  color:var(--_rs-menu-mi-selected-color);
273
379
  background:var(--_rs-menu-mi-selected-background);
274
380
  }
275
- ._menuItem_1be69r7_50._highlighted_1be69r7_106,
276
- ._menuItem_1be69r7_50:not(._disableCursor_1be69r7_107):hover{
381
+ ._keyboardNavigationEnabled_1t76rai_119 ._menuItem_1t76rai_61:focus,
382
+ ._keyboardNavigationDisabled_1t76rai_98 ._menuItem_1t76rai_61:hover{
277
383
  color:var(--_rs-menu-mi-hover-color);
278
384
  background:var(--_rs-menu-mi-hover-background);
279
385
  }
280
- ._menuItem_1be69r7_50._highlighted_1be69r7_106._selected_1be69r7_99,
281
- ._menuItem_1be69r7_50._selected_1be69r7_99:not(._disableCursor_1be69r7_107):hover{
282
- color:var(--_rs-menu-mi-selected-hover-color);
283
- background-color:var(--_rs-menu-mi-selected-hover-background);
284
- }
285
- ._menuItem_1be69r7_50._disabled_1be69r7_120{
386
+ ._keyboardNavigationEnabled_1t76rai_119 ._menuItem_1t76rai_61:focus ._hoverIcon_1t76rai_53, ._keyboardNavigationDisabled_1t76rai_98 ._menuItem_1t76rai_61:hover ._hoverIcon_1t76rai_53{
387
+ display:block;
388
+ visibility:visible;
389
+ }
390
+ ._keyboardNavigationEnabled_1t76rai_119 ._menuItem_1t76rai_61._hideCustomIconOnHover_1t76rai_130:focus ._customIcon_1t76rai_132, ._keyboardNavigationDisabled_1t76rai_98 ._menuItem_1t76rai_61._hideCustomIconOnHover_1t76rai_130:hover ._customIcon_1t76rai_132{
391
+ display:none;
392
+ }
393
+ ._keyboardNavigationEnabled_1t76rai_119 ._menuItem_1t76rai_61._hideSelectedIconOnHover_1t76rai_137:focus ._selectedIcon_1t76rai_139, ._keyboardNavigationDisabled_1t76rai_98 ._menuItem_1t76rai_61._hideSelectedIconOnHover_1t76rai_137:hover ._selectedIcon_1t76rai_139{
394
+ display:none;
395
+ }
396
+ ._menuItem_1t76rai_61._disabled_1t76rai_144{
286
397
  pointer-events:none;
287
398
 
288
399
  color: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.5);
289
400
  }
290
- ._disableCursor_1be69r7_107{
291
- pointer-events:none;
401
+ ._contentWrapper_1t76rai_151{
402
+ display:flex;
403
+ flex-grow:1;
404
+
405
+ justify-content:space-between;
406
+ gap:var(--_rs-menu-mi-icon-offset);
292
407
  }
293
- ._content_1be69r7_131{
408
+ ._content_1t76rai_151{
294
409
  flex-grow:1;
295
410
 
296
411
  font-size:inherit;
297
412
  }
298
- ._icon_1be69r7_35{
413
+ ._icon_1t76rai_41{
299
414
  flex:0 0;
300
415
  flex-basis:auto;
301
416
  }
302
- ._icon_1be69r7_35._resizedIcon_1be69r7_141{
417
+ ._icon_1t76rai_41._resizedIcon_1t76rai_169{
303
418
  width:auto;
304
419
  height:var(--_rs-menu-mi-icon-size);
305
420
  }
306
- ._divider_1be69r7_149{
421
+ ._divider_1t76rai_177{
307
422
  flex-shrink:0;
308
423
 
309
424
  width:100%;
@@ -314,13 +429,13 @@
314
429
 
315
430
  background-color: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), 0.2);
316
431
  }
317
- ._groupHeaderThemeLight_1be69r7_163{
432
+ ._groupHeaderThemeLight_1t76rai_191{
318
433
  --rs-theme-dark:0;
319
434
  }
320
- ._groupHeaderThemeDark_1be69r7_166{
435
+ ._groupHeaderThemeDark_1t76rai_194{
321
436
  --rs-theme-dark:1;
322
437
  }
323
- ._groupHeaderSizeL_1be69r7_170{
438
+ ._groupHeaderSizeL_1t76rai_198{
324
439
  --_rs-menu-gh-vertical-padding:12px;
325
440
  --_rs-menu-gh-horizontal-padding:16px;
326
441
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
@@ -354,7 +469,7 @@
354
469
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
355
470
  --_rs-typography-link-border-bottom-width-from-text:2px;
356
471
  }
357
- ._groupHeaderSizeM_1be69r7_173{
472
+ ._groupHeaderSizeM_1t76rai_201{
358
473
  --_rs-menu-gh-vertical-padding:8px;
359
474
  --_rs-menu-gh-horizontal-padding:16px;
360
475
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
@@ -388,7 +503,7 @@
388
503
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
389
504
  --_rs-typography-link-border-bottom-width-from-text:2px;
390
505
  }
391
- ._groupHeaderSizeS_1be69r7_176{
506
+ ._groupHeaderSizeS_1t76rai_204{
392
507
  --_rs-menu-gh-vertical-padding:6px;
393
508
  --_rs-menu-gh-horizontal-padding:8px;
394
509
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
@@ -422,7 +537,7 @@
422
537
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
423
538
  --_rs-typography-link-border-bottom-width-from-text:2px;
424
539
  }
425
- ._groupHeader_1be69r7_163{
540
+ ._groupHeader_1t76rai_191{
426
541
  --_rs-theme-dark:var(
427
542
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
428
543
  var(--rs-theme-dark, 0)
@@ -432,7 +547,7 @@
432
547
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
433
548
  }
434
549
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
435
- ._groupHeader_1be69r7_163{
550
+ ._groupHeader_1t76rai_191{
436
551
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
437
552
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
438
553
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -441,7 +556,7 @@
441
556
  }
442
557
  }
443
558
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
444
- ._groupHeader_1be69r7_163{
559
+ ._groupHeader_1t76rai_191{
445
560
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
446
561
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
447
562
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -449,7 +564,7 @@
449
564
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
450
565
  }
451
566
  }
452
- ._groupHeader_1be69r7_163 {
567
+ ._groupHeader_1t76rai_191 {
453
568
  letter-spacing:var(
454
569
  --rs-text-base-letter-spacing,
455
570
  var(--_rs-typography-letter-spacing)
package/lib/index.d.ts CHANGED
@@ -1,10 +1,6 @@
1
1
  export { default as Menu } from './menu';
2
- export type { MenuProps } from './menu';
3
2
  export { MenuContext } from './parts/menu-context';
4
- export type { MenuContextValue, MenuItemIconPlacement } from './parts/menu-context';
5
3
  export { default as MenuItem } from './parts/menu-item';
6
- export type { MenuItemProps } from './parts/menu-item';
7
4
  export { default as Divider } from './parts/divider';
8
- export type { DividerProps } from './parts/divider';
9
5
  export { default as GroupHeader } from './parts/group-header';
10
- export type { GroupHeaderProps } from './parts/group-header';
6
+ export type { GroupHeaderProps, DividerProps, MenuItemProps, MenuProps, MenuContextValue, MenuItemIconPlacement } from './types';
package/lib/menu.d.ts CHANGED
@@ -1,12 +1,18 @@
1
- import React, { HTMLAttributes, ReactNode } from 'react';
2
- import { MenuContextValue } from './parts/menu-context';
3
- export interface MenuProps extends HTMLAttributes<HTMLElement>, Omit<MenuContextValue, 'isKeyboardNavigating' | 'activeItemRef' | 'wrapWithLi'> {
4
- children?: ReactNode;
5
- tag?: React.ElementType;
6
- enableKeyboardNavigation?: boolean;
7
- activateFirstItem?: boolean;
8
- returnFocusOnUnmount?: boolean;
9
- wrapItemsWithLi?: boolean;
10
- }
11
- export declare const Menu: React.FC<MenuProps>;
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import type { MenuProps } from './types';
4
+ export type { MenuProps } from './types';
5
+ export declare const Menu: {
6
+ ({ enableKeyboardNavigation, activateFirstItem, tag, ...props }: MenuProps): React.JSX.Element;
7
+ propTypes: {
8
+ size: PropTypes.Requireable<string>;
9
+ mode: PropTypes.Requireable<string>;
10
+ theme: PropTypes.Requireable<string>;
11
+ disabled: PropTypes.Requireable<boolean>;
12
+ resizeIcons: PropTypes.Requireable<boolean>;
13
+ iconPlacement: PropTypes.Requireable<string>;
14
+ itemTag: PropTypes.Validator<React.ElementType>;
15
+ tag: PropTypes.Validator<React.ElementType>;
16
+ };
17
+ };
12
18
  export default Menu;