@patternfly/patternfly-doc-core 1.5.0 → 1.6.0

package/dist/server/chunks/{angle-down-icon_BNJvzYv-.mjs → angle-down-icon_C5YQ7k8s.mjs}

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
-import * as React from 'react';
-import React__default, { useMemo } from 'react';
-/* empty css                          */
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Component, useMemo, useLayoutEffect, useEffect, useRef, useState, useCallback, isValidElement, cloneElement, forwardRef, createRef, createContext, useContext } from 'react';
+/* empty css                         */
 import * as ReactDOM from 'react-dom';
 
 /** Joins args into a className string
@@ -70,7 +70,7 @@ let currentId$1 = 0;
  */
 function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
     var _a;
-    return _a = class SVGIcon extends React.Component {
+    return _a = class SVGIcon extends Component {
             constructor() {
                 super(...arguments);
                 this.id = `icon-title-${currentId$1++}`;
@@ -80,9 +80,7 @@ function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath })
                 const classes = className ? `pf-v6-svg ${className}` : 'pf-v6-svg';
                 const hasTitle = Boolean(title);
                 const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
-                    hasTitle && React.createElement("title", { id: this.id }, title),
-                    React.createElement("path", { d: svgPath })));
+                return (jsxs("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props, { children: [hasTitle && jsx("title", { id: this.id, children: title }), jsx("path", { d: svgPath })] })));
             }
         },
         _a.displayName = name,
@@ -439,7 +437,7 @@ function getRandomId() {
         return getUniqueId();
     }
 }
-class GenerateId extends React.Component {
+class GenerateId extends Component {
     constructor() {
         super(...arguments);
         this.uniqueElement = this.props.isRandom ? getRandomId() : currentId++;
@@ -2092,7 +2090,7 @@ const createPopper = popperGenerator({ defaultModifiers });
 /**
  * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
  */
-const useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
 
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
@@ -2105,14 +2103,14 @@ const fromEntries = (entries) => entries.reduce((acc, [key, value]) => {
 }, {});
 const EMPTY_MODIFIERS = [];
 const usePopper = (referenceElement, popperElement, options = {}) => {
-    const prevOptions = React.useRef(null);
+    const prevOptions = useRef(null);
     const optionsWithDefaults = {
         onFirstUpdate: options.onFirstUpdate,
         placement: options.placement || 'bottom',
         strategy: options.strategy || 'absolute',
         modifiers: options.modifiers || EMPTY_MODIFIERS
     };
-    const [state, setState] = React.useState({
+    const [state, setState] = useState({
         styles: {
             popper: {
                 position: optionsWithDefaults.strategy,
@@ -2122,7 +2120,7 @@ const usePopper = (referenceElement, popperElement, options = {}) => {
         },
         attributes: {}
     });
-    const updateStateModifier = React.useMemo(() => ({
+    const updateStateModifier = useMemo(() => ({
         name: 'updateState',
         enabled: true,
         phase: 'write',
@@ -2136,7 +2134,7 @@ const usePopper = (referenceElement, popperElement, options = {}) => {
         },
         requires: ['computeStyles']
     }), []);
-    const popperOptions = React.useMemo(() => {
+    const popperOptions = useMemo(() => {
         const newOptions = {
             onFirstUpdate: optionsWithDefaults.onFirstUpdate,
             placement: optionsWithDefaults.placement,
@@ -2157,7 +2155,7 @@ const usePopper = (referenceElement, popperElement, options = {}) => {
         optionsWithDefaults.modifiers,
         updateStateModifier
     ]);
-    const popperInstanceRef = React.useRef();
+    const popperInstanceRef = useRef(undefined);
     useIsomorphicLayoutEffect(() => {
         if (popperInstanceRef && popperInstanceRef.current) {
             popperInstanceRef.current.setOptions(popperOptions);
@@ -2202,22 +2200,22 @@ const getOppositePlacement = (placement) => placement.replace(/left|right|bottom
 const getOpacityTransition = (animationDuration) => `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 const Popper = ({ trigger, popper, direction = 'down', position = 'start', placement, width, minWidth = 'trigger', maxWidth, appendTo = () => document.body, zIndex = 9999, isVisible = true, positionModifiers, distance = 0, onMouseEnter, onMouseLeave, onFocus, onBlur, onDocumentClick, onTriggerClick, onTriggerEnter, onPopperClick, onPopperMouseEnter, onPopperMouseLeave, onDocumentKeyDown, enableFlip = true, flipBehavior = 'flip', triggerRef, popperRef, animationDuration = 0, entryDelay = 0, exitDelay = 0, onHidden = () => { }, onHide = () => { }, onMount = () => { }, onShow = () => { }, onShown = () => { }, preventOverflow = false }) => {
     var _a;
-    const [triggerElement, setTriggerElement] = React.useState(null);
-    const [refElement, setRefElement] = React.useState(null);
-    const [popperElement, setPopperElement] = React.useState(null);
-    const [popperContent, setPopperContent] = React.useState(null);
-    const [ready, setReady] = React.useState(false);
-    const [opacity, setOpacity] = React.useState(0);
-    const [internalIsVisible, setInternalIsVisible] = React.useState(isVisible);
-    const transitionTimerRef = React.useRef(null);
-    const showTimerRef = React.useRef(null);
-    const hideTimerRef = React.useRef(null);
-    const prevExitDelayRef = React.useRef();
+    const [triggerElement, setTriggerElement] = useState(null);
+    const [refElement, setRefElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const [popperContent, setPopperContent] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [opacity, setOpacity] = useState(0);
+    const [internalIsVisible, setInternalIsVisible] = useState(isVisible);
+    const transitionTimerRef = useRef(null);
+    const showTimerRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const prevExitDelayRef = useRef(undefined);
     const refOrTrigger = refElement || triggerElement;
     const showPopper = isVisible || internalIsVisible;
     const triggerParent = (_a = ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) || triggerElement)) === null || _a === void 0 ? void 0 : _a.parentElement;
     const languageDirection = getLanguageDirection(triggerParent);
-    const internalPosition = React.useMemo(() => {
+    const internalPosition = useMemo(() => {
         const fixedPositions = { left: 'left', right: 'right', center: 'center' };
         const positionMap = {
             ltr: Object.assign({ start: 'left', end: 'right' }, fixedPositions),
@@ -2225,16 +2223,16 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
         };
         return positionMap[languageDirection][position];
     }, [position, languageDirection]);
-    const onDocumentClickCallback = React.useCallback((event) => onDocumentClick(event, refOrTrigger, popperElement), [showPopper, triggerElement, refElement, popperElement, onDocumentClick]);
-    React.useEffect(() => {
+    const onDocumentClickCallback = useCallback((event) => onDocumentClick(event, refOrTrigger, popperElement), [showPopper, triggerElement, refElement, popperElement, onDocumentClick]);
+    useEffect(() => {
         setReady(true);
         onMount();
     }, []);
     // Cancel all timers on unmount
-    React.useEffect(() => () => {
+    useEffect(() => () => {
         clearTimeouts([transitionTimerRef, hideTimerRef, showTimerRef]);
     }, []);
-    React.useEffect(() => {
+    useEffect(() => {
         if (triggerRef) {
             if (triggerRef.current) {
                 setRefElement(triggerRef.current);
@@ -2244,7 +2242,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             }
         }
     }, [triggerRef, trigger]);
-    React.useEffect(() => {
+    useEffect(() => {
         // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
         if (popperRef) {
             if (popperRef.current) {
@@ -2255,7 +2253,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             }
         }
     }, [showPopper, popperRef]);
-    React.useEffect(() => {
+    useEffect(() => {
         // Trigger a Popper update when content changes.
         const observer = new MutationObserver(() => {
             update && update();
@@ -2275,7 +2273,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             element.removeEventListener(event, listener, { capture });
         }
     };
-    React.useEffect(() => {
+    useEffect(() => {
         addEventListener(onMouseEnter, refOrTrigger, 'mouseenter');
         addEventListener(onMouseLeave, refOrTrigger, 'mouseleave');
         addEventListener(onFocus, refOrTrigger, 'focus');
@@ -2326,9 +2324,9 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
         }
         return convertedPlacement;
     };
-    const getPlacementMemo = React.useMemo(getPlacement, [direction, internalPosition, placement]);
-    const getOppositePlacementMemo = React.useMemo(() => getOppositePlacement(getPlacement()), [direction, internalPosition, placement]);
-    const widthMods = React.useMemo(() => ({
+    const getPlacementMemo = useMemo(getPlacement, [direction, internalPosition, placement]);
+    const getOppositePlacementMemo = useMemo(() => getOppositePlacement(getPlacement()), [direction, internalPosition, placement]);
+    const widthMods = useMemo(() => ({
         name: 'widthMods',
         enabled: width !== undefined || minWidth !== undefined || maxWidth !== undefined,
         phase: 'beforeWrite',
@@ -2390,7 +2388,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
     /** We want to forceUpdate only when a tooltip's content is dynamically updated.
      * TODO: Investigate into 3rd party libraries for a less limited/specific solution
      */
-    React.useEffect(() => {
+    useEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         // currentPopperContent = {tooltip children} || {dropdown children}
         const currentPopperContent = ((_d = (_c = (_b = (_a = popper === null || popper === void 0 ? void 0 : popper.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.children) || ((_g = (_f = (_e = popper === null || popper === void 0 ? void 0 : popper.props) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f.props) === null || _g === void 0 ? void 0 : _g.children);
@@ -2399,7 +2397,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             forceUpdate && forceUpdate();
         }
     }, [popper]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (prevExitDelayRef.current < exitDelay) {
             clearTimeouts([transitionTimerRef, hideTimerRef]);
             hideTimerRef.current = setTimeout(() => {
@@ -2430,7 +2428,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             }, animationDuration);
         }, exitDelay);
     };
-    React.useEffect(() => {
+    useEffect(() => {
         if (isVisible) {
             show();
         }
@@ -2450,8 +2448,10 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
     const options = Object.assign({ className: css(popper.props && popper.props.className, positionModifiers && modifierFromPopperPosition()), style: Object.assign(Object.assign(Object.assign({}, ((popper.props && popper.props.style) || {})), popperStyles.popper), { zIndex,
             opacity, transition: getOpacityTransition(animationDuration) }) }, attributes.popper);
     const getMenuWithPopper = () => {
-        const localPopper = React.cloneElement(popper, options);
-        return popperRef ? (localPopper) : (React.createElement("div", { style: { display: 'contents' }, ref: (node) => setPopperElement(node === null || node === void 0 ? void 0 : node.firstElementChild) }, localPopper));
+        const localPopper = cloneElement(popper, options);
+        return popperRef ? (localPopper) : (jsx("div", { style: { display: 'contents' }, ref: (node) => {
+                setPopperElement(node === null || node === void 0 ? void 0 : node.firstElementChild);
+            }, children: localPopper }));
     };
     const getPopper = () => {
         if (appendTo === 'inline') {
@@ -2462,10 +2462,9 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             return ReactDOM.createPortal(getMenuWithPopper(), target);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        !triggerRef && trigger && React.isValidElement(trigger) && (React.createElement("div", { style: { display: 'contents' }, ref: (node) => setTriggerElement(node === null || node === void 0 ? void 0 : node.firstElementChild) }, trigger)),
-        triggerRef && trigger && React.isValidElement(trigger) && trigger,
-        ready && showPopper && getPopper()));
+    return (jsxs(Fragment, { children: [!triggerRef && trigger && isValidElement(trigger) && (jsx("div", { style: { display: 'contents' }, ref: (node) => {
+                    setTriggerElement(node === null || node === void 0 ? void 0 : node.firstElementChild);
+                }, children: trigger })), triggerRef && trigger && isValidElement(trigger) && trigger, ready && showPopper && getPopper()] }));
 };
 Popper.displayName = 'Popper';
 
@@ -2617,7 +2616,7 @@ const onToggleArrowKeydownDefault = (event, menuRef) => {
     }
     focusableElement && focusableElement.focus();
 };
-class KeyboardHandler extends React.Component {
+class KeyboardHandler extends Component {
     constructor() {
         super(...arguments);
         this.keyHandler = (event) => {
@@ -2629,7 +2628,7 @@ class KeyboardHandler extends React.Component {
             const { isActiveElement, getFocusableElement, noVerticalArrowHandling, noHorizontalArrowHandling, noEnterHandling, noSpaceHandling, updateTabIndex, validSiblingTags, additionalKeyHandler, createNavigableElements, onlyTraverseSiblings } = this.props;
             // Pass the event off to be handled by any custom handler
             additionalKeyHandler && additionalKeyHandler(event);
-            // Initalize navigableElements from the createNavigableElements callback
+            // Initialize navigableElements from the createNavigableElements callback
             const navigableElements = createNavigableElements();
             if (!navigableElements) {
                 // eslint-disable-next-line no-console
@@ -2713,11 +2712,14 @@ const styles$4 = {
     "noPadding": "pf-m-no-padding",
     "block": "pf-m-block",
     "small": "pf-m-small",
+    "favorite": "pf-m-favorite",
+    "favorited": "pf-m-favorited",
     "clicked": "pf-m-clicked",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",
     "progress": "pf-m-progress",
     "inProgress": "pf-m-in-progress",
+    "notify": "pf-m-notify",
     "start": "pf-m-start",
     "end": "pf-m-end"
   }};
@@ -2746,8 +2748,7 @@ var spinnerSize;
 })(spinnerSize || (spinnerSize = {}));
 const Spinner = (_a) => {
     var { className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', diameter, isInline = false, 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy } = _a, props = __rest(_a, ["className", "size", 'aria-valuetext', "diameter", "isInline", 'aria-label', 'aria-labelledBy']);
-    return (React.createElement("svg", Object.assign({ className: css(styles$3.spinner, isInline ? styles$3.modifiers.inline : styles$3.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText, viewBox: "0 0 100 100" }, (diameter && { style: { [c_spinner_diameter.name]: diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props),
-        React.createElement("circle", { className: styles$3.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })));
+    return (jsx("svg", Object.assign({ className: css(styles$3.spinner, isInline ? styles$3.modifiers.inline : styles$3.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText, viewBox: "0 0 100 100" }, (diameter && { style: { [c_spinner_diameter.name]: diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props, { children: jsx("circle", { className: styles$3.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" }) })));
 };
 Spinner.displayName = 'Spinner';
 
@@ -2762,9 +2763,7 @@ const styles$2 = {
 
 const Badge = (_a) => {
     var { isRead = false, isDisabled = false, className = '', children = '', screenReaderText } = _a, props = __rest(_a, ["isRead", "isDisabled", "className", "children", "screenReaderText"]);
-    return (React.createElement("span", Object.assign({}, props, { className: css(styles$2.badge, (isRead ? styles$2.modifiers.read : styles$2.modifiers.unread), isDisabled && styles$2.modifiers.disabled, className) }),
-        children,
-        screenReaderText && React.createElement("span", { className: "pf-v6-screen-reader" }, screenReaderText)));
+    return (jsxs("span", Object.assign({}, props, { className: css(styles$2.badge, (isRead ? styles$2.modifiers.read : styles$2.modifiers.unread), isDisabled && styles$2.modifiers.disabled, className), children: [children, screenReaderText && jsx("span", { className: "pf-v6-screen-reader", children: screenReaderText })] })));
 };
 Badge.displayName = 'Badge';
 
@@ -2819,20 +2818,13 @@ const ButtonBase = (_a) => {
             return 0;
         }
     };
-    const _icon = icon && (React.createElement("span", { className: css(styles$4.buttonIcon, children && styles$4.modifiers[isIconAlignedAtEnd ? 'end' : 'start']) }, icon));
-    const _children = children && React.createElement("span", { className: css('pf-v6-c-button__text') }, children);
-    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isAriaDisabled || (!isButtonElement && isDisabled), "aria-label": ariaLabel, className: css(styles$4.button, styles$4.modifiers[variant], isBlock && styles$4.modifiers.block, isDisabled && !isButtonElement && styles$4.modifiers.disabled, isAriaDisabled && styles$4.modifiers.ariaDisabled, isClicked && styles$4.modifiers.clicked, isInline && variant === ButtonVariant.link && styles$4.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles$4.modifiers.danger, isLoading !== null && variant !== ButtonVariant.plain && styles$4.modifiers.progress, isLoading && styles$4.modifiers.inProgress, hasNoPadding && variant === ButtonVariant.plain && styles$4.modifiers.noPadding, variant === ButtonVariant.stateful && styles$4.modifiers[state], size === ButtonSize.sm && styles$4.modifiers.small, size === ButtonSize.lg && styles$4.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : role, ref: innerRef }, ouiaProps),
-        isLoading && (React.createElement("span", { className: css(styles$4.buttonProgress) },
-            React.createElement(Spinner, { size: spinnerSize.md, isInline: isInline, "aria-valuetext": spinnerAriaValueText, "aria-label": spinnerAriaLabel, "aria-labelledby": spinnerAriaLabelledBy }))),
-        isIconAlignedAtEnd ? (React.createElement(React.Fragment, null,
-            _children,
-            _icon)) : (React.createElement(React.Fragment, null,
-            _icon,
-            _children)),
-        countOptions && (React.createElement("span", { className: css(styles$4.buttonCount, countOptions.className) },
-            React.createElement(Badge, { isRead: countOptions.isRead, isDisabled: isDisabled }, countOptions.count)))));
-};
-const Button = React.forwardRef((props, ref) => (React.createElement(ButtonBase, Object.assign({ innerRef: ref }, props))));
+    const _icon = icon && (jsx("span", { className: css(styles$4.buttonIcon, children && styles$4.modifiers[isIconAlignedAtEnd ? 'end' : 'start']), children: icon }));
+    const _children = children && jsx("span", { className: css('pf-v6-c-button__text'), children: children });
+    // We only want to render the aria-disabled attribute when true, similar to the disabled attribute natively.
+    const shouldRenderAriaDisabled = isAriaDisabled || (!isButtonElement && isDisabled);
+    return (jsxs(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), (shouldRenderAriaDisabled && { 'aria-disabled': true }), { "aria-label": ariaLabel, className: css(styles$4.button, styles$4.modifiers[variant], isBlock && styles$4.modifiers.block, isDisabled && !isButtonElement && styles$4.modifiers.disabled, isAriaDisabled && styles$4.modifiers.ariaDisabled, isClicked && styles$4.modifiers.clicked, isInline && variant === ButtonVariant.link && styles$4.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles$4.modifiers.danger, isLoading !== null && variant !== ButtonVariant.plain && styles$4.modifiers.progress, isLoading && styles$4.modifiers.inProgress, hasNoPadding && variant === ButtonVariant.plain && styles$4.modifiers.noPadding, variant === ButtonVariant.stateful && styles$4.modifiers[state], size === ButtonSize.sm && styles$4.modifiers.small, size === ButtonSize.lg && styles$4.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : role, ref: innerRef }, ouiaProps, { children: [isLoading && (jsx("span", { className: css(styles$4.buttonProgress), children: jsx(Spinner, { size: spinnerSize.md, isInline: isInline, "aria-valuetext": spinnerAriaValueText, "aria-label": spinnerAriaLabel, "aria-labelledby": spinnerAriaLabelledBy }) })), isIconAlignedAtEnd ? (jsxs(Fragment, { children: [_children, _icon] })) : (jsxs(Fragment, { children: [_icon, _children] })), countOptions && (jsx("span", { className: css(styles$4.buttonCount, countOptions.className), children: jsx(Badge, { isRead: countOptions.isRead, isDisabled: isDisabled, children: countOptions.count }) }))] })));
+};
+const Button = forwardRef((props, ref) => jsx(ButtonBase, Object.assign({ innerRef: ref }, props)));
 Button.displayName = 'Button';
 
 const TimesIconConfig = {
@@ -2869,13 +2861,13 @@ const styles$1 = {
 
 const TooltipContent = (_a) => {
     var { className, children, isLeftAligned } = _a, props = __rest(_a, ["className", "children", "isLeftAligned"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$1.tooltipContent, isLeftAligned && styles$1.modifiers.textAlignLeft, className) }, props), children));
+    return (jsx("div", Object.assign({ className: css(styles$1.tooltipContent, isLeftAligned && styles$1.modifiers.textAlignLeft, className) }, props, { children: children })));
 };
 TooltipContent.displayName = 'TooltipContent';
 
 const TooltipArrow = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return React.createElement("div", Object.assign({ className: css(styles$1.tooltipArrow, className) }, props));
+    return jsx("div", Object.assign({ className: css(styles$1.tooltipArrow, className) }, props));
 };
 TooltipArrow.displayName = 'TooltipArrow';
 
@@ -2908,8 +2900,8 @@ const Tooltip = (_a) => {
     const triggerOnFocus = trigger.includes('focus');
     const triggerOnClick = trigger.includes('click');
     const triggerManually = trigger === 'manual';
-    const [visible, setVisible] = React.useState(false);
-    const popperRef = React.createRef();
+    const [visible, setVisible] = useState(false);
+    const popperRef = createRef();
     const onDocumentKeyDown = (event) => {
         if (!triggerManually) {
             if (event.key === KeyTypes.Escape && visible) {
@@ -2927,7 +2919,7 @@ const Tooltip = (_a) => {
             }
         }
     };
-    React.useEffect(() => {
+    useEffect(() => {
         if (isVisible) {
             show();
         }
@@ -2956,11 +2948,9 @@ const Tooltip = (_a) => {
         'right-end': styles$1.modifiers.rightBottom
     };
     const hasCustomMaxWidth = maxWidth !== c_tooltip_MaxWidth.value;
-    const content = (React.createElement("div", Object.assign({ "aria-live": ariaLive, className: css(styles$1.tooltip, className), role: "tooltip", id: id, style: {
+    const content = (jsxs("div", Object.assign({ "aria-live": ariaLive, className: css(styles$1.tooltip, className), role: "tooltip", id: id, style: {
             maxWidth: hasCustomMaxWidth ? maxWidth : null
-        }, ref: popperRef }, rest),
-        React.createElement(TooltipArrow, null),
-        React.createElement(TooltipContent, { isLeftAligned: isContentLeftAligned }, bodyContent)));
+        }, ref: popperRef }, rest, { children: [jsx(TooltipArrow, {}), jsx(TooltipContent, { isLeftAligned: isContentLeftAligned, children: bodyContent })] })));
     const onDocumentClick = (event, triggerElement) => {
         // event.currentTarget = document
         // event.target could be triggerElement or something else
@@ -2976,14 +2966,14 @@ const Tooltip = (_a) => {
     };
     const addAriaToTrigger = () => {
         if (aria === 'describedby' && children && children.props && !children.props['aria-describedby']) {
-            return React.cloneElement(children, { 'aria-describedby': id });
+            return cloneElement(children, { 'aria-describedby': id });
         }
         else if (aria === 'labelledby' && children.props && !children.props['aria-labelledby']) {
-            return React.cloneElement(children, { 'aria-labelledby': id });
+            return cloneElement(children, { 'aria-labelledby': id });
         }
         return children;
     };
-    return (React.createElement(Popper, { trigger: aria !== 'none' && visible ? addAriaToTrigger() : children, triggerRef: triggerRef, popper: content, popperRef: popperRef, minWidth: minWidth !== undefined ? minWidth : 'revert', appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onMouseEnter: triggerOnMouseenter && show, onMouseLeave: triggerOnMouseenter && hide, onPopperMouseEnter: triggerOnMouseenter && show, onPopperMouseLeave: triggerOnMouseenter && hide, onFocus: triggerOnFocus && show, onBlur: triggerOnFocus && hide, onDocumentClick: triggerOnClick && onDocumentClick, onDocumentKeyDown: triggerManually ? null : onDocumentKeyDown, onTriggerEnter: triggerManually ? null : onTriggerEnter, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior, animationDuration: animationDuration, entryDelay: entryDelay, exitDelay: exitDelay, onHidden: onTooltipHidden }));
+    return (jsx(Popper, { trigger: aria !== 'none' && visible ? addAriaToTrigger() : children, triggerRef: triggerRef, popper: content, popperRef: popperRef, minWidth: minWidth !== undefined ? minWidth : 'revert', appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onMouseEnter: triggerOnMouseenter && show, onMouseLeave: triggerOnMouseenter && hide, onPopperMouseEnter: triggerOnMouseenter && show, onPopperMouseLeave: triggerOnMouseenter && hide, onFocus: triggerOnFocus && show, onBlur: triggerOnFocus && hide, onDocumentClick: triggerOnClick && onDocumentClick, onDocumentKeyDown: triggerManually ? null : onDocumentKeyDown, onTriggerEnter: triggerManually ? null : onTriggerEnter, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior, animationDuration: animationDuration, entryDelay: entryDelay, exitDelay: exitDelay, onHidden: onTooltipHidden }));
 };
 Tooltip.displayName = 'Tooltip';
 
@@ -3038,7 +3028,7 @@ const menuStyles = {
   }
 };
 
-const MenuContext = React.createContext({
+const MenuContext = createContext({
     menuId: null,
     parentMenu: null,
     onActionClick: () => null,
@@ -3055,15 +3045,15 @@ const MenuContext = React.createContext({
     disableHover: false,
     role: 'menu'
 });
-const MenuItemContext = React.createContext({
+const MenuItemContext = createContext({
     itemId: null,
     isDisabled: false
 });
 
-class MenuBase extends React.Component {
+class MenuBase extends Component {
     constructor(props) {
         super(props);
-        this.menuRef = React.createRef();
+        this.menuRef = createRef();
         this.activeMenu = null;
         this.state = {
             ouiaStateId: getDefaultOUIAId(Menu.displayName),
@@ -3190,7 +3180,7 @@ class MenuBase extends React.Component {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         props = __rest(_a, ["id", "children", "className", "onSelect", "selected", "onActionClick", "ouiaId", "ouiaSafe", "containsFlyout", "containsDrilldown", "isMenuDrilledIn", "isPlain", "isScrollable", "drilldownItemPath", "drilledInMenus", "onDrillIn", "onDrillOut", "onGetMenuHeight", "parentMenu", "activeItemId", "innerRef", "isRootMenu", "activeMenu", "role", "isNavFlyout"]);
         const _isMenuDrilledIn = isMenuDrilledIn || (drilledInMenus && drilledInMenus.includes(id)) || false;
-        return (React.createElement(MenuContext.Provider, { value: {
+        return (jsxs(MenuContext.Provider, { value: {
                 menuId: id,
                 parentMenu: parentMenu || id,
                 onSelect,
@@ -3206,22 +3196,20 @@ class MenuBase extends React.Component {
                 setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
                 disableHover: this.state.disableHover,
                 role
-            } },
-            isRootMenu && (React.createElement(KeyboardHandler, { containerRef: this.menuRef || null, additionalKeyHandler: this.handleExtraKeys, createNavigableElements: this.createNavigableElements, isActiveElement: (element) => document.activeElement.closest('li') === element || // if element is a basic MenuItem
-                    document.activeElement.parentElement === element ||
-                    document.activeElement.closest(`.${menuStyles.menuSearch}`) === element || // if element is a MenuSearch
-                    (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element), getFocusableElement: (navigableElement) => {
-                    var _a, _b;
-                    return ((navigableElement === null || navigableElement === void 0 ? void 0 : navigableElement.tagName) === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
-                        (((_a = navigableElement.firstChild) === null || _a === void 0 ? void 0 : _a.tagName) === 'LABEL' &&
-                            navigableElement.querySelector('input')) || // for MenuItem checkboxes
-                        (((_b = navigableElement.firstChild) === null || _b === void 0 ? void 0 : _b.tagName) === 'DIV' &&
-                            navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
-                        navigableElement.firstChild;
-                }, noHorizontalArrowHandling: document.activeElement &&
-                    (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-                        document.activeElement.tagName === 'INPUT'), noEnterHandling: true, noSpaceHandling: true })),
-            React.createElement("div", Object.assign({ id: id, className: css(menuStyles.menu, isPlain && menuStyles.modifiers.plain, isScrollable && menuStyles.modifiers.scrollable, containsFlyout && menuStyles.modifiers.flyout, isNavFlyout && 'pf-m-nav', containsDrilldown && menuStyles.modifiers.drilldown, _isMenuDrilledIn && menuStyles.modifiers.drilledIn, className), ref: this.menuRef }, getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props), children)));
+            }, children: [isRootMenu && (jsx(KeyboardHandler, { containerRef: this.menuRef || null, additionalKeyHandler: this.handleExtraKeys, createNavigableElements: this.createNavigableElements, isActiveElement: (element) => document.activeElement.closest('li') === element || // if element is a basic MenuItem
+                        document.activeElement.parentElement === element ||
+                        document.activeElement.closest(`.${menuStyles.menuSearch}`) === element || // if element is a MenuSearch
+                        (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element), getFocusableElement: (navigableElement) => {
+                        var _a, _b;
+                        return ((navigableElement === null || navigableElement === void 0 ? void 0 : navigableElement.tagName) === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
+                            (((_a = navigableElement.firstChild) === null || _a === void 0 ? void 0 : _a.tagName) === 'LABEL' &&
+                                navigableElement.querySelector('input')) || // for MenuItem checkboxes
+                            (((_b = navigableElement.firstChild) === null || _b === void 0 ? void 0 : _b.tagName) === 'DIV' &&
+                                navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
+                            navigableElement.firstChild;
+                    }, noHorizontalArrowHandling: document.activeElement &&
+                        (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
+                            document.activeElement.tagName === 'INPUT'), noEnterHandling: true, noSpaceHandling: true })), jsx("div", Object.assign({ id: id, className: css(menuStyles.menu, isPlain && menuStyles.modifiers.plain, isScrollable && menuStyles.modifiers.scrollable, containsFlyout && menuStyles.modifiers.flyout, isNavFlyout && 'pf-m-nav', containsDrilldown && menuStyles.modifiers.drilldown, _isMenuDrilledIn && menuStyles.modifiers.drilledIn, className), ref: this.menuRef }, getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props, { children: children }))] }));
     }
 }
 MenuBase.displayName = 'Menu';
@@ -3233,7 +3221,7 @@ MenuBase.defaultProps = {
     isScrollable: false,
     role: 'menu'
 };
-const Menu = React.forwardRef((props, ref) => (React.createElement(MenuBase, Object.assign({}, props, { innerRef: ref }))));
+const Menu = forwardRef((props, ref) => (jsx(MenuBase, Object.assign({}, props, { innerRef: ref }))));
 Menu.displayName = 'Menu';
 
 const c_menu__content_Height = {
@@ -3242,9 +3230,9 @@ const c_menu__content_Height = {
 const c_menu__content_MaxHeight = {
   "name": "--pf-v6-c-menu__content--MaxHeight"};
 
-const MenuContent = React.forwardRef((props, ref) => {
+const MenuContent = forwardRef((props, ref) => {
     const { getHeight, children, menuHeight, maxMenuHeight } = props, rest = __rest(props, ["getHeight", "children", "menuHeight", "maxMenuHeight"]);
-    const menuContentRef = React.createRef();
+    const menuContentRef = createRef();
     const refCallback = (el, menuId, onGetMenuHeight) => {
         if (el) {
             let clientHeight = el.clientHeight;
@@ -3269,7 +3257,9 @@ const MenuContent = React.forwardRef((props, ref) => {
         }
         return ref || menuContentRef;
     };
-    return (React.createElement(MenuContext.Consumer, null, ({ menuId, onGetMenuHeight }) => (React.createElement("div", Object.assign({}, rest, { className: css(menuStyles.menuContent, props.className), ref: (el) => refCallback(el, menuId, onGetMenuHeight), style: Object.assign(Object.assign({}, (menuHeight && { [c_menu__content_Height.name]: menuHeight })), (maxMenuHeight && { [c_menu__content_MaxHeight.name]: maxMenuHeight })) }), children))));
+    return (jsx(MenuContext.Consumer, { children: ({ menuId, onGetMenuHeight }) => (jsx("div", Object.assign({}, rest, { className: css(menuStyles.menuContent, props.className), ref: (el) => {
+                refCallback(el, menuId, onGetMenuHeight);
+            }, style: Object.assign(Object.assign({}, (menuHeight && { [c_menu__content_Height.name]: menuHeight })), (maxMenuHeight && { [c_menu__content_MaxHeight.name]: maxMenuHeight })), children: children }))) }));
 });
 MenuContent.displayName = 'MenuContent';
 
@@ -3330,7 +3320,7 @@ const checkStyles = {
 
 // tslint:disable-next-line:no-empty
 const defaultOnChange = () => { };
-class Checkbox extends React.Component {
+class Checkbox extends Component {
     constructor(props) {
         super(props);
         this.handleChange = (event) => {
@@ -3356,22 +3346,15 @@ class Checkbox extends React.Component {
         if ([false, true].includes(defaultChecked)) {
             checkedProps.defaultChecked = defaultChecked;
         }
-        const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css(checkStyles.checkInput, inputClassName), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, required: isRequired, ref: (elem) => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
+        const inputRendered = (jsx("input", Object.assign({}, props, { className: css(checkStyles.checkInput, inputClassName), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, required: isRequired, ref: (elem) => {
+                elem && (elem.indeterminate = isChecked === null);
+            } }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
         const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
         const Label = wrapWithLabel ? 'span' : 'label';
-        const labelRendered = label ? (React.createElement(Label, { className: css(checkStyles.checkLabel, isDisabled && checkStyles.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined },
-            label,
-            isRequired && (React.createElement("span", { className: css(checkStyles.checkLabelRequired), "aria-hidden": "true" }, ASTERISK)))) : null;
+        const labelRendered = label ? (jsxs(Label, { className: css(checkStyles.checkLabel, isDisabled && checkStyles.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined, children: [label, isRequired && (jsx("span", { className: css(checkStyles.checkLabelRequired), "aria-hidden": "true", children: ASTERISK }))] })) : null;
         const Component = component !== null && component !== void 0 ? component : (wrapWithLabel ? 'label' : 'div');
         checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
-        return (React.createElement(Component, { className: css(checkStyles.check, !label && checkStyles.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
-            labelPosition === 'start' ? (React.createElement(React.Fragment, null,
-                labelRendered,
-                inputRendered)) : (React.createElement(React.Fragment, null,
-                inputRendered,
-                labelRendered)),
-            description && React.createElement("span", { className: css(checkStyles.checkDescription) }, description),
-            body && React.createElement("span", { className: css(checkStyles.checkBody) }, body)));
+        return (jsxs(Component, { className: css(checkStyles.check, !label && checkStyles.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined, children: [labelPosition === 'start' ? (jsxs(Fragment, { children: [labelRendered, inputRendered] })) : (jsxs(Fragment, { children: [inputRendered, labelRendered] })), description && jsx("span", { className: css(checkStyles.checkDescription), children: description }), body && jsx("span", { className: css(checkStyles.checkBody), children: body })] }));
     }
 }
 Checkbox.displayName = 'Checkbox';
@@ -3399,34 +3382,35 @@ const StarIcon = createIcon(StarIconConfig);
 
 const MenuItemActionBase = (_a) => {
     var { className, icon, onClick, 'aria-label': ariaLabel, isFavorited = null, isDisabled, actionId, innerRef } = _a, props = __rest(_a, ["className", "icon", "onClick", 'aria-label', "isFavorited", "isDisabled", "actionId", "innerRef"]);
-    return (React.createElement(MenuContext.Consumer, null, ({ onActionClick }) => (React.createElement(MenuItemContext.Consumer, null, ({ itemId, isDisabled: isDisabledContext }) => {
-        const onClickButton = (event) => {
-            // event specified on the MenuItemAction
-            onClick && onClick(event);
-            // event specified on the Menu
-            onActionClick && onActionClick(event, itemId, actionId);
-        };
-        return (React.createElement("div", Object.assign({ className: css(menuStyles.menuItemAction, isFavorited !== null && 'pf-m-favorite', isFavorited && menuStyles.modifiers.favorited, className) }, props),
-            React.createElement(Button, { "aria-label": ariaLabel, onClick: onClickButton, ref: innerRef, role: "menuitem", variant: "plain", tabIndex: -1, isDisabled: isDisabled || isDisabledContext, icon: icon === 'favorites' || isFavorited !== null ? React.createElement(StarIcon, { "aria-hidden": true }) : icon })));
-    }))));
+    return (jsx(MenuContext.Consumer, { children: ({ onActionClick }) => (jsx(MenuItemContext.Consumer, { children: ({ itemId, isDisabled: isDisabledContext }) => {
+                const onClickButton = (event) => {
+                    // event specified on the MenuItemAction
+                    onClick && onClick(event);
+                    // event specified on the Menu
+                    onActionClick && onActionClick(event, itemId, actionId);
+                };
+                return (jsx("div", Object.assign({ className: css(menuStyles.menuItemAction, isFavorited !== null && 'pf-m-favorite', isFavorited && menuStyles.modifiers.favorited, className) }, props, { children: jsx(Button, { "aria-label": ariaLabel, onClick: onClickButton, ref: innerRef, role: "menuitem", variant: "plain", tabIndex: -1, isDisabled: isDisabled || isDisabledContext, icon: icon === 'favorites' || isFavorited !== null ? jsx(StarIcon, {}) : icon }) })));
+            } })) }));
 };
-const MenuItemAction = React.forwardRef((props, ref) => (React.createElement(MenuItemActionBase, Object.assign({}, props, { innerRef: ref }))));
+const MenuItemAction = forwardRef((props, ref) => (jsx(MenuItemActionBase, Object.assign({}, props, { innerRef: ref }))));
 MenuItemAction.displayName = 'MenuItemAction';
 
-const FlyoutContext = React.createContext({
+const FlyoutContext = createContext({
     direction: 'right'
 });
 const MenuItemBase = (_a) => {
     var { children, className, itemId = null, to, hasCheckbox = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isAriaDisabled = false, isExternalLink = false, isSelected = null, isFocused, isDanger = false, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef, id, 'aria-label': ariaLabel, tooltipProps, rel, target, download } = _a, props = __rest(_a, ["children", "className", "itemId", "to", "hasCheckbox", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isAriaDisabled", "isExternalLink", "isSelected", "isFocused", "isDanger", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef", "id", 'aria-label', "tooltipProps", "rel", "target", "download"]);
-    const { menuId, parentMenu, onSelect, onActionClick, activeItemId, selected, drilldownItemPath, onDrillIn, onDrillOut, flyoutRef, setFlyoutRef, disableHover, role: menuRole } = React.useContext(MenuContext);
+    const { menuId, parentMenu, onSelect, onActionClick, activeItemId, selected, drilldownItemPath, onDrillIn, onDrillOut, flyoutRef, setFlyoutRef, disableHover, role: menuRole } = useContext(MenuContext);
     let Component = (to ? 'a' : component);
     if (hasCheckbox && !to) {
         Component = 'label';
     }
-    const [flyoutTarget, setFlyoutTarget] = React.useState(null);
-    const flyoutContext = React.useContext(FlyoutContext);
-    const [flyoutXDirection, setFlyoutXDirection] = React.useState(flyoutContext.direction);
-    const ref = React.useRef();
+    const [flyoutTarget, setFlyoutTarget] = useState(null);
+    const flyoutContext = useContext(FlyoutContext);
+    const [flyoutXDirection, setFlyoutXDirection] = useState(flyoutContext.direction);
+    const ref = useRef(undefined);
+    const privateRef = useRef(undefined);
+    const innerComponentRef = innerRef || privateRef;
     const flyoutVisible = ref === flyoutRef;
     const hasFlyout = flyoutMenu !== undefined;
     const showFlyout = (show) => {
@@ -3477,10 +3461,10 @@ const MenuItemBase = (_a) => {
             }
         }
     }, [flyoutVisible, flyoutMenu]);
-    React.useEffect(() => {
+    useEffect(() => {
         setFlyoutXDirection(flyoutContext.direction);
     }, [flyoutContext]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (flyoutTarget) {
             if (flyoutVisible) {
                 const flyoutMenu = flyoutTarget.nextElementSibling;
@@ -3591,7 +3575,7 @@ const MenuItemBase = (_a) => {
             setFlyoutRef(null);
         }
     };
-    React.useEffect(() => {
+    useEffect(() => {
         if (isFocused && ref.current) {
             const itemEl = ref.current;
             const parentListEl = itemEl.parentElement;
@@ -3605,53 +3589,31 @@ const MenuItemBase = (_a) => {
         }
     }, [isFocused]);
     const isSelectMenu = menuRole === 'listbox';
-    const renderItem = (React.createElement(React.Fragment, null,
-        React.createElement(GenerateId, null, (randomId) => (React.createElement(Component, Object.assign({ id: id, tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheckbox && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel }), (!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' }), (!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() }), { ref: innerRef }, (!hasCheckbox && {
-            onClick: (event) => {
-                if (!isAriaDisabled) {
-                    onItemSelect(event, onSelect);
-                    drill && drill(event);
-                    flyoutMenu && handleFlyout(event);
-                }
-                else {
-                    event.preventDefault();
-                }
-            }
-        }), (hasCheckbox && { htmlFor: randomId }), additionalProps),
-            React.createElement("span", { className: css(menuStyles.menuItemMain) },
-                direction === 'up' && (React.createElement("span", { className: css(menuStyles.menuItemToggleIcon) },
-                    React.createElement(AngleLeftIcon, { "aria-hidden": true }))),
-                icon && React.createElement("span", { className: css(menuStyles.menuItemIcon) }, icon),
-                hasCheckbox && (React.createElement("span", { className: css(menuStyles.menuItemCheck) },
-                    React.createElement(Checkbox, { id: randomId, component: "span", isChecked: isSelected || false, onChange: (event) => onItemSelect(event, onSelect), isDisabled: isDisabled, "aria-disabled": isAriaDisabled }))),
-                React.createElement("span", { className: css(menuStyles.menuItemText) }, children),
-                isExternalLink && (React.createElement("span", { className: css(menuStyles.menuItemExternalIcon) },
-                    React.createElement(ExternalLinkAltIcon, { "aria-hidden": true }))),
-                (flyoutMenu || direction === 'down') && (React.createElement("span", { className: css(menuStyles.menuItemToggleIcon) },
-                    React.createElement(AngleRightIcon, { "aria-hidden": true }))),
-                getIsSelected() && (React.createElement("span", { className: css(menuStyles.menuItemSelectIcon) },
-                    React.createElement(CheckIcon, { "aria-hidden": true })))),
-            description && direction !== 'up' && (React.createElement("span", { className: css(menuStyles.menuItemDescription) },
-                React.createElement("span", null, description)))))),
-        flyoutVisible && (React.createElement(MenuContext.Provider, { value: { disableHover } },
-            React.createElement(FlyoutContext.Provider, { value: { direction: flyoutXDirection } }, flyoutMenu))),
-        typeof drilldownMenu === 'function' ? drilldownMenu() : drilldownMenu,
-        React.createElement(MenuItemContext.Provider, { value: { itemId, isDisabled } },
-            actions,
-            isFavorited !== null && (React.createElement(MenuItemAction, { icon: "favorites", isFavorited: isFavorited, "aria-label": isFavorited ? 'starred' : 'not starred', onClick: (event) => onActionClick(event, itemId), tabIndex: -1, actionId: "fav" })))));
-    return (React.createElement("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, isAriaDisabled && menuStyles.modifiers.ariaDisabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && 'pf-m-focus', isDanger && menuStyles.modifiers.danger, className), onMouseOver: () => {
-            if (!isAriaDisabled) {
-                onMouseOver();
-            }
-        } }, (flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheckbox ? 'none' : 'menuitem' }, (hasCheckbox && { 'aria-label': ariaLabel }), props), tooltipProps ? React.createElement(Tooltip, Object.assign({}, tooltipProps), renderItem) : renderItem));
+    const renderItem = (jsxs(Fragment, { children: [jsx(GenerateId, { children: (randomId) => (jsxs(Component, Object.assign({ id: id, tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheckbox && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel }), (!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' }), (!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() }), { ref: innerComponentRef }, (!hasCheckbox && {
+                    onClick: (event) => {
+                        if (!isAriaDisabled) {
+                            onItemSelect(event, onSelect);
+                            drill && drill(event);
+                            flyoutMenu && handleFlyout(event);
+                        }
+                        else {
+                            event.preventDefault();
+                        }
+                    }
+                }), (hasCheckbox && { htmlFor: randomId }), additionalProps, { children: [jsxs("span", { className: css(menuStyles.menuItemMain), children: [direction === 'up' && (jsx("span", { className: css(menuStyles.menuItemToggleIcon), children: jsx(AngleLeftIcon, {}) })), icon && jsx("span", { className: css(menuStyles.menuItemIcon), children: icon }), hasCheckbox && (jsx("span", { className: css(menuStyles.menuItemCheck), children: jsx(Checkbox, { id: randomId, component: "span", isChecked: isSelected || false, onChange: (event) => onItemSelect(event, onSelect), isDisabled: isDisabled, "aria-disabled": isAriaDisabled }) })), jsx("span", { className: css(menuStyles.menuItemText), children: children }), isExternalLink && (jsx("span", { className: css(menuStyles.menuItemExternalIcon), children: jsx(ExternalLinkAltIcon, {}) })), (flyoutMenu || direction === 'down') && (jsx("span", { className: css(menuStyles.menuItemToggleIcon), children: jsx(AngleRightIcon, {}) })), getIsSelected() && (jsx("span", { className: css(menuStyles.menuItemSelectIcon), children: jsx(CheckIcon, {}) }))] }), description && direction !== 'up' && (jsx("span", { className: css(menuStyles.menuItemDescription), children: jsx("span", { children: description }) }))] }))) }), flyoutVisible && (jsx(MenuContext.Provider, { value: { disableHover }, children: jsx(FlyoutContext.Provider, { value: { direction: flyoutXDirection }, children: flyoutMenu }) })), typeof drilldownMenu === 'function' ? drilldownMenu() : drilldownMenu, jsxs(MenuItemContext.Provider, { value: { itemId, isDisabled }, children: [actions, isFavorited !== null && (jsx(MenuItemAction, { icon: "favorites", isFavorited: isFavorited, "aria-label": isFavorited ? 'starred' : 'not starred', onClick: (event) => onActionClick(event, itemId), tabIndex: -1, actionId: "fav" }))] })] }));
+    return (jsxs(Fragment, { children: [jsx("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, isAriaDisabled && menuStyles.modifiers.ariaDisabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && 'pf-m-focus', isDanger && menuStyles.modifiers.danger, className), onMouseOver: () => {
+                    if (!isAriaDisabled) {
+                        onMouseOver();
+                    }
+                } }, (flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheckbox ? 'none' : 'menuitem' }, (hasCheckbox && { 'aria-label': ariaLabel }), props, { children: renderItem })), tooltipProps && jsx(Tooltip, Object.assign({}, tooltipProps, { triggerRef: innerComponentRef }))] }));
 };
-const MenuItem = React.forwardRef((props, ref) => (React.createElement(MenuItemBase, Object.assign({}, props, { innerRef: ref }))));
+const MenuItem = forwardRef((props, ref) => (jsx(MenuItemBase, Object.assign({}, props, { innerRef: ref }))));
 MenuItem.displayName = 'MenuItem';
 
 const MenuList = (_a) => {
     var { children = null, className, isAriaMultiselectable = false, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "className", "isAriaMultiselectable", 'aria-label']);
-    const { role } = React.useContext(MenuContext);
-    return (React.createElement("ul", Object.assign({ role: role }, (role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable }), { className: css(menuStyles.menuList, className), "aria-label": ariaLabel }, props), children));
+    const { role } = useContext(MenuContext);
+    return (jsx("ul", Object.assign({ role: role }, (role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable }), { className: css(menuStyles.menuList, className), "aria-label": ariaLabel }, props, { children: children })));
 };
 MenuList.displayName = 'MenuList';
 
@@ -3706,7 +3668,7 @@ var MenuToggleSize;
     MenuToggleSize["default"] = "default";
     MenuToggleSize["sm"] = "sm";
 })(MenuToggleSize || (MenuToggleSize = {}));
-class MenuToggleBase extends React.Component {
+class MenuToggleBase extends Component {
     constructor() {
         super(...arguments);
         this.displayName = 'MenuToggleBase';
@@ -3724,38 +3686,27 @@ class MenuToggleBase extends React.Component {
         if (!statusIcon) {
             switch (status) {
                 case MenuToggleStatus.success:
-                    _statusIcon = React.createElement(CheckCircleIcon, { "aria-hidden": "true" });
+                    _statusIcon = jsx(CheckCircleIcon, {});
                     break;
                 case MenuToggleStatus.warning:
-                    _statusIcon = React.createElement(ExclamationTriangleIcon, { "aria-hidden": "true" });
+                    _statusIcon = jsx(ExclamationTriangleIcon, {});
                     break;
                 case MenuToggleStatus.danger:
-                    _statusIcon = React.createElement(ExclamationCircleIcon, { "aria-hidden": "true" });
+                    _statusIcon = jsx(ExclamationCircleIcon, {});
                     break;
             }
         }
-        const toggleControls = (React.createElement("span", { className: css(styles.menuToggleControls) },
-            status !== undefined && React.createElement("span", { className: css(styles.menuToggleStatusIcon) }, _statusIcon),
-            React.createElement("span", { className: css(styles.menuToggleToggleIcon) },
-                React.createElement(CaretDownIcon, { "aria-hidden": true }))));
-        const content = (React.createElement(React.Fragment, null,
-            icon && React.createElement("span", { className: css(styles.menuToggleIcon) }, icon),
-            isTypeahead ? children : children && React.createElement("span", { className: css(styles.menuToggleText) }, children),
-            React.isValidElement(badge) && React.createElement("span", { className: css(styles.menuToggleCount) }, badge),
-            isTypeahead ? (React.createElement("button", Object.assign({ type: "button", className: css(styles.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": ariaLabel || 'Menu toggle', tabIndex: -1 }, ouiaProps), toggleControls)) : (!isPlain && toggleControls)));
+        const toggleControls = (jsxs("span", { className: css(styles.menuToggleControls), children: [status !== undefined && jsx("span", { className: css(styles.menuToggleStatusIcon), children: _statusIcon }), jsx("span", { className: css(styles.menuToggleToggleIcon), children: jsx(CaretDownIcon, {}) })] }));
+        const content = (jsxs(Fragment, { children: [icon && jsx("span", { className: css(styles.menuToggleIcon), children: icon }), isTypeahead ? children : children && jsx("span", { className: css(styles.menuToggleText), children: children }), isValidElement(badge) && jsx("span", { className: css(styles.menuToggleCount), children: badge }), isTypeahead ? (jsx("button", Object.assign({ type: "button", className: css(styles.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": ariaLabel || 'Menu toggle', tabIndex: -1 }, ouiaProps, { children: toggleControls }))) : (!isPlain && toggleControls)] }));
         const commonStyles = css(styles.menuToggle, isExpanded && styles.modifiers.expanded, variant === 'primary' && styles.modifiers.primary, variant === 'secondary' && styles.modifiers.secondary, status && styles.modifiers[status], (isPlain || isPlainText) && styles.modifiers.plain, isPlainText && 'pf-m-text', isFullHeight && styles.modifiers.fullHeight, isFullWidth && styles.modifiers.fullWidth, isDisabled && styles.modifiers.disabled, isPlaceholder && styles.modifiers.placeholder, size === MenuToggleSize.sm && styles.modifiers.small, className);
         const componentProps = Object.assign(Object.assign({ children: content }, (isDisabled && { disabled: true })), otherProps);
         if (isTypeahead) {
-            return (React.createElement("div", Object.assign({ ref: innerRef, className: css(commonStyles, styles.modifiers.typeahead) }, componentProps)));
+            return (jsx("div", Object.assign({ ref: innerRef, className: css(commonStyles, styles.modifiers.typeahead) }, componentProps)));
         }
         if (splitButtonItems) {
-            return (React.createElement("div", { ref: innerRef, className: css(commonStyles, styles.modifiers.splitButton) },
-                splitButtonItems,
-                React.createElement("button", Object.assign({ className: css(styles.menuToggleButton, children && styles.modifiers.text), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick }, otherProps, ouiaProps),
-                    children && React.createElement("span", { className: css(styles.menuToggleText) }, children),
-                    toggleControls)));
+            return (jsxs("div", { ref: innerRef, className: css(commonStyles, styles.modifiers.splitButton), children: [splitButtonItems, jsxs("button", Object.assign({ className: css(styles.menuToggleButton, children && styles.modifiers.text), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick }, otherProps, ouiaProps, { children: [children && jsx("span", { className: css(styles.menuToggleText), children: children }), toggleControls] }))] }));
         }
-        return (React.createElement("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps, ouiaProps)));
+        return (jsx("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps, ouiaProps)));
     }
 }
 MenuToggleBase.defaultProps = {
@@ -3768,7 +3719,7 @@ MenuToggleBase.defaultProps = {
     size: 'default',
     ouiaSafe: true
 };
-const MenuToggle = React.forwardRef((props, ref) => (React.createElement(MenuToggleBase, Object.assign({ innerRef: ref }, props))));
+const MenuToggle = forwardRef((props, ref) => (jsx(MenuToggleBase, Object.assign({ innerRef: ref }, props))));
 MenuToggle.displayName = 'MenuToggle';
 
 const dividerStyles = {
@@ -3857,21 +3808,21 @@ var DividerVariant;
 const Divider = (_a) => {
     var { className, component = DividerVariant.hr, inset, orientation } = _a, props = __rest(_a, ["className", "component", "inset", "orientation"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(dividerStyles.divider, formatBreakpointMods(inset, dividerStyles), formatBreakpointMods(orientation, dividerStyles), className) }, (component !== 'hr' && { role: 'separator' }), props)));
+    return (jsx(Component, Object.assign({ className: css(dividerStyles.divider, formatBreakpointMods(inset, dividerStyles), formatBreakpointMods(orientation, dividerStyles), className) }, (component !== 'hr' && { role: 'separator' }), props)));
 };
 Divider.displayName = 'Divider';
 
 const DropdownBase = (_a) => {
     var { children, className, onSelect, isOpen, toggle, shouldFocusToggleOnSelect = false, onOpenChange, onToggleKeydown, isPlain, isScrollable, innerRef, ouiaId, ouiaSafe = true, zIndex = 9999, popperProps, onOpenChangeKeys = ['Escape', 'Tab'], menuHeight, maxMenuHeight, shouldFocusFirstItemOnOpen = false, shouldPreventScrollOnItemFocus = true, focusTimeoutDelay = 0 } = _a, props = __rest(_a, ["children", "className", "onSelect", "isOpen", "toggle", "shouldFocusToggleOnSelect", "onOpenChange", "onToggleKeydown", "isPlain", "isScrollable", "innerRef", "ouiaId", "ouiaSafe", "zIndex", "popperProps", "onOpenChangeKeys", "menuHeight", "maxMenuHeight", "shouldFocusFirstItemOnOpen", "shouldPreventScrollOnItemFocus", "focusTimeoutDelay"]);
-    const localMenuRef = React__default.useRef();
-    const localToggleRef = React__default.useRef();
+    const localMenuRef = useRef(undefined);
+    const localToggleRef = useRef(undefined);
     const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
     const menuRef = innerRef || localMenuRef;
     const toggleRef = typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
         ? localToggleRef
         : toggle === null || toggle === void 0 ? void 0 : toggle.toggleRef;
-    const prevIsOpen = React__default.useRef(isOpen);
-    React__default.useEffect(() => {
+    const prevIsOpen = useRef(isOpen);
+    useEffect(() => {
         // menu was opened, focus on first menu item
         if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
             setTimeout(() => {
@@ -3883,7 +3834,7 @@ const DropdownBase = (_a) => {
         prevIsOpen.current = isOpen;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
-    React__default.useEffect(() => {
+    useEffect(() => {
         const handleMenuKeys = (event) => {
             var _a, _b, _c, _d;
             // Close the menu on tab or escape if onOpenChange is provided
@@ -3931,28 +3882,27 @@ const DropdownBase = (_a) => {
         focusTimeoutDelay
     ]);
     const scrollable = maxMenuHeight !== undefined || menuHeight !== undefined || isScrollable;
-    const menu = (React__default.createElement(Menu, Object.assign({ className: css(className), ref: menuRef, onSelect: (event, value) => {
+    const menu = (jsx(Menu, Object.assign({ className: css(className), ref: menuRef, onSelect: (event, value) => {
             var _a;
             onSelect && onSelect(event, value);
             shouldFocusToggleOnSelect && ((_a = toggleRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-        }, isPlain: isPlain, isScrollable: scrollable }, props, ouiaProps),
-        React__default.createElement(MenuContent, { menuHeight: menuHeight, maxMenuHeight: maxMenuHeight }, children)));
-    return (React__default.createElement(Popper, Object.assign({ trigger: typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode, triggerRef: toggleRef, popper: menu, popperRef: menuRef, isVisible: isOpen, zIndex: zIndex }, popperProps)));
+        }, isPlain: isPlain, isScrollable: scrollable }, props, ouiaProps, { children: jsx(MenuContent, { menuHeight: menuHeight, maxMenuHeight: maxMenuHeight, children: children }) })));
+    return (jsx(Popper, Object.assign({ trigger: typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode, triggerRef: toggleRef, popper: menu, popperRef: menuRef, isVisible: isOpen, zIndex: zIndex }, popperProps)));
 };
-const Dropdown = React__default.forwardRef((props, ref) => (React__default.createElement(DropdownBase, Object.assign({ innerRef: ref }, props))));
+const Dropdown = forwardRef((props, ref) => (jsx(DropdownBase, Object.assign({ innerRef: ref }, props))));
 Dropdown.displayName = 'Dropdown';
 
 const DropdownItemBase = (_a) => {
     var { children, className, description, isDisabled, isAriaDisabled, value, onClick, ouiaId, ouiaSafe, innerRef, tooltipProps } = _a, props = __rest(_a, ["children", "className", "description", "isDisabled", "isAriaDisabled", "value", "onClick", "ouiaId", "ouiaSafe", "innerRef", "tooltipProps"]);
     const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
-    return (React__default.createElement(MenuItem, Object.assign({ className: css(className), description: description, isDisabled: isDisabled, isAriaDisabled: isAriaDisabled, itemId: value, onClick: onClick, tooltipProps: tooltipProps, ref: innerRef }, ouiaProps, props), children));
+    return (jsx(MenuItem, Object.assign({ className: css(className), description: description, isDisabled: isDisabled, isAriaDisabled: isAriaDisabled, itemId: value, onClick: onClick, tooltipProps: tooltipProps, ref: innerRef }, ouiaProps, props, { children: children })));
 };
-const DropdownItem = React__default.forwardRef((props, ref) => (React__default.createElement(DropdownItemBase, Object.assign({}, props, { innerRef: ref }))));
+const DropdownItem = forwardRef((props, ref) => (jsx(DropdownItemBase, Object.assign({}, props, { innerRef: ref }))));
 DropdownItem.displayName = 'DropdownItem';
 
 const DropdownList = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement(MenuList, Object.assign({ className: css(className) }, props), children));
+    return (jsx(MenuList, Object.assign({ className: css(className) }, props, { children: children })));
 };
 DropdownList.displayName = 'DropdownList';