@aria-ui/overlay - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

CHANGELOG.md

 # @aria-ui/overlay
 
+## 0.0.4
+
+### Patch Changes
+
+- 6fe6e2c: Add `OverlayAnchorElement`, `OverlayPositionerElement`, and `OverlayRootElement`.
+- 6fe6e2c: Rename the `popover` property to `hoist`.
+
 ## 0.0.3
@@ -4,0 +11,0 @@

dist/index.d.ts

 import * as _aria_ui_core from '@aria-ui/core';
-import { ConnectableElement } from '@aria-ui/core';
+import { BaseElement, ConnectableElement } from '@aria-ui/core';
 import { Placement, AutoUpdateOptions, OffsetOptions, Boundary, RootBoundary, ElementContext } from '@floating-ui/dom';
 
 /**
+ * A custom OverlayAnchor element.
+ *
  * @group OverlayAnchor
  */
+declare class OverlayAnchorElement extends BaseElement {
+    constructor();
+}
+
+/**
+ * @group OverlayAnchor
+ */
 declare function useOverlayAnchor(element: ConnectableElement): void;
@@ -44,3 +53,3 @@
      */
-    popover: boolean;
+    hoist: boolean;
     /**
@@ -148,3 +157,3 @@ * The distance between the reference and floating element.
     autoUpdate: true;
-    popover: false;
+    hoist: false;
     offset: null;
@@ -167,11 +176,68 @@ flip: false;
 /**
+ * A custom OverlayPositioner element.
+ *
+ * Properties: {@link OverlayPositionerProps}
+ *
  * @group OverlayPositioner
  */
+declare class OverlayPositionerElement extends BaseElement implements OverlayPositionerProps {
+    private _s;
+    constructor(props?: Partial<OverlayPositionerProps>);
+    /** @hidden */ get strategy(): OverlayPositionerProps["strategy"];
+    /** @hidden */ set strategy(v: OverlayPositionerProps["strategy"]);
+    /** @hidden */ get placement(): OverlayPositionerProps["placement"];
+    /** @hidden */ set placement(v: OverlayPositionerProps["placement"]);
+    /** @hidden */ get autoUpdate(): OverlayPositionerProps["autoUpdate"];
+    /** @hidden */ set autoUpdate(v: OverlayPositionerProps["autoUpdate"]);
+    /** @hidden */ get hoist(): OverlayPositionerProps["hoist"];
+    /** @hidden */ set hoist(v: OverlayPositionerProps["hoist"]);
+    /** @hidden */ get offset(): OverlayPositionerProps["offset"];
+    /** @hidden */ set offset(v: OverlayPositionerProps["offset"]);
+    /** @hidden */ get flip(): OverlayPositionerProps["flip"];
+    /** @hidden */ set flip(v: OverlayPositionerProps["flip"]);
+    /** @hidden */ get shift(): OverlayPositionerProps["shift"];
+    /** @hidden */ set shift(v: OverlayPositionerProps["shift"]);
+    /** @hidden */ get overlap(): OverlayPositionerProps["overlap"];
+    /** @hidden */ set overlap(v: OverlayPositionerProps["overlap"]);
+    /** @hidden */ get fitViewport(): OverlayPositionerProps["fitViewport"];
+    /** @hidden */ set fitViewport(v: OverlayPositionerProps["fitViewport"]);
+    /** @hidden */ get sameWidth(): OverlayPositionerProps["sameWidth"];
+    /** @hidden */ set sameWidth(v: OverlayPositionerProps["sameWidth"]);
+    /** @hidden */ get sameHeight(): OverlayPositionerProps["sameHeight"];
+    /** @hidden */ set sameHeight(v: OverlayPositionerProps["sameHeight"]);
+    /** @hidden */ get inline(): OverlayPositionerProps["inline"];
+    /** @hidden */ set inline(v: OverlayPositionerProps["inline"]);
+    /** @hidden */ get hide(): OverlayPositionerProps["hide"];
+    /** @hidden */ set hide(v: OverlayPositionerProps["hide"]);
+    /** @hidden */ get boundary(): OverlayPositionerProps["boundary"];
+    /** @hidden */ set boundary(v: OverlayPositionerProps["boundary"]);
+    /** @hidden */ get rootBoundary(): OverlayPositionerProps["rootBoundary"];
+    /** @hidden */ set rootBoundary(v: OverlayPositionerProps["rootBoundary"]);
+    /** @hidden */ get overflowPadding(): OverlayPositionerProps["overflowPadding"];
+    /** @hidden */ set overflowPadding(v: OverlayPositionerProps["overflowPadding"]);
+    /** @hidden */ get elementContext(): OverlayPositionerProps["elementContext"];
+    /** @hidden */ set elementContext(v: OverlayPositionerProps["elementContext"]);
+    /** @hidden */ get altBoundary(): OverlayPositionerProps["altBoundary"];
+    /** @hidden */ set altBoundary(v: OverlayPositionerProps["altBoundary"]);
+}
+
+/**
+ * @group OverlayPositioner
+ */
 declare function useOverlayPositioner(element: ConnectableElement, props?: Partial<OverlayPositionerProps>): _aria_ui_core.SingalState<Readonly<OverlayPositionerProps>>;
 
 /**
+ * A custom OverlayRoot element.
+ *
  * @group OverlayRoot
  */
+declare class OverlayRootElement extends BaseElement {
+    constructor();
+}
+
+/**
+ * @group OverlayRoot
+ */
 declare function useOverlayRoot(element: ConnectableElement): void;
 
-export { type OverlayPositionerProps, defaultOverlayPositionerProps, useOverlayAnchor, useOverlayPositioner, useOverlayRoot };
+export { OverlayAnchorElement, OverlayPositionerElement, type OverlayPositionerProps, OverlayRootElement, defaultOverlayPositionerProps, useOverlayAnchor, useOverlayPositioner, useOverlayRoot };

dist/index.js

@@ -0,1 +1,4 @@
+// src/overlay-anchor-element.gen.ts
+import { BaseElement } from "@aria-ui/core";
+
 // src/overlay-anchor-state.ts
@@ -19,2 +22,21 @@ import { useEffect } from "@aria-ui/core";
 
+// src/overlay-anchor-element.gen.ts
+var OverlayAnchorElement = class extends BaseElement {
+  constructor() {
+    super();
+    useOverlayAnchor(this);
+  }
+};
+
+// src/overlay-positioner-element.gen.ts
+import { BaseElement as BaseElement2 } from "@aria-ui/core";
+
+// src/overlay-positioner-state.ts
+import {
+  assignProps,
+  mapSignals,
+  mapValues,
+  useEffect as useEffect2
+} from "@aria-ui/core";
+
 // src/overlay-positioner-props.ts
@@ -25,3 +47,3 @@ var defaultOverlayPositionerProps = Object.freeze({
   autoUpdate: true,
-  popover: false,
+  hoist: false,
   offset: null,
@@ -43,10 +65,2 @@ flip: false,
 
-// src/overlay-positioner-state.ts
-import {
-  assignProps,
-  mapSignals,
-  mapValues,
-  useEffect as useEffect2
-} from "@aria-ui/core";
-
 // src/positioning.ts
@@ -82,3 +96,3 @@ import {
     }
-    if (options.popover && popoverAvailable) {
+    if (options.hoist && popoverAvailable) {
       floating.style.margin = "unset";
@@ -217,2 +231,157 @@ floating.setAttribute("popover", "manual");
 
+// src/overlay-positioner-element.gen.ts
+var OverlayPositionerElement = class extends BaseElement2 {
+  constructor(props) {
+    super();
+    this._s = useOverlayPositioner(this, props);
+  }
+  /** @hidden */
+  get strategy() {
+    return this._s.strategy.value;
+  }
+  /** @hidden */
+  set strategy(v) {
+    this._s.strategy.value = v;
+  }
+  /** @hidden */
+  get placement() {
+    return this._s.placement.value;
+  }
+  /** @hidden */
+  set placement(v) {
+    this._s.placement.value = v;
+  }
+  /** @hidden */
+  get autoUpdate() {
+    return this._s.autoUpdate.value;
+  }
+  /** @hidden */
+  set autoUpdate(v) {
+    this._s.autoUpdate.value = v;
+  }
+  /** @hidden */
+  get hoist() {
+    return this._s.hoist.value;
+  }
+  /** @hidden */
+  set hoist(v) {
+    this._s.hoist.value = v;
+  }
+  /** @hidden */
+  get offset() {
+    return this._s.offset.value;
+  }
+  /** @hidden */
+  set offset(v) {
+    this._s.offset.value = v;
+  }
+  /** @hidden */
+  get flip() {
+    return this._s.flip.value;
+  }
+  /** @hidden */
+  set flip(v) {
+    this._s.flip.value = v;
+  }
+  /** @hidden */
+  get shift() {
+    return this._s.shift.value;
+  }
+  /** @hidden */
+  set shift(v) {
+    this._s.shift.value = v;
+  }
+  /** @hidden */
+  get overlap() {
+    return this._s.overlap.value;
+  }
+  /** @hidden */
+  set overlap(v) {
+    this._s.overlap.value = v;
+  }
+  /** @hidden */
+  get fitViewport() {
+    return this._s.fitViewport.value;
+  }
+  /** @hidden */
+  set fitViewport(v) {
+    this._s.fitViewport.value = v;
+  }
+  /** @hidden */
+  get sameWidth() {
+    return this._s.sameWidth.value;
+  }
+  /** @hidden */
+  set sameWidth(v) {
+    this._s.sameWidth.value = v;
+  }
+  /** @hidden */
+  get sameHeight() {
+    return this._s.sameHeight.value;
+  }
+  /** @hidden */
+  set sameHeight(v) {
+    this._s.sameHeight.value = v;
+  }
+  /** @hidden */
+  get inline() {
+    return this._s.inline.value;
+  }
+  /** @hidden */
+  set inline(v) {
+    this._s.inline.value = v;
+  }
+  /** @hidden */
+  get hide() {
+    return this._s.hide.value;
+  }
+  /** @hidden */
+  set hide(v) {
+    this._s.hide.value = v;
+  }
+  /** @hidden */
+  get boundary() {
+    return this._s.boundary.value;
+  }
+  /** @hidden */
+  set boundary(v) {
+    this._s.boundary.value = v;
+  }
+  /** @hidden */
+  get rootBoundary() {
+    return this._s.rootBoundary.value;
+  }
+  /** @hidden */
+  set rootBoundary(v) {
+    this._s.rootBoundary.value = v;
+  }
+  /** @hidden */
+  get overflowPadding() {
+    return this._s.overflowPadding.value;
+  }
+  /** @hidden */
+  set overflowPadding(v) {
+    this._s.overflowPadding.value = v;
+  }
+  /** @hidden */
+  get elementContext() {
+    return this._s.elementContext.value;
+  }
+  /** @hidden */
+  set elementContext(v) {
+    this._s.elementContext.value = v;
+  }
+  /** @hidden */
+  get altBoundary() {
+    return this._s.altBoundary.value;
+  }
+  /** @hidden */
+  set altBoundary(v) {
+    this._s.altBoundary.value = v;
+  }
+};
+
+// src/overlay-root-element.gen.ts
+import { BaseElement as BaseElement3 } from "@aria-ui/core";
+
 // src/overlay-root-state.ts
@@ -224,3 +393,14 @@ import { createSignal } from "@aria-ui/core";
 }
+
+// src/overlay-root-element.gen.ts
+var OverlayRootElement = class extends BaseElement3 {
+  constructor() {
+    super();
+    useOverlayRoot(this);
+  }
+};
 export {
+  OverlayAnchorElement,
+  OverlayPositionerElement,
+  OverlayRootElement,
   defaultOverlayPositionerProps,
@@ -227,0 +407,0 @@ useOverlayAnchor,

package.json

 {
   "name": "@aria-ui/overlay",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
@@ -6,0 +6,0 @@ "sideEffects": false,

README.md

@@ -9,2 +9,10 @@ # @aria-ui/overlay
 
+### OverlayAnchorElement
+
+A custom OverlayAnchor element.
+
+```ts
+new OverlayAnchorElement(): OverlayAnchorElement
+```
+
 ### useOverlayAnchor()
@@ -18,2 +26,12 @@
 
+### OverlayPositionerElement
+
+A custom OverlayPositioner element.
+
+Properties: [OverlayPositionerProps](README.md#overlaypositionerprops)
+
+```ts
+new OverlayPositionerElement(props?: Partial<OverlayPositionerProps>): OverlayPositionerElement
+```
+
 ### OverlayPositionerProps
@@ -30,2 +48,3 @@
 | `hide` | `boolean` | Whether to hide the floating element when the reference element or the<br />floating element is fully clipped.<br /><br />**Default**<br />`false` |
+| `hoist` | `boolean` | Whether to use the browser Popover API to place the floating element on top<br />of other page content. When enabled, the floating element won't be clipped<br />by an ancestor. This provides a similar result to React's `<Portals>` or<br />Vue's `<Teleport>`.<br /><br />**See**<br />https://developer.mozilla.org/en-US/docs/Web/API/Popover_API<br /><br />**Default**<br />`false` |
 | `inline` | `boolean` | Whether to improve positioning for inline reference elements that span over<br />multiple lines.<br /><br />**Default**<br />`false` |
@@ -36,3 +55,2 @@ | `offset` | `null` \| `OffsetOptions` | The distance between the reference and floating element.<br /><br />**Default**<br />`null` |
 | `placement` | `Placement` | The initial placement of the floating element<br /><br />**Default**<br />`"top"` |
-| `popover` | `boolean` | Whether to use the browser Popover API to place the floating element on top<br />of other page content. When enabled, the floating element won't be clipped<br />by an ancestor. This provides a similar result to React's `<Portals>` or<br />Vue's `<Teleport>`.<br /><br />**See**<br />https://developer.mozilla.org/en-US/docs/Web/API/Popover_API<br /><br />**Default**<br />`false` |
 | `rootBoundary` | `RootBoundary` | **See**<br />https://floating-ui.com/docs/detectoverflow<br /><br />**Default**<br />`'viewport'` |
@@ -55,2 +73,10 @@ | `sameHeight` | `boolean` | Whether to constrain the floating element's height so that it matches the<br />reference element.<br /><br />**Default**<br />`false` |
 
+### OverlayRootElement
+
+A custom OverlayRoot element.
+
+```ts
+new OverlayRootElement(): OverlayRootElement
+```
+
 ### useOverlayRoot()
@@ -57,0 +83,0 @@

src/index.ts

@@ -10,3 +10,5 @@ /**
 
+export { OverlayAnchorElement } from "./overlay-anchor-element.gen"
 export { useOverlayAnchor } from "./overlay-anchor-state"
+export { OverlayPositionerElement } from "./overlay-positioner-element.gen"
 export {
@@ -17,2 +19,3 @@ defaultOverlayPositionerProps,
 export { useOverlayPositioner } from "./overlay-positioner-state"
+export { OverlayRootElement } from "./overlay-root-element.gen"
 export { useOverlayRoot } from "./overlay-root-state"

src/overlay-positioner-props.ts

@@ -47,3 +47,3 @@ import type {
    */
-  popover: boolean
+  hoist: boolean
 
@@ -174,3 +174,3 @@ // ------------------------------------------------------------------
   autoUpdate: true,
-  popover: false,
+  hoist: false,
 
@@ -177,0 +177,0 @@ offset: null,

src/positioning.ts

@@ -54,3 +54,3 @@ import {
 
-    if (options.popover && popoverAvailable) {
+    if (options.hoist && popoverAvailable) {
       // Override the `margin: auto` style, which breaks the positioning.
@@ -57,0 +57,0 @@ floating.style.margin = "unset"

temp/src/index.d.ts

@@ -9,6 +9,9 @@ /**
  */
+export { OverlayAnchorElement } from "./overlay-anchor-element.gen";
 export { useOverlayAnchor } from "./overlay-anchor-state";
+export { OverlayPositionerElement } from "./overlay-positioner-element.gen";
 export { defaultOverlayPositionerProps, type OverlayPositionerProps, } from "./overlay-positioner-props";
 export { useOverlayPositioner } from "./overlay-positioner-state";
+export { OverlayRootElement } from "./overlay-root-element.gen";
 export { useOverlayRoot } from "./overlay-root-state";
 //# sourceMappingURL=index.d.ts.map

temp/src/overlay-positioner-props.d.ts

@@ -36,3 +36,3 @@ import type { AutoUpdateOptions, Boundary, ElementContext, OffsetOptions, Placement, RootBoundary } from "@floating-ui/dom";
      */
-    popover: boolean;
+    hoist: boolean;
     /**
@@ -140,3 +140,3 @@ * The distance between the reference and floating element.
     autoUpdate: true;
-    popover: false;
+    hoist: false;
     offset: null;
@@ -143,0 +143,0 @@ flip: false;

No alert changes

Improved metrics

Total package byte prevSize

107453

increased by23.46%

Number of package files

42

increased by27.27%

Lines of code

1405

increased by37.88%

Number of lines in readme file

82

increased by46.43%

No dependency changes