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

package/dist/cjs/tslib.es6-838fd860.js

@@ -0,0 +1,68 @@
+'use strict';
+
+/******************************************************************************
+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 __());
+}
+
+exports.__assign = function() {
+    exports.__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 exports.__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;
+};
+
+exports.__extends = __extends;
+exports.__read = __read;

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

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const autoResizeTextarea = require('./auto-resize-textarea-56a57fd3.js');
+const autoResizeTextarea = require('./auto-resize-textarea-deb05359.js');
 require('./index-6a92256c.js');
+require('./slots-fb5ac359.js');
 
 
 

package/dist/cjs/vertex-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const button = require('./button-76a9db69.js');
+const button = require('./button-edd366d8.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const draggablePopover = require('./draggable-popover-ee0db70b.js');
+const draggablePopover = require('./draggable-popover-edf23d3a.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

package/dist/cjs/vertex-icon-button.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const iconButton = require('./icon-button-0671f42e.js');
+const iconButton = require('./icon-button-f868bf06.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-546f9a04.js');
+require('./icon-helper-caf2699e.js');
 
 
 

package/dist/cjs/vertex-icon.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-092d8624.js');
+const icon = require('./icon-53d62a46.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-546f9a04.js');
+require('./icon-helper-caf2699e.js');
 
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const menu = require('./menu-0579351b.js');
+const menu = require('./menu-d1ecf43b.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const popover = require('./popover-34e1a386.js');
+const popover = require('./popover-d9ec8e10.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const resultList = require('./result-list-77ba2fa9.js');
+const resultList = require('./result-list-1e592c3c.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./templates-4e22ccc0.js');
+require('./templates-e7b3ffbb.js');
+require('./tslib.es6-838fd860.js');
 
 
 

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const searchBar = require('./search-bar-81ca45b3.js');
+const searchBar = require('./search-bar-bb40cfa7.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./templates-4e22ccc0.js');
+require('./templates-e7b3ffbb.js');
+require('./tslib.es6-838fd860.js');
 
 
 

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

@@ -2,9 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const tooltip = require('./tooltip-afebbca8.js');
+const tooltip = require('./tooltip-31b596f5.js');
 require('./index-6a92256c.js');
+require('./tslib.es6-838fd860.js');
 require('./index-e1b40fa6.js');
+require('./slots-fb5ac359.js');
 
 
 

package/dist/collection/components/button/button.css

@@ -10,6 +10,20 @@ a {
   font-family: var(--vertex-ui-font-family);
 }
 
+:host {
+  /*
+  The cursor to display when the button is enabled.
+  Defaults to `pointer`.
+  */
+  --enabled-cursor: pointer;
+
+  /*
+  The cursor to display when the button is disabled.
+  Defaults to `not-allowed`.
+  */
+  --disabled-cursor: not-allowed;
+}
+
 /* some global styles set in a consuming app apply to the host element
    and tailwind has a [type] selector that overrides the
    attribute defined on this component */
@@ -28,7 +42,7 @@ a {
   border-radius: 0.25rem;
   box-sizing: border-box;
   text-decoration: none;
-  cursor: pointer;
+  cursor: var(--enabled-cursor);
 }
 
 .btn-full {
@@ -42,7 +56,7 @@ a {
 }
 
 .btn.disabled {
-  cursor: not-allowed;
+  cursor: var(--disabled-cursor);
 }
 
 .btn-sm {
@@ -96,7 +110,7 @@ a {
 
 .btn-primary.disabled {
   background-color: var(--vertex-ui-blue-200);
-  cursor: not-allowed;
+  cursor: var(--disabled-cursor);
 }
 
 .btn-secondary {

package/dist/collection/components/draggable-popover/draggable-popover.js

@@ -59,16 +59,11 @@ export class DraggablePopover {
   }
   render() {
     return (h("vertex-popover", { position: this.anchorPosition, boundarySelector: this.boundarySelector, backdrop: false, open: true, resizeBehavior: "fixed", updateOnResize: !this.dragging, overflowBehavior: {
-        options: {
-          altAxis: true,
-          tether: false,
-          padding: this.boundaryPadding,
-        },
+        altBoundary: true,
+        padding: this.boundaryPadding,
       }, flipBehavior: {
-        enabled: false,
-        options: {
-          flipVariations: false,
-        },
+        fallbackPlacements: [],
+        fallbackStrategy: 'initialPlacement',
       } }, h("div", { ref: (el) => (this.containerEl = el), class: classNames('container', { dragging: this.dragging }) }, h("div", { class: "icon-container" }, h("div", { class: "icon", onPointerDown: this.handlePointerDown }, h("slot", { name: "drag-icon" }, h("vertex-icon", { size: "sm", name: "drag-indicator" })))), h("slot", null))));
   }
   static get is() { return "vertex-draggable-popover"; }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -47,7 +47,7 @@ export class DropdownMenu {
         "mutable": false,
         "complexType": {
           "original": "PopoverPlacement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
             "PopoverPlacement": {
               "location": "import",

package/dist/collection/components/help-tooltip/help-tooltip.js

@@ -57,7 +57,7 @@ export class HelpTooltip {
         "mutable": false,
         "complexType": {
           "original": "PopoverPlacement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
             "PopoverPlacement": {
               "location": "import",

package/dist/collection/components/icon/icons/invert.js

@@ -1,2 +1,2 @@
 import { h } from '@stencil/core';
-export const Invert = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "invert" }, h("g", { transform: "translate(3.5, 2.2)" }, h("path", { d: "M11,7H8V0.6a.5.5,0,0,0-1,0V7H4l3.5,5Zm2.5,4a.5.5,1,1" })), h("g", { transform: "translate(-2.5, -0.2)" }, h("path", { d: "M7,14a.5.5,0,0,0,1,0V7.5h3l-3.5-5L4,7.5H7Zm6.5-1a.5.5,0,0" }))));
+export const Invert = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "invert" }, h("g", { transform: "translate(3.5, 2.2)" }, h("path", { d: "M11,7H8V0.6a.5.5,0,0,0-1,0V7H4l3.5,5Zm2.5,4" })), h("g", { transform: "translate(-2.5, -0.2)" }, h("path", { d: "M7,14a.5.5,0,0,0,1,0V7.5h3l-3.5-5L4,7.5H7Zm6.5-1" }))));

package/dist/collection/components/icon-button/icon-button.css

@@ -6,6 +6,17 @@ button {
   padding: 0;
 }
 :host {
+  /*
+  The cursor to display when the button is enabled.
+  Defaults to `pointer`.
+  */
+  --enabled-cursor: pointer;
+
+  /*
+  The cursor to display when the button is disabled.
+  Defaults to `not-allowed`.
+  */
+  --disabled-cursor: not-allowed;
   /*
   The background color of this button when hovered.
   Defaults to neutral-300.
@@ -45,7 +56,7 @@ button {
   outline: none;
   fill: currentColor;
   color: currentColor;
-  cursor: pointer;
+  cursor: var(--enabled-cursor);
 }
 
 .container:not(.plain) {
@@ -77,7 +88,7 @@ button {
 
 .floating.disabled {
   color: var(--vertex-ui-neutral-400);
-  cursor: not-allowed;
+  cursor: var(--disabled-cursor);
 }
 
 .container:not(.disabled):not(.plain):hover {
@@ -97,7 +108,7 @@ button {
 }
 
 .container.disabled:not(.floating) {
-  cursor: not-allowed;
+  cursor: var(--disabled-cursor);
   color: var(--vertex-ui-neutral-400);
 }
 

package/dist/collection/components/menu/menu.js

@@ -8,6 +8,7 @@ export class Menu {
     this.fallbackPlacements = undefined;
     this.backdrop = true;
     this.position = undefined;
+    this.popoverProps = undefined;
     this.handlePopoverDismiss = this.handlePopoverDismiss.bind(this);
   }
   componentDidLoad() {
@@ -21,13 +22,13 @@ export class Menu {
     this.removeEventListeners();
   }
   render() {
-    return (h("vertex-popover", { ref: (element) => {
+    return (h("vertex-popover", Object.assign({ ref: (element) => {
         this.popoverRef = element;
       }, open: this.open, animated: this.animated, position: this.position, placement: this.placement, backdrop: this.backdrop, flipBehavior: this.fallbackPlacements != null
         ? {
-          options: { fallbackPlacements: this.fallbackPlacements },
+          fallbackPlacements: this.fallbackPlacements,
         }
-        : undefined }, this.position == null && (h("div", { slot: "anchor" }, h("slot", { name: "anchor" }))), h("div", { onClick: () => {
+        : undefined }, this.popoverProps), this.position == null && (h("div", { slot: "anchor" }, h("slot", { name: "anchor" }))), h("div", { onClick: () => {
         this.open = false;
         this.menuClosed.emit();
       }, class: classNames('root', {
@@ -101,7 +102,7 @@ export class Menu {
         "mutable": false,
         "complexType": {
           "original": "PopoverPlacement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | undefined",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | undefined",
           "references": {
             "PopoverPlacement": {
               "location": "import",
@@ -175,6 +176,29 @@ export class Menu {
           "tags": [],
           "text": "Point provided to the Popover component to\ndetermine fixed placement of a menu."
         }
+      },
+      "popoverProps": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Partial<Popover>",
+          "resolved": "undefined | ({ open?: boolean | undefined; placement?: Placement | undefined; position?: string | Point | undefined; anchorBounds?: Pick<DOMRect, \"height\" | \"width\" | \"x\" | \"y\"> | undefined; backdrop?: boolean | undefined; animated?: boolean | undefined; anchorSelector?: string | undefined; boundarySelector?: string | undefined; resizeBehavior?: PopoverResizeBehavior | undefined; overflowBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; boundary?: Boundary | undefined; } | undefined; flipBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; crossAxis?: boolean | undefined; mainAxis?: boolean | undefined; fallbackPlacements?: Placement[] | undefined; fallbackStrategy?: \"bestFit\" | \"initialPlacement\" | undefined; fallbackAxisSideDirection?: \"none\" | \"start\" | \"end\" | undefined; flipAlignment?: boolean | undefined; boundary?: Boundary | undefined; } | undefined; offsetBehavior?: OffsetOptions | undefined; updateOnResize?: boolean | undefined; dismissed?: EventEmitter<void> | undefined; connectedCallback?: (() => void) | undefined; componentDidUpdate?: (() => void) | undefined; componentDidLoad?: (() => void) | undefined; disconnectedCallback?: (() => void) | undefined; updatePosition?: ((position?: string | Point | undefined) => void) | undefined; updatePlacement?: (() => void) | undefined; updateOpened?: ((open?: boolean | undefined) => void) | undefined; updateAnimated?: (() => void) | undefined; updateMiddleware?: (() => void) | undefined; setWindow?: ((partialWindow: Pick<Window, \"innerHeight\" | \"innerWidth\">) => void) | undefined; render?: (() => IntrinsicElements) | undefined; })",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "Popover": {
+              "location": "import",
+              "path": "../popover/popover"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }

package/dist/collection/components/popover/middleware.js

@@ -0,0 +1,26 @@
+import { detectOverflow, flip, offset, shift, } from '@floating-ui/dom';
+export function getDefaultMiddleware(offsetOptions, overflowOptions, flipOptions) {
+  const isMiddleware = (v) => typeof v !== 'boolean';
+  return [
+    offsetOptions != null ? offset(offsetOptions) : offset(4),
+    overflowOptions == null && flip(flipOptions),
+    shift(),
+    overflowOptions != null && preventOverflow(overflowOptions),
+  ].filter(isMiddleware);
+}
+export function preventOverflow(overflowOptions) {
+  return {
+    name: 'boundaryContain',
+    fn: async (state) => {
+      const overflow = await detectOverflow(state, overflowOptions);
+      const leftOverflow = overflow.left > 0 ? overflow.left : 0;
+      const rightOverflow = overflow.right > 0 ? overflow.right : 0;
+      const topOverflow = overflow.top > 0 ? overflow.top : 0;
+      const bottomOverflow = overflow.bottom > 0 ? overflow.bottom : 0;
+      return {
+        x: state.x + leftOverflow - rightOverflow,
+        y: state.y + topOverflow - bottomOverflow,
+      };
+    },
+  };
+}

package/dist/collection/components/popover/popover.css

@@ -76,7 +76,7 @@
 }
 
 .popper {
-  position: absolute;
+  position: fixed;
 }
 
 .center-bottom {