@material/tooltip - npm Package Compare versions

		@@ -110,7 +110,7 @@ /**
		*/
		anchorContainsElement(element: HTMLElement): boolean;
		anchorContainsElement(element: Element): boolean;
		/**
		* Checks if element is contained within the tooltip element.
		*/
		tooltipContainsElement(element: HTMLElement): boolean;
		tooltipContainsElement(element: Element): boolean;
		/**
		@@ -123,31 +123,31 @@ * Sets focus on the anchor element.
		*/
		registerEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		registerEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Deregisters an event listener to the root element.
		*/
		deregisterEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		deregisterEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Registers an event listener to the anchor element.
		*/
		registerAnchorEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		registerAnchorEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Deregisters an event listener to the anchor element.
		*/
		deregisterAnchorEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		deregisterAnchorEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Registers an event listener to the document body.
		*/
		registerDocumentEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		registerDocumentEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Deregisters an event listener to the document body.
		*/
		deregisterDocumentEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		deregisterDocumentEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Registers an event listener to the window.
		*/
		registerWindowEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		registerWindowEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		* Deregisters an event listener to the window.
		*/
		deregisterWindowEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
		deregisterWindowEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
		/**
		@@ -179,2 +179,7 @@ * Notification that the tooltip element has been fully hidden. Typically used
		getActiveElement(): Element \| null;
		/**
		* @return whether the provided object is an Element or not. This is
		* required because Elements from iframes are typed differently.
		*/
		isInstanceOfElement(eventTarget: EventTarget \| null): boolean;
		}

CHANGELOG.md

		@@ -6,8 +6,27 @@ # Change Log

		# [15.0.0-canary.c5018840c.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.c5018840c.0) (2022-07-18)
		# [15.0.0-canary.c51a0bbcc.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.c51a0bbcc.0) (2023-11-15)


		### Bug Fixes

		* tooltip: Fix incorrect measurements of rich tooltip widths on subsequent renders. ([7ab3cd3](https://github.com/material-components/material-components-web/commit/7ab3cd3c82b92e741be2e67ead5c44a0ceabe794))
		* tooltip: Fixes rich tooltip's theme-styles mixin. ([d584104](https://github.com/material-components/material-components-web/commit/d584104537cafcb624ea14f6b8b9ff6ea937d49a))
		* tooltip: Fixes rich tooltip's theme-styles mixin. ([697fbde](https://github.com/material-components/material-components-web/commit/697fbdebd4bfaa85e0901855d11c8e7febc9c991))
		* tooltip: Fixing tooltip's z-index mixin. ([a40e3c7](https://github.com/material-components/material-components-web/commit/a40e3c7684ea43f4a75f6afc75a0b8a34f49b674))
		* tooltip: Stop keydown event propogation when ESC key is pressed. ([8d2d8d3](https://github.com/material-components/material-components-web/commit/8d2d8d3c4dbe6c2a17a5de099d59f7503101999f))
		* tooltip: Stop re-calculating the tooltip position if the anchor is scrolled out of view. ([684e33d](https://github.com/material-components/material-components-web/commit/684e33d250337e53e46fec26c97b382ba85f60d0))
		* tooltip: Uses single quotes when retrieving key value from sass map. ([953e689](https://github.com/material-components/material-components-web/commit/953e689f3bad9b0a2b3c384470fc82a2d4b8df92))
		* Makes material component to depend on https://github.com/google/safevalues and be Trusted Type compatible. ([a44241e](https://github.com/material-components/material-components-web/commit/a44241e5428e7f83733b2bd8ab7acc851fc2fb85))


		### Features

		* tooltip: Adding side positioning options for plain tooltips. ([ba9c296](https://github.com/material-components/material-components-web/commit/ba9c29637109e300121c79a902df12310d9cf9fe))
		* tooltip: Adjust rich tooltip's theme and theme-styles mixins. ([7c73f61](https://github.com/material-components/material-components-web/commit/7c73f6134470aaf1ef7f7ab931ba0c658116cf18))
		* tooltip: Calls resolvers in theme-mixins to resolve typography tokens. ([66c5cbb](https://github.com/material-components/material-components-web/commit/66c5cbb9446da83a6c48570e12b1ab71cae3c77f))
		* tooltip: Emit event for tooltip shown. ([31e517c](https://github.com/material-components/material-components-web/commit/31e517cea3002785ad2936ebc6ef12317b9d4133))
		* tooltip: Interactive rich tooltip content becomes scrollable if it extends beyond the max-height limit. ([0ad1283](https://github.com/material-components/material-components-web/commit/0ad128337d689ca084fbda457a7204daa750b792))
		* tooltip: No longer re-calculate persistent rich tooltip's position on scroll. ([5cb8e21](https://github.com/material-components/material-components-web/commit/5cb8e2174bb381556fc684283748659b322dc158))
		* tooltip: Updates to accessibility guidance states that we want all rich tooltips to be reachable via screenreader linear navigation. The idea is that the user should always be able to hear the message of a rich tooltip line-by-line regardless of if the tooltip is interactive, non-interactive, persistent, or non-persistent. ([5490e32](https://github.com/material-components/material-components-web/commit/5490e32e718b4357ee6b58c329fdae28f89ea171))
		* tooltip: Updating `handleDocumentClick` method to utilize a new `isInstanceOfElement` adapter method. ([9af09b9](https://github.com/material-components/material-components-web/commit/9af09b967a7c01c6c45d2afb5cbb00f0e43904ce))
		* tooltip: When calculating rich tooltip width, we now take the viewport width into account. ([817002c](https://github.com/material-components/material-components-web/commit/817002c296d5a9220c2b940e3383fdd42ca2aa87))

component.d.ts

		@@ -27,4 +27,5 @@ /**
		import { MDCTooltipFoundation } from './foundation';
		/** MDC Tooltip */
		export declare class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
		static attachTo(root: Element): MDCTooltip;
		static attachTo(root: HTMLElement): MDCTooltip;
		private anchorElem;
		@@ -31,0 +32,0 @@ private isTooltipRich;

component.js

		@@ -23,6 +23,10 @@ /**
		*/
		import { __extends } from "tslib";
		import { __extends, __makeTemplateObject } from "tslib";
		import { MDCComponent } from '@material/base/component';
		import { safeAttrPrefix } from 'safevalues';
		import { safeElement } from 'safevalues/dom';
		import { CssClasses, events } from './constants';
		import { MDCTooltipFoundation } from './foundation';
		var ARIA_ATTR_PREFIX = [safeAttrPrefix(templateObject_1 \|\| (templateObject_1 = __makeTemplateObject(["aria-"], ["aria-"])))];
		/** MDC Tooltip */
		var MDCTooltip = /** @class */ (function (_super) {
		@@ -55,4 +59,4 @@ __extends(MDCTooltip, _super);
		};
		this.handleFocus = function (evt) {
		_this.foundation.handleAnchorFocus(evt);
		this.handleFocus = function (event) {
		_this.foundation.handleAnchorFocus(event);
		};
		@@ -143,3 +147,3 @@ this.handleMouseLeave = function () {
		setAttribute: function (attr, value) {
		_this.root.setAttribute(attr, value);
		safeElement.setPrefixedAttribute(ARIA_ATTR_PREFIX, _this.root, attr, value);
		},
		@@ -169,6 +173,3 @@ removeAttribute: function (attr) {
		getTooltipSize: function () {
		return {
		width: _this.root.offsetWidth,
		height: _this.root.offsetHeight
		};
		return { width: _this.root.offsetWidth, height: _this.root.offsetHeight };
		},
		@@ -186,4 +187,5 @@ getAnchorBoundingRect: function () {
		setAnchorAttribute: function (attr, value) {
		var _a;
		(_a = _this.anchorElem) === null \|\| _a === void 0 ? void 0 : _a.setAttribute(attr, value);
		if (_this.anchorElem) {
		safeElement.setPrefixedAttribute(ARIA_ATTR_PREFIX, _this.anchorElem, attr, value);
		}
		},
		@@ -202,31 +204,31 @@ isRTL: function () { return getComputedStyle(_this.root).direction === 'rtl'; },
		},
		registerEventHandler: function (evt, handler) {
		registerEventHandler: function (event, handler) {
		if (_this.root instanceof HTMLElement) {
		_this.root.addEventListener(evt, handler);
		_this.root.addEventListener(event, handler);
		}
		},
		deregisterEventHandler: function (evt, handler) {
		deregisterEventHandler: function (event, handler) {
		if (_this.root instanceof HTMLElement) {
		_this.root.removeEventListener(evt, handler);
		_this.root.removeEventListener(event, handler);
		}
		},
		registerAnchorEventHandler: function (evt, handler) {
		registerAnchorEventHandler: function (event, handler) {
		var _a;
		(_a = _this.anchorElem) === null \|\| _a === void 0 ? void 0 : _a.addEventListener(evt, handler);
		(_a = _this.anchorElem) === null \|\| _a === void 0 ? void 0 : _a.addEventListener(event, handler);
		},
		deregisterAnchorEventHandler: function (evt, handler) {
		deregisterAnchorEventHandler: function (event, handler) {
		var _a;
		(_a = _this.anchorElem) === null \|\| _a === void 0 ? void 0 : _a.removeEventListener(evt, handler);
		(_a = _this.anchorElem) === null \|\| _a === void 0 ? void 0 : _a.removeEventListener(event, handler);
		},
		registerDocumentEventHandler: function (evt, handler) {
		document.body.addEventListener(evt, handler);
		registerDocumentEventHandler: function (event, handler) {
		document.body.addEventListener(event, handler);
		},
		deregisterDocumentEventHandler: function (evt, handler) {
		document.body.removeEventListener(evt, handler);
		deregisterDocumentEventHandler: function (event, handler) {
		document.body.removeEventListener(event, handler);
		},
		registerWindowEventHandler: function (evt, handler) {
		window.addEventListener(evt, handler);
		registerWindowEventHandler: function (event, handler) {
		window.addEventListener(event, handler);
		},
		deregisterWindowEventHandler: function (evt, handler) {
		window.removeEventListener(evt, handler);
		deregisterWindowEventHandler: function (event, handler) {
		window.removeEventListener(event, handler);
		},
		@@ -267,2 +269,5 @@ notifyHidden: function () {
		},
		isInstanceOfElement: function (eventTarget) {
		return eventTarget instanceof Element;
		},
		};
		@@ -275,2 +280,3 @@ //tslint:enable:object-literal-sort-keys
		export { MDCTooltip };
		var templateObject_1;
		//# sourceMappingURL=component.js.map

constants.d.ts

		@@ -42,2 +42,3 @@ /**
		SHOW_DELAY_MS: number;
		MIN_WIDTH: number;
		MIN_HEIGHT: number;
		@@ -47,2 +48,3 @@ MAX_WIDTH: number;
		ANIMATION_SCALE: number;
		RICH_MAX_WIDTH: number;
		};
		@@ -49,0 +51,0 @@ declare const attributes: {

constants.js

		@@ -44,2 +44,3 @@ /**
		// LINT.IfChange(tooltip-dimensions)
		MIN_WIDTH: 40,
		MIN_HEIGHT: 24,
		@@ -52,2 +53,5 @@ MAX_WIDTH: 200,
		// LINT.ThenChange(_tooltip.scss:tooltip-anim-scale)
		// LINT.IfChange(rich-tooltip-dimensions)
		RICH_MAX_WIDTH: 320,
		// LINT.ThenChange(_tooltip.scss:rich-tooltip-dimensions)
		};
		@@ -54,0 +58,0 @@ var attributes = {

foundation.d.ts

		@@ -27,2 +27,3 @@ /**
		import { AnchorBoundaryType, PositionWithCaret, XPosition, YPosition } from './constants';
		/** MDC Tooltip Foundation */
		export declare class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
		@@ -66,8 +67,16 @@ static get defaultAdapter(): MDCTooltipAdapter;
		private preventContextMenuOnLongTouch;
		/**
		* Helper methods for determining if the event target or related target
		* is contained inside the tooltip or the anchor. These methods are used to
		* determing when a tooltip should be closed of left open on blur and click
		* events.
		*/
		private tooltipContainsRelatedTargetElement;
		private anchorOrTooltipContainsTargetElement;
		handleAnchorTouchend(): void;
		handleAnchorFocus(evt: FocusEvent): void;
		handleAnchorFocus(event: FocusEvent): void;
		handleAnchorMouseLeave(): void;
		handleAnchorClick(): void;
		handleDocumentClick(evt: MouseEvent): void;
		handleKeydown(evt: KeyboardEvent): void;
		handleDocumentClick(event: MouseEvent): void;
		handleKeydown(event: KeyboardEvent): boolean;
		private handleAnchorBlur;
		@@ -99,14 +108,15 @@ private handleTooltipMouseEnter;
		/**
		* Calculates the position of the tooltip. A tooltip will be placed beneath
		* the anchor element and aligned either with the 'start'/'end' edge of the
		* anchor element or the 'center'.
		* Calculates the position of the tooltip. A tooltip will be placed
		* beneath the anchor element and aligned either with the 'start'/'end'
		* edge of the anchor element or the 'center'.
		*
		* Tooltip alignment is selected such that the tooltip maintains a threshold
		* distance away from the viewport (defaulting to 'center' alignment). If the
		* placement of the anchor prevents this threshold distance from being
		* maintained, the tooltip is positioned so that it does not collide with the
		* viewport.
		* Tooltip alignment is selected such that the tooltip maintains a
		* threshold distance away from the viewport (defaulting to 'center'
		* alignment). If the placement of the anchor prevents this threshold
		* distance from being maintained, the tooltip is positioned so that it
		* does not collide with the viewport.
		*
		* Users can specify an alignment, however, if this alignment results in the
		* tooltip colliding with the viewport, this specification is overwritten.
		* Users can specify an alignment, however, if this alignment results in
		* the tooltip colliding with the viewport, this specification is
		* overwritten.
		*/
		@@ -178,3 +188,3 @@ private calculateTooltipStyles;
		/**
		* Returns the corresponding PositionWithCaret enum for the proivded
		* Returns the corresponding PositionWithCaret enum for the provided
		* XPositionWithCaret and YPositionWithCaret enums. This mapping exists so our
		@@ -181,0 +191,0 @@ * public API accepts only PositionWithCaret enums (as all combinations of

package.json

		{
		"name": "@material/tooltip",
		"description": "The Material Components Web tooltip component.",
		"version": "15.0.0-canary.c5018840c.0",
		"version": "15.0.0-canary.c51a0bbcc.0",
		"license": "MIT",
		@@ -20,11 +20,14 @@ "keywords": [
		"dependencies": {
		"@material/animation": "15.0.0-canary.c5018840c.0",
		"@material/base": "15.0.0-canary.c5018840c.0",
		"@material/dom": "15.0.0-canary.c5018840c.0",
		"@material/elevation": "15.0.0-canary.c5018840c.0",
		"@material/feature-targeting": "15.0.0-canary.c5018840c.0",
		"@material/rtl": "15.0.0-canary.c5018840c.0",
		"@material/shape": "15.0.0-canary.c5018840c.0",
		"@material/theme": "15.0.0-canary.c5018840c.0",
		"@material/typography": "15.0.0-canary.c5018840c.0",
		"@material/animation": "15.0.0-canary.c51a0bbcc.0",
		"@material/base": "15.0.0-canary.c51a0bbcc.0",
		"@material/button": "15.0.0-canary.c51a0bbcc.0",
		"@material/dom": "15.0.0-canary.c51a0bbcc.0",
		"@material/elevation": "15.0.0-canary.c51a0bbcc.0",
		"@material/feature-targeting": "15.0.0-canary.c51a0bbcc.0",
		"@material/rtl": "15.0.0-canary.c51a0bbcc.0",
		"@material/shape": "15.0.0-canary.c51a0bbcc.0",
		"@material/theme": "15.0.0-canary.c51a0bbcc.0",
		"@material/tokens": "15.0.0-canary.c51a0bbcc.0",
		"@material/typography": "15.0.0-canary.c51a0bbcc.0",
		"safevalues": "^0.3.4",
		"tslib": "^2.1.0"
		@@ -35,3 +38,3 @@ },
		},
		"gitHead": "c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4"
		"gitHead": "e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b"
		}

README.md

		@@ -99,3 +99,3 @@ <!--docs:
		<div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
		lorem ipsum dolor
		<span class="mdc-tooltip__label">lorem ipsum dolor<span>
		</div>
		@@ -188,3 +188,3 @@ </div>
		<div class="mdc-tooltip--rich-actions">
		<button class="mdc-button">
		<button class="mdc-button mdc-tooltip--rich-action">
		<div class="mdc-button__ripple"></div>
		@@ -222,3 +222,3 @@ <span class="mdc-button__focus-ring"></span>
		<div class="mdc-tooltip--rich-actions">
		<button class="mdc-button">
		<button class="mdc-button mdc-tooltip--rich-action">
		<div class="mdc-button__ripple"></div>
		@@ -268,3 +268,3 @@ <span class="mdc-button__focus-ring"></span>
		<div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
		toggle favorite
		<span class="mdc-tooltip__label">toggle favorite</span>
		</div>
		@@ -271,0 +271,0 @@ </div>

_tooltip-theme.scss