@workday/canvas-kit-react/dist/commonjs/collection/lib/useOverflowListTarget.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOverflowListTarget = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const useOverflowListModel_1 = require("./useOverflowListModel");
// use a hidden style instead of `hidden` attribute for measurement purposes. `hidden` elements have no dimensions
const hiddenStyle = {
    position: 'absolute',
    left: -99999,
};
/**
 * This elemProps hook measures an overflow list target and reports it to an `OverflowListModel`.
 * This is used in overflow detection.
 */
exports.useOverflowListTarget = (0, common_1.createElemPropsHook)(useOverflowListModel_1.useOverflowListModel)((model, ref) => {
    const { elementRef, localRef } = (0, common_1.useLocalRef)(ref);
    // track first render to force correct size calculations
    const firstRender = react_1.default.useRef(true);
    (0, common_1.useMountLayout)(() => {
        firstRender.current = false;
        if (localRef.current) {
            const styles = getComputedStyle(localRef.current);
            model.events.setOverflowTargetSize({
                width: localRef.current.offsetWidth +
                    parseFloat(styles.marginLeft) +
                    parseFloat(styles.marginRight),
                height: localRef.current.offsetHeight +
                    parseFloat(styles.marginTop) +
                    parseFloat(styles.marginBottom),
            });
        }
    });
    const isHidden = !model.state.hiddenIds.length;
    return {
        ref: elementRef,
        'aria-hidden': isHidden,
        tabIndex: isHidden ? -1 : 0,
        style: isHidden ? hiddenStyle : undefined,
    };
});