New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/popover
Advanced tools
@vaadin/popover - npm Package Compare versions
Comparing version 24.7.0-alpha1 to 24.7.0-alpha10
| { | ||
| "name": "@vaadin/popover", | ||
| "version": "24.7.0-alpha1", | ||
| "version": "24.7.0-alpha10", | ||
| "publishConfig": { | ||
@@ -40,14 +40,15 @@ "access": "public" | ||
| "@open-wc/dedupe-mixin": "^1.3.0", | ||
| "@vaadin/a11y-base": "24.7.0-alpha1", | ||
| "@vaadin/component-base": "24.7.0-alpha1", | ||
| "@vaadin/lit-renderer": "24.7.0-alpha1", | ||
| "@vaadin/overlay": "24.7.0-alpha1", | ||
| "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1", | ||
| "@vaadin/vaadin-material-styles": "24.7.0-alpha1", | ||
| "@vaadin/vaadin-themable-mixin": "24.7.0-alpha1", | ||
| "@vaadin/a11y-base": "24.7.0-alpha10", | ||
| "@vaadin/component-base": "24.7.0-alpha10", | ||
| "@vaadin/lit-renderer": "24.7.0-alpha10", | ||
| "@vaadin/overlay": "24.7.0-alpha10", | ||
| "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10", | ||
| "@vaadin/vaadin-material-styles": "24.7.0-alpha10", | ||
| "@vaadin/vaadin-themable-mixin": "24.7.0-alpha10", | ||
| "lit": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@vaadin/chai-plugins": "24.7.0-alpha1", | ||
| "@vaadin/testing-helpers": "^1.0.0", | ||
| "@vaadin/chai-plugins": "24.7.0-alpha10", | ||
| "@vaadin/test-runner-commands": "24.7.0-alpha10", | ||
| "@vaadin/testing-helpers": "^1.1.0", | ||
| "sinon": "^18.0.0" | ||
@@ -59,3 +60,3 @@ }, | ||
| ], | ||
| "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b" | ||
| "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90" | ||
| } |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2022 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2022 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -8,4 +8,24 @@ */ | ||
| import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js'; | ||
| import { setNestedOverlay } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js'; | ||
| /** | ||
| * Returns the closest parent overlay for given node, if any. | ||
| * @param {HTMLElement} node | ||
| * @return {HTMLElement} | ||
| */ | ||
| const getClosestOverlay = (node) => { | ||
| let n = node; | ||
| while (n && n !== node.ownerDocument) { | ||
| n = n.parentNode || n.host; | ||
| if (n && n._hasOverlayStackMixin) { | ||
| return n; | ||
| } | ||
| } | ||
| return null; | ||
| }; | ||
| /** | ||
| * A mixin providing common popover overlay functionality. | ||
@@ -28,2 +48,6 @@ * | ||
| static get observers() { | ||
| return ['__openedOrTargetChanged(opened, positionTarget)']; | ||
| } | ||
| /** | ||
@@ -101,2 +125,12 @@ * Tag name prefix used by custom properties. | ||
| } | ||
| /** @private */ | ||
| __openedOrTargetChanged(opened, target) { | ||
| if (target) { | ||
| const parent = getClosestOverlay(target); | ||
| if (parent) { | ||
| setNestedOverlay(parent, opened ? this : null); | ||
| } | ||
| } | ||
| } | ||
| }; |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -37,7 +37,16 @@ */ | ||
| type: Object, | ||
| observer: '__targetChanged', | ||
| }, | ||
| /** @private */ | ||
| __isConnected: { | ||
| type: Boolean, | ||
| sync: true, | ||
| }, | ||
| }; | ||
| } | ||
| static get observers() { | ||
| return ['__targetOrConnectedChanged(target, __isConnected)']; | ||
| } | ||
| /** @protected */ | ||
@@ -47,5 +56,3 @@ connectedCallback() { | ||
| if (this.target) { | ||
| this._addTargetListeners(this.target); | ||
| } | ||
| this.__isConnected = true; | ||
| } | ||
@@ -57,5 +64,3 @@ | ||
| if (this.target) { | ||
| this._removeTargetListeners(this.target); | ||
| } | ||
| this.__isConnected = false; | ||
| } | ||
@@ -88,10 +93,12 @@ | ||
| /** @private */ | ||
| __targetChanged(target, oldTarget) { | ||
| if (oldTarget) { | ||
| this._removeTargetListeners(oldTarget); | ||
| __targetOrConnectedChanged(target, isConnected) { | ||
| if (this.__previousTarget && (this.__previousTarget !== target || !isConnected)) { | ||
| this._removeTargetListeners(this.__previousTarget); | ||
| } | ||
| if (target) { | ||
| if (target && isConnected) { | ||
| this._addTargetListeners(target); | ||
| } | ||
| this.__previousTarget = target; | ||
| } | ||
@@ -98,0 +105,0 @@ |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -224,3 +224,4 @@ */ | ||
| * When setting `trigger` property to `null`, `undefined` or empty array, the popover | ||
| * can be only opened or closed programmatically by changing `opened` property. | ||
| * can be only opened programmatically by changing `opened` property. Note, closing | ||
| * on Escape press or outside click is still allowed unless explicitly disabled. | ||
| */ | ||
@@ -227,0 +228,0 @@ trigger: PopoverTrigger[] | null | undefined; |
| /** | ||
| * @license | ||
| * Copyright (c) 2024 Vaadin Ltd. | ||
| * Copyright (c) 2024 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -375,3 +375,4 @@ */ | ||
| * When setting `trigger` property to `null`, `undefined` or empty array, the popover | ||
| * can be only opened or closed programmatically by changing `opened` property. | ||
| * can be only opened programmatically by changing `opened` property. Note, closing | ||
| * on Escape press or outside click is still allowed unless explicitly disabled. | ||
| */ | ||
@@ -520,3 +521,3 @@ trigger: { | ||
| this._overlayElement = this.shadowRoot.querySelector('vaadin-popover-overlay'); | ||
| this._overlayElement = this.$[this.__overlayId]; | ||
| } | ||
@@ -616,3 +617,2 @@ | ||
| this.opened && | ||
| !this.__isManual && | ||
| !this.modal && | ||
@@ -652,9 +652,3 @@ !event.composedPath().some((el) => el === this._overlayElement || el === this.target) && | ||
| if ( | ||
| event.key === 'Escape' && | ||
| !this.noCloseOnEsc && | ||
| this.opened && | ||
| !this.__isManual && | ||
| isLastOverlay(this._overlayElement) | ||
| ) { | ||
| if (event.key === 'Escape' && !this.noCloseOnEsc && this.opened && isLastOverlay(this._overlayElement)) { | ||
| // Prevent closing parent overlay (e.g. dialog) | ||
@@ -946,3 +940,3 @@ event.stopPropagation(); | ||
| __onEscapePress(e) { | ||
| if (this.noCloseOnEsc || this.__isManual) { | ||
| if (this.noCloseOnEsc) { | ||
| e.preventDefault(); | ||
@@ -957,3 +951,3 @@ } | ||
| __onOutsideClick(e) { | ||
| if (this.noCloseOnOutsideClick || this.__isManual) { | ||
| if (this.noCloseOnOutsideClick) { | ||
| e.preventDefault(); | ||
@@ -969,7 +963,2 @@ } | ||
| /** @private */ | ||
| get __isManual() { | ||
| return this.trigger == null || (Array.isArray(this.trigger) && this.trigger.length === 0); | ||
| } | ||
| /** @private */ | ||
| __updateDimension(overlay, dimension, value) { | ||
@@ -976,0 +965,0 @@ const prop = `--_vaadin-popover-content-${dimension}`; |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/popover", | ||
| "version": "24.7.0-alpha1", | ||
| "version": "24.7.0-alpha10", | ||
| "description-markup": "markdown", | ||
@@ -11,3 +11,3 @@ "contributions": { | ||
| "name": "vaadin-popover", | ||
| "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "attributes": [ | ||
@@ -415,3 +415,3 @@ { | ||
| "name": "trigger", | ||
| "description": "Popover trigger mode, used to configure how the overlay is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover overlay content keeps the overlay opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover overlay content keeps the overlay opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened or closed programmatically by changing `opened` property.", | ||
| "description": "Popover trigger mode, used to configure how the overlay is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover overlay content keeps the overlay opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover overlay content keeps the overlay opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.", | ||
| "value": { | ||
@@ -418,0 +418,0 @@ "type": [ |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/popover", | ||
| "version": "24.7.0-alpha1", | ||
| "version": "24.7.0-alpha10", | ||
| "description-markup": "markdown", | ||
@@ -19,3 +19,3 @@ "framework": "lit", | ||
| "name": "vaadin-popover", | ||
| "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "extension": true, | ||
@@ -158,3 +158,3 @@ "attributes": [ | ||
| "name": ".trigger", | ||
| "description": "Popover trigger mode, used to configure how the overlay is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover overlay content keeps the overlay opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover overlay content keeps the overlay opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened or closed programmatically by changing `opened` property.", | ||
| "description": "Popover trigger mode, used to configure how the overlay is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover overlay content keeps the overlay opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover overlay content keeps the overlay opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.", | ||
| "value": { | ||
@@ -161,0 +161,0 @@ "kind": "expression" |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.08%
110013
- Lines of code
- increased by0.92%
2511
Worsened metrics
- Dev dependency count
- increased by33.33%
4
Dependency changes
+ Added@vaadin/a11y-base@24.7.0-alpha10(transitive)
+ Added@vaadin/component-base@24.7.0-alpha10(transitive)
+ Added@vaadin/icon@24.7.0-alpha10(transitive)
+ Added@vaadin/lit-renderer@24.7.0-alpha10(transitive)
+ Added@vaadin/overlay@24.7.0-alpha10(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.7.0-alpha10(transitive)
+ Added@vaadin/vaadin-material-styles@24.7.0-alpha10(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.7.0-alpha10(transitive)
- Removed@vaadin/a11y-base@24.7.0-alpha1(transitive)
- Removed@vaadin/component-base@24.7.0-alpha1(transitive)
- Removed@vaadin/icon@24.7.0-alpha1(transitive)
- Removed@vaadin/lit-renderer@24.7.0-alpha1(transitive)
- Removed@vaadin/overlay@24.7.0-alpha1(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.7.0-alpha1(transitive)
- Removed@vaadin/vaadin-material-styles@24.7.0-alpha1(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.7.0-alpha1(transitive)