diff --git a/CHANGELOG.md b/CHANGELOG.md index 62e6a60..79ab876 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 3.0.0 + +- Dropped floating UI. Used CSS anchor positioning API. See updated types in README. + # 2.0.0 - Now triggerElement is optional. Moreover you can pass a CSS selector for a trigger element, so you have full control over diff --git a/README.md b/README.md index 2d4cefc..73d1552 100644 --- a/README.md +++ b/README.md @@ -3,17 +3,15 @@ [![version](https://img.shields.io/npm/v/solid-simple-popover?style=for-the-badge)](https://www.npmjs.com/package/solid-simple-popover) ![npm](https://img.shields.io/npm/dw/solid-simple-popover?style=for-the-badge) -A really simple and minimalistic popover component for your apps. +A really simple and minimalistic popover component for your apps with CSS anchor position support. -**IMPORTANT:** - -- You may add `width: max-content` to the content element by yourself to avoid layout interference as it described [here](https://floating-ui.com/docs/computeposition#initial-layout). +**V2 docs are [here](https://github.com/elite174/solid-simple-popover/tree/v2)** ## Features - Minimalistic - no wrapper DOM nodes! - Popover API support -- Full control over position +- Full control over position (CSS Anchor positioning) - Works with SSR and Astro - Multiple trigger events with vue-style modifiers - Custom anchor element @@ -49,14 +47,11 @@ Don't forget to reset default browser styles for `[popover]`: You can pass all the options for positioning. See docs for [computePosition](https://floating-ui.com/docs/computePosition). ```tsx -import { flip } from "@floating-ui/dom"; -
I'm a content
; @@ -108,28 +103,21 @@ Sometimes it's necessary the anchor element to be different from trigger element This package has the following peer dependencies: ```json -"@floating-ui/dom": "^1.5", "solid-js": "^1.8" ``` so you need to install required packages by yourself. -`pnpm i solid-js @floating-ui/dom solid-simple-popover` +`pnpm i solid-js solid-simple-popover` ## Usage ```tsx import { Popover } from "solid-simple-popover"; -import { flip } from "@floating-ui/dom"; string; + left?: (anchorName: string) => string; + right?: (anchorName: string) => string; + bottom?: (anchorName: string) => string; + }; export type PopoverProps = { /** * HTML Element or CSS selector to find trigger element which triggers popover @@ -164,10 +179,6 @@ export type PopoverProps = { * Note: if your trigger element has `disabled` state (like button or input), popover also won't be triggered */ disabled?: boolean; - /** Should content have the same width as trigger */ - sameWidth?: boolean; - /** Options for floating-ui computePosition function */ - computePositionOptions?: ComputePositionConfig; /** * @default "pointerdown" * If set to null no event would trigger popover, @@ -194,16 +205,6 @@ export type PopoverProps = { * and position breaks */ contentElementSelector?: string; - /** - * autoUpdate option for floating ui - * @see https://floating-ui.com/docs/autoupdate - */ - autoUpdate?: boolean; - /** - * Applies only if autoUpdate is true - * @see https://floating-ui.com/docs/autoupdate#options - */ - autoUpdateOptions?: AutoUpdateOptions; /** * Close popover on escape key press. * Uses 'keydown' event with 'Escape' key. @@ -211,9 +212,24 @@ export type PopoverProps = { */ closeOnEscape?: boolean; onOpenChange?: (open: boolean) => void; - onComputePosition?: (data: ComputePositionReturn) => void; + /** @default absolute */ + targetPosition?: "absolute" | "fixed"; + /** + * @see https://css-tricks.com/css-anchor-positioning-guide/#aa-position-area + * @default "end center" + */ + targetPositionArea?: TargetPositionArea; + /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-position-visibility */ + positionVisibility?: "always" | "anchors-visible" | "no-overflow"; + /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-position-try-fallbacks */ + positionTryFallbacks?: (anchorName: string) => string[]; + /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-position-try-order */ + positionTryOrder?: "normal" | "most-width" | "most-height" | "most-block-size" | "most-inline-size"; + /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-size */ + targetWidth?: string; + /** @see https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-size */ + targetHeight?: string; }; - export declare const Popover: ParentComponent; ``` diff --git a/package.json b/package.json index f4b4613..c25b6b3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "solid-simple-popover", - "version": "2.0.0", + "version": "3.0.0", "description": "A simple popover component for SolidJS", "author": "Vladislav Lipatov", "type": "module", @@ -23,7 +23,7 @@ "keywords": [ "solid", "popover", - "floating-ui" + "css anchor" ], "license": "MIT", "publishConfig": { diff --git a/vite.config.ts b/vite.config.ts index d034d41..9ca0643 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -20,7 +20,7 @@ export default defineConfig({ outDir: "dist", minify: false, rollupOptions: { - external: ["solid-js", "solid-js/web", "@floating-ui/dom"], + external: ["solid-js", "solid-js/web"], }, }, });