@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/tooltip/lib/useTooltip.js

@@ -20,33 +20,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTooltip = void 0;
-var React = __importStar(require("react"));
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var common_1 = require("@workday/canvas-kit-react/common");
-var useIntentTimer = function (fn, waitMs) {
-    if (waitMs === void 0) { waitMs = 0; }
-    var timer = React.useRef();
-    var start = function () {
+const React = __importStar(require("react"));
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const common_1 = require("@workday/canvas-kit-react/common");
+const useIntentTimer = (fn, waitMs = 0) => {
+    const timer = React.useRef();
+    const start = () => {
         timer.current = window.setTimeout(fn, waitMs);
     };
-    var clear = function () {
+    const clear = () => {
         window.clearTimeout(timer.current);
         timer.current = undefined;
     };
     // be sure to clear our timeout
-    React.useEffect(function () {
-        return function () {
+    React.useEffect(() => {
+        return () => {
             window.clearTimeout(timer.current);
         };
     }, [timer]);
     return {
-        start: start,
-        clear: clear,
+        start,
+        clear,
     };
 };
-var isInteractiveElement = function (element) {
-    var tagName = element.tagName.toLowerCase();
-    var tabIndex = element.getAttribute('tabindex');
+const isInteractiveElement = (element) => {
+    const tagName = element.tagName.toLowerCase();
+    const tabIndex = element.getAttribute('tabindex');
     switch (tagName) {
         case 'button':
         case 'input':
@@ -62,33 +61,32 @@ var isInteractiveElement = function (element) {
  * Convenience hook for creating components with tooltips. It will return an object of properties to mix
  * into a target, popper and tooltip
  */
-function useTooltip(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d, _e = _b.showDelay, showDelay = _e === void 0 ? 300 : _e, _f = _b.hideDelay, hideDelay = _f === void 0 ? 100 : _f;
-    var mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
-    var popupModel = popup_1.usePopupModel();
-    var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
-    var id = common_1.useUniqueId();
-    var intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
-    var intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
-    var onHide = function () {
+function useTooltip({ type = 'label', titleText = '', showDelay = 300, hideDelay = 100, } = {}) {
+    const mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
+    const popupModel = popup_1.usePopupModel();
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const id = common_1.useUniqueId();
+    const intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
+    const intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
+    const onHide = () => {
         intentTimerHide.start();
         intentTimerShow.clear();
     };
-    var onOpen = function () {
+    const onOpen = () => {
         intentTimerShow.start();
         intentTimerHide.clear();
     };
-    var onOpenFromTarget = function (event) {
+    const onOpenFromTarget = (event) => {
         setAnchorElement(event.currentTarget);
         onOpen();
     };
-    var onFocus = function (event) {
+    const onFocus = (event) => {
         if (!mouseDownRef.current) {
             onOpenFromTarget(event);
         }
         mouseDownRef.current = false;
     };
-    var onMouseDown = function (event) {
+    const onMouseDown = (event) => {
         mouseDownRef.current = true;
         if (isInteractiveElement(event.currentTarget)) {
             popupModel.events.hide();
@@ -98,24 +96,29 @@ function useTooltip(_a) {
     popup_1.useAlwaysCloseOnOutsideClick(popupModel);
     popup_1.useCloseOnFullscreenExit(popupModel);
     popup_1.useCloseOnTargetHidden(popupModel);
-    var visible = popupModel.state.visibility !== 'hidden';
+    const visible = popupModel.state.visibility !== 'hidden';
+    const targetProps = {
+        // extra description of the target element for assistive technology
+        'aria-describedby': type === 'describe' && visible ? id : undefined,
+        // This will replace the accessible name of the target element
+        'aria-label': type === 'label' ? titleText : undefined,
+        onMouseEnter: onOpenFromTarget,
+        onMouseLeave: onHide,
+        onMouseDown,
+        onFocus,
+        onBlur: onHide,
+    };
+    // remove `aria-describedby` if undefined to not override what's provided
+    if (targetProps['aria-describedby'] === undefined) {
+        delete targetProps['aria-describedby'];
+    }
     return {
         /** Mix these properties into the target element. **Must be an Element** */
-        targetProps: {
-            // extra description of the target element for assistive technology
-            'aria-describedby': type === 'describe' && visible ? id : undefined,
-            // This will replace the accessible name of the target element
-            'aria-label': type === 'label' ? titleText : undefined,
-            onMouseEnter: onOpenFromTarget,
-            onMouseLeave: onHide,
-            onMouseDown: onMouseDown,
-            onFocus: onFocus,
-            onBlur: onHide,
-        },
+        targetProps,
         /** Mix these properties into the `Popper` component */
         popperProps: {
             open: visible,
-            anchorElement: anchorElement,
+            anchorElement,
             ref: popupModel.state.stackRef,
         },
         /** Mix these properties into the `TooltipContainer` component */