diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52ccbd2..62e6a60 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+# 2.0.0
+
+- Now triggerElement is optional. Moreover you can pass a CSS selector for a trigger element, so you have full control over
+ trigger position.
+- Popover is a ParentComponent now, so you should pass only popover content as children. Children won't be evaluated when
+ popover is closed.
+
+```tsx
+
+
+
I'm the content!
+
+```
+
# 1.10.0
- Added `onComputePosition` callback which receives `ComputePositionDataReturn`
diff --git a/README.md b/README.md
index a2a25c2..2d4cefc 100644
--- a/README.md
+++ b/README.md
@@ -20,10 +20,13 @@ A really simple and minimalistic popover component for your apps.
### No wrapper nodes
-When you render the following code, only `button` (``) will appear in the DOM! No extra DOM nodes. Trigger node will have `data-popover-open` attribute, so you can use it in your CSS styles.
+No extra DOM nodes. Trigger node will have `data-popover-open` attribute, so you can use it in your CSS styles.
```tsx
-Toggle popover!} content={
Nice content here
} />
+
+
+
Nice content here
+
```
### Popover API support
@@ -41,10 +44,6 @@ Don't forget to reset default browser styles for `[popover]`:
}
```
-```tsx
-Toggle popover!} content={
Nice content here
} />
-```
-
### Full control over position
You can pass all the options for positioning. See docs for [computePosition](https://floating-ui.com/docs/computePosition).
@@ -52,13 +51,15 @@ You can pass all the options for positioning. See docs for [computePosition](htt
```tsx
import { flip } from "@floating-ui/dom";
+
I'm a trigger}
- content={
I'm a content
}
+ triggerElement="#trigger-element"
// Full control over position
autoUpdate
computePositionOptions={{ placement: "bottom-start", middleware: [flip()] }}
-/>;
+>
+
I'm a content
+;
```
### Multiple trigger events with vue-style modifiers
@@ -74,11 +75,13 @@ Events support the following modifiers:
- `passive`
```tsx
+
I'm a trigger}
- content={
+
```
### Custom anchor element
@@ -86,17 +89,18 @@ Events support the following modifiers:
Sometimes it's necessary the anchor element to be different from trigger element. You may pass optional selector to find anchor element:
```tsx
+
+
Toggle popover}
- content={
-
-
- This div is visible when popover is open!
-
- }
+ triggerElement="#trigger-element"
// Here you can pass CSS selector or HTML element
anchorElement="#anchor-element"
-/>
+>
+
+
+ This div is visible when popover is open!
+
+
```
## Installation
@@ -118,35 +122,41 @@ so you need to install required packages by yourself.
import { Popover } from "solid-simple-popover";
import { flip } from "@floating-ui/dom";
+
Toggle popover in DOM
- trigger={}
- // No wrapper nodes!
- content={
This div is visible when popover is open!
}
- // ------------------------------- The following props are optional
+ triggerElement="trigger-button"
// Full control over position
autoUpdate
computePositionOptions={{ placement: "bottom-start", middleware: [flip()] }}
// Highly customizable
sameWidth
dataAttributeName="data-open"
+ // You may pass custom selector here
anchorElement="#trigger-button"
+ // Astro support
contentElementSelector="div"
-/>;
+>
+
This div is visible when popover is open!
+;
```
## Types
```tsx
import { type ComputePositionConfig, type AutoUpdateOptions, type ComputePositionReturn } from "@floating-ui/dom";
-import { type JSXElement, type VoidComponent } from "solid-js";
+import { type JSXElement, type ParentComponent } from "solid-js";
export type PopoverProps = {
- /** HTML Element which triggers popover */
- trigger: JSXElement;
- /** Content to show. Must be HTML element */
- content: JSXElement;
+ /**
+ * HTML Element or CSS selector to find trigger element which triggers popover
+ */
+ triggerElement?: JSXElement;
+ /**
+ * HTML element or CSS selector to find anchor element which is used for positioning
+ * Can be used with Astro, because astro wraps trigger element into astro-slot
+ * and position breaks
+ */
+ anchorElement?: string | HTMLElement;
open?: boolean;
defaultOpen?: boolean;
/**
@@ -178,12 +188,6 @@ export type PopoverProps = {
* @default "data-popover-open"
*/
dataAttributeName?: string;
- /**
- * HTML element or CSS selector to find anchor element which is used for positioning
- * Can be used with Astro, because astro wraps trigger element into astro-slot
- * and position breaks
- */
- anchorElement?: string | HTMLElement;
/**
* CSS selector to find html element inside content
* Can be used with Astro, because astro wraps element into astro-slot
@@ -210,7 +214,7 @@ export type PopoverProps = {
onComputePosition?: (data: ComputePositionReturn) => void;
};
-export declare const Popover: VoidComponent;
+export declare const Popover: ParentComponent;
```
## License
diff --git a/package.json b/package.json
index fe6cc9d..f57b356 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "solid-simple-popover",
- "version": "1.10.0",
+ "version": "2.0.0",
"description": "A simple popover component for SolidJS",
"author": "Vladislav Lipatov",
"type": "module",