@kiva/kv-components 3.48.1 → 3.48.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.48.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.1...@kiva/kv-components@3.48.2) (2023-12-06)
+
+
+### Bug Fixes
+
+* **KvLightbox:** allow focus on open alerts, clicks on browser extensions and outside lightbox ([969cf63](https://github.com/kiva/kv-ui-elements/commit/969cf638d27212052ade5e08e7de9786018bef9e))
+
+
+
+
+
 ## [3.48.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.0...@kiva/kv-components@3.48.1) (2023-11-29)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.48.1",
+  "version": "3.48.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "2c7054617fe956199335addc794ce7ac78003dab"
+  "gitHead": "992d943a0e3a39d8bb33162c1e059d295266c933"
 }

package/vue/KvLightbox.vue

@@ -218,10 +218,16 @@ export default {
 		const kvLightboxBody = ref(null);
 		const controlsRef = ref(null);
 
+		const trapElements = computed(() => [
+			kvLightbox.value, // This lightbox
+			'[role="alert"]', // Any open toasts/alerts on the page
+		]);
 		const {
 			activate: activateFocusTrap,
 			deactivate: deactivateFocusTrap,
-		} = useFocusTrap(kvLightbox);
+		} = useFocusTrap(trapElements, {
+			allowOutsideClick: true, // allow clicking outside the lightbox to close it
+		});
 
 		let makePageInertCallback = null;
 		let onKeyUp = null;

package/vue/stories/KvLightbox.stories.js

@@ -2,6 +2,7 @@ import { mdiLightningBolt } from '@mdi/js';
 import KvLightbox from '../KvLightbox.vue';
 import KvMaterialIcon from '../KvMaterialIcon.vue';
 import KvButton from '../KvButton.vue';
+import KvToast from '../KvToast.vue';
 
 export default {
 	title: 'KvLightbox',
@@ -253,3 +254,51 @@ export const Informational = InformationalTemplate.bind({});
 Informational.args = {
 	title: 'Lightbox Title',
 };
+
+const ToastInLightboxTemplate = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvToast,
+		KvButton,
+		KvLightbox,
+	},
+	template: `
+		<div>
+			<kv-button @click="isLightboxVisible = true;">Show lightbox</kv-button>
+
+			<kv-lightbox
+				:visible="isLightboxVisible"
+				title="Toast in Lightbox"
+				@lightbox-closed="isLightboxVisible = false"
+			>
+				<p>Click the button below to show a toast.</p>
+				<template #controls>
+					<kv-button @click="showToast(message, type, persist)">Show Toast</kv-button>
+				</template>
+			</kv-lightbox>
+
+			<!-- div below is a kludge for storybook docs -->
+			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
+				<div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">
+					<kv-toast ref="toastRef" @close="onClose" />
+				</div>
+			</div>
+		</div>
+	`,
+	data() {
+		return {
+			isLightboxVisible: false,
+		};
+	},
+	methods: {
+		showToast(messageInput, type, persistInput) {
+			this.$refs.toastRef.show(messageInput, type, persistInput);
+		},
+		onClose() {
+		},
+	},
+});
+export const toastInLightbox = ToastInLightboxTemplate.bind({});
+toastInLightbox.args = { type: 'confirmation', message: 'This is a toast in a lightbox.' };