diff --git a/.changeset/pre.json b/.changeset/pre.json
index 99ddd64d8..69510b770 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -17,7 +17,6 @@
"@svelte-put/resize": "3.0.0",
"@svelte-put/shortcut": "3.1.0",
"@svelte-put/toc": "5.0.1",
- "@svelte-put/tooltip": "1.0.1",
"@svelte-put/preprocess-external-link": "0.0.0",
"@svelte-put/preprocess-markdown": "0.0.0",
"@svelte-put/async-stack": "0.0.0-next.0",
@@ -79,3 +78,4 @@
"wise-points-own"
]
}
+
diff --git a/README.md b/README.md
index 7f9d67721..a797b7153 100644
--- a/README.md
+++ b/README.md
@@ -30,13 +30,14 @@ Useful svelte stuff to put in your projects
| [@svelte-put/inline-svg][github.inline-svg] | dynamically inline SVGs | [![npm.inline-svg.badge]][npm.inline-svg] | [Changelog][github.inline-svg.changelog] | [![docs.badge]][docs.inline-svg] |
| [@svelte-put/lockscroll][github.lockscroll] | lock scroll, hide scrollbar | [![npm.lockscroll.badge]][npm.lockscroll] | [Changelog][github.lockscroll.changelog] | [![docs.badge]][docs.lockscroll] |
| [@svelte-put/movable][github.movable] | move node on mousedown | [![npm.movable.badge]][npm.movable] | [Changelog][github.movable.changelog] | [![docs.badge]][docs.movable] |
+| [@svelte-put/preaction][github.preaction] | move node on mousedown | [![npm.preaction.badge]][npm.preaction] | [Changelog][github.preaction.changelog] | [![docs.badge]][docs.preaction] |
+| [@svelte-put/popover][github.popover] | move node on mousedown | [![npm.popover.badge]][npm.popover] | [Changelog][github.popover.changelog] | [![docs.badge]][docs.popover] |
| [@svelte-put/preprocess-auto-slug][github.preprocess-auto-slug] | auto add `id` and anchor to selected nodes | [![npm.preprocess-auto-slug.badge]][npm.preprocess-auto-slug] | [Changelog][github.preprocess-auto-slug.changelog] | [![docs.badge]][docs.preprocess-auto-slug] |
| [@svelte-put/preprocess-external-link][github.preprocess-external-link] | auto add `id` and anchor to selected nodes | [![npm.preprocess-external-link.badge]][npm.preprocess-external-link] | [Changelog][github.preprocess-external-link.changelog] | [![docs.badge]][docs.preprocess-external-link] |
| [@svelte-put/qr][github.qr] | render QR as `img` or `svg` | [![npm.qr.badge]][npm.qr] | [Changelog][github.qr.changelog] | [![docs.badge]][docs.qr] |
| [@svelte-put/resize][github.resize] | wrapper for ResizeObserver | [![npm.resize.badge]][npm.resize] | [Changelog][github.resize.changelog] | [![docs.badge]][docs.resize] |
| [@svelte-put/shortcut][github.shortcut] | add keyboard shortcuts to node | [![npm.shortcut.badge]][npm.shortcut] | [Changelog][github.shortcut.changelog] | [![docs.badge]][docs.shortcut] |
| [@svelte-put/toc][github.toc] | action & utilities for building table of contents | [![npm.toc.badge]][npm.toc] | [Changelog][github.toc.changelog] | [![docs.badge]][docs.toc] |
-| [@svelte-put/tooltip][github.tooltip] | type-safe headless tooltip builder | [![npm.tooltip.badge]][npm.tooltip] | [Changelog][github.tooltip.changelog] | [![docs.badge]][docs.tooltip] |
@@ -125,6 +128,10 @@ pnpm turbo
[npm.lockscroll]: https://www.npmjs.com/package/@svelte-put/lockscroll
[npm.movable.badge]: https://img.shields.io/npm/v/@svelte-put/movable
[npm.movable]: https://www.npmjs.com/package/@svelte-put/movable
+[npm.popover.badge]: https://img.shields.io/npm/v/@svelte-put/popover
+[npm.popover]: https://www.npmjs.com/package/@svelte-put/popover
+[npm.preaction.badge]: https://img.shields.io/npm/v/@svelte-put/preaction
+[npm.preaction]: https://www.npmjs.com/package/@svelte-put/preaction
[npm.preprocess-auto-slug.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-auto-slug
[npm.preprocess-auto-slug]: https://www.npmjs.com/package/@svelte-put/preprocess-auto-slug
[npm.preprocess-external-link.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-external-link
@@ -137,8 +144,6 @@ pnpm turbo
[npm.shortcut]: https://www.npmjs.com/package/@svelte-put/shortcut
[npm.toc.badge]: https://img.shields.io/npm/v/@svelte-put/toc
[npm.toc]: https://www.npmjs.com/package/@svelte-put/toc
-[npm.tooltip.badge]: https://img.shields.io/npm/v/@svelte-put/tooltip
-[npm.tooltip]: https://www.npmjs.com/package/@svelte-put/tooltip
@@ -157,12 +162,13 @@ pnpm turbo
[docs.inline-svg]: https://svelte-put.vnphanquang.com/docs/inline-svg
[docs.lockscroll]: https://svelte-put.vnphanquang.com/docs/lockscroll
[docs.movable]: https://svelte-put.vnphanquang.com/docs/movable
+[docs.preaction]: https://svelte-put.vnphanquang.com/docs/preaction
+[docs.popover]: https://svelte-put.vnphanquang.com/docs/popover
[docs.preprocess-auto-slug]: https://svelte-put.vnphanquang.com/docs/preprocess-auto-slug
[docs.preprocess-external-link]: https://svelte-put.vnphanquang.com/docs/preprocess-external-link
[docs.qr]: https://svelte-put.vnphanquang.com/docs/qr
[docs.resize]: https://svelte-put.vnphanquang.com/docs/resize
[docs.shortcut]: https://svelte-put.vnphanquang.com/docs/shortcut
[docs.toc]: https://svelte-put.vnphanquang.com/docs/toc
-[docs.tooltip]: https://svelte-put.vnphanquang.com/docs/tooltip
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
diff --git a/packages/tooltip/CHANGELOG.md b/packages/tooltip/CHANGELOG.md
deleted file mode 100644
index bdefe8ebd..000000000
--- a/packages/tooltip/CHANGELOG.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Changelog
-
-## 1.0.2
-
-### Patch Changes
-
-- [`5ca7d70`](https://github.com/vnphanquang/svelte-put/commit/5ca7d701a61b6d2f90e7a6b21f644b8ad93fc33e) Thanks [@vnphanquang](https://github.com/vnphanquang)! - restrict to svelte 3 and 4 (not compatible with 5)
-
-## 1.0.1
-
-### Patch Changes
-
-- [`bd5258c`](https://github.com/vnphanquang/svelte-put/commit/bd5258cd60acb9bb9b81015f362ac1bdad7a0f3f) Thanks [@vnphanquang](https://github.com/vnphanquang)! - update type of node to include `SVGElement`
-
-## 1.0.0
-
-### Major Changes
-
-- [#212](https://github.com/vnphanquang/svelte-put/pull/212) [`6abadbf`](https://github.com/vnphanquang/svelte-put/commit/6abadbf3d013120291f5290f60f5accef32fa6b1) Thanks [@vnphanquang](https://github.com/vnphanquang)! - first generalized api, here be dragons
diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md
deleted file mode 100644
index b27e7b76a..000000000
--- a/packages/tooltip/README.md
+++ /dev/null
@@ -1,62 +0,0 @@
-
-
-# `@svelte-put/tooltip`
-
-[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]
-
-Type-safe, headless, extensible tooltip builder via Svelte action `use:tooltip`
-
-
-
-## `svelte-put`
-
-This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].
-
-## Usage & Documentation
-
-[See the dedicated documentation page here][docs].
-
-## Quick Start
-
-```html
-
-
-
-```
-
-## [Changelog][github.changelog]
-
-
-
-[github.monorepo]: https://github.com/vnphanquang/svelte-put
-[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/tooltip/CHANGELOG.md
-[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=
-
-
-
-[npm.badge]: https://img.shields.io/npm/v/@svelte-put/tooltip
-[npm]: https://www.npmjs.com/package/@svelte-put/tooltip
-[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/tooltip?label=minzipped
-[bundlephobia]: https://bundlephobia.com/package/@svelte-put/tooltip
-[repl]: https://svelte.dev/repl/ac411d28f87b4b6d9942e050fa29e0cd
-[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
-[docs]: https://svelte-put.vnphanquang.com/docs/tooltip
-[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
deleted file mode 100644
index 1397bc177..000000000
--- a/packages/tooltip/package.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
- "name": "@svelte-put/tooltip",
- "version": "1.0.2",
- "description": "over-engineered, type-safe, headless, and extensible tooltip builder vs Svelte action",
- "main": "src/index.js",
- "module": "src/index.js",
- "types": "types/index.d.ts",
- "type": "module",
- "exports": {
- ".": {
- "types": "./types/index.d.ts",
- "import": "./src/index.js"
- }
- },
- "publishConfig": {
- "access": "public"
- },
- "files": [
- "src",
- "types"
- ],
- "scripts": {
- "lint": "eslint . --ignore-path=\"../../.eslintignore\"",
- "format": "prettier --ignore-path ../../.prettierignore --write .",
- "dts": "dts-buddy --write && publint",
- "prepublishOnly": "turbo run dts --filter=@svelte-put/tooltip"
- },
- "keywords": [
- "svelte",
- "action",
- "tooltip",
- "headless",
- "extensible",
- "typescript",
- "type-safe"
- ],
- "author": {
- "email": "vnphanquang@gmail.com",
- "name": "Quang Phan",
- "url": "https://github.com/vnphanquang"
- },
- "license": "MIT",
- "homepage": "https://svelte-put.vnphanquang.com/docs/tooltip",
- "repository": {
- "type": "git",
- "url": "git+https://github.com/vnphanquang/svelte-put.git",
- "directory": "packages/tooltip"
- },
- "bugs": {
- "url": "https://github.com/vnphanquang/svelte-put/issues"
- },
- "devDependencies": {
- "@internals/tsconfig": "workspace:*"
- },
- "peerDependencies": {
- "svelte": "^5.0.0-next.172"
- },
- "volta": {
- "extends": "../../package.json"
- }
-}
-
diff --git a/packages/tooltip/src/index.js b/packages/tooltip/src/index.js
deleted file mode 100644
index 9f04cf319..000000000
--- a/packages/tooltip/src/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Copyright (c) Quang Phan. All rights reserved. Licensed under the MIT license.
-
-export * from './tooltip.js';
diff --git a/packages/tooltip/src/public.d.ts b/packages/tooltip/src/public.d.ts
deleted file mode 100644
index be942bd6e..000000000
--- a/packages/tooltip/src/public.d.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import type { SvelteComponent, ComponentType } from 'svelte';
-import type { Action } from 'svelte/action';
-
-/** */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type TooltipComponentBaseProps = Record;
-
-/** */
-export type TooltipContent =
- | string
- | ComponentType>
- | {
- /**
- * Svelte component to render as tooltip
- */
- component: ComponentType>;
- /**
- * Props to pass to component, if any. Note that if required props are not passed down,
- * a runtime error will be thrown.
- */
- props?: Props;
- };
-
-/** */
-export type TooltipContainer = {
- /**
- * class name(s) to assign to tooltip container. Typically needed depending
- * on the positioning strategy
- */
- class?:
- | string
- | {
- default?: string;
- /** toggled on when tooltip is visible */
- visible?: string;
- };
- /**
- * HTML tag to render the tooltip container.
- * Defaults to `div`
- */
- tag?: string;
- /**
- * `Element` to render the tooltip container as child.
- * Defaults to `parent` of the node action is placed on
- */
- target?: 'parent' | 'self' | 'body' | Element | ((node: Element, tooltip: Element) => void);
- /**
- * number of milliseconds to debounce show / hide state of the tooltip.
- * Defaults to `false` (show / hide immediately)
- */
- debounce?: false | number;
- /**
- * config for handling of `pointer-events` on the container element
- * Defaults to `true`
- *
- *
- * By default `pointer-events` is set to `none` by default, and `auto` when triggered.
- * Set to `false` to disable default behavior, or provide string(s) to
- * corresponding states
- */
- pointerEvents?:
- | boolean
- | {
- default?: string;
- /** value when tooltip is visible */
- visible?: string;
- };
- /**
- * the attribute to toggle in respond to tooltip's visibility state.
- * Defaults to `data-visible`.
- *
- *
- * Set to `false` to disable, or provide a string to use as attribute name.
- */
- visibleAttribute?: boolean | string;
- /**
- * config for accessibility
- * Defaults to `true`
- *
- *
- * By default:
- * - (for container element) `role` is set to `tooltip`,
- * - (for container element) `id` is taken from `aria-describedby` of
- * the node action is placed on (if any),
- * or auto-generated from a global counter,
- * - (for node on which action is used) `aria-describedby` is set to the `id` of
- * the container element (if not already exists)
- *
- * Set to `false` to disable default behavior, or provide string(s) to
- * the corresponding attributes
- */
- aria?:
- | boolean
- | {
- role?: string;
- id?: string;
- };
-};
-
-/** */
-export type TooltipComputeContent =
- | string
- | SvelteComponent;
-
-/** */
-export type TooltipComputeParameter<
- Props extends TooltipComponentBaseProps,
- ComputeContent extends TooltipComputeContent,
-> = {
- node: Element;
- tooltip: Element;
- content: ComputeContent;
-};
-
-/** */
-export type TooltipCompute<
- Props extends TooltipComponentBaseProps,
- ComputeContent extends TooltipComputeContent,
-> = (
- param: TooltipComputeParameter,
-) => void | (() => void) | Promise void)>;
-
-/** */
-export type TooltipAttributes = {
- /** if provided will be set to `id` of the tooltip element, auto-generated otherwise */
- 'aria-describedby'?: string;
-};
-
-/** */
-export type PreparedTooltipAction = Action<
- Element,
- Parameter | undefined,
- TooltipAttributes
->;
-
-/** */
-export type TooltipParameter<
- Props extends TooltipComponentBaseProps,
- Content extends TooltipContent,
- ComputeContent extends TooltipComputeContent,
-> = TooltipContainer & {
- content: Content;
- compute?: TooltipCompute;
-};
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
deleted file mode 100644
index dc69c3cce..000000000
--- a/packages/tooltip/src/tooltip.js
+++ /dev/null
@@ -1,319 +0,0 @@
-import { debounce, isContentConfigDirectComponent } from './utils.js';
-
-let autoincrement = 0;
-
-/**
- * @template {Record} Events
- * @template {Record} Slots
- * @template {import('./public').TooltipComponentBaseProps} Props
- * @overload
- * @param {import('./public').TooltipContainer & {
- * content: import('svelte').ComponentType>;
- * compute?: import('./public').TooltipCompute>;
- * }} param
- * @returns {import('./public').PreparedTooltipAction}
- */
-/**
- * @template {Record} Events
- * @template {Record} Slots
- * @template {import('./public').TooltipComponentBaseProps} Props
- * @overload
- * @param {import('./public').TooltipContainer & {
- * content: {
- * component: import('svelte').ComponentType>;
- * props?: Props,
- * },
- * compute?: import('./public').TooltipCompute>;
- * }} param
- * @returns {import('./public').PreparedTooltipAction}
- */
-/**
- * @overload
- * @param {import('./public').TooltipContainer & {
- * content: string;
- * compute?: import('./public').TooltipCompute<{}, string>;
- * }} param
- * @returns {import('./public').PreparedTooltipAction}
- */
-/**
- * @template {import('./public').TooltipComponentBaseProps} Props
- * @template {import('./public').TooltipContent} Content
- * @template {import('./public').TooltipComputeContent} ComputeContent
- * @param {import('./public').TooltipParameter} param
- * @returns {import('./public').PreparedTooltipAction}
- */
-export function prepare(param) {
- return function (node, composedParam) {
- let content = param.content;
-
- let composedContent;
- if (typeof content === 'string' && typeof composedParam === 'string') {
- composedContent = composedParam;
- } else if (isContentConfigDirectComponent(content)) {
- composedContent = {
- component: content,
- props: composedParam,
- };
- } else if ('component' in /** @type {any} */ (content)) {
- composedContent = {
- component: content.component,
- props: {
- ...content.props,
- ...composedParam,
- },
- };
- } else {
- composedContent = content;
- }
-
- return tooltip(
- node,
- /** @type {any} */ ({
- ...param,
- content: composedContent,
- }),
- );
- };
-}
-/**
- * @template {Record} Events
- * @template {Record} Slots
- * @template {import('./public').TooltipComponentBaseProps} Props
- * @template {import('./public').TooltipContent} Content
- * @template {import('./public').TooltipComputeContent} ComputeContent
- * @overload
- * @param {Element} node
- * @param {import('./public').TooltipContainer & {
- * content: import('svelte').ComponentType>;
- * compute?: import('./public').TooltipCompute>;
- * }} param
- * @returns {import('svelte/action').ActionReturn, import('./public').TooltipAttributes>}
- */
-/**
- * @template {Record} Events
- * @template {Record} Slots
- * @template {import('./public').TooltipComponentBaseProps} Props
- * @template {import('./public').TooltipContent} Content
- * @template {import('./public').TooltipComputeContent} ComputeContent
- * @overload
- * @param {Element} node
- * @param {import('./public').TooltipContainer & {
- * content: {
- * component: import('svelte').ComponentType>;
- * props?: Props,
- * },
- * compute?: import('./public').TooltipCompute>;
- * }} param
- * @returns {import('svelte/action').ActionReturn, import('./public').TooltipAttributes>}
- */
-/**
- * @overload
- * @param {Element} Node
- * @param {import('./public').TooltipContainer & {
- * content: string;
- * compute?: import('./public').TooltipCompute<{}, string>;
- * }} param
- * @returns {import('svelte/action').ActionReturn, import('./public').TooltipAttributes>}
- */
-/**
- * @template {import('./public').TooltipComponentBaseProps} Props
- * @template {import('./public').TooltipContent} Content
- * @template {import('./public').TooltipComputeContent} ComputeContent
- * @param {Element} node
- * @param {import('./public').TooltipParameter} param
- * @returns {import('svelte/action').ActionReturn, import('./public').TooltipAttributes>}
- */
-export function tooltip(node, param) {
- const { tag = 'div', content, target = 'parent', compute, debounce: debounceMs } = param;
-
- let classes = {
- default: '',
- visible: '',
- };
- if (typeof param.class === 'string') {
- classes.default = param.class;
- } else if (param.class) {
- classes = {
- ...classes,
- ...param.class,
- };
- }
-
- let pointerEvents = {
- default: 'none',
- visible: 'all',
- };
- if (typeof param.pointerEvents === 'boolean') {
- if (!param.pointerEvents) {
- pointerEvents = {
- default: '',
- visible: '',
- };
- }
- } else {
- pointerEvents = {
- ...pointerEvents,
- ...param.pointerEvents,
- };
- }
-
- let visibleAttribute = '';
- if (param.visibleAttribute === true || param.visibleAttribute === undefined) {
- visibleAttribute = 'data-visible';
- } else if (param.visibleAttribute) {
- visibleAttribute = param.visibleAttribute;
- }
-
- let aria = { role: '', id: '' };
- if (param.aria === undefined || param.aria === true) {
- aria.role = 'tooltip';
- aria.id = node.getAttribute('aria-describedby') ?? `tooltip-${++autoincrement}`;
- } else if (param.aria) {
- aria.role = param.aria.role ?? 'tooltip';
- aria.id =
- param.aria.id ?? node.getAttribute('aria-describedby') ?? `tooltip-${++autoincrement}`;
- }
-
- const tooltip = document.createElement(tag);
- if (aria.role) tooltip.role = aria.role;
- if (aria.id) {
- if (!node.hasAttribute('aria-describedby')) {
- node.setAttribute('aria-describedby', aria.id);
- }
- tooltip.id = aria.id;
- }
- tooltip.style.pointerEvents = pointerEvents.default;
- if (visibleAttribute) tooltip.setAttribute(visibleAttribute, 'false');
- if (classes.default) tooltip.classList.toggle(classes.default, true);
-
- if (target === 'parent') {
- if (node.parentElement) {
- if (node.nextSibling) {
- node.parentElement.insertBefore(tooltip, node.nextSibling);
- } else {
- node.parentElement.appendChild(tooltip);
- }
- } else {
- node.appendChild(tooltip);
- }
- } else if (target === 'body') {
- document.body.appendChild(tooltip);
- } else if (target === 'self') {
- node.appendChild(tooltip);
- } else if (typeof target === 'function') {
- target(node, tooltip);
- } else {
- target.appendChild(tooltip);
- }
-
- /** @type {string | import('svelte').SvelteComponent} */
- let computedContent;
- /** @type {undefined | (() => void)} */
- let computeCleanUp = undefined;
- const wait = 'requestIdleCallback' in window ? requestIdleCallback : setTimeout;
- wait(() => {
- if (typeof content === 'string') {
- computedContent = tooltip.innerHTML = content;
- } else if (isContentConfigDirectComponent(content)) {
- computedContent = new content({ target: tooltip });
- } else {
- const { component: Component, props } = content;
- computedContent = new Component({
- target: tooltip,
- props: /** @type {any} */ ({
- ...props,
- visible: false,
- }),
- });
- }
- const computed = compute?.({
- node,
- tooltip,
- content: /** @type {any} */ (computedContent),
- });
- if (typeof computed === 'function') {
- computeCleanUp = computed;
- } else if (computed !== undefined) {
- computed.then((resolved) => {
- if (resolved) {
- computeCleanUp = resolved;
- }
- });
- }
- });
-
- let isMouseWithinNode = false;
- let isMouseWithinTooltip = false;
- let isNodeInFocus = false;
- function onMouseEnterNode() {
- isMouseWithinNode = true;
- debounceToggle();
- }
- function onMouseLeaveNode() {
- isMouseWithinNode = false;
- debounceToggle();
- }
- function onFocusNode() {
- isNodeInFocus = true;
- debounceToggle();
- }
- function onBlurNode() {
- isNodeInFocus = false;
- debounceToggle();
- }
- function onMouseEnterTooltip() {
- isMouseWithinTooltip = true;
- debounceToggle();
- }
- function onMouseLeaveTooltip() {
- isMouseWithinTooltip = false;
- debounceToggle();
- }
-
- /**
- * @param {boolean | undefined} force
- */
- function toggle(force = undefined) {
- const visible = force ?? (isMouseWithinNode || isMouseWithinTooltip || isNodeInFocus);
- if (visibleAttribute) tooltip.setAttribute(visibleAttribute, visible.toString());
- tooltip.style.pointerEvents = visible ? pointerEvents.visible : pointerEvents.default;
- if (classes.visible) tooltip.classList.toggle(classes.visible, visible);
- if (typeof computedContent !== 'string') computedContent.$set(/** @type {any} */ ({ visible }));
- if (visible) {
- window.addEventListener('keydown', listenForEscape);
- } else {
- window.removeEventListener('keydown', listenForEscape);
- }
- }
- const debounceToggle = debounce(toggle, debounceMs || 0);
-
- /**
- * @param {KeyboardEvent} e
- */
- function listenForEscape(e) {
- if (e.key === 'Escape') {
- debounceToggle(false);
- }
- }
-
- node.addEventListener('mouseenter', onMouseEnterNode);
- node.addEventListener('mouseleave', onMouseLeaveNode);
- node.addEventListener('focus', onFocusNode);
- node.addEventListener('blur', onBlurNode);
- tooltip.addEventListener('mouseenter', onMouseEnterTooltip);
- tooltip.addEventListener('mouseleave', onMouseLeaveTooltip);
-
- return {
- destroy() {
- node.removeEventListener('mouseenter', onMouseEnterNode);
- node.removeEventListener('mouseleave', onMouseLeaveNode);
- node.removeEventListener('focus', onFocusNode);
- node.removeEventListener('blur', onBlurNode);
- tooltip.removeEventListener('mouseenter', onMouseEnterTooltip);
- tooltip.removeEventListener('mouseleave', onMouseLeaveTooltip);
- window.removeEventListener('keydown', listenForEscape);
-
- computeCleanUp?.();
- },
- };
-}
diff --git a/packages/tooltip/src/utils.js b/packages/tooltip/src/utils.js
deleted file mode 100644
index 281f294fd..000000000
--- a/packages/tooltip/src/utils.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * @template {any[]} Args
- * @template {(...args: Args) => void} Func
- * @param {Func} callback
- * @param {number} ms
- * @returns {(...args: Args) => void}
- */
-export function debounce(callback, ms) {
- /** @type {ReturnType} */
- let timeoutId;
- /**
- * @param {Args} args
- */
- return function (...args) {
- clearTimeout(timeoutId);
- timeoutId = setTimeout(() => {
- callback.apply(null, args);
- }, ms);
- };
-}
-
-/**
- * @template {import('./public').TooltipComponentBaseProps} Props
- * @param {import('./public').TooltipContent} content
- * @returns {content is (import('svelte').ComponentType>)}
- */
-export function isContentConfigDirectComponent(content) {
- return typeof content !== 'string' && !('component' in content);
-}
diff --git a/packages/tooltip/tsconfig.json b/packages/tooltip/tsconfig.json
deleted file mode 100644
index ff5b5bbf5..000000000
--- a/packages/tooltip/tsconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "include": ["src/**/*"],
- "extends": "@internals/tsconfig/base.package.js.json"
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d92fe69b6..0a60f3a0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -402,16 +402,6 @@ importers:
specifier: workspace:*
version: link:../../internals/tsconfig
- packages/tooltip:
- dependencies:
- svelte:
- specifier: ^5.0.0-next.172
- version: 5.0.0-next.172
- devDependencies:
- '@internals/tsconfig':
- specifier: workspace:*
- version: link:../../internals/tsconfig
-
sites/docs:
dependencies:
'@floating-ui/dom':
diff --git a/sites/docs/src/routes/docs/(package)/tooltip/+page.md.svelte b/sites/docs/src/routes/docs/(package)/tooltip/+page.md.svelte
index ab95c98f2..1326dff58 100644
--- a/sites/docs/src/routes/docs/(package)/tooltip/+page.md.svelte
+++ b/sites/docs/src/routes/docs/(package)/tooltip/+page.md.svelte
@@ -1,5 +1,7 @@
## Deprecation Notice
+This package has been dropped in favor of [@svelte-put/popover](/docs/popover). `@svelte-put/popover` is a more generic implementation that relies on [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Element/popover), which has landed in baseline in 2024 and provides better fallback for progressive enhancement in case Javascript is not available.
+
---
Happy migrating 😅