windmill-components 1.408.2 → 1.430.3

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -15,6 +15,7 @@ declare class __sveltets_Render<T> {
         sensor?: number | undefined;
         root?: boolean | undefined;
         parentWidth?: number | undefined;
+        disableMove?: boolean | undefined;
         handleMove?: (({ detail }: {
             detail: any;
         }) => void) | undefined;

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -24,6 +24,7 @@ export let overlapped = undefined;
 export let moveMode = 'move';
 export let type = undefined;
 export let fakeShadow = undefined;
+export let disableMove = true;
 const ctx = getContext('AppEditorContext');
 const { mode, app } = getContext('AppViewerContext');
 const scale = ctx ? ctx.scale : writable(100);
@@ -397,7 +398,7 @@ function shouldDisplayShadow(moveMode, overlapped) {
 		  } transform: translate(${left}px, ${top}px); `} "
 >
 	<slot />
-	{#if moveMode === 'move'}
+	{#if moveMode === 'move' && !disableMove}
 		<div
 			class="svlt-grid-resizer-bottom"
 			on:pointerdown={(e) => resizePointerDown(e, 'vertical')}

package/package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -27,6 +27,7 @@ declare const __propDef: {
         moveMode?: "move" | "insert" | undefined;
         type?: string | undefined;
         fakeShadow?: GridShadow | undefined;
+        disableMove?: boolean | undefined;
         inActivate?: (() => void) | undefined;
         initmove?: (() => void) | undefined;
         updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;

package/package/components/apps/types.d.ts

@@ -96,6 +96,7 @@ export type AppTheme = {
 };
 export type App = {
     grid: GridItem[];
+    darkMode?: boolean;
     fullscreen: boolean;
     norefreshbar?: boolean;
     unusedInlineScripts: Array<{
@@ -222,6 +223,7 @@ export type AppViewerContext = {
         progress?: number | undefined;
         loading?: boolean | undefined;
     }>;
+    panzoomActive: Writable<boolean>;
 };
 export type AppEditorContext = {
     yTop: Writable<number>;

package/package/components/apps/utils.js

@@ -381,6 +381,9 @@ export function transformBareBase64IfNecessary(source) {
     if (!source) {
         return source;
     }
+    if (/^(http|https):\/\//.test(source) || source.startsWith('/')) {
+        return source;
+    }
     if (source.startsWith('data:') || source.includes(',')) {
         return source;
     }

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -158,7 +158,7 @@ const operations = {
     JOBS_DISAPPROVAL: 'jobs.disapproval',
     JOBS_DELETE: 'jobs.delete',
     ACCOUNT_DELETE: 'account.delete',
-    OPENAI_REQUEST: 'openai.request',
+    AI_REQUEST: 'ai.request',
     RESOURCES_CREATE: 'resources.create',
     RESOURCES_UPDATE: 'resources.update',
     RESOURCES_DELETE: 'resources.delete',
@@ -178,6 +178,7 @@ const operations = {
     USERS_SETPASSWORD: 'users.setpassword',
     USERS_UPDATE: 'users.update',
     USERS_LOGIN: 'users.login',
+    USERS_LOGIN_FAILURE: 'users.login_failure',
     USERS_LOGOUT: 'users.logout',
     USERS_ACCEPT_INVITE: 'users.accept_invite',
     USERS_DECLINE_INVITE: 'users.decline_invite',
@@ -188,6 +189,7 @@ const operations = {
     USERS_IMPERSONATE: 'users.impersonate',
     USERS_LEAVE_WORKSPACE: 'users.leave_workspace',
     OAUTH_LOGIN: 'oauth.login',
+    OAUTH_LOGIN_FAILURE: 'oauth.login_failure',
     OAUTH_SIGNUP: 'oauth.signup',
     VARIABLES_CREATE: 'variables.create',
     VARIABLES_DELETE: 'variables.delete',
@@ -276,6 +278,12 @@ let refresh = 1;
 		<span class="text-xs absolute -top-4">Resource</span>
 
 		<AutoComplete
+			create
+			onCreate={(resource) => {
+				resources.push(resource)
+				return resource
+			}}
+			createText="Press enter to use this value"
 			noInputStyles
 			items={resources}
 			value={resource}

package/package/components/common/button/AnimatedButton.svelte

@@ -0,0 +1,85 @@
+<script>import { twMerge } from 'tailwind-merge';
+import DarkModeObserver from '../../DarkModeObserver.svelte';
+export let marginWidth = '2px';
+export let animationDuration = '2s';
+export let baseRadius = '4px';
+export let animate = true;
+export let wrapperClasses = '';
+export let ringColor = 'transparent';
+export let darkMode = false;
+const gradientColors = {
+    light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
+    dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
+};
+let clientWidth = 0;
+let clientHeight = 0;
+$: circleRadius = Math.ceil(Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2);
+$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`;
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div
+	class={twMerge('gradient-button', wrapperClasses)}
+	style="--margin-width: {marginWidth}; --animation-duration: {animationDuration}; --base-radius: {baseRadius}; --circle-radius: {circleRadius}; --ring-color: {ringColor}; --gradient: {gradientString}"
+	class:animate
+	bind:clientWidth
+	bind:clientHeight
+>
+	<slot />
+</div>
+
+<style>
+	.gradient-button {
+		position: relative;
+		font-size: inherit;
+		border: none;
+		border-radius: calc(var(--base-radius) + var(--margin-width, 2px));
+		color: currentColor;
+		background: inherit;
+		z-index: 1;
+		overflow: hidden;
+		padding: var(--margin-width, 2px);
+	}
+
+	/* Circular gradient */
+	.gradient-button::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: calc(var(--circle-radius, 300px) * 2px);
+		height: calc(var(--circle-radius, 300px) * 2px);
+		background: var(--ring-color, transparent);
+		border-radius: 50%;
+		z-index: -1;
+		animation: none;
+	}
+
+	.gradient-button.animate::before {
+		background: conic-gradient(var(--gradient));
+		animation: rotate var(--animation-duration, 2s) linear infinite;
+	}
+
+	/* inner background */
+	.gradient-button::after {
+		content: '';
+		position: absolute;
+		top: var(--margin-width, 2px);
+		right: var(--margin-width, 2px);
+		bottom: var(--margin-width, 2px);
+		left: var(--margin-width, 2px);
+		background: inherit;
+		border-radius: var(--base-radius);
+		z-index: -1;
+	}
+
+	@keyframes rotate {
+		from {
+			transform: translate(-50%, -50%) rotate(0deg);
+		}
+		to {
+			transform: translate(-50%, -50%) rotate(360deg);
+		}
+	}</style>

package/package/components/common/button/AnimatedButton.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        marginWidth?: string | undefined;
+        animationDuration?: string | undefined;
+        baseRadius?: string | undefined;
+        animate?: boolean | undefined;
+        wrapperClasses?: string | undefined;
+        ringColor?: string | undefined;
+        darkMode?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AnimatedButtonProps = typeof __propDef.props;
+export type AnimatedButtonEvents = typeof __propDef.events;
+export type AnimatedButtonSlots = typeof __propDef.slots;
+export default class AnimatedButton extends SvelteComponent<AnimatedButtonProps, AnimatedButtonEvents, AnimatedButtonSlots> {
+}
+export {};

package/package/components/common/button/Button.svelte

@@ -84,6 +84,11 @@ const colorVariants = {
         border: 'border  bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected',
         contained: 'bg-surface border-transparent hover:bg-surface-hover focus-visible:bg-surface-hover text-primary focus-visible:ring-surface-selected',
         divider: 'divide-x divide-gray-200 dark:divide-gray-700'
+    },
+    nord: {
+        border: 'border-nord-200 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-nord-200',
+        contained: 'bg-nord-300 hover:bg-nord-0 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-nord-400 dark:hover:bg-nord-600 dark:text-primary-inverse',
+        divider: 'divide-x divide-gray-800 dark:divide-gray-200'
     }
 };
 async function onClick(event) {

package/package/components/common/button/ConnectionButton.svelte

@@ -0,0 +1,75 @@
+<script>import { Plug } from 'lucide-svelte';
+import { pointerDownOutside } from '../../../utils';
+import AnimatedButton from './AnimatedButton.svelte';
+import Button from './Button.svelte';
+import { getContext } from 'svelte';
+export let isOpen = false;
+export let openConnection;
+export let closeConnection;
+let selected = false;
+const { panzoomActive } = getContext('AppViewerContext');
+async function getConnectionButtonElements() {
+    return Array.from(document.querySelectorAll('[data-connection-button], [data-connection-button] *'));
+}
+function handleConnect(activate = false) {
+    if (isOpen) {
+        deactivateConnection();
+        return;
+    }
+    if (activate) {
+        activateConnection();
+    }
+}
+function activateConnection() {
+    selected = true;
+    openConnection();
+}
+function deactivateConnection() {
+    selected = false;
+    closeConnection();
+}
+function handleKeyDown(e) {
+    if (e.key === 'Escape') {
+        e.stopPropagation();
+        e.preventDefault();
+        handleConnect();
+    }
+}
+function handlePointerDownOutside(e) {
+    if (!$panzoomActive) {
+        deactivateConnection();
+    }
+}
+$: !isOpen && (selected = false);
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	use:pointerDownOutside={{
+		capture: true,
+		stopPropagation: isOpen,
+		exclude: getConnectionButtonElements,
+		customEventName: 'pointerdown_connecting'
+	}}
+	on:keydown={handleKeyDown}
+	on:pointerdown_outside={handlePointerDownOutside}
+	data-connection-button
+>
+	<AnimatedButton
+		animate={isOpen && selected}
+		baseRadius="6px"
+		animationDuration="2s"
+		marginWidth="2px"
+	>
+		<Button
+			size="xs"
+			variant="border"
+			color="light"
+			title="Connect"
+			on:click={() => handleConnect(true)}
+			id="schema-plug"
+		>
+			<Plug size={14} />
+		</Button>
+	</AnimatedButton>
+</div>

package/package/components/common/button/ConnectionButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isOpen?: boolean | undefined;
+        openConnection: () => void;
+        closeConnection: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConnectionButtonProps = typeof __propDef.props;
+export type ConnectionButtonEvents = typeof __propDef.events;
+export type ConnectionButtonSlots = typeof __propDef.slots;
+export default class ConnectionButton extends SvelteComponent<ConnectionButtonProps, ConnectionButtonEvents, ConnectionButtonSlots> {
+}
+export {};

package/package/components/common/clearableInput/ClearableInput.svelte

@@ -55,8 +55,8 @@ $: if (value === undefined)
 	{#if value && isHovered}
 		<button
 			transition:fade|local={{ duration: 80 }}
-			class="absolute z-10 top-[9.5px] right-2 rounded-full p-0.5 text-white bg-gray-300
-			duration-200 hover:bg-gray-600 focus:bg-gray-600 {buttonClass}"
+			class="absolute z-10 top-[9.5px] right-2 rounded-full p-0.5 text-primary bg-surface-secondary
+			duration-200 hover:bg-surface-hovr focus:bg-surface-hover {buttonClass}"
 			aria-label="Clear"
 			on:click|preventDefault|stopPropagation={clear}
 		>

package/package/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte

@@ -0,0 +1,50 @@
+<script>import ConfirmationModal from './ConfirmationModal.svelte';
+import Button from '../button/Button.svelte';
+import {} from '../../../utils';
+export let deployedValue = undefined;
+export let currentValue = undefined;
+export let diffDrawer = undefined;
+export let confirmCallback;
+export let deployedBy = undefined;
+export let open = false;
+</script>
+
+<ConfirmationModal
+	{open}
+	title={"New version deployed by " + deployedBy}
+	confirmationText="Override"
+	on:canceled={() => {
+		open = false
+	}}
+	on:confirmed={() => confirmCallback()}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>There was deployed new version while you were editing this one.</span>
+		{#if diffDrawer}
+			<Button
+				wrapperClasses="self-start"
+				color="light"
+				variant="border"
+				size="xs"
+				on:click={() => {
+					if (!deployedValue || !currentValue) {
+						return
+					}
+					open = false
+					diffDrawer?.openDrawer()
+					diffDrawer?.setDiff({
+						mode: 'simple',
+						original: deployedValue,
+						current: currentValue,
+						title: 'Deployed <> Current',
+						button: {
+							text: 'Override anyway',
+							onClick: () => confirmCallback()
+						}
+					})
+				}}
+				>Show diff
+			</Button>
+		{/if}
+	</div>
+</ConfirmationModal>

package/package/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type DiffDrawer from '../../DiffDrawer.svelte';
+import { type Value } from '../../../utils';
+declare const __propDef: {
+    props: {
+        deployedValue?: Value | undefined;
+        currentValue?: Value | undefined;
+        diffDrawer?: DiffDrawer | undefined;
+        confirmCallback: () => void;
+        deployedBy?: string | undefined;
+        open?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DeployOverrideConfirmationModalProps = typeof __propDef.props;
+export type DeployOverrideConfirmationModalEvents = typeof __propDef.events;
+export type DeployOverrideConfirmationModalSlots = typeof __propDef.slots;
+export default class DeployOverrideConfirmationModal extends SvelteComponent<DeployOverrideConfirmationModalProps, DeployOverrideConfirmationModalEvents, DeployOverrideConfirmationModalSlots> {
+}
+export {};

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -2,12 +2,13 @@
 import { beforeNavigate } from '$app/navigation';
 import { goto as gotoUrl } from '$app/navigation';
 import Button from '../button/Button.svelte';
-import { cleanValueProperties, orderedJsonStringify } from '../../../utils';
+import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
 import { tick } from 'svelte';
 import { page } from '$app/stores';
 export let savedValue = undefined;
 export let modifiedValue = undefined;
 export let diffDrawer = undefined;
+export let additionalExitAction = () => { };
 let bypassBeforeNavigate = false;
 let open = false;
 let goingTo = undefined;
@@ -29,8 +30,10 @@ beforeNavigate(async (newNavigationState) => {
                 path: undefined
             });
             const current = cleanValueProperties({ ...(modifiedValue ?? {}), path: undefined });
-            if (orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
+            if (orderedJsonStringify(replaceFalseWithUndefined(draftOrDeployed)) ===
+                orderedJsonStringify(replaceFalseWithUndefined(current))) {
                 bypassBeforeNavigate = true;
+                additionalExitAction?.();
                 gotoUrl(goingTo);
             }
             else {
@@ -57,6 +60,7 @@ beforeNavigate(async (newNavigationState) => {
 	on:confirmed={() => {
 		if (goingTo) {
 			bypassBeforeNavigate = true
+			additionalExitAction?.()
 			gotoUrl(goingTo)
 		}
 	}}
@@ -86,6 +90,7 @@ beforeNavigate(async (newNavigationState) => {
 							onClick: () => {
 								if (goingTo) {
 									bypassBeforeNavigate = true
+									additionalExitAction?.()
 									gotoUrl(goingTo)
 								}
 							}

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         savedValue?: Value | undefined;
         modifiedValue?: Value | undefined;
         diffDrawer?: DiffDrawer | undefined;
+        additionalExitAction?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/common/fileInput/FileInput.svelte

@@ -2,6 +2,7 @@
 import { FileUp, Trash } from 'lucide-svelte';
 import Button from '../../common/button/Button.svelte';
 import { twMerge } from 'tailwind-merge';
+import { sendUserToast } from '../../../toast';
 let c = '';
 export { c as class };
 export let style = '';
@@ -75,7 +76,13 @@ function handleDrop(event) {
     event.preventDefault();
     if (event.dataTransfer) {
         if (event.dataTransfer.files && event.dataTransfer.files.length) {
-            onChange(event.dataTransfer.files);
+            if (!multiple && event.dataTransfer.files.length > 1) {
+                sendUserToast('Only one file can be uploaded at a time');
+                return;
+            }
+            else {
+                onChange(event.dataTransfer.files);
+            }
         }
     }
 }

package/package/components/common/fileUpload/FileUpload.svelte

@@ -2,7 +2,7 @@
 import FileProgressBar from '../FileProgressBar.svelte';
 import Button from '../button/Button.svelte';
 import { sendUserToast } from '../../../toast';
-import { workspaceStore } from '../../../stores';
+import { userStore, workspaceStore } from '../../../stores';
 import { HelpersService } from '../../../gen';
 import { writable } from 'svelte/store';
 import { Ban, CheckCheck, FileWarning, Files, RefreshCcw, Trash } from 'lucide-svelte';
@@ -11,7 +11,9 @@ import { createEventDispatcher, onDestroy } from 'svelte';
 import { emptyString } from '../../../utils';
 export let acceptedFileTypes = ['*'];
 export let allowMultiple = true;
-export let containerText = 'Drag and drop files here or click to browse';
+export let containerText = allowMultiple
+    ? 'Drag and drop files here or click to browse'
+    : 'Drag and drop a file here or click to browse';
 export let customResourcePath = undefined;
 export let customResourceType = undefined; // when customResourcePath is provided, this should be provided as well. Will default to S3 if not
 export let customClass = '';
@@ -21,8 +23,10 @@ export let pathTransformer = undefined; // function taking as input {file: File}
 export let forceDisplayUploads = false;
 export let defaultValue = undefined;
 export let workspace = undefined;
+export let fileUploads = writable([]);
+export let appPath = undefined;
+export let computeForceViewerPolicies = undefined;
 const dispatch = createEventDispatcher();
-let fileUploads = writable([]);
 async function handleChange(files) {
     for (const file of files ?? []) {
         uploadFileToS3(file, file.name);
@@ -89,6 +93,18 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
         if (fileExtension) {
             params.append('file_extension', fileExtension);
         }
+        if (fileToUpload.type) {
+            params.append('content_type', fileToUpload.type);
+        }
+        if (computeForceViewerPolicies !== undefined) {
+            const forceViewerPolicies = computeForceViewerPolicies();
+            if (forceViewerPolicies) {
+                params.append('force_viewer_allowed_resources', forceViewerPolicies.allowed_resources.join(','));
+                params.append('force_viewer_allow_user_resources', JSON.stringify(forceViewerPolicies.allow_user_resources));
+                params.append('force_viewer_allow_workspace_resource', JSON.stringify(forceViewerPolicies.allow_workspace_resource));
+                params.append('force_viewer_file_key_regex', forceViewerPolicies.file_key_regex);
+            }
+        }
         // let response = await fetch(
         // 	`/api/w/${$workspaceStore}/job_helpers/multipart_upload_s3_file?${params.toString()}`,
         // 	{
@@ -131,7 +147,9 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
                     }
                 }
             });
-            xhr?.open('POST', `/api/w/${workspace ?? $workspaceStore}/job_helpers/upload_s3_file?${params.toString()}`, true);
+            xhr?.open('POST', appPath
+                ? `/api/w/${workspace ?? $workspaceStore}/apps_u/upload_s3_file/${appPath}?${params.toString()}`
+                : `/api/w/${workspace ?? $workspaceStore}/job_helpers/upload_s3_file?${params.toString()}`, true);
             xhr?.setRequestHeader('Content-Type', 'application/octet-stream');
             xhr?.send(fileToUpload);
         }));
@@ -273,7 +291,7 @@ onDestroy(() => {
 									</Button>
 								{/if}
 
-								{#if fileUpload.progress === 100 && !fileUpload.cancelled}
+								{#if fileUpload.progress === 100 && !fileUpload.cancelled && $userStore}
 									<Button
 										size="xs2"
 										color="red"
@@ -370,7 +388,6 @@ onDestroy(() => {
 			accept={acceptedFileTypes?.join(',')}
 			multiple={allowMultiple}
 			returnFileNames
-			includeMimeType
 			on:change={({ detail }) => {
 				forceDisplayUploads = false
 				handleChange(detail)

package/package/components/common/fileUpload/FileUpload.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import { type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
         acceptedFileTypes?: string[] | undefined;
@@ -13,6 +14,22 @@ declare const __propDef: {
         forceDisplayUploads?: boolean | undefined;
         defaultValue?: string | undefined;
         workspace?: string | undefined;
+        fileUploads?: Writable<{
+            name: string;
+            size: number;
+            progress: number;
+            cancelled?: boolean | undefined;
+            errorMessage?: string | undefined;
+            path?: string | undefined;
+            file?: File | undefined;
+        }[]> | undefined;
+        appPath?: string | undefined;
+        computeForceViewerPolicies?: (() => {
+            allowed_resources: string[];
+            allow_user_resources: boolean;
+            allow_workspace_resource: boolean;
+            file_key_regex: string;
+        } | undefined) | undefined;
     };
     events: {
         addition: CustomEvent<any>;

package/package/components/common/menu/MenuV2.svelte

@@ -15,7 +15,7 @@ const [floatingRef, floatingContent] = createFloatingActions({
 });
 </script>
 
-<Menu let:open as="div" class="relative hover:z-50 flex w-full h-8">
+<Menu  let:open as="div" class="relative hover:z-50 flex w-full h-8">
 	<ResolveOpen {open} on:open on:close />
 	<div use:floatingRef class="w-full">
 		<MenuButton class={twMerge('w-full', justifyEnd ? 'flex justify-end' : '')}>

package/package/components/common/modal/Modal.svelte

@@ -40,7 +40,7 @@ function fadeFast(node) {
 	<div
 		on:click={() => (open = false)}
 		transition:fadeFast|local
-		class={'absolute top-0 bottom-0 left-0 right-0 z-50'}
+		class={'absolute top-0 bottom-0 left-0 right-0 z-[9999]'}
 		role="dialog"
 	>
 		<div

package/package/components/common/popup/Popup.svelte

@@ -12,16 +12,28 @@ export let blockOpen = false;
 export let shouldUsePortal = true;
 export let target = undefined;
 export let noTransition = false;
+export let popupHover = false;
 </script>
 
 <Popover on:close class="leading-none">
-	<PopoverButton>
+	<PopoverButton let:open>
 		<div use:floatingRef>
-			<slot name="button" />
+			<slot name="button" {open} />
 		</div>
 	</PopoverButton>
 	<ConditionalPortal condition={shouldUsePortal} {target}>
-		<div use:floatingContent class={`z5000 ${floatingClasses}`}>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+		<div
+			use:floatingContent
+			class={`z5000 ${floatingClasses}`}
+			on:mouseenter={() => {
+				popupHover = true
+			}}
+			on:mouseleave={() => {
+				popupHover = false
+			}}
+		>
 			{#if !noTransition}
 				<Transition
 					show={blockOpen || undefined}

package/package/components/common/popup/Popup.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         shouldUsePortal?: boolean | undefined;
         target?: string | HTMLElement | undefined;
         noTransition?: boolean | undefined;
+        popupHover?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;
@@ -16,7 +17,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        button: {};
+        button: {
+            open: boolean;
+        };
         default: {
             close: (focusableElement: HTMLElement | null) => void;
         };