@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/expandable-section/react.js

@@ -0,0 +1,408 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+const pageData = {
+  "id": "Expandable section",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/expandable-section/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md",
+  "relPath": "packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md",
+  "propComponents": [
+    {
+      "name": "ExpandableSection",
+      "description": "The main expandable section component.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the expandable section."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the expandable section.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "contentId",
+          "type": "string",
+          "description": "Id of the content of the expandable section. When passing in the isDetached property, this\nproperty's value should match the contentId property of the expandable section toggle sub-component."
+        },
+        {
+          "name": "direction",
+          "type": "'up' | 'down'",
+          "description": "Sets the direction of the expandable animation when isDetached is true. If this prop is not passed,\nanimation will not occur."
+        },
+        {
+          "name": "displaySize",
+          "type": "'default' | 'lg'",
+          "description": "Display size variant. Set to \"lg\" for disclosure styling.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "hasToggleIcon",
+          "type": "boolean",
+          "description": "Whether to show a toggle icon when variant is not truncated. If omitted, it is important to ensure the current state of the ExpandableSection is conveyed, most likely by having dynamic toggle text."
+        },
+        {
+          "name": "isDetached",
+          "type": "boolean",
+          "description": "Flag indicating that the expandable section and expandable toggle are detached from one another.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag to indicate if the content is expanded."
+        },
+        {
+          "name": "isIndented",
+          "type": "boolean",
+          "description": "Flag to indicate if the content is indented.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isWidthLimited",
+          "type": "boolean",
+          "description": "Flag to indicate the width of the component is limited. Set to \"true\" for disclosure styling.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onToggle",
+          "type": "(event: React.MouseEvent, isExpanded: boolean) => void",
+          "description": "Callback function to toggle the expandable section. Detached expandable sections should\nuse the onToggle property of the expandable section toggle sub-component.",
+          "defaultValue": "(event, isExpanded): void => undefined"
+        },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "Accessible name via human readable string for the expandable section toggle.",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "toggleAriaLabelledBy",
+          "type": "string",
+          "description": "Accessible name via space delimtted list of IDs for the expandable section toggle.",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "toggleContent",
+          "type": "React.ReactNode | ((isExpanded: boolean) => React.ReactNode)",
+          "description": "React node that appears in the attached toggle in place of the toggleText property.\nCan also be a function that receives the expanded state and returns a React node."
+        },
+        {
+          "name": "toggleIcon",
+          "type": "React.ReactNode",
+          "description": "Icon shown in toggle when variant is not truncated."
+        },
+        {
+          "name": "toggleId",
+          "type": "string",
+          "description": "Id of the toggle of the expandable section, which provides an accessible name to the\nexpandable section content via the aria-labelledby attribute. When the isDetached property\nis also passed in, the value of this property must match the toggleId property of the\nexpandable section toggle sub-component."
+        },
+        {
+          "name": "toggleText",
+          "type": "string",
+          "description": "Text that appears in the attached toggle.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "toggleTextCollapsed",
+          "type": "string",
+          "description": "Text that appears in the attached toggle when collapsed (will override toggleText if\nboth are specified; used for uncontrolled expandable with dynamic toggle text).",
+          "defaultValue": "''"
+        },
+        {
+          "name": "toggleTextExpanded",
+          "type": "string",
+          "description": "Text that appears in the attached toggle when expanded (will override toggleText if\nboth are specified; used for uncontrolled expandable with dynamic toggle text).",
+          "defaultValue": "''"
+        },
+        {
+          "name": "toggleWrapper",
+          "type": "'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "The HTML element to use for the toggle wrapper. Can be 'div' (default) or any heading level.\nWhen using heading elements, the button will be rendered inside the heading for proper semantics.\nThis is useful when the toggle text should function as a heading in the document structure."
+        },
+        {
+          "name": "truncateMaxLines",
+          "type": "number",
+          "description": "Truncates the expandable content to the specified number of lines when using the\n\"truncate\" variant."
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'truncate'",
+          "description": "Determines the variant of the expandable section. When passing in \"truncate\" as the\nvariant, the expandable content will be truncated after 3 lines by default.",
+          "defaultValue": "'default'"
+        }
+      ]
+    },
+    {
+      "name": "ExpandableSectionToggle",
+      "description": "Acts as the toggle sub-component when the main expandable section component has the isDetached\nproperty passed in. Allows for more custom control over the expandable section's toggle.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the expandable toggle."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the expandable toggle.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "contentId",
+          "type": "string",
+          "description": "Id of the toggle's respective expandable section content. The value passed into this\nproperty should match the contentId property of the main expandable section component."
+        },
+        {
+          "name": "direction",
+          "type": "'up' | 'down'",
+          "description": "Direction the toggle arrow should point when the expandable section is expanded.",
+          "defaultValue": "'down'"
+        },
+        {
+          "name": "hasTruncatedContent",
+          "type": "boolean",
+          "description": "Flag to determine toggle styling when the expandable content is truncated.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDetached",
+          "type": "boolean",
+          "description": "Flag indicating that the expandable section and expandable toggle are detached from one another."
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if the expandable section is expanded.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onToggle",
+          "type": "(isExpanded: boolean) => void",
+          "description": "Callback function to toggle the expandable content."
+        },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "Accessible name via human readable string for the expandable section toggle."
+        },
+        {
+          "name": "toggleAriaLabelledBy",
+          "type": "string",
+          "description": "Accessible name via space delimtted list of IDs for the expandable section toggle."
+        },
+        {
+          "name": "toggleId",
+          "type": "string",
+          "description": "Id of the toggle. The value passed into this property should match the aria-labelledby\nproperty of the main expandable section component."
+        },
+        {
+          "name": "toggleWrapper",
+          "type": "'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "The HTML element to use for the toggle wrapper. Can be 'div' (default) or any heading level.\nWhen using heading elements, the button will be rendered inside the heading for proper semantics.\nThis is useful when the toggle text should function as a heading in the document structure.",
+          "defaultValue": "'div'"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-expandable-section"
+  ],
+  "examples": [
+    "Basic",
+    "Uncontrolled",
+    "Uncontrolled with dynamic toggle text",
+    "Uncontrolled with dynamic toggle content (function)",
+    "Detached",
+    "Disclosure variation",
+    "Indented expandable content",
+    "With custom toggle content",
+    "With heading semantics",
+    "Truncate expansion"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  RhUiCheckCircleFillIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ExpandableSection } from '@patternfly/react-core';\n\nexport const ExpandableSectionBasic: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {\n    setIsExpanded(isExpanded);\n  };\n\n  return (\n    <ExpandableSection\n      toggleText={isExpanded ? 'Show less basic example content' : 'Show more basic example content'}\n      onToggle={onToggle}\n      isExpanded={isExpanded}\n    >\n      This content is visible only when the component is expanded.\n    </ExpandableSection>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Uncontrolled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ExpandableSection } from '@patternfly/react-core';\n\nexport const ExpandableSectionUncontrolled: React.FunctionComponent = () => (\n  <ExpandableSection toggleText=\"Show more uncontrolled example content\">\n    This content is visible only when the component is expanded.\n  </ExpandableSection>\n);\n","title":"Uncontrolled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Uncontrolled with dynamic toggle text': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ExpandableSection } from '@patternfly/react-core';\n\nexport const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => (\n  <ExpandableSection\n    toggleTextExpanded=\"Show less uncontrolled dynamic toggle example content\"\n    toggleTextCollapsed=\"Show more uncontrolled dynamic toggle example content\"\n  >\n    This content is visible only when the component is expanded.\n  </ExpandableSection>\n);\n","title":"Uncontrolled with dynamic toggle text","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Uncontrolled with dynamic toggle content (function)': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ExpandableSection } from '@patternfly/react-core';\n\nexport const ExpandableSectionUncontrolledDynamicToggleFunction: React.FunctionComponent = () => (\n  <ExpandableSection\n    toggleContent={(isExpanded) =>\n      isExpanded\n        ? 'Show less uncontrolled dynamic toggle example content'\n        : 'Show more uncontrolled dynamic toggle example content'\n    }\n  >\n    This content is visible only when the component is expanded.\n  </ExpandableSection>\n);\n","title":"Uncontrolled with dynamic toggle content (function)","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`toggleContent`}
+        </code>
+        {` as a function to dynamically render different content based on the expanded state without managing state yourself.`}
+      </p>
+    </Example>,
+  'Detached': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';\n\nexport const ExpandableSectionDetached: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onToggle = (isExpanded: boolean) => {\n    setIsExpanded(isExpanded);\n  };\n\n  const contentId = 'detached-expandable-section-content';\n  const toggleId = 'detached-expandable-section-toggle';\n  return (\n    <Stack hasGutter>\n      <StackItem>\n        <ExpandableSection isExpanded={isExpanded} isDetached direction=\"up\" toggleId={toggleId} contentId={contentId}>\n          This content is visible only when the component is expanded.\n        </ExpandableSection>\n      </StackItem>\n      <StackItem>\n        <ExpandableSectionToggle\n          isExpanded={isExpanded}\n          onToggle={onToggle}\n          toggleId={toggleId}\n          contentId={contentId}\n          direction=\"up\"\n        >\n          {isExpanded ? 'Show less detached example content' : 'Show more detached example content'}\n        </ExpandableSectionToggle>\n      </StackItem>\n    </Stack>\n  );\n};\n","title":"Detached","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When passing the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isDetached`}
+        </code>
+        {` property into `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ExpandableSection>`}
+        </code>
+        {`, you must also manually pass in the same `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`toggleId`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`contentId`}
+        </code>
+        {` properties to both `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ExpandableSection>`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ExpandableSectionToggle>`}
+        </code>
+        {`. This will link the content to the toggle via ARIA attributes.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By default animations will not be enabled for a detached `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ExpandableSection>`}
+        </code>
+        {`. You must manually pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`direction`}
+        </code>
+        {` property with an appropriate value based on where the expandable content is rendered. If the expandable content is above the expandable toggle, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`direction="up"`}
+        </code>
+        {` must be passed like in this example.`}
+      </p>
+    </Example>,
+  'Disclosure variation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ExpandableSection } from '@patternfly/react-core';\n\nexport const ExpandableSectionDisclosure: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {\n    setIsExpanded(isExpanded);\n  };\n\n  return (\n    <ExpandableSection\n      toggleText={\n        isExpanded ? 'Show less disclosure variation example content' : 'Show more disclosure variation example content'\n      }\n      onToggle={onToggle}\n      isExpanded={isExpanded}\n      displaySize=\"lg\"\n      isWidthLimited\n    >\n      This content is visible only when the component is expanded.\n    </ExpandableSection>\n  );\n};\n","title":"Disclosure variation","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can pass in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`displaySize="lg"`}
+        </code>
+        {` property for a disclosure variation styling.`}
+      </p>
+    </Example>,
+  'Indented expandable content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { FormEvent, useState } from 'react';\nimport { ExpandableSection, Checkbox } from '@patternfly/react-core';\n\nexport const ExpandableSectionIndented: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n  const [isDisplayLgChecked, setIsDisplayLgChecked] = useState(false);\n\n  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {\n    setIsExpanded(isExpanded);\n  };\n\n  const onDisplaySizeCheck = (_event: FormEvent<HTMLInputElement>, checked: boolean) => setIsDisplayLgChecked(checked);\n\n  return (\n    <>\n      <Checkbox\n        id=\"displaySize-checkbox\"\n        isChecked={isDisplayLgChecked}\n        label='displaySize=\"lg\"'\n        onChange={onDisplaySizeCheck}\n      />\n      <br />\n      <ExpandableSection\n        toggleText={isExpanded ? 'Show less indented example content' : 'Show more indented example content'}\n        onToggle={onToggle}\n        isExpanded={isExpanded}\n        isIndented\n        displaySize={isDisplayLgChecked ? 'lg' : 'default'}\n      >\n        This content is visible only when the component is expanded.\n      </ExpandableSection>\n    </>\n  );\n};\n","title":"Indented expandable content","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can indent the expandable content by passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isIndented`}
+        </code>
+        {` property. This will not affect the expandable toggle.`}
+      </p>
+    </Example>,
+  'With custom toggle content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ExpandableSection, Badge, Stack, StackItem } from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\n\nexport const ExpandableSectionCustomToggle: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {\n    setIsExpanded(isExpanded);\n  };\n\n  return (\n    <Stack hasGutter>\n      <StackItem>\n        <h3>Custom Toggle Content</h3>\n        <p>You can use custom content such as icons and badges in the toggle:</p>\n        <ExpandableSection\n          toggleContent={\n            <div>\n              <span>You can also use icons </span>\n              <RhUiCheckCircleFillIcon />\n              <span> or badges </span>\n              <Badge isRead={true}>4</Badge>\n              <span> !</span>\n            </div>\n          }\n          onToggle={onToggle}\n          isExpanded={isExpanded}\n        >\n          This content is visible only when the component is expanded.\n        </ExpandableSection>\n      </StackItem>\n\n      <StackItem>\n        <h3>Accessibility Note</h3>\n        <p>\n          <strong>Important:</strong> If you need the toggle text to function as a heading in the document structure, do\n          NOT put heading elements (h1-h6) inside the <code>toggleContent</code> prop, as this creates invalid HTML\n          structure. Instead, use the <code>toggleWrapper</code> prop.\n        </p>\n      </StackItem>\n    </Stack>\n  );\n};\n","title":"With custom toggle content","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`toggleContent`}
+        </code>
+        {` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.`}
+      </p>
+    </Example>,
+  'With heading semantics': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState, MouseEvent } from 'react';\nimport { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\n\nexport const ExpandableSectionWithHeading = () => {\n  const [isExpanded1, setIsExpanded1] = useState(false);\n  const [isExpanded2, setIsExpanded2] = useState(false);\n  const [isExpandedDetached, setIsExpandedDetached] = useState(false);\n\n  const onToggle1 = (_event: MouseEvent, isExpanded: boolean) => {\n    setIsExpanded1(isExpanded);\n  };\n\n  const onToggle2 = (_event: MouseEvent, isExpanded: boolean) => {\n    setIsExpanded2(isExpanded);\n  };\n\n  const onToggleDetached = (isExpanded: boolean) => {\n    setIsExpandedDetached(isExpanded);\n  };\n\n  return (\n    <Stack hasGutter>\n      <StackItem>\n        <h4>Document with Expandable Sections</h4>\n        <p>This demonstrates how to use expandable sections with proper heading semantics.</p>\n\n        {/* Using toggleWrapper prop for proper heading semantics */}\n        <ExpandableSection\n          toggleWrapper=\"h5\"\n          toggleText=\"Toggle as a heading\"\n          onToggle={onToggle1}\n          isExpanded={isExpanded1}\n        >\n          <p>\n            This content is visible only when the component is expanded. The toggle text above functions as a proper\n            heading in the document structure, which is important for screen readers and other assistive technologies.\n          </p>\n          <p>\n            When using the <code>toggleWrapper</code> prop with heading elements (h1-h6), the button is rendered inside\n            the heading element, maintaining proper semantic structure.\n          </p>\n        </ExpandableSection>\n      </StackItem>\n\n      <StackItem>\n        <h4>Detached Variant with Heading</h4>\n        <p>You can also use the detached variant with heading semantics:</p>\n\n        <ExpandableSectionToggle\n          toggleWrapper=\"h5\"\n          toggleId=\"detached-heading-toggle\"\n          contentId=\"detached-heading-content\"\n          isExpanded={isExpandedDetached}\n          onToggle={onToggleDetached}\n        >\n          Detached Toggle with Heading\n        </ExpandableSectionToggle>\n\n        <ExpandableSection\n          isDetached\n          toggleId=\"detached-heading-toggle\"\n          contentId=\"detached-heading-content\"\n          isExpanded={isExpandedDetached}\n        >\n          <p>This is detached content that can be positioned anywhere in the DOM.</p>\n        </ExpandableSection>\n      </StackItem>\n\n      <StackItem>\n        <h4>Custom Content with Heading</h4>\n        <p>You can also use custom content within heading wrappers:</p>\n\n        <ExpandableSection\n          toggleWrapper=\"h5\"\n          toggleContent={\n            <span>\n              <RhUiCheckCircleFillIcon /> Custom Heading Content with Icon\n            </span>\n          }\n          onToggle={onToggle2}\n          isExpanded={isExpanded2}\n        >\n          <p>This expandable section uses custom content with an icon inside a heading wrapper.</p>\n        </ExpandableSection>\n      </StackItem>\n    </Stack>\n  );\n};\n","title":"With heading semantics","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When the toggle text should function as a heading in the document structure, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`toggleWrapper`}
+        </code>
+        {` prop to specify a heading element (h1-h6). This ensures proper semantic structure for screen readers and other assistive technologies. The component automatically uses a native button element when heading wrappers are used, allowing the heading styles to display properly.`}
+      </p>
+    </Example>,
+  'Truncate expansion': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-core';\n\nexport const ExpandableSectionTruncateExpansion: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {\n    setIsExpanded(isExpanded);\n  };\n\n  return (\n    <ExpandableSection\n      variant={ExpandableSectionVariant.truncate}\n      toggleText={isExpanded ? 'Show less truncated content' : 'Show more truncated content'}\n      onToggle={onToggle}\n      isExpanded={isExpanded}\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.\n      Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient\n      montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,\n      eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,\n      tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.\n      Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante\n      commodo tincidunt. Integer tincidunt at ipsum non aliquet.\n    </ExpandableSection>\n  );\n};\n","title":"Truncate expansion","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By passing in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant="truncate"`}
+        </code>
+        {`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`truncateMaxLines`}
+        </code>
+        {` prop.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Uncontrolled"])}
+    {React.createElement(pageData.examples["Uncontrolled with dynamic toggle text"])}
+    {React.createElement(pageData.examples["Uncontrolled with dynamic toggle content (function)"])}
+    {React.createElement(pageData.examples["Detached"])}
+    {React.createElement(pageData.examples["Disclosure variation"])}
+    {React.createElement(pageData.examples["Indented expandable content"])}
+    {React.createElement(pageData.examples["With custom toggle content"])}
+    {React.createElement(pageData.examples["With heading semantics"])}
+    {React.createElement(pageData.examples["Truncate expansion"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsExpandableSectionReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/file-upload/multiple-file-upload/react-demos.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useEffect, useState } from 'react';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+const pageData = {
+  "id": "Multiple file upload",
+  "section": "components",
+  "subsection": "file-upload",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/file-upload/multiple-file-upload/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/MultipleFileUploadDemos.md",
+  "relPath": "packages/react-core/src/demos/MultipleFileUploadDemos.md",
+  "examples": [
+    "Rejected file handling"
+  ]
+};
+pageData.liveContext = {
+  useEffect,
+  useState,
+  ModalDeprecated,
+  ModalVariantDeprecated,
+  UploadIcon
+};
+pageData.examples = {
+  'Rejected file handling': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { FileRejection } from 'react-dropzone';\nimport {\n  MultipleFileUpload,\n  MultipleFileUploadMain,\n  MultipleFileUploadStatus,\n  MultipleFileUploadStatusItem,\n  Checkbox,\n  DropEvent,\n  Modal,\n  ModalHeader,\n  ModalBody\n} from '@patternfly/react-core';\nimport UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';\n\ninterface readFile {\n  fileName: string;\n  data?: string;\n  loadResult?: 'danger' | 'success';\n  loadError?: DOMException;\n}\n\nexport const MultipleFileUploadBasic: React.FunctionComponent = () => {\n  const [isHorizontal, setIsHorizontal] = useState(false);\n  const [currentFiles, setCurrentFiles] = useState<File[]>([]);\n  const [readFileData, setReadFileData] = useState<readFile[]>([]);\n  const [showStatus, setShowStatus] = useState(false);\n  const [statusIcon, setStatusIcon] = useState('inProgress');\n  const [modalText, setModalText] = useState('');\n\n  // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed\n  if (!showStatus && currentFiles.length > 0) {\n    setShowStatus(true);\n  }\n\n  // determine the icon that should be shown for the overall status list\n  useEffect(() => {\n    if (readFileData.length < currentFiles.length) {\n      setStatusIcon('inProgress');\n    } else if (readFileData.every((file) => file.loadResult === 'success')) {\n      setStatusIcon('success');\n    } else {\n      setStatusIcon('danger');\n    }\n  }, [readFileData, currentFiles]);\n\n  // remove files from both state arrays based on their name\n  const removeFiles = (namesOfFilesToRemove: string[]) => {\n    const newCurrentFiles = currentFiles.filter(\n      (currentFile) => !namesOfFilesToRemove.some((fileName) => fileName === currentFile.name)\n    );\n\n    setCurrentFiles(newCurrentFiles);\n\n    const newReadFiles = readFileData.filter(\n      (readFile) => !namesOfFilesToRemove.some((fileName) => fileName === readFile.fileName)\n    );\n\n    setReadFileData(newReadFiles);\n  };\n\n  // callback that will be called by the react dropzone with the newly dropped file objects\n  const handleFileDrop = (_event: DropEvent, droppedFiles: File[]) => {\n    // identify what, if any, files are re-uploads of already uploaded files\n    const currentFileNames = currentFiles.map((file) => file.name);\n    const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name));\n\n    /** this promise chain is needed because if the file removal is done at the same time as the file adding react\n     * won't realize that the status items for the re-uploaded files needs to be re-rendered */\n    Promise.resolve()\n      .then(() => removeFiles(reUploads.map((file) => file.name)))\n      .then(() => setCurrentFiles((prevFiles) => [...prevFiles, ...droppedFiles]));\n  };\n\n  // callback called by the status item when a file is successfully read with the built-in file reader\n  const handleReadSuccess = (data: string, file: File) => {\n    setReadFileData((prevReadFiles) => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);\n  };\n\n  // callback called by the status item when a file encounters an error while being read with the built-in file reader\n  const handleReadFail = (error: DOMException, file: File) => {\n    setReadFileData((prevReadFiles) => [\n      ...prevReadFiles,\n      { loadError: error, fileName: file.name, loadResult: 'danger' }\n    ]);\n  };\n\n  // dropzone prop that communicates to the user that files they've attempted to upload are not an appropriate type\n  const handleDropRejected = (fileRejections: FileRejection[]) => {\n    if (fileRejections.length === 1) {\n      setModalText(`${fileRejections[0].file.name} is not an accepted file type`);\n    } else {\n      const rejectedMessages = fileRejections.reduce(\n        (acc, fileRejection) => (acc += `${fileRejection.file.name}, `),\n        ''\n      );\n      setModalText(`${rejectedMessages}are not accepted file types`);\n    }\n  };\n\n  const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length;\n\n  return (\n    <>\n      <MultipleFileUpload\n        onFileDrop={handleFileDrop}\n        dropzoneProps={{\n          accept: {\n            'image/jpeg': ['.jpg', '.jpeg'],\n            'application/msword': ['.doc'],\n            'application/pdf': ['.pdf'],\n            'image/png': ['.png']\n          },\n          onDropRejected: handleDropRejected\n        }}\n        isHorizontal={isHorizontal}\n      >\n        <MultipleFileUploadMain\n          titleIcon={<UploadIcon />}\n          titleText=\"Drag and drop files here\"\n          titleTextSeparator=\"or\"\n          infoText=\"Accepted file types: JPEG, Doc, PDF, PNG\"\n        />\n        {showStatus && (\n          <MultipleFileUploadStatus\n            statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}\n            statusToggleIcon={statusIcon}\n          >\n            {currentFiles.map((file) => (\n              <MultipleFileUploadStatusItem\n                file={file}\n                key={file.name}\n                onClearClick={() => removeFiles([file.name])}\n                onReadSuccess={handleReadSuccess}\n                onReadFail={handleReadFail}\n              />\n            ))}\n          </MultipleFileUploadStatus>\n        )}\n        <Modal isOpen={!!modalText} aria-label=\"unsupported file upload attempted\" onClose={() => setModalText('')}>\n          <ModalHeader title=\"Unsupported file\" titleIconVariant=\"warning\" />\n          <ModalBody>{modalText}</ModalBody>\n        </Modal>\n      </MultipleFileUpload>\n      <Checkbox\n        id=\"horizontal-checkbox\"\n        label=\"Show as horizontal\"\n        isChecked={isHorizontal}\n        onChange={() => setIsHorizontal(!isHorizontal)}\n      />\n    </>\n  );\n};\n","title":"Rejected file handling","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demo shows how to add a modal to alert users that the file(s) they attempted to drop was of a non-acceptable type.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Rejected file handling"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsFileUploadMultipleFileUploadReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;