@rescui/dropdown 0.2.5 → 0.3.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 (7) hide show
  1. package/lib/dropdown.d.ts +4 -0
  2. package/lib/dropdown.js +74 -28
  3. package/lib/index.css +34 -34
  4. package/lib/index.module.pcss.js +12 -12
  5. package/lib/use-dropdown-state.d.ts +1 -0
  6. package/lib/use-dropdown-state.js +12 -5
  7. package/package.json +7 -6
package/lib/dropdown.d.ts CHANGED
@@ -23,6 +23,10 @@ export interface DropdownProps {
23
23
  /** @ignore */
24
24
  cancelCloseAnimation?: boolean;
25
25
  children?: ReactNode;
26
+ closeOnEsc?: boolean;
27
+ disableFocusLock?: boolean;
28
+ /** Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout. */
29
+ renderInTrigger?: boolean;
26
30
  }
27
31
  export interface DropdownImperativeHandle {
28
32
  scheduleUpdate: () => void;
package/lib/dropdown.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "core-js/modules/web.dom-collections.for-each.js";
2
- import "core-js/modules/es.object.to-string.js";
3
2
  import "core-js/modules/es.function.name.js";
3
+ import "core-js/modules/es.regexp.exec.js";
4
4
  import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
5
5
  import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
6
6
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -21,9 +21,11 @@ function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return;
21
21
 
22
22
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
23
23
 
24
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
24
+ import "core-js/modules/es.object.to-string.js";
25
+
26
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
25
27
 
26
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
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; }
27
29
 
28
30
  import 'core-js/es/array/find';
29
31
  import React, { useState, useImperativeHandle, useCallback, useEffect } from 'react';
@@ -32,6 +34,7 @@ import cn from 'classnames';
32
34
  import { usePopper } from 'react-popper';
33
35
  import maxSizeModifier from 'popper-max-size-modifier';
34
36
  import { useLayeringContext, useTheme, LayeringProvider, ThemeProvider, getInverseTheme } from '@rescui/ui-contexts';
37
+ import FocusLock from 'react-focus-lock';
35
38
  import ReactDOM from 'react-dom';
36
39
  import { useDropdownState, DROPDOWN_STATES } from './use-dropdown-state.js';
37
40
  import styles from './index.module.pcss.js';
@@ -117,25 +120,54 @@ function useOnOutsideClick(_ref3) {
117
120
  }, [handleDocumentClick, isEnabled, ignoreElementRefsExists]);
118
121
  }
119
122
 
120
- var DropdownRender = function DropdownRender(_ref4, externalRef) {
121
- var children = _ref4.children,
122
- trigger = _ref4.trigger,
123
- themeFromProps = _ref4.theme,
124
- _ref4$isOpen = _ref4.isOpen,
125
- isOpen = _ref4$isOpen === void 0 ? false : _ref4$isOpen,
126
- _ref4$placement = _ref4.placement,
127
- placement = _ref4$placement === void 0 ? 'bottom-start' : _ref4$placement,
128
- _ref4$mode = _ref4.mode,
129
- mode = _ref4$mode === void 0 ? 'classic' : _ref4$mode,
130
- _ref4$onRequestClose = _ref4.onRequestClose,
131
- onRequestClose = _ref4$onRequestClose === void 0 ? function () {} : _ref4$onRequestClose,
132
- minWidth = _ref4.minWidth,
133
- maxWidth = _ref4.maxWidth,
134
- maxHeight = _ref4.maxHeight,
135
- leastMaxHeight = _ref4.leastMaxHeight,
136
- _ref4$cancelCloseAnim = _ref4.cancelCloseAnimation,
137
- cancelCloseAnimation = _ref4$cancelCloseAnim === void 0 ? false : _ref4$cancelCloseAnim,
138
- className = _ref4.className;
123
+ function useEscapePress(_ref4) {
124
+ var onEscPress = _ref4.onEscPress,
125
+ isEnabled = _ref4.isEnabled;
126
+ useEffect(function () {
127
+ if (!isEnabled) {
128
+ return;
129
+ }
130
+
131
+ var keyDownHandler = function keyDownHandler(e) {
132
+ if (e.key === 'Escape') {
133
+ e.preventDefault();
134
+ onEscPress();
135
+ }
136
+ };
137
+
138
+ document.addEventListener('keydown', keyDownHandler, true); // eslint-disable-next-line consistent-return
139
+
140
+ return function () {
141
+ document.removeEventListener('keydown', keyDownHandler, true);
142
+ };
143
+ }, [onEscPress, isEnabled]);
144
+ }
145
+
146
+ var DropdownRender = function DropdownRender(_ref5, externalRef) {
147
+ var children = _ref5.children,
148
+ trigger = _ref5.trigger,
149
+ themeFromProps = _ref5.theme,
150
+ _ref5$isOpen = _ref5.isOpen,
151
+ isOpen = _ref5$isOpen === void 0 ? false : _ref5$isOpen,
152
+ _ref5$placement = _ref5.placement,
153
+ placement = _ref5$placement === void 0 ? 'bottom-start' : _ref5$placement,
154
+ _ref5$mode = _ref5.mode,
155
+ mode = _ref5$mode === void 0 ? 'classic' : _ref5$mode,
156
+ _ref5$onRequestClose = _ref5.onRequestClose,
157
+ onRequestClose = _ref5$onRequestClose === void 0 ? function () {} : _ref5$onRequestClose,
158
+ minWidth = _ref5.minWidth,
159
+ maxWidth = _ref5.maxWidth,
160
+ maxHeight = _ref5.maxHeight,
161
+ leastMaxHeight = _ref5.leastMaxHeight,
162
+ _ref5$cancelCloseAnim = _ref5.cancelCloseAnimation,
163
+ cancelCloseAnimation = _ref5$cancelCloseAnim === void 0 ? false : _ref5$cancelCloseAnim,
164
+ className = _ref5.className,
165
+ _ref5$closeOnEsc = _ref5.closeOnEsc,
166
+ closeOnEsc = _ref5$closeOnEsc === void 0 ? true : _ref5$closeOnEsc,
167
+ _ref5$disableFocusLoc = _ref5.disableFocusLock,
168
+ disableFocusLock = _ref5$disableFocusLoc === void 0 ? false : _ref5$disableFocusLoc,
169
+ _ref5$renderInTrigger = _ref5.renderInTrigger,
170
+ renderInTrigger = _ref5$renderInTrigger === void 0 ? false : _ref5$renderInTrigger;
139
171
 
140
172
  var _useState = useState(null),
141
173
  _useState2 = _slicedToArray(_useState, 2),
@@ -152,10 +184,14 @@ var DropdownRender = function DropdownRender(_ref4, externalRef) {
152
184
  onOutsideClick: onRequestClose,
153
185
  ignoreElements: [popperRef, triggerRef]
154
186
  });
187
+ useEscapePress({
188
+ isEnabled: isOpen && closeOnEsc,
189
+ onEscPress: onRequestClose
190
+ });
155
191
 
156
192
  var _useDropdownState = useDropdownState(isOpen, cancelCloseAnimation),
157
193
  _useDropdownState2 = _slicedToArray(_useDropdownState, 2),
158
- handleCloseAnimationEnd = _useDropdownState2[0],
194
+ handleAnimationEnd = _useDropdownState2[0],
159
195
  dropdownState = _useDropdownState2[1];
160
196
 
161
197
  var _usePopper = usePopper(triggerRef, popperRef, getPopperOptions({
@@ -192,7 +228,9 @@ var DropdownRender = function DropdownRender(_ref4, externalRef) {
192
228
  }, trigger);
193
229
  var dropdownShouldBeRendered = dropdownState !== DROPDOWN_STATES.CLOSE;
194
230
  var wrapperShouldBeHidden = dropdownState === DROPDOWN_STATES.CLOSING;
195
- return /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", _objectSpread({
231
+ return /*#__PURE__*/React.createElement(React.Fragment, null, triggerRenderer, dropdownShouldBeRendered && /*#__PURE__*/React.createElement(Portal, {
232
+ target: renderInTrigger ? triggerRef : undefined
233
+ }, /*#__PURE__*/React.createElement("div", _objectSpread({
196
234
  ref: setPopperRef,
197
235
  style: _objectSpread(_objectSpread({
198
236
  maxHeight: maxHeight
@@ -205,11 +243,20 @@ var DropdownRender = function DropdownRender(_ref4, externalRef) {
205
243
  baseLayer: 'dropdown'
206
244
  }, /*#__PURE__*/React.createElement("div", {
207
245
  className: cn(styles.contentWrapper, wrapperShouldBeHidden && styles.wrapperHidden),
208
- onTransitionEnd: handleCloseAnimationEnd,
246
+ onTransitionEnd: handleAnimationEnd,
247
+ onAnimationEnd: handleAnimationEnd,
209
248
  "data-test": "dropdown-content"
210
249
  }, /*#__PURE__*/React.createElement(ThemeProvider, {
211
250
  theme: mode === 'rock' ? getInverseTheme(theme) : theme
212
- }, children))))));
251
+ }, /*#__PURE__*/React.createElement(FocusLock, {
252
+ disabled: dropdownState !== DROPDOWN_STATES.OPEN || disableFocusLock,
253
+ returnFocus: {
254
+ preventScroll: true
255
+ },
256
+ focusOptions: {
257
+ preventScroll: true
258
+ }
259
+ }, children)))))));
213
260
  };
214
261
  /* eslint-enable react/prop-types */
215
262
 
@@ -227,5 +274,4 @@ Dropdown.propTypes = {
227
274
  maxHeight: PropTypes.number,
228
275
  leastMaxHeight: PropTypes.number
229
276
  };
230
- export default Dropdown;
231
- export { Dropdown };
277
+ export { Dropdown, Dropdown as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- @-webkit-keyframes _fadeInTopToBottom_1d6s1c8_1{
1
+ @-webkit-keyframes _fadeInTopToBottom_1mx6xxr_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_1d6s1c8_1{
13
+ @keyframes _fadeInTopToBottom_1mx6xxr_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_1d6s1c8_1{
25
+ @-webkit-keyframes _fadeInBottomToTop_1mx6xxr_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_1d6s1c8_1{
37
+ @keyframes _fadeInBottomToTop_1mx6xxr_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_1d6s1c8_1{
49
+ @-webkit-keyframes _fadeInLeftToRight_1mx6xxr_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_1d6s1c8_1{
61
+ @keyframes _fadeInLeftToRight_1mx6xxr_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_1d6s1c8_1{
73
+ @-webkit-keyframes _fadeInRightToLeft_1mx6xxr_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_1d6s1c8_1{
85
+ @keyframes _fadeInRightToLeft_1mx6xxr_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_1d6s1c8_50{
97
+ ._dropdown_1mx6xxr_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_1d6s1c8_55{
106
+ ._triggerWrapper_1mx6xxr_55{
107
107
  display:inline-block;
108
108
  }
109
- ._contentWrapper_1d6s1c8_59{
109
+ ._contentWrapper_1mx6xxr_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_1d6s1c8_59{
123
- -webkit-animation:_fadeInBottomToTop_1d6s1c8_1 ease 200ms;
124
- animation:_fadeInBottomToTop_1d6s1c8_1 ease 200ms;
122
+ [data-popper-placement^="top" ] ._contentWrapper_1mx6xxr_59{
123
+ -webkit-animation:_fadeInBottomToTop_1mx6xxr_1 ease 200ms;
124
+ animation:_fadeInBottomToTop_1mx6xxr_1 ease 200ms;
125
125
  }
126
- [data-popper-placement^="bottom" ] ._contentWrapper_1d6s1c8_59{
127
- -webkit-animation:_fadeInTopToBottom_1d6s1c8_1 ease 200ms;
128
- animation:_fadeInTopToBottom_1d6s1c8_1 ease 200ms;
126
+ [data-popper-placement^="bottom" ] ._contentWrapper_1mx6xxr_59{
127
+ -webkit-animation:_fadeInTopToBottom_1mx6xxr_1 ease 200ms;
128
+ animation:_fadeInTopToBottom_1mx6xxr_1 ease 200ms;
129
129
  }
130
- [data-popper-placement^="right"] ._contentWrapper_1d6s1c8_59{
131
- -webkit-animation:_fadeInLeftToRight_1d6s1c8_1 ease 200ms;
132
- animation:_fadeInLeftToRight_1d6s1c8_1 ease 200ms;
130
+ [data-popper-placement^="right"] ._contentWrapper_1mx6xxr_59{
131
+ -webkit-animation:_fadeInLeftToRight_1mx6xxr_1 ease 200ms;
132
+ animation:_fadeInLeftToRight_1mx6xxr_1 ease 200ms;
133
133
  }
134
- [data-popper-placement^="left"] ._contentWrapper_1d6s1c8_59{
135
- -webkit-animation:_fadeInRightToLeft_1d6s1c8_1 ease 200ms;
136
- animation:_fadeInRightToLeft_1d6s1c8_1 ease 200ms;
134
+ [data-popper-placement^="left"] ._contentWrapper_1mx6xxr_59{
135
+ -webkit-animation:_fadeInRightToLeft_1mx6xxr_1 ease 200ms;
136
+ animation:_fadeInRightToLeft_1mx6xxr_1 ease 200ms;
137
137
  }
138
- ._wrapperHidden_1d6s1c8_85{
138
+ ._wrapperHidden_1mx6xxr_85{
139
139
  opacity:0;
140
140
  }
141
- [data-popper-placement^="top" ] ._wrapperHidden_1d6s1c8_85{
141
+ [data-popper-placement^="top" ] ._wrapperHidden_1mx6xxr_85{
142
142
  -webkit-transform:translateY(10px);
143
143
  transform:translateY(10px);
144
144
  }
145
- [data-popper-placement^="bottom" ] ._wrapperHidden_1d6s1c8_85{
145
+ [data-popper-placement^="bottom" ] ._wrapperHidden_1mx6xxr_85{
146
146
  -webkit-transform:translateY(-10px);
147
147
  transform:translateY(-10px);
148
148
  }
149
- [data-popper-placement^="right"] ._wrapperHidden_1d6s1c8_85{
149
+ [data-popper-placement^="right"] ._wrapperHidden_1mx6xxr_85{
150
150
  -webkit-transform:translateX(-10px);
151
151
  transform:translateX(-10px);
152
152
  }
153
- [data-popper-placement^="left"] ._wrapperHidden_1d6s1c8_85{
153
+ [data-popper-placement^="left"] ._wrapperHidden_1mx6xxr_85{
154
154
  -webkit-transform:translateX(10px);
155
155
  transform:translateX(10px);
156
156
  }
157
- ._themeLight_1d6s1c8_105 ._contentWrapper_1d6s1c8_59{
157
+ ._themeLight_1mx6xxr_105 ._contentWrapper_1mx6xxr_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_1d6s1c8_105._modeRock_1d6s1c8_110 ._contentWrapper_1d6s1c8_59{
162
+ ._themeLight_1mx6xxr_105._modeRock_1mx6xxr_110 ._contentWrapper_1mx6xxr_59{
163
163
  background-color:#19191C;
164
164
  }
165
- ._themeDark_1d6s1c8_114 ._contentWrapper_1d6s1c8_59{
165
+ ._themeDark_1mx6xxr_114 ._contentWrapper_1mx6xxr_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_1d6s1c8_114._modeRock_1d6s1c8_110 ._contentWrapper_1d6s1c8_59{
170
+ ._themeDark_1mx6xxr_114._modeRock_1mx6xxr_110 ._contentWrapper_1mx6xxr_59{
171
171
  background-color:#FFFFFF;
172
172
  }
173
- ._modeRock_1d6s1c8_110{
173
+ ._modeRock_1mx6xxr_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_1d6s1c8_110 > *{
186
+ ._modeRock_1mx6xxr_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.module.pcss.js CHANGED
@@ -1,14 +1,14 @@
1
1
  var styles = {
2
- "dropdown": "_dropdown_1d6s1c8_50",
3
- "triggerWrapper": "_triggerWrapper_1d6s1c8_55",
4
- "contentWrapper": "_contentWrapper_1d6s1c8_59",
5
- "fadeInBottomToTop": "_fadeInBottomToTop_1d6s1c8_1",
6
- "fadeInTopToBottom": "_fadeInTopToBottom_1d6s1c8_1",
7
- "fadeInLeftToRight": "_fadeInLeftToRight_1d6s1c8_1",
8
- "fadeInRightToLeft": "_fadeInRightToLeft_1d6s1c8_1",
9
- "wrapperHidden": "_wrapperHidden_1d6s1c8_85",
10
- "themeLight": "_themeLight_1d6s1c8_105",
11
- "modeRock": "_modeRock_1d6s1c8_110",
12
- "themeDark": "_themeDark_1d6s1c8_114"
2
+ "dropdown": "_dropdown_1mx6xxr_50",
3
+ "triggerWrapper": "_triggerWrapper_1mx6xxr_55",
4
+ "contentWrapper": "_contentWrapper_1mx6xxr_59",
5
+ "fadeInBottomToTop": "_fadeInBottomToTop_1mx6xxr_1",
6
+ "fadeInTopToBottom": "_fadeInTopToBottom_1mx6xxr_1",
7
+ "fadeInLeftToRight": "_fadeInLeftToRight_1mx6xxr_1",
8
+ "fadeInRightToLeft": "_fadeInRightToLeft_1mx6xxr_1",
9
+ "wrapperHidden": "_wrapperHidden_1mx6xxr_85",
10
+ "themeLight": "_themeLight_1mx6xxr_105",
11
+ "modeRock": "_modeRock_1mx6xxr_110",
12
+ "themeDark": "_themeDark_1mx6xxr_114"
13
13
  };
14
- export default styles;
14
+ export { styles as default };
package/lib/use-dropdown-state.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare enum DROPDOWN_STATES {
2
+ OPENING = "OPENING",
2
3
  OPEN = "OPEN",
3
4
  CLOSING = "CLOSING",
4
5
  CLOSE = "CLOSE"
package/lib/use-dropdown-state.js CHANGED
@@ -3,6 +3,7 @@ import { useState, useRef, useCallback } from 'react';
3
3
  var DROPDOWN_STATES;
4
4
 
5
5
  (function (DROPDOWN_STATES) {
6
+ DROPDOWN_STATES["OPENING"] = "OPENING";
6
7
  DROPDOWN_STATES["OPEN"] = "OPEN";
7
8
  DROPDOWN_STATES["CLOSING"] = "CLOSING";
8
9
  DROPDOWN_STATES["CLOSE"] = "CLOSE";
@@ -14,23 +15,29 @@ function useDropdownState(isOpen, cancelCloseAnimation) {
14
15
  setDummyState = _useState2[1];
15
16
 
16
17
  var stateRef = useRef(DROPDOWN_STATES.CLOSE);
17
- var onCloseAnimationEnd = useCallback(function () {
18
- if (stateRef.current === DROPDOWN_STATES.CLOSING && !isOpen) {
18
+ var onAnimationEnd = useCallback(function () {
19
+ if ((stateRef.current === DROPDOWN_STATES.CLOSING || stateRef.current === DROPDOWN_STATES.OPENING) && !isOpen) {
19
20
  stateRef.current = DROPDOWN_STATES.CLOSE; //force rerender
20
21
 
22
+ setDummyState(function (s) {
23
+ return !s;
24
+ });
25
+ } else if (stateRef.current === DROPDOWN_STATES.OPENING && isOpen) {
26
+ stateRef.current = DROPDOWN_STATES.OPEN; //force rerender
27
+
21
28
  setDummyState(function (s) {
22
29
  return !s;
23
30
  });
24
31
  }
25
32
  }, [isOpen]);
26
33
 
27
- if (isOpen) {
28
- stateRef.current = DROPDOWN_STATES.OPEN;
34
+ if (isOpen && stateRef.current !== DROPDOWN_STATES.OPEN) {
35
+ stateRef.current = DROPDOWN_STATES.OPENING;
29
36
  } else if (stateRef.current === DROPDOWN_STATES.OPEN && !isOpen) {
30
37
  stateRef.current = cancelCloseAnimation ? DROPDOWN_STATES.CLOSE : DROPDOWN_STATES.CLOSING;
31
38
  }
32
39
 
33
- return [onCloseAnimationEnd, stateRef.current];
40
+ return [onAnimationEnd, stateRef.current];
34
41
  }
35
42
 
36
43
  export { DROPDOWN_STATES, useDropdownState };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/dropdown",
3
- "version": "0.2.5",
3
+ "version": "0.3.1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -19,22 +19,23 @@
19
19
  "classnames": "^2.2.6",
20
20
  "core-js": "^3.9.1",
21
21
  "popper-max-size-modifier": "^0.2.0",
22
+ "react-focus-lock": "^2.8.1",
22
23
  "react-popper": "^2.2.5"
23
24
  },
24
25
  "peerDependencies": {
25
- "@rescui/ui-contexts": "<0.3.0",
26
+ "@rescui/ui-contexts": "<0.4.0",
26
27
  "prop-types": "^15.7.2",
27
28
  "react": ">=16.8.0 <18",
28
29
  "react-dom": ">=16.8.0 <18"
29
30
  },
30
31
  "devDependencies": {
31
- "@rescui/colors": "^0.1.0",
32
- "@rescui/scripts": "^0.1.4",
33
- "@rescui/typography": "^0.7.0",
32
+ "@rescui/colors": "^0.1.1",
33
+ "@rescui/scripts": "^0.1.5",
34
+ "@rescui/typography": "^0.7.3",
34
35
  "@rescui/visual-regression": "^0.0.1"
35
36
  },
36
37
  "scripts": {
37
38
  "build": "rescui-scripts build"
38
39
  },
39
- "gitHead": "b9d865165f162732befa0868ea1325d064313d9e"
40
+ "gitHead": "0747cafd54c577bb1658dce2ab5e6900ff0854b6"
40
41
  }