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

@patternfly/patternfly-doc-core 1.12.1 → 1.12.3

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 (180) hide show

package/dist/docs/components/simple-file-upload/react/index.html CHANGED Viewed

@@ -42,52 +42,52 @@
 	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="Zp7lH8" 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-85"><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="15D5Bi" 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-29"><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-86"><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-87"><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-29"><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/simple-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"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-476" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+			[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="Zp7lH8" prefix="r5" component-url="/_astro/PageToggle.pXRgGXc2.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-85"><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="15D5Bi" 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-29"><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-86"><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-87"><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-29"><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/simple-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"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-476" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-495" data-pf-content="true" class="pf-v6-c-content--p">The <code>FileUpload</code> component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its <code>value</code> and <code>onFileInputChange</code> event that is similar to <code>&lt;input onChange=&quot;...&quot;&gt;</code> prop. The <code>type</code> prop determines how the <code>FileUpload</code> component behaves upon accepting a file, what type of value it passes to its <code>onDataChange</code> event.</p>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-477" data-pf-content="true" class="pf-v6-c-content--h3">Text files</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-496" data-pf-content="true" class="pf-v6-c-content--p">If <code>type=&quot;text&quot;</code> is passed (and <code>hideDefaultPreview</code> is not), a <code>TextArea</code> preview will be rendered underneath the filename bar. When a file is selected, its contents will be read into memory and passed to the <code>onDataChange</code> event as a string. Every filename change is passed to <code>onFileInputChange</code> same as it would do with the <code>&lt;input&gt;</code> element.
 Pressing <em>Clear</em> button triggers <code>onClearClick</code> event.</p>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-478" data-pf-content="true" class="pf-v6-c-content--h3">Simple text file</h3>
-<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="12zqh9" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload, DropEvent } from &#39;@patternfly/react-core&#39;;\n\nexport const SimpleTextFileUpload: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleTextChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleDataChange = (_event: DropEvent, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(true);\n  };\n\n  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(false);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;text-file-simple\&quot;\n      type=\&quot;text\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onDataChange={handleDataChange}\n      onTextChange={handleTextChange}\n      onReadStarted={handleFileReadStarted}\n      onReadFinished={handleFileReadFinished}\n      onClearClick={handleClear}\n      isLoading={isLoading}\n      allowEditingUploadedText={false}\n      browseButtonText=\&quot;Upload\&quot;\n    /&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>
+<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="12zqh9" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload, DropEvent } from &#39;@patternfly/react-core&#39;;\n\nexport const SimpleTextFileUpload: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleTextChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleDataChange = (_event: DropEvent, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(true);\n  };\n\n  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(false);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;text-file-simple\&quot;\n      type=\&quot;text\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onDataChange={handleDataChange}\n      onTextChange={handleTextChange}\n      onReadStarted={handleFileReadStarted}\n      onReadFinished={handleFileReadFinished}\n      onClearClick={handleClear}\n      isLoading={isLoading}\n      allowEditingUploadedText={false}\n      browseButtonText=\&quot;Upload\&quot;\n    /&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-479" data-pf-content="true" class="pf-v6-c-content--h3">With helper text</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-497" data-pf-content="true" class="pf-v6-c-content--p">You can pass in the <code>&lt;FileUploadHelperText</code> sub-component via the <code>children</code> property to <code>&lt;FileUpload&gt;</code>.</p>
-<astro-island uid="ZKt1hA" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload, FileUploadHelperText, HelperText, HelperTextItem, DropEvent } from &#39;@patternfly/react-core&#39;;\n\nexport const FileUploadWithHelperText: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleTextChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleDataChange = (_event: DropEvent, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(true);\n  };\n\n  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(false);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;file-upload-helper-text\&quot;\n      type=\&quot;text\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onDataChange={handleDataChange}\n      onTextChange={handleTextChange}\n      onReadStarted={handleFileReadStarted}\n      onReadFinished={handleFileReadFinished}\n      onClearClick={handleClear}\n      isLoading={isLoading}\n      allowEditingUploadedText={false}\n      browseButtonText=\&quot;Upload\&quot;\n      browseButtonAriaDescribedby=\&quot;helper-text-example-helpText\&quot;\n    &gt;\n      &lt;FileUploadHelperText&gt;\n        &lt;HelperText&gt;\n          &lt;HelperTextItem id=\&quot;helper-text-example-helpText\&quot;&gt;Upload a CSV file&lt;/HelperTextItem&gt;\n        &lt;/HelperText&gt;\n      &lt;/FileUploadHelperText&gt;\n    &lt;/FileUpload&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>
+<astro-island uid="ZKt1hA" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload, FileUploadHelperText, HelperText, HelperTextItem, DropEvent } from &#39;@patternfly/react-core&#39;;\n\nexport const FileUploadWithHelperText: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleTextChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleDataChange = (_event: DropEvent, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(true);\n  };\n\n  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(false);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;file-upload-helper-text\&quot;\n      type=\&quot;text\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onDataChange={handleDataChange}\n      onTextChange={handleTextChange}\n      onReadStarted={handleFileReadStarted}\n      onReadFinished={handleFileReadFinished}\n      onClearClick={handleClear}\n      isLoading={isLoading}\n      allowEditingUploadedText={false}\n      browseButtonText=\&quot;Upload\&quot;\n      browseButtonAriaDescribedby=\&quot;helper-text-example-helpText\&quot;\n    &gt;\n      &lt;FileUploadHelperText&gt;\n        &lt;HelperText&gt;\n          &lt;HelperTextItem id=\&quot;helper-text-example-helpText\&quot;&gt;Upload a CSV file&lt;/HelperTextItem&gt;\n        &lt;/HelperText&gt;\n      &lt;/FileUploadHelperText&gt;\n    &lt;/FileUpload&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-480" data-pf-content="true" class="pf-v6-c-content--h3">Text file with edits allowed</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-498" data-pf-content="true" class="pf-v6-c-content--p">A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the <code>allowEditingUploadedText</code> prop.
 Typing/pasting text in the box will call <code>onTextChange</code> with a string, and a string value is expected for the <code>value</code> prop. :</p>
-<astro-island uid="1fpD4x" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload, DropEvent } from &#39;@patternfly/react-core&#39;;\n\nexport const TextFileWithEditsAllowed: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleTextChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleDataChange = (_event: DropEvent, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(true);\n  };\n\n  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(false);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;text-file-with-edits-allowed-example\&quot;\n      type=\&quot;text\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onDataChange={handleDataChange}\n      onTextChange={handleTextChange}\n      onReadStarted={handleFileReadStarted}\n      onReadFinished={handleFileReadFinished}\n      onClearClick={handleClear}\n      isLoading={isLoading}\n      allowEditingUploadedText={true}\n      browseButtonText=\&quot;Upload\&quot;\n    /&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>
+<astro-island uid="1fpD4x" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload, DropEvent } from &#39;@patternfly/react-core&#39;;\n\nexport const TextFileWithEditsAllowed: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleTextChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleDataChange = (_event: DropEvent, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(true);\n  };\n\n  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(false);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;text-file-with-edits-allowed-example\&quot;\n      type=\&quot;text\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onDataChange={handleDataChange}\n      onTextChange={handleTextChange}\n      onReadStarted={handleFileReadStarted}\n      onReadFinished={handleFileReadFinished}\n      onClearClick={handleClear}\n      isLoading={isLoading}\n      allowEditingUploadedText={true}\n      browseButtonText=\&quot;Upload\&quot;\n    /&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-481" data-pf-content="true" class="pf-v6-c-content--h3">Restricting file size and type</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-507" data-pf-content="true" class="pf-v6-c-content--p">Any <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-499" data-pf-content="true" class="pf-v6-c-content--a">props accepted by <code>react-dropzone</code>’s <code>Dropzone</code> component</a> can be passed as a <code>dropzoneProps</code> object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. You can also capture and act upon native <code>react-dropzone</code> errors using the exposed <code>DropzoneErrorCode</code> enum. The following example will only accept CSV files smaller than 1 KB. Note that file type determination is not reliable across platforms (see the note on react-dropzone’s docs about the <code>accept</code> prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.</p>
 <h4 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-482" data-pf-content="true" class="pf-v6-c-content--h4">IMPORTANT: A note about security</h4>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-483" 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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-484" data-pf-content="true" class="pf-v6-c-content--h3">Text file with restrictions</h3>
-<astro-island uid="Z1AqCqL" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  FileUpload,\n  DropzoneErrorCode,\n  FileUploadHelperText,\n  Form,\n  FormGroup,\n  HelperText,\n  HelperTextItem,\n  DropEvent\n} from &#39;@patternfly/react-core&#39;;\n\nexport const TextFileUploadWithRestrictions: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isRejected, setIsRejected] = useState(false);\n  const [message, setMessage] = useState(&#39;Must be a CSV file no larger than 1 KB&#39;);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleTextChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleDataChange = (_event: DropEvent, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const reset = () =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    reset();\n    setIsRejected(false);\n  };\n\n  const handleFileRejected = () =&gt; {\n    reset();\n    setIsRejected(true);\n  };\n\n  const handleFileAccepted = () =&gt; {\n    setIsRejected(false);\n  };\n\n  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(true);\n  };\n\n  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(false);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup fieldId=\&quot;text-file-with-restrictions-example\&quot;&gt;\n        &lt;FileUpload\n          id=\&quot;text-file-with-restrictions-example\&quot;\n          type=\&quot;text\&quot;\n          value={value}\n          filename={filename}\n          filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n          onFileInputChange={handleFileInputChange}\n          onDataChange={handleDataChange}\n          onTextChange={handleTextChange}\n          onReadStarted={handleFileReadStarted}\n          onReadFinished={handleFileReadFinished}\n          onClearClick={handleClear}\n          isLoading={isLoading}\n          dropzoneProps={{\n            accept: { &#39;text/csv&#39;: [&#39;.csv&#39;] },\n            maxSize: 1024,\n            onDropRejected: (rejections) =&gt; {\n              const error = rejections[0].errors[0];\n              if (error.code === DropzoneErrorCode.FileTooLarge) {\n                setMessage(&#39;File is too big&#39;);\n              } else if (error.code === DropzoneErrorCode.FileInvalidType) {\n                setMessage(&#39;File is not a CSV file&#39;);\n              }\n              handleFileRejected();\n            },\n            onDropAccepted: handleFileAccepted\n          }}\n          validated={isRejected ? &#39;error&#39; : &#39;default&#39;}\n          browseButtonText=\&quot;Upload\&quot;\n          browseButtonAriaDescribedby=\&quot;restricted-file-example-helpText\&quot;\n        &gt;\n          &lt;FileUploadHelperText&gt;\n            &lt;HelperText isLiveRegion&gt;\n              &lt;HelperTextItem id=\&quot;restricted-file-example-helpText\&quot; variant={isRejected ? &#39;error&#39; : &#39;default&#39;}&gt;\n                {isRejected ? message : &#39;Upload a CSV file&#39;}\n              &lt;/HelperTextItem&gt;\n            &lt;/HelperText&gt;\n          &lt;/FileUploadHelperText&gt;\n        &lt;/FileUpload&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&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>
+<astro-island uid="Z1AqCqL" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  FileUpload,\n  DropzoneErrorCode,\n  FileUploadHelperText,\n  Form,\n  FormGroup,\n  HelperText,\n  HelperTextItem,\n  DropEvent\n} from &#39;@patternfly/react-core&#39;;\n\nexport const TextFileUploadWithRestrictions: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isRejected, setIsRejected] = useState(false);\n  const [message, setMessage] = useState(&#39;Must be a CSV file no larger than 1 KB&#39;);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleTextChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleDataChange = (_event: DropEvent, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const reset = () =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    reset();\n    setIsRejected(false);\n  };\n\n  const handleFileRejected = () =&gt; {\n    reset();\n    setIsRejected(true);\n  };\n\n  const handleFileAccepted = () =&gt; {\n    setIsRejected(false);\n  };\n\n  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(true);\n  };\n\n  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) =&gt; {\n    setIsLoading(false);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup fieldId=\&quot;text-file-with-restrictions-example\&quot;&gt;\n        &lt;FileUpload\n          id=\&quot;text-file-with-restrictions-example\&quot;\n          type=\&quot;text\&quot;\n          value={value}\n          filename={filename}\n          filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n          onFileInputChange={handleFileInputChange}\n          onDataChange={handleDataChange}\n          onTextChange={handleTextChange}\n          onReadStarted={handleFileReadStarted}\n          onReadFinished={handleFileReadFinished}\n          onClearClick={handleClear}\n          isLoading={isLoading}\n          dropzoneProps={{\n            accept: { &#39;text/csv&#39;: [&#39;.csv&#39;] },\n            maxSize: 1024,\n            onDropRejected: (rejections) =&gt; {\n              const error = rejections[0].errors[0];\n              if (error.code === DropzoneErrorCode.FileTooLarge) {\n                setMessage(&#39;File is too big&#39;);\n              } else if (error.code === DropzoneErrorCode.FileInvalidType) {\n                setMessage(&#39;File is not a CSV file&#39;);\n              }\n              handleFileRejected();\n            },\n            onDropAccepted: handleFileAccepted\n          }}\n          validated={isRejected ? &#39;error&#39; : &#39;default&#39;}\n          browseButtonText=\&quot;Upload\&quot;\n          browseButtonAriaDescribedby=\&quot;restricted-file-example-helpText\&quot;\n        &gt;\n          &lt;FileUploadHelperText&gt;\n            &lt;HelperText isLiveRegion&gt;\n              &lt;HelperTextItem id=\&quot;restricted-file-example-helpText\&quot; variant={isRejected ? &#39;error&#39; : &#39;default&#39;}&gt;\n                {isRejected ? message : &#39;Upload a CSV file&#39;}\n              &lt;/HelperTextItem&gt;\n            &lt;/HelperText&gt;\n          &lt;/FileUploadHelperText&gt;\n        &lt;/FileUpload&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&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-485" data-pf-content="true" class="pf-v6-c-content--h3">Other file types</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-508" data-pf-content="true" class="pf-v6-c-content--p">If no <code>type</code> prop is specified, the component will not read files directly. When a file is selected, a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-500" data-pf-content="true" class="pf-v6-c-content--a"><code>File</code> object</a> will be passed as a second argument to <code>onFileInputChange</code> and your application will be responsible for reading from it (e.g. by using the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-486" data-pf-content="true" class="pf-v6-c-content--a">FileReader API</a> or attaching it to a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-487" data-pf-content="true" class="pf-v6-c-content--a">FormData object</a>). A <code>File</code> object will also be expected for the <code>value</code> prop instead of a string, and no preview of the file contents will be shown by default. The <code>onReadStarted</code> and <code>onReadFinished</code> callbacks will also not be called since the component is not reading the file.</p>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-488" data-pf-content="true" class="pf-v6-c-content--h3">Simple file of any format</h3>
-<astro-island uid="14cEBE" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload } from &#39;@patternfly/react-core&#39;;\n\nexport const SimpleFileUpload: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;simple-file\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onClearClick={handleClear}\n      browseButtonText=\&quot;Upload\&quot;\n    /&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>
+<astro-island uid="14cEBE" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload } from &#39;@patternfly/react-core&#39;;\n\nexport const SimpleFileUpload: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(&#39;&#39;);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setFilename(file.name);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(&#39;&#39;);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;simple-file\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onClearClick={handleClear}\n      browseButtonText=\&quot;Upload\&quot;\n    /&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-489" data-pf-content="true" class="pf-v6-c-content--h3">Customizing the file preview</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-501" data-pf-content="true" class="pf-v6-c-content--p">Regardless of <code>type</code>, the preview area (the TextArea, or any future implementations of default previews for other types) can be removed by passing <code>hideDefaultPreview</code>, and a custom one can be rendered by passing <code>children</code>.</p>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-490" data-pf-content="true" class="pf-v6-c-content--h3">Custom file preview</h3>
-<astro-island uid="Z1EafD8" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload } from &#39;@patternfly/react-core&#39;;\nimport FileUploadIcon from &#39;@patternfly/react-icons/dist/esm/icons/file-upload-icon&#39;;\n\nexport const CustomPreviewFileUpload: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState&lt;File&gt;();\n  const [filename, setFilename] = useState(&#39;&#39;);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setValue(file);\n    setFilename(file.name);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(undefined);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;customized-preview-file\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onClearClick={handleClear}\n      hideDefaultPreview\n      browseButtonText=\&quot;Upload\&quot;\n    &gt;\n      {value &amp;&amp; (\n        &lt;div&gt;\n          &lt;FileUploadIcon width=\&quot;2em\&quot; height=\&quot;2em\&quot; /&gt; Custom preview here for your {value.size}-byte file named{&#39; &#39;}\n          {value.name}\n        &lt;/div&gt;\n      )}\n    &lt;/FileUpload&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>
+<astro-island uid="Z1EafD8" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUpload } from &#39;@patternfly/react-core&#39;;\nimport FileUploadIcon from &#39;@patternfly/react-icons/dist/esm/icons/file-upload-icon&#39;;\n\nexport const CustomPreviewFileUpload: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState&lt;File&gt;();\n  const [filename, setFilename] = useState(&#39;&#39;);\n\n  const handleFileInputChange = (_, file: File) =&gt; {\n    setValue(file);\n    setFilename(file.name);\n  };\n\n  const handleClear = (_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {\n    setFilename(&#39;&#39;);\n    setValue(undefined);\n  };\n\n  return (\n    &lt;FileUpload\n      id=\&quot;customized-preview-file\&quot;\n      value={value}\n      filename={filename}\n      filenamePlaceholder=\&quot;Drag and drop a file or upload one\&quot;\n      onFileInputChange={handleFileInputChange}\n      onClearClick={handleClear}\n      hideDefaultPreview\n      browseButtonText=\&quot;Upload\&quot;\n    &gt;\n      {value &amp;&amp; (\n        &lt;div&gt;\n          &lt;FileUploadIcon width=\&quot;2em\&quot; height=\&quot;2em\&quot; /&gt; Custom preview here for your {value.size}-byte file named{&#39; &#39;}\n          {value.name}\n        &lt;/div&gt;\n      )}\n    &lt;/FileUpload&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-491" data-pf-content="true" class="pf-v6-c-content--h3">Bringing your own file browse logic</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-502" data-pf-content="true" class="pf-v6-c-content--p"><code>FileUpload</code> is a thin wrapper around the <code>FileUploadField</code> presentational component. If you need to implement your own logic for accepting files, you can instead render a <code>FileUploadField</code> directly, which does not include <code>react-dropzone</code> and requires additional props (e.g. <code>onBrowseButtonClick</code>, <code>onClearButtonClick</code>, <code>isDragActive</code>).</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-503" data-pf-content="true" class="pf-v6-c-content--p">Note that the <code>isLoading</code> prop is styled to position the spinner dead center above the entire component, so it should not be used with <code>hideDefaultPreview</code> unless a custom empty-state preview is provided via <code>children</code>. The below example prevents <code>isLoading</code> and <code>hideDefaultPreview</code> from being used at the same time. You can always provide your own spinner as part of the <code>children</code>!</p>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-492" data-pf-content="true" class="pf-v6-c-content--h3">Custom file upload</h3>
-<astro-island uid="insa7" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const CustomPreviewFileUpload: React.FunctionComponent = () =&gt; {\n  const properties = [\n    &#39;filename&#39;,\n    &#39;isBrowseButtonDisabled&#39;,\n    &#39;isClearButtonDisabled&#39;,\n    &#39;isDragActive&#39;,\n    &#39;isLoading&#39;,\n    &#39;hideDefaultPreview&#39;,\n    &#39;hasCustomFilePreview&#39;,\n    &#39;hasHelperText&#39;,\n    &#39;hasPlaceholderText&#39;\n  ];\n\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(false);\n  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = useState(true);\n  const [isClearButtonDisabled, setIsClearButtonDisabled] = useState(true);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isDragActive, setIsDragActive] = useState(false);\n  const [hideDefaultPreview, setHideDefaultPreview] = useState(false);\n  const [hasCustomFilePreview, setHasCustomFilePreview] = useState(false);\n  const [hasHelperText, setHasHelperText] = useState(false);\n  const [hasPlaceholderText, setHasPlaceholderText] = useState(false);\n  const [checkedState, setCheckedState] = useState([\n    filename,\n    isBrowseButtonDisabled,\n    isClearButtonDisabled,\n    isLoading,\n    isDragActive,\n    hideDefaultPreview,\n    hasCustomFilePreview,\n    hasHelperText,\n    hasPlaceholderText\n  ]);\n\n  const handleTextAreaChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleOnChange = (checked: boolean, stateKey: string, index: number) =&gt; {\n    const updatedCheckedState = [...checkedState];\n    switch (stateKey) {\n      case &#39;filename&#39;:\n        checked ? setFilename(true) : setFilename(false);\n        break;\n\n      case &#39;isBrowseButtonDisabled&#39;:\n        checked ? setIsBrowseButtonDisabled(true) : setIsBrowseButtonDisabled(false);\n        break;\n\n      case &#39;isClearButtonDisabled&#39;:\n        checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);\n        break;\n\n      case &#39;isDragActive&#39;:\n        checked ? setIsDragActive(true) : setIsDragActive(false);\n        break;\n\n      case &#39;isLoading&#39;:\n        checked ? setIsLoading(true) : setIsLoading(false);\n        // See notes above this example\n        if (checked) {\n          updatedCheckedState[properties.indexOf(&#39;hideDefaultPreview&#39;)] = false;\n          setHideDefaultPreview(false);\n        }\n        break;\n\n      case &#39;hideDefaultPreview&#39;:\n        checked ? setHideDefaultPreview(true) : setHideDefaultPreview(false);\n        // See notes above this example\n        if (checked) {\n          updatedCheckedState[properties.indexOf(&#39;isLoading&#39;)] = false;\n          setIsLoading(false);\n        }\n        break;\n\n      case &#39;hasCustomFilePreview&#39;:\n        checked ? setHasCustomFilePreview(true) : setHasCustomFilePreview(false);\n        break;\n\n      case &#39;hasHelperText&#39;:\n        checked ? setHasHelperText(true) : setHasHelperText(false);\n        break;\n\n      case &#39;hasPlaceholderText&#39;:\n        checked ? setHasPlaceholderText(true) : setHasPlaceholderText(false);\n        break;\n    }\n    updatedCheckedState[index] = checked;\n    setCheckedState(updatedCheckedState);\n  };\n\n  return (\n    &lt;div&gt;\n      {properties.map((stateKey, index) =&gt; (\n        &lt;Checkbox\n          name={stateKey}\n          key={stateKey}\n          id={stateKey}\n          label={stateKey}\n          aria-label={stateKey}\n          isChecked={checkedState[index]}\n          onChange={(_event, checked) =&gt; handleOnChange(checked, stateKey, index)}\n        /&gt;\n      ))}\n      &lt;br /&gt;\n      &lt;FileUploadField\n        id=\&quot;custom-file-upload-example\&quot;\n        type=\&quot;text\&quot;\n        value={value}\n        filename={filename ? &#39;example-filename.txt&#39; : &#39;&#39;}\n        onTextChange={handleTextAreaChange}\n        filenamePlaceholder=\&quot;Do something custom with this!\&quot;\n        onBrowseButtonClick={() =&gt; alert(&#39;Browse button clicked!&#39;)}\n        onClearButtonClick={() =&gt; alert(&#39;Clear button clicked!&#39;)}\n        isBrowseButtonDisabled={isBrowseButtonDisabled}\n        isClearButtonDisabled={isClearButtonDisabled}\n        isLoading={isLoading}\n        isDragActive={isDragActive}\n        hideDefaultPreview={hideDefaultPreview}\n        browseButtonText=\&quot;Upload\&quot;\n        browseButtonAriaDescribedby={hasHelperText ? &#39;custom-upload-helpText&#39; : undefined}\n        textAreaPlaceholder={hasPlaceholderText ? &#39;File preview&#39; : &#39;&#39;}\n      &gt;\n        {hasCustomFilePreview &amp;&amp; &lt;div&gt;(A custom preview of the uploaded file can be passed as children)&lt;/div&gt;}\n        {hasHelperText &amp;&amp; (\n          &lt;FileUploadHelperText&gt;\n            &lt;HelperText&gt;\n              &lt;HelperTextItem id=\&quot;custom-upload-helpText\&quot;&gt;Upload a CSV file&lt;/HelperTextItem&gt;\n            &lt;/HelperText&gt;\n          &lt;/FileUploadHelperText&gt;\n        )}\n      &lt;/FileUploadField&gt;\n    &lt;/div&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>
+<astro-island uid="insa7" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const CustomPreviewFileUpload: React.FunctionComponent = () =&gt; {\n  const properties = [\n    &#39;filename&#39;,\n    &#39;isBrowseButtonDisabled&#39;,\n    &#39;isClearButtonDisabled&#39;,\n    &#39;isDragActive&#39;,\n    &#39;isLoading&#39;,\n    &#39;hideDefaultPreview&#39;,\n    &#39;hasCustomFilePreview&#39;,\n    &#39;hasHelperText&#39;,\n    &#39;hasPlaceholderText&#39;\n  ];\n\n  const [value, setValue] = useState(&#39;&#39;);\n  const [filename, setFilename] = useState(false);\n  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = useState(true);\n  const [isClearButtonDisabled, setIsClearButtonDisabled] = useState(true);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isDragActive, setIsDragActive] = useState(false);\n  const [hideDefaultPreview, setHideDefaultPreview] = useState(false);\n  const [hasCustomFilePreview, setHasCustomFilePreview] = useState(false);\n  const [hasHelperText, setHasHelperText] = useState(false);\n  const [hasPlaceholderText, setHasPlaceholderText] = useState(false);\n  const [checkedState, setCheckedState] = useState([\n    filename,\n    isBrowseButtonDisabled,\n    isClearButtonDisabled,\n    isLoading,\n    isDragActive,\n    hideDefaultPreview,\n    hasCustomFilePreview,\n    hasHelperText,\n    hasPlaceholderText\n  ]);\n\n  const handleTextAreaChange = (_event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, value: string) =&gt; {\n    setValue(value);\n  };\n\n  const handleOnChange = (checked: boolean, stateKey: string, index: number) =&gt; {\n    const updatedCheckedState = [...checkedState];\n    switch (stateKey) {\n      case &#39;filename&#39;:\n        checked ? setFilename(true) : setFilename(false);\n        break;\n\n      case &#39;isBrowseButtonDisabled&#39;:\n        checked ? setIsBrowseButtonDisabled(true) : setIsBrowseButtonDisabled(false);\n        break;\n\n      case &#39;isClearButtonDisabled&#39;:\n        checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);\n        break;\n\n      case &#39;isDragActive&#39;:\n        checked ? setIsDragActive(true) : setIsDragActive(false);\n        break;\n\n      case &#39;isLoading&#39;:\n        checked ? setIsLoading(true) : setIsLoading(false);\n        // See notes above this example\n        if (checked) {\n          updatedCheckedState[properties.indexOf(&#39;hideDefaultPreview&#39;)] = false;\n          setHideDefaultPreview(false);\n        }\n        break;\n\n      case &#39;hideDefaultPreview&#39;:\n        checked ? setHideDefaultPreview(true) : setHideDefaultPreview(false);\n        // See notes above this example\n        if (checked) {\n          updatedCheckedState[properties.indexOf(&#39;isLoading&#39;)] = false;\n          setIsLoading(false);\n        }\n        break;\n\n      case &#39;hasCustomFilePreview&#39;:\n        checked ? setHasCustomFilePreview(true) : setHasCustomFilePreview(false);\n        break;\n\n      case &#39;hasHelperText&#39;:\n        checked ? setHasHelperText(true) : setHasHelperText(false);\n        break;\n\n      case &#39;hasPlaceholderText&#39;:\n        checked ? setHasPlaceholderText(true) : setHasPlaceholderText(false);\n        break;\n    }\n    updatedCheckedState[index] = checked;\n    setCheckedState(updatedCheckedState);\n  };\n\n  return (\n    &lt;div&gt;\n      {properties.map((stateKey, index) =&gt; (\n        &lt;Checkbox\n          name={stateKey}\n          key={stateKey}\n          id={stateKey}\n          label={stateKey}\n          aria-label={stateKey}\n          isChecked={checkedState[index]}\n          onChange={(_event, checked) =&gt; handleOnChange(checked, stateKey, index)}\n        /&gt;\n      ))}\n      &lt;br /&gt;\n      &lt;FileUploadField\n        id=\&quot;custom-file-upload-example\&quot;\n        type=\&quot;text\&quot;\n        value={value}\n        filename={filename ? &#39;example-filename.txt&#39; : &#39;&#39;}\n        onTextChange={handleTextAreaChange}\n        filenamePlaceholder=\&quot;Do something custom with this!\&quot;\n        onBrowseButtonClick={() =&gt; alert(&#39;Browse button clicked!&#39;)}\n        onClearButtonClick={() =&gt; alert(&#39;Clear button clicked!&#39;)}\n        isBrowseButtonDisabled={isBrowseButtonDisabled}\n        isClearButtonDisabled={isClearButtonDisabled}\n        isLoading={isLoading}\n        isDragActive={isDragActive}\n        hideDefaultPreview={hideDefaultPreview}\n        browseButtonText=\&quot;Upload\&quot;\n        browseButtonAriaDescribedby={hasHelperText ? &#39;custom-upload-helpText&#39; : undefined}\n        textAreaPlaceholder={hasPlaceholderText ? &#39;File preview&#39; : &#39;&#39;}\n      &gt;\n        {hasCustomFilePreview &amp;&amp; &lt;div&gt;(A custom preview of the uploaded file can be passed as children)&lt;/div&gt;}\n        {hasHelperText &amp;&amp; (\n          &lt;FileUploadHelperText&gt;\n            &lt;HelperText&gt;\n              &lt;HelperTextItem id=\&quot;custom-upload-helpText\&quot;&gt;Upload a CSV file&lt;/HelperTextItem&gt;\n            &lt;/HelperText&gt;\n          &lt;/FileUploadHelperText&gt;\n        )}\n      &lt;/FileUploadField&gt;\n    &lt;/div&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-493" 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-506" data-pf-content="true" class="pf-v6-c-content--p">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-494" 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-504" data-pf-content="true" class="pf-v6-c-content--p">Additionally, it calls the <code>onDataChange</code>, <code>onReadFailed</code>, <code>onReadFinished</code>, and <code>onReadStarted</code> callbacks 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-505" 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="ykSCa" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;FileUpload&quot;],[0,&quot;FileUploadField&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/simple-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-475" 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>
+<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="ykSCa" component-url="/_astro/PropsTables.Cio9znJH.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;FileUpload&quot;],[0,&quot;FileUploadField&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/simple-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-475" 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="ZsPmr9" 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-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>