@dreamcommerce/aurora 3.0.0-61 → 3.0.0-62

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/build/cjs/packages/aurora/src/components/sidebar/components/temporal_sidebar.js +28 -7
  2. package/build/cjs/packages/aurora/src/components/sidebar/components/temporal_sidebar.js.map +1 -1
  3. package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.js +29 -8
  4. package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.js.map +1 -1
  5. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/sidebar/components/temporal_sidebar.js CHANGED
@@ -33,17 +33,37 @@ var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function
33
33
  _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
34
34
  containerWidth = _React$useState2[0],
35
35
  setContainerWidth = _React$useState2[1];
36
+ var _React$useState3 = React__default['default'].useState(false),
37
+ _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
38
+ startAnimation = _React$useState4[0],
39
+ setStartAnimation = _React$useState4[1];
40
+ var destroyedRef = React.useRef();
41
+ React.useEffect(function () {
42
+ destroyedRef.current = false;
43
+ }, []);
44
+ React.useLayoutEffect(function () {
45
+ destroyedRef.current = false;
46
+ }, []);
36
47
  use_click_outside.useClickOutside({
37
48
  refs: [sidebarRef],
38
49
  callback: function callback() {
39
50
  if (closeOnOutsideClick && open) close();
40
51
  }
41
52
  });
53
+ React.useLayoutEffect(function () {
54
+ destroyedRef.current = false;
55
+ }, [open]);
42
56
  React.useEffect(function () {
57
+ setStartAnimation(false);
43
58
  if (open) setContainerWidth('auto');
59
+ requestAnimationFrame(function () {
60
+ return setStartAnimation(true);
61
+ });
44
62
  }, [open]);
45
63
  var handleTransitionEnd = function handleTransitionEnd() {
46
64
  if (!open) setContainerWidth('0');
65
+ setStartAnimation(false);
66
+ destroyedRef.current = !open;
47
67
  };
48
68
  React.useEffect(function () {
49
69
  var sidebar = sidebarRef.current;
@@ -55,8 +75,9 @@ var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function
55
75
  React.useImperativeHandle(ref, function () {
56
76
  return sidebarRef.current;
57
77
  });
78
+ if (destroyedRef.current) return null;
58
79
  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default['default'].createElement("div", {
59
- className: cn.cn('aurora-absolute aurora-z-20 aurora-top-0 aurora-h-full aurora-overflow-hidden', {
80
+ className: cn.cn('aurora-absolute aurora-border-danger aurora-z-20 aurora-top-0 aurora-h-full aurora-overflow-hidden', {
60
81
  'aurora-left-0': side === sidebar_constants.SIDEBAR_SIDE.left,
61
82
  'aurora-right-0': side === sidebar_constants.SIDEBAR_SIDE.right
62
83
  }),
@@ -66,14 +87,14 @@ var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function
66
87
  }, TriggerButton ? TriggerButton : null, /*#__PURE__*/React__default['default'].createElement("aside", {
67
88
  ref: sidebarRef,
68
89
  className: cn.cn(' aurora-w-full aurora-h-full aurora-duration-300 aurora-transition-[transform]', {
69
- 'aurora-translate-x-0': open && side === sidebar_constants.SIDEBAR_SIDE.left,
70
- '-aurora-translate-x-full': !open && side === sidebar_constants.SIDEBAR_SIDE.left,
71
- 'aurora-translate-x-full': !open && side === sidebar_constants.SIDEBAR_SIDE.right
90
+ 'aurora-translate-x-0': (open && startAnimation || !open && startAnimation) && side === sidebar_constants.SIDEBAR_SIDE.left,
91
+ '-aurora-translate-x-full': (!open && startAnimation || open && !startAnimation) && side === sidebar_constants.SIDEBAR_SIDE.left,
92
+ 'aurora-translate-x-full': (!open && startAnimation || open && !startAnimation) && side === sidebar_constants.SIDEBAR_SIDE.right
72
93
  }, className),
73
94
  style: {
74
- width: open && width ? width : undefined,
75
- maxWidth: open && width ? width : undefined,
76
- minWidth: open && width ? width : undefined
95
+ width: width,
96
+ maxWidth: width,
97
+ minWidth: width
77
98
  }
78
99
  }, children)), container);
79
100
  });
package/build/cjs/packages/aurora/src/components/sidebar/components/temporal_sidebar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useRef, useEffect, useImperativeHandle } from 'react';
1
+ import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
2
2
  import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import { cn } from '../../../utilities/cn.js';
4
4
  import { SIDEBAR_SIDE } from '../sidebar_constants.js';
@@ -25,17 +25,37 @@ var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
25
25
  _React$useState2 = _slicedToArray(_React$useState, 2),
26
26
  containerWidth = _React$useState2[0],
27
27
  setContainerWidth = _React$useState2[1];
28
+ var _React$useState3 = React.useState(false),
29
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
30
+ startAnimation = _React$useState4[0],
31
+ setStartAnimation = _React$useState4[1];
32
+ var destroyedRef = useRef();
33
+ useEffect(function () {
34
+ destroyedRef.current = false;
35
+ }, []);
36
+ useLayoutEffect(function () {
37
+ destroyedRef.current = false;
38
+ }, []);
28
39
  useClickOutside({
29
40
  refs: [sidebarRef],
30
41
  callback: function callback() {
31
42
  if (closeOnOutsideClick && open) close();
32
43
  }
33
44
  });
45
+ useLayoutEffect(function () {
46
+ destroyedRef.current = false;
47
+ }, [open]);
34
48
  useEffect(function () {
49
+ setStartAnimation(false);
35
50
  if (open) setContainerWidth('auto');
51
+ requestAnimationFrame(function () {
52
+ return setStartAnimation(true);
53
+ });
36
54
  }, [open]);
37
55
  var handleTransitionEnd = function handleTransitionEnd() {
38
56
  if (!open) setContainerWidth('0');
57
+ setStartAnimation(false);
58
+ destroyedRef.current = !open;
39
59
  };
40
60
  useEffect(function () {
41
61
  var sidebar = sidebarRef.current;
@@ -47,8 +67,9 @@ var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
47
67
  useImperativeHandle(ref, function () {
48
68
  return sidebarRef.current;
49
69
  });
70
+ if (destroyedRef.current) return null;
50
71
  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
51
- className: cn('aurora-absolute aurora-z-20 aurora-top-0 aurora-h-full aurora-overflow-hidden', {
72
+ className: cn('aurora-absolute aurora-border-danger aurora-z-20 aurora-top-0 aurora-h-full aurora-overflow-hidden', {
52
73
  'aurora-left-0': side === SIDEBAR_SIDE.left,
53
74
  'aurora-right-0': side === SIDEBAR_SIDE.right
54
75
  }),
@@ -58,14 +79,14 @@ var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
58
79
  }, TriggerButton ? TriggerButton : null, /*#__PURE__*/React.createElement("aside", {
59
80
  ref: sidebarRef,
60
81
  className: cn(' aurora-w-full aurora-h-full aurora-duration-300 aurora-transition-[transform]', {
61
- 'aurora-translate-x-0': open && side === SIDEBAR_SIDE.left,
62
- '-aurora-translate-x-full': !open && side === SIDEBAR_SIDE.left,
63
- 'aurora-translate-x-full': !open && side === SIDEBAR_SIDE.right
82
+ 'aurora-translate-x-0': (open && startAnimation || !open && startAnimation) && side === SIDEBAR_SIDE.left,
83
+ '-aurora-translate-x-full': (!open && startAnimation || open && !startAnimation) && side === SIDEBAR_SIDE.left,
84
+ 'aurora-translate-x-full': (!open && startAnimation || open && !startAnimation) && side === SIDEBAR_SIDE.right
64
85
  }, className),
65
86
  style: {
66
- width: open && width ? width : undefined,
67
- maxWidth: open && width ? width : undefined,
68
- minWidth: open && width ? width : undefined
87
+ width: width,
88
+ maxWidth: width,
89
+ minWidth: width
69
90
  }
70
91
  }, children)), container);
71
92
  });
package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "3.0.0-61",
5
+ "version": "3.0.0-62",
6
6
  "description": "aurora",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",