@vertexvis/ui 0.0.16-canary.0 → 0.1.0-testing.0

package/dist/esm/tslib.es6-99cd0de8.js

@@ -0,0 +1,65 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __extends as _, __read as a, __assign as b };

package/dist/esm/vertex-auto-resize-textarea.entry.js

@@ -1,2 +1,3 @@
-export { A as vertex_auto_resize_textarea } from './auto-resize-textarea-ac4b5f3b.js';
+export { A as vertex_auto_resize_textarea } from './auto-resize-textarea-087fecdb.js';
 import './index-72f28b71.js';
+import './slots-fbb5afb3.js';

package/dist/esm/vertex-draggable-popover.entry.js

@@ -1,3 +1,3 @@
-export { D as vertex_draggable_popover } from './draggable-popover-5f14cca5.js';
+export { D as vertex_draggable_popover } from './draggable-popover-8ef3aec6.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-menu.entry.js

@@ -1,3 +1,3 @@
-export { M as vertex_menu } from './menu-f35637ca.js';
+export { M as vertex_menu } from './menu-daa7f9c9.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-popover.entry.js

@@ -1,3 +1,3 @@
-export { P as vertex_popover } from './popover-4375db1b.js';
+export { P as vertex_popover } from './popover-67c88e4b.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-result-list.entry.js

@@ -1,4 +1,5 @@
-export { R as vertex_result_list } from './result-list-9c83f22a.js';
+export { R as vertex_result_list } from './result-list-36cfb08a.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './templates-51212dae.js';
+import './templates-797420bf.js';
+import './tslib.es6-99cd0de8.js';

package/dist/esm/vertex-search-bar.entry.js

@@ -1,4 +1,5 @@
-export { S as vertex_search_bar } from './search-bar-600fb8d9.js';
+export { S as vertex_search_bar } from './search-bar-59cc151d.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './templates-51212dae.js';
+import './templates-797420bf.js';
+import './tslib.es6-99cd0de8.js';

package/dist/esm/vertex-tooltip.entry.js

@@ -1,3 +1,5 @@
-export { T as vertex_tooltip } from './tooltip-e78d2c7a.js';
+export { T as vertex_tooltip } from './tooltip-14b65fb5.js';
 import './index-72f28b71.js';
+import './tslib.es6-99cd0de8.js';
 import './index-9c609209.js';
+import './slots-fbb5afb3.js';

package/dist/types/components/menu/menu.d.ts

@@ -1,6 +1,6 @@
 import { h } from '../../stencil-public-runtime';
 import { Point } from '../../types/point';
-import { PopoverPlacement } from '../popover/popover';
+import { Popover, PopoverPlacement } from '../popover/popover';
 export declare class Menu {
   /**
    * Whether this menu is animated on open
@@ -33,6 +33,7 @@ export declare class Menu {
    * determine fixed placement of a menu.
    */
   position?: Point;
+  popoverProps?: Partial<Popover>;
   /**
    * Emitted when the menu is closed.
    */

package/dist/types/components/popover/middleware.d.ts

@@ -0,0 +1,3 @@
+import { DetectOverflowOptions, FlipOptions, Middleware, OffsetOptions } from '@floating-ui/dom';
+export declare function getDefaultMiddleware(offsetOptions?: OffsetOptions, overflowOptions?: DetectOverflowOptions, flipOptions?: FlipOptions): Middleware[];
+export declare function preventOverflow(overflowOptions?: DetectOverflowOptions): Middleware;

package/dist/types/components/popover/popover.d.ts

@@ -1,12 +1,8 @@
-import { Placement } from '@popperjs/core';
-import { FlipModifier } from '@popperjs/core/lib/modifiers/flip';
-import { PreventOverflowModifier } from '@popperjs/core/lib/modifiers/preventOverflow';
+import { DetectOverflowOptions, FlipOptions, OffsetOptions, Placement } from '@floating-ui/dom';
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { Point } from '../../types/point';
 export type PopoverPlacement = Placement;
 export type PopoverResizeBehavior = 'fixed' | 'dynamic';
-export type PopoverOverflowBehavior = Pick<Partial<PreventOverflowModifier>, 'enabled' | 'options'>;
-export type PopoverFlipBehavior = Pick<Partial<FlipModifier>, 'enabled' | 'options'>;
 export declare class Popover {
   /**
    * Whether this popover's content is visible.
@@ -19,8 +15,7 @@ export declare class Popover {
    * 'top', 'top-start', 'top-end',
    * 'bottom', 'bottom-start', 'bottom-end',
    * 'right', 'right-start', 'right-end',
-   * 'left', 'left-start', 'left-end',
-   * 'auto', 'auto-start', or 'auto-end', and
+   * 'left', 'left-start', 'left-end', and
    * defaults to 'bottom-start'.
    *
    * Note: placement will adjust based on the amount
@@ -32,6 +27,14 @@ export declare class Popover {
    * The position of the popover anchor.
    */
   position?: Point | string;
+  /**
+   * An optional DOMRect that represents the virtual location of the
+   * anchor element. When provided, the popover will position based
+   * on the specified bounds to give a similar behavior to the
+   * `anchorSelector` or `anchor` slot based popovers without needing
+   * to provide the element itself.
+   */
+  anchorBounds?: Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
   /**
    * Whether to show a backdrop that dismisses this popover.
    * Defaults to true, and is invisible, but can be styled.
@@ -74,25 +77,37 @@ export declare class Popover {
   /**
    * The `overflowBehavior` prop can be provided to customize the
    * popover's behavior when approaching its boundary. This maps
-   * to the behavior used internally with PopperJS.
-   * See https://popper.js.org/docs/v2/modifiers/prevent-overflow
+   * to the behavior used internally with FloatingUI.
+   * See https://floating-ui.com/docs/detectOverflow#options
    * for info on what properties can be specified.
    *
    * If a `boundarySelector` is provided, it will be automatically
    * added to the set of options.
    */
-  overflowBehavior?: PopoverOverflowBehavior;
+  overflowBehavior?: DetectOverflowOptions;
   /**
    * The `flipBehavior` prop can be provided to customize the
    * popover's behavior when approaching its boundary. This maps
-   * to the behavior used internally with PopperJS.
-   * See https://popper.js.org/docs/v2/modifiers/flip
+   * to the behavior used internally with FloatingUI.
+   * See https://floating-ui.com/docs/flip#options
    * for info on what properties can be specified.
    *
    * If a `boundarySelector` is provided, `flip` behavior will
    * automatically be disabled.
    */
-  flipBehavior?: PopoverFlipBehavior;
+  flipBehavior?: FlipOptions;
+  /**
+   * The `offsetBehavior` prop can be provided to customize the
+   * popover's visual offset from the anchor. This maps
+   * to the behavior used internally with FloatingUI.
+   * See https://floating-ui.com/docs/offset#options
+   * for info on what properties can be specified.
+   *
+   * If no offset is specified, a default of 4px will be used
+   * for popovers anchored to an element and no offset will be
+   * applied for popovers anchored to a point.
+   */
+  offsetBehavior?: OffsetOptions;
   /**
    * Indicates if the position of the popover should be updated when the
    * popover's content size changes.
@@ -102,38 +117,39 @@ export declare class Popover {
    * Emitted whenever the popover is dismissed.
    */
   dismissed: EventEmitter<void>;
+  private opened;
+  private computedPlacement;
   private hostElement;
-  private popperRendered;
   private wrapperRef?;
   private anchorPointRef?;
   private anchorPosition?;
-  private popper?;
   private viewportWidth?;
   private viewportHeight?;
   private resizeTimeout?;
-  private opened;
-  private contentResizeObserver?;
+  private shouldUpdatePosition;
+  private updateDispose?;
+  private middleware;
   private partialWindow;
   constructor();
-  /**
-   * @internal
-   */
-  contentResizeObserverFactory: (cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver;
   connectedCallback(): void;
   componentDidUpdate(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   updatePosition(position?: Point | string): void;
+  updatePlacement(): void;
   updateOpened(open?: boolean): void;
   updateAnimated(): void;
+  updateMiddleware(): void;
   /**
    * @private Used for internals or testing.
    */
   setWindow(partialWindow: Pick<Window, 'innerWidth' | 'innerHeight'>): void;
   render(): h.JSX.IntrinsicElements;
-  private attemptCreatePopper;
-  private createPopper;
+  private updateListener;
+  private handlePositionUpdate;
+  private handleMiddlewareChange;
   private getSlottedAnchorElement;
+  private getAnchorBoundsVirtualElement;
   private handleResize;
   private updateViewport;
   private getTransformClass;

package/dist/types/components/popover/util.d.ts

@@ -0,0 +1,2 @@
+import { ComputePositionReturn, Middleware, Placement, ReferenceElement } from '@floating-ui/dom';
+export declare function computeUpdatedPosition(referenceElement: ReferenceElement, contentElement: HTMLElement, placement: Placement, middleware: Middleware[]): Promise<ComputePositionReturn>;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -37,10 +37,20 @@ export declare class Tooltip {
    * Defaults to true.
    */
   animated: boolean;
+  hostElement: HTMLElement;
   private open;
+  private tooltipId;
   private openTimeout?;
+  private targetElement?;
+  private contentElement?;
+  private displayedSlottedContent?;
   constructor();
+  disconnectedCallback(): void;
   render(): h.JSX.IntrinsicElements;
+  private addElement;
+  private removeElement;
+  private createPopoverElement;
+  private createContentElement;
   private handlePointerEnter;
   private handlePointerLeave;
   private clearOpenTimeout;

package/dist/types/components.d.ts

@@ -12,11 +12,12 @@ import { ChipColor, ChipVariant } from "./components/chip/chip";
 import { InputChangeEventDetail, TextSize } from "./components/text-field/text-field";
 import { SelectionChangedDetails } from "./components/color-circle-picker/color-circle-picker";
 import { Point } from "./types/point";
-import { PopoverPlacement } from "./components/popover/popover";
+import { Popover, PopoverPlacement } from "./components/popover/popover";
 import { VertexExpandableType } from "./components/expandable/expandable";
 import { IconName, IconSize } from "./types/icon";
 import { IconButtonIconColor, IconButtonVariant } from "./components/icon-button/icon-button";
-import { PopoverFlipBehavior, PopoverOverflowBehavior, PopoverPlacement as PopoverPlacement1, PopoverResizeBehavior } from "./components/popover/popover";
+import { PopoverPlacement as PopoverPlacement1, PopoverResizeBehavior } from "./components/popover/popover";
+import { DetectOverflowOptions, FlipOptions, OffsetOptions } from "@floating-ui/dom";
 import { RadioChangeEventDetail } from "./components/radio/radio";
 import { HorizontalDragDirection, ResizableBoundsUpdate, ResizeEventDetails, VerticalDragDirection } from "./components/resizable/resizable";
 import { Result } from "./components/result-list/result-list";
@@ -395,6 +396,7 @@ export namespace Components {
           * When menu is placed relative to an anchor, popover will use this placement.
          */
         "placement"?: PopoverPlacement;
+        "popoverProps"?: Partial<Popover>;
         /**
           * Point provided to the Popover component to determine fixed placement of a menu.
          */
@@ -409,6 +411,10 @@ export namespace Components {
         "disabled": boolean;
     }
     interface VertexPopover {
+        /**
+          * An optional DOMRect that represents the virtual location of the anchor element. When provided, the popover will position based on the specified bounds to give a similar behavior to the `anchorSelector` or `anchor` slot based popovers without needing to provide the element itself.
+         */
+        "anchorBounds"?: Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
         /**
           * An optional selector to retrieve the anchor element. If a selector is not provided, this popover will attempt to use HTMLSlotElement.assignedElements() to retrieve the anchor element.
          */
@@ -425,23 +431,24 @@ export namespace Components {
           * An optional selector for the boundary of this popover. If not specified, this will default to `clippingParents`. See https://popper.js.org/docs/v2/utils/detect-overflow/#boundary for additional details.
          */
         "boundarySelector"?: string;
-        "contentResizeObserverFactory": (
-    cb: (entries: ResizeObserverEntry[]) => void
-  ) => ResizeObserver;
         /**
-          * The `flipBehavior` prop can be provided to customize the popover's behavior when approaching its boundary. This maps to the behavior used internally with PopperJS. See https://popper.js.org/docs/v2/modifiers/flip for info on what properties can be specified.  If a `boundarySelector` is provided, `flip` behavior will automatically be disabled.
+          * The `flipBehavior` prop can be provided to customize the popover's behavior when approaching its boundary. This maps to the behavior used internally with FloatingUI. See https://floating-ui.com/docs/flip#options for info on what properties can be specified.  If a `boundarySelector` is provided, `flip` behavior will automatically be disabled.
+         */
+        "flipBehavior"?: FlipOptions;
+        /**
+          * The `offsetBehavior` prop can be provided to customize the popover's visual offset from the anchor. This maps to the behavior used internally with FloatingUI. See https://floating-ui.com/docs/offset#options for info on what properties can be specified.  If no offset is specified, a default of 4px will be used for popovers anchored to an element and no offset will be applied for popovers anchored to a point.
          */
-        "flipBehavior"?: PopoverFlipBehavior;
+        "offsetBehavior"?: OffsetOptions;
         /**
           * Whether this popover's content is visible.
          */
         "open": boolean;
         /**
-          * The `overflowBehavior` prop can be provided to customize the popover's behavior when approaching its boundary. This maps to the behavior used internally with PopperJS. See https://popper.js.org/docs/v2/modifiers/prevent-overflow for info on what properties can be specified.  If a `boundarySelector` is provided, it will be automatically added to the set of options.
+          * The `overflowBehavior` prop can be provided to customize the popover's behavior when approaching its boundary. This maps to the behavior used internally with FloatingUI. See https://floating-ui.com/docs/detectOverflow#options for info on what properties can be specified.  If a `boundarySelector` is provided, it will be automatically added to the set of options.
          */
-        "overflowBehavior"?: PopoverOverflowBehavior;
+        "overflowBehavior"?: DetectOverflowOptions;
         /**
-          * The placement of the popover at the clicked point. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', or 'auto-end', and defaults to 'bottom-start'.  Note: placement will adjust based on the amount of available space, so popovers close to screen edges may appear in a different location.
+          * The placement of the popover at the clicked point. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', and defaults to 'bottom-start'.  Note: placement will adjust based on the amount of available space, so popovers close to screen edges may appear in a different location.
          */
         "placement": PopoverPlacement;
         /**
@@ -1555,6 +1562,7 @@ declare namespace LocalJSX {
           * When menu is placed relative to an anchor, popover will use this placement.
          */
         "placement"?: PopoverPlacement;
+        "popoverProps"?: Partial<Popover>;
         /**
           * Point provided to the Popover component to determine fixed placement of a menu.
          */
@@ -1569,6 +1577,10 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
     }
     interface VertexPopover {
+        /**
+          * An optional DOMRect that represents the virtual location of the anchor element. When provided, the popover will position based on the specified bounds to give a similar behavior to the `anchorSelector` or `anchor` slot based popovers without needing to provide the element itself.
+         */
+        "anchorBounds"?: Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
         /**
           * An optional selector to retrieve the anchor element. If a selector is not provided, this popover will attempt to use HTMLSlotElement.assignedElements() to retrieve the anchor element.
          */
@@ -1586,9 +1598,13 @@ declare namespace LocalJSX {
          */
         "boundarySelector"?: string;
         /**
-          * The `flipBehavior` prop can be provided to customize the popover's behavior when approaching its boundary. This maps to the behavior used internally with PopperJS. See https://popper.js.org/docs/v2/modifiers/flip for info on what properties can be specified.  If a `boundarySelector` is provided, `flip` behavior will automatically be disabled.
+          * The `flipBehavior` prop can be provided to customize the popover's behavior when approaching its boundary. This maps to the behavior used internally with FloatingUI. See https://floating-ui.com/docs/flip#options for info on what properties can be specified.  If a `boundarySelector` is provided, `flip` behavior will automatically be disabled.
+         */
+        "flipBehavior"?: FlipOptions;
+        /**
+          * The `offsetBehavior` prop can be provided to customize the popover's visual offset from the anchor. This maps to the behavior used internally with FloatingUI. See https://floating-ui.com/docs/offset#options for info on what properties can be specified.  If no offset is specified, a default of 4px will be used for popovers anchored to an element and no offset will be applied for popovers anchored to a point.
          */
-        "flipBehavior"?: PopoverFlipBehavior;
+        "offsetBehavior"?: OffsetOptions;
         /**
           * Emitted whenever the popover is dismissed.
          */
@@ -1598,11 +1614,11 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
         /**
-          * The `overflowBehavior` prop can be provided to customize the popover's behavior when approaching its boundary. This maps to the behavior used internally with PopperJS. See https://popper.js.org/docs/v2/modifiers/prevent-overflow for info on what properties can be specified.  If a `boundarySelector` is provided, it will be automatically added to the set of options.
+          * The `overflowBehavior` prop can be provided to customize the popover's behavior when approaching its boundary. This maps to the behavior used internally with FloatingUI. See https://floating-ui.com/docs/detectOverflow#options for info on what properties can be specified.  If a `boundarySelector` is provided, it will be automatically added to the set of options.
          */
-        "overflowBehavior"?: PopoverOverflowBehavior;
+        "overflowBehavior"?: DetectOverflowOptions;
         /**
-          * The placement of the popover at the clicked point. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', or 'auto-end', and defaults to 'bottom-start'.  Note: placement will adjust based on the amount of available space, so popovers close to screen edges may appear in a different location.
+          * The placement of the popover at the clicked point. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', and defaults to 'bottom-start'.  Note: placement will adjust based on the amount of available space, so popovers close to screen edges may appear in a different location.
          */
         "placement"?: PopoverPlacement;
         /**

package/dist/types/util/components/dom.d.ts

@@ -0,0 +1,3 @@
+export declare function readDOM(callback: VoidFunction): void;
+export declare function getBoundingClientRect(el: HTMLElement): DOMRect;
+export declare function getComputedStyle(el: HTMLElement): CSSStyleDeclaration;

package/dist/types/util/components/slots.d.ts

@@ -4,3 +4,4 @@ export interface GetFirstSlottedElementProps {
   selector?: string;
 }
 export declare function getFirstSlottedElement({ hostElement, slotName, selector, }: GetFirstSlottedElementProps): Element | undefined;
+export declare function getSlottedContent(slotOrParentElement?: HTMLElement): Element | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.0.16-canary.0",
+  "version": "0.1.0-testing.0",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -82,8 +82,9 @@
     "workbox-build": "4.3.1"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "@types/faker": "^5.5.9"
+    "@floating-ui/dom": "^1.6.5",
+    "@types/faker": "^5.5.9",
+    "@vertexvis/utils": "^0.21.0"
   },
-  "gitHead": "18accd9629e56a4e7426fd1264eead1c8cf7ca90"
+  "gitHead": "94fd7078493f4514ebb702a0e1deb8c78a10f0dd"
 }