@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/overlay/elements/overlay.js

@@ -1,24 +1,19 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 var Overlay_1;
-import { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { DEFAULT_ALIGN, DEFAULT_TARGET_STRATEGY } from '../helpers/types';
-import { valueOrZero, valueOrNull } from '../helpers/functions';
-import { applyLock } from '../managers/interaction-lock-manager';
-import { register as viewportRegister, deregister as viewportDeregister, getViewAreaInfo } from '../managers/viewport-manager';
-import { register as zIndexRegister, deregister as zIndexDeregister, toFront } from '../managers/zindex-manager';
-import { register as backdropRegister, deregister as backdropDeregister } from '../managers/backdrop-manager';
-import { register as closeRegister, deregister as closeDeregister } from '../managers/close-manager';
-import { register as focusableRegister, deregister as focusableDeregister } from '../managers/focus-manager';
-import { MicroTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils';
-import { VERSION } from '../../';
-// TODO: use metrics once available
-const isEdge = (/Edge\/\d./i).test(navigator.userAgent);
-const isIE = (/Trident/g).test(navigator.userAgent) || (/MSIE/g).test(navigator.userAgent);
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../../version.js';
+import { MicroTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { isIE, isEdge } from '@refinitiv-ui/utils/lib/browser.js';
+import { DEFAULT_ALIGN, DEFAULT_TARGET_STRATEGY } from '../helpers/types.js';
+import { valueOrZero, valueOrNull } from '../helpers/functions.js';
+import { applyLock } from '../managers/interaction-lock-manager.js';
+import { register as viewportRegister, deregister as viewportDeregister, getViewAreaInfo } from '../managers/viewport-manager.js';
+import { register as zIndexRegister, deregister as zIndexDeregister, toFront } from '../managers/zindex-manager.js';
+import { register as backdropRegister, deregister as backdropDeregister } from '../managers/backdrop-manager.js';
+import { register as closeRegister, deregister as closeDeregister } from '../managers/close-manager.js';
+import { register as focusableRegister, deregister as focusableDeregister } from '../managers/focus-manager.js';
 /**
  * Possible states of the overlay
  */
@@ -191,7 +186,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -339,7 +334,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         if (oldPosition !== value) {
             this._positionStrategy = undefined;
             this._position = value;
-            void this.requestUpdate('position', oldPosition);
+            this.requestUpdate('position', oldPosition);
         }
     }
     get position() {
@@ -558,7 +553,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         const closing = changedProperties.has('opened') && isClosed;
         this.setRegisters(changedProperties);
         // Should update routing is calling render method. Not every attribute should result in render being called
-        let shouldUpdate = opening || closing || this.hasUpdated === 0 || changedProperties.size === 0;
+        let shouldUpdate = opening || closing || !this.hasUpdated || changedProperties.size === 0;
         // Element may need to be updated if other attributes has been changed while the overlay is opened
         if (!shouldUpdate && isOpened) {
             if (shouldUpdateProperties.find(property => changedProperties.has(property))) {

package/lib/overlay/index.d.ts

@@ -1,2 +1,2 @@
-export { Position as OverlayPosition, PositionTarget as OverlayPositionTarget, TransitionStyle as OverlayTransitionStyle } from './helpers/types';
-export { Overlay } from './elements/overlay';
+export type { Position as OverlayPosition, PositionTarget as OverlayPositionTarget, TransitionStyle as OverlayTransitionStyle } from './helpers/types';
+export { Overlay } from './elements/overlay.js';

package/lib/overlay/index.js

@@ -1 +1 @@
-export { Overlay } from './elements/overlay';
+export { Overlay } from './elements/overlay.js';

package/lib/overlay/managers/backdrop-manager.d.ts

@@ -1,5 +1,5 @@
 import type { Overlay } from '../elements/overlay';
-import '../elements/overlay-backdrop';
+import '../elements/overlay-backdrop.js';
 /**
  * Backdrop manager adds a backdrop to the body
  * @returns {void}

package/lib/overlay/managers/backdrop-manager.js

@@ -1,5 +1,5 @@
-import { getOverlayLayers } from './zindex-manager';
-import '../elements/overlay-backdrop';
+import { getOverlayLayers } from './zindex-manager.js';
+import '../elements/overlay-backdrop.js';
 /**
  * Backdrop manager adds a backdrop to the body
  * @returns {void}

package/lib/overlay/managers/close-manager.js

@@ -1,4 +1,4 @@
-import { getOverlays } from './zindex-manager';
+import { getOverlays } from './zindex-manager.js';
 /**
  * Close manager ensures that the correct (or the most top) overlay
  * is closed on ESC and click events

package/lib/overlay/managers/focus-manager.js

@@ -1,5 +1,5 @@
-import { AnimationTaskRunner } from '@refinitiv-ui/utils';
-import { getOverlays } from './zindex-manager';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { getOverlays } from './zindex-manager.js';
 import { FocusableHelper } from '@refinitiv-ui/core';
 /**
  * Focus manager ensures that the correct

package/lib/overlay/managers/interaction-lock-manager.js

@@ -1,5 +1,5 @@
-import { AnimationTaskRunner } from '@refinitiv-ui/utils';
-import { getOverlays } from './zindex-manager';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { getOverlays } from './zindex-manager.js';
 /**
 * Check if two arrays are shallow equal
 * @param left Left side array

package/lib/overlay/managers/viewport-manager.d.ts

@@ -1,6 +1,6 @@
+import type { ViewAreaInfo } from '../helpers/types';
 import type { Overlay } from '../elements/overlay';
-import '../elements/overlay-viewport';
-import { ViewAreaInfo } from '../helpers/types';
+import '../elements/overlay-viewport.js';
 /**
  * Viewport manager singleton is responsible for getting
  * viewport sizes and reacting on viewport changes

package/lib/overlay/managers/viewport-manager.js

@@ -1,5 +1,5 @@
-import { AnimationTaskRunner } from '@refinitiv-ui/utils';
-import '../elements/overlay-viewport';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import '../elements/overlay-viewport.js';
 /**
   * Default values for area info
 */
@@ -89,6 +89,10 @@ export class ViewportManager {
         }
         const screenRect = this.screenViewport.getBoundingClientRect();
         // since screenViewport is applied on html element, it does not include body zoom
+        // Zoom is a legacy feature and must not be used by any means.
+        // Kept here for compatibility with old apps
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         const zoom = parseFloat(window.getComputedStyle(document.body).zoom);
         const screenHeight = screenRect.height / zoom;
         const screenWidth = screenRect.width / zoom;

package/lib/overlay/managers/zindex-manager.js

@@ -1,4 +1,4 @@
-import { AfterRenderTaskRunner } from '@refinitiv-ui/utils';
+import { AfterRenderTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
 export const ZIndex = 103; /* initial z-index to match Polymer. 102 is used for backdrop */
 /**
  * Z-index manager monitors z-indexes and ensures that the last opened/last

package/lib/overlay-menu/custom-elements.json

@@ -15,7 +15,36 @@
           "name": "opened",
           "description": "True if the menu is currently displayed",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "with-backdrop",
+          "description": "True to show backdrop",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "no-cancel-on-esc-key",
+          "description": "Set to true to disable canceling the overlay with the ESC key",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "no-cancel-on-outside-click",
+          "description": "Set to true to disable canceling the overlay by clicking outside it",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lock-position-target",
+          "description": "Set to true to lock position target",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transition-style",
+          "description": "Set the transition style",
+          "type": "string | null"
         },
         {
           "name": "value",
@@ -26,12 +55,24 @@
         {
           "name": "x",
           "description": "Set a specific x coordinate",
-          "type": "number"
+          "type": "number | undefined"
         },
         {
           "name": "y",
           "description": "Set a specific y coordinate",
-          "type": "number"
+          "type": "number | undefined"
+        },
+        {
+          "name": "horizontal-offset",
+          "description": "A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "vertical-offset",
+          "description": "A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`",
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "offset",
@@ -41,7 +82,7 @@
         {
           "name": "position",
           "description": "Set position and align against the attach target.",
-          "type": "{} | undefined"
+          "type": "Position[] | undefined"
         },
         {
           "name": "with-backdrop",
@@ -90,54 +131,59 @@
         {
           "name": "values",
           "description": "Array of item's values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "data",
-          "description": "Construct the menu from data object.\nCannot be used with internal content"
+          "description": "Construct the menu from data object.\nCannot be used with internal content",
+          "type": "OverlayMenuData|undefined"
         },
         {
           "name": "opened",
           "attribute": "opened",
           "description": "True if the menu is currently displayed",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "withBackdrop",
+          "attribute": "with-backdrop",
           "description": "True to show backdrop",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnEscKey",
+          "attribute": "no-cancel-on-esc-key",
           "description": "Set to true to disable canceling the overlay with the ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnOutsideClick",
+          "attribute": "no-cancel-on-outside-click",
           "description": "Set to true to disable canceling the overlay by clicking outside it",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "lockPositionTarget",
+          "attribute": "lock-position-target",
           "description": "Set to true to lock position target",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "positionTarget",
           "description": "Position next to the HTML element",
-          "type": "HTMLElement|null",
-          "default": "\"null\""
+          "type": "HTMLElement | null"
         },
         {
           "name": "transitionStyle",
+          "attribute": "transition-style",
           "description": "Set the transition style",
-          "type": "string|null",
-          "default": "\"null\""
+          "type": "string | null"
         },
         {
           "name": "value",
@@ -150,23 +196,27 @@
           "name": "x",
           "attribute": "x",
           "description": "Set a specific x coordinate",
-          "type": "number"
+          "type": "number | undefined"
         },
         {
           "name": "y",
           "attribute": "y",
           "description": "Set a specific y coordinate",
-          "type": "number"
+          "type": "number | undefined"
         },
         {
           "name": "horizontalOffset",
+          "attribute": "horizontal-offset",
           "description": "A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`",
-          "type": "number"
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "verticalOffset",
+          "attribute": "vertical-offset",
           "description": "A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`",
-          "type": "number"
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "offset",
@@ -178,7 +228,7 @@
           "name": "position",
           "attribute": "position",
           "description": "Set position and align against the attach target.",
-          "type": "{} | undefined"
+          "type": "Position[] | undefined"
         }
       ],
       "events": [

package/lib/overlay-menu/custom-elements.md

@@ -0,0 +1,44 @@
+# ef-overlay-menu
+
+Overlay that supports single-level and multi-level menus
+
+## Attributes
+
+| Attribute                    | Type      | Description                                      |
+|------------------------------|-----------|--------------------------------------------------|
+| `horizontal-offset`          | `number`  | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `lock-position-target`       | `boolean` | Set to true to lock position target              |
+| `no-cancel-on-esc-key`       | `boolean` | Set to true to disable canceling the overlay with the ESC key |
+| `no-cancel-on-outside-click` | `boolean` | Set to true to disable canceling the overlay by clicking outside it |
+| `transition-style`           | `string`  | Set the transition style                         |
+| `vertical-offset`            | `number`  | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `with-backdrop`              | `boolean` | True to show backdrop                            |
+
+## Properties
+
+| Property                 | Attribute                    | Type                         | Default | Description                                      |
+|--------------------------|------------------------------|------------------------------|---------|--------------------------------------------------|
+| `compact`                | `compact`                    | `boolean`                    | false   | Switch to compact style menu                     |
+| `data`                   |                              | `OverlayMenuData\|undefined` |         | Construct the menu from data object.<br />Cannot be used with internal content |
+| `horizontalOffset`       | `horizontal-offset`          | `number`                     | 0       | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `lockPositionTarget`     | `lock-position-target`       | `boolean`                    | false   | Set to true to lock position target              |
+| `noCancelOnEscKey`       | `no-cancel-on-esc-key`       | `boolean`                    | false   | Set to true to disable canceling the overlay with the ESC key |
+| `noCancelOnOutsideClick` | `no-cancel-on-outside-click` | `boolean`                    | false   | Set to true to disable canceling the overlay by clicking outside it |
+| `offset`                 | `offset`                     | `number`                     |         | A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget` |
+| `opened`                 | `opened`                     | `boolean`                    | false   | True if the menu is currently displayed          |
+| `position`               | `position`                   | `Position[] \| undefined`    |         | Set position and align against the attach target. |
+| `positionTarget`         |                              | `HTMLElement \| null`        | null    | Position next to the HTML element                |
+| `transitionStyle`        | `transition-style`           | `string \| null`             | null    | Set the transition style                         |
+| `value`                  | `value`                      | `string`                     | ""      | Returns the first selected item value.           |
+| `values`                 |                              | `string[]`                   | []      | Array of item's values                           |
+| `verticalOffset`         | `vertical-offset`            | `number`                     | 0       | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `withBackdrop`           | `with-backdrop`              | `boolean`                    | false   | True to show backdrop                            |
+| `x`                      | `x`                          | `number \| undefined`        |         | Set a specific x coordinate                      |
+| `y`                      | `y`                          | `number \| undefined`        |         | Set a specific y coordinate                      |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `item-trigger`   | Dispatched when user clicks on item              |
+| `opened-changed` | Dispatched when when opened attribute changes internally. Prevent default to stop opening/closing pipeline |

package/lib/overlay-menu/helpers/types.d.ts

@@ -1,6 +1,6 @@
-import { CollectionComposer } from '@refinitiv-ui/utils';
-import { OverlayMenu } from '../index';
-import { Item, ItemData } from '../../item';
+import type { CollectionComposer } from '@refinitiv-ui/utils/lib/collection';
+import type { OverlayMenu } from '../index';
+import type { Item, ItemData } from '../../item';
 export declare type NestedMenu = {
     menu: OverlayMenu;
     item: Item;

package/lib/overlay-menu/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../icon';
-import '../item';
-import { Overlay } from '../overlay';
-import { OverlayMenuData } from './helpers/types';
-export { OverlayMenuData };
+import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../icon/index.js';
+import '../item/index.js';
+import { Overlay } from '../overlay/index.js';
+import type { OverlayMenuData } from './helpers/types';
+export type { OverlayMenuData };
 /**
  * Overlay that supports single-level and multi-level menus
  * @fires item-trigger - Dispatched when user clicks on item
@@ -25,30 +25,30 @@ export { OverlayMenuData };
  * @attr {boolean} lock-position-target - Set to true to lock position target
  * @prop {boolean} [lockPositionTarget=false] - Set to true to lock position target
  *
- * @prop {HTMLElement|null} [positionTarget=null] - Position next to the HTML element
+ * @prop {HTMLElement | null} [positionTarget=null] - Position next to the HTML element
  *
  * @attr {string} transition-style - Set the transition style
- * @prop {string|null} [transitionStyle=null] - Set the transition style
+ * @prop {string | null} [transitionStyle=null] - Set the transition style
  *
- * @prop {string} [value=] - Returns the first selected item from values.
+ * @prop {string} [value=""] - Returns the first selected item from values.
  *
- * @attr {number} x - Set a specific x coordinate
- * @prop {number} x - Set a specific x coordinate
+ * @attr {number | undefined} x - Set a specific x coordinate
+ * @prop {number | undefined} x - Set a specific x coordinate
  *
- * @attr {number} y - Set a specific y coordinate
- * @prop {number} y - Set a specific y coordinate
+ * @attr {number | undefined} y - Set a specific y coordinate
+ * @prop {number | undefined} y - Set a specific y coordinate
  *
  * @attr {number} horizontal-offset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
- * @prop {number} horizontalOffset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
+ * @prop {number} [horizontalOffset=0] - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
  *
  * @attr {number} vertical-offset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
- * @prop {number} verticalOffset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
+ * @prop {number} [verticalOffset=0] - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
  *
  * @attr {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  * @prop {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  *
- * @attr {{} | undefined} position - Set position and align against the attach target.
- * @prop {{} | undefined} position - Set position and align against the attach target.
+ * @attr {Position[] | undefined} position - Set position and align against the attach target.
+ * @prop {Position[] | undefined} position - Set position and align against the attach target.
  */
 export declare class OverlayMenu extends Overlay {
     /**
@@ -57,12 +57,12 @@ export declare class OverlayMenu extends Overlay {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     constructor();
     private dataDisconnectThrottler;
     private menuHighlightedItem?;
@@ -81,6 +81,7 @@ export declare class OverlayMenu extends Overlay {
     /**
      * Array of item's values
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     set values(values: string[]);
@@ -92,6 +93,7 @@ export declare class OverlayMenu extends Overlay {
     /**
      * Construct the menu from data object.
      * Cannot be used with internal content
+     * @type {OverlayMenuData|undefined}
      */
     get data(): OverlayMenuData | undefined;
     set data(value: OverlayMenuData | undefined);

package/lib/overlay-menu/index.js

@@ -1,20 +1,19 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 var OverlayMenu_1;
-import { html, css, customElement, property, ifDefined, WarningNotice } from '@refinitiv-ui/core';
-import { AnimationTaskRunner, CollectionComposer } from '@refinitiv-ui/utils';
-import '../icon';
-import '../item';
-import { Item } from '../item';
-import { Overlay } from '../overlay';
+import { __decorate } from "tslib";
+import { html, css, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
+import '../icon/index.js';
+import '../item/index.js';
+import { Item } from '../item/index.js';
+import { Overlay } from '../overlay/index.js';
 import { applyLock } from '../overlay/managers/interaction-lock-manager.js';
-import { getId } from './helpers/uuid';
-import { OpenedMenusManager } from './managers/menu-manager';
-import { VERSION } from '../';
+import { OpenedMenusManager } from './managers/menu-manager.js';
 /**
  * Overlay that supports single-level and multi-level menus
  * @fires item-trigger - Dispatched when user clicks on item
@@ -35,30 +34,30 @@ import { VERSION } from '../';
  * @attr {boolean} lock-position-target - Set to true to lock position target
  * @prop {boolean} [lockPositionTarget=false] - Set to true to lock position target
  *
- * @prop {HTMLElement|null} [positionTarget=null] - Position next to the HTML element
+ * @prop {HTMLElement | null} [positionTarget=null] - Position next to the HTML element
  *
  * @attr {string} transition-style - Set the transition style
- * @prop {string|null} [transitionStyle=null] - Set the transition style
+ * @prop {string | null} [transitionStyle=null] - Set the transition style
  *
- * @prop {string} [value=] - Returns the first selected item from values.
+ * @prop {string} [value=""] - Returns the first selected item from values.
  *
- * @attr {number} x - Set a specific x coordinate
- * @prop {number} x - Set a specific x coordinate
+ * @attr {number | undefined} x - Set a specific x coordinate
+ * @prop {number | undefined} x - Set a specific x coordinate
  *
- * @attr {number} y - Set a specific y coordinate
- * @prop {number} y - Set a specific y coordinate
+ * @attr {number | undefined} y - Set a specific y coordinate
+ * @prop {number | undefined} y - Set a specific y coordinate
  *
  * @attr {number} horizontal-offset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
- * @prop {number} horizontalOffset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
+ * @prop {number} [horizontalOffset=0] - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
  *
  * @attr {number} vertical-offset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
- * @prop {number} verticalOffset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
+ * @prop {number} [verticalOffset=0] - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
  *
  * @attr {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  * @prop {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  *
- * @attr {{} | undefined} position - Set position and align against the attach target.
- * @prop {{} | undefined} position - Set position and align against the attach target.
+ * @attr {Position[] | undefined} position - Set position and align against the attach target.
+ * @prop {Position[] | undefined} position - Set position and align against the attach target.
  */
 let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     constructor() {
@@ -110,7 +109,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -132,6 +131,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     /**
      * Array of item's values
      * @type {string[]}
+     * @default []
      */
     get values() {
         return this.withData ? this.getDataValues() : this.getSlottedValues();
@@ -142,7 +142,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             return;
         }
         this.withData ? this.setDataValues(values) : this.setSlottedValues(values);
-        void this.requestUpdate('values', oldValues);
+        this.requestUpdate('values', oldValues);
     }
     /**
      * Returns the first selected item value.
@@ -157,6 +157,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     /**
      * Construct the menu from data object.
      * Cannot be used with internal content
+     * @type {OverlayMenuData|undefined}
      */
     get data() {
         return this._data;
@@ -185,7 +186,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         this.composer.on('modification', // Listen for modifications
         this.modificationUpdate // Update the template
         );
-        void this.requestUpdate('data', oldValue);
+        this.requestUpdate('data', oldValue);
     }
     /**
      * Get values from data collection
@@ -453,7 +454,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      */
     modificationUpdate() {
         this.constructDataMenus();
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Construct menu items and nested menus from data object
@@ -826,7 +827,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         menu.transitionStyle = this.transitionStyle;
         menu.noCancelOnOutsideClick = true;
         menu.compact = this.compact;
-        menu.id = getId();
+        menu.id = uuid();
         return menu;
     }
     /**

package/lib/overlay-menu/managers/menu-manager.d.ts

@@ -1,5 +1,5 @@
-import { Item } from '../../item';
-import { OverlayMenu } from '../index';
+import type { Item } from '../../item';
+import { OverlayMenu } from '../index.js';
 /**
  * Overlay menu manager monitors menu nesting and ensures
  * that only a single menu tree can be opened