@aria-ui/overlay - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/index.d.ts

@@ -1,5 +0,17 @@
-import { BaseElement, ConnectableElement, SignalState } from '@aria-ui/core';
+import * as _aria_ui_core from '@aria-ui/core';
+import { ConnectableElement, SignalState } from '@aria-ui/core';
 import { Placement, AutoUpdateOptions, OffsetOptions, Boundary, RootBoundary, ElementContext, ReferenceElement } from '@floating-ui/dom';
 
 /**
+ * @group OverlayAnchor
+ * @internal
+ */
+interface OverlayAnchorProps {
+}
+
+declare const OverlayAnchorElement_base: {
+    new (): _aria_ui_core.BaseElement & OverlayAnchorProps;
+    prototype: HTMLElement;
+};
+/**
  * A custom OverlayAnchor element.
@@ -9,4 +21,3 @@ *
  */
-declare class OverlayAnchorElement extends BaseElement {
-    constructor();
+declare class OverlayAnchorElement extends OverlayAnchorElement_base {
 }
@@ -16,4 +27,5 @@
  * @group OverlayAnchor
+ * @hidden
  */
-declare function useOverlayAnchor(element: ConnectableElement): void;
+declare function useOverlayAnchor(element: ConnectableElement): {};
 
@@ -187,50 +199,12 @@ /**
 
+declare const OverlayPositionerElement_base: {
+    new (): _aria_ui_core.BaseElement & OverlayPositionerProps;
+    prototype: HTMLElement;
+};
 /**
  * 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 transform(): OverlayPositionerProps["transform"];
-    /** @hidden */ set transform(v: OverlayPositionerProps["transform"]);
-    /** @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"]);
+declare class OverlayPositionerElement extends OverlayPositionerElement_base {
 }
@@ -240,2 +214,3 @@
  * @group OverlayPositioner
+ * @hidden
  */
@@ -253,2 +228,13 @@ declare function useOverlayPositioner(element: ConnectableElement, props?: Partial<OverlayPositionerProps>): SignalState<OverlayPositionerProps>;
 /**
+ * @group OverlayRoot
+ * @internal
+ */
+interface OverlayRootProps {
+}
+
+declare const OverlayRootElement_base: {
+    new (): _aria_ui_core.BaseElement & OverlayRootProps;
+    prototype: HTMLElement;
+};
+/**
  * A custom OverlayRoot element.
@@ -258,4 +244,3 @@ *
  */
-declare class OverlayRootElement extends BaseElement {
-    constructor();
+declare class OverlayRootElement extends OverlayRootElement_base {
 }
@@ -265,5 +250,6 @@
  * @group OverlayRoot
+ * @hidden
  */
-declare function useOverlayRoot(element: ConnectableElement): void;
+declare function useOverlayRoot(element: ConnectableElement): {};
 
 export { OverlayAnchorElement, type OverlayPositionerDataAttributes, OverlayPositionerElement, type OverlayPositionerProps, OverlayRootElement, defaultOverlayPositionerProps, useOverlayAnchor, useOverlayPositioner, useOverlayPositionerState, useOverlayRoot };

dist/index.js

 // src/overlay-anchor.element.gen.ts
-import { BaseElement } from "@aria-ui/core";
+import { ElementMixin } from "@aria-ui/core";
 
+// src/overlay-anchor.props.ts
+var defaultOverlayAnchorProps = Object.freeze(
+  {}
+);
+
 // src/overlay-anchor.state.ts
@@ -20,23 +25,15 @@ import { useEffect } from "@aria-ui/core";
   });
+  return {};
 }
 
 // src/overlay-anchor.element.gen.ts
-var OverlayAnchorElement = class extends BaseElement {
-  constructor() {
-    super();
-    useOverlayAnchor(this);
-  }
+var OverlayAnchorElement = class extends ElementMixin(
+  useOverlayAnchor,
+  defaultOverlayAnchorProps
+) {
 };
 
 // src/overlay-positioner.element.gen.ts
-import { BaseElement as BaseElement2 } from "@aria-ui/core";
+import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
 
-// src/overlay-positioner.state.ts
-import {
-  assignProps,
-  mapSignals,
-  mapValues,
-  useAnimationFrame
-} from "@aria-ui/core";
-
 // src/overlay-positioner.props.ts
@@ -65,2 +62,10 @@ var defaultOverlayPositionerProps = Object.freeze({
 
+// src/overlay-positioner.state.ts
+import {
+  assignProps,
+  mapSignals,
+  mapValues,
+  useAnimationFrame
+} from "@aria-ui/core";
+
 // src/positioning.ts
@@ -248,164 +253,16 @@ import {
 // 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 transform() {
-    return this._s.transform.value;
-  }
-  /** @hidden */
-  set transform(v) {
-    this._s.transform.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;
-  }
+var OverlayPositionerElement = class extends ElementMixin2(
+  useOverlayPositioner,
+  defaultOverlayPositionerProps
+) {
 };
 
 // src/overlay-root.element.gen.ts
-import { BaseElement as BaseElement3 } from "@aria-ui/core";
+import { ElementMixin as ElementMixin3 } from "@aria-ui/core";
 
+// src/overlay-root.props.ts
+var defaultOverlayRootProps = Object.freeze(
+  {}
+);
+
 // src/overlay-root.state.ts
@@ -416,10 +273,10 @@ import { createSignal } from "@aria-ui/core";
   referenceContext.provide(element, reference);
+  return {};
 }
 
 // src/overlay-root.element.gen.ts
-var OverlayRootElement = class extends BaseElement3 {
-  constructor() {
-    super();
-    useOverlayRoot(this);
-  }
+var OverlayRootElement = class extends ElementMixin3(
+  useOverlayRoot,
+  defaultOverlayRootProps
+) {
 };
@@ -426,0 +283,0 @@ export {

package.json

 {
   "name": "@aria-ui/overlay",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": false,
@@ -12,5 +12,5 @@ "sideEffects": false,
   "dependencies": {
-    "@aria-ui/core": "^0.0.12",
+    "@aria-ui/core": "^0.0.13",
     "@floating-ui/dom": "^1.6.3",
-    "@zag-js/dom-query": "^0.46.0"
+    "@zag-js/dom-query": "^0.49.0"
   },
@@ -17,0 +17,0 @@ "devDependencies": {

README.md

@@ -17,8 +17,2 @@ # @aria-ui/overlay
 
-### useOverlayAnchor()
-
-```ts
-function useOverlayAnchor(element: ConnectableElement): void;
-```
-
 ## OverlayPositioner
@@ -30,8 +24,28 @@
 
-Properties: [OverlayPositionerProps](README.md#overlaypositionerprops)
-
 ```ts
-new OverlayPositionerElement(props?: Partial<OverlayPositionerProps>): OverlayPositionerElement
+new OverlayPositionerElement(): OverlayPositionerElement
 ```
 
+| Property | Type | Description |
+| :-- | :-- | :-- |
+| `altBoundary` | `boolean` | **See**<br />https://floating-ui.com/docs/detectoverflow<br /><br />**Default**<br />`true` |
+| `autoUpdate` | `boolean` \| `Partial`\<`Object`\> | Options to activate auto-update listeners<br /><br />**See**<br />https://floating-ui.com/docs/autoUpdate<br /><br />**Default**<br />`true` |
+| `boundary` | `Boundary` | **See**<br />https://floating-ui.com/docs/detectoverflow<br /><br />**Default**<br />`'clippingAncestors'` |
+| `elementContext` | `ElementContext` | **See**<br />https://floating-ui.com/docs/detectoverflow<br /><br />**Default**<br />`'floating'` |
+| `fitViewport` | `boolean` | Whether to constrain the floating element's width and height to not exceed<br />the viewport.<br /><br />**Default**<br />`false` |
+| `flip` | `boolean` \| `Placement`[] | Whether to flip the `placement` in order to keep it in view when the<br />preferred placement(s) will overflow the clipping boundary. You can also<br />provide an array of placements to try sequentially if the preferred<br />`placement` does not fit.<br /><br />**Default**<br />`false` |
+| `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](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)<br />to place the floating element on top of other page content. When enabled,<br />the floating element won't be clipped by an ancestor. This provides a<br />similar result to React's `<Portals>` or Vue's `<Teleport>`.<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` |
+| `offset` | `null` \| `OffsetOptions` | The distance between the reference and floating element.<br /><br />**Default**<br />`null` |
+| `overflowPadding` | `number` | **See**<br />https://floating-ui.com/docs/detectoverflow<br /><br />**Default**<br />`0` |
+| `overlap` | `boolean` | Whether the floating element can overlap the reference element to keep it<br />in view.<br /><br />**Default**<br />`false` |
+| `placement` | `Placement` | The initial placement of the floating element<br /><br />**Default**<br />`"top"` |
+| `rootBoundary` | `RootBoundary` | **See**<br />https://floating-ui.com/docs/detectoverflow<br /><br />**Default**<br />`'viewport'` |
+| `sameHeight` | `boolean` | Whether to constrain the floating element's height so that it matches the<br />reference element.<br /><br />**Default**<br />`false` |
+| `sameWidth` | `boolean` | Whether to constrain the floating element's width so that it matches the<br />reference element.<br /><br />**Default**<br />`false` |
+| `shift` | `boolean` | Whether the floating element should shift to keep it in view.<br /><br />**Default**<br />`false` |
+| `strategy` | `"absolute"` \| `"fixed"` | The strategy to use for positioning<br /><br />**Default**<br />`"absolute"` |
+| `transform` | `boolean` | Whether to use `transform: translate3d()` for positioning instead of `top`<br />and `left` (layout) to place the floating element.<br /><br />**Default**<br />`false` |
+
 ### OverlayPositionerDataAttributes
@@ -68,11 +82,2 @@
 
-### useOverlayPositioner()
-
-```ts
-function useOverlayPositioner(
-  element: ConnectableElement,
-  props?: Partial<OverlayPositionerProps>,
-): SignalState<OverlayPositionerProps>;
-```
-
 ## OverlayRoot
@@ -87,7 +92,1 @@
 ```
-
-### useOverlayRoot()
-
-```ts
-function useOverlayRoot(element: ConnectableElement): void;
-```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

23186

decreased by-8.62%

Lines of code

511

decreased by-23.96%

Number of lines in readme file

89

decreased by-1.11%

Dependency changes

• + Added@aria-ui/core@0.0.13(transitive)

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@zag-js/dom-query@0.49.0(transitive)

• + Addedserver-dom-shim@1.0.2(transitive)

• - Removed@aria-ui/core@0.0.12(transitive)

• - Removed@zag-js/dom-query@0.46.0(transitive)

• Updated@aria-ui/core@^0.0.13

• Updated@zag-js/dom-query@^0.49.0