baseui 0.0.0-next-ea133a6 → 0.0.0-next-45f17dc

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 (14) hide show
  1. package/es/popover/popover.js +2 -1
  2. package/es/popover/stateful-container.js +2 -0
  3. package/es/popover/styled-components.js +2 -1
  4. package/esm/popover/popover.js +2 -1
  5. package/esm/popover/stateful-container.js +2 -0
  6. package/esm/popover/styled-components.js +3 -2
  7. package/package.json +1 -1
  8. package/popover/popover.js +2 -1
  9. package/popover/popover.js.flow +2 -1
  10. package/popover/stateful-container.js +2 -0
  11. package/popover/stateful-container.js.flow +2 -0
  12. package/popover/styled-components.js +3 -2
  13. package/popover/styled-components.js.flow +2 -1
  14. package/popover/types.js.flow +1 -0
package/es/popover/popover.js CHANGED
@@ -338,6 +338,7 @@ class PopoverInner extends React.Component {
338
338
  $popoverOffset: popoverOffset,
339
339
  $placement: placement,
340
340
  $isAnimating: isAnimating,
341
+ $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
341
342
  $isOpen: isOpen,
342
343
  $popoverMargin: popoverMargin,
343
344
  $isHoverTrigger: this.isHoverTrigger()
@@ -408,7 +409,7 @@ class PopoverInner extends React.Component {
408
409
  }
409
410
 
410
411
  render() {
411
- const mountedAndOpen = this.state.isMounted && this.props.isOpen;
412
+ const mountedAndOpen = this.state.isMounted && (this.props.isOpen || this.state.isAnimating);
412
413
  const rendered = [this.renderAnchor()];
413
414
  const renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
414
415
  const defaultPopperOptions = {
package/es/popover/stateful-container.js CHANGED
@@ -143,6 +143,7 @@ class StatefulContainer extends React.Component {
143
143
  const {
144
144
  accessibilityType,
145
145
  autoFocus,
146
+ animateOutTime,
146
147
  dismissOnClickOutside,
147
148
  dismissOnEsc,
148
149
  focusLock,
@@ -167,6 +168,7 @@ class StatefulContainer extends React.Component {
167
168
  } = this.props;
168
169
  const popoverProps = {
169
170
  accessibilityType,
171
+ animateOutTime,
170
172
  autoFocus,
171
173
  content: this.renderContent,
172
174
  focusLock,
package/es/popover/styled-components.js CHANGED
@@ -13,6 +13,7 @@ import { getPopoverMarginStyles, getArrowPositionStyles, getStartPosition, getEn
13
13
  */
14
14
  export function getBodyStyles(props) {
15
15
  const {
16
+ $animationDuration,
16
17
  $isOpen,
17
18
  $isAnimating,
18
19
  $placement,
@@ -33,7 +34,7 @@ export function getBodyStyles(props) {
33
34
  borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
34
35
  boxShadow: $theme.lighting.shadow600,
35
36
  transitionProperty: 'opacity,transform',
36
- transitionDuration: $isAnimating ? '0.1s' : '0s',
37
+ transitionDuration: $isAnimating ? $isOpen ? '0.1s' : `${$animationDuration}ms` : '0s',
37
38
  transitionTimingFunction: $isOpen ? $theme.animation.easeOutCurve : $theme.animation.easeInCurve,
38
39
  opacity: $isAnimating && $isOpen ? 1 : 0,
39
40
  transform: $isAnimating && $isOpen ? getEndPosition($popoverOffset) : getStartPosition($popoverOffset, $placement, $showArrow ? ARROW_SIZE : 0, $popoverMargin),
package/esm/popover/popover.js CHANGED
@@ -398,6 +398,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
398
398
  $popoverOffset: popoverOffset,
399
399
  $placement: placement,
400
400
  $isAnimating: isAnimating,
401
+ $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
401
402
  $isOpen: isOpen,
402
403
  $popoverMargin: popoverMargin,
403
404
  $isHoverTrigger: this.isHoverTrigger()
@@ -469,7 +470,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
469
470
  value: function render() {
470
471
  var _this4 = this;
471
472
 
472
- var mountedAndOpen = this.state.isMounted && this.props.isOpen;
473
+ var mountedAndOpen = this.state.isMounted && (this.props.isOpen || this.state.isAnimating);
473
474
  var rendered = [this.renderAnchor()];
474
475
  var renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
475
476
  var defaultPopperOptions = {
package/esm/popover/stateful-container.js CHANGED
@@ -187,6 +187,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
187
187
  var _this$props = this.props,
188
188
  accessibilityType = _this$props.accessibilityType,
189
189
  autoFocus = _this$props.autoFocus,
190
+ animateOutTime = _this$props.animateOutTime,
190
191
  dismissOnClickOutside = _this$props.dismissOnClickOutside,
191
192
  dismissOnEsc = _this$props.dismissOnEsc,
192
193
  focusLock = _this$props.focusLock,
@@ -210,6 +211,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
210
211
  focusOptions = _this$props.focusOptions;
211
212
  var popoverProps = {
212
213
  accessibilityType: accessibilityType,
214
+ animateOutTime: animateOutTime,
213
215
  autoFocus: autoFocus,
214
216
  content: this.renderContent,
215
217
  focusLock: focusLock,
package/esm/popover/styled-components.js CHANGED
@@ -18,7 +18,8 @@ import { getPopoverMarginStyles, getArrowPositionStyles, getStartPosition, getEn
18
18
  * Main popover container element that gets positioned next to the anchor
19
19
  */
20
20
  export function getBodyStyles(props) {
21
- var $isOpen = props.$isOpen,
21
+ var $animationDuration = props.$animationDuration,
22
+ $isOpen = props.$isOpen,
22
23
  $isAnimating = props.$isAnimating,
23
24
  $placement = props.$placement,
24
25
  $popoverOffset = props.$popoverOffset,
@@ -37,7 +38,7 @@ export function getBodyStyles(props) {
37
38
  borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
38
39
  boxShadow: $theme.lighting.shadow600,
39
40
  transitionProperty: 'opacity,transform',
40
- transitionDuration: $isAnimating ? '0.1s' : '0s',
41
+ transitionDuration: $isAnimating ? $isOpen ? '0.1s' : "".concat($animationDuration, "ms") : '0s',
41
42
  transitionTimingFunction: $isOpen ? $theme.animation.easeOutCurve : $theme.animation.easeInCurve,
42
43
  opacity: $isAnimating && $isOpen ? 1 : 0,
43
44
  transform: $isAnimating && $isOpen ? getEndPosition($popoverOffset) : getStartPosition($popoverOffset, $placement, $showArrow ? ARROW_SIZE : 0, $popoverMargin)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "0.0.0-next-ea133a6",
3
+ "version": "0.0.0-next-45f17dc",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",
package/popover/popover.js CHANGED
@@ -413,6 +413,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
413
413
  $popoverOffset: popoverOffset,
414
414
  $placement: placement,
415
415
  $isAnimating: isAnimating,
416
+ $animationDuration: this.props.animateOutTime || _constants.ANIMATE_OUT_TIME,
416
417
  $isOpen: isOpen,
417
418
  $popoverMargin: popoverMargin,
418
419
  $isHoverTrigger: this.isHoverTrigger()
@@ -488,7 +489,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
488
489
  value: function render() {
489
490
  var _this4 = this;
490
491
 
491
- var mountedAndOpen = this.state.isMounted && this.props.isOpen;
492
+ var mountedAndOpen = this.state.isMounted && (this.props.isOpen || this.state.isAnimating);
492
493
  var rendered = [this.renderAnchor()];
493
494
  var renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
494
495
  var defaultPopperOptions = {
package/popover/popover.js.flow CHANGED
@@ -345,6 +345,7 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
345
345
  $popoverOffset: popoverOffset,
346
346
  $placement: placement,
347
347
  $isAnimating: isAnimating,
348
+ $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
348
349
  $isOpen: isOpen,
349
350
  $popoverMargin: popoverMargin,
350
351
  $isHoverTrigger: this.isHoverTrigger(),
@@ -420,7 +421,7 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
420
421
  }
421
422
 
422
423
  render() {
423
- const mountedAndOpen = this.state.isMounted && this.props.isOpen;
424
+ const mountedAndOpen = this.state.isMounted && (this.props.isOpen || this.state.isAnimating);
424
425
  const rendered = [this.renderAnchor()];
425
426
  const renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
426
427
 
package/popover/stateful-container.js CHANGED
@@ -193,6 +193,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
193
193
  var _this$props = this.props,
194
194
  accessibilityType = _this$props.accessibilityType,
195
195
  autoFocus = _this$props.autoFocus,
196
+ animateOutTime = _this$props.animateOutTime,
196
197
  dismissOnClickOutside = _this$props.dismissOnClickOutside,
197
198
  dismissOnEsc = _this$props.dismissOnEsc,
198
199
  focusLock = _this$props.focusLock,
@@ -216,6 +217,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
216
217
  focusOptions = _this$props.focusOptions;
217
218
  var popoverProps = {
218
219
  accessibilityType: accessibilityType,
220
+ animateOutTime: animateOutTime,
219
221
  autoFocus: autoFocus,
220
222
  content: this.renderContent,
221
223
  focusLock: focusLock,
package/popover/stateful-container.js.flow CHANGED
@@ -148,6 +148,7 @@ class StatefulContainer extends React.Component<StatefulPopoverContainerPropsT,
148
148
  const {
149
149
  accessibilityType,
150
150
  autoFocus,
151
+ animateOutTime,
151
152
  dismissOnClickOutside,
152
153
  dismissOnEsc,
153
154
  focusLock,
@@ -173,6 +174,7 @@ class StatefulContainer extends React.Component<StatefulPopoverContainerPropsT,
173
174
 
174
175
  const popoverProps: PopoverPropsWithoutChildrenT = {
175
176
  accessibilityType,
177
+ animateOutTime,
176
178
  autoFocus,
177
179
  content: this.renderContent,
178
180
  focusLock,
package/popover/styled-components.js CHANGED
@@ -24,7 +24,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
24
24
  * Main popover container element that gets positioned next to the anchor
25
25
  */
26
26
  function getBodyStyles(props) {
27
- var $isOpen = props.$isOpen,
27
+ var $animationDuration = props.$animationDuration,
28
+ $isOpen = props.$isOpen,
28
29
  $isAnimating = props.$isAnimating,
29
30
  $placement = props.$placement,
30
31
  $popoverOffset = props.$popoverOffset,
@@ -43,7 +44,7 @@ function getBodyStyles(props) {
43
44
  borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
44
45
  boxShadow: $theme.lighting.shadow600,
45
46
  transitionProperty: 'opacity,transform',
46
- transitionDuration: $isAnimating ? '0.1s' : '0s',
47
+ transitionDuration: $isAnimating ? $isOpen ? '0.1s' : "".concat($animationDuration, "ms") : '0s',
47
48
  transitionTimingFunction: $isOpen ? $theme.animation.easeOutCurve : $theme.animation.easeInCurve,
48
49
  opacity: $isAnimating && $isOpen ? 1 : 0,
49
50
  transform: $isAnimating && $isOpen ? (0, _utils.getEndPosition)($popoverOffset) : (0, _utils.getStartPosition)($popoverOffset, $placement, $showArrow ? _constants.ARROW_SIZE : 0, $popoverMargin)
package/popover/styled-components.js.flow CHANGED
@@ -21,6 +21,7 @@ import type { ThemeT } from '../styles/types.js';
21
21
  */
22
22
  export function getBodyStyles(props: BodyStylePropsArgT & { $theme: ThemeT }) {
23
23
  const {
24
+ $animationDuration,
24
25
  $isOpen,
25
26
  $isAnimating,
26
27
  $placement,
@@ -42,7 +43,7 @@ export function getBodyStyles(props: BodyStylePropsArgT & { $theme: ThemeT }) {
42
43
  borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
43
44
  boxShadow: $theme.lighting.shadow600,
44
45
  transitionProperty: 'opacity,transform',
45
- transitionDuration: $isAnimating ? '0.1s' : '0s',
46
+ transitionDuration: $isAnimating ? ($isOpen ? '0.1s' : `${$animationDuration}ms`) : '0s',
46
47
  transitionTimingFunction: $isOpen
47
48
  ? $theme.animation.easeOutCurve
48
49
  : $theme.animation.easeInCurve,
package/popover/types.js.flow CHANGED
@@ -175,6 +175,7 @@ export type ArrowStylePropsArgT = {
175
175
  };
176
176
 
177
177
  export type BodyStylePropsArgT = {
178
+ $animationDuration: number,
178
179
  $isAnimating: boolean,
179
180
  $isHoverTrigger: boolean,
180
181
  $isOpen: boolean,