npm - @patternfly/patternfly-doc-core - Versions diffs - 1.11.1 → 1.12.1 - Mend

@patternfly/patternfly-doc-core 1.11.1 → 1.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (461) hide show

package/dist/docs/components/modal/react-deprecated/index.html ADDED Viewed

@@ -0,0 +1,117 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="DLaCU" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-247"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="Z2uDFLK" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;:true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-83"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-248"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-249"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-83"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/modal/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/modal/react-deprecated"> React deprecated </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1528" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1529" data-pf-content="true" class="pf-v6-c-content--h3">Basic modals</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1550" data-pf-content="true" class="pf-v6-c-content--p">Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the <code>isOpen</code> property. To execute a callback when a modal is closed, use the <code>onClose</code> property.</p>
+<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="sS6mS" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalBasic: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle} ouiaId=\&quot;ShowBasicModal\&quot;&gt;\n        Show basic modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        title=\&quot;Basic modal\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n        ouiaId=\&quot;BasicModal\&quot;\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1530" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable modals</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1551" data-pf-content="true" class="pf-v6-c-content--p">To enable keyboard-accessible scrolling of a modal’s content, pass <code>tabIndex={0}</code> to the <code>&lt;Modal&gt;</code>.</p>
+<astro-island uid="1185nh" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalWithOverflowingContent: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        bodyAriaLabel=\&quot;Scrollable modal content\&quot;\n        tabIndex={0}\n        variant={ModalVariantDeprecated.small}\n        title=\&quot;Modal with overflowing content\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae tempus.\n        Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat maecenas\n        volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi tristique\n        senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum consectetur\n        libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras sed felis eget\n        velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus ultricies tristique\n        nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Lacinia quis\n        vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget aliquet.\n        &lt;br /&gt;\n        &lt;br /&gt;\n        Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio\n        morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae. Quis\n        varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus. Sollicitudin\n        tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim sit amet\n        venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar elementum\n        integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis enim ut tellus\n        elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed enim. Non diam\n        phasellus vestibulum lorem sed risus ultricies tristique nulla.\n        &lt;br /&gt;\n        &lt;br /&gt;\n        Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed\n        nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras\n        fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices\n        sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.\n        Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.\n        &lt;br /&gt;\n        &lt;br /&gt;\n        Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim\n        lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna\n        etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae\n        proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi morbi\n        tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at varius vel\n        pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique magna sit amet\n        purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum morbi. Mauris a diam\n        maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1531" data-pf-content="true" class="pf-v6-c-content--h3">With a static description</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1552" data-pf-content="true" class="pf-v6-c-content--p">To provide additional information about a modal, use the <code>description</code> property. Descriptions are static and do not scroll with other modal content.</p>
+<astro-island uid="27r8t5" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalWithDescription: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal with description\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        title=\&quot;Modal with description\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        description=\&quot;A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.\&quot;\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1532" data-pf-content="true" class="pf-v6-c-content--h3">Top aligned</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1553" data-pf-content="true" class="pf-v6-c-content--p">To override a modal’s default center alignment, use the <code>position</code> property. In this example, <code>position</code> is set to “top”, which moves the modal to the top of the screen.</p>
+<astro-island uid="Z1MmjTm" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalTopAligned: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show top aligned modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        position=\&quot;top\&quot;\n        title=\&quot;Top aligned modal\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1533" data-pf-content="true" class="pf-v6-c-content--h3">Small modal</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1554" data-pf-content="true" class="pf-v6-c-content--p">To adjust the size of a modal, use the <code>variant</code> property. Modal variants include “small”, “medium”, “large”, and “default”.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1555" data-pf-content="true" class="pf-v6-c-content--p">The following example displays a “small” modal by passing in <code>variant={ModalVariant.small}</code>.</p>
+<astro-island uid="Box1M" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalSmall: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show small modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        variant={ModalVariantDeprecated.small}\n        title=\&quot;Small modal\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1534" data-pf-content="true" class="pf-v6-c-content--h3">Medium modal</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1556" data-pf-content="true" class="pf-v6-c-content--p">The following example displays a “medium” modal by passing in <code>variant={ModalVariant.medium}</code>.</p>
+<astro-island uid="unjiB" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalMedium: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show medium modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        variant={ModalVariantDeprecated.medium}\n        title=\&quot;Medium modal\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1535" data-pf-content="true" class="pf-v6-c-content--h3">Large modal</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1557" data-pf-content="true" class="pf-v6-c-content--p">The following example displays a “large” modal by passing in <code>variant={ModalVariant.large}</code>.</p>
+<astro-island uid="ZQPxbW" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalLarge: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show large modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        variant={ModalVariantDeprecated.large}\n        title=\&quot;Large modal\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1536" data-pf-content="true" class="pf-v6-c-content--h3">Custom width</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1558" data-pf-content="true" class="pf-v6-c-content--p">To choose a specific width for a modal, use the <code>width</code> property. The following example has a <code>width</code> of “50%”.</p>
+<astro-island uid="1kH7HF" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalCustomWidth: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom width modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        width=\&quot;50%\&quot;\n        title=\&quot;Custom width modal\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1537" data-pf-content="true" class="pf-v6-c-content--h3">Custom header and footer</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1559" data-pf-content="true" class="pf-v6-c-content--p">To add a custom header and footer to a modal, set the <code>header</code> and <code>footer</code> properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.</p>
+<astro-island uid="1vKUac" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Title, TitleSizes } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\nimport WarningTriangleIcon from &#39;@patternfly/react-icons/dist/esm/icons/warning-triangle-icon&#39;;\nimport spacing from &#39;@patternfly/react-styles/css/utilities/Spacing/spacing&#39;;\n\nexport const ModalCustomHeaderFooter: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  const header = (\n    &lt;Fragment&gt;\n      &lt;Title id=\&quot;modal-custom-header-label\&quot; headingLevel=\&quot;h1\&quot; size={TitleSizes[&#39;2xl&#39;]}&gt;\n        Custom header/footer modal\n      &lt;/Title&gt;\n      &lt;p className={spacing.ptSm}&gt;Allows for custom content in the header and/or footer by passing components.&lt;/p&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const footer = (\n    &lt;Title headingLevel=\&quot;h4\&quot; size={TitleSizes.md}&gt;\n      &lt;WarningTriangleIcon /&gt;\n      &lt;span className={spacing.plSm}&gt;Custom modal footer.&lt;/span&gt;\n    &lt;/Title&gt;\n  );\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom header/footer modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        variant={ModalVariantDeprecated.large}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        header={header}\n        aria-labelledby=\&quot;modal-custom-header-label\&quot;\n        aria-describedby=\&quot;modal-custom-header-description\&quot;\n        footer={footer}\n      &gt;\n        &lt;span id=\&quot;modal-custom-header-description\&quot;&gt;\n          When static text describing the modal is available outside of the modal header, it can be given an ID that is\n          then passed in as the modal&#39;s aria-describedby value.\n        &lt;/span&gt;\n        &lt;br /&gt;\n        &lt;br /&gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1538" data-pf-content="true" class="pf-v6-c-content--h3">No header or footer</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1560" data-pf-content="true" class="pf-v6-c-content--p">To exclusively present information in a modal, remove the <code>header</code> and/or <code>footer</code>.</p>
+<astro-island uid="ZQiEXA" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalNoHeaderFooter: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show no header/footer modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        variant={ModalVariantDeprecated.large}\n        isOpen={isModalOpen}\n        aria-label=\&quot;No header/footer modal\&quot;\n        aria-describedby=\&quot;modal-no-header-description\&quot;\n        onClose={handleModalToggle}\n      &gt;\n        &lt;span id=\&quot;modal-no-header-description\&quot;&gt;\n          When static text describing the modal is available outside of the modal header, it can be given an ID that is\n          then passed in as the modal&#39;s aria-describedby value.\n        &lt;/span&gt;\n        &lt;br /&gt;\n        &lt;br /&gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1539" data-pf-content="true" class="pf-v6-c-content--h3">Title icon</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1561" data-pf-content="true" class="pf-v6-c-content--p">To add an icon before a modal’s title, use the <code>titleIconVariant</code>, which can be set to one of the predefined variants — “success”, “danger”, “warning”, “info”, and “custom” — or to an imported custom icon. The following example uses a “warning” variant.</p>
+<astro-island uid="ZXbnQW" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalTitleIcon: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show title icon modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        title=\&quot;Title icon modal\&quot;\n        titleIconVariant=\&quot;warning\&quot;\n        isOpen={isModalOpen}\n        aria-describedby=\&quot;modal-title-icon-description\&quot;\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        &lt;span id=\&quot;modal-title-icon-description\&quot;&gt;\n          When static text describing the modal is available outside of the modal header, it can be given an ID that is\n          then passed in as the modal&#39;s aria-describedby value.\n        &lt;/span&gt;\n        &lt;br /&gt;\n        &lt;br /&gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1540" data-pf-content="true" class="pf-v6-c-content--h3">Custom title icon</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1562" data-pf-content="true" class="pf-v6-c-content--p">To add a custom icon before a modal’s title, set <code>titleIconVariant</code> to an imported custom icon. The following example imports and uses a bullhorn icon.</p>
+<astro-island uid="Z7wagS" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\nimport BullhornIcon from &#39;@patternfly/react-icons/dist/esm/icons/bullhorn-icon&#39;;\n\nexport const ModalCustomTitleIcon: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom title icon modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        title=\&quot;Custom title icon modal\&quot;\n        titleIconVariant={BullhornIcon}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-describedby=\&quot;modal-custom-icon-description\&quot;\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        &lt;span id=\&quot;modal-custom-icon-description\&quot;&gt;\n          When static text describing the modal is available outside of the modal header, it can be given an ID that is\n          then passed in as the modal&#39;s aria-describedby value.\n        &lt;/span&gt;\n        &lt;br /&gt;\n        &lt;br /&gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1541" data-pf-content="true" class="pf-v6-c-content--h3">With wizard</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1565" data-pf-content="true" class="pf-v6-c-content--p">To guide users through a series of steps in a modal, you can add a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1542" data-pf-content="true" class="pf-v6-c-content--a">wizard</a> to a modal. To configure the <code>&lt;Wizard&gt;</code>, pass an array that contains a “name” and “component” value for each step into the <code>steps</code> property.</p>
+<astro-island uid="1x3fTh" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Wizard, WizardHeader, WizardStep } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalWithWizard: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  const handleWizardToggle = () =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  const numberedSteps = [1, 2, 3, 4].map((stepNumber) =&gt; (\n    &lt;WizardStep name={`Step ${stepNumber}`} key={`Step ${stepNumber}`} id={`with-wizard-step-${stepNumber}`}&gt;\n      {`Step ${stepNumber}`}\n    &lt;/WizardStep&gt;\n  ));\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show wizard modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        variant={ModalVariantDeprecated.large}\n        showClose={false}\n        isOpen={isModalOpen}\n        aria-labelledby=\&quot;modal-wizard-label\&quot;\n        aria-describedby=\&quot;modal-wizard-description\&quot;\n        onClose={handleModalToggle}\n        hasNoBodyWrapper\n      &gt;\n        &lt;Wizard\n          height={400}\n          header={\n            &lt;WizardHeader\n              title=\&quot;Wizard modal\&quot;\n              titleId=\&quot;modal-wizard-label\&quot;\n              description=\&quot;This is a wizard inside of a modal.\&quot;\n              onClose={handleWizardToggle}\n              closeButtonAriaLabel=\&quot;Close wizard\&quot;\n            /&gt;\n          }\n          onClose={handleWizardToggle}\n        &gt;\n          {numberedSteps}\n          &lt;WizardStep\n            name=\&quot;Review\&quot;\n            id=\&quot;with-wizard-review-step\&quot;\n            footer={{ nextButtonText: &#39;Finish&#39;, onNext: handleWizardToggle }}\n          &gt;\n            Review step\n          &lt;/WizardStep&gt;\n        &lt;/Wizard&gt;\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1543" data-pf-content="true" class="pf-v6-c-content--h3">With dropdown</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1566" data-pf-content="true" class="pf-v6-c-content--p">To present a menu of actions or links to a user, you can add a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1544" data-pf-content="true" class="pf-v6-c-content--a">dropdown</a> to a modal. To allow the dropdown to visually break out of the modal container, set the <code>menuAppendTo</code> property to “parent”. Handle the modal’s closing behavior by listening to the <code>onEscapePress</code> callback on the <code>&lt;Modal&gt;</code> component. This allows the “escape” key to collapse the dropdown without closing the entire modal.</p>
+<astro-island uid="Z15xLJl" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Dropdown, DropdownList, DropdownItem, MenuToggle, MenuToggleElement } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalWithDropdown: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n    setIsDropdownOpen(false);\n  };\n\n  const handleDropdownToggle = () =&gt; {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onSelect = () =&gt; {\n    setIsDropdownOpen(!isDropdownOpen);\n    onFocus();\n  };\n\n  const onFocus = () =&gt; {\n    const element = document.getElementById(&#39;modal-dropdown-toggle&#39;);\n    (element as HTMLElement).focus();\n  };\n\n  const onEscapePress = (event: KeyboardEvent) =&gt; {\n    if (isDropdownOpen) {\n      setIsDropdownOpen(!isDropdownOpen);\n      onFocus();\n    } else {\n      handleModalToggle(event);\n    }\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show dropdown modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        title=\&quot;Dropdown modal\&quot;\n        variant={ModalVariantDeprecated.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n        onEscapePress={onEscapePress}\n      &gt;\n        &lt;div&gt;\n          Set the dropdown &lt;strong&gt;menuAppendTo&lt;/strong&gt; prop to &lt;em&gt;parent&lt;/em&gt; in order to allow the dropdown menu\n          break out of the modal container. You&#39;ll also want to handle closing of the modal yourself, by listening to\n          the &lt;strong&gt;onEscapePress&lt;/strong&gt; callback on the Modal component, so you can close the Dropdown first if\n          it&#39;s open without closing the entire modal.\n        &lt;/div&gt;\n        &lt;br /&gt;\n        &lt;div&gt;\n          &lt;Dropdown\n            isOpen={isDropdownOpen}\n            onSelect={onSelect}\n            onOpenChange={(isOpen: boolean) =&gt; setIsDropdownOpen(isOpen)}\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}&gt;\n                Dropdown\n              &lt;/MenuToggle&gt;\n            )}\n          &gt;\n            &lt;DropdownList&gt;\n              &lt;DropdownItem value={0} key=\&quot;action\&quot;&gt;\n                Action\n              &lt;/DropdownItem&gt;\n              &lt;DropdownItem\n                value={1}\n                key=\&quot;link\&quot;\n                to=\&quot;#default-link2\&quot;\n                // Prevent the default onClick functionality for example purposes\n                onClick={(ev: any) =&gt; ev.preventDefault()}\n              &gt;\n                Link\n              &lt;/DropdownItem&gt;\n              &lt;DropdownItem value={2} isDisabled key=\&quot;disabled action\&quot;&gt;\n                Disabled Action\n              &lt;/DropdownItem&gt;\n              &lt;DropdownItem value={3} isDisabled key=\&quot;disabled link\&quot; to=\&quot;#default-link4\&quot;&gt;\n                Disabled Link\n              &lt;/DropdownItem&gt;\n            &lt;/DropdownList&gt;\n          &lt;/Dropdown&gt;\n        &lt;/div&gt;\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1545" data-pf-content="true" class="pf-v6-c-content--h3">With help</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1567" data-pf-content="true" class="pf-v6-c-content--p">To help simplify and explain complex models, add a help <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1546" data-pf-content="true" class="pf-v6-c-content--a">popover</a>. Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.</p>
+<astro-island uid="VaATc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Popover } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nimport HelpIcon from &#39;@patternfly/react-icons/dist/esm/icons/help-icon&#39;;\n\nexport const ModalWithHelp: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show with help modal\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        variant=\&quot;small\&quot;\n        title=\&quot;With help modal\&quot;\n        help={\n          &lt;Popover\n            headerContent={&lt;div&gt;Help Popover&lt;/div&gt;}\n            bodyContent={\n              &lt;div&gt;\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n              &lt;/div&gt;\n            }\n            footerContent=\&quot;Popover Footer\&quot;\n          &gt;\n            &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Help\&quot; icon={&lt;HelpIcon /&gt;} /&gt;\n          &lt;/Popover&gt;\n        }\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1547" data-pf-content="true" class="pf-v6-c-content--h3">With form</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1568" data-pf-content="true" class="pf-v6-c-content--p">To collect user input within a modal, you can add a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1548" data-pf-content="true" class="pf-v6-c-content--a">form</a>.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1563" data-pf-content="true" class="pf-v6-c-content--p">To submit the form from a button in the modal’s footer (outside of the <code>&lt;Form&gt;</code>), set the button’s <code>form</code> property equal to the form’s id.</p>
+<astro-island uid="Z8N4bY" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport { Button, Form, FormGroup, FormGroupLabelHelp, Popover, TextInput } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalWithForm: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setModalOpen] = useState(false);\n  const [nameValue, setNameValue] = useState(&#39;&#39;);\n  const [emailValue, setEmailValue] = useState(&#39;&#39;);\n  const [addressValue, setAddressValue] = useState(&#39;&#39;);\n  const nameLabelHelpRef = useRef(null);\n  const emailLabelHelpRef = useRef(null);\n  const addressLabelHelpRef = useRef(null);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setModalOpen(!isModalOpen);\n  };\n\n  const handleNameInputChange = (_event, value: string) =&gt; {\n    setNameValue(value);\n  };\n\n  const handleEmailInputChange = (_event, value: string) =&gt; {\n    setEmailValue(value);\n  };\n  const handleAddressInputChange = (_event, value: string) =&gt; {\n    setAddressValue(value);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal with form\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        variant={ModalVariantDeprecated.small}\n        title=\&quot;Create account\&quot;\n        description=\&quot;Enter your personal information below to create an account.\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button key=\&quot;create\&quot; variant=\&quot;primary\&quot; form=\&quot;modal-with-form-form\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        &lt;Form id=\&quot;modal-with-form-form\&quot;&gt;\n          &lt;FormGroup\n            label=\&quot;Name\&quot;\n            labelHelp={\n              &lt;Popover\n                triggerRef={nameLabelHelpRef}\n                headerContent={\n                  &lt;div&gt;\n                    The\n                    &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      name\n                    &lt;/a&gt;\n                    of a\n                    &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      Person\n                    &lt;/a&gt;\n                  &lt;/div&gt;\n                }\n                bodyContent={\n                  &lt;div&gt;\n                    Often composed of\n                    &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      givenName\n                    &lt;/a&gt;\n                    and\n                    &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      familyName\n                    &lt;/a&gt;\n                    .\n                  &lt;/div&gt;\n                }\n              &gt;\n                &lt;FormGroupLabelHelp ref={nameLabelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n              &lt;/Popover&gt;\n            }\n            isRequired\n            fieldId=\&quot;modal-with-form-form-name\&quot;\n          &gt;\n            &lt;TextInput\n              isRequired\n              type=\&quot;email\&quot;\n              id=\&quot;modal-with-form-form-name\&quot;\n              name=\&quot;modal-with-form-form-name\&quot;\n              value={nameValue}\n              onChange={handleNameInputChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup\n            label=\&quot;E-mail\&quot;\n            labelHelp={\n              &lt;Popover\n                triggerRef={emailLabelHelpRef}\n                headerContent={\n                  &lt;div&gt;\n                    The\n                    &lt;a href=\&quot;https://schema.org/email\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      e-mail\n                    &lt;/a&gt;\n                    of a\n                    &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      person\n                    &lt;/a&gt;\n                  &lt;/div&gt;\n                }\n                bodyContent={\n                  &lt;div&gt;\n                    Valid\n                    &lt;a href=\&quot;https://schema.org/email\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      e-mail\n                    &lt;/a&gt;\n                    address.\n                  &lt;/div&gt;\n                }\n              &gt;\n                &lt;FormGroupLabelHelp ref={emailLabelHelpRef} aria-label=\&quot;More info for e-mail field\&quot; /&gt;\n              &lt;/Popover&gt;\n            }\n            isRequired\n            fieldId=\&quot;modal-with-form-form-email\&quot;\n          &gt;\n            &lt;TextInput\n              isRequired\n              type=\&quot;email\&quot;\n              id=\&quot;modal-with-form-form-email\&quot;\n              name=\&quot;modal-with-form-form-email\&quot;\n              value={emailValue}\n              onChange={handleEmailInputChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n          &lt;FormGroup\n            label=\&quot;Address\&quot;\n            labelHelp={\n              &lt;Popover\n                triggerRef={addressLabelHelpRef}\n                headerContent={\n                  &lt;div&gt;\n                    The\n                    &lt;a href=\&quot;https://schema.org/address\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      address\n                    &lt;/a&gt;\n                    of a\n                    &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      person\n                    &lt;/a&gt;\n                  &lt;/div&gt;\n                }\n                bodyContent={\n                  &lt;div&gt;\n                    Valid\n                    &lt;a href=\&quot;https://schema.org/PostalAddress\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                      postal address.\n                    &lt;/a&gt;\n                  &lt;/div&gt;\n                }\n              &gt;\n                &lt;FormGroupLabelHelp ref={addressLabelHelpRef} aria-label=\&quot;More info for address field\&quot; /&gt;\n              &lt;/Popover&gt;\n            }\n            isRequired\n            fieldId=\&quot;modal-with-form-form-address\&quot;\n          &gt;\n            &lt;TextInput\n              isRequired\n              type=\&quot;email\&quot;\n              id=\&quot;modal-with-form-form-address\&quot;\n              name=\&quot;modal-with-form-form-address\&quot;\n              value={addressValue}\n              onChange={handleAddressInputChange}\n            /&gt;\n          &lt;/FormGroup&gt;\n        &lt;/Form&gt;\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1549" data-pf-content="true" class="pf-v6-c-content--h3">Custom focus</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1564" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>elementToFocus</code> property to customize which element inside the Modal receives focus when initially opened.</p>
+<astro-island uid="ZqvKa4" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Modal as ModalDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const ModalCustomFocus: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle} ouiaId=\&quot;ShowBasicModal\&quot;&gt;\n        Show modal with custom focus\n      &lt;/Button&gt;\n      &lt;ModalDeprecated\n        elementToFocus=\&quot;#modal-custom-focus-confirm-button\&quot;\n        title=\&quot;Modal with custom focus\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          &lt;Button id=\&quot;modal-custom-focus-confirm-button\&quot; key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;,\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        ]}\n      &gt;\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      &lt;/ModalDeprecated&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z11gUdU" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Modal&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/modal/react-deprecated/&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1527" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+CSS variables
+</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="DQSP6" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-modal-box&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>

package/dist/docs/components/multiple-file-upload/index.html ADDED Viewed

@@ -0,0 +1,84 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="frt69" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-379"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="Z2darSP" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;:true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-127"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-380"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-381"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-127"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/multiple-file-upload/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2340" data-pf-content="true" class="pf-v6-c-content--p">Multiple file upload is able to:</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2366" data-pf-content="true" class="pf-v6-c-content--ul">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2341" data-pf-content="true" class="pf-v6-c-content--li">Accept one or more files via browse or drag-and-drop</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2355" data-pf-content="true" class="pf-v6-c-content--li">Provide their data to you using file objects via the <code>onFileDrop</code> callback prop</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2342" data-pf-content="true" class="pf-v6-c-content--li">Read files as dataURLs, calling provided callbacks as needed when files start/finish being read, as well as when the read succeeds or fails</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2365" data-pf-content="true" class="pf-v6-c-content--li">Display (in real time) the upload progress/status of each file
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2364" data-pf-content="true" class="pf-v6-c-content--ul">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2343" data-pf-content="true" class="pf-v6-c-content--li">Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2356" data-pf-content="true" class="pf-v6-c-content--li">If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the <code>customFileHandler</code>, <code>fileName</code>, <code>fileSize</code>, <code>progressValue</code>, and <code>progressVariant</code> props exist to allow you to do that</li>
+</ul>
+</li>
+</ul>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2344" data-pf-content="true" class="pf-v6-c-content--h2">Restricting file size and type</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2362" data-pf-content="true" class="pf-v6-c-content--p">As with singular file upload, any <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2345" data-pf-content="true" class="pf-v6-c-content--a">props accepted by react-dropzone’s Dropzone component</a> can be passed as a dropzoneProps object in order to customize the behavior of the Dropzone, such as restricting the type of files allowed. The following examples will only accept the files they list as accepted. Note that file type determination is not reliable across platforms (see the note on react-dropzone’s docs about the accept prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2346" data-pf-content="true" class="pf-v6-c-content--h3">IMPORTANT: A note about security</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2347" data-pf-content="true" class="pf-v6-c-content--p">Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.</p>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2348" data-pf-content="true" class="pf-v6-c-content--h2">Composable structure</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2349" data-pf-content="true" class="pf-v6-c-content--p">File upload - multiple is designed in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2360" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span>&lt;MultipleFileUpload&gt;</span></span>
+<span class="line"><span>  &lt;MultipleFileUploadMain /&gt;</span></span>
+<span class="line"><span>  &lt;MultipleFileUploadStatus&gt;</span></span>
+<span class="line"><span>    &lt;MultipleFileUploadStatusItem /&gt;</span></span>
+<span class="line"><span>  &lt;/MultipleFileUploadStatus&gt;</span></span>
+<span class="line"><span>&lt;/MultipleFileUpload&gt;</span></span></code></pre>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2350" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2351" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2352" data-pf-content="true" class="pf-v6-c-content--p">The below example demonstrates a typical application of file upload - multiple, with a few tweaks from that typical application to enhance the convenience of the example.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2357" data-pf-content="true" class="pf-v6-c-content--p">The “Show as horizontal” checkbox can be used to easily toggle the <code>isHorizontal</code> prop, showing our available styling variations.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2358" data-pf-content="true" class="pf-v6-c-content--p">The “Demonstrate error reporting by forcing uploads to fail” checkbox shows how our <code>progressHelperText</code> prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.</p>
+<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1axQMT" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useState } from &#39;react&#39;;\nimport {\n  MultipleFileUpload,\n  MultipleFileUploadMain,\n  MultipleFileUploadStatus,\n  MultipleFileUploadStatusItem,\n  Checkbox,\n  HelperText,\n  HelperTextItem,\n  DropEvent\n} from &#39;@patternfly/react-core&#39;;\nimport UploadIcon from &#39;@patternfly/react-icons/dist/esm/icons/upload-icon&#39;;\n\ninterface readFile {\n  fileName: string;\n  data?: string;\n  loadResult?: &#39;danger&#39; | &#39;success&#39;;\n  loadError?: DOMException;\n}\n\nexport const MultipleFileUploadBasic: React.FunctionComponent = () =&gt; {\n  const [isHorizontal, setIsHorizontal] = useState(false);\n  const [fileUploadShouldFail, setFileUploadShouldFail] = useState(false);\n  const [currentFiles, setCurrentFiles] = useState&lt;File[]&gt;([]);\n  const [readFileData, setReadFileData] = useState&lt;readFile[]&gt;([]);\n  const [showStatus, setShowStatus] = useState(false);\n  const [statusIcon, setStatusIcon] = useState(&#39;inProgress&#39;);\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 &amp;&amp; currentFiles.length &gt; 0) {\n    setShowStatus(true);\n  }\n\n  // determine the icon that should be shown for the overall status list\n  useEffect(() =&gt; {\n    if (readFileData.length &lt; currentFiles.length) {\n      setStatusIcon(&#39;inProgress&#39;);\n    } else if (readFileData.every((file) =&gt; file.loadResult === &#39;success&#39;)) {\n      setStatusIcon(&#39;success&#39;);\n    } else {\n      setStatusIcon(&#39;danger&#39;);\n    }\n  }, [readFileData, currentFiles]);\n\n  // remove files from both state arrays based on their name\n  const removeFiles = (namesOfFilesToRemove: string[]) =&gt; {\n    const newCurrentFiles = currentFiles.filter(\n      (currentFile) =&gt; !namesOfFilesToRemove.some((fileName) =&gt; fileName === currentFile.name)\n    );\n\n    setCurrentFiles(newCurrentFiles);\n\n    const newReadFiles = readFileData.filter(\n      (readFile) =&gt; !namesOfFilesToRemove.some((fileName) =&gt; fileName === readFile.fileName)\n    );\n\n    setReadFileData(newReadFiles);\n  };\n\n  /** Forces uploaded files to become corrupted if \&quot;Demonstrate error reporting by forcing uploads to fail\&quot; is selected in the example,\n   * only used in this example for demonstration purposes */\n  const updateCurrentFiles = (files: File[]) =&gt; {\n    if (fileUploadShouldFail) {\n      const corruptedFiles = files.map((file) =&gt; ({ ...file, lastModified: &#39;foo&#39; as unknown as number }));\n\n      setCurrentFiles((prevFiles) =&gt; [...prevFiles, ...(corruptedFiles as any)]);\n    } else {\n      setCurrentFiles((prevFiles) =&gt; [...prevFiles, ...files]);\n    }\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[]) =&gt; {\n    // identify what, if any, files are re-uploads of already uploaded files\n    const currentFileNames = currentFiles.map((file) =&gt; file.name);\n    const reUploads = droppedFiles.filter((droppedFile) =&gt; 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&#39;t realize that the status items for the re-uploaded files needs to be re-rendered */\n    Promise.resolve()\n      .then(() =&gt; removeFiles(reUploads.map((file) =&gt; file.name)))\n      .then(() =&gt; updateCurrentFiles(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) =&gt; {\n    setReadFileData((prevReadFiles) =&gt; [...prevReadFiles, { data, fileName: file.name, loadResult: &#39;success&#39; }]);\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) =&gt; {\n    setReadFileData((prevReadFiles) =&gt; [\n      ...prevReadFiles,\n      { loadError: error, fileName: file.name, loadResult: &#39;danger&#39; }\n    ]);\n  };\n\n  // add helper text to a status item showing any error encountered during the file reading process\n  const createHelperText = (file: File) =&gt; {\n    const fileResult = readFileData.find((readFile) =&gt; readFile.fileName === file.name);\n    if (fileResult?.loadError) {\n      return (\n        &lt;HelperText isLiveRegion&gt;\n          &lt;HelperTextItem variant=\&quot;error\&quot;&gt;{fileResult.loadError.toString()}&lt;/HelperTextItem&gt;\n        &lt;/HelperText&gt;\n      );\n    }\n  };\n\n  const successfullyReadFileCount = readFileData.filter((fileData) =&gt; fileData.loadResult === &#39;success&#39;).length;\n\n  return (\n    &lt;&gt;\n      &lt;MultipleFileUpload\n        onFileDrop={handleFileDrop}\n        dropzoneProps={{\n          accept: {\n            &#39;image/jpeg&#39;: [&#39;.jpg&#39;, &#39;.jpeg&#39;],\n            &#39;application/msword&#39;: [&#39;.doc&#39;],\n            &#39;application/pdf&#39;: [&#39;.pdf&#39;],\n            &#39;image/png&#39;: [&#39;.png&#39;]\n          }\n        }}\n        isHorizontal={isHorizontal}\n      &gt;\n        &lt;MultipleFileUploadMain\n          titleIcon={&lt;UploadIcon /&gt;}\n          titleText=\&quot;Drag and drop files here\&quot;\n          titleTextSeparator=\&quot;or\&quot;\n          infoText=\&quot;Accepted file types: JPEG, Doc, PDF, PNG\&quot;\n        /&gt;\n        {showStatus &amp;&amp; (\n          &lt;MultipleFileUploadStatus\n            statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}\n            statusToggleIcon={statusIcon}\n            aria-label=\&quot;Current uploads\&quot;\n          &gt;\n            {currentFiles.map((file) =&gt; (\n              &lt;MultipleFileUploadStatusItem\n                file={file}\n                key={file.name}\n                onClearClick={() =&gt; removeFiles([file.name])}\n                onReadSuccess={handleReadSuccess}\n                onReadFail={handleReadFail}\n                progressHelperText={createHelperText(file)}\n              /&gt;\n            ))}\n          &lt;/MultipleFileUploadStatus&gt;\n        )}\n      &lt;/MultipleFileUpload&gt;\n      &lt;Checkbox\n        id=\&quot;horizontal-checkbox\&quot;\n        label=\&quot;Show as horizontal\&quot;\n        isChecked={isHorizontal}\n        onChange={() =&gt; setIsHorizontal(!isHorizontal)}\n      /&gt;\n      &lt;Checkbox\n        id=\&quot;upload-should-fail-checkbox\&quot;\n        label=\&quot;Demonstrate error reporting by forcing uploads to fail\&quot;\n        isChecked={fileUploadShouldFail}\n        onChange={() =&gt; setFileUploadShouldFail(!fileUploadShouldFail)}\n      /&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2353" data-pf-content="true" class="pf-v6-c-content--h2">Types</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2363" data-pf-content="true" class="pf-v6-c-content--p">Multiple file upload uses the <code>DropzoneOptions</code> type from react-dropzone. It is comprised of additional props with their own types. For more information on using <code>DropzoneOptions</code> visit <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2354" data-pf-content="true" class="pf-v6-c-content--a">react-dropzone props and methods</a>.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2359" data-pf-content="true" class="pf-v6-c-content--p">Additionally, it calls the <code>onFileDrop</code> callback with an event of type <code>DropEvent</code>. <code>DropEvent</code> is a union comprised of the following types:</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2361" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span> React.DragEvent&lt;HTMLElement&gt;</span></span>
+<span class="line"><span> | React.ChangeEvent&lt;HTMLInputElement&gt;</span></span>
+<span class="line"><span> | DragEvent</span></span>
+<span class="line"><span> | Event</span></span></code></pre> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z1THk9J" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;MultipleFileUpload&quot;],[0,&quot;MultipleFileUploadMain&quot;],[0,&quot;MultipleFileUploadStatus&quot;],[0,&quot;MultipleFileUploadStatusItem&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/multiple-file-upload/react&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2339" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+CSS variables
+</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="Z1lEAiy" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-multiple-file-upload&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>