@patternfly/react-core 4.211.1 → 4.211.4

package/src/components/Tabs/examples/Tabs.md

@@ -56,7 +56,12 @@ class SimpleTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the default example">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the default example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -99,7 +104,9 @@ class SimpleTabs extends React.Component {
 
 ### With tooltip react ref
 
-When using a React ref to link a Tooltip to a Tab component, an `id` must be manually set on the Tooltip component, and the Tab component must have a matching `aria-describedby` attribute so that screen readers are able to announce the Tooltip contents.
+When using a React ref to link a Tooltip to a Tab component via the `reference` prop, you should avoid manually passing in a value of "off" to the `aria-live` prop. Doing so may lead to the tooltip becoming less accessible to assistive technologies.
+
+The tooltip should also have the `id` prop passed in. The value given to this prop should then be passed into the tab's `aria-describedby` prop. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
 
 ```js
 import React from 'react';
@@ -132,7 +139,12 @@ class SimpleTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the example with a tooltip ref">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the example with a tooltip ref"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -153,15 +165,15 @@ class SimpleTabs extends React.Component {
             title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>}
             isAriaDisabled
             ref={tooltipRef}
-            aria-describedby="tooltip-tab-5"
+            aria-describedby="tooltip-ref1"
           >
             ARIA Disabled (Tooltip)
           </Tab>
         </Tabs>
         <Tooltip
+          id="tooltip-ref1"
           content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support."
           reference={tooltipRef}
-          id="tooltip-tab-5"
         />
         <div style={{ marginTop: '20px' }}>
           <Checkbox
@@ -338,7 +350,12 @@ class ScrollButtonsPrimaryTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the default overflow example">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the default overflow example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -424,7 +441,13 @@ class VerticalTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isVertical isBox={isBox} aria-label="Tabs in the vertical example">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isVertical
+          isBox={isBox}
+          aria-label="Tabs in the vertical example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -689,7 +712,13 @@ class PageInsetsTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} usePageInsets isBox={isBox} aria-label="Tabs in the page insets example">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          usePageInsets
+          isBox={isBox}
+          aria-label="Tabs in the page insets example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -753,7 +782,11 @@ class IconAndTextTabs extends React.Component {
 
   render() {
     return (
-      <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the icons and text example">
+      <Tabs
+        activeKey={this.state.activeTabKey}
+        onSelect={this.handleTabClick}
+        aria-label="Tabs in the icons and text example"
+      >
         <Tab
           eventKey={0}
           title={
@@ -876,9 +909,19 @@ class SecondaryTabs extends React.Component {
     const { activeTabKey1, activeTabKey2, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey1} onSelect={this.handleTabClickFirst} isBox={isBox} aria-label="Tabs in the tabs with subtabs example">
+        <Tabs
+          activeKey={activeTabKey1}
+          onSelect={this.handleTabClickFirst}
+          isBox={isBox}
+          aria-label="Tabs in the tabs with subtabs example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
-            <Tabs aria-label="secondary tabs for users" activeKey={activeTabKey2} isSecondary onSelect={this.handleTabClickSecond}>
+            <Tabs
+              aria-label="secondary tabs for users"
+              activeKey={activeTabKey2}
+              isSecondary
+              onSelect={this.handleTabClickSecond}
+            >
               <Tab eventKey={20} title={<TabTitleText>Secondary tab item 1</TabTitleText>}>
                 Secondary tab item 1 item section
               </Tab>
@@ -983,7 +1026,13 @@ class FilledTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the filled example">
+        <Tabs
+          isFilled
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the filled example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -1044,7 +1093,13 @@ class FilledTabsWithIcons extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the filled with icons example">
+        <Tabs
+          isFilled
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the filled with icons example"
+        >
           <Tab
             eventKey={0}
             title={
@@ -1270,7 +1325,11 @@ class SeparateTabContent extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the seperate content example">
+        <Tabs
+          activeKey={this.state.activeTabKey}
+          onSelect={this.handleTabClick}
+          aria-label="Tabs in the seperate content example"
+        >
           <Tab
             eventKey={0}
             title={<TabTitleText>Tab item 1</TabTitleText>}
@@ -1291,13 +1350,30 @@ class SeparateTabContent extends React.Component {
           />
         </Tabs>
         <div>
-          <TabContent eventKey={0} id="refTab1Section" ref={this.contentRef1} aria-label="This is content for the first tab">
+          <TabContent
+            eventKey={0}
+            id="refTab1Section"
+            ref={this.contentRef1}
+            aria-label="This is content for the first tab"
+          >
             Tab 1 section
           </TabContent>
-          <TabContent eventKey={1} id="refTab2Section" ref={this.contentRef2} aria-label="This is content for the second tab" hidden>
+          <TabContent
+            eventKey={1}
+            id="refTab2Section"
+            ref={this.contentRef2}
+            aria-label="This is content for the second tab"
+            hidden
+          >
             Tab 2 section
           </TabContent>
-          <TabContent eventKey={2} id="refTab3Section" ref={this.contentRef3} aria-label="This is content for the third tab" hidden>
+          <TabContent
+            eventKey={2}
+            id="refTab3Section"
+            ref={this.contentRef3}
+            aria-label="This is content for the third tab"
+            hidden
+          >
             Tab 3 section
           </TabContent>
         </div>
@@ -1351,10 +1427,22 @@ const TabContentWithBody = () => {
         <TabContent eventKey={0} id="refTab1Section" ref={contentRef1} aria-label="This is content for the first tab">
           <TabContentBody hasPadding> Tab 1 section </TabContentBody>
         </TabContent>
-        <TabContent eventKey={1} id="refTab2Section" ref={contentRef2} aria-label="This is content for the second tab" hidden>
+        <TabContent
+          eventKey={1}
+          id="refTab2Section"
+          ref={contentRef2}
+          aria-label="This is content for the second tab"
+          hidden
+        >
           <TabContentBody hasPadding> Tab 2 section </TabContentBody>
         </TabContent>
-        <TabContent eventKey={2} id="refTab3Section" ref={contentRef3} aria-label="This is content for the third tab" hidden>
+        <TabContent
+          eventKey={2}
+          id="refTab3Section"
+          ref={contentRef3}
+          aria-label="This is content for the third tab"
+          hidden
+        >
           <TabContentBody hasPadding> Tab 3 section </TabContentBody>
         </TabContent>
       </div>
@@ -1385,7 +1473,12 @@ class MountingSimpleTabs extends React.Component {
 
   render() {
     return (
-      <Tabs mountOnEnter activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the children mounting on click example">
+      <Tabs
+        mountOnEnter
+        activeKey={this.state.activeTabKey}
+        onSelect={this.handleTabClick}
+        aria-label="Tabs in the children mounting on click example"
+      >
         <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>}>
           Tab 1 section
         </Tab>
@@ -1423,7 +1516,12 @@ class UnmountingSimpleTabs extends React.Component {
 
   render() {
     return (
-      <Tabs unmountOnExit activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the unmounting invisible children example">
+      <Tabs
+        unmountOnExit
+        activeKey={this.state.activeTabKey}
+        onSelect={this.handleTabClick}
+        aria-label="Tabs in the unmounting invisible children example"
+      >
         <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>}>
           Tab 1 section
         </Tab>
@@ -1473,7 +1571,11 @@ class ToggledSeparateContent extends React.Component {
           {isTab2Hidden ? 'Show' : 'Hide'} tab 2
         </Button>
         <Divider style={{ paddingTop: '1rem', paddingBottom: '1rem' }} />
-        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the toggled separate content example">
+        <Tabs
+          activeKey={this.state.activeTabKey}
+          onSelect={this.handleTabClick}
+          aria-label="Tabs in the toggled separate content example"
+        >
           <Tab eventKey={0} title="Tab item 1" tabContentId="refTab1Section" tabContentRef={this.contentRef1} />
           {!isTab2Hidden && (
             <Tab eventKey={1} title="Tab item 2" tabContentId="refTab2Section" tabContentRef={this.contentRef2} />
@@ -1481,15 +1583,32 @@ class ToggledSeparateContent extends React.Component {
           <Tab eventKey={2} title="Tab item 3" tabContentId="refTab3Section" tabContentRef={this.contentRef3} />
         </Tabs>
         <div>
-          <TabContent eventKey={0} id="refTab1Section" ref={this.contentRef1} aria-label="This is content for the first tab">
+          <TabContent
+            eventKey={0}
+            id="refTab1Section"
+            ref={this.contentRef1}
+            aria-label="This is content for the first tab"
+          >
             Tab 1 section
           </TabContent>
           {!isTab2Hidden && (
-            <TabContent eventKey={1} id="refTab2Section" ref={this.contentRef2} aria-label="This is content for the second tab" hidden>
+            <TabContent
+              eventKey={1}
+              id="refTab2Section"
+              ref={this.contentRef2}
+              aria-label="This is content for the second tab"
+              hidden
+            >
               Tab 2 section
             </TabContent>
           )}
-          <TabContent eventKey={2} id="refTab3Section" ref={this.contentRef3} aria-label="This is content for the third tab" hidden>
+          <TabContent
+            eventKey={2}
+            id="refTab3Section"
+            ref={this.contentRef3}
+            aria-label="This is content for the third tab"
+            hidden
+          >
             Tab 3 section
           </TabContent>
         </div>

package/src/components/Tooltip/Tooltip.tsx

@@ -35,6 +35,12 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
    * If you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'.
    */
   aria?: 'describedby' | 'labelledby' | 'none';
+  /**
+   * Determines whether the tooltip is an aria-live region. If the reference prop is passed in the
+   * default behavior is 'polite' in order to ensure the tooltip contents is announced to
+   * assistive technologies. Otherwise the default behavior is 'off'.
+   */
+  'aria-live'?: 'off' | 'polite';
   /**
    * The reference element to which the Tooltip is relatively placed to.
    * If you cannot wrap the reference with the Tooltip, you can use the reference prop instead.
@@ -155,6 +161,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   children,
   animationDuration = 300,
   reference,
+  'aria-live': ariaLive = reference ? 'polite' : 'off',
   boundary,
   isAppLauncher,
   tippyProps,
@@ -251,6 +258,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const hasCustomMaxWidth = maxWidth !== tooltipMaxWidth.value;
   const content = (
     <div
+      aria-live={ariaLive}
       className={css(styles.tooltip, className)}
       role="tooltip"
       id={id}

package/src/components/Tooltip/examples/Tooltip.md

@@ -12,6 +12,7 @@ import './TooltipExamples.css';
 ## Examples
 
 ### Basic
+
 ```js
 import React from 'react';
 import { Tooltip } from '@patternfly/react-core';
@@ -22,12 +23,15 @@ import { Tooltip } from '@patternfly/react-core';
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
     }
   >
-    <span tabIndex="0" style={{ border: '1px dashed' }}>I have a tooltip!</span>
+    <span tabIndex="0" style={{ border: '1px dashed' }}>
+      I have a tooltip!
+    </span>
   </Tooltip>
-</div>
+</div>;
 ```
 
 ### Tooltip react ref
+
 ```js
 import React from 'react';
 import { Tooltip } from '@patternfly/react-core';
@@ -36,35 +40,49 @@ TooltipReactRef = () => {
   const tooltipRef = React.useRef();
   return (
     <div style={{ margin: '100px' }}>
-      <button ref={tooltipRef}>Tooltip attached via react ref</button>
+      <button aria-describedby="tooltip-ref1" ref={tooltipRef}>
+        Tooltip attached via react ref
+      </button>
       <Tooltip
+        id="tooltip-ref1"
         content={
-          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+          </div>
         }
         reference={tooltipRef}
       />
     </div>
   );
-}
+};
 ```
 
 ### Tooltip selector ref
+
 ```js
 import React from 'react';
 import { Tooltip } from '@patternfly/react-core';
 
 <div style={{ margin: '100px' }}>
-  <button id="tooltip-selector">Tooltip attached via selector ref</button>
+  <button aria-describedby="tooltip-ref2" id="tooltip-selector">
+    Tooltip attached via selector ref
+  </button>
   <Tooltip
+    id="tooltip-ref2"
     content={
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
     }
     reference={() => document.getElementById('tooltip-selector')}
   />
-</div>
+</div>;
 ```
 
-### On icon
+### On icon with dynamic content
+
+When the tooltip is used as a wrapper and its content will dynamically update, the `aria` prop should have a value of "none" passed in. This prevents assistive technologies from announcing the tooltip contents more than once. Additionally, the `aria-live` prop should have a value of "polite" passed in, in order for assistive technologies to announce when the tooltip contents gets updated.
+
+When using a React or selector ref with a tooltip that has dynamic content, the `aria` and `aria-live` props do not need to be manually passed in.
+
 ```js
 import React from 'react';
 import { Tooltip, Button } from '@patternfly/react-core';
@@ -77,8 +95,13 @@ IconExample = () => {
   const [content, setContent] = React.useState(copyText);
   return (
     <div style={{ margin: '100px' }}>
-      <Tooltip content={showSuccessContent ? doneCopyText : copyText}>
-        <Button variant="plain" aria-label="Icon with tooltip attached" id="tt-ref" onClick={() => setShowSuccessContent(!showSuccessContent)}>
+      <Tooltip aria="none" aria-live="polite" content={showSuccessContent ? doneCopyText : copyText}>
+        <Button
+          aria-label="Clipboard"
+          variant="plain"
+          id="tt-ref"
+          onClick={() => setShowSuccessContent(!showSuccessContent)}
+        >
           <CopyIcon />
         </Button>
       </Tooltip>
@@ -88,6 +111,7 @@ IconExample = () => {
 ```
 
 ### Options
+
 ```js
 import React from 'react';
 import { Button, Tooltip, Checkbox, Select, SelectOption, TextInput } from '@patternfly/react-core';
@@ -105,26 +129,26 @@ OptionsTooltip = () => {
   const [exitDelayInput, setExitDelayInput] = React.useState(0);
   const [animationDuration, setAnimationDuration] = React.useState(300);
   const tipBoxRef = React.useRef(null);
-  
+
   const scrollToRef = ref => {
     if (ref && ref.current) {
       ref.current.scrollTop = 400;
       ref.current.scrollLeft = 300;
     }
-  }
-  
+  };
+
   React.useEffect(() => {
     scrollToRef(tipBoxRef);
   }, []);
-  
+
   return (
     <>
       <div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           <Checkbox
             label="trigger: mouseenter"
             isChecked={trigger.includes('mouseenter')}
-            onChange={(checked) => {
+            onChange={checked => {
               let updatedTrigger;
               checked && (updatedTrigger = trigger.concat('mouseenter'));
               !checked && (updatedTrigger = trigger.filter(t => t !== 'mouseenter'));
@@ -137,7 +161,7 @@ OptionsTooltip = () => {
           <Checkbox
             label="trigger: focus"
             isChecked={trigger.includes('focus')}
-            onChange={(checked) => {
+            onChange={checked => {
               let updatedTrigger;
               checked && (updatedTrigger = trigger.concat('focus'));
               !checked && (updatedTrigger = trigger.filter(t => t !== 'focus'));
@@ -150,7 +174,7 @@ OptionsTooltip = () => {
           <Checkbox
             label="trigger: click"
             isChecked={trigger.includes('click')}
-            onChange={(checked) => {
+            onChange={checked => {
               let updatedTrigger;
               checked && (updatedTrigger = trigger.concat('click'));
               !checked && (updatedTrigger = trigger.filter(t => t !== 'click'));
@@ -163,36 +187,36 @@ OptionsTooltip = () => {
           <Checkbox
             label="trigger: manual"
             isChecked={trigger.includes('manual')}
-            onChange={(checked) => {
+            onChange={checked => {
               let updatedTrigger;
               checked && (updatedTrigger = trigger.concat('manual'));
               !checked && (updatedTrigger = trigger.filter(t => t !== 'manual'));
               setIsVisible(false);
               setTrigger(updatedTrigger);
             }}
-            aria-label="trigger: manual"   
-            id="trigger_manual"         
+            aria-label="trigger: manual"
+            id="trigger_manual"
           />
         </div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           <Checkbox
             label="content left-aligned"
             isChecked={contentLeftAligned}
-            onChange={(checked) => setContentLeftAligned(checked)}
+            onChange={checked => setContentLeftAligned(checked)}
             aria-label="content left-aligned"
-            id="content_left_aligned"          
+            id="content_left_aligned"
           />
         </div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           <Checkbox
             label="enableFlip"
             isChecked={enableFlip}
-            onChange={(checked) => setEnableFlip(checked)}
-            aria-label="enableFlip"    
-            id="enable_flip"    
+            onChange={checked => setEnableFlip(checked)}
+            aria-label="enableFlip"
+            id="enable_flip"
           />
         </div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true.
           <Select
             onToggle={() => setPositionSelectOpen(!positionSelectOpen)}
@@ -219,22 +243,41 @@ OptionsTooltip = () => {
             <SelectOption value="right-end" />
           </Select>
         </div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           <Checkbox
             label="isVisible (also set trigger to only manual to programmatically control it)"
             isChecked={isVisible}
-            onChange={(checked) => setIsVisible(checked)}
-            aria-label="isVisible" 
-            id="is_visible"       
+            onChange={checked => setIsVisible(checked)}
+            aria-label="isVisible"
+            id="is_visible"
           />
         </div>
-        <div style={{ border: '1px solid'}}>
-          Entry delay (ms) <TextInput value={entryDelayInput} type="number" onChange={val => setEntryDelayInput(val)} aria-label="entry delay" />
-          Exit delay (ms) <TextInput value={exitDelayInput} type="number" onChange={val => setExitDelayInput(val)} aria-label="exit delay" />
-          Animation duration (ms) <TextInput value={animationDuration} type="number" onChange={val => setAnimationDuration(val)} aria-label="animation duration" />
+        <div style={{ border: '1px solid' }}>
+          Entry delay (ms){' '}
+          <TextInput
+            value={entryDelayInput}
+            type="number"
+            onChange={val => setEntryDelayInput(val)}
+            aria-label="entry delay"
+          />
+          Exit delay (ms) <TextInput
+            value={exitDelayInput}
+            type="number"
+            onChange={val => setExitDelayInput(val)}
+            aria-label="exit delay"
+          />
+          Animation duration (ms){' '}
+          <TextInput
+            value={animationDuration}
+            type="number"
+            onChange={val => setAnimationDuration(val)}
+            aria-label="animation duration"
+          />
         </div>
-        <div style={{ border: '1px solid'}}>
-          flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the starting position. The second option ensures that there are 3 escape positions for every possible starting position (default). This setting is ignored if position prop is set to 'auto'.
+        <div style={{ border: '1px solid' }}>
+          flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the
+          starting position. The second option ensures that there are 3 escape positions for every possible starting
+          position (default). This setting is ignored if position prop is set to 'auto'.
           <Select
             onToggle={() => setFlipSelectOpen(!flipSelectOpen)}
             onSelect={(event, selection) => {
@@ -254,7 +297,9 @@ OptionsTooltip = () => {
       <div id="tooltip-boundary" className="tooltip-box" ref={tipBoxRef}>
         <Tooltip
           content={
-            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+            </div>
           }
           trigger={trigger.join(' ')}
           enableFlip={enableFlip}
@@ -272,5 +317,5 @@ OptionsTooltip = () => {
       </div>
     </>
   );
-}
+};
 ```

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -47,6 +47,8 @@ Composable menus currently require consumer keyboard handling and use of our und
 
 ### Composable tree view menu
 
+When rendering a menu-like element that does not contain MenuItem components, [Panel](/components/panel) allows more flexible control and customization.
+
 ```ts file="./examples/ComposableTreeViewMenu.tsx"
 ```