@rescui/dropdown 0.9.5 → 0.9.6-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.66

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 (12) hide show
  1. package/lib/css-vars-utils.d.ts +3 -3
  2. package/lib/custom-modifiers.d.ts +12 -12
  3. package/lib/dropdown.d.ts +44 -43
  4. package/lib/dropdown.js +16 -3
  5. package/lib/dropdown.p.module.css.js +12 -12
  6. package/lib/index.css +78 -46
  7. package/lib/index.d.ts +7 -8
  8. package/lib/index.js +2 -2
  9. package/lib/use-dropdown-state.d.ts +7 -7
  10. package/lib/use-scrollable-container.d.ts +13 -14
  11. package/lib/use-scrollable-container.js +5 -5
  12. package/package.json +7 -7
package/lib/css-vars-utils.d.ts CHANGED
@@ -1,3 +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";
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/custom-modifiers.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- import type { Modifier } from 'react-popper';
2
- import { Property } from 'csstype';
3
- export declare type DropdownMaxWidth = 'trigger' | Property.MaxWidth;
4
- export declare type DropdownMinWidth = 'trigger' | Property.MinWidth;
5
- export declare const sameWidthModifier: Modifier<'sameWidth', {
6
- maxWidth: DropdownMaxWidth;
7
- minWidth: DropdownMinWidth;
8
- }>;
9
- export declare const applyMaxSize: Modifier<'applyMaxSize', {
10
- leastMaxHeight: number;
11
- maxHeight: number;
12
- }>;
1
+ import type { Modifier } from 'react-popper';
2
+ import { Property } from 'csstype';
3
+ export type DropdownMaxWidth = 'trigger' | Property.MaxWidth;
4
+ export type DropdownMinWidth = 'trigger' | Property.MinWidth;
5
+ export declare const sameWidthModifier: Modifier<'sameWidth', {
6
+ maxWidth: DropdownMaxWidth;
7
+ minWidth: DropdownMinWidth;
8
+ }>;
9
+ export declare const applyMaxSize: Modifier<'applyMaxSize', {
10
+ leastMaxHeight: number;
11
+ maxHeight: number;
12
+ }>;
package/lib/dropdown.d.ts CHANGED
@@ -1,43 +1,44 @@
1
- import React, { ReactNode } from 'react';
2
- import type { ReferenceChildrenProps } from 'react-popper';
3
- import { Theme } from '@rescui/ui-contexts';
4
- import type { Placement } from '@popperjs/core';
5
- import { DropdownMaxWidth, DropdownMinWidth } from './custom-modifiers';
6
- export declare type DropdownTrigger = ((props: ReferenceChildrenProps) => JSX.Element) | JSX.Element;
7
- export interface DropdownProps {
8
- trigger: DropdownTrigger;
9
- isOpen: boolean;
10
- onRequestClose?: () => void;
11
- theme?: Theme;
12
- maxHeight?: number;
13
- /** Least possible maxHeight value, even if there is less space let on the screen. It's not the same thing as minHeight because actual height still depends on dropdown content which can be smaller. Eg. leastMaxHeight equals to item height at DropdownMenu */
14
- leastMaxHeight?: number;
15
- /**
16
- * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
17
- * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
18
- * @type 'trigger' | MinWidthProperty<string | number>;
19
- * */
20
- minWidth?: DropdownMinWidth;
21
- /**
22
- * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
23
- * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
24
- * @type 'trigger' | MaxWidthProperty<string | number>;
25
- * */
26
- maxWidth?: DropdownMaxWidth;
27
- className?: string;
28
- mode?: 'classic' | 'rock';
29
- placement?: Placement;
30
- /** @ignore */
31
- cancelCloseAnimation?: boolean;
32
- children?: ReactNode;
33
- closeOnEsc?: boolean;
34
- closeOnTab?: boolean;
35
- disableFocusLock?: boolean;
36
- /** Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout. */
37
- renderInTrigger?: boolean;
38
- }
39
- export interface DropdownImperativeHandle {
40
- scheduleUpdate: () => void;
41
- }
42
- export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<DropdownImperativeHandle>>;
43
- export default Dropdown;
1
+ import React from 'react';
2
+ import type { ReactNode, JSX } from 'react';
3
+ import type { ReferenceChildrenProps } from 'react-popper';
4
+ import { Theme } from '@rescui/ui-contexts';
5
+ import type { Placement } from '@popperjs/core';
6
+ import { DropdownMaxWidth, DropdownMinWidth } from './custom-modifiers';
7
+ export type DropdownTrigger = ((props: ReferenceChildrenProps) => JSX.Element) | JSX.Element;
8
+ export interface DropdownProps {
9
+ trigger: DropdownTrigger;
10
+ isOpen: boolean;
11
+ onRequestClose?: () => void;
12
+ theme?: Theme;
13
+ maxHeight?: number;
14
+ /** Least possible maxHeight value, even if there is less space let on the screen. It's not the same thing as minHeight because actual height still depends on dropdown content which can be smaller. Eg. leastMaxHeight equals to item height at DropdownMenu */
15
+ leastMaxHeight?: number;
16
+ /**
17
+ * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).
18
+ * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
19
+ * @type 'trigger' | MinWidthProperty<string | number>;
20
+ * */
21
+ minWidth?: DropdownMinWidth;
22
+ /**
23
+ * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).
24
+ * `trigger` is a special value that substitutes with trigger's width calculated on every dropdown position update
25
+ * @type 'trigger' | MaxWidthProperty<string | number>;
26
+ * */
27
+ maxWidth?: DropdownMaxWidth;
28
+ className?: string;
29
+ mode?: 'classic' | 'rock';
30
+ placement?: Placement;
31
+ /** @ignore */
32
+ cancelCloseAnimation?: boolean;
33
+ children?: ReactNode;
34
+ closeOnEsc?: boolean;
35
+ closeOnTab?: boolean;
36
+ disableFocusLock?: boolean;
37
+ /** Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout. */
38
+ renderInTrigger?: boolean;
39
+ }
40
+ export interface DropdownImperativeHandle {
41
+ scheduleUpdate: () => void;
42
+ }
43
+ export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<DropdownImperativeHandle>>;
44
+ export default Dropdown;
package/lib/dropdown.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import React, { useState, useEffect, useImperativeHandle, useContext, useCallback } from 'react';
2
+ import React, { useState, useRef, useEffect, useImperativeHandle, useContext, useCallback } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import cn from 'classnames';
5
5
  import { usePopper } from 'react-popper';
@@ -143,7 +143,8 @@ const DropdownRender = (_ref5, externalRef) => {
143
143
  const {
144
144
  setContentEl,
145
145
  scrollableStyles
146
- } = useScrollableContainer(); // We set isOpen this way to avoid hydration issue due to
146
+ } = useScrollableContainer();
147
+ const scrollableRef = useRef(null); // We set isOpen this way to avoid hydration issue due to
147
148
  // the Portal to document.body which does not exist on the server.
148
149
  // So even if isOpen prop is used, the tooltip will not render on the server, and
149
150
  // it's the same on the first client render, so there is no hydration issue.
@@ -217,7 +218,18 @@ const DropdownRender = (_ref5, externalRef) => {
217
218
  noProvider
218
219
  } = useContext(ThemeContext);
219
220
  const theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
220
- const childrenTheme = mode === 'rock' ? getInverseTheme(theme) : theme;
221
+ const childrenTheme = mode === 'rock' ? getInverseTheme(theme) : theme; // immediately fire handleAnimationEnd event on visibility change in case transition is disabled
222
+ // it may happen if the user hard-disabled all transitions in his browser
223
+
224
+ useEffect(() => {
225
+ if (dropdownShouldBeRendered && scrollableRef.current) {
226
+ const isTransitionDisabled = window.getComputedStyle(scrollableRef.current).transitionDuration === '0s';
227
+
228
+ if (isTransitionDisabled) {
229
+ handleAnimationEnd();
230
+ }
231
+ }
232
+ }, [handleAnimationEnd, dropdownShouldBeRendered]);
221
233
  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
222
234
  target: renderInTrigger ? triggerRef : undefined
223
235
  }, /*#__PURE__*/React.createElement("div", {
@@ -234,6 +246,7 @@ const DropdownRender = (_ref5, externalRef) => {
234
246
  }, /*#__PURE__*/React.createElement(LayeringProvider, {
235
247
  baseLayer: 'dropdown'
236
248
  }, /*#__PURE__*/React.createElement("div", {
249
+ ref: scrollableRef,
237
250
  style: scrollableStyles,
238
251
  className: cn(styles.contentWrapper, wrapperShouldBeHidden && styles.wrapperHidden),
239
252
  onTransitionEnd: handleAnimationEnd,
package/lib/dropdown.p.module.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_3tdx5a_60",
3
- "themeDark": "_themeDark_3tdx5a_63",
4
- "dropdown": "_dropdown_3tdx5a_67",
5
- "triggerWrapper": "_triggerWrapper_3tdx5a_74",
6
- "contentWrapper": "_contentWrapper_3tdx5a_78",
7
- "fadeInBottomToTop": "_fadeInBottomToTop_3tdx5a_1",
8
- "fadeInTopToBottom": "_fadeInTopToBottom_3tdx5a_1",
9
- "fadeInLeftToRight": "_fadeInLeftToRight_3tdx5a_1",
10
- "fadeInRightToLeft": "_fadeInRightToLeft_3tdx5a_1",
11
- "wrapperHidden": "_wrapperHidden_3tdx5a_109",
12
- "modeClassic": "_modeClassic_3tdx5a_129",
13
- "modeRock": "_modeRock_3tdx5a_133"
2
+ "themeLight": "_themeLight_1p6i40z_59",
3
+ "themeDark": "_themeDark_1p6i40z_62",
4
+ "dropdown": "_dropdown_1p6i40z_66",
5
+ "triggerWrapper": "_triggerWrapper_1p6i40z_73",
6
+ "contentWrapper": "_contentWrapper_1p6i40z_77",
7
+ "fadeInBottomToTop": "_fadeInBottomToTop_1p6i40z_1",
8
+ "fadeInTopToBottom": "_fadeInTopToBottom_1p6i40z_1",
9
+ "fadeInLeftToRight": "_fadeInLeftToRight_1p6i40z_1",
10
+ "fadeInRightToLeft": "_fadeInRightToLeft_1p6i40z_1",
11
+ "wrapperHidden": "_wrapperHidden_1p6i40z_110",
12
+ "modeClassic": "_modeClassic_1p6i40z_130",
13
+ "modeRock": "_modeRock_1p6i40z_134"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes _fadeInTopToBottom_3tdx5a_1{
1
+ @keyframes _fadeInTopToBottom_1p6i40z_1{
2
2
  0%{
3
3
  opacity:0;
4
4
 
@@ -10,7 +10,7 @@
10
10
  transform:none;
11
11
  }
12
12
  }
13
- @keyframes _fadeInBottomToTop_3tdx5a_1{
13
+ @keyframes _fadeInBottomToTop_1p6i40z_1{
14
14
  0%{
15
15
  opacity:0;
16
16
 
@@ -22,7 +22,7 @@
22
22
  transform:none;
23
23
  }
24
24
  }
25
- @keyframes _fadeInLeftToRight_3tdx5a_1{
25
+ @keyframes _fadeInLeftToRight_1p6i40z_1{
26
26
  0%{
27
27
  opacity:0;
28
28
 
@@ -34,7 +34,7 @@
34
34
  transform:none;
35
35
  }
36
36
  }
37
- @keyframes _fadeInRightToLeft_3tdx5a_1{
37
+ @keyframes _fadeInRightToLeft_1p6i40z_1{
38
38
  0%{
39
39
  opacity:0;
40
40
 
@@ -46,13 +46,13 @@
46
46
  transform:none;
47
47
  }
48
48
  }
49
- ._themeLight_3tdx5a_60{
49
+ ._themeLight_1p6i40z_59{
50
50
  --rs-theme-dark:0;
51
51
  }
52
- ._themeDark_3tdx5a_63{
52
+ ._themeDark_1p6i40z_62{
53
53
  --rs-theme-dark:1;
54
54
  }
55
- ._dropdown_3tdx5a_67{
55
+ ._dropdown_1p6i40z_66{
56
56
  --_rs-theme-dark:var(
57
57
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
58
58
  var(--rs-theme-dark, 0)
@@ -62,7 +62,7 @@
62
62
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
63
63
  }
64
64
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
65
- ._dropdown_3tdx5a_67{
65
+ ._dropdown_1p6i40z_66{
66
66
  --_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)));
67
67
  --_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)));
68
68
  --_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)));
@@ -71,7 +71,7 @@
71
71
  }
72
72
  }
73
73
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
74
- ._dropdown_3tdx5a_67{
74
+ ._dropdown_1p6i40z_66{
75
75
  --_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);
76
76
  --_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));
77
77
  --_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));
@@ -79,14 +79,14 @@
79
79
  --_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));
80
80
  }
81
81
  }
82
- ._dropdown_3tdx5a_67 {
82
+ ._dropdown_1p6i40z_66 {
83
83
  display:flex;
84
84
  flex-direction:column;
85
85
  }
86
- ._triggerWrapper_3tdx5a_74{
86
+ ._triggerWrapper_1p6i40z_73{
87
87
  display:inline-block;
88
88
  }
89
- ._contentWrapper_3tdx5a_78{
89
+ ._contentWrapper_1p6i40z_77{
90
90
  position:relative;
91
91
 
92
92
  display:block;
@@ -98,64 +98,96 @@
98
98
  background-clip:padding-box;
99
99
  box-shadow:0 0 0 1px rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(210 - var(--_rs-theme-dark-coefficient, 0)*137));
100
100
 
101
- transition:opacity linear 200ms, transform linear 200ms;
101
+ transition:opacity var(--rs-transition-function, linear) 200ms, transform var(--rs-transition-function, linear) 200ms;
102
102
  }
103
- [data-popper-placement^="top" ] ._contentWrapper_3tdx5a_78{
104
- animation:_fadeInBottomToTop_3tdx5a_1 ease 200ms;
103
+ [data-popper-placement^='top'] ._contentWrapper_1p6i40z_77{
104
+ animation:_fadeInBottomToTop_1p6i40z_1 var(--rs-transition-function, ease) 200ms;
105
105
  }
106
- [data-popper-placement^="bottom" ] ._contentWrapper_3tdx5a_78{
107
- animation:_fadeInTopToBottom_3tdx5a_1 ease 200ms;
106
+ [data-popper-placement^='bottom'] ._contentWrapper_1p6i40z_77{
107
+ animation:_fadeInTopToBottom_1p6i40z_1 var(--rs-transition-function, ease) 200ms;
108
108
  }
109
- [data-popper-placement^="right"] ._contentWrapper_3tdx5a_78{
110
- animation:_fadeInLeftToRight_3tdx5a_1 ease 200ms;
109
+ [data-popper-placement^='right'] ._contentWrapper_1p6i40z_77{
110
+ animation:_fadeInLeftToRight_1p6i40z_1 var(--rs-transition-function, ease) 200ms;
111
111
  }
112
- [data-popper-placement^="left"] ._contentWrapper_3tdx5a_78{
113
- animation:_fadeInRightToLeft_3tdx5a_1 ease 200ms;
112
+ [data-popper-placement^='left'] ._contentWrapper_1p6i40z_77{
113
+ animation:_fadeInRightToLeft_1p6i40z_1 var(--rs-transition-function, ease) 200ms;
114
114
  }
115
- ._wrapperHidden_3tdx5a_109{
115
+ ._wrapperHidden_1p6i40z_110{
116
116
  opacity:0;
117
117
  }
118
- [data-popper-placement^="top" ] ._wrapperHidden_3tdx5a_109{
118
+ [data-popper-placement^='top'] ._wrapperHidden_1p6i40z_110{
119
119
  transform:translateY(10px);
120
120
  }
121
- [data-popper-placement^="bottom" ] ._wrapperHidden_3tdx5a_109{
121
+ [data-popper-placement^='bottom'] ._wrapperHidden_1p6i40z_110{
122
122
  transform:translateY(-10px);
123
123
  }
124
- [data-popper-placement^="right"] ._wrapperHidden_3tdx5a_109{
124
+ [data-popper-placement^='right'] ._wrapperHidden_1p6i40z_110{
125
125
  transform:translateX(-10px);
126
126
  }
127
- [data-popper-placement^="left"] ._wrapperHidden_3tdx5a_109{
127
+ [data-popper-placement^='left'] ._wrapperHidden_1p6i40z_110{
128
128
  transform:translateX(10px);
129
129
  }
130
- ._modeClassic_3tdx5a_129 ._contentWrapper_3tdx5a_78{
130
+ ._modeClassic_1p6i40z_130 ._contentWrapper_1p6i40z_77{
131
131
  background-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));
132
132
  }
133
- ._modeRock_3tdx5a_133 ._contentWrapper_3tdx5a_78{
133
+ ._modeRock_1p6i40z_134 ._contentWrapper_1p6i40z_77{
134
134
  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));
135
135
  }
136
- ._modeRock_3tdx5a_133{
136
+ ._modeRock_1p6i40z_134{
137
137
  --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
138
- --rs-parent-color-primary-dim-light-theme:var(--rs-color-primary-dim-light-theme);
139
- --rs-parent-color-primary-fog-light-theme:var(--rs-color-primary-fog-light-theme);
140
- --rs-parent-color-primary-t-dim-light-theme:var(--rs-color-primary-t-dim-light-theme);
141
- --rs-parent-color-primary-t-fog-light-theme:var(--rs-color-primary-t-fog-light-theme);
138
+ --rs-parent-color-primary-dim-light-theme:var(
139
+ --rs-color-primary-dim-light-theme
140
+ );
141
+ --rs-parent-color-primary-fog-light-theme:var(
142
+ --rs-color-primary-fog-light-theme
143
+ );
144
+ --rs-parent-color-primary-t-dim-light-theme:var(
145
+ --rs-color-primary-t-dim-light-theme
146
+ );
147
+ --rs-parent-color-primary-t-fog-light-theme:var(
148
+ --rs-color-primary-t-fog-light-theme
149
+ );
142
150
 
143
151
  --rs-parent-color-primary-dark-theme:var(--rs-color-primary-dark-theme);
144
- --rs-parent-color-primary-dim-dark-theme:var(--rs-color-primary-dim-dark-theme);
145
- --rs-parent-color-primary-fog-dark-theme:var(--rs-color-primary-fog-dark-theme);
146
- --rs-parent-color-primary-t-dim-dark-theme:var(--rs-color-primary-t-dim-dark-theme);
147
- --rs-parent-color-primary-t-fog-dark-theme:var(--rs-color-primary-t-fog-dark-theme);
152
+ --rs-parent-color-primary-dim-dark-theme:var(
153
+ --rs-color-primary-dim-dark-theme
154
+ );
155
+ --rs-parent-color-primary-fog-dark-theme:var(
156
+ --rs-color-primary-fog-dark-theme
157
+ );
158
+ --rs-parent-color-primary-t-dim-dark-theme:var(
159
+ --rs-color-primary-t-dim-dark-theme
160
+ );
161
+ --rs-parent-color-primary-t-fog-dark-theme:var(
162
+ --rs-color-primary-t-fog-dark-theme
163
+ );
148
164
  }
149
- ._modeRock_3tdx5a_133 > *{
165
+ ._modeRock_1p6i40z_134 > *{
150
166
  --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
151
- --rs-color-primary-dim-dark-theme:var(--rs-parent-color-primary-dim-light-theme);
152
- --rs-color-primary-fog-dark-theme:var(--rs-parent-color-primary-fog-light-theme);
153
- --rs-color-primary-t-dim-dark-theme:var(--rs-parent-color-primary-t-dim-light-theme);
154
- --rs-color-primary-t-fog-dark-theme:var(--rs-parent-color-primary-t-fog-light-theme);
167
+ --rs-color-primary-dim-dark-theme:var(
168
+ --rs-parent-color-primary-dim-light-theme
169
+ );
170
+ --rs-color-primary-fog-dark-theme:var(
171
+ --rs-parent-color-primary-fog-light-theme
172
+ );
173
+ --rs-color-primary-t-dim-dark-theme:var(
174
+ --rs-parent-color-primary-t-dim-light-theme
175
+ );
176
+ --rs-color-primary-t-fog-dark-theme:var(
177
+ --rs-parent-color-primary-t-fog-light-theme
178
+ );
155
179
 
156
180
  --rs-color-primary-light-theme:var(--rs-parent-color-primary-dark-theme);
157
- --rs-color-primary-dim-light-theme:var(--rs-parent-color-primary-dim-dark-theme);
158
- --rs-color-primary-fog-light-theme:var(--rs-parent-color-primary-fog-dark-theme);
159
- --rs-color-primary-t-dim-light-theme:var(--rs-parent-color-primary-t-dim-dark-theme);
160
- --rs-color-primary-t-fog-light-theme:var(--rs-parent-color-primary-t-fog-dark-theme);
181
+ --rs-color-primary-dim-light-theme:var(
182
+ --rs-parent-color-primary-dim-dark-theme
183
+ );
184
+ --rs-color-primary-fog-light-theme:var(
185
+ --rs-parent-color-primary-fog-dark-theme
186
+ );
187
+ --rs-color-primary-t-dim-light-theme:var(
188
+ --rs-parent-color-primary-t-dim-dark-theme
189
+ );
190
+ --rs-color-primary-t-fog-light-theme:var(
191
+ --rs-parent-color-primary-t-fog-dark-theme
192
+ );
161
193
  }
package/lib/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- /// <reference types="react" />
2
- /**
3
- * @deprecated use named import instead
4
- */
5
- declare const DefaultDropdown: import("react").ForwardRefExoticComponent<import("./dropdown").DropdownProps & import("react").RefAttributes<import("./dropdown").DropdownImperativeHandle>>;
6
- export default DefaultDropdown;
7
- export { Dropdown } from './dropdown';
8
- export type { DropdownProps } from './dropdown';
1
+ /**
2
+ * @deprecated use named import instead
3
+ */
4
+ declare const DefaultDropdown: import("react").ForwardRefExoticComponent<import("./dropdown").DropdownProps & import("react").RefAttributes<import("./dropdown").DropdownImperativeHandle>>;
5
+ export default DefaultDropdown;
6
+ export { Dropdown } from './dropdown';
7
+ export type { DropdownProps, DropdownImperativeHandle } from './dropdown';
package/lib/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import './index.css';
2
2
  import { Dropdown } from './dropdown.js';
3
3
  export { Dropdown } from './dropdown.js';
4
- /**
5
- * @deprecated use named import instead
4
+ /**
5
+ * @deprecated use named import instead
6
6
  */
7
7
 
8
8
  const DefaultDropdown = Dropdown;
package/lib/use-dropdown-state.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- export declare enum DROPDOWN_STATES {
2
- OPENING = "OPENING",
3
- OPEN = "OPEN",
4
- CLOSING = "CLOSING",
5
- CLOSE = "CLOSE"
6
- }
7
- export declare function useDropdownState(isOpen: boolean, cancelCloseAnimation?: boolean): [() => void, DROPDOWN_STATES];
1
+ export declare enum DROPDOWN_STATES {
2
+ OPENING = "OPENING",
3
+ OPEN = "OPEN",
4
+ CLOSING = "CLOSING",
5
+ CLOSE = "CLOSE"
6
+ }
7
+ export declare function useDropdownState(isOpen: boolean, cancelCloseAnimation?: boolean): [() => void, DROPDOWN_STATES];
package/lib/use-scrollable-container.d.ts CHANGED
@@ -1,14 +1,13 @@
1
- /// <reference types="react" />
2
- import { Property } from 'csstype';
3
- /**
4
- * Hack for firefox and old safari.
5
- * Set "overflowY: scroll" for scrollable container when there is something to scroll.
6
- * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
7
- * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
8
- */
9
- export declare const useScrollableContainer: () => {
10
- setContentEl: import("react").Dispatch<import("react").SetStateAction<HTMLElement>>;
11
- scrollableStyles: {
12
- overflowY: Property.OverflowY;
13
- };
14
- };
1
+ import { Property } from 'csstype';
2
+ /**
3
+ * Hack for firefox and old safari.
4
+ * Set "overflowY: scroll" for scrollable container when there is something to scroll.
5
+ * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
6
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
7
+ */
8
+ export declare const useScrollableContainer: () => {
9
+ setContentEl: import("react").Dispatch<import("react").SetStateAction<HTMLElement>>;
10
+ scrollableStyles: {
11
+ overflowY: Property.OverflowY;
12
+ };
13
+ };
package/lib/use-scrollable-container.js CHANGED
@@ -4,11 +4,11 @@ import { useState, useEffect } from 'react';
4
4
  function isOverflown(element) {
5
5
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
6
6
  }
7
- /**
8
- * Hack for firefox and old safari.
9
- * Set "overflowY: scroll" for scrollable container when there is something to scroll.
10
- * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
11
- * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
7
+ /**
8
+ * Hack for firefox and old safari.
9
+ * Set "overflowY: scroll" for scrollable container when there is something to scroll.
10
+ * Fixes situation when scrollbar takes space from the content which causes unexpected wrapping.
11
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=764076
12
12
  */
13
13
 
14
14
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/dropdown",
3
- "version": "0.9.5",
3
+ "version": "0.9.6-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.66+8f54dec0a",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -29,15 +29,15 @@
29
29
  "react-dom": ">=16.8.0 <20"
30
30
  },
31
31
  "devDependencies": {
32
- "@rescui/colors": "^0.3.0",
33
- "@rescui/icons": "^1.7.4",
34
- "@rescui/scripts": "^0.5.1",
35
- "@rescui/typography": "^0.25.0",
36
- "@rescui/visual-regression": "^0.1.4"
32
+ "@rescui/colors": "0.3.1-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.79+8f54dec0a",
33
+ "@rescui/icons": "1.7.5-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.66+8f54dec0a",
34
+ "@rescui/scripts": "0.5.1",
35
+ "@rescui/typography": "0.25.1-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.66+8f54dec0a",
36
+ "@rescui/visual-regression": "0.1.4"
37
37
  },
38
38
  "scripts": {
39
39
  "build": "rescui-scripts build"
40
40
  },
41
41
  "nx": {},
42
- "gitHead": "59db2e6ea5eabdcabc035779df2611d0df5a0cbe"
42
+ "gitHead": "8f54dec0a450da30835485cba2edfd0037cccd25"
43
43
  }