@fluentui/react
Version:
Reusable React components for building web experiences.
65 lines • 3.39 kB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/react-hooks", "../../Utilities", "../../utilities/keytips/index"], function (require, exports, tslib_1, React, react_hooks_1, Utilities_1, index_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useKeytipData = void 0;
/**
* Hook that creates attributes for components which are enabled with Keytip.
*/
function useKeytipData(options) {
var uniqueId = React.useRef();
var keytipProps = options.keytipProps
? tslib_1.__assign({ disabled: options.disabled }, options.keytipProps) : undefined;
var keytipManager = (0, react_hooks_1.useConst)(index_1.KeytipManager.getInstance());
var prevOptions = (0, react_hooks_1.usePrevious)(options);
// useLayoutEffect used to strictly emulate didUpdate/didMount behavior
(0, react_hooks_1.useIsomorphicLayoutEffect)(function () {
if (uniqueId.current &&
keytipProps &&
((prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.keytipProps) !== options.keytipProps || (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.disabled) !== options.disabled)) {
keytipManager.update(keytipProps, uniqueId.current);
}
});
(0, react_hooks_1.useIsomorphicLayoutEffect)(function () {
// Register Keytip in KeytipManager
if (keytipProps) {
uniqueId.current = keytipManager.register(keytipProps);
}
return function () {
// Unregister Keytip in KeytipManager
keytipProps && keytipManager.unregister(keytipProps, uniqueId.current);
};
// this is meant to run only at mount, and updates are handled separately
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var nativeKeytipProps = {
ariaDescribedBy: undefined,
keytipId: undefined,
};
if (keytipProps) {
nativeKeytipProps = getKeytipData(keytipManager, keytipProps, options.ariaDescribedBy);
}
return nativeKeytipProps;
}
exports.useKeytipData = useKeytipData;
/**
* Gets the aria- and data- attributes to attach to the component
* @param keytipProps - options for Keytip
* @param describedByPrepend - ariaDescribedBy value to prepend
*/
function getKeytipData(keytipManager, keytipProps, describedByPrepend) {
// Add the parent overflow sequence if necessary
var newKeytipProps = keytipManager.addParentOverflow(keytipProps);
// Construct aria-describedby and data-ktp-id attributes
var ariaDescribedBy = (0, Utilities_1.mergeAriaAttributeValues)(describedByPrepend, (0, index_1.getAriaDescribedBy)(newKeytipProps.keySequences));
var keySequences = tslib_1.__spreadArray([], newKeytipProps.keySequences, true);
if (newKeytipProps.overflowSetSequence) {
keySequences = (0, index_1.mergeOverflows)(keySequences, newKeytipProps.overflowSetSequence);
}
var keytipId = (0, index_1.sequencesToID)(keySequences);
return {
ariaDescribedBy: ariaDescribedBy,
keytipId: keytipId,
};
}
});
//# sourceMappingURL=useKeytipData.js.map