@rescui/dropdown 0.2.3 → 0.2.6

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/dropdown.d.ts +2 -0
  2. package/lib/dropdown.js +3 -1
  3. package/lib/index.css +39 -38
  4. package/lib/index.module.pcss.js +11 -11
  5. package/lib/use-dropdown-state.d.ts +1 -1
  6. package/lib/use-dropdown-state.js +2 -2
  7. package/package.json +5 -5
package/lib/dropdown.d.ts CHANGED
@@ -20,6 +20,8 @@ export interface DropdownProps {
20
20
  className?: string;
21
21
  mode?: 'classic' | 'rock';
22
22
  placement?: Placement;
23
+ /** @ignore */
24
+ cancelCloseAnimation?: boolean;
23
25
  children?: ReactNode;
24
26
  }
25
27
  export interface DropdownImperativeHandle {
package/lib/dropdown.js CHANGED
@@ -133,6 +133,8 @@ var DropdownRender = function DropdownRender(_ref4, externalRef) {
133
133
  maxWidth = _ref4.maxWidth,
134
134
  maxHeight = _ref4.maxHeight,
135
135
  leastMaxHeight = _ref4.leastMaxHeight,
136
+ _ref4$cancelCloseAnim = _ref4.cancelCloseAnimation,
137
+ cancelCloseAnimation = _ref4$cancelCloseAnim === void 0 ? false : _ref4$cancelCloseAnim,
136
138
  className = _ref4.className;
137
139
 
138
140
  var _useState = useState(null),
@@ -151,7 +153,7 @@ var DropdownRender = function DropdownRender(_ref4, externalRef) {
151
153
  ignoreElements: [popperRef, triggerRef]
152
154
  });
153
155
 
154
- var _useDropdownState = useDropdownState(isOpen),
156
+ var _useDropdownState = useDropdownState(isOpen, cancelCloseAnimation),
155
157
  _useDropdownState2 = _slicedToArray(_useDropdownState, 2),
156
158
  handleCloseAnimationEnd = _useDropdownState2[0],
157
159
  dropdownState = _useDropdownState2[1];
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- @-webkit-keyframes _fadeInTopToBottom_1slma40_1{
1
+ @-webkit-keyframes _fadeInTopToBottom_qlfpi5_1{
2
2
  0%{
3
3
  opacity:0;
4
4
  -webkit-transform:translateY(-10px);
@@ -10,7 +10,7 @@
10
10
  transform:none;
11
11
  }
12
12
  }
13
- @keyframes _fadeInTopToBottom_1slma40_1{
13
+ @keyframes _fadeInTopToBottom_qlfpi5_1{
14
14
  0%{
15
15
  opacity:0;
16
16
  -webkit-transform:translateY(-10px);
@@ -22,7 +22,7 @@
22
22
  transform:none;
23
23
  }
24
24
  }
25
- @-webkit-keyframes _fadeInBottomToTop_1slma40_1{
25
+ @-webkit-keyframes _fadeInBottomToTop_qlfpi5_1{
26
26
  0%{
27
27
  opacity:0;
28
28
  -webkit-transform:translateY(10px);
@@ -34,7 +34,7 @@
34
34
  transform:none;
35
35
  }
36
36
  }
37
- @keyframes _fadeInBottomToTop_1slma40_1{
37
+ @keyframes _fadeInBottomToTop_qlfpi5_1{
38
38
  0%{
39
39
  opacity:0;
40
40
  -webkit-transform:translateY(10px);
@@ -46,7 +46,7 @@
46
46
  transform:none;
47
47
  }
48
48
  }
49
- @-webkit-keyframes _fadeInLeftToRight_1slma40_1{
49
+ @-webkit-keyframes _fadeInLeftToRight_qlfpi5_1{
50
50
  0%{
51
51
  opacity:0;
52
52
  -webkit-transform:translateX(-10px);
@@ -58,7 +58,7 @@
58
58
  transform:none;
59
59
  }
60
60
  }
61
- @keyframes _fadeInLeftToRight_1slma40_1{
61
+ @keyframes _fadeInLeftToRight_qlfpi5_1{
62
62
  0%{
63
63
  opacity:0;
64
64
  -webkit-transform:translateX(-10px);
@@ -70,7 +70,7 @@
70
70
  transform:none;
71
71
  }
72
72
  }
73
- @-webkit-keyframes _fadeInRightToLeft_1slma40_1{
73
+ @-webkit-keyframes _fadeInRightToLeft_qlfpi5_1{
74
74
  0%{
75
75
  opacity:0;
76
76
  -webkit-transform:translateX(10px);
@@ -82,7 +82,7 @@
82
82
  transform:none;
83
83
  }
84
84
  }
85
- @keyframes _fadeInRightToLeft_1slma40_1{
85
+ @keyframes _fadeInRightToLeft_qlfpi5_1{
86
86
  0%{
87
87
  opacity:0;
88
88
  -webkit-transform:translateX(10px);
@@ -94,7 +94,7 @@
94
94
  transform:none;
95
95
  }
96
96
  }
97
- ._dropdown_1slma40_50{
97
+ ._dropdown_qlfpi5_50{
98
98
  display:-webkit-box;
99
99
  display:-ms-flexbox;
100
100
  display:flex;
@@ -103,73 +103,74 @@
103
103
  -ms-flex-direction:column;
104
104
  flex-direction:column;
105
105
  }
106
- ._triggerWrapper_1slma40_55{
106
+ ._triggerWrapper_qlfpi5_55{
107
107
  display:inline-block;
108
108
  }
109
- ._contentWrapper_1slma40_59{
109
+ ._contentWrapper_qlfpi5_59{
110
110
  display:block;
111
111
  -webkit-box-sizing:border-box;
112
112
  box-sizing:border-box;
113
113
  position:relative;
114
114
  overflow-y:auto;
115
115
  background-clip:padding-box;
116
- border-style:solid;
117
- border-width:1px;
116
+ margin:1px;
118
117
  -webkit-transition:opacity linear 200ms, -webkit-transform linear 200ms;
119
118
  transition:opacity linear 200ms, -webkit-transform linear 200ms;
120
119
  transition:opacity linear 200ms, transform linear 200ms;
121
120
  transition:opacity linear 200ms, transform linear 200ms, -webkit-transform linear 200ms;
122
121
  }
123
- [data-popper-placement^="top" ] ._contentWrapper_1slma40_59{
124
- -webkit-animation:_fadeInBottomToTop_1slma40_1 ease 200ms;
125
- animation:_fadeInBottomToTop_1slma40_1 ease 200ms;
122
+ [data-popper-placement^="top" ] ._contentWrapper_qlfpi5_59{
123
+ -webkit-animation:_fadeInBottomToTop_qlfpi5_1 ease 200ms;
124
+ animation:_fadeInBottomToTop_qlfpi5_1 ease 200ms;
126
125
  }
127
- [data-popper-placement^="bottom" ] ._contentWrapper_1slma40_59{
128
- -webkit-animation:_fadeInTopToBottom_1slma40_1 ease 200ms;
129
- animation:_fadeInTopToBottom_1slma40_1 ease 200ms;
126
+ [data-popper-placement^="bottom" ] ._contentWrapper_qlfpi5_59{
127
+ -webkit-animation:_fadeInTopToBottom_qlfpi5_1 ease 200ms;
128
+ animation:_fadeInTopToBottom_qlfpi5_1 ease 200ms;
130
129
  }
131
- [data-popper-placement^="right"] ._contentWrapper_1slma40_59{
132
- -webkit-animation:_fadeInLeftToRight_1slma40_1 ease 200ms;
133
- animation:_fadeInLeftToRight_1slma40_1 ease 200ms;
130
+ [data-popper-placement^="right"] ._contentWrapper_qlfpi5_59{
131
+ -webkit-animation:_fadeInLeftToRight_qlfpi5_1 ease 200ms;
132
+ animation:_fadeInLeftToRight_qlfpi5_1 ease 200ms;
134
133
  }
135
- [data-popper-placement^="left"] ._contentWrapper_1slma40_59{
136
- -webkit-animation:_fadeInRightToLeft_1slma40_1 ease 200ms;
137
- animation:_fadeInRightToLeft_1slma40_1 ease 200ms;
134
+ [data-popper-placement^="left"] ._contentWrapper_qlfpi5_59{
135
+ -webkit-animation:_fadeInRightToLeft_qlfpi5_1 ease 200ms;
136
+ animation:_fadeInRightToLeft_qlfpi5_1 ease 200ms;
138
137
  }
139
- ._wrapperHidden_1slma40_86{
138
+ ._wrapperHidden_qlfpi5_85{
140
139
  opacity:0;
141
140
  }
142
- [data-popper-placement^="top" ] ._wrapperHidden_1slma40_86{
141
+ [data-popper-placement^="top" ] ._wrapperHidden_qlfpi5_85{
143
142
  -webkit-transform:translateY(10px);
144
143
  transform:translateY(10px);
145
144
  }
146
- [data-popper-placement^="bottom" ] ._wrapperHidden_1slma40_86{
145
+ [data-popper-placement^="bottom" ] ._wrapperHidden_qlfpi5_85{
147
146
  -webkit-transform:translateY(-10px);
148
147
  transform:translateY(-10px);
149
148
  }
150
- [data-popper-placement^="right"] ._wrapperHidden_1slma40_86{
149
+ [data-popper-placement^="right"] ._wrapperHidden_qlfpi5_85{
151
150
  -webkit-transform:translateX(-10px);
152
151
  transform:translateX(-10px);
153
152
  }
154
- [data-popper-placement^="left"] ._wrapperHidden_1slma40_86{
153
+ [data-popper-placement^="left"] ._wrapperHidden_qlfpi5_85{
155
154
  -webkit-transform:translateX(10px);
156
155
  transform:translateX(10px);
157
156
  }
158
- ._themeLight_1slma40_106 ._contentWrapper_1slma40_59{
157
+ ._themeLight_qlfpi5_105 ._contentWrapper_qlfpi5_59{
159
158
  background-color:#FFFFFF;
160
- border-color:rgba(25,25,28,0.2);
159
+ -webkit-box-shadow:0 0 0 1px #D1D1D2;
160
+ box-shadow:0 0 0 1px #D1D1D2;
161
161
  }
162
- ._themeLight_1slma40_106._modeRock_1slma40_111 ._contentWrapper_1slma40_59{
162
+ ._themeLight_qlfpi5_105._modeRock_qlfpi5_110 ._contentWrapper_qlfpi5_59{
163
163
  background-color:#19191C;
164
164
  }
165
- ._themeDark_1slma40_115 ._contentWrapper_1slma40_59{
165
+ ._themeDark_qlfpi5_114 ._contentWrapper_qlfpi5_59{
166
166
  background-color:#303033;
167
- border-color:rgba(255,255,255,0.2);
167
+ -webkit-box-shadow:0 0 0 1px #757577;
168
+ box-shadow:0 0 0 1px #757577;
168
169
  }
169
- ._themeDark_1slma40_115._modeRock_1slma40_111 ._contentWrapper_1slma40_59{
170
+ ._themeDark_qlfpi5_114._modeRock_qlfpi5_110 ._contentWrapper_qlfpi5_59{
170
171
  background-color:#FFFFFF;
171
172
  }
172
- ._modeRock_1slma40_111{
173
+ ._modeRock_qlfpi5_110{
173
174
  --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
174
175
  --rs-parent-color-primary-dim-light-theme:var(--rs-color-primary-dim-light-theme);
175
176
  --rs-parent-color-primary-fog-light-theme:var(--rs-color-primary-fog-light-theme);
@@ -182,7 +183,7 @@
182
183
  --rs-parent-color-primary-t-dim-dark-theme:var(--rs-color-primary-t-dim-dark-theme);
183
184
  --rs-parent-color-primary-t-fog-dark-theme:var(--rs-color-primary-t-fog-dark-theme);
184
185
  }
185
- ._modeRock_1slma40_111 > *{
186
+ ._modeRock_qlfpi5_110 > *{
186
187
  --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
187
188
  --rs-color-primary-dim-dark-theme:var(--rs-parent-color-primary-dim-light-theme);
188
189
  --rs-color-primary-fog-dark-theme:var(--rs-parent-color-primary-fog-light-theme);
package/lib/index.module.pcss.js CHANGED
@@ -1,14 +1,14 @@
1
1
  var styles = {
2
- "dropdown": "_dropdown_1slma40_50",
3
- "triggerWrapper": "_triggerWrapper_1slma40_55",
4
- "contentWrapper": "_contentWrapper_1slma40_59",
5
- "fadeInBottomToTop": "_fadeInBottomToTop_1slma40_1",
6
- "fadeInTopToBottom": "_fadeInTopToBottom_1slma40_1",
7
- "fadeInLeftToRight": "_fadeInLeftToRight_1slma40_1",
8
- "fadeInRightToLeft": "_fadeInRightToLeft_1slma40_1",
9
- "wrapperHidden": "_wrapperHidden_1slma40_86",
10
- "themeLight": "_themeLight_1slma40_106",
11
- "modeRock": "_modeRock_1slma40_111",
12
- "themeDark": "_themeDark_1slma40_115"
2
+ "dropdown": "_dropdown_qlfpi5_50",
3
+ "triggerWrapper": "_triggerWrapper_qlfpi5_55",
4
+ "contentWrapper": "_contentWrapper_qlfpi5_59",
5
+ "fadeInBottomToTop": "_fadeInBottomToTop_qlfpi5_1",
6
+ "fadeInTopToBottom": "_fadeInTopToBottom_qlfpi5_1",
7
+ "fadeInLeftToRight": "_fadeInLeftToRight_qlfpi5_1",
8
+ "fadeInRightToLeft": "_fadeInRightToLeft_qlfpi5_1",
9
+ "wrapperHidden": "_wrapperHidden_qlfpi5_85",
10
+ "themeLight": "_themeLight_qlfpi5_105",
11
+ "modeRock": "_modeRock_qlfpi5_110",
12
+ "themeDark": "_themeDark_qlfpi5_114"
13
13
  };
14
14
  export default styles;
package/lib/use-dropdown-state.d.ts CHANGED
@@ -3,4 +3,4 @@ export declare enum DROPDOWN_STATES {
3
3
  CLOSING = "CLOSING",
4
4
  CLOSE = "CLOSE"
5
5
  }
6
- export declare function useDropdownState(isOpen: boolean): [() => void, DROPDOWN_STATES];
6
+ export declare function useDropdownState(isOpen: boolean, cancelCloseAnimation?: boolean): [() => void, DROPDOWN_STATES];
package/lib/use-dropdown-state.js CHANGED
@@ -8,7 +8,7 @@ var DROPDOWN_STATES;
8
8
  DROPDOWN_STATES["CLOSE"] = "CLOSE";
9
9
  })(DROPDOWN_STATES || (DROPDOWN_STATES = {}));
10
10
 
11
- function useDropdownState(isOpen) {
11
+ function useDropdownState(isOpen, cancelCloseAnimation) {
12
12
  var _useState = useState(false),
13
13
  _useState2 = _slicedToArray(_useState, 2),
14
14
  setDummyState = _useState2[1];
@@ -27,7 +27,7 @@ function useDropdownState(isOpen) {
27
27
  if (isOpen) {
28
28
  stateRef.current = DROPDOWN_STATES.OPEN;
29
29
  } else if (stateRef.current === DROPDOWN_STATES.OPEN && !isOpen) {
30
- stateRef.current = DROPDOWN_STATES.CLOSING;
30
+ stateRef.current = cancelCloseAnimation ? DROPDOWN_STATES.CLOSE : DROPDOWN_STATES.CLOSING;
31
31
  }
32
32
 
33
33
  return [onCloseAnimationEnd, stateRef.current];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/dropdown",
3
- "version": "0.2.3",
3
+ "version": "0.2.6",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -28,13 +28,13 @@
28
28
  "react-dom": ">=16.8.0 <18"
29
29
  },
30
30
  "devDependencies": {
31
- "@rescui/colors": "^0.1.0",
32
- "@rescui/scripts": "^0.1.4",
33
- "@rescui/typography": "^0.6.0",
31
+ "@rescui/colors": "^0.1.1",
32
+ "@rescui/scripts": "^0.1.5",
33
+ "@rescui/typography": "^0.7.1",
34
34
  "@rescui/visual-regression": "^0.0.1"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "rescui-scripts build"
38
38
  },
39
- "gitHead": "91cb43cee6ffc54aae5360a73437d97c3f4ed36d"
39
+ "gitHead": "10cf86a6c4c4b678c0b94c03c56c6d33214f03e8"
40
40
  }