@skyscanner/backpack-web 29.4.1 → 29.5.0
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.
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{padding:0;border:none;
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}
|
|
@@ -88,33 +88,44 @@ export const BpkModalV2 = props => {
|
|
|
88
88
|
} = props;
|
|
89
89
|
const ref = useRef(null);
|
|
90
90
|
useEffect(() => {
|
|
91
|
+
const dialog = document.getElementById(`${id}`);
|
|
92
|
+
const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
|
|
93
|
+
const handleBackdropClick = modal => {
|
|
94
|
+
if (modal) {
|
|
95
|
+
modal.addEventListener('click', event => {
|
|
96
|
+
const {
|
|
97
|
+
target
|
|
98
|
+
} = event;
|
|
99
|
+
if (target === modal) {
|
|
100
|
+
modal === dialog ? ref.current?.close?.() : onClose();
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
const handleKeyDown = event => {
|
|
106
|
+
if (event.key === 'Escape') {
|
|
107
|
+
onClose();
|
|
108
|
+
}
|
|
109
|
+
};
|
|
91
110
|
if (isOpen) {
|
|
92
111
|
ref.current?.showModal?.();
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
modal.addEventListener('click', event => {
|
|
98
|
-
const {
|
|
99
|
-
target
|
|
100
|
-
} = event;
|
|
101
|
-
if (target === modal) {
|
|
102
|
-
modal === dialog ? ref.current?.close?.() : onClose();
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
|
-
};
|
|
112
|
+
if (dialogWithPolyfill) {
|
|
113
|
+
handleBackdropClick(dialogWithPolyfill);
|
|
114
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
115
|
+
}
|
|
107
116
|
handleBackdropClick(dialog);
|
|
108
|
-
handleBackdropClick(dialogWithPolyfill);
|
|
109
117
|
} else {
|
|
110
118
|
ref.current?.close?.();
|
|
111
119
|
}
|
|
112
120
|
setPageProperties({
|
|
113
121
|
isDialogOpen: isOpen
|
|
114
122
|
});
|
|
115
|
-
return () =>
|
|
116
|
-
|
|
117
|
-
|
|
123
|
+
return () => {
|
|
124
|
+
setPageProperties({
|
|
125
|
+
isDialogOpen: false
|
|
126
|
+
});
|
|
127
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
128
|
+
};
|
|
118
129
|
}, [id, isOpen, onClose]);
|
|
119
130
|
const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
|
|
120
131
|
const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
|
|
@@ -166,7 +166,7 @@ class BpkPopoverPortal extends Component {
|
|
|
166
166
|
});
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
|
-
const propTypes = {
|
|
169
|
+
export const propTypes = {
|
|
170
170
|
// BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
|
|
171
171
|
children: PropTypes.node.isRequired,
|
|
172
172
|
closeButtonText: PropTypes.string.isRequired,
|
|
@@ -195,7 +195,7 @@ const propTypes = {
|
|
|
195
195
|
*/
|
|
196
196
|
popperModifiers: PropTypes.arrayOf(PropTypes.object)
|
|
197
197
|
};
|
|
198
|
-
const defaultProps = {
|
|
198
|
+
export const defaultProps = {
|
|
199
199
|
// BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
|
|
200
200
|
className: null,
|
|
201
201
|
closeButtonIcon: true,
|