@rescui/dropdown 0.3.8 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/dropdown.d.ts +1 -0
  2. package/lib/dropdown.js +16 -7
  3. package/lib/index.css +34 -34
  4. package/lib/index.p.module.css.js +11 -11
  5. package/package.json +3 -3
package/lib/dropdown.d.ts CHANGED
@@ -32,6 +32,7 @@ export interface DropdownProps {
32
32
  cancelCloseAnimation?: boolean;
33
33
  children?: ReactNode;
34
34
  closeOnEsc?: boolean;
35
+ closeOnTab?: boolean;
35
36
  disableFocusLock?: boolean;
36
37
  /** Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout. */
37
38
  renderInTrigger?: boolean;
package/lib/dropdown.js CHANGED
@@ -121,8 +121,9 @@ function useOnOutsideClick(_ref3) {
121
121
  }, [handleDocumentClick, isEnabled, ignoreElementRefsExists]);
122
122
  }
123
123
 
124
- function useEscapePress(_ref4) {
125
- var onEscPress = _ref4.onEscPress,
124
+ function useKeyPress(_ref4) {
125
+ var key = _ref4.key,
126
+ onKeyPress = _ref4.onKeyPress,
126
127
  isEnabled = _ref4.isEnabled;
127
128
  useEffect(function () {
128
129
  if (!isEnabled) {
@@ -130,9 +131,9 @@ function useEscapePress(_ref4) {
130
131
  }
131
132
 
132
133
  var keyDownHandler = function keyDownHandler(e) {
133
- if (e.key === 'Escape') {
134
+ if (e.key === key) {
134
135
  e.preventDefault();
135
- onEscPress();
136
+ onKeyPress();
136
137
  }
137
138
  };
138
139
 
@@ -141,7 +142,7 @@ function useEscapePress(_ref4) {
141
142
  return function () {
142
143
  document.removeEventListener('keydown', keyDownHandler, true);
143
144
  };
144
- }, [onEscPress, isEnabled]);
145
+ }, [key, onKeyPress, isEnabled]);
145
146
  }
146
147
 
147
148
  var DropdownRender = function DropdownRender(_ref5, externalRef) {
@@ -165,6 +166,8 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
165
166
  className = _ref5.className,
166
167
  _ref5$closeOnEsc = _ref5.closeOnEsc,
167
168
  closeOnEsc = _ref5$closeOnEsc === void 0 ? true : _ref5$closeOnEsc,
169
+ _ref5$closeOnTab = _ref5.closeOnTab,
170
+ closeOnTab = _ref5$closeOnTab === void 0 ? false : _ref5$closeOnTab,
168
171
  _ref5$disableFocusLoc = _ref5.disableFocusLock,
169
172
  disableFocusLock = _ref5$disableFocusLoc === void 0 ? false : _ref5$disableFocusLoc,
170
173
  _ref5$renderInTrigger = _ref5.renderInTrigger,
@@ -189,9 +192,15 @@ var DropdownRender = function DropdownRender(_ref5, externalRef) {
189
192
  onOutsideClick: onRequestClose,
190
193
  ignoreElements: [popperRef, triggerRef]
191
194
  });
192
- useEscapePress({
195
+ useKeyPress({
196
+ key: 'Escape',
193
197
  isEnabled: isOpen && closeOnEsc,
194
- onEscPress: onRequestClose
198
+ onKeyPress: onRequestClose
199
+ });
200
+ useKeyPress({
201
+ key: 'Tab',
202
+ isEnabled: isOpen && closeOnTab,
203
+ onKeyPress: onRequestClose
195
204
  });
196
205
 
197
206
  var _useDropdownState = useDropdownState(isOpen, cancelCloseAnimation),
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- @-webkit-keyframes _fadeInTopToBottom_1t4sa2o_1{
1
+ @-webkit-keyframes _fadeInTopToBottom_nirpll_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_1t4sa2o_1{
13
+ @keyframes _fadeInTopToBottom_nirpll_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_1t4sa2o_1{
25
+ @-webkit-keyframes _fadeInBottomToTop_nirpll_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_1t4sa2o_1{
37
+ @keyframes _fadeInBottomToTop_nirpll_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_1t4sa2o_1{
49
+ @-webkit-keyframes _fadeInLeftToRight_nirpll_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_1t4sa2o_1{
61
+ @keyframes _fadeInLeftToRight_nirpll_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_1t4sa2o_1{
73
+ @-webkit-keyframes _fadeInRightToLeft_nirpll_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_1t4sa2o_1{
85
+ @keyframes _fadeInRightToLeft_nirpll_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_1t4sa2o_50{
97
+ ._dropdown_nirpll_50{
98
98
  display:-webkit-box;
99
99
  display:-ms-flexbox;
100
100
  display:flex;
@@ -103,10 +103,10 @@
103
103
  -ms-flex-direction:column;
104
104
  flex-direction:column;
105
105
  }
106
- ._triggerWrapper_1t4sa2o_55{
106
+ ._triggerWrapper_nirpll_55{
107
107
  display:inline-block;
108
108
  }
109
- ._contentWrapper_1t4sa2o_59{
109
+ ._contentWrapper_nirpll_59{
110
110
  display:block;
111
111
  -webkit-box-sizing:border-box;
112
112
  box-sizing:border-box;
@@ -119,58 +119,58 @@
119
119
  transition:opacity linear 200ms, transform linear 200ms;
120
120
  transition:opacity linear 200ms, transform linear 200ms, -webkit-transform linear 200ms;
121
121
  }
122
- [data-popper-placement^="top" ] ._contentWrapper_1t4sa2o_59{
123
- -webkit-animation:_fadeInBottomToTop_1t4sa2o_1 ease 200ms;
124
- animation:_fadeInBottomToTop_1t4sa2o_1 ease 200ms;
122
+ [data-popper-placement^="top" ] ._contentWrapper_nirpll_59{
123
+ -webkit-animation:_fadeInBottomToTop_nirpll_1 ease 200ms;
124
+ animation:_fadeInBottomToTop_nirpll_1 ease 200ms;
125
125
  }
126
- [data-popper-placement^="bottom" ] ._contentWrapper_1t4sa2o_59{
127
- -webkit-animation:_fadeInTopToBottom_1t4sa2o_1 ease 200ms;
128
- animation:_fadeInTopToBottom_1t4sa2o_1 ease 200ms;
126
+ [data-popper-placement^="bottom" ] ._contentWrapper_nirpll_59{
127
+ -webkit-animation:_fadeInTopToBottom_nirpll_1 ease 200ms;
128
+ animation:_fadeInTopToBottom_nirpll_1 ease 200ms;
129
129
  }
130
- [data-popper-placement^="right"] ._contentWrapper_1t4sa2o_59{
131
- -webkit-animation:_fadeInLeftToRight_1t4sa2o_1 ease 200ms;
132
- animation:_fadeInLeftToRight_1t4sa2o_1 ease 200ms;
130
+ [data-popper-placement^="right"] ._contentWrapper_nirpll_59{
131
+ -webkit-animation:_fadeInLeftToRight_nirpll_1 ease 200ms;
132
+ animation:_fadeInLeftToRight_nirpll_1 ease 200ms;
133
133
  }
134
- [data-popper-placement^="left"] ._contentWrapper_1t4sa2o_59{
135
- -webkit-animation:_fadeInRightToLeft_1t4sa2o_1 ease 200ms;
136
- animation:_fadeInRightToLeft_1t4sa2o_1 ease 200ms;
134
+ [data-popper-placement^="left"] ._contentWrapper_nirpll_59{
135
+ -webkit-animation:_fadeInRightToLeft_nirpll_1 ease 200ms;
136
+ animation:_fadeInRightToLeft_nirpll_1 ease 200ms;
137
137
  }
138
- ._wrapperHidden_1t4sa2o_85{
138
+ ._wrapperHidden_nirpll_85{
139
139
  opacity:0;
140
140
  }
141
- [data-popper-placement^="top" ] ._wrapperHidden_1t4sa2o_85{
141
+ [data-popper-placement^="top" ] ._wrapperHidden_nirpll_85{
142
142
  -webkit-transform:translateY(10px);
143
143
  transform:translateY(10px);
144
144
  }
145
- [data-popper-placement^="bottom" ] ._wrapperHidden_1t4sa2o_85{
145
+ [data-popper-placement^="bottom" ] ._wrapperHidden_nirpll_85{
146
146
  -webkit-transform:translateY(-10px);
147
147
  transform:translateY(-10px);
148
148
  }
149
- [data-popper-placement^="right"] ._wrapperHidden_1t4sa2o_85{
149
+ [data-popper-placement^="right"] ._wrapperHidden_nirpll_85{
150
150
  -webkit-transform:translateX(-10px);
151
151
  transform:translateX(-10px);
152
152
  }
153
- [data-popper-placement^="left"] ._wrapperHidden_1t4sa2o_85{
153
+ [data-popper-placement^="left"] ._wrapperHidden_nirpll_85{
154
154
  -webkit-transform:translateX(10px);
155
155
  transform:translateX(10px);
156
156
  }
157
- ._themeLight_1t4sa2o_105 ._contentWrapper_1t4sa2o_59{
157
+ ._themeLight_nirpll_105 ._contentWrapper_nirpll_59{
158
158
  background-color:#FFFFFF;
159
159
  -webkit-box-shadow:0 0 0 1px #D1D1D2;
160
160
  box-shadow:0 0 0 1px #D1D1D2;
161
161
  }
162
- ._themeLight_1t4sa2o_105._modeRock_1t4sa2o_110 ._contentWrapper_1t4sa2o_59{
162
+ ._themeLight_nirpll_105._modeRock_nirpll_110 ._contentWrapper_nirpll_59{
163
163
  background-color:#19191C;
164
164
  }
165
- ._themeDark_1t4sa2o_114 ._contentWrapper_1t4sa2o_59{
165
+ ._themeDark_nirpll_114 ._contentWrapper_nirpll_59{
166
166
  background-color:#303033;
167
167
  -webkit-box-shadow:0 0 0 1px #757577;
168
168
  box-shadow:0 0 0 1px #757577;
169
169
  }
170
- ._themeDark_1t4sa2o_114._modeRock_1t4sa2o_110 ._contentWrapper_1t4sa2o_59{
170
+ ._themeDark_nirpll_114._modeRock_nirpll_110 ._contentWrapper_nirpll_59{
171
171
  background-color:#FFFFFF;
172
172
  }
173
- ._modeRock_1t4sa2o_110{
173
+ ._modeRock_nirpll_110{
174
174
  --rs-parent-color-primary-light-theme:var(--rs-color-primary-light-theme);
175
175
  --rs-parent-color-primary-dim-light-theme:var(--rs-color-primary-dim-light-theme);
176
176
  --rs-parent-color-primary-fog-light-theme:var(--rs-color-primary-fog-light-theme);
@@ -183,7 +183,7 @@
183
183
  --rs-parent-color-primary-t-dim-dark-theme:var(--rs-color-primary-t-dim-dark-theme);
184
184
  --rs-parent-color-primary-t-fog-dark-theme:var(--rs-color-primary-t-fog-dark-theme);
185
185
  }
186
- ._modeRock_1t4sa2o_110 > *{
186
+ ._modeRock_nirpll_110 > *{
187
187
  --rs-color-primary-dark-theme:var(--rs-parent-color-primary-light-theme);
188
188
  --rs-color-primary-dim-dark-theme:var(--rs-parent-color-primary-dim-light-theme);
189
189
  --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,14 @@
1
1
  var styles = {
2
- "dropdown": "_dropdown_1t4sa2o_50",
3
- "triggerWrapper": "_triggerWrapper_1t4sa2o_55",
4
- "contentWrapper": "_contentWrapper_1t4sa2o_59",
5
- "fadeInBottomToTop": "_fadeInBottomToTop_1t4sa2o_1",
6
- "fadeInTopToBottom": "_fadeInTopToBottom_1t4sa2o_1",
7
- "fadeInLeftToRight": "_fadeInLeftToRight_1t4sa2o_1",
8
- "fadeInRightToLeft": "_fadeInRightToLeft_1t4sa2o_1",
9
- "wrapperHidden": "_wrapperHidden_1t4sa2o_85",
10
- "themeLight": "_themeLight_1t4sa2o_105",
11
- "modeRock": "_modeRock_1t4sa2o_110",
12
- "themeDark": "_themeDark_1t4sa2o_114"
2
+ "dropdown": "_dropdown_nirpll_50",
3
+ "triggerWrapper": "_triggerWrapper_nirpll_55",
4
+ "contentWrapper": "_contentWrapper_nirpll_59",
5
+ "fadeInBottomToTop": "_fadeInBottomToTop_nirpll_1",
6
+ "fadeInTopToBottom": "_fadeInTopToBottom_nirpll_1",
7
+ "fadeInLeftToRight": "_fadeInLeftToRight_nirpll_1",
8
+ "fadeInRightToLeft": "_fadeInRightToLeft_nirpll_1",
9
+ "wrapperHidden": "_wrapperHidden_nirpll_85",
10
+ "themeLight": "_themeLight_nirpll_105",
11
+ "modeRock": "_modeRock_nirpll_110",
12
+ "themeDark": "_themeDark_nirpll_114"
13
13
  };
14
14
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/dropdown",
3
- "version": "0.3.8",
3
+ "version": "0.4.1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -31,11 +31,11 @@
31
31
  "devDependencies": {
32
32
  "@rescui/colors": "^0.1.5",
33
33
  "@rescui/scripts": "^0.1.7",
34
- "@rescui/typography": "^0.8.3",
34
+ "@rescui/typography": "^0.9.0",
35
35
  "@rescui/visual-regression": "^0.0.4"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "rescui-scripts build"
39
39
  },
40
- "gitHead": "20a2d86279a96ad1375a69513d550bdc983f9616"
40
+ "gitHead": "dabdf725c89406ff04be3ac8148a70db22648e27"
41
41
  }