From b39a4162a41184df559ac5ebe4ce8ccbcedf7d23 Mon Sep 17 00:00:00 2001
From: Julien Chaumond <julien@huggingface.co>
Date: Wed, 15 Nov 2023 17:27:13 +0100
Subject: [PATCH] rm Dropdown

---
 .../lib/components/Dropdown/Dropdown.svelte   | 75 -------------------
 .../DropdownEntry/DropdownEntry.svelte        | 44 -----------
 .../DropdownMenu/DropdownMenu.svelte          | 68 -----------------
 3 files changed, 187 deletions(-)
 delete mode 100644 js/src/lib/components/Dropdown/Dropdown.svelte
 delete mode 100644 js/src/lib/components/DropdownEntry/DropdownEntry.svelte
 delete mode 100644 js/src/lib/components/DropdownMenu/DropdownMenu.svelte

diff --git a/js/src/lib/components/Dropdown/Dropdown.svelte b/js/src/lib/components/Dropdown/Dropdown.svelte
deleted file mode 100644
index 5ba5132ee..000000000
--- a/js/src/lib/components/Dropdown/Dropdown.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-	import type { SvelteComponent } from "svelte";
-
-	import DropdownEntry from "../DropdownEntry/DropdownEntry.svelte";
-	import DropdownMenu from "../DropdownMenu/DropdownMenu.svelte";
-	import IconCaretDown from "../Icons/IconCaretDown.svelte";
-
-	export let classNames = "";
-	export let btnClassNames = "";
-	export let btnIcon: typeof SvelteComponent | undefined = undefined;
-	export let btnIconClassNames = "";
-	export let btnLabel = "";
-	export let disabled = false;
-	export let entries: Array<{
-		classNames?: string;
-		href?: string;
-		icon?: typeof SvelteComponent;
-		iconClassNames?: string;
-		onClick?: (e: MouseEvent) => void;
-		label?: string;
-		noFollow?: boolean;
-		underline?: boolean;
-		targetBlank?: boolean;
-	}> = [];
-	export let forceMenuAlignement: "left" | "right" | "screen-center" | undefined = undefined;
-	export let menuClassNames = "";
-	export let noBtnClass: boolean | undefined = undefined;
-	export let withBtnCaret = false;
-	export let isOpen = false;
-
-	let element: HTMLElement | undefined = undefined;
-</script>
-
-<div class="relative {classNames}" bind:this={element}>
-	<!-- Button -->
-	<button
-		class="{btnClassNames}
-			{!noBtnClass ? 'btn w-full cursor-pointer text-sm' : ''}"
-		on:click={() => (isOpen = !disabled && !isOpen)}
-		type="button"
-	>
-		<!-- The "button" slot can overwrite the defaut button content -->
-		{#if $$slots.button}
-			<slot name="button" />
-		{:else}
-			{#if btnIcon}
-				<svelte:component this={btnIcon} classNames="mr-1.5 {btnIconClassNames}" />
-			{/if}
-			{btnLabel}
-		{/if}
-		{#if withBtnCaret}
-			<IconCaretDown classNames="-mr-1 text-gray-500" />
-		{/if}
-	</button>
-	<!-- /Button -->
-	<!-- Menu -->
-	{#if isOpen}
-		<DropdownMenu
-			classNames={menuClassNames}
-			dropdownElement={element}
-			forceAlignement={forceMenuAlignement}
-			onClose={() => (isOpen = false)}
-		>
-			<!-- The "menu" slot can overwrite the defaut menu content -->
-			{#if $$slots.menu}
-				<slot name="menu" />
-			{:else}
-				{#each entries as entry}
-					<DropdownEntry {...entry} />
-				{/each}
-			{/if}
-		</DropdownMenu>
-	{/if}
-	<!-- Menu -->
-</div>
diff --git a/js/src/lib/components/DropdownEntry/DropdownEntry.svelte b/js/src/lib/components/DropdownEntry/DropdownEntry.svelte
deleted file mode 100644
index 73ef1b7f1..000000000
--- a/js/src/lib/components/DropdownEntry/DropdownEntry.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-	import type { SvelteComponent } from "svelte";
-
-	export let classNames = "";
-	export let href: string | undefined = undefined;
-	export let icon: typeof SvelteComponent | undefined = undefined;
-	export let iconClassNames = "";
-	export let label = "";
-	export let noFollow = false;
-	export let underline = false;
-	export let onClick: (e: MouseEvent) => void = () => {};
-	export let targetBlank = false;
-	export let type: "link" | "button" | "submit" | undefined = undefined;
-
-	const element = type === undefined ? (href !== undefined ? "a" : "button") : type === "link" ? "a" : "button";
-</script>
-
-<li>
-	<svelte:element
-		this={element}
-		class="flex w-full cursor-pointer items-center whitespace-nowrap px-3 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-gray-800
-		{classNames} {underline ? 'hover:underline' : ''}"
-		{href}
-		rel={element === "a" && noFollow ? "nofollow" : undefined}
-		target={element === "a" && targetBlank ? "_blank" : undefined}
-		on:click={e => {
-			if (type === "submit") {
-				e.stopPropagation();
-			}
-			onClick(e);
-		}}
-		type={element === "button" ? type : undefined}
-	>
-		<!-- Adding children to the DropdownEntry element overwrite the default label/icon stuff -->
-		{#if $$slots.default}
-			<slot />
-		{:else}
-			{#if icon}
-				<svelte:component this={icon} classNames="mr-1.5 flex-none {iconClassNames}" />
-			{/if}
-			<span class="truncate">{label}</span>
-		{/if}
-	</svelte:element>
-</li>
diff --git a/js/src/lib/components/DropdownMenu/DropdownMenu.svelte b/js/src/lib/components/DropdownMenu/DropdownMenu.svelte
deleted file mode 100644
index a77bcb147..000000000
--- a/js/src/lib/components/DropdownMenu/DropdownMenu.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-
-	type Alignement = "left" | "right" | "screen-center";
-
-	export let classNames = "";
-	export let dropdownElement: HTMLElement | undefined = undefined;
-	export let forceAlignement: Alignement | undefined = undefined;
-	export let onClose: () => void;
-
-	// MUST be set to left if forceAlignement is undefined or else
-	// the browser won't be able to properly compute x and width
-	let alignement: Alignement = forceAlignement ?? "left";
-	let element: HTMLElement | undefined;
-	let docWidth: number | undefined;
-
-	onMount(() => {
-		document.addEventListener("click", handleClickDocument);
-		screen?.orientation?.addEventListener("change", onClose);
-
-		docWidth = document.documentElement.clientWidth;
-		const bbox = element?.getBoundingClientRect();
-		if (bbox) {
-			const left = bbox.left ?? 0;
-			const width = bbox.width ?? 0;
-			if (!forceAlignement) {
-				alignement = left + width > docWidth ? "right" : "left";
-			}
-			if (element && alignement === "screen-center") {
-				element.style.transform = `translateX(${docWidth / 2 - width / 2 - bbox.left}px)`;
-			}
-		}
-		return () => {
-			document.removeEventListener("click", handleClickDocument);
-			screen?.orientation?.removeEventListener("change", onClose);
-		};
-	});
-
-	function handleClickDocument(e: MouseEvent) {
-		// We ignore clicks that happens inside the Dropdown itself
-		// (prevent race condition  with other click handlers)
-		const targetElement = e.target as HTMLElement;
-		if (targetElement !== dropdownElement && !dropdownElement?.contains(targetElement)) {
-			onClose();
-		}
-	}
-
-	function handleResize() {
-		if (docWidth !== document.documentElement.clientWidth) {
-			onClose();
-		}
-	}
-</script>
-
-<svelte:window on:resize={handleResize} on:blur={onClose} />
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-	bind:this={element}
-	class="absolute top-full z-10 mt-1 w-auto min-w-0 max-w-xs overflow-hidden rounded-xl border border-gray-100 bg-white shadow-lg
-		{alignement === 'right' ? 'right-0' : 'left-0'}
-		{classNames}"
-	on:click|stopPropagation={onClose}
->
-	<ul class="min-w-full">
-		<slot />
-	</ul>
-</div>