@react-md/tooltip - npm Package Compare versions

Comparing version 2.0.0-alpha.1 to 2.0.0-alpha.3

dist/scssVariables.d.ts

 declare const _default: {
     "rmd-tooltip-background-color": string;
     "rmd-tooltip-color": string;
+    "rmd-tooltip-max-width": string;
     "rmd-tooltip-enter-duration": string;
@@ -14,2 +15,3 @@ "rmd-tooltip-exit-duration": string;
     "rmd-tooltip-dense-font-size": string;
+    "rmd-tooltip-dense-line-height": string;
     "rmd-tooltip-dense-min-height": string;
@@ -29,3 +31,5 @@ "rmd-tooltip-dense-horizontal-padding": string;
         "min-height": string;
+        "max-width": string;
         "font-size": string;
+        "line-height": string;
         "horizontal-padding": string;
@@ -36,2 +40,3 @@ "vertical-padding": string;
         "dense-font-size": string;
+        "dense-line-height": string;
         "dense-horizontal-padding": string;
@@ -38,0 +43,0 @@ "dense-vertical-padding": string;

dist/scssVariables.js

@@ -5,4 +5,5 @@ "use strict";
 exports.default = {
-    "rmd-tooltip-background-color": "#232f34",
+    "rmd-tooltip-background-color": "#616161",
     "rmd-tooltip-color": "var(--rmd-theme-text-primary-on-dark, #d9d9d9)",
+    "rmd-tooltip-max-width": "15rem",
     "rmd-tooltip-enter-duration": "0.15s",
@@ -18,2 +19,3 @@ "rmd-tooltip-exit-duration": "0.15s",
     "rmd-tooltip-dense-font-size": "0.625rem",
+    "rmd-tooltip-dense-line-height": "0.825rem",
     "rmd-tooltip-dense-min-height": "1.375rem",
@@ -27,3 +29,3 @@ "rmd-tooltip-dense-horizontal-padding": "0.5rem",
     "rmd-tooltip-theme-values": {
-        "background-color": "#232f34",
+        "background-color": "#616161",
         color: "var(--rmd-theme-text-primary-on-dark, #d9d9d9)",
@@ -34,3 +36,5 @@ "transition-distance": "0.5rem",
         "min-height": "2rem",
+        "max-width": "15rem",
         "font-size": "1rem",
+        "line-height": "1.5rem",
         "horizontal-padding": "1rem",
@@ -41,2 +45,3 @@ "vertical-padding": "0.5625rem",
         "dense-font-size": "0.625rem",
+        "dense-line-height": "0.825rem",
         "dense-horizontal-padding": "0.5rem",
@@ -43,0 +48,0 @@ "dense-vertical-padding": "0.375rem",

es/constants.js

@@ -15,2 +15,3 @@ export var TOOLTIP_CLASS_NAMES = {
 export var DEFAULT_DELAY = 1000;
+export var DEFAULT_THRESHOLD = 0.75;
 //# sourceMappingURL=constants.js.map

es/index.js

@@ -5,3 +5,5 @@ export { default as Tooltip } from "./Tooltip";
 export * from "./Tooltipped";
-export * from "./hooks";
+export { default as useTooltipState } from "./useTooltipState";
+export { default as TooltipHoverModeConfig } from "./TooltipHoverModeConfig";
+export { useTooltipHoverModeState } from "./useTooltipHoverMode";
 //# sourceMappingURL=index.js.map

es/Tooltip.js

@@ -34,4 +34,4 @@ var __assign = (this && this.__assign) || function () {
     var _a;
-    var _b = providedProps, className = _b.className, classNames = _b.classNames, visible = _b.visible, timeout = _b.timeout, lazyMount = _b.lazyMount, dense = _b.dense, lineWrap = _b.lineWrap, position = _b.position, children = _b.children, forwardedRef = _b.forwardedRef, onEnter = _b.onEnter, onEntering = _b.onEntering, onEntered = _b.onEntered, onExit = _b.onExit, onExiting = _b.onExiting, onExited = _b.onExited, props = __rest(_b, ["className", "classNames", "visible", "timeout", "lazyMount", "dense", "lineWrap", "position", "children", "forwardedRef", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
-    return (React.createElement(CSSTransition, { classNames: classNames, in: visible, timeout: timeout, appear: lazyMount, mountOnEnter: lazyMount, unmountOnExit: lazyMount, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited },
+    var _b = providedProps, className = _b.className, classNames = _b.classNames, visible = _b.visible, timeout = _b.timeout, dense = _b.dense, lineWrap = _b.lineWrap, position = _b.position, children = _b.children, forwardedRef = _b.forwardedRef, onEnter = _b.onEnter, onEntering = _b.onEntering, onEntered = _b.onEntered, onExit = _b.onExit, onExiting = _b.onExiting, onExited = _b.onExited, mountOnEnter = _b.mountOnEnter, unmountOnExit = _b.unmountOnExit, props = __rest(_b, ["className", "classNames", "visible", "timeout", "dense", "lineWrap", "position", "children", "forwardedRef", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "mountOnEnter", "unmountOnExit"]);
+    return (React.createElement(CSSTransition, { classNames: classNames, in: visible, timeout: timeout, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit },
         React.createElement("span", __assign({}, props, { ref: forwardedRef, role: "tooltip", className: cn(block((_a = {
@@ -48,6 +48,5 @@ dense: dense,
     position: "below",
-    lineWrap: false,
+    lineWrap: true,
     classNames: TOOLTIP_CLASS_NAMES,
     timeout: TOOLTIP_TRANSITION_TIMEOUT,
-    lazyMount: false,
 };
@@ -96,3 +95,2 @@ Tooltip.defaultProps = defaultProps;
             onExited: PropTypes.func,
-            lazyMount: PropTypes.bool,
             position: PropTypes.oneOf(["above", "below", "left", "right"]),
@@ -99,0 +97,0 @@ visible: PropTypes.bool.isRequired,

es/Tooltipped.js

@@ -21,12 +21,69 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from "react";
+import React, { Children, cloneElement, Fragment, useMemo, } from "react";
 import cn from "classnames";
 import { ConditionalPortal, } from "@react-md/portal";
-import { useTooltipState } from "./hooks";
+import { useFixedPositioning } from "@react-md/transition";
+import { unitToNumber, } from "@react-md/utils";
+import { DEFAULT_DELAY, DEFAULT_THRESHOLD } from "./constants";
+import useTooltipState from "./useTooltipState";
 import Tooltip from "./Tooltip";
+var MERGABLE_PROPS = [
+    "onMouseEnter",
+    "onMouseLeave",
+    "onTouchStart",
+    "onTouchMove",
+    "onFocus",
+    "onKeyDown",
+    "onContextMenu",
+];
 var Tooltipped = function (providedProps) {
-    var props = providedProps;
-    var id = props.id, className = props.className, children = props.children, tooltipChildren = props.tooltip, vhMargin = props.vhMargin, vwMargin = props.vwMargin, hoverDelay = props.hoverDelay, focusDelay = props.focusDelay, spacing = props.spacing, denseSpacing = props.denseSpacing, defaultVisible = props.defaultVisible, defaultPosition = props.defaultPosition, portal = props.portal, portalInto = props.portalInto, portalIntoId = props.portalIntoId, tooltipProps = __rest(props, ["id", "className", "children", "tooltip", "vhMargin", "vwMargin", "hoverDelay", "focusDelay", "spacing", "denseSpacing", "defaultVisible", "defaultPosition", "portal", "portalInto", "portalIntoId"]);
+    var _a = providedProps, id = _a.id, children = _a.children, tooltipChildren = _a.tooltip, vhMargin = _a.vhMargin, vwMargin = _a.vwMargin, hoverDelay = _a.hoverDelay, focusDelay = _a.focusDelay, touchTimeout = _a.touchTimeout, spacing = _a.spacing, denseSpacing = _a.denseSpacing, propPosition = _a.position, positionThreshold = _a.positionThreshold, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onTouchMove = _a.onTouchMove, onContextMenu = _a.onContextMenu, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, disableAutoSpacing = _a.disableAutoSpacing, onShow = _a.onShow, onHide = _a.onHide, disableHoverMode = _a.disableHoverMode, describedBy = _a["aria-describedby"], defaultPosition = _a.defaultPosition, disableSwapping = _a.disableSwapping, props = __rest(_a, ["id", "children", "tooltip", "vhMargin", "vwMargin", "hoverDelay", "focusDelay", "touchTimeout", "spacing", "denseSpacing", "position", "positionThreshold", "portal", "portalInto", "portalIntoId", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchMove", "onContextMenu", "onFocus", "onKeyDown", "disableAutoSpacing", "onShow", "onHide", "disableHoverMode", "aria-describedby", "defaultPosition", "disableSwapping"]);
+    var dense = props.dense;
+    var _b = useTooltipState({
+        position: propPosition,
+        defaultPosition: defaultPosition,
+        positionThreshold: positionThreshold,
+        hoverDelay: hoverDelay,
+        focusDelay: focusDelay,
+        touchTimeout: touchTimeout,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onTouchStart: onTouchStart,
+        onTouchMove: onTouchMove,
+        onContextMenu: onContextMenu,
+        onFocus: onFocus,
+        onKeyDown: onKeyDown,
+        onShow: onShow,
+        onHide: onHide,
+    }), hide = _b.hide, visible = _b.visible, position = _b.position, handlers = _b.handlers;
+    var currentSpacing = useMemo(function () { return unitToNumber(dense ? denseSpacing : spacing); }, [spacing, denseSpacing, dense]);
+    var getOptions;
+    if (!disableAutoSpacing) {
+        getOptions = function (node) {
+            var spacing = unitToNumber(window.getComputedStyle(node).getPropertyValue("--rmd-tooltip-spacing"));
+            return { xMargin: spacing, yMargin: spacing };
+        };
+    }
+    var isHorizontal = position === "left" || position === "right";
+    var _c = useFixedPositioning({
+        anchor: {
+            x: isHorizontal ? position : "center",
+            y: isHorizontal ? "center" : position,
+        },
+        disableSwapping: typeof disableSwapping === "boolean" ? disableSwapping : !!propPosition,
+        fixedTo: function () { return document.getElementById(id); },
+        vhMargin: vhMargin,
+        vwMargin: vwMargin,
+        yMargin: currentSpacing,
+        xMargin: currentSpacing,
+        onResize: hide,
+        onScroll: hide,
+        getOptions: getOptions,
+    }), style = _c.style, onEnter = _c.onEnter, onEntering = _c.onEntering, onEntered = _c.onEntered, onExited = _c.onExited;
     if (!tooltipChildren) {
-        return children({ containerProps: { id: id }, tooltip: null });
+        if (typeof children === "function") {
+            return children({ id: id, tooltip: null, "aria-describedby": describedBy });
+        }
+        var child_1 = Children.only(children);
+        return cloneElement(child_1, { id: id, "aria-describedby": describedBy });
     }
@@ -37,21 +94,47 @@ var tooltipId = props.tooltipId;
     }
-    var _a = useTooltipState(props), visible = _a.visible, position = _a.position, tooltipHandlers = _a.tooltipHandlers, containerHandlers = _a.containerHandlers;
     var tooltip = (React.createElement(ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
-        React.createElement(Tooltip, __assign({ id: tooltipId }, tooltipProps, tooltipHandlers, { className: cn({ "rmd-tooltip--portal": portal || portalInto || portalIntoId }, className), visible: visible, position: position }), tooltipChildren)));
-    return children({
-        tooltip: tooltip,
-        containerProps: __assign({ id: id, "aria-describedby": tooltipId }, containerHandlers),
-    });
+        React.createElement(Tooltip, __assign({ id: tooltipId }, props, { position: position, style: style, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExited: onExited, visible: visible }), tooltipChildren)));
+    var config = __assign({ id: id, "aria-describedby": cn(tooltipId, describedBy) }, handlers);
+    if (typeof children === "function") {
+        return children(__assign({}, config, { tooltip: tooltip }));
+    }
+    var child = Children.only(children);
+    var merged = MERGABLE_PROPS.reduce(function (result, propName) {
+        var propHandler = child.props[propName];
+        var configHandler = config[propName];
+        if (!propHandler) {
+            result[propName] = configHandler;
+        }
+        else if (!configHandler) {
+            result[propName] = propHandler;
+        }
+        else {
+            // not sure of a way to actually strongly type this nicely.
+            result[propName] = function (event) {
+                propHandler(event);
+                configHandler(event);
+            };
+        }
+        return result;
+    }, __assign({}, config));
+    return (React.createElement(Fragment, null,
+        cloneElement(child, merged),
+        tooltip));
 };
 var defaultProps = {
-    portal: false,
     dense: false,
-    hoverDelay: 1000,
-    focusDelay: 1000,
-    vhMargin: 0.32,
-    vwMargin: 0.32,
     spacing: "1.5rem",
     denseSpacing: "0.875rem",
-    defaultVisible: false,
-    defaultPosition: "auto",
+    positionThreshold: DEFAULT_THRESHOLD,
+    disableAutoSpacing: false,
+    vhMargin: 16,
+    vwMargin: 16,
+    portal: false,
+    lineWrap: true,
+    focusDelay: DEFAULT_DELAY,
+    hoverDelay: DEFAULT_DELAY,
+    touchTimeout: DEFAULT_DELAY,
+    mountOnEnter: false,
+    unmountOnExit: false,
+    defaultPosition: "below",
 };
@@ -58,0 +141,0 @@ Tooltipped.defaultProps = defaultProps;

lib/constants.js

@@ -17,2 +17,3 @@ "use strict";
 exports.DEFAULT_DELAY = 1000;
+exports.DEFAULT_THRESHOLD = 0.75;
 //# sourceMappingURL=constants.js.map

lib/index.js

@@ -12,3 +12,8 @@ "use strict";
 __export(require("./Tooltipped"));
-__export(require("./hooks"));
+var useTooltipState_1 = require("./useTooltipState");
+exports.useTooltipState = useTooltipState_1.default;
+var TooltipHoverModeConfig_1 = require("./TooltipHoverModeConfig");
+exports.TooltipHoverModeConfig = TooltipHoverModeConfig_1.default;
+var useTooltipHoverMode_1 = require("./useTooltipHoverMode");
+exports.useTooltipHoverModeState = useTooltipHoverMode_1.useTooltipHoverModeState;
 //# sourceMappingURL=index.js.map

lib/Tooltip.js

@@ -46,4 +46,4 @@ "use strict";
     var _a;
-    var _b = providedProps, className = _b.className, classNames = _b.classNames, visible = _b.visible, timeout = _b.timeout, lazyMount = _b.lazyMount, dense = _b.dense, lineWrap = _b.lineWrap, position = _b.position, children = _b.children, forwardedRef = _b.forwardedRef, onEnter = _b.onEnter, onEntering = _b.onEntering, onEntered = _b.onEntered, onExit = _b.onExit, onExiting = _b.onExiting, onExited = _b.onExited, props = __rest(_b, ["className", "classNames", "visible", "timeout", "lazyMount", "dense", "lineWrap", "position", "children", "forwardedRef", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
-    return (react_1.default.createElement(react_transition_group_1.CSSTransition, { classNames: classNames, in: visible, timeout: timeout, appear: lazyMount, mountOnEnter: lazyMount, unmountOnExit: lazyMount, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited },
+    var _b = providedProps, className = _b.className, classNames = _b.classNames, visible = _b.visible, timeout = _b.timeout, dense = _b.dense, lineWrap = _b.lineWrap, position = _b.position, children = _b.children, forwardedRef = _b.forwardedRef, onEnter = _b.onEnter, onEntering = _b.onEntering, onEntered = _b.onEntered, onExit = _b.onExit, onExiting = _b.onExiting, onExited = _b.onExited, mountOnEnter = _b.mountOnEnter, unmountOnExit = _b.unmountOnExit, props = __rest(_b, ["className", "classNames", "visible", "timeout", "dense", "lineWrap", "position", "children", "forwardedRef", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "mountOnEnter", "unmountOnExit"]);
+    return (react_1.default.createElement(react_transition_group_1.CSSTransition, { classNames: classNames, in: visible, timeout: timeout, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit },
         react_1.default.createElement("span", __assign({}, props, { ref: forwardedRef, role: "tooltip", className: classnames_1.default(block((_a = {
@@ -60,6 +60,5 @@ dense: dense,
     position: "below",
-    lineWrap: false,
+    lineWrap: true,
     classNames: constants_1.TOOLTIP_CLASS_NAMES,
     timeout: constants_1.TOOLTIP_TRANSITION_TIMEOUT,
-    lazyMount: false,
 };
@@ -108,3 +107,2 @@ Tooltip.defaultProps = defaultProps;
             onExited: PropTypes.func,
-            lazyMount: PropTypes.bool,
             position: PropTypes.oneOf(["above", "below", "left", "right"]),
@@ -111,0 +109,0 @@ visible: PropTypes.bool.isRequired,

lib/Tooltipped.js

@@ -22,2 +22,9 @@ "use strict";
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -27,12 +34,69 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var portal_1 = require("@react-md/portal");
-var hooks_1 = require("./hooks");
+var transition_1 = require("@react-md/transition");
+var utils_1 = require("@react-md/utils");
+var constants_1 = require("./constants");
+var useTooltipState_1 = __importDefault(require("./useTooltipState"));
 var Tooltip_1 = __importDefault(require("./Tooltip"));
+var MERGABLE_PROPS = [
+    "onMouseEnter",
+    "onMouseLeave",
+    "onTouchStart",
+    "onTouchMove",
+    "onFocus",
+    "onKeyDown",
+    "onContextMenu",
+];
 var Tooltipped = function (providedProps) {
-    var props = providedProps;
-    var id = props.id, className = props.className, children = props.children, tooltipChildren = props.tooltip, vhMargin = props.vhMargin, vwMargin = props.vwMargin, hoverDelay = props.hoverDelay, focusDelay = props.focusDelay, spacing = props.spacing, denseSpacing = props.denseSpacing, defaultVisible = props.defaultVisible, defaultPosition = props.defaultPosition, portal = props.portal, portalInto = props.portalInto, portalIntoId = props.portalIntoId, tooltipProps = __rest(props, ["id", "className", "children", "tooltip", "vhMargin", "vwMargin", "hoverDelay", "focusDelay", "spacing", "denseSpacing", "defaultVisible", "defaultPosition", "portal", "portalInto", "portalIntoId"]);
+    var _a = providedProps, id = _a.id, children = _a.children, tooltipChildren = _a.tooltip, vhMargin = _a.vhMargin, vwMargin = _a.vwMargin, hoverDelay = _a.hoverDelay, focusDelay = _a.focusDelay, touchTimeout = _a.touchTimeout, spacing = _a.spacing, denseSpacing = _a.denseSpacing, propPosition = _a.position, positionThreshold = _a.positionThreshold, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onTouchMove = _a.onTouchMove, onContextMenu = _a.onContextMenu, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, disableAutoSpacing = _a.disableAutoSpacing, onShow = _a.onShow, onHide = _a.onHide, disableHoverMode = _a.disableHoverMode, describedBy = _a["aria-describedby"], defaultPosition = _a.defaultPosition, disableSwapping = _a.disableSwapping, props = __rest(_a, ["id", "children", "tooltip", "vhMargin", "vwMargin", "hoverDelay", "focusDelay", "touchTimeout", "spacing", "denseSpacing", "position", "positionThreshold", "portal", "portalInto", "portalIntoId", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchMove", "onContextMenu", "onFocus", "onKeyDown", "disableAutoSpacing", "onShow", "onHide", "disableHoverMode", "aria-describedby", "defaultPosition", "disableSwapping"]);
+    var dense = props.dense;
+    var _b = useTooltipState_1.default({
+        position: propPosition,
+        defaultPosition: defaultPosition,
+        positionThreshold: positionThreshold,
+        hoverDelay: hoverDelay,
+        focusDelay: focusDelay,
+        touchTimeout: touchTimeout,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onTouchStart: onTouchStart,
+        onTouchMove: onTouchMove,
+        onContextMenu: onContextMenu,
+        onFocus: onFocus,
+        onKeyDown: onKeyDown,
+        onShow: onShow,
+        onHide: onHide,
+    }), hide = _b.hide, visible = _b.visible, position = _b.position, handlers = _b.handlers;
+    var currentSpacing = react_1.useMemo(function () { return utils_1.unitToNumber(dense ? denseSpacing : spacing); }, [spacing, denseSpacing, dense]);
+    var getOptions;
+    if (!disableAutoSpacing) {
+        getOptions = function (node) {
+            var spacing = utils_1.unitToNumber(window.getComputedStyle(node).getPropertyValue("--rmd-tooltip-spacing"));
+            return { xMargin: spacing, yMargin: spacing };
+        };
+    }
+    var isHorizontal = position === "left" || position === "right";
+    var _c = transition_1.useFixedPositioning({
+        anchor: {
+            x: isHorizontal ? position : "center",
+            y: isHorizontal ? "center" : position,
+        },
+        disableSwapping: typeof disableSwapping === "boolean" ? disableSwapping : !!propPosition,
+        fixedTo: function () { return document.getElementById(id); },
+        vhMargin: vhMargin,
+        vwMargin: vwMargin,
+        yMargin: currentSpacing,
+        xMargin: currentSpacing,
+        onResize: hide,
+        onScroll: hide,
+        getOptions: getOptions,
+    }), style = _c.style, onEnter = _c.onEnter, onEntering = _c.onEntering, onEntered = _c.onEntered, onExited = _c.onExited;
     if (!tooltipChildren) {
-        return children({ containerProps: { id: id }, tooltip: null });
+        if (typeof children === "function") {
+            return children({ id: id, tooltip: null, "aria-describedby": describedBy });
+        }
+        var child_1 = react_1.Children.only(children);
+        return react_1.cloneElement(child_1, { id: id, "aria-describedby": describedBy });
     }
@@ -43,21 +107,47 @@ var tooltipId = props.tooltipId;
     }
-    var _a = hooks_1.useTooltipState(props), visible = _a.visible, position = _a.position, tooltipHandlers = _a.tooltipHandlers, containerHandlers = _a.containerHandlers;
     var tooltip = (react_1.default.createElement(portal_1.ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
-        react_1.default.createElement(Tooltip_1.default, __assign({ id: tooltipId }, tooltipProps, tooltipHandlers, { className: classnames_1.default({ "rmd-tooltip--portal": portal || portalInto || portalIntoId }, className), visible: visible, position: position }), tooltipChildren)));
-    return children({
-        tooltip: tooltip,
-        containerProps: __assign({ id: id, "aria-describedby": tooltipId }, containerHandlers),
-    });
+        react_1.default.createElement(Tooltip_1.default, __assign({ id: tooltipId }, props, { position: position, style: style, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExited: onExited, visible: visible }), tooltipChildren)));
+    var config = __assign({ id: id, "aria-describedby": classnames_1.default(tooltipId, describedBy) }, handlers);
+    if (typeof children === "function") {
+        return children(__assign({}, config, { tooltip: tooltip }));
+    }
+    var child = react_1.Children.only(children);
+    var merged = MERGABLE_PROPS.reduce(function (result, propName) {
+        var propHandler = child.props[propName];
+        var configHandler = config[propName];
+        if (!propHandler) {
+            result[propName] = configHandler;
+        }
+        else if (!configHandler) {
+            result[propName] = propHandler;
+        }
+        else {
+            // not sure of a way to actually strongly type this nicely.
+            result[propName] = function (event) {
+                propHandler(event);
+                configHandler(event);
+            };
+        }
+        return result;
+    }, __assign({}, config));
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.cloneElement(child, merged),
+        tooltip));
 };
 var defaultProps = {
-    portal: false,
     dense: false,
-    hoverDelay: 1000,
-    focusDelay: 1000,
-    vhMargin: 0.32,
-    vwMargin: 0.32,
     spacing: "1.5rem",
     denseSpacing: "0.875rem",
-    defaultVisible: false,
-    defaultPosition: "auto",
+    positionThreshold: constants_1.DEFAULT_THRESHOLD,
+    disableAutoSpacing: false,
+    vhMargin: 16,
+    vwMargin: 16,
+    portal: false,
+    lineWrap: true,
+    focusDelay: constants_1.DEFAULT_DELAY,
+    hoverDelay: constants_1.DEFAULT_DELAY,
+    touchTimeout: constants_1.DEFAULT_DELAY,
+    mountOnEnter: false,
+    unmountOnExit: false,
+    defaultPosition: "below",
 };
@@ -64,0 +154,0 @@ Tooltipped.defaultProps = defaultProps;

package.json

 {
   "name": "@react-md/tooltip",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "description": "Create accessible tooltips within react-md based on the material design specifications.",
   "scripts": {
     "build": "dev-utils build",
-    "clean": "dev-utils clean",
-    "test": "dev-utils test"
+    "clean": "dev-utils clean"
   },
@@ -35,7 +34,8 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/portal": "^2.0.0-alpha.1",
-    "@react-md/theme": "^2.0.0-alpha.1",
-    "@react-md/transition": "^2.0.0-alpha.1",
-    "@react-md/typography": "^2.0.0-alpha.1",
-    "@react-md/utils": "^2.0.0-alpha.1",
+    "@react-md/portal": "^2.0.0-alpha.3",
+    "@react-md/sizing": "^2.0.0-alpha.3",
+    "@react-md/theme": "^2.0.0-alpha.3",
+    "@react-md/transition": "^2.0.0-alpha.3",
+    "@react-md/typography": "^2.0.0-alpha.3",
+    "@react-md/utils": "^2.0.0-alpha.3",
     "classnames": "^2.2.6",
@@ -53,3 +53,3 @@ "react-transition-group": "^4.0.0"
   },
-  "gitHead": "9197bcdf38df3cff304499431696dc8e950b4b17"
+  "gitHead": "ff38fa4bd502c527ffb8847eae71b471456e0355"
 }

src/constants.ts

@@ -22,1 +22,2 @@ import {
 export const DEFAULT_DELAY = 1000;
+export const DEFAULT_THRESHOLD = 0.75;

src/index.ts

@@ -7,3 +7,5 @@ export { default as Tooltip } from "./Tooltip";
 
-export * from "./hooks";
-export * from "./types.d";
+export { default as useTooltipState } from "./useTooltipState";
+
+export { default as TooltipHoverModeConfig } from "./TooltipHoverModeConfig";
+export { useTooltipHoverModeState } from "./useTooltipHoverMode";

src/scssVariables.ts

 /** this is an auto-generated file from @react-md/dev-utils */
 export default {
-  "rmd-tooltip-background-color": "#232f34",
+  "rmd-tooltip-background-color": "#616161",
   "rmd-tooltip-color": "var(--rmd-theme-text-primary-on-dark, #d9d9d9)",
+  "rmd-tooltip-max-width": "15rem",
   "rmd-tooltip-enter-duration": "0.15s",
@@ -15,2 +16,3 @@ "rmd-tooltip-exit-duration": "0.15s",
   "rmd-tooltip-dense-font-size": "0.625rem",
+  "rmd-tooltip-dense-line-height": "0.825rem",
   "rmd-tooltip-dense-min-height": "1.375rem",
@@ -24,3 +26,3 @@ "rmd-tooltip-dense-horizontal-padding": "0.5rem",
   "rmd-tooltip-theme-values": {
-    "background-color": "#232f34",
+    "background-color": "#616161",
     color: "var(--rmd-theme-text-primary-on-dark, #d9d9d9)",
@@ -31,3 +33,5 @@ "transition-distance": "0.5rem",
     "min-height": "2rem",
+    "max-width": "15rem",
     "font-size": "1rem",
+    "line-height": "1.5rem",
     "horizontal-padding": "1rem",
@@ -38,2 +42,3 @@ "vertical-padding": "0.5625rem",
     "dense-font-size": "0.625rem",
+    "dense-line-height": "0.825rem",
     "dense-horizontal-padding": "0.5rem",
@@ -40,0 +45,0 @@ "dense-vertical-padding": "0.375rem",

types/constants.d.ts

@@ -5,1 +5,2 @@ import { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 export declare const DEFAULT_DELAY = 1000;
+export declare const DEFAULT_THRESHOLD = 0.75;

types/index.d.ts

@@ -5,3 +5,4 @@ export { default as Tooltip } from "./Tooltip";
 export * from "./Tooltipped";
-export * from "./hooks";
-export * from "./types.d";
+export { default as useTooltipState } from "./useTooltipState";
+export { default as TooltipHoverModeConfig } from "./TooltipHoverModeConfig";
+export { useTooltipHoverModeState } from "./useTooltipHoverMode";

types/Tooltip.d.ts

 import React, { ReactNode, CSSProperties, HTMLAttributes } from "react";
 import { CSSTransitionClassNames, TransitionTimeout, TransitionProps } from "@react-md/transition";
-import { TooltipPosition } from "./types.d";
+import { SimplePosition } from "@react-md/utils";
 /**
  * The base props for the `Tooltip` component. This can be extended when creating custom tooltip implementations.
  */
-export interface TooltipProps extends Pick<TransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited">, HTMLAttributes<HTMLSpanElement> {
+export interface TooltipProps extends Pick<TransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "mountOnEnter" | "unmountOnExit">, HTMLAttributes<HTMLSpanElement> {
     /**
@@ -30,3 +30,4 @@ * An id for the tooltip. This is required for accessibility and finding an element to attach
     /**
-     * Boolean if the dense styles for tooltips should be displayed.
+     * Boolean if the tooltip is using the dense spec. This will reduce the padding, margin and
+     * font size for the tooltip and is usually used for desktop displays.
      */
@@ -54,11 +55,6 @@ dense?: boolean;
     /**
-     * Boolean if the tooltip should be "lazily mounted" into the dom. When this is set to true, the tooltip element won't
-     * be rendered until the visible prop is set to true or during the exit transition.
-     */
-    lazyMount?: boolean;
-    /**
      * This is the position that the tooltip should appear related to its container element as well as
      * updating the animation direction.
      */
-    position?: TooltipPosition;
+    position?: SimplePosition;
     /**
@@ -65,0 +61,0 @@ * Boolean if the tooltip is visible. This value changing will trigger the different animations.

types/Tooltipped.d.ts

@@ -1,15 +0,17 @@
-import { FunctionComponent, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { FC, ReactElement, ReactNode } from "react";
 import { RenderConditionalPortalProps } from "@react-md/portal";
 import { Omit } from "@react-md/utils";
+import { MergableHandlers } from "./useHandlers";
+import { TooltipStateOptions } from "./useTooltipState";
 import { TooltipProps } from "./Tooltip";
-import { TooltipConfig, MergableTooltipHandlers } from "./types.d";
-export interface TooltippedWithTooltip {
+interface TooltippedProvidedProps extends MergableHandlers {
+    id: string;
+    "aria-describedby"?: string;
     tooltip: ReactNode;
-    containerProps: {
-        id: string;
-        "aria-describedby"?: string;
-    } & MergableTooltipHandlers;
 }
-export declare type TooltippedChildrenRenderer = (props: TooltippedWithTooltip) => ReactElement<any>;
-export interface TooltippedProps extends Partial<TooltipConfig>, RenderConditionalPortalProps, Omit<TooltipProps, keyof HTMLAttributes<HTMLSpanElement> | "visible" | "position"> {
+export declare type ChildrenRenderer = (props: TooltippedProvidedProps) => ReactElement;
+interface ChildProps extends Partial<Omit<TooltippedProvidedProps, "tooltip">> {
+}
+declare type ChildElement = ReactElement<ChildProps>;
+export interface TooltippedProps extends RenderConditionalPortalProps, Omit<TooltipStateOptions, "defaultPosition">, Partial<Pick<TooltipStateOptions, "defaultPosition">>, Pick<TooltipProps, "dense" | "lineWrap" | "mountOnEnter" | "unmountOnExit"> {
     /**
@@ -31,2 +33,7 @@ * The id for the element that has a tooltip. This is always required since it will
     /**
+     * An optional additional `aria-describedby` id or ids to merge with the tooltip id. This is really
+     * used for things like notifications or when multiple elements describe your tooltipped element..
+     */
+    "aria-describedby"?: string;
+    /**
      * An optional className for the tooltip
@@ -36,8 +43,50 @@ */
     /**
-     * A children renderer function to render the tooltip as well as provide the required
-     * container props to dynamically show/hide the tooltip.
+     * The amount of spacing to use for a non-dense tooltip. This is the distance between the container
+     * element and the tooltip.
      */
-    children: TooltippedChildrenRenderer;
+    spacing?: number | string;
+    /**
+     * The amount of spacing to use for a dense tooltip. This is the distance between the container
+     * element and the tooltip.
+     */
+    denseSpacing?: number | string;
+    /**
+     * Since `react-md` provides mixins to automatically apply a dense spec through mixins via mexia queries,
+     * the dense spec might be applied in css instead of in JS. This component will actually check the current
+     * spacing amount that has been applied when the tooltip becomes visible.
+     *
+     * If this behavior is not desired, you can enable this prop and it will only use the provided `spacing`
+     * or `denseSpacing` props based on the `dense` prop.
+     */
+    disableAutoSpacing?: boolean;
+    /**
+     * Boolean if the auto-swapping behavior should be disabled. When this value is `undefined`, it'll be treated as `true` when
+     * the `position` prop is defined, otherwise `false`.
+     */
+    disableSwapping?: boolean;
+    /**
+     * This is the viewwidth margin to use in the positioning calculation. This is just used so that the tooltip
+     * can be placed with some spacing between the left and right edges of the viewport if desired.
+     */
+    vwMargin?: number;
+    /**
+     * This is the viewheight margin to use in the positioning calculation. This is just used so that the tooltip
+     * can be placed with some spacing between the top and abottom edges of the viewport if desired.
+     */
+    vhMargin?: number;
+    /**
+     * The children for this component should either be a function or a single element. When the children is a single
+     * React element, this component will clone in an `id`, `aria-describedby`, and all the event handlers required
+     * to show and hide a tooltip relative to that element. This means that you will need to ensure that the child component
+     * accepts and passes down the `on*` event handlers to a DOM node as well as the `id` and `aria-describedby` for
+     * accessibility. Every component within react-md should do this by default.
+     *
+     * If the children is a function, the `id`, `aria-describedby`, and event handlers will be provided as well as a new `tooltip`
+     * prop so that you have more control over rendering the tooltip.
+     *
+     * If the tooltip prop was not provided to this component, the `aria-describedby` and the event handlers will be omitted.
+     */
+    children: ChildElement | ChildrenRenderer;
 }
-declare const Tooltipped: FunctionComponent<TooltippedProps>;
+declare const Tooltipped: FC<TooltippedProps>;
 export default Tooltipped;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

241975

increased by76.61%

Number of package files

87

increased by58.18%

Lines of code

3998

increased by99.7%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

49

increased byInfinity%

Number of low supply chain risk alerts

3

decreased by-40%

Worsened metrics

Dependency count

10

increased by11.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@react-md/sizing@^2.0.0-alpha.3

• Updated@react-md/portal@^2.0.0-alpha.3

• Updated@react-md/theme@^2.0.0-alpha.3

• Updated@react-md/transition@^2.0.0-alpha.3

• Updated@react-md/typography@^2.0.0-alpha.3

• Updated@react-md/utils@^2.0.0-alpha.3