import { __assign } from "tslib";
import { withThemeableProps } from '../../useThemeable';
import Vue from 'vue';
var refs = {
    firstBumper: 'firstBumper',
    lastBumper: 'lastBumper',
    mergedRootRef: 'mergedRootRef',
};
export var FocusTrapZone = Vue.extend({
    name: 'FocusTrapZone',
    props: __assign(__assign({}, withThemeableProps()), { disabled: { type: Boolean, default: false }, ariaLabelledBy: { type: String, default: undefined } }),
    render: function (h) {
        var _a, _b;
        var _c = this, ariaLabelledBy = _c.ariaLabelledBy, className = _c.className, disabled = _c.disabled;
        var bumperProps = {
            'aria-hidden': true,
            style: {
                pointerEvents: 'none',
                position: 'fixed', // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them
            },
            tabIndex: disabled ? -1 : 0,
            'data-is-visible': true,
        };
        // TODO implementation
        return h('div', {
            class: className,
            ref: 'mergedRootRef',
            attrs: __assign(__assign({}, this.$attrs), { 'aria-labelledby': ariaLabelledBy }),
            on: {
            // focusCapture: onRootFocusCapture,
            // focus: onFocus,
            // blur: onBlur,
            // blurCapute: onRootBlurCapture
            },
        }, [
            h('div', { attrs: bumperProps, ref: refs.firstBumper }),
            (_b = (_a = this.$scopedSlots).default) === null || _b === void 0 ? void 0 : _b.call(_a, {}),
            h('div', { attrs: bumperProps, ref: refs.lastBumper }),
        ]);
    },
});
//# sourceMappingURL=FocusTrapZone.js.map