/* @oracle/oraclejet-preact: undefined */
import { jsxs, jsx, Fragment } from 'preact/jsx-runtime';
import { useCallback, useRef, useEffect } from 'preact/hooks';
import { u as useHover } from './useHover-85077adb.js';
import { E as EmbeddedIconButton } from './EmbeddedIconButton-46434710.js';
import { S as SvgClose } from './Close-5a460764.js';
import { F as Flex } from './Flex-03129963.js';
import { m as mergeInterpolations } from './mergeInterpolations-30cd9a69.js';
import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';
import { u as useTabBarContext } from './TabBarLayout-9b67d1b6.js';
import { u as useTranslationBundle } from './useTranslationBundle-4822502f.js';
import { createRef } from 'preact';
import { g as getClientHints } from './clientHints-a42b510c.js';
import { c as classNames } from './classNames-4e12b00d.js';
import { I as Icon } from './Icon-4983d06e.js';
import { D as Dropdown } from './Dropdown-019aba37.js';
import { S as Sheet } from './Sheet-f9f8a4a4.js';
import { u as usePress } from './usePress-051f5adb.js';
import { u as useUser } from './useUser-06d34d19.js';
import { T as Text } from './Text-834eb35e.js';
import { d as dimensionInterpolations } from './dimensions-e4fbc23d.js';
import { b as boxAlignmentInterpolations } from './boxalignment-8980856d.js';
import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
import { TabBarItemRedwoodTheme } from './UNSAFE_TabBarCommon/themes/redwood/TabBarItemTheme.js';
import { B as Badge } from './Badge-a458c469.js';
import { u as useConveyorBeltItem } from './useConveyorBeltItem-1b9081e3.js';
import { u as useDetectTruncation } from './useDetectTruncation-071767c7.js';
import { S as SvgWarningS } from './WarningS-3e53d87e.js';
import { S as SvgErrorS } from './ErrorS-3a890bf6.js';
import { S as SvgInformationS } from './InformationS-d53c2a91.js';
import { S as SvgSuccessS } from './SuccessS-b5192d40.js';
import { m as mergeProps } from './mergeProps-88ea8306.js';
import { u as useTabBarItemTooltip, N as NavigationListLinkItem, R as RemovableNavigationListItem } from './NavigationListLinkItem-e28fd846.js';
import { tabBarItemVars } from './UNSAFE_TabBarCommon/themes/TabBarItemContract.css.js';
import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
import { styles } from './UNSAFE_TabBarCommon/themes/OverflowTabBarItemStyles.css.js';
import { N as NavigationList, a as NavigationListItem } from './NavigationListItem-340ab770.js';

const onClickLink = (event) => {
    event.preventDefault();
};
function BaseTabBarItem({ itemKey, label, icon, badge, metadata, severity = 'none', removeIcon, showFocusRingOverride, selectionOverride, displayOverride, labelMaxWidth, href, 'aria-controls': ariaControls, 'aria-haspopup': ariaHasPopup }) {
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const { onSelect, selection, currentKey, showFocusRing, hideTooltip, layout, display, size, isEdgeBottom, tabItemPrefix } = useTabBarContext();
    const isCurrent = currentKey === itemKey;
    const { ref, ...conveyorBeltProps } = useConveyorBeltItem({ isCurrent });
    //Selection
    //Dependency on currentKey because upon removal selectionChange does not change hence no re render
    //and it is still holding the deleted key as selection
    const handlePress = useCallback(() => {
        onSelect?.({ value: itemKey });
    }, [itemKey, onSelect]);
    const { pressProps } = usePress(handlePress);
    const isSelected = selection === itemKey;
    const isStacked = display === 'stacked' ? true : false;
    const isIconOnly = display === 'icons' || (displayOverride && displayOverride === 'icons') ? true : false;
    const isTall = size === 'lg' ? true : false;
    const labelRequirement = label && !(label === ' ' && label === undefined);
    const severityRequirement = !(severity === 'none' || severity === undefined);
    const IconComponent = (severityValue) => {
        switch (severityValue) {
            case 'error':
                // As per spec acc label is required only for error severity icon.
                return jsx(SvgErrorS, { color: "danger", accessibleLabel: translations.tabBar_tabContainsErrors() });
            case 'warning':
                return jsx(SvgWarningS, { color: "warning" });
            case 'info':
                return jsx(SvgInformationS, { color: "info" });
            case 'confirmation':
                return jsx(SvgSuccessS, { color: "success" });
            default:
                return null;
        }
    };
    const { direction } = useUser();
    const makeFocusRingVisible = showFocusRingOverride !== undefined ? showFocusRingOverride : showFocusRing;
    const makeSelectionVisible = selectionOverride !== undefined ? selectionOverride : isSelected;
    const { classes, styles: { tabBarItemIcon, tabBarItemIconStacked, tabBarItemMetadata, tabBarItemStackedBadge, tabBarItemStackedBadgeRtl, tabBarItemRemoveIcon, tabBarItemLabel, tabBarItemLabelTruncated, tabBarItemLink } } = useComponentTheme(TabBarItemRedwoodTheme, {
        selection: makeSelectionVisible ? 'isSelected' : 'notSelected',
        current: isCurrent ? 'isCurrent' : 'notCurrent',
        focusRing: makeFocusRingVisible ? 'showFocusRing' : 'noFocusRing',
        edgeBottom: isEdgeBottom ? 'isBottom' : 'notBottom'
    });
    const tabBarItem = classNames([classes]);
    const tabBarItemLabelClasses = classNames([
        tabBarItemLabel,
        labelMaxWidth !== undefined && tabBarItemLabelTruncated
    ]);
    const tabBarItemIconClasses = classNames([
        tabBarItemIcon,
        (isStacked || isIconOnly || !labelRequirement) && tabBarItemIconStacked
    ]);
    const tabBarItemMetadataClasses = classNames([tabBarItemMetadata]);
    const tabBarItemStackedBadgeClasses = classNames([
        tabBarItemStackedBadge,
        direction === 'rtl' && tabBarItemStackedBadgeRtl
    ]);
    const removeClass = classNames([tabBarItemRemoveIcon]);
    const tabBarItemLinkClasses = classNames([tabBarItemLink]);
    const styleInterpolations = mergeInterpolations([
        ...Object.values(flexitemInterpolations),
        ...Object.values(dimensionInterpolations),
        ...Object.values(boxAlignmentInterpolations)
    ]);
    //This is for simple item where height and width need to be specified on the main div.
    const tabDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto',
        minWidth: '10.5x',
        height: isTall ? tabBarItemVars.lgHeight : tabBarItemVars.mdHeight,
        //This is needed for gap between icon/ label and remove icon in labelIconRenderer
        gap: '2x'
    });
    //This is for complex item, where only flex dimensions needs to be applied as height and width comes from child Flex component.
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    const maxWithInterpolation = mergeInterpolations([
        ...Object.values(dimensionInterpolations)
    ]);
    //The threshold for truncation is labelMinWidth: 96px as per spec.
    const labelMinWidth = '96px';
    const maxWidthDimensions = maxWithInterpolation({
        maxWidth: labelMaxWidth !== undefined ? `calc(max(${labelMinWidth},${labelMaxWidth}))` : '100%'
    });
    const { detectTruncationProps, isTextTruncated } = useDetectTruncation(labelMaxWidth === undefined);
    const showTooltip = isIconOnly || isTextTruncated;
    const { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur } = useTabBarItemTooltip({ label, isDisabled: !showTooltip });
    if (showTooltip) {
        if (isCurrent && showFocusRing && !hideTooltip) {
            onLogicalFocus(ref.current);
        }
        else if (!isCurrent || (isCurrent && !showFocusRing) || hideTooltip) {
            onLogicalBlur();
        }
    }
    const isComplexItem = badge || metadata || severity !== 'none' || isStacked || isIconOnly;
    const isLinkItem = href != null;
    const labelIconRenderer = () => {
        return (jsxs(Fragment, { children: [jsxs(Flex, { align: "center", justify: "center", flex: "1 1 auto", gap: "2x", children: [!isIconOnly && !isStacked && icon && labelRequirement && (jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-icon": "startIcon", children: icon })), !isIconOnly && labelRequirement && (jsx("span", { class: tabBarItemLabelClasses, style: maxWidthDimensions, ...detectTruncationProps, children: jsx(Text, { size: "md", weight: "semiBold", children: label }) }))] }), !isLinkItem && removeIcon && jsx("span", { class: removeClass, children: removeIcon })] }));
    };
    const complexItemRenderer = () => {
        return (jsxs(Flex, { flex: "1 1 auto", children: [jsxs(Flex, { minWidth: "10.5x", minHeight: isTall ? tabBarItemVars.lgHeight : '100%', height: isStacked && labelRequirement ? tabBarItemVars.stackedHeight : tabBarItemVars.mdHeight, direction: isStacked && labelRequirement ? 'column' : 'row', gap: "2x", align: "center", justify: "center", alignSelf: "center", flex: "1 1 auto", children: [(isStacked || isIconOnly) && (jsxs("div", { class: tabBarItemIconClasses, children: [
                                // JET-79198 - The label is made hidden so that in can be read out by screen readers and we will not need aria-label at role="tab" level to include all the content in it's children
                                isIconOnly && jsx(HiddenAccessible, { id: "hiddenLabel", children: label }), icon, jsx("span", { class: tabBarItemStackedBadgeClasses, children: badge ? (jsx(Badge, { size: "xs", variant: "neutral", children: badge })) : null })] })), !isIconOnly && !isStacked && icon && labelRequirement && (jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-icon": "startIcon", children: icon })), !isIconOnly && labelRequirement && (jsx("span", { class: tabBarItemLabelClasses, style: maxWidthDimensions, ...detectTruncationProps, children: jsx(Text, { size: "md", weight: "semiBold", children: label }) })), !isStacked && !isIconOnly && badge && labelRequirement && (jsx("span", { "data-oj-tab-badge": badge, children: jsx(Badge, { size: "md", variant: "neutralSubtle", children: badge }) })), metadata && (jsx("span", { class: tabBarItemMetadataClasses, "data-oj-tab-metadata": metadata, children: jsx(Text, { size: "md", weight: "normal", children: '( ' + metadata + ' )' }) })), severityRequirement && (jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-severity": severity, children: IconComponent(severity) }))] }), !isLinkItem && removeIcon && jsx("span", { class: removeClass, children: removeIcon })] }));
    };
    const tabBarItemRenderer = () => {
        return (jsxs("div", { "data-oj-key": itemKey, "data-oj-removable": removeIcon ? 'true' : undefined, id: tabItemPrefix + itemKey, class: tabBarItem, role: "tab", "aria-controls": ariaControls, "aria-selected": isSelected, "aria-haspopup": ariaHasPopup, ...mergeProps(pressProps, tooltipEventHandlerProps, conveyorBeltProps), ref: ref, style: isComplexItem ? flexDimensions : tabDimensions, children: [isComplexItem ? complexItemRenderer() : labelIconRenderer(), tooltipContent] }));
    };
    const tabBarLinkItemRenderer = () => {
        return (jsxs("span", { ref: ref, class: tabBarItem, ...mergeProps(pressProps, tooltipEventHandlerProps, conveyorBeltProps), style: isComplexItem ? flexDimensions : tabDimensions, children: [jsx("a", { onClick: onClickLink, class: tabBarItemLinkClasses, href: href, "data-oj-key": itemKey, "data-oj-removable": removeIcon ? 'true' : undefined, id: tabItemPrefix + itemKey, role: "tab", tabindex: -1, "aria-controls": ariaControls, "aria-selected": isSelected, "aria-haspopup": ariaHasPopup, children: isComplexItem ? complexItemRenderer() : labelIconRenderer() }), tooltipContent] }));
    };
    return isLinkItem ? tabBarLinkItemRenderer() : tabBarItemRenderer();
}

/**
 * TabBarItem content can be created by using labels or icons or both.
 */
function TabBarItem({ itemKey, label, icon, badge, metadata, severity, labelMaxWidth, 'aria-controls': ariaControls }) {
    return (jsx(BaseTabBarItem, { "aria-controls": ariaControls, itemKey: itemKey, label: label, icon: icon, badge: badge, metadata: metadata, severity: severity, labelMaxWidth: labelMaxWidth }));
}

function RemovableTabBarItem({ itemKey, label, icon, badge, metadata, severity, labelMaxWidth, 'aria-controls': ariaControls }) {
    const { selection, currentKey, layout, onRemove } = useTabBarContext();
    const isSelected = selection === itemKey;
    const isCurrent = currentKey === itemKey;
    const handleRemove = useCallback(() => {
        onRemove?.({ value: itemKey });
    }, [onRemove, itemKey]);
    const { hoverProps, isHover } = useHover({});
    //instead of specifying flex: '1 0 auto' in cssProps var
    const styleInterpolations = mergeInterpolations([
        ...Object.values(flexitemInterpolations)
    ]);
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    //TODO: In addition to aria-label a genric instruction is required for keyboard deletion
    //common to al tabs,after feedback from Curt's investigations.
    return (jsx("div", { ...hoverProps, style: flexDimensions, children: jsx(Flex, { children: jsx(BaseTabBarItem, { "aria-controls": ariaControls, itemKey: itemKey, label: label, icon: icon, badge: badge, metadata: metadata, severity: severity, labelMaxWidth: labelMaxWidth, removeIcon: jsx("span", { "data-oj-tabbar-item-remove-icon": "true", children: jsx(EmbeddedIconButton, { "aria-label": translations.tabBarNavigationList_removeCueText(), size: "xs", onAction: handleRemove, children: (isHover || isSelected || isCurrent) && jsx(SvgClose, {}) }) }) }) }) }));
}

const SvgOverflowH = (props) => (jsx(Icon, { viewBox: "0 0 24 24", ...props, children: jsx("g", { fill: "none", children: jsx("path", { d: "M6 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0z", fill: "currentcolor" }) }) }));

/**
 * An OverflowTabBarItem renders TabBarItems in a device appropriate popup. OverflowTabBarItem is used internally in an OverflowTabBar.
 */
function OverflowTabBarItem({ overflowItemKey, icon, badge, overflowItems, isOpen, onClose }) {
    const { selection, showFocusRing, isEdgeBottom, onSelect, onRemove, layout } = useTabBarContext();
    const isPointerSelection = useRef(false);
    // Reset pointer selection flag when the popup closes so keyboard navigation
    // restores focus-visible on the overflow trigger.
    useEffect(() => {
        if (!isOpen) {
            isPointerSelection.current = false;
        }
    }, [isOpen]);
    const overflowTabBarItemRef = useRef(null);
    const navigationListRef = createRef();
    const handleSelectionChange = useCallback((detail) => {
        if (detail.reason === 'pointer') {
            isPointerSelection.current = true;
        }
        onSelect?.({ value: detail.value });
        onClose?.({ reason: 'itemAction' });
    }, [onSelect, onClose]);
    const handleDropdownClose = useCallback((e) => {
        onClose?.({ reason: e.reason });
    }, [onClose]);
    const handleSheetClose = useCallback(() => {
        onClose?.({ reason: 'dismissed' });
    }, [onClose]);
    //When NavigationList steals focus the app resets it. Not always would it be reset to
    //parent of OverflowTabBarItem. Though currentKey would be correct, but focusRing would would not be visible
    //Hence we check for isPointerSelection.current
    const focusRingRequirement = showFocusRing && !isPointerSelection.current && !getIsMobile();
    const overflowContainsKey = (searchKey) => {
        return overflowItems?.find((item) => item.itemKey === searchKey) != null;
    };
    const currentPanelId = overflowItems?.find((item) => item.itemKey === selection)?.tabPanelId;
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const isSelected = selection !== undefined && overflowContainsKey(selection);
    //instead of specifying flex: '1 0 auto' in cssProps var
    const styleInterpolations = mergeInterpolations([
        ...Object.values(flexitemInterpolations)
    ]);
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    const navContainerClasses = classNames([styles.navContainerBase]);
    const navContainerRef = useRef(null);
    const handleKeyDown = useCallback((event) => {
        if (event.key === 'ArrowDown') {
            event.preventDefault();
            navigationListRef.current?.focus();
        }
    }, [navigationListRef]);
    const getNavigationList = useCallback(() => {
        return (jsx("div", { onKeyDown: handleKeyDown, tabIndex: 0, ref: navContainerRef, class: navContainerClasses, children: jsx(NavigationList, { ref: navigationListRef, selection: selection, onSelectionChange: handleSelectionChange, onRemove: onRemove, children: overflowItems?.map((item) => item.href != null ? (jsx(NavigationListLinkItem, { href: item.href, itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity })) : item.isRemovable ? (jsx(RemovableNavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity })) : (jsx(NavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity }))) }) }));
    }, [
        handleKeyDown,
        navContainerClasses,
        navigationListRef,
        selection,
        handleSelectionChange,
        onRemove,
        overflowItems
    ]);
    return (jsxs(Fragment, { children: [overflowItems && overflowItems.length > 0 && (jsx("div", { ref: overflowTabBarItemRef, style: flexDimensions, children: jsx(BaseTabBarItem, { "aria-controls": currentPanelId, itemKey: overflowItemKey, label: translations.overflowItemLabel(), icon: icon ? icon : jsx(SvgOverflowH, {}), badge: badge, showFocusRingOverride: focusRingRequirement, selectionOverride: isSelected, displayOverride: 'icons', "aria-haspopup": true }) })), getIsMobile() ? (jsx(Sheet, { isOpen: isOpen, onClose: handleSheetClose, initialFocus: "firstFocusable", children: getNavigationList() })) : (jsx(Dropdown, { initialFocus: "firstFocusable", isOpen: isOpen, onClose: handleDropdownClose, placement: isEdgeBottom ? 'top-end' : 'bottom-end', anchorRef: overflowTabBarItemRef, children: getNavigationList() }))] }));
}
const getIsMobile = () => {
    const { deviceRenderMode } = getClientHints();
    return deviceRenderMode === 'phone';
};

export { BaseTabBarItem as B, OverflowTabBarItem as O, RemovableTabBarItem as R, TabBarItem as T };
//# sourceMappingURL=OverflowTabBarItem-aa0ce915.js.map
