@dreamcommerce/aurora 3.0.0-242 → 3.0.0-244

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 (9) hide show
  1. package/build/cjs/packages/aurora/src/components/modal/components/modal/modal.js +95 -77
  2. package/build/cjs/packages/aurora/src/components/modal/components/modal/modal.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/hooks/use_click_outside.js +6 -1
  4. package/build/cjs/packages/aurora/src/hooks/use_click_outside.js.map +1 -1
  5. package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js +96 -78
  6. package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js.map +1 -1
  7. package/build/esm/packages/aurora/src/hooks/use_click_outside.js +6 -1
  8. package/build/esm/packages/aurora/src/hooks/use_click_outside.js.map +1 -1
  9. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/modal/components/modal/modal.js CHANGED
@@ -46,6 +46,10 @@ var Modal = function Modal(_ref) {
46
46
  _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
47
47
  hasScroll = _useState6[0],
48
48
  setHasScroll = _useState6[1];
49
+ var scrollTimeoutRef = React.useRef();
50
+ var contentRef = React.useRef(null);
51
+ var modalRef = React.useRef(null);
52
+ var isInitializedRef = React.useRef(false);
49
53
  var _useModalsContext = use_modals_context.useModalsContext(),
50
54
  modalsManagerContainerSelector = _useModalsContext.modalsManagerContainerSelector,
51
55
  addModal = _useModalsContext.addModal,
@@ -54,99 +58,110 @@ var Modal = function Modal(_ref) {
54
58
  showModal = _useModalsContext.showModal,
55
59
  hideAllModals = _useModalsContext.hideAllModals;
56
60
  var $modalsManagerContainer = document.querySelector(modalsManagerContainerSelector);
57
- var modalRef = /*#__PURE__*/React__default['default'].createRef();
58
- var contentRef = React__default['default'].useRef(null);
59
61
  var modal = getModal(name);
60
62
  var _useState7 = React.useState(false),
61
63
  _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
62
64
  renderModal = _useState8[0],
63
65
  setRenderModal = _useState8[1];
64
- var closeModal = function closeModal() {
66
+ var closeModal = React.useCallback(function () {
65
67
  hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
66
- };
67
- var handleScroll = function handleScroll() {
68
- if (contentRef.current) {
69
- var _contentRef$current = contentRef.current,
70
- scrollTop = _contentRef$current.scrollTop,
71
- scrollHeight = _contentRef$current.scrollHeight,
72
- clientHeight = _contentRef$current.clientHeight;
73
- var atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 2;
74
- setIsScrolledToBottom(atBottom);
75
- setHasScroll(scrollHeight > clientHeight);
76
- }
77
- };
78
- var setContentRef = function setContentRef(el) {
79
- if (el) {
80
- contentRef.current = el;
81
- handleScroll();
82
- el.addEventListener('scroll', handleScroll);
68
+ }, [hideAllModalsOnClose, hideAllModals, hideModal, name, onCloseAction]);
69
+ var checkScroll = React.useCallback(function () {
70
+ var contentElement = contentRef.current;
71
+ if (!contentElement) return;
72
+ var scrollTop = contentElement.scrollTop,
73
+ scrollHeight = contentElement.scrollHeight,
74
+ clientHeight = contentElement.clientHeight;
75
+ var atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 5;
76
+ var hasScrollableContent = scrollHeight > clientHeight;
77
+ setIsScrolledToBottom(atBottom);
78
+ setHasScroll(hasScrollableContent);
79
+ }, []);
80
+ var handleScroll = React.useCallback(function () {
81
+ if (scrollTimeoutRef.current) {
82
+ clearTimeout(scrollTimeoutRef.current);
83
83
  }
84
- };
84
+ scrollTimeoutRef.current = setTimeout(checkScroll, 50);
85
+ }, [checkScroll]);
86
+ // Handle scroll detection and modal state
85
87
  React.useEffect(function () {
86
- if (contentRef.current) {
87
- handleScroll();
88
- }
88
+ if (!renderModal || !visibleClass) return;
89
+ var contentElement = contentRef.current;
90
+ if (!contentElement) return;
91
+ checkScroll();
92
+ contentElement.addEventListener('scroll', handleScroll);
93
+ var resizeObserver = new ResizeObserver(checkScroll);
94
+ resizeObserver.observe(contentElement);
89
95
  return function () {
90
- var _contentRef$current2;
91
- (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.removeEventListener('scroll', handleScroll);
92
- };
93
- }, [renderModal]);
94
- use_click_outside.useClickOutside({
95
- refs: [modalRef],
96
- callback: function callback() {
97
- if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === modal_constants.MODAL_VISIBILITY_STATE.visible) hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
98
- },
99
- config: {
100
- shouldTrigger: function shouldTrigger() {
101
- return closeOnOutsideClick;
96
+ contentElement.removeEventListener('scroll', handleScroll);
97
+ resizeObserver.disconnect();
98
+ if (scrollTimeoutRef.current) {
99
+ clearTimeout(scrollTimeoutRef.current);
102
100
  }
103
- }
104
- });
101
+ };
102
+ }, [renderModal, visibleClass, handleScroll, checkScroll]);
103
+ // Initial setup
105
104
  React.useEffect(function () {
106
- addModal({
107
- name: name,
108
- visibilityState: modal_constants.MODAL_VISIBILITY_STATE.none,
109
- width: width
110
- });
111
- if (initiallyVisible) showModal(name);
105
+ if (!isInitializedRef.current) {
106
+ addModal({
107
+ name: name,
108
+ visibilityState: modal_constants.MODAL_VISIBILITY_STATE.none,
109
+ width: width
110
+ });
111
+ if (initiallyVisible) showModal(name);
112
+ isInitializedRef.current = true;
113
+ }
112
114
  return function () {
113
- closeModal();
115
+ return closeModal();
114
116
  };
115
117
  }, []);
118
+ // Handle visibility changes
116
119
  React.useEffect(function () {
117
- var showModalTimeout;
118
- var hideModalTimeout;
119
- if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === modal_constants.MODAL_VISIBILITY_STATE.visible) {
120
- setRenderModal(true);
121
- showModalTimeout = setTimeout(function () {
122
- setVisibleClass(true);
123
- }, modal_constants.MODAL_SLIDE_FADE_DURATION);
124
- }
125
- if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === modal_constants.MODAL_VISIBILITY_STATE.hidden) {
126
- setVisibleClass(false);
127
- }
128
- if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === modal_constants.MODAL_VISIBILITY_STATE.none) {
129
- setVisibleClass(false);
130
- hideModalTimeout = setTimeout(function () {
131
- setRenderModal(false);
132
- }, modal_constants.MODAL_SLIDE_FADE_DURATION);
120
+ var timeoutId;
121
+ switch (modal === null || modal === void 0 ? void 0 : modal.visibilityState) {
122
+ case modal_constants.MODAL_VISIBILITY_STATE.visible:
123
+ setRenderModal(true);
124
+ timeoutId = setTimeout(function () {
125
+ return setVisibleClass(true);
126
+ }, modal_constants.MODAL_SLIDE_FADE_DURATION);
127
+ break;
128
+ case modal_constants.MODAL_VISIBILITY_STATE.hidden:
129
+ setVisibleClass(false);
130
+ break;
131
+ case modal_constants.MODAL_VISIBILITY_STATE.none:
132
+ setVisibleClass(false);
133
+ timeoutId = setTimeout(function () {
134
+ return setRenderModal(false);
135
+ }, modal_constants.MODAL_SLIDE_FADE_DURATION);
136
+ break;
133
137
  }
134
138
  return function () {
135
- clearTimeout(showModalTimeout);
136
- clearTimeout(hideModalTimeout);
137
- };
138
- }, [modal]);
139
- React.useEffect(function () {
140
- var handleKeyDown = function handleKeyDown(event) {
141
- if (event.key === 'Escape' && closeOnEscButton) {
142
- closeModal();
139
+ if (timeoutId) {
140
+ clearTimeout(timeoutId);
143
141
  }
144
142
  };
143
+ }, [modal === null || modal === void 0 ? void 0 : modal.visibilityState]);
144
+ // Handle keyboard events
145
+ var handleKeyDown = React.useCallback(function (event) {
146
+ if (event.key === 'Escape' && closeOnEscButton) {
147
+ closeModal();
148
+ }
149
+ }, [closeOnEscButton, closeModal]);
150
+ React.useEffect(function () {
145
151
  document.addEventListener('keydown', handleKeyDown);
146
152
  return function () {
147
- document.removeEventListener('keydown', handleKeyDown);
153
+ return document.removeEventListener('keydown', handleKeyDown);
148
154
  };
149
- }, []);
155
+ }, [handleKeyDown]);
156
+ // Handle outside click
157
+ use_click_outside.useClickOutside({
158
+ refs: [modalRef],
159
+ callback: function callback() {
160
+ if (closeOnOutsideClick && (modal === null || modal === void 0 ? void 0 : modal.visibilityState) === modal_constants.MODAL_VISIBILITY_STATE.visible) {
161
+ closeModal();
162
+ }
163
+ }
164
+ });
150
165
  if (!$modalsManagerContainer) return null;
151
166
  return renderModal ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default['default'].createElement("div", {
152
167
  ref: modalRef,
@@ -155,19 +170,22 @@ var Modal = function Modal(_ref) {
155
170
  className: cn.cn(modal_variants.modalVariants({
156
171
  width: width
157
172
  }), visibleClass ? 'aurora-opacity-100 aurora-animate-modal-slide-in' : 'aurora-opacity-0 aurora-animate-modal-slide-out')
158
- }, header ? (/*#__PURE__*/React__default['default'].createElement(modal_header.ModalHeader, {
173
+ }, header && (/*#__PURE__*/React__default['default'].createElement(modal_header.ModalHeader, {
159
174
  hasCloseIcon: modal_utils.ModalUtils.isHeaderObject(header) ? (_header$hasCloseIcon = header.hasCloseIcon) !== null && _header$hasCloseIcon !== void 0 ? _header$hasCloseIcon : true : true,
160
175
  onClose: closeModal
161
- }, modal_utils.ModalUtils.isHeaderObject(header) ? header.content : header)) : null, children && (/*#__PURE__*/React__default['default'].createElement("div", {
162
- ref: setContentRef,
176
+ }, modal_utils.ModalUtils.isHeaderObject(header) ? header.content : header)), children && (/*#__PURE__*/React__default['default'].createElement("div", {
177
+ ref: contentRef,
163
178
  className: cn.cn("aurora-overflow-y-auto custom-scrollbar first:aurora-mt-6 last:aurora-mb-6 aurora-px-6", {
164
179
  'aurora-pb-6': footer && hasScroll
165
- })
166
- }, children)), footer ? (/*#__PURE__*/React__default['default'].createElement(modal_footer.ModalFooter, {
180
+ }),
181
+ style: {
182
+ maxHeight: 'calc(100vh - 200px)'
183
+ }
184
+ }, children)), footer && (/*#__PURE__*/React__default['default'].createElement(modal_footer.ModalFooter, {
167
185
  className: cn.cn('', {
168
186
  'aurora-border-t': hasScroll && !isScrolledToBottom
169
187
  })
170
- }, footer)) : null), $modalsManagerContainer) : null;
188
+ }, footer))), $modalsManagerContainer) : null;
171
189
  };
172
190
 
173
191
  exports.Modal = Modal;
package/build/cjs/packages/aurora/src/components/modal/components/modal/modal.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;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;"}
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;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/cjs/packages/aurora/src/hooks/use_click_outside.js CHANGED
@@ -14,8 +14,13 @@ function useClickOutside(_ref) {
14
14
  _ref2$blackListSelect = _ref2.blackListSelectors,
15
15
  blackListSelectors = _ref2$blackListSelect === void 0 ? [] : _ref2$blackListSelect,
16
16
  _ref2$eventName = _ref2.eventName,
17
- eventName = _ref2$eventName === void 0 ? 'click' : _ref2$eventName;
17
+ eventName = _ref2$eventName === void 0 ? 'mousedown' : _ref2$eventName;
18
18
  function handleClickOutside(event) {
19
+ // Don't trigger if text is being selected
20
+ var selection = window.getSelection();
21
+ if (selection && selection.toString().length > 0) {
22
+ return;
23
+ }
19
24
  var isBlacklisted = blackListSelectors.reduce(function test(acc, blackListSelector) {
20
25
  var $el = documents.reduce(function test(acc, doc) {
21
26
  return acc || doc.querySelector(blackListSelector);
package/build/cjs/packages/aurora/src/hooks/use_click_outside.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;"}
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;"}
package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState, useRef, useCallback, useEffect } from 'react';
2
2
  import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import { cn } from '../../../../utilities/cn.js';
4
4
  import { useClickOutside } from '../../../../hooks/use_click_outside.js';
@@ -38,6 +38,10 @@ var Modal = function Modal(_ref) {
38
38
  _useState6 = _slicedToArray(_useState5, 2),
39
39
  hasScroll = _useState6[0],
40
40
  setHasScroll = _useState6[1];
41
+ var scrollTimeoutRef = useRef();
42
+ var contentRef = useRef(null);
43
+ var modalRef = useRef(null);
44
+ var isInitializedRef = useRef(false);
41
45
  var _useModalsContext = useModalsContext(),
42
46
  modalsManagerContainerSelector = _useModalsContext.modalsManagerContainerSelector,
43
47
  addModal = _useModalsContext.addModal,
@@ -46,99 +50,110 @@ var Modal = function Modal(_ref) {
46
50
  showModal = _useModalsContext.showModal,
47
51
  hideAllModals = _useModalsContext.hideAllModals;
48
52
  var $modalsManagerContainer = document.querySelector(modalsManagerContainerSelector);
49
- var modalRef = /*#__PURE__*/React.createRef();
50
- var contentRef = React.useRef(null);
51
53
  var modal = getModal(name);
52
54
  var _useState7 = useState(false),
53
55
  _useState8 = _slicedToArray(_useState7, 2),
54
56
  renderModal = _useState8[0],
55
57
  setRenderModal = _useState8[1];
56
- var closeModal = function closeModal() {
58
+ var closeModal = useCallback(function () {
57
59
  hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
58
- };
59
- var handleScroll = function handleScroll() {
60
- if (contentRef.current) {
61
- var _contentRef$current = contentRef.current,
62
- scrollTop = _contentRef$current.scrollTop,
63
- scrollHeight = _contentRef$current.scrollHeight,
64
- clientHeight = _contentRef$current.clientHeight;
65
- var atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 2;
66
- setIsScrolledToBottom(atBottom);
67
- setHasScroll(scrollHeight > clientHeight);
68
- }
69
- };
70
- var setContentRef = function setContentRef(el) {
71
- if (el) {
72
- contentRef.current = el;
73
- handleScroll();
74
- el.addEventListener('scroll', handleScroll);
60
+ }, [hideAllModalsOnClose, hideAllModals, hideModal, name, onCloseAction]);
61
+ var checkScroll = useCallback(function () {
62
+ var contentElement = contentRef.current;
63
+ if (!contentElement) return;
64
+ var scrollTop = contentElement.scrollTop,
65
+ scrollHeight = contentElement.scrollHeight,
66
+ clientHeight = contentElement.clientHeight;
67
+ var atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 5;
68
+ var hasScrollableContent = scrollHeight > clientHeight;
69
+ setIsScrolledToBottom(atBottom);
70
+ setHasScroll(hasScrollableContent);
71
+ }, []);
72
+ var handleScroll = useCallback(function () {
73
+ if (scrollTimeoutRef.current) {
74
+ clearTimeout(scrollTimeoutRef.current);
75
75
  }
76
- };
76
+ scrollTimeoutRef.current = setTimeout(checkScroll, 50);
77
+ }, [checkScroll]);
78
+ // Handle scroll detection and modal state
77
79
  useEffect(function () {
78
- if (contentRef.current) {
79
- handleScroll();
80
- }
80
+ if (!renderModal || !visibleClass) return;
81
+ var contentElement = contentRef.current;
82
+ if (!contentElement) return;
83
+ checkScroll();
84
+ contentElement.addEventListener('scroll', handleScroll);
85
+ var resizeObserver = new ResizeObserver(checkScroll);
86
+ resizeObserver.observe(contentElement);
81
87
  return function () {
82
- var _contentRef$current2;
83
- (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.removeEventListener('scroll', handleScroll);
84
- };
85
- }, [renderModal]);
86
- useClickOutside({
87
- refs: [modalRef],
88
- callback: function callback() {
89
- if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
90
- },
91
- config: {
92
- shouldTrigger: function shouldTrigger() {
93
- return closeOnOutsideClick;
88
+ contentElement.removeEventListener('scroll', handleScroll);
89
+ resizeObserver.disconnect();
90
+ if (scrollTimeoutRef.current) {
91
+ clearTimeout(scrollTimeoutRef.current);
94
92
  }
95
- }
96
- });
93
+ };
94
+ }, [renderModal, visibleClass, handleScroll, checkScroll]);
95
+ // Initial setup
97
96
  useEffect(function () {
98
- addModal({
99
- name: name,
100
- visibilityState: MODAL_VISIBILITY_STATE.none,
101
- width: width
102
- });
103
- if (initiallyVisible) showModal(name);
97
+ if (!isInitializedRef.current) {
98
+ addModal({
99
+ name: name,
100
+ visibilityState: MODAL_VISIBILITY_STATE.none,
101
+ width: width
102
+ });
103
+ if (initiallyVisible) showModal(name);
104
+ isInitializedRef.current = true;
105
+ }
104
106
  return function () {
105
- closeModal();
107
+ return closeModal();
106
108
  };
107
109
  }, []);
110
+ // Handle visibility changes
108
111
  useEffect(function () {
109
- var showModalTimeout;
110
- var hideModalTimeout;
111
- if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) {
112
- setRenderModal(true);
113
- showModalTimeout = setTimeout(function () {
114
- setVisibleClass(true);
115
- }, MODAL_SLIDE_FADE_DURATION);
116
- }
117
- if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.hidden) {
118
- setVisibleClass(false);
119
- }
120
- if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.none) {
121
- setVisibleClass(false);
122
- hideModalTimeout = setTimeout(function () {
123
- setRenderModal(false);
124
- }, MODAL_SLIDE_FADE_DURATION);
112
+ var timeoutId;
113
+ switch (modal === null || modal === void 0 ? void 0 : modal.visibilityState) {
114
+ case MODAL_VISIBILITY_STATE.visible:
115
+ setRenderModal(true);
116
+ timeoutId = setTimeout(function () {
117
+ return setVisibleClass(true);
118
+ }, MODAL_SLIDE_FADE_DURATION);
119
+ break;
120
+ case MODAL_VISIBILITY_STATE.hidden:
121
+ setVisibleClass(false);
122
+ break;
123
+ case MODAL_VISIBILITY_STATE.none:
124
+ setVisibleClass(false);
125
+ timeoutId = setTimeout(function () {
126
+ return setRenderModal(false);
127
+ }, MODAL_SLIDE_FADE_DURATION);
128
+ break;
125
129
  }
126
130
  return function () {
127
- clearTimeout(showModalTimeout);
128
- clearTimeout(hideModalTimeout);
129
- };
130
- }, [modal]);
131
- useEffect(function () {
132
- var handleKeyDown = function handleKeyDown(event) {
133
- if (event.key === 'Escape' && closeOnEscButton) {
134
- closeModal();
131
+ if (timeoutId) {
132
+ clearTimeout(timeoutId);
135
133
  }
136
134
  };
135
+ }, [modal === null || modal === void 0 ? void 0 : modal.visibilityState]);
136
+ // Handle keyboard events
137
+ var handleKeyDown = useCallback(function (event) {
138
+ if (event.key === 'Escape' && closeOnEscButton) {
139
+ closeModal();
140
+ }
141
+ }, [closeOnEscButton, closeModal]);
142
+ useEffect(function () {
137
143
  document.addEventListener('keydown', handleKeyDown);
138
144
  return function () {
139
- document.removeEventListener('keydown', handleKeyDown);
145
+ return document.removeEventListener('keydown', handleKeyDown);
140
146
  };
141
- }, []);
147
+ }, [handleKeyDown]);
148
+ // Handle outside click
149
+ useClickOutside({
150
+ refs: [modalRef],
151
+ callback: function callback() {
152
+ if (closeOnOutsideClick && (modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) {
153
+ closeModal();
154
+ }
155
+ }
156
+ });
142
157
  if (!$modalsManagerContainer) return null;
143
158
  return renderModal ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
144
159
  ref: modalRef,
@@ -147,19 +162,22 @@ var Modal = function Modal(_ref) {
147
162
  className: cn(modalVariants({
148
163
  width: width
149
164
  }), visibleClass ? 'aurora-opacity-100 aurora-animate-modal-slide-in' : 'aurora-opacity-0 aurora-animate-modal-slide-out')
150
- }, header ? (/*#__PURE__*/React.createElement(ModalHeader, {
165
+ }, header && (/*#__PURE__*/React.createElement(ModalHeader, {
151
166
  hasCloseIcon: ModalUtils.isHeaderObject(header) ? (_header$hasCloseIcon = header.hasCloseIcon) !== null && _header$hasCloseIcon !== void 0 ? _header$hasCloseIcon : true : true,
152
167
  onClose: closeModal
153
- }, ModalUtils.isHeaderObject(header) ? header.content : header)) : null, children && (/*#__PURE__*/React.createElement("div", {
154
- ref: setContentRef,
168
+ }, ModalUtils.isHeaderObject(header) ? header.content : header)), children && (/*#__PURE__*/React.createElement("div", {
169
+ ref: contentRef,
155
170
  className: cn("aurora-overflow-y-auto custom-scrollbar first:aurora-mt-6 last:aurora-mb-6 aurora-px-6", {
156
171
  'aurora-pb-6': footer && hasScroll
157
- })
158
- }, children)), footer ? (/*#__PURE__*/React.createElement(ModalFooter, {
172
+ }),
173
+ style: {
174
+ maxHeight: 'calc(100vh - 200px)'
175
+ }
176
+ }, children)), footer && (/*#__PURE__*/React.createElement(ModalFooter, {
159
177
  className: cn('', {
160
178
  'aurora-border-t': hasScroll && !isScrolledToBottom
161
179
  })
162
- }, footer)) : null), $modalsManagerContainer) : null;
180
+ }, footer))), $modalsManagerContainer) : null;
163
181
  };
164
182
 
165
183
  export { Modal };
package/build/esm/packages/aurora/src/components/modal/components/modal/modal.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;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;"}
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;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/hooks/use_click_outside.js CHANGED
@@ -10,8 +10,13 @@ function useClickOutside(_ref) {
10
10
  _ref2$blackListSelect = _ref2.blackListSelectors,
11
11
  blackListSelectors = _ref2$blackListSelect === void 0 ? [] : _ref2$blackListSelect,
12
12
  _ref2$eventName = _ref2.eventName,
13
- eventName = _ref2$eventName === void 0 ? 'click' : _ref2$eventName;
13
+ eventName = _ref2$eventName === void 0 ? 'mousedown' : _ref2$eventName;
14
14
  function handleClickOutside(event) {
15
+ // Don't trigger if text is being selected
16
+ var selection = window.getSelection();
17
+ if (selection && selection.toString().length > 0) {
18
+ return;
19
+ }
15
20
  var isBlacklisted = blackListSelectors.reduce(function test(acc, blackListSelector) {
16
21
  var $el = documents.reduce(function test(acc, doc) {
17
22
  return acc || doc.querySelector(blackListSelector);
package/build/esm/packages/aurora/src/hooks/use_click_outside.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;"}
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;"}
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-242",
5
+ "version": "3.0.0-244",
6
6
  "description": "aurora",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",