From 7cf6ac5c3e4a77eeda42e7992908ffe10d5fff6e Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Wed, 5 Oct 2022 21:25:44 +0200
Subject: [PATCH 1/2] chore: Improve dev application, #56

---
 dev/src/App.svelte          | 482 ++++++++++++++++++++----------------
 dev/src/CloseIcon.svelte    |  14 ++
 dev/src/SettingsIcon.svelte |  14 ++
 3 files changed, 296 insertions(+), 214 deletions(-)
 create mode 100644 dev/src/CloseIcon.svelte
 create mode 100644 dev/src/SettingsIcon.svelte

diff --git a/dev/src/App.svelte b/dev/src/App.svelte
index 7571392..53c71b5 100644
--- a/dev/src/App.svelte
+++ b/dev/src/App.svelte
@@ -1,5 +1,10 @@
 <script>
-	import { useTooltip } from '../../src'
+	import {useTooltip} from '../../src'
+
+	import SettingsIcon from './SettingsIcon.svelte'
+	import CloseIcon from './CloseIcon.svelte'
+
+	let showSettings = false
 
 	let tooltipTextContent = null
 	let useCustomTooltipClass = false
@@ -12,18 +17,268 @@
 	let tooltipLeaveDelay = 200
 	let tooltipOffset = 10
 
-	const _onTooltipClick = (arg) => {
-		console.log(arg)
+	const _onTooltipClick = (arg, e) => {
+		e.preventDefault()
+		alert('You\'ve clicked the tooltip')
 	}
 </script>
 
+<style>
+    main {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        padding: 1rem;
+        background-color: #617899;
+    }
+
+    .toggle__button {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        width: 36px;
+    }
+
+    .container {
+        position: relative;
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
+    .settings__container {
+        overflow: hidden auto;
+        position: absolute;
+        z-index: 9999;
+        max-width: 480px;
+        margin: 0 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
+    @media screen and (max-height: 700px) {
+        .settings__container {
+            max-height: calc(100vh - 40px);
+        }
+    }
+
+    .settings__form {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 1rem;
+        background-color: #fafafa;
+        border-radius: 1rem;
+    }
+
+    .settings__form fieldset {
+        width: 100%;
+        border: none;
+    }
+
+    .settings__form label {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        column-gap: 1rem;
+    }
+
+    .settings__form input {
+        margin: 0;
+        max-width: 100px;
+    }
+
+    .settings__form input[type='checkbox'] {
+        padding: 0;
+    }
+
+    .target {
+        width: 10rem;
+        height: 3rem;
+        background-color: white;
+        border-radius: 6px;
+        color: black;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
+    }
+
+    .target:hover {
+        cursor: pointer;
+        background-color: black;
+        color: white;
+    }
+
+    .tooltip__content {
+        display: flex;
+        column-gap: .5rem;
+        align-items: center;
+    }
+
+    :global(.tooltip) {
+        position: absolute;
+        z-index: 9999;
+        max-width: 140px;
+        background-color: #ee7008;
+        color: #fff;
+        text-align: center;
+        border-radius: 6px;
+        padding: 0.5rem;
+    }
+
+    :global(.tooltip::after) {
+        content: '';
+        position: absolute;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+    }
+
+    :global(.tooltip-top::after) {
+        bottom: -10px;
+        left: 50%;
+        border-color: #ee7008 transparent transparent transparent;
+    }
+
+    :global(.tooltip-bottom::after) {
+        top: -10px;
+        left: 50%;
+        border-color: transparent transparent #ee7008 transparent;
+    }
+
+    :global(.tooltip-left::after) {
+        top: calc(50% - 5px);
+        right: -10px;
+        border-color: transparent transparent transparent #ee7008;
+    }
+
+    :global(.tooltip-right::after) {
+        top: calc(50% - 5px);
+        left: -5px;
+        border-color: transparent #ee7008 transparent transparent;
+    }
+
+    :global(.tooltip-enter) {
+        animation: fadeIn 0.2s linear forwards;
+    }
+
+    :global(.tooltip-leave) {
+        animation: fadeOut 0.2s linear forwards;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateX(50px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes fadeOut {
+        to {
+            opacity: 0;
+            transform: translateX(-50px);
+        }
+    }
+</style>
+
+<template id="tooltip__template">
+    <span class="tooltip__content">Hi! I'm a <i>fancy</i> <strong>tooltip</strong>!</span>
+</template>
 <main>
-	<div class="container">
-		<div
-			use:useTooltip={{
+    {#if showSettings}
+        <div class="settings__container">
+            <button type="button" class="toggle__button" on:click={() => (showSettings = !showSettings)}>
+                <CloseIcon color="#fff" />
+            </button>
+            <form class="settings__form">
+                <fieldset>
+                    <label>
+                        Tooltip Text Content:
+                        <input type="text" bind:value={tooltipTextContent}/>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Use Custom Tooltip Class:
+                        <input type="checkbox" bind:checked={useCustomTooltipClass}/>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Tooltip Position:
+                        <select bind:value={tooltipPosition}>
+                            <option value="left">Left</option>
+                            <option value="right">Right</option>
+                            <option value="top">Top</option>
+                            <option value="bottom">Bottom</option>
+                        </select>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Animate tooltip:
+                        <input type="checkbox" bind:checked={animateTooltip}/>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Use Custom Tooltip Animation Enter Class:
+                        <input type="checkbox" bind:checked={useCustomAnimationEnterClass}/>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Use Custom Tooltip Animation Leave Class:
+                        <input type="checkbox" bind:checked={useCustomAnimationLeaveClass}/>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Tooltip Enter Delay (ms):
+                        <input type="number" step={100} min={0} bind:value={tooltipEnterDelay}/>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Tooltip Leave Delay (ms):
+                        <input type="number" step={100} min={0} bind:value={tooltipLeaveDelay}/>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Tooltip Offset (px):
+                        <input type="number" step={1} min={5} bind:value={tooltipOffset}/>
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label>
+                        Disable Tooltip:
+                        <input type="checkbox" bind:checked={isTooltipDisabled}/>
+                    </label>
+                </fieldset>
+            </form>
+        </div>
+    {/if}
+    <div class="container">
+        <button type="button" class="toggle__button" on:click={() => (showSettings = !showSettings)}>
+            <SettingsIcon color="#fff" />
+        </button>
+        <div
+                use:useTooltip={{
 				position: tooltipPosition,
 				content: tooltipTextContent,
-				contentSelector: !tooltipTextContent?.length ? '#tooltip-template' : null,
+				contentSelector: !tooltipTextContent?.length ? '#tooltip__template' : null,
 				contentActions: {
 					'*': {
 						eventType: 'click',
@@ -41,210 +296,9 @@
 				offset: tooltipOffset,
 				disabled: isTooltipDisabled,
 			}}
-			class="target"
-		>
-			Hover me
-		</div>
-		<template id="tooltip-template">
-			<span class="tooltip__content">Hi! I'm a <i>fancy</i> <strong>tooltip</strong>!</span>
-		</template>
-		<form class="settings__form">
-			<h1>Settings</h1>
-			<fieldset>
-				<label>
-					Tooltip Text Content:
-					<input type="text" bind:value={tooltipTextContent} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Use Custom Tooltip Class:
-					<input type="checkbox" bind:checked={useCustomTooltipClass} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Tooltip Position:
-					<select bind:value={tooltipPosition}>
-						<option value="left">Left</option>
-						<option value="right">Right</option>
-						<option value="top">Top</option>
-						<option value="bottom">Bottom</option>
-					</select>
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Animate tooltip:
-					<input type="checkbox" bind:checked={animateTooltip} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Use Custom Tooltip Animation Enter Class:
-					<input type="checkbox" bind:checked={useCustomAnimationEnterClass} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Use Custom Tooltip Animation Leave Class:
-					<input type="checkbox" bind:checked={useCustomAnimationLeaveClass} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Tooltip Enter Delay (ms):
-					<input type="number" step={100} min={0} bind:value={tooltipEnterDelay} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Tooltip Leave Delay (ms):
-					<input type="number" step={100} min={0} bind:value={tooltipLeaveDelay} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Tooltip Offset (px):
-					<input type="number" step={1} min={5} bind:value={tooltipOffset} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Disable Tooltip:
-					<input type="checkbox" bind:checked={isTooltipDisabled} />
-				</label>
-			</fieldset>
-		</form>
-	</div>
-</main>
-
-<style>
-	main {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-		padding: 1rem;
-	}
-
-	.container {
-		max-width: 640px;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		row-gap: 3rem;
-	}
-
-	.target {
-		width: 10rem;
-		height: 3rem;
-		background-color: white;
-		color: black;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-	}
-
-	.target:hover {
-		cursor: pointer;
-		background-color: black;
-		color: white;
-	}
-
-	.tooltip__content {
-		background-color: yellow;
-		color: black;
-	}
-
-	.settings__form {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		padding: 1rem;
-		background-color: #eee;
-	}
-
-	.settings__form fieldset {
-		width: 100%;
-		border: none;
-	}
-
-	.settings__form label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		column-gap: 1rem;
-	}
-
-	.settings__form input {
-		width: 6rem;
-		margin: 0;
-	}
-
-	.settings__form input[type='checkbox'] {
-		padding: 0;
-	}
-
-	:global(.tooltip) {
-		position: absolute;
-		z-index: 9999;
-		max-width: 120px;
-		background-color: #ee7008;
-		color: #fff;
-		text-align: center;
-		border-radius: 6px;
-		padding: 0.5rem;
-	}
-
-	:global(.tooltip::after) {
-		content: '';
-		position: absolute;
-		margin-left: -5px;
-		border-width: 5px;
-		border-style: solid;
-	}
-
-	:global(.tooltip-top::after) {
-		bottom: -10px;
-		left: 50%;
-		border-color: #ee7008 transparent transparent transparent;
-	}
-
-	:global(.tooltip-bottom::after) {
-		top: -10px;
-		left: 50%;
-		border-color: transparent transparent #ee7008 transparent;
-	}
-
-	:global(.tooltip-left::after) {
-		top: calc(50% - 5px);
-		right: -10px;
-		border-color: transparent transparent transparent #ee7008;
-	}
-
-	:global(.tooltip-right::after) {
-		top: calc(50% - 5px);
-		left: -5px;
-		border-color: transparent #ee7008 transparent transparent;
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: translateX(50px);
-		}
-		to {
-			opacity: 1;
-			transform: translateX(0);
-		}
-	}
-	@keyframes fadeOut {
-		to {
-			opacity: 0;
-			transform: translateX(-50px);
-		}
-	}
-</style>
+                class="target"
+        >
+            Hover me
+        </div>
+    </div>
+</main>
\ No newline at end of file
diff --git a/dev/src/CloseIcon.svelte b/dev/src/CloseIcon.svelte
new file mode 100644
index 0000000..eb038f3
--- /dev/null
+++ b/dev/src/CloseIcon.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let color = '#FFF'
+</script>
+
+<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(0.04898, 0, 0, 0.04898, 0, 0)">
+        <path
+                d="M207,182.8c-6.7-6.7-17.6-6.7-24.3,0s-6.7,17.6,0,24.3l38,38l-38,38c-6.7,6.7-6.7,17.6,0,24.3c3.3,3.3,7.7,5,12.1,5 c4.4,0,8.8-1.7,12.1-5l38-38l38,38c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5c6.7-6.7,6.7-17.6,0-24.3l-38-38l38-38 c6.7-6.7,6.7-17.6,0-24.3s-17.6-6.7-24.3,0l-38,38L207,182.8z"
+                fill={color} />
+        <path
+                d="M0,245c0,135.1,109.9,245,245,245s245-109.9,245-245S380.1,0,245,0S0,109.9,0,245z M455.7,245 c0,116.2-94.5,210.7-210.7,210.7S34.3,361.2,34.3,245S128.8,34.3,245,34.3S455.7,128.8,455.7,245z"
+                fill={color} />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/dev/src/SettingsIcon.svelte b/dev/src/SettingsIcon.svelte
new file mode 100644
index 0000000..e37c13a
--- /dev/null
+++ b/dev/src/SettingsIcon.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let color = '#FFF'
+</script>
+
+<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(0.049005, 0, 0, 0.049005, 0, 0)">
+        <path
+                d="M343.45,71.8c-14.4-8.2-29.7-14.6-45.7-19V36.5c0-20.1-16.4-36.5-36.5-36.5h-32.5c-20.1,0-36.5,16.4-36.5,36.5v16.3 c-16,4.4-31.3,10.7-45.7,19l-11.6-11.5c-6.9-6.9-16.1-10.7-25.8-10.7s-18.9,3.8-25.8,10.7l-23,23c-6.9,6.9-10.7,16.1-10.7,25.8 s3.8,18.9,10.7,25.8l11.5,11.5c-8.2,14.4-14.6,29.7-19,45.7h-16.3c-20.1,0-36.5,16.4-36.5,36.5v32.5c0,20.1,16.4,36.5,36.5,36.5 h16.3c4.4,16,10.7,31.3,19,45.7l-11.5,11.6c-14.2,14.2-14.2,37.4,0,51.6l23,23c6.9,6.9,16.1,10.7,25.8,10.7s18.9-3.8,25.8-10.7 l11.5-11.5c14.4,8.2,29.7,14.6,45.7,19v16.3c0,20.1,16.4,36.5,36.5,36.5h32.5c20.1,0,36.5-16.4,36.5-36.5V437 c16-4.4,31.3-10.7,45.7-19l11.5,11.5c6.9,6.9,16.1,10.7,25.8,10.7s18.9-3.8,25.8-10.7l23-23c14.2-14.2,14.2-37.4,0-51.6 l-11.5-11.5c8.2-14.4,14.6-29.7,19-45.7h16.3c20.1,0,36.5-16.4,36.5-36.5v-32.5c0-20.1-16.4-36.5-36.5-36.5h-16.3 c-4.4-16-10.7-31.3-19-45.7l11.5-11.5c14.2-14.2,14.2-37.4,0-51.6l-23-23c-6.9-6.9-16.1-10.7-25.8-10.7s-18.9,3.8-25.8,10.7 L343.45,71.8z M379.25,84.5c0.9-0.9,2.2-0.9,3.1,0l23,23c0.9,0.9,0.9,2.2,0,3.1l-21.1,21.1c-5.8,5.8-6.7,14.9-2.1,21.7 c12.1,18,20.3,38,24.5,59.2c1.6,8,8.6,13.8,16.8,13.8h29.9c1.2,0,2.2,1,2.2,2.2v32.5c0,1.2-1,2.2-2.2,2.2h-29.9 c-8.2,0-15.2,5.8-16.8,13.8c-4.2,21.3-12.5,41.2-24.5,59.2c-4.6,6.8-3.7,15.9,2.1,21.7l21.1,21.1c0.9,0.9,0.9,2.2,0,3.1l-23,23 c-0.8,0.9-2.2,0.8-3.1,0l-21.1-21.1c-5.8-5.8-14.9-6.7-21.7-2.1c-18.1,12.1-38,20.3-59.2,24.5c-8,1.6-13.8,8.6-13.8,16.8v29.9 c0,1.2-1,2.2-2.2,2.2h-32.5c-1.2,0-2.2-1-2.2-2.2v-29.9c0-8.2-5.8-15.2-13.8-16.8c-21.2-4.2-41.2-12.5-59.2-24.5 c-2.9-1.9-6.2-2.9-9.5-2.9c-4.4,0-8.8,1.7-12.1,5l-21.1,21.1c-0.9,0.9-2.2,0.9-3.1,0l-23-23c-0.9-0.9-0.9-2.2,0-3.1l21.1-21.1 c5.8-5.8,6.7-14.9,2.1-21.7c-12.1-18.1-20.3-38-24.5-59.2c-1.6-8-8.6-13.8-16.8-13.8h-30.1c-1.2,0-2.2-1-2.2-2.2v-32.5 c0-1.2,1-2.2,2.2-2.2h29.9c8.2,0,15.2-5.8,16.8-13.8c4.2-21.2,12.5-41.2,24.5-59.2c4.5-6.8,3.7-15.9-2.1-21.7l-21.1-21.1 c-0.4-0.4-0.6-0.9-0.6-1.6c0-0.6,0.2-1.1,0.6-1.5l23-23c0.9-0.9,2.2-0.9,3.1,0l21.1,21.1c5.8,5.8,14.9,6.7,21.7,2.1 c18.1-12.1,38-20.3,59.2-24.5c8-1.6,13.8-8.6,13.8-16.8V36.5c0-1.2,1-2.2,2.2-2.2h32.5c1.2,0,2.2,1,2.2,2.2v29.9 c0,8.2,5.8,15.2,13.8,16.8c21.2,4.2,41.2,12.5,59.2,24.5c6.8,4.5,15.9,3.7,21.7-2.1L379.25,84.5z"
+                fill={color} />
+        <path
+                d="M244.95,145.3c-54.9,0-99.6,44.7-99.6,99.6s44.7,99.6,99.6,99.6s99.6-44.7,99.6-99.6S299.85,145.3,244.95,145.3z M244.95,310.2c-36,0-65.3-29.3-65.3-65.3s29.3-65.3,65.3-65.3s65.3,29.3,65.3,65.3S280.95,310.2,244.95,310.2z"
+                fill={color} />
+    </g>
+</svg>
\ No newline at end of file

From 4123e25577d561ce13f09d5190d0d9695a245577 Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Wed, 5 Oct 2022 21:54:08 +0200
Subject: [PATCH 2/2] fix: Reset target position on destroy, #56

---
 src/Tooltip.js                   | 3 +++
 src/__tests__/useTooltip.test.js | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/Tooltip.js b/src/Tooltip.js
index b14dd2e..6851d63 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -128,6 +128,9 @@ class Tooltip {
 	}
 
 	async destroy() {
+		this.#target.setAttribute('style', 'position: null')
+		this.#target.setAttribute('aria-describedby', null)
+
 		await this.#removeTooltipFromTarget()
 
 		this.#disableTarget()
diff --git a/src/__tests__/useTooltip.test.js b/src/__tests__/useTooltip.test.js
index d176cec..0fce0f5 100644
--- a/src/__tests__/useTooltip.test.js
+++ b/src/__tests__/useTooltip.test.js
@@ -124,6 +124,7 @@ describe('useTooltip', () => {
 		it('Destroys tooltip', async () => {
 			action = useTooltip(target, options)
 			action.destroy(target)
+			expect(target).toHaveStyle('position: null')
 			await _enter(target)
 			expect(getElement('#content')).not.toBeInTheDocument()
 		})