@skyscanner/backpack-web 29.4.2 → 29.5.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.
|
@@ -42,7 +42,7 @@ export type Props = {
|
|
|
42
42
|
className?: string | null;
|
|
43
43
|
disabled?: boolean;
|
|
44
44
|
iconOnly?: boolean;
|
|
45
|
-
onClick?: (event: MouseEvent<
|
|
45
|
+
onClick?: (event: MouseEvent<HTMLButtonElement|HTMLAnchorElement>) => void;
|
|
46
46
|
rel?: string | undefined;
|
|
47
47
|
submit?: boolean;
|
|
48
48
|
href?: string | null;
|
|
@@ -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');
|