@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
139 lines (138 loc) • 5.16 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTooltip = void 0;
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);
};
const clear = () => {
window.clearTimeout(timer.current);
timer.current = undefined;
};
// be sure to clear our timeout
React.useEffect(() => {
return () => {
window.clearTimeout(timer.current);
};
}, [timer]);
return {
start,
clear,
};
};
const isInteractiveElement = (element) => {
const tagName = element.tagName.toLowerCase();
const tabIndex = element.getAttribute('tabindex');
switch (tagName) {
case 'button':
case 'input':
case 'select':
case 'textarea':
case 'details':
return true;
default:
return tabIndex ? Number(tabIndex) >= 0 : false;
}
};
/**
* Convenience hook for creating components with tooltips. It will return an object of properties to mix
* into a target, popper and tooltip
*/
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 = (0, popup_1.usePopupModel)();
const [anchorElement, setAnchorElement] = React.useState(null);
const id = (0, common_1.useUniqueId)();
const intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
const intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
const onHide = () => {
intentTimerHide.start();
intentTimerShow.clear();
};
const onOpen = () => {
intentTimerShow.start();
intentTimerHide.clear();
};
const onOpenFromTarget = (event) => {
setAnchorElement(event.currentTarget);
onOpen();
};
const onFocus = (event) => {
if (!mouseDownRef.current) {
onOpenFromTarget(event);
}
mouseDownRef.current = false;
};
const onMouseDown = (event) => {
mouseDownRef.current = true;
if (isInteractiveElement(event.currentTarget)) {
popupModel.events.hide();
}
};
(0, popup_1.useCloseOnEscape)(popupModel);
(0, popup_1.useAlwaysCloseOnOutsideClick)(popupModel);
(0, popup_1.useCloseOnFullscreenExit)(popupModel);
(0, popup_1.useCloseOnTargetHidden)(popupModel);
const visible = popupModel.state.visibility !== 'hidden';
const targetProps = {
// extra description of the target element for assistive technology
'aria-describedby': type === 'describe' && visible ? id : undefined,
'aria-description': type === 'description' ? titleText : 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,
/** Mix these properties into the `Popper` component */
popperProps: {
open: visible,
anchorElement,
ref: popupModel.state.stackRef,
},
/** Mix these properties into the `TooltipContainer` component */
tooltipProps: {
id: type === 'describe' && visible ? id : undefined,
role: 'tooltip',
onMouseEnter: onOpen,
onMouseLeave: onHide,
},
};
}
exports.useTooltip = useTooltip;