@rescui/dropdown 0.6.4 → 0.7.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.
Files changed (7) hide show
  1. package/lib/css-vars-utils.d.ts +3 -0
  2. package/lib/css-vars-utils.js +21 -0
  3. package/lib/dropdown.d.ts +2 -3
  4. package/lib/dropdown.js +37 -8
  5. package/lib/index.css +112 -47
  6. package/lib/index.p.module.css.js +12 -11
  7. package/package.json +5 -5
package/lib/css-vars-utils.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
2
+ /** Check out `@rescui/colors/src/public-api.p.css` file */
3
+ export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";
package/lib/css-vars-utils.js ADDED
@@ -0,0 +1,21 @@
1
+ import "core-js/modules/es.object.to-string.js";
2
+ var PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
3
+
4
+ var extractPrimaryColors = function extractPrimaryColors(styles) {
5
+ var colors = {};
6
+ PRIMARY_COLORS.forEach(function (varName) {
7
+ colors[varName] = styles.getPropertyValue(varName) || 'initial';
8
+ });
9
+ return colors;
10
+ };
11
+ /** Check out `@rescui/colors/src/public-api.p.css` file */
12
+
13
+
14
+ var extractThemeFromCss = function extractThemeFromCss(styles) {
15
+ var themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
16
+ var themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
17
+ var themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
18
+ return themeDarkCoefficient === 1 ? 'dark' : 'light';
19
+ };
20
+
21
+ export { extractPrimaryColors, extractThemeFromCss };
package/lib/dropdown.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import 'core-js/es/array/find';
2
1
  import React, { ReactNode } from 'react';
3
- import { ReferenceChildrenProps } from 'react-popper';
2
+ import type { ReferenceChildrenProps } from 'react-popper';
4
3
  import { Theme } from '@rescui/ui-contexts';
5
- import { Placement } from '@popperjs/core';
4
+ import type { Placement } from '@popperjs/core';
6
5
  import { DropdownMaxWidth, DropdownMinWidth } from './custom-modifiers';
7
6
  export declare type DropdownTrigger = ((props: ReferenceChildrenProps) => JSX.Element) | JSX.Element;
8
7
  export interface DropdownProps {
package/lib/dropdown.js CHANGED
@@ -27,19 +27,19 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
27
27
 
28
28
  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; }
29
29
 
30
- import 'core-js/es/array/find';
31
- import React, { useState, useImperativeHandle, useCallback, useEffect } from 'react';
30
+ import React, { useState, useImperativeHandle, useContext, useCallback, useEffect } from 'react';
32
31
  import PropTypes from 'prop-types';
33
32
  import cn from 'classnames';
34
33
  import { usePopper } from 'react-popper';
35
34
  import maxSizeModifier from 'popper-max-size-modifier';
36
- import { useLayeringContext, useTheme, LayeringProvider, ThemeProvider, getInverseTheme } from '@rescui/ui-contexts';
35
+ import { useLayeringContext, ThemeContext, getInverseTheme, LayeringProvider, ThemeProvider } from '@rescui/ui-contexts';
37
36
  import FocusLock from 'react-focus-lock';
38
37
  import ReactDOM from 'react-dom';
39
38
  import { useDropdownState, DROPDOWN_STATES } from './use-dropdown-state.js';
40
39
  import { useScrollableContainer } from './use-scrollable-container.js';
41
40
  import styles from './index.p.module.css.js';
42
- import { applyMaxSize, sameWidthModifier } from './custom-modifiers.js'; // fix popper-js for IE11
41
+ import { applyMaxSize, sameWidthModifier } from './custom-modifiers.js';
42
+ import { extractThemeFromCss, extractPrimaryColors } from './css-vars-utils.js';
43
43
 
44
44
  function getPopperOptions(_ref) {
45
45
  var placement = _ref.placement,
@@ -145,6 +145,15 @@ function useKeyPress(_ref4) {
145
145
  }, [key, onKeyPress, isEnabled]);
146
146
  }
147
147
 
148
+ var THEME_STYLES = {
149
+ light: styles.themeLight,
150
+ dark: styles.themeDark
151
+ };
152
+ var MODE_STYLES = {
153
+ classic: styles.modeClassic,
154
+ rock: styles.modeRock
155
+ };
156
+
148
157
  var DropdownRender = function DropdownRender(_ref5, externalRef) {
149
158
  var children = _ref5.children,
150
159
  trigger = _ref5.trigger,
@@ -232,7 +241,6 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
232
241
  var _useLayeringContext = useLayeringContext(),
233
242
  dropdownZIndex = _useLayeringContext.dropdownZIndex;
234
243
 
235
- var theme = useTheme(themeFromProps);
236
244
  var triggerRenderer = typeof trigger === 'function' ? trigger({
237
245
  ref: setTriggerRef
238
246
  }) : /*#__PURE__*/React.createElement("span", {
@@ -242,6 +250,25 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
242
250
  }, trigger);
243
251
  var dropdownShouldBeRendered = dropdownState !== DROPDOWN_STATES.CLOSE;
244
252
  var wrapperShouldBeHidden = dropdownState === DROPDOWN_STATES.CLOSING;
253
+ var primaryColors = {};
254
+ var themeFromCss = 'light';
255
+
256
+ if (triggerRef && dropdownShouldBeRendered) {
257
+ // In theory this part of the code might cause issues with SSR.
258
+ // But in this specific context, because of the nature of the state-ref "triggerRef",
259
+ // we are sure that the dropdown wouldn't be rendered on the first client render.
260
+ // Therefore, the first render on the client will be the same as on the server.
261
+ var triggerStyles = getComputedStyle(triggerRef);
262
+ themeFromCss = extractThemeFromCss(triggerStyles);
263
+ primaryColors = extractPrimaryColors(triggerStyles);
264
+ }
265
+
266
+ var _useContext = useContext(ThemeContext),
267
+ themeFromContext = _useContext.theme,
268
+ noProvider = _useContext.noProvider;
269
+
270
+ var theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
271
+ var childrenTheme = mode === 'rock' ? getInverseTheme(theme) : theme;
245
272
  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
246
273
  target: renderInTrigger ? triggerRef : undefined
247
274
  }, /*#__PURE__*/React.createElement("div", _objectSpread({
@@ -250,8 +277,8 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
250
277
  maxHeight: maxHeight
251
278
  }, popperStyles.popper), {}, {
252
279
  zIndex: dropdownZIndex
253
- }),
254
- className: cn(styles.dropdown, className, mode === 'rock' && styles.modeRock, theme === 'dark' ? styles.themeDark : styles.themeLight),
280
+ }, primaryColors),
281
+ className: cn(styles.dropdown, className, MODE_STYLES[mode], THEME_STYLES[theme]),
255
282
  "data-test": "dropdown"
256
283
  }, attributes.popper), /*#__PURE__*/React.createElement(LayeringProvider, {
257
284
  baseLayer: 'dropdown'
@@ -262,8 +289,10 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
262
289
  onAnimationEnd: handleAnimationEnd,
263
290
  "data-test": "dropdown-content"
264
291
  }, /*#__PURE__*/React.createElement(ThemeProvider, {
265
- theme: mode === 'rock' ? getInverseTheme(theme) : theme
292
+ ignoreThemeValueForCSSApi: noProvider,
293
+ theme: childrenTheme
266
294
  }, /*#__PURE__*/React.createElement(FocusLock, {
295
+ className: THEME_STYLES[childrenTheme],
267
296
  ref: setContentEl,
268
297
  disabled: dropdownState !== DROPDOWN_STATES.OPEN || disableFocusLock,
269
298
  returnFocus: {
package/lib/index.css CHANGED
@@ -1,100 +1,165 @@
1
- @-webkit-keyframes _fadeInTopToBottom_rbv9f4_1{
1
+ @-webkit-keyframes _fadeInTopToBottom_ligfr3_1{
2
2
  0%{
3
3
  opacity:0;
4
+
4
5
  -webkit-transform:translateY(-10px);
6
+
5
7
  transform:translateY(-10px);
6
8
  }
7
9
  100%{
8
10
  opacity:1;
11
+
9
12
  -webkit-transform:none;
13
+
10
14
  transform:none;
11
15
  }
12
16
  }
13
- @keyframes _fadeInTopToBottom_rbv9f4_1{
17
+ @keyframes _fadeInTopToBottom_ligfr3_1{
14
18
  0%{
15
19
  opacity:0;
20
+
16
21
  -webkit-transform:translateY(-10px);
22
+
17
23
  transform:translateY(-10px);
18
24
  }
19
25
  100%{
20
26
  opacity:1;
27
+
21
28
  -webkit-transform:none;
29
+
22
30
  transform:none;
23
31
  }
24
32
  }
25
- @-webkit-keyframes _fadeInBottomToTop_rbv9f4_1{
33
+ @-webkit-keyframes _fadeInBottomToTop_ligfr3_1{
26
34
  0%{
27
35
  opacity:0;
36
+
28
37
  -webkit-transform:translateY(10px);
38
+
29
39
  transform:translateY(10px);
30
40
  }
31
41
  100%{
32
42
  opacity:1;
43
+
33
44
  -webkit-transform:none;
45
+
34
46
  transform:none;
35
47
  }
36
48
  }
37
- @keyframes _fadeInBottomToTop_rbv9f4_1{
49
+ @keyframes _fadeInBottomToTop_ligfr3_1{
38
50
  0%{
39
51
  opacity:0;
52
+
40
53
  -webkit-transform:translateY(10px);
54
+
41
55
  transform:translateY(10px);
42
56
  }
43
57
  100%{
44
58
  opacity:1;
59
+
45
60
  -webkit-transform:none;
61
+
46
62
  transform:none;
47
63
  }
48
64
  }
49
- @-webkit-keyframes _fadeInLeftToRight_rbv9f4_1{
65
+ @-webkit-keyframes _fadeInLeftToRight_ligfr3_1{
50
66
  0%{
51
67
  opacity:0;
68
+
52
69
  -webkit-transform:translateX(-10px);
70
+
53
71
  transform:translateX(-10px);
54
72
  }
55
73
  100%{
56
74
  opacity:1;
75
+
57
76
  -webkit-transform:none;
77
+
58
78
  transform:none;
59
79
  }
60
80
  }
61
- @keyframes _fadeInLeftToRight_rbv9f4_1{
81
+ @keyframes _fadeInLeftToRight_ligfr3_1{
62
82
  0%{
63
83
  opacity:0;
84
+
64
85
  -webkit-transform:translateX(-10px);
86
+
65
87
  transform:translateX(-10px);
66
88
  }
67
89
  100%{
68
90
  opacity:1;
91
+
69
92
  -webkit-transform:none;
93
+
70
94
  transform:none;
71
95
  }
72
96
  }
73
- @-webkit-keyframes _fadeInRightToLeft_rbv9f4_1{
97
+ @-webkit-keyframes _fadeInRightToLeft_ligfr3_1{
74
98
  0%{
75
99
  opacity:0;
100
+
76
101
  -webkit-transform:translateX(10px);
102
+
77
103
  transform:translateX(10px);
78
104
  }
79
105
  100%{
80
106
  opacity:1;
107
+
81
108
  -webkit-transform:none;
109
+
82
110
  transform:none;
83
111
  }
84
112
  }
85
- @keyframes _fadeInRightToLeft_rbv9f4_1{
113
+ @keyframes _fadeInRightToLeft_ligfr3_1{
86
114
  0%{
87
115
  opacity:0;
116
+
88
117
  -webkit-transform:translateX(10px);
118
+
89
119
  transform:translateX(10px);
90
120
  }
91
121
  100%{
92
122
  opacity:1;
123
+
93
124
  -webkit-transform:none;
125
+
94
126
  transform:none;
95
127
  }
96
128
  }
97
- ._dropdown_rbv9f4_50{
129
+ ._themeLight_ligfr3_60{
130
+ --rs-theme-dark:0;
131
+ }
132
+ ._themeDark_ligfr3_63{
133
+ --rs-theme-dark:1;
134
+ }
135
+ ._dropdown_ligfr3_67{
136
+ --_rs-theme-dark:var(
137
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
138
+ var(--rs-theme-dark, 0)
139
+ );
140
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
141
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
142
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
143
+ }
144
+ @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
145
+ ._dropdown_ligfr3_67{
146
+ --_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)));
147
+ --_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)));
148
+ --_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)));
149
+ --_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)));
150
+ --_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)));
151
+ }
152
+ }
153
+ @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
154
+ ._dropdown_ligfr3_67{
155
+ --_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);
156
+ --_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));
157
+ --_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));
158
+ --_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);
159
+ --_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));
160
+ }
161
+ }
162
+ ._dropdown_ligfr3_67 {
98
163
  display:-webkit-box;
99
164
  display:-ms-flexbox;
100
165
  display:flex;
@@ -103,74 +168,74 @@
103
168
  -ms-flex-direction:column;
104
169
  flex-direction:column;
105
170
  }
106
- ._triggerWrapper_rbv9f4_55{
171
+ ._triggerWrapper_ligfr3_74{
107
172
  display:inline-block;
108
173
  }
109
- ._contentWrapper_rbv9f4_59{
174
+ ._contentWrapper_ligfr3_78{
175
+ position:relative;
176
+
110
177
  display:block;
178
+ overflow-y:auto;
179
+
111
180
  -webkit-box-sizing:border-box;
181
+
112
182
  box-sizing:border-box;
113
- position:relative;
114
- overflow-y:auto;
115
- background-clip:padding-box;
116
183
  margin:1px;
184
+
185
+ background-clip:padding-box;
186
+ -webkit-box-shadow:0 0 0 1px rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(210 - var(--_rs-theme-dark-coefficient, 0)*91));
187
+ box-shadow:0 0 0 1px rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(209 - var(--_rs-theme-dark-coefficient, 0)*92), calc(210 - var(--_rs-theme-dark-coefficient, 0)*91));
188
+
117
189
  -webkit-transition:opacity linear 200ms, -webkit-transform linear 200ms;
190
+
118
191
  transition:opacity linear 200ms, -webkit-transform linear 200ms;
192
+
119
193
  transition:opacity linear 200ms, transform linear 200ms;
194
+
120
195
  transition:opacity linear 200ms, transform linear 200ms, -webkit-transform linear 200ms;
121
196
  }
122
- [data-popper-placement^="top" ] ._contentWrapper_rbv9f4_59{
123
- -webkit-animation:_fadeInBottomToTop_rbv9f4_1 ease 200ms;
124
- animation:_fadeInBottomToTop_rbv9f4_1 ease 200ms;
197
+ [data-popper-placement^="top" ] ._contentWrapper_ligfr3_78{
198
+ -webkit-animation:_fadeInBottomToTop_ligfr3_1 ease 200ms;
199
+ animation:_fadeInBottomToTop_ligfr3_1 ease 200ms;
125
200
  }
126
- [data-popper-placement^="bottom" ] ._contentWrapper_rbv9f4_59{
127
- -webkit-animation:_fadeInTopToBottom_rbv9f4_1 ease 200ms;
128
- animation:_fadeInTopToBottom_rbv9f4_1 ease 200ms;
201
+ [data-popper-placement^="bottom" ] ._contentWrapper_ligfr3_78{
202
+ -webkit-animation:_fadeInTopToBottom_ligfr3_1 ease 200ms;
203
+ animation:_fadeInTopToBottom_ligfr3_1 ease 200ms;
129
204
  }
130
- [data-popper-placement^="right"] ._contentWrapper_rbv9f4_59{
131
- -webkit-animation:_fadeInLeftToRight_rbv9f4_1 ease 200ms;
132
- animation:_fadeInLeftToRight_rbv9f4_1 ease 200ms;
205
+ [data-popper-placement^="right"] ._contentWrapper_ligfr3_78{
206
+ -webkit-animation:_fadeInLeftToRight_ligfr3_1 ease 200ms;
207
+ animation:_fadeInLeftToRight_ligfr3_1 ease 200ms;
133
208
  }
134
- [data-popper-placement^="left"] ._contentWrapper_rbv9f4_59{
135
- -webkit-animation:_fadeInRightToLeft_rbv9f4_1 ease 200ms;
136
- animation:_fadeInRightToLeft_rbv9f4_1 ease 200ms;
209
+ [data-popper-placement^="left"] ._contentWrapper_ligfr3_78{
210
+ -webkit-animation:_fadeInRightToLeft_ligfr3_1 ease 200ms;
211
+ animation:_fadeInRightToLeft_ligfr3_1 ease 200ms;
137
212
  }
138
- ._wrapperHidden_rbv9f4_85{
213
+ ._wrapperHidden_ligfr3_109{
139
214
  opacity:0;
140
215
  }
141
- [data-popper-placement^="top" ] ._wrapperHidden_rbv9f4_85{
216
+ [data-popper-placement^="top" ] ._wrapperHidden_ligfr3_109{
142
217
  -webkit-transform:translateY(10px);
143
218
  transform:translateY(10px);
144
219
  }
145
- [data-popper-placement^="bottom" ] ._wrapperHidden_rbv9f4_85{
220
+ [data-popper-placement^="bottom" ] ._wrapperHidden_ligfr3_109{
146
221
  -webkit-transform:translateY(-10px);
147
222
  transform:translateY(-10px);
148
223
  }
149
- [data-popper-placement^="right"] ._wrapperHidden_rbv9f4_85{
224
+ [data-popper-placement^="right"] ._wrapperHidden_ligfr3_109{
150
225
  -webkit-transform:translateX(-10px);
151
226
  transform:translateX(-10px);
152
227
  }
153
- [data-popper-placement^="left"] ._wrapperHidden_rbv9f4_85{
228
+ [data-popper-placement^="left"] ._wrapperHidden_ligfr3_109{
154
229
  -webkit-transform:translateX(10px);
155
230
  transform:translateX(10px);
156
231
  }
157
- ._themeLight_rbv9f4_105 ._contentWrapper_rbv9f4_59{
158
- background-color:#FFFFFF;
159
- -webkit-box-shadow:0 0 0 1px #D1D1D2;
160
- box-shadow:0 0 0 1px #D1D1D2;
161
- }
162
- ._themeLight_rbv9f4_105._modeRock_rbv9f4_110 ._contentWrapper_rbv9f4_59{
163
- background-color:#19191C;
164
- }
165
- ._themeDark_rbv9f4_114 ._contentWrapper_rbv9f4_59{
166
- background-color:#303033;
167
- -webkit-box-shadow:0 0 0 1px #757577;
168
- box-shadow:0 0 0 1px #757577;
232
+ ._modeClassic_ligfr3_129 ._contentWrapper_ligfr3_78{
233
+ background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
169
234
  }
170
- ._themeDark_rbv9f4_114._modeRock_rbv9f4_110 ._contentWrapper_rbv9f4_59{
171
- background-color:#FFFFFF;
235
+ ._modeRock_ligfr3_133 ._contentWrapper_ligfr3_78{
236
+ 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));
172
237
  }
173
- ._modeRock_rbv9f4_110{
238
+ ._modeRock_ligfr3_133{
174
239
  --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
175
240
  --rs-parent-color-primary-dim-light-theme:var(--rs-color-primary-dim-light-theme);
176
241
  --rs-parent-color-primary-fog-light-theme:var(--rs-color-primary-fog-light-theme);
@@ -183,7 +248,7 @@
183
248
  --rs-parent-color-primary-t-dim-dark-theme:var(--rs-color-primary-t-dim-dark-theme);
184
249
  --rs-parent-color-primary-t-fog-dark-theme:var(--rs-color-primary-t-fog-dark-theme);
185
250
  }
186
- ._modeRock_rbv9f4_110 > *{
251
+ ._modeRock_ligfr3_133 > *{
187
252
  --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
188
253
  --rs-color-primary-dim-dark-theme:var(--rs-parent-color-primary-dim-light-theme);
189
254
  --rs-color-primary-fog-dark-theme:var(--rs-parent-color-primary-fog-light-theme);
package/lib/index.p.module.css.js CHANGED
@@ -1,14 +1,15 @@
1
1
  var styles = {
2
- "dropdown": "_dropdown_rbv9f4_50",
3
- "triggerWrapper": "_triggerWrapper_rbv9f4_55",
4
- "contentWrapper": "_contentWrapper_rbv9f4_59",
5
- "fadeInBottomToTop": "_fadeInBottomToTop_rbv9f4_1",
6
- "fadeInTopToBottom": "_fadeInTopToBottom_rbv9f4_1",
7
- "fadeInLeftToRight": "_fadeInLeftToRight_rbv9f4_1",
8
- "fadeInRightToLeft": "_fadeInRightToLeft_rbv9f4_1",
9
- "wrapperHidden": "_wrapperHidden_rbv9f4_85",
10
- "themeLight": "_themeLight_rbv9f4_105",
11
- "modeRock": "_modeRock_rbv9f4_110",
12
- "themeDark": "_themeDark_rbv9f4_114"
2
+ "themeLight": "_themeLight_ligfr3_60",
3
+ "themeDark": "_themeDark_ligfr3_63",
4
+ "dropdown": "_dropdown_ligfr3_67",
5
+ "triggerWrapper": "_triggerWrapper_ligfr3_74",
6
+ "contentWrapper": "_contentWrapper_ligfr3_78",
7
+ "fadeInBottomToTop": "_fadeInBottomToTop_ligfr3_1",
8
+ "fadeInTopToBottom": "_fadeInTopToBottom_ligfr3_1",
9
+ "fadeInLeftToRight": "_fadeInLeftToRight_ligfr3_1",
10
+ "fadeInRightToLeft": "_fadeInRightToLeft_ligfr3_1",
11
+ "wrapperHidden": "_wrapperHidden_ligfr3_109",
12
+ "modeClassic": "_modeClassic_ligfr3_129",
13
+ "modeRock": "_modeRock_ligfr3_133"
13
14
  };
14
15
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/dropdown",
3
- "version": "0.6.4",
3
+ "version": "0.7.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -29,13 +29,13 @@
29
29
  "react-dom": ">=16.8.0 <19"
30
30
  },
31
31
  "devDependencies": {
32
- "@rescui/colors": "^0.1.11",
33
- "@rescui/scripts": "^0.2.3",
34
- "@rescui/typography": "^0.15.0",
32
+ "@rescui/colors": "^0.2.0",
33
+ "@rescui/scripts": "^0.3.0",
34
+ "@rescui/typography": "^0.16.0",
35
35
  "@rescui/visual-regression": "^0.1.1"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "rescui-scripts build"
39
39
  },
40
- "gitHead": "e21b6f80037993b094ceaff022db6d4cd176a88d"
40
+ "gitHead": "51da8a7188f4c558c563065a4ff4ef5c8e74994c"
41
41
  }