provide open status for the lightbox - needed for android back button

Author: jasverix

component-library/src/components/custom/BccLightbox/BccLightbox.vue

@@ -12,7 +12,6 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import BccLightboxMedia from './BccLightboxMedia.vue';
 import { LightboxStore } from './state';
 
-const dialogRef = ref<HTMLElement | null>(null);
 const closeButtonRef = ref<HTMLButtonElement | null>(null);
 const mediaRef = ref<InstanceType<typeof BccLightboxMedia> | null>(null);
 
@@ -110,7 +109,6 @@ onUnmounted(() => {
 	<Teleport to="body">
 		<div
 			v-if="LightboxStore.state.visible && currentItem"
-			ref="dialogRef"
 			class="bcc-lightbox"
 			role="dialog"
 			aria-modal="true"

component-library/src/components/custom/BccLightbox/state.ts

@@ -19,11 +19,6 @@ let scrollLockCount = 0;
 let activeCallbacks: Pick<LightboxOpenOptions, 'onShow' | 'onHide'> = {};
 let mounted = false;
 
-const lightboxApi: LightboxApi = {
-	open: openLightbox,
-	close: closeLightbox,
-};
-
 function lockBodyScroll() {
 	if (scrollLockCount === 0) {
 		document.body.style.overflow = 'hidden';
@@ -117,6 +112,13 @@ export const LightboxStore = {
 };
 
 export function installBccLightbox(app: App) {
+	const lightboxApi: LightboxApi = {
+		open: openLightbox,
+		close: closeLightbox,
+		get isOpen() {
+			return state.visible;
+		},
+	};
 	app.provide(LIGHTBOX_KEY, lightboxApi);
 
 	if (mounted || typeof document === 'undefined') {

component-library/src/components/custom/BccLightbox/types.ts

@@ -33,6 +33,7 @@ export type LightboxState = {
 export type LightboxApi = {
 	open: (options: LightboxOpenOptions) => void;
 	close: () => void;
+	readonly isOpen: boolean;
 };
 
 export const LIGHTBOX_KEY: InjectionKey<LightboxApi> = Symbol('bcc-lightbox');