/* @oracle/oraclejet-preact: undefined */
import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
import { toChildArray } from 'preact';
import { forwardRef } from 'preact/compat';
import { useRef, useCallback, useState } from 'preact/hooks';
import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
import { L as LiveRegion } from './LiveRegion-cebac18d.js';
import { T as TabBar } from './TabBar-67ca442c.js';
import { m as mergeInterpolations } from './mergeInterpolations-30cd9a69.js';
import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';
import { a as getKey } from './collectionUtils-5313629f.js';
import { u as useUser } from './useUser-06d34d19.js';
import './LayerHost-7931b424.js';
import { a as useReorderableItem, u as useReorderable } from './useReorderableItem-857636b7.js';
import { R as ReorderableContext } from './ReorderableContext-0daeea89.js';
import { styles } from './UNSAFE_ReorderableTabBar/themes/ReorderableTabBarItemStyles.css.js';
import { i as isKeyDefined } from './keys-49c92dbb.js';
import { c as classNames } from './classNames-4e12b00d.js';
import './DragAndDropStyles.styles.css';
import './StyledCheckbox-d6c8f557.js';
import './SelectorStyles.styles.css';
import './CollectionInteractionContext-7cf19abc.js';
import './ReorderableItemStyles.styles.css';
import './HiddenAccessibleStyles.styles.css';
import './LiveRegionStyles.styles.css';
import './useTestId-f24ac480.js';
import './UNSAFE_Text/themes/TextStyles.css.js';
import './TextStyles.styles.css';
import './vanilla-extract-recipes-createRuntimeFn.esm-2aaf8c98.js';
import './Flex-03129963.js';
import './boxalignment-8980856d.js';
import './size-af1e638c.js';
import './utils-b1eb54f9.js';
import './themeContract.css-1ffed3bf.js';
import './colorUtils-b3804ee8.js';
import './_curry1-63949a9b.js';
import './arrayUtils-35a58161.js';
import './boxalignment.styles.css';
import './vanilla-extract-sprinkles-createRuntimeSprinkles.esm-2d655d37.js';
import './dimensions-e4fbc23d.js';
import './flexbox-529f25da.js';
import './flexbox.styles.css';
import './FlexStyles.styles.css';
import './TabBarLayout-9b67d1b6.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 './TabBarItemVariants.styles.css';
import './BadgeStyles.styles.css';
import './UNSAFE_Badge/themes/redwood/BadgeThemeBaseTheme.styles.css';
import './UNSAFE_Badge/themes/redwood/BadgeVariants.css.js';
import './BadgeVariants.styles.css';
import './ConveyorBeltContext-76a29c59.js';
import './BusyStateContext-9ee9751d.js';
import './TabbableModeContext-7d8ad946.js';
import './TooltipContentStyles.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
import './TooltipContentVariants.styles.css';
import './tooltipUtils-af0abd38.js';
import './EnvironmentProvider-6a0a8212.js';
import './LayerManager-52a26c55.js';
import './Floating-4a82db94.js';
import './useFloating-b9d680f7.js';
import './positionUtils-f26caad9.js';
import './refUtils-76275c69.js';
import './useOutsideClick-b777a43e.js';
import './Layer-535577b5.js';
import './UNSAFE_Layer/themes/LayerStyles.css.js';
import './LayerStyles.styles.css';
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 './useModal-953082f2.js';
import './useComponentTheme-d2f9e47f.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 './IconStyle.styles.css';
import './BaseButton-41068c85.js';
import './useHover-85077adb.js';
import './useToggle-8b7fcefe.js';
import './useActive-fb6d4d52.js';
import './clientHints-a42b510c.js';
import './mergeProps-88ea8306.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 './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 './ButtonLabelLayout-1631c997.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 './keyboardUtils-986fe923.js';
import './tabbableUtils-c8311ec6.js';
import './head-8f89fe66.js';
import './_arity-be492b9e.js';
import './_curry3-577eb45e.js';
import './_curry2-01c87f61.js';
import './_isArray-694cc52d.js';
import './_isString-675f1de9.js';
import './dropdownStyles.styles.css';
import './Sheet-f9f8a4a4.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 './OverflowTabBarItemStyles.styles.css';
import './UNSAFE_TabBar/themes/TabBarStyles.css.js';
import './TabBarStyles.styles.css';
import './useTabBar-c5558e77.js';
import './useCollectionFocusRing-23ac7f97.js';
import './useCurrentKey-5f865bbd.js';
import './useReorderableContext-79b1c941.js';
import './useContextMenuGesture-e09f4c69.js';
import './textSelectionUtils-e87a47ff.js';
import './TabBarContextMenu-c3326d67.js';
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 './mergeDeepWithKey-33e3d1be.js';
import './_isObject-1fab0f5b.js';
import './flexitem.styles.css';
import './Selector-23bccbe7.js';
import './BaseSelector-7cbc48bc.js';
import './useFocus-38c95977.js';
import './PRIVATE_BaseSelector/themes/SelectorStyles.css.js';
import './useCollectionInteractionContext-3895c632.js';
import './index-aec1cc7f.js';
import './UNSAFE_Layer/themes/LayerHostStyles.css.js';
import './LayerHostStyles.styles.css';
import './dndUtils-deb68797.js';
import './hooks/PRIVATE_useReorderable/themes/ReorderableItemStyles.css.js';
import './ReorderableTabBarItemStyles.styles.css';
import './Check-ac39fe00.js';
import './Icon-4983d06e.js';
import './useTooltip-94af94d4.js';
import './useTooltipControlled-f2cfa454.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';

const ITEM_SELECTOR = '[role="tab"]';
/**
 * A private item that will be used by ReorderableTabBar, location TBD (could be moved to PRIVATE_TabBar)
 */
function ReorderableTabBarItem({ children, dragKey, setDragKey, onReorder, layout, rootRef, isFirstItem, isLastItem }) {
    const tabBarItemRef = useRef(null);
    const getItem = useCallback(() => tabBarItemRef?.current?.querySelector(ITEM_SELECTOR), []);
    const setTransferData = useCallback((event) => {
        event.dataTransfer?.setData('text/tabbar-item-key', getKey(getItem()) + '');
    }, [getItem]);
    const { direction } = useUser();
    const isRtl = direction === 'rtl';
    // Flex dimensions
    const styleInterpolations = mergeInterpolations([
        ...Object.values(flexitemInterpolations)
    ]);
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    const { rootProps, isDragged, overlayZoneBeforeProps, overlayZoneAfterProps } = useReorderableItem({
        isDisabled: onReorder ? false : true,
        dragKey,
        setDragKey,
        onReorder,
        rootRef,
        ref: tabBarItemRef,
        getItem,
        setTransferData,
        itemStyles: {
            itemOverlayFront: styles.itemOverlayFront,
            itemOverlayRear: styles.itemOverlayRear,
            itemDragger: styles.itemDragger
        },
        itemSelector: ITEM_SELECTOR
    });
    const overlayZoneBeforeClass = classNames([
        overlayZoneBeforeProps?.class,
        // Set the classes specific to isFirstItem/isLastItem which is passed down from reorderable tabbar which evaluated while mapping the children
        !isRtl && isFirstItem && styles.itemOverlayFrontFirst,
        isRtl && isLastItem && styles.itemOverlayFrontFirst
    ]);
    const overlayZoneAfterClass = classNames([
        overlayZoneAfterProps?.class,
        // Set the classes specific to isFirstItem/isLastItem which is passed down from reorderable tabbar which evaluated while mapping the children
        !isRtl && isLastItem && styles.itemOverlayRearLast,
        isRtl && isFirstItem && styles.itemOverlayRearLast
    ]);
    return (jsxs("div", { ...rootProps, draggable: onReorder ? true : false, "data-oj-draggable": onReorder ? '' : undefined, style: flexDimensions, children: [children, !isDragged && isKeyDefined(dragKey) && (jsxs(Fragment, { children: [jsx("div", { ...overlayZoneBeforeProps, class: overlayZoneBeforeClass }), jsx("div", { ...overlayZoneAfterProps, class: overlayZoneAfterClass })] }))] }));
}

/**
 * A component that allows reordering of tabs within a TabBar.
 */
const ReorderableTabBar = forwardRef(({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, layout = 'stretch', display = 'standard', size = 'md', edge = 'top', selection, onSelect, onRemove, onReorder, contextMenuConfig, testId }, ref) => {
    const rootRef = useRef(null);
    const [dragKey, setDragKey] = useState(undefined);
    const childrenArray = toChildArray(children);
    const displayStackProps = {
        display: display
    };
    const displayNonStackProps = {
        display: display,
        size: size
    };
    const displayProps = display === 'stacked' ? displayStackProps : displayNonStackProps;
    const { reorderProps, reorderContext, reorderInstructionsId, reorderStatus, reorderInstructions } = useReorderable({
        onReorder,
        rootRef,
        itemSelector: ITEM_SELECTOR
    });
    const tabBarReorderContext = {
        currentItemKey: reorderContext.currentItemKey,
        onReorder: onReorder
    };
    return (jsxs("div", { ref: rootRef, ...reorderProps, children: [jsx(ReorderableContext.Provider, { value: tabBarReorderContext, children: jsx(TabBar, { ref: ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, layout: layout, edge: edge, selection: selection, onSelect: onSelect, onRemove: onRemove, testId: testId, ...displayProps, "aria-describedby": reorderInstructionsId, contextMenuConfig: contextMenuConfig, children: childrenArray.map((child, idx) => {
                        return (jsx(ReorderableTabBarItem, { dragKey: dragKey, setDragKey: setDragKey, onReorder: onReorder, layout: layout, rootRef: rootRef, isFirstItem: idx === 0, isLastItem: idx === childrenArray.length - 1, children: child }));
                    }) }) }), jsx("span", { id: reorderInstructionsId, children: jsx(HiddenAccessible, { children: reorderInstructions }) }), jsx(LiveRegion, { children: reorderStatus })] }));
});

export { ReorderableTabBar };
//# sourceMappingURL=UNSAFE_ReorderableTabBar.js.map
