power-apps-codeapps-blog-part2/node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/useTab.js

'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    useTabA11yBehavior_unstable: function() {
        return useTabA11yBehavior_unstable;
    },
    useTabBase_unstable: function() {
        return useTabBase_unstable;
    },
    useTab_unstable: function() {
        return useTab_unstable;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const _TabList = require("../TabList");
const useTab_unstable = (props, ref)=>{
    const { content } = props;
    const state = useTabBase_unstable(props, ref);
    const focusAttributes = useTabA11yBehavior_unstable(state);
    const appearance = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.appearance);
    const reserveSelectedTabSpace = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.reserveSelectedTabSpace);
    const size = (0, _TabList.useTabListContext_unstable)((ctx)=>{
        var _ctx_size;
        return (_ctx_size = ctx.size) !== null && _ctx_size !== void 0 ? _ctx_size : 'medium';
    });
    const contentReservedSpace = content && typeof content === 'object' ? (0, _reactutilities.omit)(content, [
        'ref'
    ]) : content;
    return {
        ...state,
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        components: {
            ...state.components,
            contentReservedSpace: 'span'
        },
        root: {
            ...focusAttributes,
            ...state.root
        },
        contentReservedSpace: _reactutilities.slot.optional(contentReservedSpace, {
            renderByDefault: !state.selected && !state.iconOnly && reserveSelectedTabSpace,
            defaultProps: {
                children: props.children
            },
            elementType: 'span'
        }),
        appearance,
        size
    };
};
const useTabBase_unstable = (props, ref)=>{
    const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;
    const selectTabOnFocus = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.selectTabOnFocus);
    const listDisabled = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.disabled);
    const selected = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.selectedValue === value);
    const onRegister = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onRegister);
    const onUnregister = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onUnregister);
    const onSelect = (0, _TabList.useTabListContext_unstable)((ctx)=>ctx.onSelect);
    const vertical = (0, _TabList.useTabListContext_unstable)((ctx)=>!!ctx.vertical);
    const disabled = listDisabled || tabDisabled;
    const innerRef = _react.useRef(null);
    const onSelectCallback = (event)=>onSelect(event, {
            value
        });
    const onTabClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, onSelectCallback));
    const onTabFocus = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onFocus, onSelectCallback));
    _react.useEffect(()=>{
        onRegister({
            value,
            ref: innerRef
        });
        return ()=>{
            onUnregister({
                value,
                ref: innerRef
            });
        };
    }, [
        onRegister,
        onUnregister,
        innerRef,
        value
    ]);
    const iconSlot = _reactutilities.slot.optional(icon, {
        elementType: 'span'
    });
    const contentSlot = _reactutilities.slot.always(content, {
        defaultProps: {
            children: props.children
        },
        elementType: 'span'
    });
    const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
    return {
        components: {
            root: 'button',
            icon: 'span',
            content: 'span',
            contentReservedSpace: 'span'
        },
        root: _reactutilities.slot.always({
            ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
            role: 'tab',
            type: 'button',
            // aria-selected undefined indicates it is not selectable
            // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
            'aria-selected': disabled ? undefined : `${selected}`,
            value,
            ...rest,
            disabled,
            onClick: onTabClick,
            onFocus: selectTabOnFocus ? onTabFocus : onFocus
        }, {
            elementType: 'button'
        }),
        icon: iconSlot,
        iconOnly,
        content: contentSlot,
        disabled,
        selected,
        value,
        vertical
    };
};
const useTabA11yBehavior_unstable = ({ selected })=>{
    return (0, _reacttabster.useTabsterAttributes)({
        focusable: {
            isDefault: selected
        }
    });
};