[{"_1":2,"_584":-5,"_585":-5},"loaderData",{"_3":4,"_301":302,"_436":437},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_134":135,"_142":143,"_144":145,"_199":147,"_200":149,"_150":151,"_201":202,"_216":217,"_241":-5,"_242":-5,"_243":244},"userId",{"_7":8,"_9":10},"id","ighnqs1sfzxmgo7t46qfbzy0","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.composition/01.problem.compose","relativePath","exercises/01.composition/01.problem.compose",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.composition/01.solution.compose","exercises/01.composition/01.solution.compose",{"_20":31,"_22":32,"_24":33},"02.01.problem","/myapp/workshop-content/exercises/02.latest-ref/01.problem.ref","exercises/02.latest-ref/01.problem.ref",{"_20":35,"_22":36,"_24":37},"02.01.solution","/myapp/workshop-content/exercises/02.latest-ref/01.solution.ref","exercises/02.latest-ref/01.solution.ref",{"_20":39,"_22":40,"_24":41},"03.01.problem","/myapp/workshop-content/exercises/03.compound-components/01.problem.context","exercises/03.compound-components/01.problem.context",{"_20":43,"_22":44,"_24":45},"03.01.solution","/myapp/workshop-content/exercises/03.compound-components/01.solution.context","exercises/03.compound-components/01.solution.context",{"_20":47,"_22":48,"_24":49},"03.02.problem","/myapp/workshop-content/exercises/03.compound-components/02.problem.validation","exercises/03.compound-components/02.problem.validation",{"_20":51,"_22":52,"_24":53},"03.02.solution","/myapp/workshop-content/exercises/03.compound-components/02.solution.validation","exercises/03.compound-components/02.solution.validation",{"_20":55,"_22":56,"_24":57},"04.01.problem","/myapp/workshop-content/exercises/04.slots/01.problem.context","exercises/04.slots/01.problem.context",{"_20":59,"_22":60,"_24":61},"04.01.solution","/myapp/workshop-content/exercises/04.slots/01.solution.context","exercises/04.slots/01.solution.context",{"_20":63,"_22":64,"_24":65},"04.02.problem","/myapp/workshop-content/exercises/04.slots/02.problem.generic","exercises/04.slots/02.problem.generic",{"_20":67,"_22":68,"_24":69},"04.02.solution","/myapp/workshop-content/exercises/04.slots/02.solution.generic","exercises/04.slots/02.solution.generic",{"_20":71,"_22":72,"_24":73},"04.03.problem","/myapp/workshop-content/exercises/04.slots/03.problem.prop","exercises/04.slots/03.problem.prop",{"_20":75,"_22":76,"_24":77},"04.03.solution","/myapp/workshop-content/exercises/04.slots/03.solution.prop","exercises/04.slots/03.solution.prop",{"_20":79,"_22":80,"_24":81},"05.01.problem","/myapp/workshop-content/exercises/05.prop-getters/01.problem.collections","exercises/05.prop-getters/01.problem.collections",{"_20":83,"_22":84,"_24":85},"05.01.solution","/myapp/workshop-content/exercises/05.prop-getters/01.solution.collections","exercises/05.prop-getters/01.solution.collections",{"_20":87,"_22":88,"_24":89},"05.02.problem","/myapp/workshop-content/exercises/05.prop-getters/02.problem.getters","exercises/05.prop-getters/02.problem.getters",{"_20":91,"_22":92,"_24":93},"05.02.solution","/myapp/workshop-content/exercises/05.prop-getters/02.solution.getters","exercises/05.prop-getters/02.solution.getters",{"_20":95,"_22":96,"_24":97},"06.01.problem","/myapp/workshop-content/exercises/06.state-initializers/01.problem.initial","exercises/06.state-initializers/01.problem.initial",{"_20":99,"_22":100,"_24":101},"06.01.solution","/myapp/workshop-content/exercises/06.state-initializers/01.solution.initial","exercises/06.state-initializers/01.solution.initial",{"_20":103,"_22":104,"_24":105},"06.02.problem","/myapp/workshop-content/exercises/06.state-initializers/02.problem.stability","exercises/06.state-initializers/02.problem.stability",{"_20":107,"_22":108,"_24":109},"06.02.solution","/myapp/workshop-content/exercises/06.state-initializers/02.solution.stability","exercises/06.state-initializers/02.solution.stability",{"_20":111,"_22":112,"_24":113},"07.01.problem","/myapp/workshop-content/exercises/07.state-reducer/01.problem.reducer","exercises/07.state-reducer/01.problem.reducer",{"_20":115,"_22":116,"_24":117},"07.01.solution","/myapp/workshop-content/exercises/07.state-reducer/01.solution.reducer","exercises/07.state-reducer/01.solution.reducer",{"_20":119,"_22":120,"_24":121},"07.02.problem","/myapp/workshop-content/exercises/07.state-reducer/02.problem.default","exercises/07.state-reducer/02.problem.default",{"_20":123,"_22":124,"_24":125},"07.02.solution","/myapp/workshop-content/exercises/07.state-reducer/02.solution.default","exercises/07.state-reducer/02.solution.default",{"_20":127,"_22":128,"_24":129},"08.01.problem","/myapp/workshop-content/exercises/08.control-props/01.problem.control","exercises/08.control-props/01.problem.control",{"_20":131,"_22":132,"_24":133},"08.01.solution","/myapp/workshop-content/exercises/08.control-props/01.solution.control","exercises/08.control-props/01.solution.control","repoUpdates",{"_136":16,"_137":138,"_139":138,"_140":141},"updatesAvailable","localCommit","fc72afa","remoteCommit","diffLink","https://github.com/undefined/undefined/compare/fc72afa...fc72afa","unmutedNotifications",[],"workshopConfig",{"_146":147,"_148":149,"_150":151,"_157":158,"_175":176,"_177":178,"_179":180,"_181":182,"_185":186,"_191":192,"_195":196,"_197":198},"title","Advanced React Patterns 🤯","subtitle","Learn how to build simple and flexible React Components and Hooks using modern patterns","instructor",{"_20":152,"_153":154,"_155":156},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_159":160,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-patterns","discordChannelId","1285244676286189569","discordTags",[173,174],"1285246046498328627","1285245811944325193","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/advanced-react-patterns","githubRoot","https://github.com/epicweb-dev/advanced-react-patterns/tree/main","stackBlitzConfig",{"_183":184},"view","editor","forms",{"_187":188,"_189":190},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_193":194},"enabled",true,"initialRoute","/","notifications",[],"workshopTitle","workshopSubtitle","ENV",{"_203":204,"_205":206,"_207":178,"_208":180,"_209":194,"_210":211,"_212":213,"_214":215},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.29.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","0bfbf5fbbafec84d6d0c05b8ab6d63dd4abbd450b7fb4cf602f91949c75e07d3","requestInfo",{"_218":219,"_220":221,"_222":223,"_224":225,"_226":225,"_227":228,"_235":236,"_237":238,"_239":196,"_240":194},"protocol","http:","hostname","advanced-patterns.epicreact.dev","port","","origin","http://advanced-patterns.epicreact.dev","domain","hints",{"_229":230,"_231":232,"_233":234},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/04/finished","session",{"_229":-5},"separator","online","toast","confettiId","presence",{"_245":246},"users",[247,262,274,282,290,297],{"_7":248,"_249":194,"_250":251,"_252":253,"_20":254,"_255":256},"b52c78c5-aa9e-42ce-9609-af4a5c737513","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/54e3db026294731518cc835e44f91107?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/54e3db026294731518cc835e44f91107?size=512&default=identicon","Jeffrey Heinke","location",{"_199":257,"_224":258,"_189":259},"React Suspense 🔀","http://localhost:5639",{"_260":261},"exerciseNumber",3,{"_7":263,"_249":194,"_250":264,"_252":265,"_20":266,"_255":267},"847022a0-201f-484b-9aef-f0534fad2b2a","https://www.gravatar.com/avatar/e5fb756e61838b8c8809da3a552a332a?size=64&default=identicon","https://www.gravatar.com/avatar/e5fb756e61838b8c8809da3a552a332a?size=512&default=identicon","Raquel Mayumi Nishimoto",{"_199":268,"_224":258,"_189":269},"React Fundamentals ⚛",{"_9":270,"_260":271,"_272":273},"problem",7,"stepNumber",2,{"_7":275,"_249":194,"_250":276,"_252":277,"_20":278,"_255":279},"3cdbd6bc-08ae-4478-ba8e-4dd02f225a09","https://www.gravatar.com/avatar/cd9ced94a8df9c93a7922532ccdf91b2?size=64&default=identicon","https://www.gravatar.com/avatar/cd9ced94a8df9c93a7922532ccdf91b2?size=512&default=identicon","Kanitpong Tang",{"_199":280,"_224":258,"_189":281},"Full Stack Foundations 🔭",{"_260":273},{"_7":283,"_249":194,"_250":284,"_252":285,"_20":286,"_255":287},"282c87cb-e35b-4c38-8d85-432f8f374e46","https://www.gravatar.com/avatar/2c1c5c5006ea20237a904cb73f72926a?size=64&default=identicon","https://www.gravatar.com/avatar/2c1c5c5006ea20237a904cb73f72926a?size=512&default=identicon","Linnae Kraemer",{"_199":268,"_224":258,"_189":288},{"_9":270,"_260":273,"_272":289},1,{"_7":291,"_255":292},"ay2ediv4b2pewag1po5q0mil",{"_199":293,"_224":294,"_189":295},"MCP Fundamentals 🧱","http://mcp-fundamentals.epicai.pro",{"_260":296},4,{"_7":298,"_255":299},"k8ris8jiwn64ehkh9xocyjyw",{"_199":147,"_224":225,"_189":300},{"_260":296,"_272":-5,"_9":-5},"routes/_app+/_layout",{"_199":147,"_303":304,"_432":433,"_435":16},"exercises",[305,320,330,346,369,387,405,421],{"_260":289,"_146":306,"_307":308,"_311":312,"_314":315},"Composition","solutions",[309],{"_272":289,"_146":310,"_20":27},"Composition and Layout Components","problems",[313],{"_272":289,"_146":310,"_20":21},"steps",[316],{"_272":289,"_146":310,"_20":21,"_270":317,"_318":319},{"_20":21,"_146":310},"solution",{"_20":27,"_146":310},{"_260":273,"_146":321,"_307":322,"_311":324,"_314":326},"Latest Ref",[323],{"_272":289,"_146":321,"_20":35},[325],{"_272":289,"_146":321,"_20":31},[327],{"_272":289,"_146":321,"_20":31,"_270":328,"_318":329},{"_20":31,"_146":321},{"_20":35,"_146":321},{"_260":261,"_146":331,"_307":332,"_311":336,"_314":339},"Compound Components",[333,334],{"_272":289,"_146":331,"_20":43},{"_272":273,"_146":335,"_20":51},"Compound Components Validation",[337,338],{"_272":289,"_146":331,"_20":39},{"_272":273,"_146":335,"_20":47},[340,343],{"_272":289,"_146":331,"_20":39,"_270":341,"_318":342},{"_20":39,"_146":331},{"_20":43,"_146":331},{"_272":273,"_146":335,"_20":47,"_270":344,"_318":345},{"_20":47,"_146":335},{"_20":51,"_146":335},{"_260":296,"_146":347,"_307":348,"_311":355,"_314":359},"Slots",[349,351,353],{"_272":289,"_146":350,"_20":59},"Slot Context",{"_272":273,"_146":352,"_20":67},"Generic Slot Components",{"_272":261,"_146":354,"_20":75},"Slot Prop",[356,357,358],{"_272":289,"_146":350,"_20":55},{"_272":273,"_146":352,"_20":63},{"_272":261,"_146":354,"_20":71},[360,363,366],{"_272":289,"_146":350,"_20":55,"_270":361,"_318":362},{"_20":55,"_146":350},{"_20":59,"_146":350},{"_272":273,"_146":352,"_20":63,"_270":364,"_318":365},{"_20":63,"_146":352},{"_20":67,"_146":352},{"_272":261,"_146":354,"_20":71,"_270":367,"_318":368},{"_20":71,"_146":354},{"_20":75,"_146":354},{"_260":370,"_146":371,"_307":372,"_311":377,"_314":380},5,"Prop Collections and Getters",[373,375],{"_272":289,"_146":374,"_20":83},"Prop Collections",{"_272":273,"_146":376,"_20":91},"Prop Getters",[378,379],{"_272":289,"_146":374,"_20":79},{"_272":273,"_146":376,"_20":87},[381,384],{"_272":289,"_146":374,"_20":79,"_270":382,"_318":383},{"_20":79,"_146":374},{"_20":83,"_146":374},{"_272":273,"_146":376,"_20":87,"_270":385,"_318":386},{"_20":87,"_146":376},{"_20":91,"_146":376},{"_260":388,"_146":389,"_307":390,"_311":395,"_314":398},6,"State Initializer",[391,393],{"_272":289,"_146":392,"_20":99},"Initialize Toggle",{"_272":273,"_146":394,"_20":107},"Stability",[396,397],{"_272":289,"_146":392,"_20":95},{"_272":273,"_146":394,"_20":103},[399,402],{"_272":289,"_146":392,"_20":95,"_270":400,"_318":401},{"_20":95,"_146":392},{"_20":99,"_146":392},{"_272":273,"_146":394,"_20":103,"_270":403,"_318":404},{"_20":103,"_146":394},{"_20":107,"_146":394},{"_260":271,"_146":406,"_307":407,"_311":411,"_314":414},"State Reducer",[408,409],{"_272":289,"_146":406,"_20":115},{"_272":273,"_146":410,"_20":123},"Default State Reducer",[412,413],{"_272":289,"_146":406,"_20":111},{"_272":273,"_146":410,"_20":119},[415,418],{"_272":289,"_146":406,"_20":111,"_270":416,"_318":417},{"_20":111,"_146":406},{"_20":115,"_146":406},{"_272":273,"_146":410,"_20":119,"_270":419,"_318":420},{"_20":119,"_146":410},{"_20":123,"_146":410},{"_260":422,"_146":423,"_307":424,"_311":426,"_314":428},8,"Control Props",[425],{"_272":289,"_146":423,"_20":131},[427],{"_272":289,"_146":423,"_20":127},[429],{"_272":289,"_146":423,"_20":127,"_270":430,"_318":431},{"_20":127,"_146":423},{"_20":131,"_146":423},"playground",{"_434":-5,"_260":-2,"_272":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_438":439,"_199":147,"_189":440,"_566":567,"_568":569,"_570":571,"_575":576,"_581":582},"articleId","workshop-advanced-react-patterns-4-finished",{"_22":441,"_260":296,"_442":443,"_146":347,"_444":445,"_446":447,"_448":449,"_451":452,"_314":454,"_311":534,"_307":550},"/myapp/workshop-content/exercises/04.slots","dirName","04.slots","instructionsCode","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},c=(a,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!y.call(a,s)&&s!==l&&r(a,s,{get:()=>e[s],enumerable:!(o=b(e,s))||o.enumerable});return a};var x=(a,e,l)=>(l=a!=null?p(u(a)):{},c(e||!a||!a.__esModule?r(l,\"default\",{value:a,enumerable:!0}):l,a)),f=a=>c(r({},\"__esModule\",{value:!0}),a);var i=v((C,t)=>{t.exports=_jsx_runtime});var A={};k(A,{default:()=>h,frontmatter:()=>N});var n=x(i()),N=void 0;function d(a){let e={a:\"a\",code:\"code\",h1:\"h1\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...a.components},{EpicVideo:l}=e;return l||g(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Slots\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots\"}),`\n`,(0,n.jsx)(\"callout-success\",{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"One liner:\"}),` Slots allow you to specify an element which takes on a\nparticular role in the overall collection of components.`]})}),`\n`,(0,n.jsx)(e.p,{children:`This pattern is particularly useful for situations where you're building a UI\nlibrary with a lot of components that need to work together. It's a way to\nprovide a flexible API for your components that allows them to be used in a\nvariety of contexts.`}),`\n`,(0,n.jsx)(e.p,{children:`If you're building a component library, you have to deal with two competing\ninterests:`}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Correctness\"}),`\n`,(0,n.jsx)(e.li,{children:\"Flexibility\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`You want to make sure people don't mess up things like accessibility, but you\nalso want to give them the flexibility to build things the way their diverse\nneeds require. Slots can help with this.`}),`\n`,(0,n.jsxs)(e.p,{children:[`Here's a quick example of a component that uses slots (from the\n`,(0,n.jsx)(e.a,{href:\"https://react-spectrum.adobe.com/react-aria/index.html\",children:(0,n.jsx)(e.code,{children:\"react-aria\"})}),\" docs):\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CheckboxGroup\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Label\"}),\">Pets\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MyCheckbox\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"dogs\"}),'\"',\">Dogs\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MyCheckbox\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"cats\"}),'\"',\">Cats\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MyCheckbox\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"dragons\"}),'\"',\">Dragons\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"description\"}),'\"',\">Select your pets.\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:'slot=\"description\"'}),\" prop is letting the \",(0,n.jsx)(e.code,{children:\"Text\"}),` component know that it needs\nto look for special props that are meant to be used as a description. Those\nspecial props will be provided by the `,(0,n.jsx)(e.code,{children:\"CheckboxGroup\"}),\" component.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Essentially, the \",(0,n.jsx)(e.code,{children:\"CheckboxGroup\"}),` component will say: \"here's a bucket of props\nfor any component that takes on the role of a description.\" The `,(0,n.jsx)(e.code,{children:\"Text\"}),` component\nwill then say: \"Oh look, I've got a `,(0,n.jsx)(e.code,{children:\"slot\"}),\" prop that matches the \",(0,n.jsx)(e.code,{children:\"description\"}),`\nslot, so I'll use these props to render myself.\"`]}),`\n`,(0,n.jsx)(e.p,{children:\"All of this is built using context.\"}),`\n`,(0,n.jsxs)(e.p,{children:[`What this enables is a powerfully flexible capability to have components which\nare highly reusable. The `,(0,n.jsx)(e.code,{children:\"Text\"}),` component can be used in many different\ncontexts, and it can adapt to the needs of the parent component. For example,\nit's also used in react-aria's `,(0,n.jsx)(e.code,{children:\"ComboBox\"}),` components. Here's the anatomy of a\nreact-aria `,(0,n.jsx)(e.code,{children:\"ComboBox\"}),\" component:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ComboBox\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Label\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Input\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"5\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"description\"}),'\"',\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"FieldError\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Popover\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ListBox\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ListBoxItem\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"10\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"label\"}),'\"',\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"11\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"description\"}),'\"',\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Section\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Header\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ListBoxItem\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This can be used to apply appropriate \",(0,n.jsx)(e.code,{children:\"aria-\"}),\" attributes as well as \",(0,n.jsx)(e.code,{children:\"id\"}),`s and\nevent handlers. You might think about it as a way to implement compound\ncomponents in a way that doesn't require an individual component for every\nsingle use case.`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Implementation\"}),`\n`,(0,n.jsx)(e.p,{children:`Folks tend to struggle with this one a bit more than the rest, but it's simpler\nthan it seems.`}),`\n`,(0,n.jsx)(e.p,{children:\"The basic concept is your root component creates collections of props like so:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"NumberField\"}),\"({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\" }\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// setup state/events/etc\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"slots\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\tlabel: { htmlFor: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"inputId\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\tdecrement: { onClick: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"decrement\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\tincrement: { onClick: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\tdescription: { id: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"descriptionId\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\tinput: { id: \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"inputId\"}),\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"aria-describedby\"}),\"'\",\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"descriptionId\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"SlotContext\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"slots\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Then the consuming components use the \",(0,n.jsx)(e.code,{children:\"use(SlotContext)\"}),` to get access to the\n`,(0,n.jsx)(e.code,{children:\"slots\"}),\" object and pluck off the props they need to do their job:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Input\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\") {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useSlotProps\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"input\"}),\"'\",\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"useSlotProps\"}),` hook is responsible for taking the props that have been\nspecified and combining it with those from the `,(0,n.jsx)(e.code,{children:\"SlotContext\"}),\" for the named slot.\"]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function g(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(A);})();\n;return Component;","finishedCode","var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of u(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var w=(e,t,n)=>(n=e!=null?l(h(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),y=e=>c(i({},\"__esModule\",{value:!0}),e);var d=j((E,a)=>{a.exports=_jsx_runtime});var k={};_(k,{default:()=>f,frontmatter:()=>b});var o=w(d()),b=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||g(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Slots\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-slots\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} This is a really nice pattern if you find yourself building a library of\ncomponents that have a lot of common components. Great job!`})]})}function f(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function g(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(k);})();\n;return Component;","instructionsEpicVideoEmbeds",[450],"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots","finishedEpicVideoEmbeds",[453],"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-slots",[455,488,511],{"_272":289,"_270":456,"_318":476},{"_20":55,"_146":350,"_442":457,"_22":56,"_24":57,"_444":458,"_459":460,"_462":463,"_470":471,"_473":474,"_260":296,"_272":289,"_9":270,"_475":59},"01.problem.context","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of m(e))!b.call(n,d)&&d!==o&&r(n,d,{get:()=>e[d],enumerable:!(i=f(e,d))||i.enumerable});return n};var y=(n,e,o)=>(o=n!=null?u(w(n)):{},c(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),g=n=>c(r({},\"__esModule\",{value:!0}),n);var h=x((j,l)=>{l.exports=_jsx_runtime});var S={};v(S,{default:()=>p,frontmatter:()=>k});var t=y(h()),k=void 0;function s(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:o,InlineFile:i}=e;return o||a(\"EpicVideo\",!0),i||a(\"InlineFile\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Slot Context\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} It's a tale as old as time. Our \",(0,t.jsx)(e.code,{children:\"label\"}),\" and \",(0,t.jsx)(e.code,{children:\"input\"}),` are not properly\nassociated in this form and so clicking the `,(0,t.jsx)(e.code,{children:\"label\"}),\" will not focus the \",(0,t.jsx)(e.code,{children:\"input\"}),`\nas expected (in addition to other accessibility issues).`]}),`\n`,(0,t.jsxs)(e.p,{children:[`But we don't want developers to be able to make this mistake. So we've made a\n`,(0,t.jsx)(e.code,{children:\"TextField\"}),\" component which will generate the \",(0,t.jsx)(e.code,{children:\"id\"}),` for the relationship (if one\nis not provided). The tricky bit is we want people to be able to structure their\nlabel and input however they want, so we can't render the `,(0,t.jsx)(e.code,{children:\"input\"}),\" and \",(0,t.jsx)(e.code,{children:\"label\"}),`\nfor them. Instead, we want to be able to provide the `,(0,t.jsx)(e.code,{children:\"id\"}),\" and \",(0,t.jsx)(e.code,{children:\"htmlFor\"}),` props to\nthe `,(0,t.jsx)(e.code,{children:\"label\"}),\" and \",(0,t.jsx)(e.code,{children:\"input\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"So what we want you to do is first create a \",(0,t.jsx)(e.code,{children:\"SlotContext\"}),\" and \",(0,t.jsx)(e.code,{children:\"useSlotProps\"}),`\nhook in `,(0,t.jsx)(i,{file:\"slots.tsx\"}),\", then use those in the \",(0,t.jsx)(e.code,{children:\"Label\"}),` and\n`,(0,t.jsx)(e.code,{children:\"Input\"}),\" components to retrieve the necessary props.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"useSlotProps\"}),` hook should accept a props object and a slot name and return\nthe props to be applied to the element for that slot. It should merge the props\nit's been given with the props from the `,(0,t.jsx)(e.code,{children:\"SlotContext\"}),\" for that slot.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Once you've finished that, then render the \",(0,t.jsx)(e.code,{children:\"SlotContext\"}),` provider in the\n`,(0,t.jsx)(e.code,{children:\"TextField\"}),\" component in \",(0,t.jsx)(i,{file:\"text-field.tsx\"}),` to provide slot\nprops for the `,(0,t.jsx)(e.code,{children:\"label\"}),\" and \",(0,t.jsx)(e.code,{children:\"input\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:`When you're finished, the label and input should be properly associated and\nclicking the label should focus the input.`})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(s,{...n})}):s(n)}function a(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(S);})();\n;return Component;","epicVideoEmbeds",[461],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context","test",{"_9":464,"_465":466,"_467":468},"browser","pathname","/app/04.01.problem/test/","testFiles",[469],"index.test.tsx","dev",{"_9":464,"_465":472},"/app/04.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/01.problem.context?view=editor&title=Slot+Context+%28problem%29","solutionName",{"_20":59,"_146":350,"_442":477,"_22":60,"_24":61,"_444":478,"_459":479,"_462":481,"_470":484,"_473":486,"_260":296,"_272":289,"_9":318,"_487":-5},"01.solution.context","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(t,r)&&r!==n&&c(t,r,{get:()=>e[r],enumerable:!(i=l(e,r))||i.enumerable});return t};var g=(t,e,n)=>(n=t!=null?u(x(t)):{},s(e||!t||!t.__esModule?c(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>s(c({},\"__esModule\",{value:!0}),t);var p=w((y,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>h,frontmatter:()=>v});var o=g(p()),v=void 0;function d(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Slot Context\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context/solution\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} That's a great start! Now we have that in place, I think we can use this in\nour toggle component!`})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(d,{...t})}):d(t)}function E(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(M);})();\n;return Component;",[480],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context/solution",{"_9":464,"_465":482,"_467":483},"/app/04.01.solution/test/",[469],{"_9":464,"_465":485},"/app/04.01.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/01.solution.context?view=editor&title=Slot+Context+%28solution%29","problemName",{"_272":273,"_270":489,"_318":500},{"_20":63,"_146":352,"_442":490,"_22":64,"_24":65,"_444":491,"_459":492,"_462":494,"_470":497,"_473":499,"_260":296,"_272":273,"_9":270,"_475":67},"02.problem.generic","var Component=(()=>{var u=Object.create;var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!x.call(t,r)&&r!==n&&d(t,r,{get:()=>e[r],enumerable:!(i=g(e,r))||i.enumerable});return t};var y=(t,e,n)=>(n=t!=null?u(f(t)):{},c(e||!t||!t.__esModule?d(n,\"default\",{value:t,enumerable:!0}):n,t)),v=t=>c(d({},\"__esModule\",{value:!0}),t);var a=w((F,l)=>{l.exports=_jsx_runtime});var j={};b(j,{default:()=>p,frontmatter:()=>_});var o=y(a()),_=void 0;function s(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n,InlineFile:i}=e;return n||h(\"EpicVideo\",!0),i||h(\"InlineFile\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Generic Slot Components\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} You'll notice our party mode toggle button is using \",(0,o.jsx)(e.code,{children:\"useId\"}),` to properly\nassociate the toggle button with its label. We'd like to make that implicit and\nreuse the `,(0,o.jsx)(e.code,{children:\"Label\"}),\" component for the \",(0,o.jsx)(e.code,{children:\"Toggle\"}),\" as well.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Please update the \",(0,o.jsx)(e.code,{children:\"Toggle\"}),\" component in \",(0,o.jsx)(i,{file:\"toggle.tsx\"}),` to\nrender a `,(0,o.jsx)(e.code,{children:\"SlotContext\"}),\" provider (in addition to the \",(0,o.jsx)(e.code,{children:\"ToggleContext\"}),` provider\nit's already rendering) so it can provide props for a `,(0,o.jsx)(e.code,{children:\"label\"}),` slot (the slot\nname for a `,(0,o.jsx)(e.code,{children:\"Label\"}),\"). You'll also want to put the \",(0,o.jsx)(e.code,{children:\"id\"}),\" in the \",(0,o.jsx)(e.code,{children:\"ToggleContext\"}),` so\nthe `,(0,o.jsx)(e.code,{children:\"ToggleButton\"}),\" can grab it.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Once you're finished with that, you can remove the manual \",(0,o.jsx)(e.code,{children:\"id\"}),\"/\",(0,o.jsx)(e.code,{children:\"htmlFor\"}),` props\nin the `,(0,o.jsx)(i,{file:\"app.tsx\"}),\" file and the \",(0,o.jsx)(e.code,{children:\"id\"}),` should be provided\nautomatically.`]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(s,{...t})}):s(t)}function h(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(j);})();\n;return Component;",[493],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components",{"_9":464,"_465":495,"_467":496},"/app/04.02.problem/test/",[469],{"_9":464,"_465":498},"/app/04.02.problem/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/02.problem.generic?view=editor&title=Generic+Slot+Components+%28problem%29",{"_20":67,"_146":352,"_442":501,"_22":68,"_24":69,"_444":502,"_459":503,"_462":505,"_470":508,"_473":510,"_260":296,"_272":273,"_9":318,"_487":-5},"02.solution.generic","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var t in e)c(n,t,{get:e[t],enumerable:!0})},s=(n,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(n,r)&&r!==t&&c(n,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return n};var _=(n,e,t)=>(t=n!=null?u(f(n)):{},s(e||!n||!n.__esModule?c(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>s(c({},\"__esModule\",{value:!0}),n);var p=w((y,d)=>{d.exports=_jsx_runtime});var b={};g(b,{default:()=>m,frontmatter:()=>E});var o=_(p()),E=void 0;function a(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:t}=e;return t||M(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Generic Slot Components\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components/solution\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Great! Now we can reuse the \",(0,o.jsx)(e.code,{children:\"Label\"}),\" component in our set of \",(0,o.jsx)(e.code,{children:\"Toggle\"}),` compound\ncomponents. Let's go a step further with a generic `,(0,o.jsx)(e.code,{children:\"Text\"}),\" component.\"]})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(a,{...n})}):a(n)}function M(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(b);})();\n;return Component;",[504],"https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components/solution",{"_9":464,"_465":506,"_467":507},"/app/04.02.solution/test/",[469],{"_9":464,"_465":509},"/app/04.02.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/02.solution.generic?view=editor&title=Generic+Slot+Components+%28solution%29",{"_272":261,"_270":512,"_318":523},{"_20":71,"_146":354,"_442":513,"_22":72,"_24":73,"_444":514,"_459":515,"_462":517,"_470":520,"_473":522,"_260":296,"_272":261,"_9":270,"_475":75},"03.problem.prop","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var c in e)r(o,c,{get:e[c],enumerable:!0})},i=(o,e,c,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of b(e))!g.call(o,l)&&l!==c&&r(o,l,{get:()=>e[l],enumerable:!(d=f(e,l))||d.enumerable});return o};var v=(o,e,c)=>(c=o!=null?u(m(o)):{},i(e||!o||!o.__esModule?r(c,\"default\",{value:o,enumerable:!0}):c,o)),T=o=>i(r({},\"__esModule\",{value:!0}),o);var s=y((O,a)=>{a.exports=_jsx_runtime});var k={};x(k,{default:()=>p,frontmatter:()=>w});var n=v(s()),w=void 0;function h(o){let e={code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...o.components},{DiffLink:c,EpicVideo:d,InlineFile:l}=e;return c||t(\"DiffLink\",!0),d||t(\"EpicVideo\",!0),l||t(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Slot Prop\"}),`\n`,(0,n.jsx)(d,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We have \",(0,n.jsx)(e.code,{children:\"ToggleOn\"}),\" and \",(0,n.jsx)(e.code,{children:\"ToggleOff\"}),` components, but really we could make those\ncomponents a simple `,(0,n.jsx)(e.code,{children:\"Text\"}),\" component that accepts a \",(0,n.jsx)(e.code,{children:\"slot\"}),` prop. Then the\n`,(0,n.jsx)(e.code,{children:\"Toggle\"}),\" component could define the props that the individual \",(0,n.jsx)(e.code,{children:\"Text\"}),` components\nshould have based on which slot they're taking.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In fact, we could do this with the \",(0,n.jsx)(e.code,{children:\"Switch\"}),\" as well!\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2642\\uFE0F I've added \",(0,n.jsx)(e.code,{children:\"Text\"}),\" and \",(0,n.jsx)(e.code,{children:\"Switch\"}),` components to\nthe `,(0,n.jsx)(l,{file:\"slots.tsx\"}),` file for you to use. These are both already\nwired up to consume a `,(0,n.jsx)(e.code,{children:\"slot\"}),\" named \",(0,n.jsx)(e.code,{children:\"text\"}),\" and \",(0,n.jsx)(e.code,{children:\"switch\"}),`. You\ncan `,(0,n.jsx)(c,{app1:-1,children:\"check the diff\"}),\" for details.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"What we want to do in this exercise is add a \",(0,n.jsx)(e.code,{children:\"slot\"}),` prop to each of our slot\ncomponents so the slot they're taking can be defined by the parent component.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Then you'll need to update \",(0,n.jsx)(e.code,{children:\"Toggle\"}),\" to get rid of the \",(0,n.jsx)(e.code,{children:\"ToggleContext\"}),` provider\nand instead use the `,(0,n.jsx)(e.code,{children:\"SlotProvider\"}),` for all the components it wants to send props\nto:`]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"label\"}),\" - \",(0,n.jsx)(e.code,{children:\"htmlFor\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"onText\"}),\" - \",(0,n.jsx)(e.code,{children:\"hidden\"}),\" (\",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if \",(0,n.jsx)(e.code,{children:\"isOn\"}),\" is true, and \",(0,n.jsx)(e.code,{children:\"true\"}),\" if \",(0,n.jsx)(e.code,{children:\"isOn\"}),` is\n`,(0,n.jsx)(e.code,{children:\"false\"}),\")\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"offText\"}),\" - \",(0,n.jsx)(e.code,{children:\"hidden\"}),\" (\",(0,n.jsx)(e.code,{children:\"undefined\"}),\" if \",(0,n.jsx)(e.code,{children:\"isOn\"}),\" is false, and \",(0,n.jsx)(e.code,{children:\"true\"}),\" if \",(0,n.jsx)(e.code,{children:\"isOn\"}),` is\n`,(0,n.jsx)(e.code,{children:\"true\"}),\")\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"switch\"}),\" - \",(0,n.jsx)(e.code,{children:\"id\"}),\", \",(0,n.jsx)(e.code,{children:\"on\"}),\", and \",(0,n.jsx)(e.code,{children:\"onClick\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"So by the end of all of this, here's what I want the API to be like:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Toggle\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Label\"}),\">Party mode\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Switch\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"onText\"}),'\"',\">Let's party \\u{1F973}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Text\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"slot\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"offText\"}),'\"',\">Sad town \\u{1F62D}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Once that's been updated, you can delete the \",(0,n.jsx)(e.code,{children:\"useToggle\"}),` hook and the\n`,(0,n.jsx)(e.code,{children:\"ToggleOn\"}),\", \",(0,n.jsx)(e.code,{children:\"ToggleOff\"}),\", and \",(0,n.jsx)(e.code,{children:\"ToggleButton\"}),\" components.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Reusability FTW!\"})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(h,{...o})}):h(o)}function t(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return T(k);})();\n;return Component;",[516],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop",{"_9":464,"_465":518,"_467":519},"/app/04.03.problem/test/",[469],{"_9":464,"_465":521},"/app/04.03.problem/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/03.problem.prop?view=editor&title=Slot+Prop+%28problem%29",{"_20":75,"_146":354,"_442":524,"_22":76,"_24":77,"_444":525,"_459":526,"_462":528,"_470":531,"_473":533,"_260":296,"_272":261,"_9":318,"_487":-5},"03.solution.prop","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(a=f(e,r))||a.enumerable});return t};var y=(t,e,n)=>(n=t!=null?u(m(t)):{},c(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>c(s({},\"__esModule\",{value:!0}),t);var p=g((M,i)=>{i.exports=_jsx_runtime});var v={};w(v,{default:()=>h,frontmatter:()=>b});var o=y(p()),b=void 0;function d(t){let e={a:\"a\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||j(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Slot Prop\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop/solution\"}),`\n`,(0,o.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great! Now we can use the same component for multiple slots!\"}),`\n`,(0,o.jsxs)(e.p,{children:[`One thing to note is that there's not a great way to have good type safety on\nthese props, though if you're creative, you could add nice runtime errors,\n`,(0,o.jsx)(e.a,{href:\"https://github.com/adobe/react-spectrum/blob/3db98d2d378f977a88d94e9f2501feca8ef8ce51/packages/react-aria-components/src/utils.tsx#L169-L181\",children:\"for example\"}),\".\"]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(d,{...t})}):d(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(v);})();\n;return Component;",[527],"https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop/solution",{"_9":464,"_465":529,"_467":530},"/app/04.03.solution/test/",[469],{"_9":464,"_465":532},"/app/04.03.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/04.slots/03.solution.prop?view=editor&title=Slot+Prop+%28solution%29",[535,540,545],{"_20":55,"_146":350,"_442":457,"_22":56,"_24":57,"_444":458,"_459":536,"_462":537,"_470":539,"_473":474,"_260":296,"_272":289,"_9":270,"_475":59},[461],{"_9":464,"_465":466,"_467":538},[469],{"_9":464,"_465":472},{"_20":63,"_146":352,"_442":490,"_22":64,"_24":65,"_444":491,"_459":541,"_462":542,"_470":544,"_473":499,"_260":296,"_272":273,"_9":270,"_475":67},[493],{"_9":464,"_465":495,"_467":543},[469],{"_9":464,"_465":498},{"_20":71,"_146":354,"_442":513,"_22":72,"_24":73,"_444":514,"_459":546,"_462":547,"_470":549,"_473":522,"_260":296,"_272":261,"_9":270,"_475":75},[516],{"_9":464,"_465":518,"_467":548},[469],{"_9":464,"_465":521},[551,556,561],{"_20":59,"_146":350,"_442":477,"_22":60,"_24":61,"_444":478,"_459":552,"_462":553,"_470":555,"_473":486,"_260":296,"_272":289,"_9":318,"_487":-5},[480],{"_9":464,"_465":482,"_467":554},[469],{"_9":464,"_465":485},{"_20":67,"_146":352,"_442":501,"_22":68,"_24":69,"_444":502,"_459":557,"_462":558,"_470":560,"_473":510,"_260":296,"_272":273,"_9":318,"_487":-5},[504],{"_9":464,"_465":506,"_467":559},[469],{"_9":464,"_465":509},{"_20":75,"_146":354,"_442":524,"_22":76,"_24":77,"_444":525,"_459":562,"_462":563,"_470":565,"_473":533,"_260":296,"_272":261,"_9":318,"_487":-5},[527],{"_9":464,"_465":529,"_467":564},[469],{"_9":464,"_465":532},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Advanced%20React%20Patterns%20%F0%9F%A4%AF&entry.428900931=Slots","epicVideoInfosPromise",["P",569],"exerciseFinished",{"_572":573,"_24":574},"file","/myapp/workshop-content/exercises/04.slots/FINISHED.mdx","exercises/04.slots/FINISHED.mdx","prevStepLink",{"_577":578,"_579":580},"to","/exercise/04/03/solution","aria-label","Slot Prop (solution)","nextStepLink",{"_577":583,"_579":371},"/exercise/05","actionData","errors"]

04. Slots/Elaboration