1.7.0

elite174 · Apr 19, 2024 · 2711920 · 2711920
1 parent 9d274ac
commit 2711920
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,11 @@
+# 1.7.0
+
+- Popover API enabled by default with mount fallback to `body`
+- Supported multiple trigger events with modifiers
+- Supported custom anchor element
+
 # 1.6.0
+
 - Added `disabled` prop which disables triggering popover. Popover now also looks at `disabled` state of triggering html element.
 
 # 1.5.0

diff --git a/README.md b/README.md
@@ -5,57 +5,19 @@
 
 A really simple and minimalistic popover component for your apps.
 
-## Installation
-
-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`
-
-## Usage
-
-```tsx
-import { Popover } from "solid-simple-popover";
-import { flip } from "@floating-ui/dom";
-
-<Popover
-  // Minimalistic
-  // You'll only see <button data-open="false" id="trigger-button">Toggle popover</button> in DOM
-  trigger={<button id="trigger-button">Toggle popover</button>}
-  // No wrapper nodes!
-  content={<div>This div is visible when popover is open!</div>}
-  // ------------------------------- The following props are optional
-  // Full control over position
-  autoUpdate
-  computePositionOptions={{ placement: "bottom-start", middleware: [flip()] }}
-  // Popover API support (where possible)
-  usePopoverAPI
-  // When popover API is not supported, fallback to mounting content to body
-  // SSR support
-  popoverAPIMountFallback="body"
-  // Highly customizable
-  sameWidth
-  dataAttributeName="data-open"
-  // Astro support
-  anchorElementSelector="#trigger-button"
-  contentElementSelector="div"
-/>;
-```
+**IMPORTANT:**
 
-**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).
+- 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).
+- From version `1.7.0` popoverAPI enabled by [default](https://caniuse.com/mdn-api_htmlelement_popover) with mount fallback to `body`
 
 ## Features
 
 - Minimalistic - no wrapper DOM nodes!
 - Popover API support (with fallback)
 - Full control over position
 - Works with SSR and Astro
+- Multiple trigger events with vue-style modifiers
+- Custom anchor element
 
 ### No wrapper nodes
 
@@ -95,6 +57,100 @@ 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";
+
+<Popover
+  trigger={<button type="button">I'm a trigger</button>}
+  content={<div>I'm a content</div>}
+  // Full control over position
+  autoUpdate
+  computePositionOptions={{ placement: "bottom-start", middleware: [flip()] }}
+/>;
+```
+
+### Multiple trigger events with vue-style modifiers
+
+You can pass multiple trigger events with modifiers:
+
+Events support the following modifiers:
+
+- `capture`
+- `once`
+- `prevent`
+- `stop`
+- `passive`
+
+```tsx
+<Popover
+  trigger={<button type="button">I'm a trigger</button>}
+  content={<div>I'm a content</div>}
+  triggerEvents="click.capture|pointerdown"
+/>
+```
+
+### Custom anchor element
+
+Sometimes it's necessary the anchor element to be different from trigger element. You may pass optional selector to find anchor element:
+
+```tsx
+<Popover
+  trigger={<button id="trigger-button">Toggle popover</button>}
+  content={
+    <div>
+      <button autofocus>hi</button>
+      This div is visible when popover is open!
+    </div>
+  }
+  anchorElementSelector="#anchor-element"
+/>
+```
+
+## Installation
+
+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`
+
+## Usage
+
+```tsx
+import { Popover } from "solid-simple-popover";
+import { flip } from "@floating-ui/dom";
+
+<Popover
+  // Minimalistic
+  // You'll only see <button data-open="false" id="trigger-button">Toggle popover</button> in DOM
+  trigger={<button id="trigger-button">Toggle popover</button>}
+  // No wrapper nodes!
+  content={<div>This div is visible when popover is open!</div>}
+  // ------------------------------- The following props are optional
+  // Full control over position
+  autoUpdate
+  computePositionOptions={{ placement: "bottom-start", middleware: [flip()] }}
+  // Popover API support (where possible)
+  usePopoverAPI
+  // When popover API is not supported, fallback to mounting content to body
+  // SSR support
+  popoverAPIMountFallback="body"
+  // Highly customizable
+  sameWidth
+  dataAttributeName="data-open"
+  // Astro support
+  anchorElementSelector="#trigger-button"
+  contentElementSelector="div"
+/>;
+```
+
+## Types
+
 ```tsx
 import { type ComputePositionConfig, type AutoUpdateOptions } from "@floating-ui/dom";
 import { type JSXElement, type VoidComponent } from "solid-js";
@@ -117,10 +173,13 @@ export type PopoverProps = {
   computePositionOptions?: ComputePositionConfig;
   /**
    * @default "pointerdown"
-   * if set to null no event would trigger popover,
-   * so you need to trigger it mannually
+   * If set to null no event would trigger popover,
+   * so you need to trigger it mannually.
+   * Event name or list of event names separated by "|" which triggers popover.
+   * You may also add modifiers like "capture", "passive", "once", "prevent", "stop" to the event separated by ".":
+   * @example "pointerdown.capture.once.prevent|click"
    */
-  triggerEvent?: string | null;
+  triggerEvents?: string | null;
   /**
    * HTMLElement or CSS selector (can be used in SSR) to mount popover content into
    */
@@ -137,7 +196,7 @@ export type PopoverProps = {
    */
   dataAttributeName?: string;
   /**
-   * CSS selector to find anchor html element inside trigger
+   * CSS selector to find anchor html element
    * Can be used with Astro, because astro wraps trigger element into astro-slot
    * and position breaks
    */
@@ -158,7 +217,10 @@ export type PopoverProps = {
    * @see https://floating-ui.com/docs/autoupdate#options
    */
   autoUpdateOptions?: AutoUpdateOptions;
-  /** Use popover API where possible */
+  /**
+   * Use popover API where possible
+   * @default true
+   */
   usePopoverAPI?: boolean;
   /**
    * Close popover on escape key press.
@@ -169,6 +231,7 @@ export type PopoverProps = {
   /**
    * HTMLElement or CSS selector (can be used in SSR) to mount popover content into
    * Fallback for browsers that don't support Popover API
+   * @default body
    */
   popoverAPIMountFallback?: HTMLElement | string;
   onOpenChange?: (open: boolean) => void;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "solid-simple-popover",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A simple popover component for SolidJS",
   "author": "Vladislav Lipatov",
   "type": "module",