/* @oracle/oraclejet-preact: undefined */
import { jsx, Fragment, jsxs } from 'preact/jsx-runtime';
import { useRef, useMemo, useState, useCallback } from 'preact/hooks';
import { forwardRef, useImperativeHandle } from 'preact/compat';
import './LayerHost-7931b424.js';
import './UNSAFE_Text/themes/TextStyles.css.js';
import './Flex-03129963.js';
import { T as TabBarContext } from './TabBarLayout-9b67d1b6.js';
export { a as TabBarLayout } from './TabBarLayout-9b67d1b6.js';
import './flexitem-7b7f7920.js';
import './dimensions-e4fbc23d.js';
import './boxalignment-8980856d.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 './BadgeStyles.styles.css';
import './UNSAFE_Badge/themes/redwood/BadgeThemeBaseTheme.styles.css';
import './UNSAFE_Badge/themes/redwood/BadgeVariants.css.js';
import './ConveyorBeltContext-76a29c59.js';
import './BusyStateContext-9ee9751d.js';
import './TabbableModeContext-7d8ad946.js';
import 'preact';
import { m as mergeProps } from './mergeProps-88ea8306.js';
import './TooltipContentStyles.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
import './tooltipUtils-af0abd38.js';
import './IconStyle.styles.css';
import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
import './BaseButton-41068c85.js';
import './ButtonLabelLayout-1631c997.js';
import './Floating-4a82db94.js';
import './LayerStyles.styles.css';
import './keyboardUtils-986fe923.js';
import './tabbableUtils-c8311ec6.js';
import './CollectionInteractionContext-7cf19abc.js';
import './dropdownStyles.styles.css';
import './Sheet-f9f8a4a4.js';
import './OverflowTabBarItemStyles.styles.css';
import './StyledCheckbox-d6c8f557.js';
import './SelectorStyles.styles.css';
import { i as isMobile } from './clientUtils-71f2dbaf.js';
import { styles } from './UNSAFE_TabBarMixed/themes/TabBarMixedStyles.css.js';
import { u as useTabBar, g as getItemAttribute, R as REMOVABLE_ITEM_ATTRIBUTE } from './useTabBar-c5558e77.js';
import { L as LiveRegion } from './LiveRegion-cebac18d.js';
import { T as TabBarContextMenu } from './TabBarContextMenu-c3326d67.js';
import { C as ConveyorBeltFocusContext } from './ConveyorBeltFocusContext-dd3cf192.js';
import { V as View } from './View-5bdd9b3c.js';
import { styles as styles$1 } from './UNSAFE_TabBarMixed/themes/TabBarMixedSeparator.css.js';
export { O as OverflowTabBarItem, R as RemovableTabBarItem, T as TabBarItem } from './OverflowTabBarItem-aa0ce915.js';
import './HiddenAccessibleStyles.styles.css';
import './index-aec1cc7f.js';
import './UNSAFE_Layer/themes/LayerHostStyles.css.js';
import './LayerHostStyles.styles.css';
import './TextStyles.styles.css';
import './vanilla-extract-recipes-createRuntimeFn.esm-2aaf8c98.js';
import './useTestId-f24ac480.js';
import './classNames-4e12b00d.js';
import './flexbox-529f25da.js';
import './flexbox.styles.css';
import './vanilla-extract-sprinkles-createRuntimeSprinkles.esm-2d655d37.js';
import './mergeInterpolations-30cd9a69.js';
import './mergeDeepWithKey-33e3d1be.js';
import './_curry3-577eb45e.js';
import './_curry1-63949a9b.js';
import './_curry2-01c87f61.js';
import './_isObject-1fab0f5b.js';
import './FlexStyles.styles.css';
import './flexitem.styles.css';
import './size-af1e638c.js';
import './utils-b1eb54f9.js';
import './themeContract.css-1ffed3bf.js';
import './colorUtils-b3804ee8.js';
import './arrayUtils-35a58161.js';
import './boxalignment.styles.css';
import './TabBarItemVariants.styles.css';
import './BadgeVariants.styles.css';
import './TooltipContentVariants.styles.css';
import './EnvironmentProvider-6a0a8212.js';
import './LayerManager-52a26c55.js';
import './Layer-535577b5.js';
import './UNSAFE_Layer/themes/LayerStyles.css.js';
import './useThemeInterpolations-e144e8ec.js';
import './useColorScheme-c4f6caab.js';
import './useScale-434ad939.js';
import './theme-63551f30.js';
import './Theme-e6dec6db.js';
import './useDensity-1acb0153.js';
import './unsafeDomAccess-453eb74e.js';
import './useHover-85077adb.js';
import './useToggle-8b7fcefe.js';
import './useActive-fb6d4d52.js';
import './clientHints-a42b510c.js';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js';
import './UNSAFE_BaseButton/themes/BaseButtonStyles.css.js';
import './BaseButtonStyles.styles.css';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonVariants.css.js';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonBaseTheme.styles.css';
import './useComponentTheme-d2f9e47f.js';
import './BareButton-1e3df7cb.js';
import './useBareButton-ff4bd21e.js';
import './usePress-051f5adb.js';
import './usePressClick-945cc43b.js';
import './useTabbableMode-090ed4b5.js';
import './useId-03dbfdf0.js';
import './buttonUtils-55fb1df7.js';
import './id-83adac50.js';
import './Text-834eb35e.js';
import './useButtonLabelLayoutTheme-448e671d.js';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutTheme.js';
import './UNSAFE_ButtonLabelLayout/themes/ButtonLabelLayoutStyles.css.js';
import './ButtonLabelLayoutStyles.styles.css';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.css.js';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.styles.css';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutVariants.css.js';
import './ButtonLabelLayoutVariants.styles.css';
import './useFloating-b9d680f7.js';
import './useUser-06d34d19.js';
import './positionUtils-f26caad9.js';
import './refUtils-76275c69.js';
import './useOutsideClick-b777a43e.js';
import './useModal-953082f2.js';
import './UNSAFE_Floating/themes/redwood/FloatingTheme.js';
import './UNSAFE_Floating/themes/FloatingStyles.css.js';
import './FloatingStyles.styles.css';
import './UNSAFE_Floating/themes/redwood/FloatingBaseTheme.css.js';
import './UNSAFE_Floating/themes/redwood/FloatingBaseTheme.styles.css';
import './UNSAFE_Floating/themes/redwood/FloatingVariants.css.js';
import './vanilla-extract-dynamic.esm-c909758c.js';
import './UNSAFE_Floating/themes/FloatingContract.css.js';
import './useUnsafeDomElementRef-32290273.js';
import './head-8f89fe66.js';
import './_arity-be492b9e.js';
import './_isArray-694cc52d.js';
import './_isString-675f1de9.js';
import './Modal-c0f730b8.js';
import './UNSAFE_Modal/themes/ModalStyles.css.js';
import './ModalStyles.styles.css';
import './popupUtils-51366a29.js';
import './WindowOverlay-7264c44a.js';
import './UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js';
import './WindowOverlayStyles.styles.css';
import './UNSAFE_WindowOverlay/themes/WindowOverlayContract.css.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayTheme.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.css.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.styles.css';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayVariants.css.js';
import './UNSAFE_Sheet/themes/SheetStyles.css.js';
import './SheetStyles.styles.css';
import './useAnimationStatus-b881f39a.js';
import './useAnimation-fe39685e.js';
import './animationUtils-5f409a6c.js';
import './useTranslationBundle-4822502f.js';
import './Check-ac39fe00.js';
import './Icon-4983d06e.js';
import './useTooltip-94af94d4.js';
import './useTooltipControlled-f2cfa454.js';
import './useFocus-38c95977.js';
import './useTouch-4828df25.js';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js';
import './hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js';
import './UNSAFE_Icon/themes/IconStyle.css.js';
import './CheckboxOff-3359a12d.js';
import './CheckboxOn-930b64de.js';
import './CheckboxMixed-c4594250.js';
import './UNSAFE_Checkbox/themes/CheckboxIconContract.css.js';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconTheme.js';
import './UNSAFE_Checkbox/themes/CheckboxIconStyles.css.js';
import './CheckboxIconStyles.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconBaseTheme.css.js';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconBaseTheme.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconVariants.css.js';
import './CheckboxIconVariants.styles.css';
import './StyledCheckbox.styles.css';
import './TabBarMixedStyles.styles.css';
import './collectionUtils-5313629f.js';
import './keys-49c92dbb.js';
import './Selector-23bccbe7.js';
import './BaseSelector-7cbc48bc.js';
import './PRIVATE_BaseSelector/themes/SelectorStyles.css.js';
import './useCollectionInteractionContext-3895c632.js';
import './useCollectionFocusRing-23ac7f97.js';
import './useCurrentKey-5f865bbd.js';
import './useReorderableContext-79b1c941.js';
import './ReorderableContext-0daeea89.js';
import './useContextMenuGesture-e09f4c69.js';
import './textSelectionUtils-e87a47ff.js';
import './LiveRegionStyles.styles.css';
import './SelectMenuGroupContext-aa1fe822.js';
import './Dropdown-019aba37.js';
import './usePopupAnimation-96d2bc83.js';
import './popupAnimationUtils-175151d9.js';
import './UNSAFE_Dropdown/themes/dropdownStyles.css.js';
import './useOutsideMousedown-c45c22c0.js';
import './useEffectEvent-1bb008cb.js';
import './UNSAFE_Menu/themes/MenuStyles.css.js';
import './MenuStyles.styles.css';
import './UNSAFE_Menu/themes/DropdownMenuStyles.css.js';
import './DropdownMenuStyles.styles.css';
import './Skeleton-d6f0969e.js';
import './borders-98a63040.js';
import './UNSAFE_Skeleton/themes/redwood/SkeletonTheme.js';
import './UNSAFE_Skeleton/themes/SkeletonStyles.css.js';
import './SkeletonStyles.styles.css';
import './UNSAFE_Skeleton/themes/redwood/SkeletonBaseTheme.css.js';
import './UNSAFE_Skeleton/themes/redwood/SkeletonBaseTheme.styles.css';
import './UNSAFE_Skeleton/themes/redwood/SkeletonVariants.css.js';
import './UNSAFE_Menu/themes/MenuSkeletonStyles.css.js';
import './MenuSkeletonStyles.styles.css';
import './UNSAFE_Menu/themes/redwood/MenuItemTheme.js';
import './UNSAFE_Menu/themes/MenuItemStyles.css.js';
import './MenuItemStyles.styles.css';
import './UNSAFE_Menu/themes/redwood/MenuItemBaseTheme.css.js';
import './UNSAFE_Menu/themes/redwood/MenuItemBaseTheme.styles.css';
import './UNSAFE_Menu/themes/redwood/MenuItemVariants.css.js';
import './MenuItemVariants.styles.css';
import './useInteractionStyle-99e32c23.js';
import './Separator-93c70737.js';
import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
import './SeparatorStyles.styles.css';
import './MenuSeparatorStyles.styles.css';
import './UNSAFE_Menu/themes/redwood/MenuSeparatorBaseTheme.styles.css';
import './UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js';
import './tabBarUtils-9102bb6e.js';
import './colors-03807160.js';
import './padding-90265467.js';
import './aria-efa0582c.js';
import './equals-625352e8.js';
import './TabBarMixedSeparator.styles.css';
import './EmbeddedIconButton-46434710.js';
import './Close-5a460764.js';
import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemTheme.js';
import './UNSAFE_TabBarCommon/themes/TabBarItemStyles.css.js';
import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemBaseTheme.css.js';
import './Badge-a458c469.js';
import './UNSAFE_Badge/themes/redwood/BadgeTheme.js';
import './UNSAFE_Badge/themes/BadgeStyles.css.js';
import './UNSAFE_Badge/themes/redwood/BadgeThemeBaseTheme.css.js';
import './useConveyorBeltItem-1b9081e3.js';
import './useDetectTruncation-071767c7.js';
import './truncationUtils-e37f95ee.js';
import './useResizeObserver-13641643.js';
import './useAddBusyState-7a6af61f.js';
import './useBusyStateContext-4d3c27c0.js';
import './WarningS-3e53d87e.js';
import './ErrorS-3a890bf6.js';
import './InformationS-d53c2a91.js';
import './SuccessS-b5192d40.js';
import './NavigationListLinkItem-e28fd846.js';
import './UNSAFE_NavigationListCommon/themes/redwood/NavigationListItemTheme.js';
import './UNSAFE_NavigationList/themes/NavigationListItemStyles.css.js';
import './NavigationListItemStyles.styles2.css';
import './UNSAFE_NavigationList/themes/redwood/NavigationListItemBaseTheme.css.js';
import './UNSAFE_NavigationList/themes/redwood/NavigationListItemBaseTheme.styles.css';
import './UNSAFE_NavigationList/themes/redwood/NavigationListItemVariants.css.js';
import './NavigationListItemVariants.styles.css';
import './UNSAFE_TabBarCommon/themes/TabBarItemContract.css.js';
import './UNSAFE_TabBarCommon/themes/OverflowTabBarItemStyles.css.js';
import './NavigationListItem-340ab770.js';
import './UNSAFE_NavigationList/themes/NavigationListStyles.css.js';
import './NavigationListStyles.styles.css';

/**
 * 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 isMobileDevice = isMobile();
    const defaultContextMenuConfig = useMemo(() => {
        return {
            itemsRenderer: (context) => {
                //Only if context is available, it is a mobile device and it is removable item, we will return remove context menu item
                if (context) {
                    const isRemovableItem = getItemAttribute(context.itemKey, rootRef.current, REMOVABLE_ITEM_ATTRIBUTE) != null;
                    if (isRemovableItem && isMobileDevice) {
                        const defaultItems = context.defaultMenuItems;
                        return jsx(Fragment, { children: defaultItems });
                    }
                }
                return null;
            }
        };
    }, []);
    const { rootProps, tabBarContext, menuProps, contextMenuContext, contextMenuDescription, contextMenuDescriptionId, accStatusInfo } = useTabBarMixed({
        class: styles.tabBarBase,
        edge: 'bottom',
        onRemove,
        onSelect,
        ref: rootRef,
        selection,
        size,
        children,
        contextMenuConfig: defaultContextMenuConfig
    });
    const isContextMenuAvailable = defaultContextMenuConfig != null && isMobileDevice;
    //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();
            }
        }
    }));
    const [isSuppressOverflowFocus, setIsSuppressOverflowFocus] = useState(false);
    const focusTabbarRoot = useCallback(() => {
        rootRef.current?.focus();
    }, []);
    // Begin a short window where overflow div should not be focusable.
    const beginTabPass = useCallback(() => {
        setIsSuppressOverflowFocus(true);
    }, []);
    // End that window after focus moves away.
    const endTabPass = useCallback(() => {
        setIsSuppressOverflowFocus(false);
    }, []);
    const onKeyDown = useCallback((e) => {
        // We only want to suppress overflow focus when the user is tabbing.
        if (e.key === 'Tab' && !e.shiftKey) {
            // Tell conveyor to make its overflow non-focusable (tabIndex = -1)
            beginTabPass?.();
        }
    }, [beginTabPass]);
    const onBlur = useCallback(() => {
        // End that suppress overflow after focus moves away.
        endTabPass?.();
    }, [endTabPass]);
    const focusContext = useMemo(() => ({
        focusTabbarRoot,
        isSuppressOverflowFocus,
        beginTabPass,
        endTabPass
    }), [isSuppressOverflowFocus, focusTabbarRoot, beginTabPass, endTabPass]);
    const mergedRootProps = mergeProps(rootProps, { onKeyDown, onBlur });
    return (jsxs(ConveyorBeltFocusContext.Provider, { value: focusContext, children: [jsx(TabBarContext.Provider, { value: tabBarContext, children: jsx("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...mergedRootProps, children: children }) }), isContextMenuAvailable && contextMenuDescriptionId && contextMenuDescription && (jsx("span", { id: contextMenuDescriptionId, children: jsx(HiddenAccessible, { children: contextMenuDescription }) })), isContextMenuAvailable && accStatusInfo && jsx(LiveRegion, { children: accStatusInfo }), isContextMenuAvailable && (jsx(TabBarContextMenu, { ...menuProps, contextMenuConfig: defaultContextMenuConfig, contextMenuContext: contextMenuContext }))] }));
});

/**
 * TabBarMixedSeparator is a component that renders a visual separator (displayed
 * as a vertical line) between collections of tabs within TabBarMixed.
 *
 * @param {TabBarMixedSeparatorProps} props Component props for TabBarMixedSeparator.
 * @returns {JSX.Element} Component element for TabBarMixedSeparator.
 */
function TabBarMixedSeparator(props) {
    const { padding = 0 } = props;
    return (jsx(View, { padding: [0, padding, 0, padding], children: jsx("div", { class: styles$1.separator, role: "presentation" }) }));
}

export { TabBarMixed, TabBarMixedSeparator };
//# sourceMappingURL=UNSAFE_TabBarMixed.js.map
