@oracle/oraclejet-preact 20.0.3 → 20.1.0

package/cjs/NavigationListLinkItem-62c3912e.js

@@ -0,0 +1,237 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var Close = require('./Close-d99c20a7.js');
+var EmbeddedIconButton = require('./EmbeddedIconButton-f2e69758.js');
+var hooks = require('preact/hooks');
+var useHover = require('./useHover-49b0430d.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
+var Text = require('./Text-056f1ec5.js');
+var usePress = require('./usePress-886180e4.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var useInteractionStyle = require('./useInteractionStyle-c203a8a0.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var preact = require('preact');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var flexitem = require('./flexitem-fee13e26.js');
+var UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme = require('./UNSAFE_NavigationListCommon/themes/redwood/NavigationListItemTheme.js');
+var useUser = require('./useUser-cc045b3e.js');
+var Flex = require('./Flex-ec48072d.js');
+var Badge = require('./Badge-0e522f12.js');
+var WarningS = require('./WarningS-cdb0a7ad.js');
+var ErrorS = require('./ErrorS-b027f7ad.js');
+var InformationS = require('./InformationS-b0bb102b.js');
+var SuccessS = require('./SuccessS-b6757c64.js');
+var useTooltipControlled = require('./useTooltipControlled-0dc34549.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Context used to pass navlist information without having to pass it to navlist children props.
+ * We want to communicate information down to any interested navlist item children.
+ */
+const NavigationListContext = preact.createContext(null);
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Utility hook for consuming the NavigationListContext
+ *
+ * @returns The value of NavigationListContext provider
+ */
+function useNavigationListContext() {
+    return hooks.useContext(NavigationListContext);
+}
+
+const flexItemStyleInterpolations = mergeInterpolations.mergeInterpolations([
+    ...Object.values(flexitem.flexitemInterpolations)
+]);
+const { class: labelContainerFlexItemClasses, ...labelContainerFlexItemStyle } = flexItemStyleInterpolations({
+    alignSelf: 'center'
+});
+function useNavigationListItem({ itemKey }) {
+    const { onSelectionChange, selection, currentKey, showFocusRing, navigationListItemPrefix, edge, display } = useNavigationListContext();
+    //Selection and focus state
+    const isCurrent = currentKey === itemKey;
+    const isSelected = selection === itemKey;
+    const isIconOnly = display === 'icons' ? true : false;
+    const isEdgeEnd = edge === 'end' ? true : false;
+    //Styling
+    const { interactionProps, applyPseudoHoverStyle, applyHoverStyle, applyActiveStyle } = useInteractionStyle.useInteractionStyle();
+    const { direction } = useUser.useUser();
+    const isRtl = direction === 'rtl';
+    const { classes: listItemClasses, styles: { labelContainerClasses, navigationItemStackedBadge, navigationItemStackedBadgeRtl, startIconStacked } } = useComponentTheme.useComponentTheme(UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme.NavigationListItemRedwoodTheme, {
+        focusRing: showFocusRing ? 'isFocusRing' : 'notFocusRing',
+        current: isCurrent ? 'isCurrent' : 'notCurrtent',
+        selected: isSelected ? 'isSelected' : 'notSelected',
+        direction: isRtl ? 'isRtl' : 'notRtl',
+        hybridHover: applyHoverStyle ? 'isHybridHover' : 'notHybridHover',
+        pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',
+        active: applyActiveStyle ? 'isActive' : 'notActive',
+        edgeEnd: edge === 'end' ? 'isEnd' : 'notEnd',
+        iconOnly: isIconOnly ? 'isIconOnly' : 'notIconOnly'
+    });
+    const navigationItemIconOnlyClasses = classNames.classNames([startIconStacked]);
+    const navigationItemStackedBadgeClasses = classNames.classNames([
+        navigationItemStackedBadge,
+        direction === 'rtl' && navigationItemStackedBadgeRtl
+    ]);
+    //Item handlers
+    const handlePress = hooks.useCallback(() => {
+        onSelectionChange?.({ value: itemKey, reason: 'pointer' });
+    }, [itemKey, onSelectionChange]);
+    //Legacy navlist makes selection on keyDown, but since preact tabbar made selection after keyUp, will do the same
+    //for preact navlist
+    const { pressProps } = usePress.usePress(handlePress);
+    return {
+        itemId: navigationListItemPrefix + itemKey,
+        itemHandlers: mergeProps.mergeProps(interactionProps, pressProps /*,onFocusProps*/),
+        itemClasses: classNames.classNames([listItemClasses]),
+        isSelected,
+        labelContainerClasses: classNames.classNames([labelContainerClasses, labelContainerFlexItemClasses]),
+        labelContainerStyle: labelContainerFlexItemStyle,
+        isIconOnly,
+        isEdgeEnd,
+        stackedBadgeClasses: classNames.classNames([navigationItemStackedBadgeClasses]),
+        iconOnlyClasses: classNames.classNames([navigationItemIconOnlyClasses]),
+        isCurrent,
+        showFocusRing
+    };
+}
+
+const useTabBarItemTooltip = ({ label, isDisabled, position }) => {
+    const [isOpen, setOpen] = hooks.useState(false);
+    const { tooltipProps, tooltipContent } = useTooltipControlled.useTooltipControlled({
+        isOpen: isOpen,
+        isDisabled,
+        position: position,
+        focusStrategy: 'logical',
+        text: label,
+        onToggle: ({ value }) => {
+            setOpen(value);
+        }
+    });
+    const { onLogicalFocus, onLogicalBlur, ...tooltipEventHandlerProps } = tooltipProps;
+    return { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur };
+};
+
+const onClickLink = (event) => {
+    event.preventDefault();
+};
+/*TODO: JET-58535. Add ripple effect when touching navigationListItem. */
+function BaseNavigationListItem({ itemKey, label, badge, metadata, severity = 'none', removeIcon, icon, href, 'aria-controls': ariaControls }) {
+    const itemRef = hooks.useRef(null);
+    //Logic of the component handled here
+    const { itemId, itemHandlers, itemClasses, isSelected, labelContainerClasses, labelContainerStyle, isIconOnly, isEdgeEnd, stackedBadgeClasses, iconOnlyClasses, isCurrent, showFocusRing } = useNavigationListItem({
+        itemKey
+    });
+    const severityRequirement = !(severity === 'none' || severity === undefined);
+    const IconComponent = (severityValue) => {
+        switch (severityValue) {
+            case 'error':
+                return jsxRuntime.jsx(ErrorS.SvgErrorS, { color: "danger" });
+            case 'warning':
+                return jsxRuntime.jsx(WarningS.SvgWarningS, { color: "warning" });
+            case 'info':
+                return jsxRuntime.jsx(InformationS.SvgInformationS, { color: "info" });
+            case 'confirmation':
+                return jsxRuntime.jsx(SuccessS.SvgSuccessS, { color: "success" });
+            default:
+                return null;
+        }
+    };
+    const { styles: { iconLabelContainer, iconContainer, startIconPadding, endContentPadding, removeIconPaddingWithEndContent, navigationItemMetadata, navigationListItemLink } } = useComponentTheme.useComponentTheme(UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme.NavigationListItemRedwoodTheme);
+    const navigationItemMatadata = classNames.classNames([navigationItemMetadata, endContentPadding]);
+    const navigationItemLinkClass = classNames.classNames([navigationListItemLink]);
+    const endIconContainerClasses = classNames.classNames([
+        iconLabelContainer,
+        iconContainer,
+        endContentPadding
+    ]);
+    const startIconContainerClasses = classNames.classNames([
+        !isIconOnly && iconLabelContainer,
+        iconContainer,
+        //For icon only icon to label padding is not required.
+        !isIconOnly && startIconPadding,
+        isIconOnly && iconOnlyClasses
+    ]);
+    const { styles: { navigationlistRemoveIcon } } = useComponentTheme.useComponentTheme(UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme.NavigationListItemRedwoodTheme);
+    const isComplexItem = metadata || severityRequirement || badge;
+    const removeClass = classNames.classNames([
+        navigationlistRemoveIcon,
+        isComplexItem && removeIconPaddingWithEndContent,
+        !isComplexItem && endContentPadding
+    ]);
+    const isLinkItem = href != null;
+    const labelRequirement = label && !(label === ' ' && label === undefined);
+    const iconOnlyRequirement = icon && icon != null && isIconOnly;
+    const showTooltip = iconOnlyRequirement;
+    const { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur } = useTabBarItemTooltip({
+        label,
+        isDisabled: !showTooltip,
+        // For edge end the tooltip will appear after icon in the order tooltip, icon, selection when navlist is placed at end of page.
+        position: !isEdgeEnd ? 'end' : 'start'
+    });
+    if (showTooltip) {
+        if ((isCurrent && showFocusRing) || isSelected) {
+            onLogicalFocus(itemRef.current);
+        }
+        else if (!isCurrent || !showFocusRing) {
+            onLogicalBlur();
+        }
+    }
+    const labelRenderer = () => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && (jsxRuntime.jsx(Flex.Flex, { justify: "start", children: jsxRuntime.jsx("span", { class: startIconContainerClasses, children: icon }) })), !isIconOnly && labelRequirement && (jsxRuntime.jsx(Flex.Flex, { align: "center", justify: "start", flex: "1 1 auto", children: jsxRuntime.jsx("span", { class: labelContainerClasses, style: labelContainerStyle, children: jsxRuntime.jsx(Text.Text, { size: "inherit", weight: "inherit", variant: "inherit", children: label }) }) })), removeIcon && !isLinkItem && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }));
+    };
+    const complexItemRenderer = () => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconOnlyRequirement && (jsxRuntime.jsxs("div", { class: startIconContainerClasses, children: [icon, jsxRuntime.jsx("span", { class: stackedBadgeClasses, children: badge ? (jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: "neutral", children: badge })) : null })] })), !isIconOnly && icon && (jsxRuntime.jsx(Flex.Flex, { justify: "start", children: jsxRuntime.jsx("span", { class: startIconContainerClasses, children: icon }) })), (!isIconOnly || /* This covers invalid cases*/ (isIconOnly && !iconOnlyRequirement)) &&
+                    labelRequirement && (jsxRuntime.jsx(Flex.Flex, { align: "center", justify: "start", flex: "1 1 auto", children: jsxRuntime.jsx("span", { class: labelContainerClasses, style: labelContainerStyle, children: jsxRuntime.jsx(Text.Text, { size: "inherit", weight: "inherit", variant: "inherit", children: label }) }) })), (metadata || severityRequirement || badge || removeIcon) && (jsxRuntime.jsxs(Flex.Flex, { align: "center", justify: "end", children: [' ', (!isIconOnly || /* This covers invalid cases*/ (isIconOnly && !iconOnlyRequirement)) &&
+                            badge && (jsxRuntime.jsx("span", { class: endIconContainerClasses, children: jsxRuntime.jsx(Badge.Badge, { size: "md", variant: "neutralSubtle", children: badge }) })), metadata && (jsxRuntime.jsx("span", { class: navigationItemMatadata, children: jsxRuntime.jsx(Text.Text, { children: '( ' + metadata + ' )' }) })), severityRequirement && (jsxRuntime.jsx("span", { class: endIconContainerClasses, children: IconComponent(severity) })), removeIcon && !isLinkItem && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }))] }));
+    };
+    const navlistItemRenderer = () => {
+        return (jsxRuntime.jsxs("div", { role: "tab", ...mergeProps.mergeProps(tooltipEventHandlerProps, itemHandlers), "data-oj-key": itemKey, id: itemId, class: itemClasses, "aria-selected": isSelected, ref: itemRef, "aria-controls": ariaControls, children: [isComplexItem ? complexItemRenderer() : labelRenderer(), isIconOnly && tooltipContent] }));
+    };
+    const navlistLinkItemRenderer = () => {
+        return (jsxRuntime.jsx("div", { ...itemHandlers, class: itemClasses, children: jsxRuntime.jsx("a", { tabindex: -1, role: "tab", "data-oj-key": itemKey, id: itemId, class: navigationItemLinkClass, "aria-selected": isSelected, "aria-controls": ariaControls, href: href, onClick: onClickLink, children: isComplexItem ? complexItemRenderer() : labelRenderer() }) }));
+    };
+    return isLinkItem ? navlistLinkItemRenderer() : navlistItemRenderer();
+}
+
+function RemovableNavigationListItem({ itemKey, label, badge, metadata, severity }) {
+    const { selection, currentKey, onRemove } = 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, { 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, {}) }) }) }) }));
+}
+
+/**
+ * NavigationListLinkItem is used to render links in a NavigationList. It allows to view the browser's built in link context menu to open the link in new browser tab.
+ */
+function NavigationListLinkItem({ itemKey, badge, metadata, severity, href, label, 'aria-controls': ariaControls }) {
+    return (jsxRuntime.jsx(BaseNavigationListItem, { "aria-controls": ariaControls, itemKey: itemKey, label: label, badge: badge, metadata: metadata, severity: severity, href: href }));
+}
+
+exports.BaseNavigationListItem = BaseNavigationListItem;
+exports.NavigationListContext = NavigationListContext;
+exports.NavigationListLinkItem = NavigationListLinkItem;
+exports.RemovableNavigationListItem = RemovableNavigationListItem;
+exports.useTabBarItemTooltip = useTabBarItemTooltip;
+//# sourceMappingURL=NavigationListLinkItem-62c3912e.js.map

package/cjs/NavigationListLinkItem-62c3912e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationListLinkItem-62c3912e.js","sources":["../../src/UNSAFE_NavigationListCommon/NavigationListContext.ts","../../src/UNSAFE_NavigationListCommon/useNavigationListContext.ts","../../src/UNSAFE_NavigationListCommon/useNavigationListItem.ts","../../src/UNSAFE_TabBarCommon/useTabBarItemTooltip.ts","../../src/UNSAFE_NavigationListCommon/BaseNavigationListItem.tsx","../../src/UNSAFE_NavigationListCommon/RemovableNavigationListItem.tsx","../../src/UNSAFE_NavigationListCommon/NavigationListLinkItem.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { createContext } from 'preact';\nimport { NavigationListProps } from './NavigationListProps';\n\ntype CurrentKeyDetail<K> = {\n  value: K;\n};\n\nexport type NavigationListContextProps<K extends string | number> = Pick<\n  NavigationListProps<K>,\n  'selection' | 'onSelectionChange' | 'onRemove' | 'edge' | 'display'\n> & {\n  currentKey?: K;\n  showFocusRing: boolean;\n  onCurrentKeyChange:\n    | (<K extends string | number>(detail: CurrentKeyDetail<K>) => void)\n    | undefined;\n  navigationListItemPrefix: string;\n};\n\n/**\n * Context used to pass navlist information without having to pass it to navlist children props.\n * We want to communicate information down to any interested navlist item children.\n */\n\nconst NavigationListContext = createContext<NavigationListContextProps<string | number>>(null!);\n\nexport { NavigationListContext };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { useContext } from 'preact/hooks';\nimport { NavigationListContext } from './NavigationListContext';\n\n/**\n * Utility hook for consuming the NavigationListContext\n *\n * @returns The value of NavigationListContext provider\n */\nfunction useNavigationListContext() {\n  return useContext(NavigationListContext);\n}\n\nexport { useNavigationListContext };\n","import { useCallback } from 'preact/hooks';\n\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useInteractionStyle } from '../hooks/UNSAFE_useInteractionStyle';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { useNavigationListContext } from './useNavigationListContext';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { FlexitemProps } from '../utils/UNSAFE_interpolations/flexitem';\nimport { flexitemInterpolations } from '../utils/UNSAFE_interpolations/flexitem';\nimport {\n  NavigationListItemStyles,\n  NavigationListItemVariantOptions\n} from '../UNSAFE_NavigationList/themes/NavigationListItemStyles.css';\nimport { NavigationListItemRedwoodTheme } from './themes/redwood/NavigationListItemTheme';\nimport { useUser } from '../hooks/UNSAFE_useUser';\n\nconst flexItemStyleInterpolations = mergeInterpolations<FlexitemProps>([\n  ...Object.values(flexitemInterpolations)\n]);\nconst { class: labelContainerFlexItemClasses, ...labelContainerFlexItemStyle } =\n  flexItemStyleInterpolations({\n    alignSelf: 'center'\n  });\n\nexport function useNavigationListItem<K extends string | number>({ itemKey }: { itemKey: K }) {\n  const {\n    onSelectionChange,\n    selection,\n    currentKey,\n    showFocusRing,\n    navigationListItemPrefix,\n    edge,\n    display\n  } = useNavigationListContext();\n\n  //Selection and focus state\n  const isCurrent = currentKey === itemKey;\n\n  const isSelected = selection === itemKey;\n\n  const isIconOnly = display === 'icons' ? true : false;\n  const isEdgeEnd = edge === 'end' ? true : false;\n\n  //Styling\n  const { interactionProps, applyPseudoHoverStyle, applyHoverStyle, applyActiveStyle } =\n    useInteractionStyle();\n\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n\n  const {\n    classes: listItemClasses,\n    styles: {\n      labelContainerClasses,\n      navigationItemStackedBadge,\n      navigationItemStackedBadgeRtl,\n      startIconStacked\n    }\n  } = useComponentTheme<NavigationListItemVariantOptions, NavigationListItemStyles>(\n    NavigationListItemRedwoodTheme,\n    {\n      focusRing: showFocusRing ? 'isFocusRing' : 'notFocusRing',\n      current: isCurrent ? 'isCurrent' : 'notCurrtent',\n      selected: isSelected ? 'isSelected' : 'notSelected',\n      direction: isRtl ? 'isRtl' : 'notRtl',\n      hybridHover: applyHoverStyle ? 'isHybridHover' : 'notHybridHover',\n      pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',\n      active: applyActiveStyle ? 'isActive' : 'notActive',\n      edgeEnd: edge === 'end' ? 'isEnd' : 'notEnd',\n      iconOnly: isIconOnly ? 'isIconOnly' : 'notIconOnly'\n    }\n  );\n\n  const navigationItemIconOnlyClasses = classNames([startIconStacked]);\n\n  const navigationItemStackedBadgeClasses = classNames([\n    navigationItemStackedBadge,\n    direction === 'rtl' && navigationItemStackedBadgeRtl\n  ]);\n\n  //Item handlers\n  const handlePress = useCallback(() => {\n    onSelectionChange?.({ value: itemKey as K, reason: 'pointer' });\n  }, [itemKey, onSelectionChange]);\n\n  //Legacy navlist makes selection on keyDown, but since preact tabbar made selection after keyUp, will do the same\n  //for preact navlist\n  const { pressProps } = usePress(handlePress);\n\n  return {\n    itemId: navigationListItemPrefix + itemKey,\n    itemHandlers: mergeProps(interactionProps, pressProps /*,onFocusProps*/),\n    itemClasses: classNames([listItemClasses]),\n    isSelected,\n    labelContainerClasses: classNames([labelContainerClasses, labelContainerFlexItemClasses]),\n    labelContainerStyle: labelContainerFlexItemStyle,\n    isIconOnly,\n    isEdgeEnd,\n    stackedBadgeClasses: classNames([navigationItemStackedBadgeClasses]),\n    iconOnlyClasses: classNames([navigationItemIconOnlyClasses]),\n    isCurrent,\n    showFocusRing\n  };\n}\n","import { ComponentChild } from 'preact';\nimport { useState } from 'preact/hooks';\nimport { useTooltipControlled } from '../hooks/UNSAFE_useTooltip';\nimport { Placement } from '#UNSAFE_Floating';\n\ntype Props = {\n  label: string;\n  isDisabled: boolean;\n  position?: Position;\n};\n\ntype Position = Omit<Placement, 'center'>;\n\nexport const useTabBarItemTooltip = ({\n  label,\n  isDisabled,\n  position\n}: Props): {\n  tooltipContent: ComponentChild;\n  tooltipEventHandlerProps: Record<string, any>;\n  onLogicalFocus: (elem: HTMLElement) => void;\n  onLogicalBlur: () => void;\n} => {\n  const [isOpen, setOpen] = useState<boolean>(false);\n  const { tooltipProps, tooltipContent } = useTooltipControlled({\n    isOpen: isOpen,\n    isDisabled,\n    position: position,\n    focusStrategy: 'logical',\n    text: label,\n    onToggle: ({ value }) => {\n      setOpen(value);\n    }\n  });\n  const { onLogicalFocus, onLogicalBlur, ...tooltipEventHandlerProps } = tooltipProps;\n\n  return { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur };\n};\n","import { useRef } from 'preact/hooks';\n\nimport { Text } from '../UNSAFE_Text';\n\nimport { useNavigationListItem } from './useNavigationListItem';\nimport { Flex } from '../UNSAFE_Flex';\nimport { Badge } from '../UNSAFE_Badge';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { WarningS } from '../UNSAFE_RedwoodIcons/WarningS';\nimport { ErrorS } from '../UNSAFE_RedwoodIcons/ErrorS';\nimport { InformationS } from '../UNSAFE_RedwoodIcons/InformationS';\nimport { SuccessS } from '../UNSAFE_RedwoodIcons/SuccessS';\nimport {\n  NavigationListItemStyles,\n  NavigationListItemVariantOptions\n} from '../UNSAFE_NavigationList/themes/NavigationListItemStyles.css';\nimport { NavigationListItemRedwoodTheme } from './themes/redwood/NavigationListItemTheme';\nimport { ComponentChild, ComponentChildren } from 'preact';\nimport { useTabBarItemTooltip } from '#UNSAFE_TabBarCommon/useTabBarItemTooltip';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\n\ntype Severity = 'warning' | 'info' | 'none' | 'error' | 'confirmation';\ntype AriaProps = {\n  /**\n   * Accepts the panel element's ID associated with the item\n   **/\n  'aria-controls'?: string;\n};\n\nexport type BaseNavigationListItemProps<K extends string | number> = {\n  /**\n   * Key of the NavigationListItem.\n   */\n  itemKey: K;\n  /**\n   * Label of the NavigationListItem.\n   */\n  label: string;\n  /**\n   * The content to be rendered inside the Badge component.\n   */\n  badge?: string;\n  /**\n   * The content to be rendered inside the Text component as a metadata.\n   */\n  metadata?: string;\n  /**\n   * The status icon to be rendered after the label.\n   */\n  severity?: Severity;\n  /**\n   * The content to be rendered for remove icon\n   */\n  removeIcon?: ComponentChildren;\n  /**\n   * The icon before the label or the stand alone icon\n   */\n  icon?: ComponentChild;\n  /**\n   * Sets the URL that the hyperlink points to. If there is no valid URL use \"#\" for href value to navigate to the top of the page.\n   */\n  href?: string;\n} & AriaProps;\n\nconst onClickLink = (event: MouseEvent) => {\n  event.preventDefault();\n};\n/*TODO: JET-58535. Add ripple effect when touching navigationListItem. */\nexport function BaseNavigationListItem<K extends string | number>({\n  itemKey,\n  label,\n  badge,\n  metadata,\n  severity = 'none',\n  removeIcon,\n  icon,\n  href,\n  'aria-controls': ariaControls\n}: BaseNavigationListItemProps<K>) {\n  const itemRef = useRef<HTMLDivElement | null>(null);\n\n  //Logic of the component handled here\n  const {\n    itemId,\n    itemHandlers,\n    itemClasses,\n    isSelected,\n    labelContainerClasses,\n    labelContainerStyle,\n    isIconOnly,\n    isEdgeEnd,\n    stackedBadgeClasses,\n    iconOnlyClasses,\n    isCurrent,\n    showFocusRing\n  } = useNavigationListItem({\n    itemKey\n  });\n\n  const severityRequirement = !(severity === 'none' || severity === undefined);\n\n  const IconComponent = (severityValue: Severity) => {\n    switch (severityValue) {\n      case 'error':\n        return <ErrorS color=\"danger\" />;\n      case 'warning':\n        return <WarningS color=\"warning\" />;\n      case 'info':\n        return <InformationS color=\"info\" />;\n      case 'confirmation':\n        return <SuccessS color=\"success\" />;\n      default:\n        return null;\n    }\n  };\n\n  const {\n    styles: {\n      iconLabelContainer,\n      iconContainer,\n      startIconPadding,\n      endContentPadding,\n      removeIconPaddingWithEndContent,\n      navigationItemMetadata,\n      navigationListItemLink\n    }\n  } = useComponentTheme<NavigationListItemVariantOptions, NavigationListItemStyles>(\n    NavigationListItemRedwoodTheme\n  );\n\n  const navigationItemMatadata = classNames([navigationItemMetadata, endContentPadding]);\n  const navigationItemLinkClass = classNames([navigationListItemLink]);\n\n  const endIconContainerClasses = classNames([\n    iconLabelContainer,\n    iconContainer,\n    endContentPadding\n  ]);\n  const startIconContainerClasses = classNames([\n    !isIconOnly && iconLabelContainer,\n    iconContainer,\n    //For icon only icon to label padding is not required.\n    !isIconOnly && startIconPadding,\n    isIconOnly && iconOnlyClasses\n  ]);\n  const {\n    styles: { navigationlistRemoveIcon }\n  } = useComponentTheme<NavigationListItemVariantOptions, NavigationListItemStyles>(\n    NavigationListItemRedwoodTheme\n  );\n\n  const isComplexItem = metadata || severityRequirement || badge;\n  const removeClass = classNames([\n    navigationlistRemoveIcon,\n    isComplexItem && removeIconPaddingWithEndContent,\n    !isComplexItem && endContentPadding\n  ]);\n\n  const isLinkItem = href != null;\n  const labelRequirement = label && !(label === ' ' && label === undefined);\n  const iconOnlyRequirement = icon && icon != null && isIconOnly;\n  const showTooltip = iconOnlyRequirement;\n\n  const { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur } =\n    useTabBarItemTooltip({\n      label,\n      isDisabled: !showTooltip,\n      // For edge end the tooltip will appear after icon in the order tooltip, icon, selection when navlist is placed at end of page.\n      position: !isEdgeEnd ? 'end' : 'start'\n    });\n  if (showTooltip) {\n    if ((isCurrent && showFocusRing) || isSelected) {\n      onLogicalFocus(itemRef.current as HTMLElement);\n    } else if (!isCurrent || !showFocusRing) {\n      onLogicalBlur();\n    }\n  }\n\n  const labelRenderer = () => {\n    return (\n      <>\n        {icon && (\n          <Flex justify=\"start\">\n            <span class={startIconContainerClasses}>{icon}</span>\n          </Flex>\n        )}\n        {!isIconOnly && labelRequirement && (\n          <Flex align=\"center\" justify=\"start\" flex=\"1 1 auto\">\n            <span class={labelContainerClasses} style={labelContainerStyle}>\n              <Text size=\"inherit\" weight=\"inherit\" variant=\"inherit\">\n                {label}\n              </Text>\n            </span>\n          </Flex>\n        )}\n        {removeIcon && !isLinkItem && <span class={removeClass}>{removeIcon}</span>}\n      </>\n    );\n  };\n\n  const complexItemRenderer = () => {\n    return (\n      <>\n        {iconOnlyRequirement && (\n          <div class={startIconContainerClasses}>\n            {icon}\n            <span class={stackedBadgeClasses}>\n              {badge ? (\n                <Badge size=\"xs\" variant=\"neutral\">\n                  {badge}\n                </Badge>\n              ) : null}\n            </span>\n          </div>\n        )}\n        {!isIconOnly && icon && (\n          <Flex justify=\"start\">\n            <span class={startIconContainerClasses}>{icon}</span>\n          </Flex>\n        )}\n        {(!isIconOnly || /* This covers invalid cases*/ (isIconOnly && !iconOnlyRequirement)) &&\n          labelRequirement && (\n            <Flex align=\"center\" justify=\"start\" flex=\"1 1 auto\">\n              <span class={labelContainerClasses} style={labelContainerStyle}>\n                <Text size=\"inherit\" weight=\"inherit\" variant=\"inherit\">\n                  {label}\n                </Text>\n              </span>\n            </Flex>\n          )}\n        {(metadata || severityRequirement || badge || removeIcon) && (\n          <Flex align=\"center\" justify=\"end\">\n            {' '}\n            {(!isIconOnly || /* This covers invalid cases*/ (isIconOnly && !iconOnlyRequirement)) &&\n              badge && (\n                <span class={endIconContainerClasses}>\n                  <Badge size=\"md\" variant=\"neutralSubtle\">\n                    {badge}\n                  </Badge>\n                </span>\n              )}\n            {metadata && (\n              <span class={navigationItemMatadata}>\n                <Text>{'( ' + metadata + ' )'}</Text>\n              </span>\n            )}\n            {severityRequirement && (\n              <span class={endIconContainerClasses}>{IconComponent(severity)}</span>\n            )}\n            {removeIcon && !isLinkItem && <span class={removeClass}>{removeIcon}</span>}\n          </Flex>\n        )}\n      </>\n    );\n  };\n  const navlistItemRenderer = () => {\n    return (\n      <div\n        role=\"tab\"\n        {...mergeProps(tooltipEventHandlerProps, itemHandlers)}\n        data-oj-key={itemKey}\n        id={itemId}\n        class={itemClasses}\n        aria-selected={isSelected}\n        ref={itemRef}\n        aria-controls={ariaControls}>\n        {isComplexItem ? complexItemRenderer() : labelRenderer()}\n        {isIconOnly && tooltipContent}\n      </div>\n    );\n  };\n  const navlistLinkItemRenderer = () => {\n    return (\n      <div {...itemHandlers} class={itemClasses}>\n        <a\n          tabindex={-1}\n          role=\"tab\"\n          data-oj-key={itemKey}\n          id={itemId}\n          class={navigationItemLinkClass}\n          aria-selected={isSelected}\n          aria-controls={ariaControls}\n          href={href}\n          onClick={onClickLink}>\n          {isComplexItem ? complexItemRenderer() : labelRenderer()}\n        </a>\n      </div>\n    );\n  };\n  return isLinkItem ? navlistLinkItemRenderer() : navlistItemRenderer();\n}\n","import { BaseNavigationListItem, BaseNavigationListItemProps } from './BaseNavigationListItem';\nimport { useNavigationListContext } from './useNavigationListContext';\nimport { Close } from '../UNSAFE_RedwoodIcons/Close';\nimport { EmbeddedIconButton } from '../PRIVATE_EmbeddedIconButton';\nimport { useCallback } from 'preact/hooks';\nimport { useHover } from '#hooks/UNSAFE_useHover';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '../resources/nls/bundle';\n\ntype RemovableNavigationListItemProps<K extends string | number> = Omit<\n  BaseNavigationListItemProps<K>,\n  'removeIcon'\n>;\n\nexport function RemovableNavigationListItem<K extends string | number>({\n  itemKey,\n  label,\n  badge,\n  metadata,\n  severity\n}: RemovableNavigationListItemProps<K>) {\n  const { selection, currentKey, onRemove } = useNavigationListContext();\n  const isSelected = selection === itemKey;\n  const isCurrent = currentKey === itemKey;\n\n  const handleRemove = useCallback(() => {\n    onRemove?.({ value: itemKey as K });\n  }, [onRemove, itemKey]);\n\n  const { hoverProps, isHover } = useHover({});\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  //instead of specifying flex: '1 0 auto' in cssProps var\n  return (\n    <div {...hoverProps}>\n      <BaseNavigationListItem\n        itemKey={itemKey}\n        label={label}\n        badge={badge}\n        metadata={metadata}\n        severity={severity}\n        removeIcon={\n          <span data-oj-navigationlist-item-remove-icon={true}>\n            <EmbeddedIconButton\n              aria-label={translations.tabBarNavigationList_removeCueText()}\n              size=\"xs\"\n              onAction={handleRemove}>\n              {(isHover || isSelected || isCurrent) && <Close />}\n            </EmbeddedIconButton>\n          </span>\n        }\n      />\n    </div>\n  );\n}\n","import { BaseNavigationListItem, BaseNavigationListItemProps } from './BaseNavigationListItem';\n\ntype Link = {\n  /**\n   * Sets the URL that the hyperlink points to. If there is no valid URL do not use NavigationListLinkItem, use other types of NavigationListItem instead.\n   */\n  href: string;\n};\nexport type NavigationListLinkItemProps<K extends string | number> = Link &\n  Pick<\n    BaseNavigationListItemProps<K>,\n    'label' | 'itemKey' | 'badge' | 'metadata' | 'severity' | 'aria-controls'\n  >;\n/**\n * NavigationListLinkItem is used to render links in a NavigationList. It allows to view the browser's built in link context menu to open the link in new browser tab.\n */\nexport function NavigationListLinkItem<K extends string | number>({\n  itemKey,\n  badge,\n  metadata,\n  severity,\n  href,\n  label,\n  'aria-controls': ariaControls\n}: NavigationListLinkItemProps<K>) {\n  return (\n    <BaseNavigationListItem\n      aria-controls={ariaControls}\n      itemKey={itemKey}\n      label={label}\n      badge={badge}\n      metadata={metadata}\n      severity={severity}\n      href={href}></BaseNavigationListItem>\n  );\n}\n"],"names":["createContext","useContext","mergeInterpolations","flexitemInterpolations","useInteractionStyle","useUser","useComponentTheme","NavigationListItemRedwoodTheme","classNames","useCallback","usePress","mergeProps","useState","useTooltipControlled","useRef","_jsx","ErrorS","WarningS","InformationS","SuccessS","_jsxs","_Fragment","Flex","Text","Badge","useHover","useTranslationBundle","EmbeddedIconButton","Close"],"mappings":"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"}

package/cjs/NumberInputText-36164d46.js

@@ -11,13 +11,13 @@ var FormFieldContext = require('./FormFieldContext-69fe83d2.js');
 var useTextField = require('./useTextField-6ecf97b7.js');
 var Label = require('./Label-eb654b0e.js');
 var PrefixSuffix = require('./PrefixSuffix-5fea6fc0.js');
-var usePrefixSuffix = require('./usePrefixSuffix-23d1cc33.js');
+var usePrefixSuffix = require('./usePrefixSuffix-a6a1b772.js');
 require('./keyboardUtils-b42fe7d5.js');
 var StyledTextField = require('./StyledTextField-7839c90d.js');
 
 var ReadonlyTextFieldInput = require('./ReadonlyTextFieldInput-60965d77.js');
 var TextField = require('./TextField-5c164264.js');
-require('./LayerHost-3cd73603.js');
+require('./LayerHost-21391a0d.js');
 
 require('./UNSAFE_TextField/themes/TextFieldStyles.css.js');
 
@@ -36,11 +36,11 @@ var mergeProps = require('./mergeProps-e3da7237.js');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-2bc15136.js');
+require('./tooltipUtils-c554343d.js');
 require('preact');
 
 var clientHints = require('./clientHints-c40c5250.js');
-require('./Popup-de16d915.js');
+require('./Popup-6de390dd.js');
 
 
 require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');
@@ -54,8 +54,8 @@ var ChevronUp = require('./ChevronUp-b0174f41.js');
 var Minus = require('./Minus-a7def860.js');
 var Plus = require('./Plus-87f2ea14.js');
 var IconButton = require('./IconButton-7503293b.js');
-var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');
-var Grid = require('./Grid-cef20569.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
+var Grid = require('./Grid-156807d4.js');
 var useSpinning = require('./useSpinning-929c5225.js');
 var useSelectableTextField = require('./useSelectableTextField-892b62db.js');
 var formControlUtils = require('./formControlUtils-596c9dc3.js');

package/cjs/OverflowTabBarItem-4053a20b.js

@@ -0,0 +1,262 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var useHover = require('./useHover-49b0430d.js');
+var EmbeddedIconButton = require('./EmbeddedIconButton-f2e69758.js');
+var Close = require('./Close-d99c20a7.js');
+var Flex = require('./Flex-ec48072d.js');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var flexitem = require('./flexitem-fee13e26.js');
+var TabBarLayout = require('./TabBarLayout-ca8af14b.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
+var preact = require('preact');
+var clientHints = require('./clientHints-c40c5250.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var Icon = require('./Icon-56789beb.js');
+var Dropdown = require('./Dropdown-b73f547b.js');
+var Sheet = require('./Sheet-1d6e8cf8.js');
+var usePress = require('./usePress-886180e4.js');
+var useUser = require('./useUser-cc045b3e.js');
+var Text = require('./Text-056f1ec5.js');
+var dimensions = require('./dimensions-6101ca1f.js');
+var boxalignment = require('./boxalignment-e287d370.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var UNSAFE_TabBarCommon_themes_redwood_TabBarItemTheme = require('./UNSAFE_TabBarCommon/themes/redwood/TabBarItemTheme.js');
+var Badge = require('./Badge-0e522f12.js');
+var useConveyorBeltItem = require('./useConveyorBeltItem-6c1771e5.js');
+var useDetectTruncation = require('./useDetectTruncation-a5b9dd16.js');
+var WarningS = require('./WarningS-cdb0a7ad.js');
+var ErrorS = require('./ErrorS-b027f7ad.js');
+var InformationS = require('./InformationS-b0bb102b.js');
+var SuccessS = require('./SuccessS-b6757c64.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var NavigationListLinkItem = require('./NavigationListLinkItem-62c3912e.js');
+var UNSAFE_TabBarCommon_themes_TabBarItemContract_css = require('./UNSAFE_TabBarCommon/themes/TabBarItemContract.css.js');
+var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
+var UNSAFE_TabBarCommon_themes_OverflowTabBarItemStyles_css = require('./UNSAFE_TabBarCommon/themes/OverflowTabBarItemStyles.css.js');
+var NavigationListItem = require('./NavigationListItem-ef597eb9.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.useTranslationBundle('@oracle/oraclejet-preact');
+    const { onSelect, selection, currentKey, showFocusRing, hideTooltip, layout, display, size, isEdgeBottom, tabItemPrefix } = TabBarLayout.useTabBarContext();
+    const isCurrent = currentKey === itemKey;
+    const { ref, ...conveyorBeltProps } = useConveyorBeltItem.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 = hooks.useCallback(() => {
+        onSelect?.({ value: itemKey });
+    }, [itemKey, onSelect]);
+    const { pressProps } = usePress.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 jsxRuntime.jsx(ErrorS.SvgErrorS, { color: "danger", accessibleLabel: translations.tabBar_tabContainsErrors() });
+            case 'warning':
+                return jsxRuntime.jsx(WarningS.SvgWarningS, { color: "warning" });
+            case 'info':
+                return jsxRuntime.jsx(InformationS.SvgInformationS, { color: "info" });
+            case 'confirmation':
+                return jsxRuntime.jsx(SuccessS.SvgSuccessS, { color: "success" });
+            default:
+                return null;
+        }
+    };
+    const { direction } = useUser.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.useComponentTheme(UNSAFE_TabBarCommon_themes_redwood_TabBarItemTheme.TabBarItemRedwoodTheme, {
+        selection: makeSelectionVisible ? 'isSelected' : 'notSelected',
+        current: isCurrent ? 'isCurrent' : 'notCurrent',
+        focusRing: makeFocusRingVisible ? 'showFocusRing' : 'noFocusRing',
+        edgeBottom: isEdgeBottom ? 'isBottom' : 'notBottom'
+    });
+    const tabBarItem = classNames.classNames([classes]);
+    const tabBarItemLabelClasses = classNames.classNames([
+        tabBarItemLabel,
+        labelMaxWidth !== undefined && tabBarItemLabelTruncated
+    ]);
+    const tabBarItemIconClasses = classNames.classNames([
+        tabBarItemIcon,
+        (isStacked || isIconOnly || !labelRequirement) && tabBarItemIconStacked
+    ]);
+    const tabBarItemMetadataClasses = classNames.classNames([tabBarItemMetadata]);
+    const tabBarItemStackedBadgeClasses = classNames.classNames([
+        tabBarItemStackedBadge,
+        direction === 'rtl' && tabBarItemStackedBadgeRtl
+    ]);
+    const removeClass = classNames.classNames([tabBarItemRemoveIcon]);
+    const tabBarItemLinkClasses = classNames.classNames([tabBarItemLink]);
+    const styleInterpolations = mergeInterpolations.mergeInterpolations([
+        ...Object.values(flexitem.flexitemInterpolations),
+        ...Object.values(dimensions.dimensionInterpolations),
+        ...Object.values(boxalignment.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 ? UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.lgHeight : UNSAFE_TabBarCommon_themes_TabBarItemContract_css.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.mergeInterpolations([
+        ...Object.values(dimensions.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.useDetectTruncation(labelMaxWidth === undefined);
+    const showTooltip = isIconOnly || isTextTruncated;
+    const { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur } = NavigationListLinkItem.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Flex.Flex, { align: "center", justify: "center", flex: "1 1 auto", gap: "2x", children: [!isIconOnly && !isStacked && icon && labelRequirement && (jsxRuntime.jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-icon": "startIcon", children: icon })), !isIconOnly && labelRequirement && (jsxRuntime.jsx("span", { class: tabBarItemLabelClasses, style: maxWidthDimensions, ...detectTruncationProps, children: jsxRuntime.jsx(Text.Text, { size: "md", weight: "semiBold", children: label }) }))] }), !isLinkItem && removeIcon && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }));
+    };
+    const complexItemRenderer = () => {
+        return (jsxRuntime.jsxs(Flex.Flex, { flex: "1 1 auto", children: [jsxRuntime.jsxs(Flex.Flex, { minWidth: "10.5x", minHeight: isTall ? UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.lgHeight : '100%', height: isStacked && labelRequirement ? UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.stackedHeight : UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.mdHeight, direction: isStacked && labelRequirement ? 'column' : 'row', gap: "2x", align: "center", justify: "center", alignSelf: "center", flex: "1 1 auto", children: [(isStacked || isIconOnly) && (jsxRuntime.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 && jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: "hiddenLabel", children: label }), icon, jsxRuntime.jsx("span", { class: tabBarItemStackedBadgeClasses, children: badge ? (jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: "neutral", children: badge })) : null })] })), !isIconOnly && !isStacked && icon && labelRequirement && (jsxRuntime.jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-icon": "startIcon", children: icon })), !isIconOnly && labelRequirement && (jsxRuntime.jsx("span", { class: tabBarItemLabelClasses, style: maxWidthDimensions, ...detectTruncationProps, children: jsxRuntime.jsx(Text.Text, { size: "md", weight: "semiBold", children: label }) })), !isStacked && !isIconOnly && badge && labelRequirement && (jsxRuntime.jsx("span", { "data-oj-tab-badge": badge, children: jsxRuntime.jsx(Badge.Badge, { size: "md", variant: "neutralSubtle", children: badge }) })), metadata && (jsxRuntime.jsx("span", { class: tabBarItemMetadataClasses, "data-oj-tab-metadata": metadata, children: jsxRuntime.jsx(Text.Text, { size: "md", weight: "normal", children: '( ' + metadata + ' )' }) })), severityRequirement && (jsxRuntime.jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-severity": severity, children: IconComponent(severity) }))] }), !isLinkItem && removeIcon && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }));
+    };
+    const tabBarItemRenderer = () => {
+        return (jsxRuntime.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.mergeProps(pressProps, tooltipEventHandlerProps, conveyorBeltProps), ref: ref, style: isComplexItem ? flexDimensions : tabDimensions, children: [isComplexItem ? complexItemRenderer() : labelIconRenderer(), tooltipContent] }));
+    };
+    const tabBarLinkItemRenderer = () => {
+        return (jsxRuntime.jsxs("span", { ref: ref, class: tabBarItem, ...mergeProps.mergeProps(pressProps, tooltipEventHandlerProps, conveyorBeltProps), style: isComplexItem ? flexDimensions : tabDimensions, children: [jsxRuntime.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 (jsxRuntime.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 } = TabBarLayout.useTabBarContext();
+    const isSelected = selection === itemKey;
+    const isCurrent = currentKey === itemKey;
+    const handleRemove = hooks.useCallback(() => {
+        onRemove?.({ value: itemKey });
+    }, [onRemove, itemKey]);
+    const { hoverProps, isHover } = useHover.useHover({});
+    //instead of specifying flex: '1 0 auto' in cssProps var
+    const styleInterpolations = mergeInterpolations.mergeInterpolations([
+        ...Object.values(flexitem.flexitemInterpolations)
+    ]);
+    const flexDimensions = styleInterpolations({
+        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
+    });
+    const translations = useTranslationBundle.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 (jsxRuntime.jsx("div", { ...hoverProps, style: flexDimensions, children: jsxRuntime.jsx(Flex.Flex, { children: jsxRuntime.jsx(BaseTabBarItem, { "aria-controls": ariaControls, itemKey: itemKey, label: label, icon: icon, badge: badge, metadata: metadata, severity: severity, labelMaxWidth: labelMaxWidth, removeIcon: jsxRuntime.jsx("span", { "data-oj-tabbar-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, {}) }) }) }) }) }));
+}
+
+const SvgOverflowH = (props) => (jsxRuntime.jsx(Icon.Icon, { viewBox: "0 0 24 24", ...props, children: jsxRuntime.jsx("g", { fill: "none", children: jsxRuntime.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 } = TabBarLayout.useTabBarContext();
+    const isPointerSelection = hooks.useRef(false);
+    // Reset pointer selection flag when the popup closes so keyboard navigation
+    // restores focus-visible on the overflow trigger.
+    hooks.useEffect(() => {
+        if (!isOpen) {
+            isPointerSelection.current = false;
+        }
+    }, [isOpen]);
+    const overflowTabBarItemRef = hooks.useRef(null);
+    const navigationListRef = preact.createRef();
+    const handleSelectionChange = hooks.useCallback((detail) => {
+        if (detail.reason === 'pointer') {
+            isPointerSelection.current = true;
+        }
+        onSelect?.({ value: detail.value });
+        onClose?.({ reason: 'itemAction' });
+    }, [onSelect, onClose]);
+    const handleDropdownClose = hooks.useCallback((e) => {
+        onClose?.({ reason: e.reason });
+    }, [onClose]);
+    const handleSheetClose = hooks.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.useTranslationBundle('@oracle/oraclejet-preact');
+    const isSelected = selection !== undefined && overflowContainsKey(selection);
+    //instead of specifying flex: '1 0 auto' in cssProps var
+    const styleInterpolations = mergeInterpolations.mergeInterpolations([
+        ...Object.values(flexitem.flexitemInterpolations)
+    ]);
+    const flexDimensions = styleInterpolations({
+        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
+    });
+    const navContainerClasses = classNames.classNames([UNSAFE_TabBarCommon_themes_OverflowTabBarItemStyles_css.styles.navContainerBase]);
+    const navContainerRef = hooks.useRef(null);
+    const handleKeyDown = hooks.useCallback((event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            navigationListRef.current?.focus();
+        }
+    }, [navigationListRef]);
+    const getNavigationList = hooks.useCallback(() => {
+        return (jsxRuntime.jsx("div", { onKeyDown: handleKeyDown, tabIndex: 0, ref: navContainerRef, class: navContainerClasses, children: jsxRuntime.jsx(NavigationListItem.NavigationList, { ref: navigationListRef, selection: selection, onSelectionChange: handleSelectionChange, onRemove: onRemove, children: overflowItems?.map((item) => item.href != null ? (jsxRuntime.jsx(NavigationListLinkItem.NavigationListLinkItem, { href: item.href, itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity })) : item.isRemovable ? (jsxRuntime.jsx(NavigationListLinkItem.RemovableNavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity })) : (jsxRuntime.jsx(NavigationListItem.NavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity }))) }) }));
+    }, [
+        handleKeyDown,
+        navContainerClasses,
+        navigationListRef,
+        selection,
+        handleSelectionChange,
+        onRemove,
+        overflowItems
+    ]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [overflowItems && overflowItems.length > 0 && (jsxRuntime.jsx("div", { ref: overflowTabBarItemRef, style: flexDimensions, children: jsxRuntime.jsx(BaseTabBarItem, { "aria-controls": currentPanelId, itemKey: overflowItemKey, label: translations.overflowItemLabel(), icon: icon ? icon : jsxRuntime.jsx(SvgOverflowH, {}), badge: badge, showFocusRingOverride: focusRingRequirement, selectionOverride: isSelected, displayOverride: 'icons', "aria-haspopup": true }) })), getIsMobile() ? (jsxRuntime.jsx(Sheet.Sheet, { isOpen: isOpen, onClose: handleSheetClose, initialFocus: "firstFocusable", children: getNavigationList() })) : (jsxRuntime.jsx(Dropdown.Dropdown, { initialFocus: "firstFocusable", isOpen: isOpen, onClose: handleDropdownClose, placement: isEdgeBottom ? 'top-end' : 'bottom-end', anchorRef: overflowTabBarItemRef, children: getNavigationList() }))] }));
+}
+const getIsMobile = () => {
+    const { deviceRenderMode } = clientHints.getClientHints();
+    return deviceRenderMode === 'phone';
+};
+
+exports.BaseTabBarItem = BaseTabBarItem;
+exports.OverflowTabBarItem = OverflowTabBarItem;
+exports.RemovableTabBarItem = RemovableTabBarItem;
+exports.TabBarItem = TabBarItem;
+//# sourceMappingURL=OverflowTabBarItem-4053a20b.js.map