/* @oracle/oraclejet-preact: undefined */
'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var BaseNavigationListItem = require('./BaseNavigationListItem-709591de.js');
var Close = require('./Close-e7ca2eed.js');
var hooks = require('preact/hooks');
var useHover = require('./useHover-c099039f.js');
var useTranslationBundle = require('./useTranslationBundle-38c0edae.js');
var EmbeddedIconButton = require('./EmbeddedIconButton-f3f6e8f6.js');

function RemovableNavigationListItem({ itemKey, label, badge, metadata, severity }) {
    const { selection, currentKey, onRemove } = BaseNavigationListItem.useNavigationListContext();
    const isSelected = selection === itemKey;
    const isCurrent = currentKey === itemKey;
    const handleRemove = hooks.useCallback(() => {
        onRemove?.({ value: itemKey });
    }, [onRemove, itemKey]);
    const { hoverProps, isHover } = useHover.useHover({});
    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    //instead of specifying flex: '1 0 auto' in cssProps var
    return (jsxRuntime.jsx("div", { ...hoverProps, children: jsxRuntime.jsx(BaseNavigationListItem.BaseNavigationListItem, { itemKey: itemKey, label: label, badge: badge, metadata: metadata, severity: severity, removeIcon: jsxRuntime.jsx("span", { "data-oj-navigationlist-item-remove-icon": true, children: jsxRuntime.jsx(EmbeddedIconButton.EmbeddedIconButton, { "aria-label": translations.tabBarNavigationList_removeCueText(), size: "xs", onAction: handleRemove, children: (isHover || isSelected || isCurrent) && jsxRuntime.jsx(Close.SvgClose, {}) }) }) }) }));
}

exports.RemovableNavigationListItem = RemovableNavigationListItem;
//# sourceMappingURL=RemovableNavigationListItem-f3ad6e8e.js.map
