/* @oracle/oraclejet-preact: undefined */
import { jsx } from 'preact/jsx-runtime';
import { useRef } from 'preact/hooks';
import { forwardRef, useImperativeHandle } from 'preact/compat';
import './LayerHost-e6402730.js';
import './UNSAFE_Text/themes/TextStyles.css.js';
import './Flex-ce31b351.js';
import { T as TabBarContext } from './useTabBarContext-0071d2a7.js';
import './flexitem-7b7f7920.js';
import './dimensions-d4159ace.js';
import './boxalignment-a90bc50d.js';
import './logger-c92f309c.js';
import './TabBarItemStyles.styles.css';
import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemBaseTheme.styles.css';
import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemVariants.css.js';
import './ConveyorBeltContext-76a29c59.js';
import './VisBusyStateContext-9ae84b1d.js';
import 'preact';
import './TooltipContentStyles.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
import './tooltipUtils-768450a7.js';
import './IconStyle.styles.css';
import './NavigationList-fb05e081.js';
import './useNavigationListItem-a28f2c34.js';
import './UNSAFE_NavigationList/themes/NavigationListItemStyles.css.js';
import './UNSAFE_NavigationList/themes/redwood/NavigationListItemBaseTheme.styles.css';
import './UNSAFE_NavigationList/themes/redwood/NavigationListItemVariants.css.js';
import './Floating-f02677ba.js';
import './LayerStyles.styles.css';
import './keyboardUtils-38854729.js';
import './tabbableUtils-6ceb767f.js';
import './CollectionInteractionContext-7cf19abc.js';
import './dropdownStyles.styles.css';
import './Sheet-da412baf.js';
import './OverflowTabBarItemStyles.styles.css';
import { styles } from './UNSAFE_TabBarMixed/themes/TabBarMixedStyles.css.js';
import { u as useTabBar } from './useTabBar-cbac0c2e.js';

/**
 * A thin wrapper around useTabBar hook
 */
function useTabBarMixed(options) {
    return useTabBar(options);
}

/**
 * A navigation component that enables horizontal navigation between distinct content with a mixture of static and dynamic tabs.
 *
 * @param {TabBarMixedProps} props TabBarMixed component props.
 * @returns {JSX.Element} TabBarMixed component element.
 */
const TabBarMixed = forwardRef((props, focusHandleRef) => {
    const { children, onRemove, onSelect, selection, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = props;
    const rootRef = useRef(null);
    const { rootProps, tabBarContext } = useTabBarMixed({
        class: styles.tabBarBase,
        edge: 'bottom',
        onRemove,
        onSelect,
        ref: rootRef,
        selection,
        size,
        children
    });
    //Allows to call focus on rootRef without having to expose it
    useImperativeHandle(focusHandleRef, () => ({
        focus: () => {
            if (rootRef.current) {
                rootRef.current.focus();
            }
        },
        blur: () => {
            if (rootRef.current) {
                rootRef.current.blur();
            }
        }
    }));
    return (jsx(TabBarContext.Provider, { value: tabBarContext, children: jsx("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rootProps, children: children }) }));
});

export { TabBarMixed as T };
//# sourceMappingURL=TabBarMixed-b8e2427c.js.map
