react-window 2.1.0-alpha.0 → 2.1.0

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 (76) hide show
  1. package/docs/assets/{AriaRolesRoute-Dccdk77z.js → AriaRolesRoute-Bp1v1tTi.js} +2 -2
  2. package/docs/assets/{AriaRolesRoute-Dccdk77z.js.map → AriaRolesRoute-Bp1v1tTi.js.map} +1 -1
  3. package/docs/assets/{AriaRolesRoute-fNF-9P_q.js → AriaRolesRoute-CH6BGZED.js} +2 -2
  4. package/docs/assets/{AriaRolesRoute-fNF-9P_q.js.map → AriaRolesRoute-CH6BGZED.js.map} +1 -1
  5. package/docs/assets/{AriaRolesRoute-mE_5uPdh.js → AriaRolesRoute-DtxQ1Zyb.js} +2 -2
  6. package/docs/assets/{AriaRolesRoute-mE_5uPdh.js.map → AriaRolesRoute-DtxQ1Zyb.js.map} +1 -1
  7. package/docs/assets/CellComponent.example-Cmj5vj6U.js +2 -0
  8. package/docs/assets/{CellComponent.example-Fvf2fNMJ.js.map → CellComponent.example-Cmj5vj6U.js.map} +1 -1
  9. package/docs/assets/{ComponentProps-BaSDIyGM.js → ComponentProps-5QEdrETn.js} +2 -2
  10. package/docs/assets/{ComponentProps-BaSDIyGM.js.map → ComponentProps-5QEdrETn.js.map} +1 -1
  11. package/docs/assets/ContinueLink-jysYO6ZF.js +2 -0
  12. package/docs/assets/{ContinueLink-Bt_isYvF.js.map → ContinueLink-jysYO6ZF.js.map} +1 -1
  13. package/docs/assets/FixedHeightList-HNBwl6P8.js +2 -0
  14. package/docs/assets/FixedHeightList-HNBwl6P8.js.map +1 -0
  15. package/docs/assets/{FixedRowHeightsRoute-BWMCEZL9.js → FixedRowHeightsRoute-DX-Q4QkL.js} +2 -2
  16. package/docs/assets/FixedRowHeightsRoute-DX-Q4QkL.js.map +1 -0
  17. package/docs/assets/{FormattedCode-C9MIMH17.js → FormattedCode-DJTpo7zC.js} +2 -2
  18. package/docs/assets/{FormattedCode-C9MIMH17.js.map → FormattedCode-DJTpo7zC.js.map} +1 -1
  19. package/docs/assets/{GettingStartedRoute-0nhyOEdK.js → GettingStartedRoute-ImtHIz0x.js} +2 -2
  20. package/docs/assets/{GettingStartedRoute-0nhyOEdK.js.map → GettingStartedRoute-ImtHIz0x.js.map} +1 -1
  21. package/docs/assets/{Grid-CgYC2ncE.js → Grid-vld19V9I.js} +2 -2
  22. package/docs/assets/{Grid-CgYC2ncE.js.map → Grid-vld19V9I.js.map} +1 -1
  23. package/docs/assets/{Header-BdKWSvvb.js → Header-CDZFHeTb.js} +2 -2
  24. package/docs/assets/{Header-BdKWSvvb.js.map → Header-CDZFHeTb.js.map} +1 -1
  25. package/docs/assets/{HorizontalListsRoute-DBeYXDTd.js → HorizontalListsRoute-NkWYfLJB.js} +2 -2
  26. package/docs/assets/{HorizontalListsRoute-DBeYXDTd.js.map → HorizontalListsRoute-NkWYfLJB.js.map} +1 -1
  27. package/docs/assets/{ImperativeApiRoute-CVproCzF.js → ImperativeApiRoute-DcSRabeU.js} +2 -2
  28. package/docs/assets/{ImperativeApiRoute-CVproCzF.js.map → ImperativeApiRoute-DcSRabeU.js.map} +1 -1
  29. package/docs/assets/{ImperativeApiRoute-rlhH1_Qi.js → ImperativeApiRoute-UKz530Oz.js} +2 -2
  30. package/docs/assets/{ImperativeApiRoute-rlhH1_Qi.js.map → ImperativeApiRoute-UKz530Oz.js.map} +1 -1
  31. package/docs/assets/{List-CxgHSppl.js → List-BgVuV26Q.js} +2 -2
  32. package/docs/assets/{List-CxgHSppl.js.map → List-BgVuV26Q.js.map} +1 -1
  33. package/docs/assets/{LoadingSpinner-tWpMuzoA.js → LoadingSpinner-C-xNF7A_.js} +2 -2
  34. package/docs/assets/{LoadingSpinner-tWpMuzoA.js.map → LoadingSpinner-C-xNF7A_.js.map} +1 -1
  35. package/docs/assets/{PageNotFound-mw-pBfPL.js → PageNotFound-iBStRMG4.js} +2 -2
  36. package/docs/assets/{PageNotFound-mw-pBfPL.js.map → PageNotFound-iBStRMG4.js.map} +1 -1
  37. package/docs/assets/{PlatformRequirementsRoute-pGdzRelu.js → PlatformRequirementsRoute-DSVwe6jK.js} +2 -2
  38. package/docs/assets/{PlatformRequirementsRoute-pGdzRelu.js.map → PlatformRequirementsRoute-DSVwe6jK.js.map} +1 -1
  39. package/docs/assets/{PropsRoute-DV7EZjjj.js → PropsRoute-BMJ0qMWy.js} +2 -2
  40. package/docs/assets/{PropsRoute-DV7EZjjj.js.map → PropsRoute-BMJ0qMWy.js.map} +1 -1
  41. package/docs/assets/{PropsRoute-UF2eK3lu.js → PropsRoute-WR0UoUn8.js} +2 -2
  42. package/docs/assets/{PropsRoute-UF2eK3lu.js.map → PropsRoute-WR0UoUn8.js.map} +1 -1
  43. package/docs/assets/{RTLGridsRoute-CTps1hK8.js → RTLGridsRoute-BQloHP6R.js} +2 -2
  44. package/docs/assets/{RTLGridsRoute-CTps1hK8.js.map → RTLGridsRoute-BQloHP6R.js.map} +1 -1
  45. package/docs/assets/{RenderingGridRoute-pl69TsxS.js → RenderingGridRoute-Dk1bImcY.js} +2 -2
  46. package/docs/assets/{RenderingGridRoute-pl69TsxS.js.map → RenderingGridRoute-Dk1bImcY.js.map} +1 -1
  47. package/docs/assets/{ScratchpadRoute-CCWpeXMB.js → ScratchpadRoute-C2jx35Bk.js} +2 -2
  48. package/docs/assets/{ScratchpadRoute-CCWpeXMB.js.map → ScratchpadRoute-C2jx35Bk.js.map} +1 -1
  49. package/docs/assets/{Select-DqyIzw3c.js → Select-CEO0pd8j.js} +2 -2
  50. package/docs/assets/{Select-DqyIzw3c.js.map → Select-CEO0pd8j.js.map} +1 -1
  51. package/docs/assets/{StickyRowsRoute-DLva-P41.js → StickyRowsRoute-uenoNibk.js} +2 -2
  52. package/docs/assets/{StickyRowsRoute-DLva-P41.js.map → StickyRowsRoute-uenoNibk.js.map} +1 -1
  53. package/docs/assets/{SupportRoute-Do2-2OX7.js → SupportRoute-BneNHh_g.js} +2 -2
  54. package/docs/assets/{SupportRoute-Do2-2OX7.js.map → SupportRoute-BneNHh_g.js.map} +1 -1
  55. package/docs/assets/{TabularDataRoute-DPSrWaLN.js → TabularDataRoute-626oaEdE.js} +2 -2
  56. package/docs/assets/{TabularDataRoute-DPSrWaLN.js.map → TabularDataRoute-626oaEdE.js.map} +1 -1
  57. package/docs/assets/{VariableRowHeightsRoute-Di2prJCD.js → VariableRowHeightsRoute-DYGtG5ua.js} +2 -2
  58. package/docs/assets/{VariableRowHeightsRoute-Di2prJCD.js.map → VariableRowHeightsRoute-DYGtG5ua.js.map} +1 -1
  59. package/docs/assets/{arePropsEqual-U1Tm1J18.js → arePropsEqual-Bd1V-lj7.js} +2 -2
  60. package/docs/assets/{arePropsEqual-U1Tm1J18.js.map → arePropsEqual-Bd1V-lj7.js.map} +1 -1
  61. package/docs/assets/{index-0ZXvQVSH.js → index-1kZ13GgQ.js} +3 -3
  62. package/docs/assets/{index-0ZXvQVSH.js.map → index-1kZ13GgQ.js.map} +1 -1
  63. package/docs/assets/{useCitiesByState-CwP17AWg.js → useCitiesByState-CRl37uUx.js} +2 -2
  64. package/docs/assets/{useCitiesByState-CwP17AWg.js.map → useCitiesByState-CRl37uUx.js.map} +1 -1
  65. package/docs/assets/{useContacts-BUeepGdf.js → useContacts-CGODVxAU.js} +2 -2
  66. package/docs/assets/{useContacts-BUeepGdf.js.map → useContacts-CGODVxAU.js.map} +1 -1
  67. package/docs/generated/code-snippets/FixedHeightList.json +2 -2
  68. package/docs/generated/code-snippets/FixedHeightRowComponent.json +2 -2
  69. package/docs/index.html +1 -1
  70. package/docs/stats.html +1 -1
  71. package/package.json +1 -1
  72. package/docs/assets/CellComponent.example-Fvf2fNMJ.js +0 -2
  73. package/docs/assets/ContinueLink-Bt_isYvF.js +0 -2
  74. package/docs/assets/FixedHeightList-C81qGuc2.js +0 -2
  75. package/docs/assets/FixedHeightList-C81qGuc2.js.map +0 -1
  76. package/docs/assets/FixedRowHeightsRoute-BWMCEZL9.js.map +0 -1
package/docs/assets/{AriaRolesRoute-Dccdk77z.js → AriaRolesRoute-Bp1v1tTi.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{j as s,B as a,E as n}from"./index-0ZXvQVSH.js";import{F as p}from"./FormattedCode-C9MIMH17.js";import{H as t}from"./Header-BdKWSvvb.js";const c={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class="">City</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class="">State</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class="tok-punctuation">&#62;</span><span class="">Zip</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},e={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1000</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">City</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">State</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">Zip</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"rowgroup"</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">otherListProps</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Add 1 to the row index to account for the header row</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">2</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1000</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">City</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">State</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">Zip</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"rowgroup"</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">otherListProps</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-typeName">object</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Add 1 to the row index to account for the header row</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">2</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function o(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(t,{section:"Tables",title:"ARIA roles"}),s.jsxs("div",{children:["The default ARIA role set by the ",s.jsx("code",{children:"List"})," component is"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role",children:"list"})," ",", but the"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role",children:"table"})," ","role is more appropriate for tabular data."]}),s.jsx(p,{markdown:c}),s.jsx("div",{children:"The example on the previous page can be modified like so to assign the correct ARIA attributes:"}),s.jsx(p,{markdown:e})]})}export{o as default};
2
- //# sourceMappingURL=AriaRolesRoute-Dccdk77z.js.map
1
+ import{j as s,B as a,E as n}from"./index-1kZ13GgQ.js";import{F as p}from"./FormattedCode-DJTpo7zC.js";import{H as t}from"./Header-CDZFHeTb.js";const c={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class="">City</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class="">State</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class="tok-punctuation">&#62;</span><span class="">Zip</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},e={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1000</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">City</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">State</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">Zip</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"rowgroup"</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">otherListProps</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Add 1 to the row index to account for the header row</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">2</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1000</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">City</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">State</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">Zip</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"rowgroup"</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">otherListProps</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-typeName">object</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Add 1 to the row index to account for the header row</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">2</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function o(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(t,{section:"Tables",title:"ARIA roles"}),s.jsxs("div",{children:["The default ARIA role set by the ",s.jsx("code",{children:"List"})," component is"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role",children:"list"})," ",", but the"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role",children:"table"})," ","role is more appropriate for tabular data."]}),s.jsx(p,{markdown:c}),s.jsx("div",{children:"The example on the previous page can be modified like so to assign the correct ARIA attributes:"}),s.jsx(p,{markdown:e})]})}export{o as default};
2
+ //# sourceMappingURL=AriaRolesRoute-Bp1v1tTi.js.map
package/docs/assets/{AriaRolesRoute-Dccdk77z.js.map → AriaRolesRoute-Bp1v1tTi.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"AriaRolesRoute-Dccdk77z.js","sources":["../../src/routes/tables/AriaRolesRoute.tsx"],"sourcesContent":["import TableAriaAttributesMarkdown from \"../../../public/generated/code-snippets/TableAriaAttributes.json\";\nimport TableAriaOverridePropsMarkdown from \"../../../public/generated/code-snippets/TableAriaOverrideProps.json\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Tables\" title=\"ARIA roles\" />\n <div>\n The default ARIA role set by the <code>List</code> component is{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role\">\n list\n </ExternalLink>{\" \"}\n , but the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role\">\n table\n </ExternalLink>{\" \"}\n role is more appropriate for tabular data.\n </div>\n <FormattedCode markdown={TableAriaAttributesMarkdown} />\n <div>\n The example on the previous page can be modified like so to assign the\n correct ARIA attributes:\n </div>\n <FormattedCode markdown={TableAriaOverridePropsMarkdown} />\n </Box>\n );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","TableAriaAttributesMarkdown","TableAriaOverridePropsMarkdown"],"mappings":"27+BAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,SAASC,MAAM,sBAC9B,MAAA,CAAIJ,SAAA,CAAA,sCAC8BC,IAAC,QAAKD,SAAA,SAAW,gBAAc,IAChEC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,SAE/F,IAAI,YACV,IACVC,EAAAA,IAACI,EAAA,CAAaC,KAAK,6FAA6FN,SAAA,UAEhG,IAAI,kDAGtBC,IAACM,EAAA,CAAcC,SAAUC,MACzBR,IAAC,OAAID,SAAA,sGAILC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}
1
+ {"version":3,"file":"AriaRolesRoute-Bp1v1tTi.js","sources":["../../src/routes/tables/AriaRolesRoute.tsx"],"sourcesContent":["import TableAriaAttributesMarkdown from \"../../../public/generated/code-snippets/TableAriaAttributes.json\";\nimport TableAriaOverridePropsMarkdown from \"../../../public/generated/code-snippets/TableAriaOverrideProps.json\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Tables\" title=\"ARIA roles\" />\n <div>\n The default ARIA role set by the <code>List</code> component is{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role\">\n list\n </ExternalLink>{\" \"}\n , but the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role\">\n table\n </ExternalLink>{\" \"}\n role is more appropriate for tabular data.\n </div>\n <FormattedCode markdown={TableAriaAttributesMarkdown} />\n <div>\n The example on the previous page can be modified like so to assign the\n correct ARIA attributes:\n </div>\n <FormattedCode markdown={TableAriaOverridePropsMarkdown} />\n </Box>\n );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","TableAriaAttributesMarkdown","TableAriaOverridePropsMarkdown"],"mappings":"27+BAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,SAASC,MAAM,sBAC9B,MAAA,CAAIJ,SAAA,CAAA,sCAC8BC,IAAC,QAAKD,SAAA,SAAW,gBAAc,IAChEC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,SAE/F,IAAI,YACV,IACVC,EAAAA,IAACI,EAAA,CAAaC,KAAK,6FAA6FN,SAAA,UAEhG,IAAI,kDAGtBC,IAACM,EAAA,CAAcC,SAAUC,MACzBR,IAAC,OAAID,SAAA,sGAILC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}
package/docs/assets/{AriaRolesRoute-fNF-9P_q.js → AriaRolesRoute-CH6BGZED.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{j as s,B as a,E as n}from"./index-0ZXvQVSH.js";import{F as p}from"./FormattedCode-C9MIMH17.js";import{H as t}from"./Header-BdKWSvvb.js";const e={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"grid"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-string">"100"</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"0"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"gridcell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"0"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"gridcell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More columns ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},c={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">columnIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">rowIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-comment">/* Data */</span><span class="">}</span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnIndex</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowIndex</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">CellComponentProps</span><span class="">&#60;</span><span class="tok-typeName">object</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-comment">/* Data */</span><span class="">}</span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function i(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(t,{section:"Grids",title:"ARIA roles"}),s.jsxs("div",{children:["The ARIA"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/grid_role",children:"grid role"})," ","can be used to identify an element that contains one or more rows of cells."]}),s.jsx(p,{markdown:e}),s.jsxs("div",{children:["The ",s.jsx("code",{children:"Grid"})," component automatically adds this role to the root HTMLDivElement it renders, but because individual cells are rendered by your code- you must assign ARIA attributes to those elements."]}),s.jsxs("div",{children:["To simplify this, the recommended ARIA attributes are passed to the"," ",s.jsx("code",{children:"cellComponent"})," in the form of the"," ",s.jsx("code",{children:"ariaAttributes"})," prop. The easiest way to use them is just to pass them through like so:"]}),s.jsx(p,{markdown:c})]})}export{i as default};
2
- //# sourceMappingURL=AriaRolesRoute-fNF-9P_q.js.map
1
+ import{j as s,B as a,E as n}from"./index-1kZ13GgQ.js";import{F as p}from"./FormattedCode-DJTpo7zC.js";import{H as t}from"./Header-CDZFHeTb.js";const e={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"grid"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-string">"100"</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"0"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"gridcell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"0"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"gridcell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More columns ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},c={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">columnIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">rowIndex</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-comment">/* Data */</span><span class="">}</span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnIndex</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowIndex</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">CellComponentProps</span><span class="">&#60;</span><span class="tok-typeName">object</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-comment">/* Data */</span><span class="">}</span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function i(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(t,{section:"Grids",title:"ARIA roles"}),s.jsxs("div",{children:["The ARIA"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/grid_role",children:"grid role"})," ","can be used to identify an element that contains one or more rows of cells."]}),s.jsx(p,{markdown:e}),s.jsxs("div",{children:["The ",s.jsx("code",{children:"Grid"})," component automatically adds this role to the root HTMLDivElement it renders, but because individual cells are rendered by your code- you must assign ARIA attributes to those elements."]}),s.jsxs("div",{children:["To simplify this, the recommended ARIA attributes are passed to the"," ",s.jsx("code",{children:"cellComponent"})," in the form of the"," ",s.jsx("code",{children:"ariaAttributes"})," prop. The easiest way to use them is just to pass them through like so:"]}),s.jsx(p,{markdown:c})]})}export{i as default};
2
+ //# sourceMappingURL=AriaRolesRoute-CH6BGZED.js.map
package/docs/assets/{AriaRolesRoute-fNF-9P_q.js.map → AriaRolesRoute-CH6BGZED.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"AriaRolesRoute-fNF-9P_q.js","sources":["../../src/routes/grid/AriaRolesRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport GridAriaRolesMarkdown from \"../../../public/generated/code-snippets/GridAriaRoles.json\";\nimport CellComponentAriaRolesMarkdown from \"../../../public/generated/code-snippets/CellComponentAriaRoles.json\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Grids\" title=\"ARIA roles\" />\n <div>\n The ARIA{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/grid_role\">\n grid role\n </ExternalLink>{\" \"}\n can be used to identify an element that contains one or more rows of\n cells.\n </div>\n <FormattedCode markdown={GridAriaRolesMarkdown} />\n <div>\n The <code>Grid</code> component automatically adds this role to the root\n HTMLDivElement it renders, but because individual cells are rendered by\n your code- you must assign ARIA attributes to those elements.\n </div>\n <div>\n To simplify this, the recommended ARIA attributes are passed to the{\" \"}\n <code>cellComponent</code> in the form of the{\" \"}\n <code>ariaAttributes</code> prop. The easiest way to use them is just to\n pass them through like so:\n </div>\n <FormattedCode markdown={CellComponentAriaRolesMarkdown} />\n </Box>\n );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","GridAriaRolesMarkdown","CellComponentAriaRolesMarkdown"],"mappings":"otUAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,sBAC7B,MAAA,CAAIJ,SAAA,CAAA,WACM,IACTC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,cAE/F,IAAI,mFAItBC,IAACM,EAAA,CAAcC,SAAUC,WACxB,MAAA,CAAIT,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,SAAW,sMAItB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEC,IAAC,QAAKD,SAAA,kBAAoB,sBAAoB,MAC9CC,IAAC,QAAKD,SAAA,mBAAqB,gFAG7BC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}
1
+ {"version":3,"file":"AriaRolesRoute-CH6BGZED.js","sources":["../../src/routes/grid/AriaRolesRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport GridAriaRolesMarkdown from \"../../../public/generated/code-snippets/GridAriaRoles.json\";\nimport CellComponentAriaRolesMarkdown from \"../../../public/generated/code-snippets/CellComponentAriaRoles.json\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Grids\" title=\"ARIA roles\" />\n <div>\n The ARIA{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/grid_role\">\n grid role\n </ExternalLink>{\" \"}\n can be used to identify an element that contains one or more rows of\n cells.\n </div>\n <FormattedCode markdown={GridAriaRolesMarkdown} />\n <div>\n The <code>Grid</code> component automatically adds this role to the root\n HTMLDivElement it renders, but because individual cells are rendered by\n your code- you must assign ARIA attributes to those elements.\n </div>\n <div>\n To simplify this, the recommended ARIA attributes are passed to the{\" \"}\n <code>cellComponent</code> in the form of the{\" \"}\n <code>ariaAttributes</code> prop. The easiest way to use them is just to\n pass them through like so:\n </div>\n <FormattedCode markdown={CellComponentAriaRolesMarkdown} />\n </Box>\n );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","GridAriaRolesMarkdown","CellComponentAriaRolesMarkdown"],"mappings":"otUAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,sBAC7B,MAAA,CAAIJ,SAAA,CAAA,WACM,IACTC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,cAE/F,IAAI,mFAItBC,IAACM,EAAA,CAAcC,SAAUC,WACxB,MAAA,CAAIT,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,SAAW,sMAItB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEC,IAAC,QAAKD,SAAA,kBAAoB,sBAAoB,MAC9CC,IAAC,QAAKD,SAAA,mBAAqB,gFAG7BC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}
package/docs/assets/{AriaRolesRoute-mE_5uPdh.js → AriaRolesRoute-DtxQ1Zyb.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{j as s,B as a,E as n}from"./index-0ZXvQVSH.js";import{F as t}from"./FormattedCode-C9MIMH17.js";import{H as p}from"./Header-BdKWSvvb.js";const e={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"list"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"listitem"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-posinset</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-setsize</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class="">Row 1</span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"listitem"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-posinset</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-setsize</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class="">Row 2</span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},i={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">names</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">names</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">names</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function c(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(p,{section:"Lists",title:"ARIA roles"}),s.jsxs("div",{children:["The ARIA"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role",children:"list role"})," ","can be used to identify a list of items."]}),s.jsx(t,{markdown:e}),s.jsxs("div",{children:["The ",s.jsx("code",{children:"List"})," component automatically adds this role to the root HTMLDivElement it renders, but because individual rows are rendered by your code- you must assign ARIA attributes to those elements."]}),s.jsxs("div",{children:["To simplify this, the recommended ARIA attributes are passed to the"," ",s.jsx("code",{children:"rowComponent"})," in the form of the ",s.jsx("code",{children:"ariaAttributes"})," ","prop. The easiest way to use them is just to pass them through like so:"]}),s.jsx(t,{markdown:i})]})}export{c as default};
2
- //# sourceMappingURL=AriaRolesRoute-mE_5uPdh.js.map
1
+ import{j as s,B as a,E as n}from"./index-1kZ13GgQ.js";import{F as t}from"./FormattedCode-DJTpo7zC.js";import{H as p}from"./Header-CDZFHeTb.js";const e={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"list"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"listitem"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-posinset</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-setsize</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class="">Row 1</span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"listitem"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-posinset</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-setsize</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class="">Row 2</span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},i={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">names</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">names</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">names</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function c(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(p,{section:"Lists",title:"ARIA roles"}),s.jsxs("div",{children:["The ARIA"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role",children:"list role"})," ","can be used to identify a list of items."]}),s.jsx(t,{markdown:e}),s.jsxs("div",{children:["The ",s.jsx("code",{children:"List"})," component automatically adds this role to the root HTMLDivElement it renders, but because individual rows are rendered by your code- you must assign ARIA attributes to those elements."]}),s.jsxs("div",{children:["To simplify this, the recommended ARIA attributes are passed to the"," ",s.jsx("code",{children:"rowComponent"})," in the form of the ",s.jsx("code",{children:"ariaAttributes"})," ","prop. The easiest way to use them is just to pass them through like so:"]}),s.jsx(t,{markdown:i})]})}export{c as default};
2
+ //# sourceMappingURL=AriaRolesRoute-DtxQ1Zyb.js.map
package/docs/assets/{AriaRolesRoute-mE_5uPdh.js.map → AriaRolesRoute-DtxQ1Zyb.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"AriaRolesRoute-mE_5uPdh.js","sources":["../../src/routes/list/AriaRolesRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport ListAriaRolesMarkdown from \"../../../public/generated/code-snippets/ListAriaRoles.json\";\nimport RowComponentAriaRolesMarkdown from \"../../../public/generated/code-snippets/RowComponentAriaRoles.json\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Lists\" title=\"ARIA roles\" />\n <div>\n The ARIA{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role\">\n list role\n </ExternalLink>{\" \"}\n can be used to identify a list of items.\n </div>\n <FormattedCode markdown={ListAriaRolesMarkdown} />\n <div>\n The <code>List</code> component automatically adds this role to the root\n HTMLDivElement it renders, but because individual rows are rendered by\n your code- you must assign ARIA attributes to those elements.\n </div>\n <div>\n To simplify this, the recommended ARIA attributes are passed to the{\" \"}\n <code>rowComponent</code> in the form of the <code>ariaAttributes</code>{\" \"}\n prop. The easiest way to use them is just to pass them through like so:\n </div>\n <FormattedCode markdown={RowComponentAriaRolesMarkdown} />\n </Box>\n );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","ListAriaRolesMarkdown","RowComponentAriaRolesMarkdown"],"mappings":"uiXAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,sBAC7B,MAAA,CAAIJ,SAAA,CAAA,WACM,IACTC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,cAE/F,IAAI,gDAGtBC,IAACM,EAAA,CAAcC,SAAUC,WACxB,MAAA,CAAIT,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,SAAW,qMAItB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEC,IAAC,QAAKD,SAAA,iBAAmB,yBAAoBC,IAAC,QAAKD,SAAA,mBAAsB,IAAI,+EAG/EC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}
1
+ {"version":3,"file":"AriaRolesRoute-DtxQ1Zyb.js","sources":["../../src/routes/list/AriaRolesRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport ListAriaRolesMarkdown from \"../../../public/generated/code-snippets/ListAriaRoles.json\";\nimport RowComponentAriaRolesMarkdown from \"../../../public/generated/code-snippets/RowComponentAriaRoles.json\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Lists\" title=\"ARIA roles\" />\n <div>\n The ARIA{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role\">\n list role\n </ExternalLink>{\" \"}\n can be used to identify a list of items.\n </div>\n <FormattedCode markdown={ListAriaRolesMarkdown} />\n <div>\n The <code>List</code> component automatically adds this role to the root\n HTMLDivElement it renders, but because individual rows are rendered by\n your code- you must assign ARIA attributes to those elements.\n </div>\n <div>\n To simplify this, the recommended ARIA attributes are passed to the{\" \"}\n <code>rowComponent</code> in the form of the <code>ariaAttributes</code>{\" \"}\n prop. The easiest way to use them is just to pass them through like so:\n </div>\n <FormattedCode markdown={RowComponentAriaRolesMarkdown} />\n </Box>\n );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","ListAriaRolesMarkdown","RowComponentAriaRolesMarkdown"],"mappings":"uiXAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,sBAC7B,MAAA,CAAIJ,SAAA,CAAA,WACM,IACTC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,cAE/F,IAAI,gDAGtBC,IAACM,EAAA,CAAcC,SAAUC,WACxB,MAAA,CAAIT,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,SAAW,qMAItB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEC,IAAC,QAAKD,SAAA,iBAAmB,yBAAoBC,IAAC,QAAKD,SAAA,mBAAsB,IAAI,+EAG/EC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}
package/docs/assets/CellComponent.example-Cmj5vj6U.js ADDED
@@ -0,0 +1,2 @@
1
+ import{j as s}from"./index-1kZ13GgQ.js";import{i as t}from"./useContacts-CGODVxAU.js";function n({contacts:n,columnIndex:e,rowIndex:o,style:r}){const c=n[o][t(e)];return s.jsx("div",{className:"truncate",style:r,children:c})}export{n as C};
2
+ //# sourceMappingURL=CellComponent.example-Cmj5vj6U.js.map
package/docs/assets/{CellComponent.example-Fvf2fNMJ.js.map → CellComponent.example-Cmj5vj6U.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"CellComponent.example-Fvf2fNMJ.js","sources":["../../src/routes/grid/examples/CellComponent.example.tsx"],"sourcesContent":["import type { Contact } from \"./Grid.example\";\nimport { indexToColumn } from \"./shared\";\n\n// <begin>\n\nimport { type CellComponentProps } from \"react-window\";\n\nfunction CellComponent({\n contacts,\n columnIndex,\n rowIndex,\n style\n}: CellComponentProps<{\n contacts: Contact[];\n}>) {\n const address = contacts[rowIndex];\n const content = address[indexToColumn(columnIndex)];\n\n return (\n <div className=\"truncate\" style={style}>\n {content}\n </div>\n );\n}\n\n// <end>\n\nexport { CellComponent };\n"],"names":["CellComponent","contacts","columnIndex","rowIndex","style","content","indexToColumn","jsx","className","children"],"mappings":"sFAOA,SAASA,GAAcC,SACrBA,EAAAC,YACAA,EAAAC,SACAA,EAAAC,MACAA,IAIA,MACMC,EADUJ,EAASE,GACDG,EAAcJ,IAEtC,OACEK,EAAAA,IAAC,MAAA,CAAIC,UAAU,WAAWJ,QACvBK,SAAAJ,GAGP"}
1
+ {"version":3,"file":"CellComponent.example-Cmj5vj6U.js","sources":["../../src/routes/grid/examples/CellComponent.example.tsx"],"sourcesContent":["import type { Contact } from \"./Grid.example\";\nimport { indexToColumn } from \"./shared\";\n\n// <begin>\n\nimport { type CellComponentProps } from \"react-window\";\n\nfunction CellComponent({\n contacts,\n columnIndex,\n rowIndex,\n style\n}: CellComponentProps<{\n contacts: Contact[];\n}>) {\n const address = contacts[rowIndex];\n const content = address[indexToColumn(columnIndex)];\n\n return (\n <div className=\"truncate\" style={style}>\n {content}\n </div>\n );\n}\n\n// <end>\n\nexport { CellComponent };\n"],"names":["CellComponent","contacts","columnIndex","rowIndex","style","content","indexToColumn","jsx","className","children"],"mappings":"sFAOA,SAASA,GAAcC,SACrBA,EAAAC,YACAA,EAAAC,SACAA,EAAAC,MACAA,IAIA,MACMC,EADUJ,EAASE,GACDG,EAAcJ,IAEtC,OACEK,EAAAA,IAAC,MAAA,CAAIC,UAAU,WAAWJ,QACvBK,SAAAJ,GAGP"}
package/docs/assets/{ComponentProps-BaSDIyGM.js → ComponentProps-5QEdrETn.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as e,j as r,B as t,E as a}from"./index-0ZXvQVSH.js";import{H as l}from"./Header-BdKWSvvb.js";function s({title:r,titleId:t,...a},l){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:l,"aria-labelledby":t},a),r?e.createElement("title",{id:t},r):null,e.createElement("path",{fillRule:"evenodd",d:"M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z",clipRule:"evenodd"}),e.createElement("path",{fillRule:"evenodd",d:"M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z",clipRule:"evenodd"}))}const n=e.forwardRef(s),o={url:"https://github.com/bvaughn/react-window.git"};function i({json:t}){const{optionalProps:a,requiredProps:l}=e.useMemo(()=>function(e){const r=[],t=[];return Object.values(e.props).forEach(e=>{e.required?t.push(e):r.push(e)}),r.sort((e,r)=>e.name.localeCompare(r.name)),t.sort((e,r)=>e.name.localeCompare(r.name)),{optionalProps:r,requiredProps:t}}(t),[t]);return r.jsxs(r.Fragment,{children:[r.jsx(c,{header:"Required props",props:l}),r.jsx(c,{header:"Optional props",props:a})]})}function c({header:e,props:t}){return 0===t.length?null:r.jsxs("div",{children:[r.jsx("div",{className:"text-lg font-bold mt-2",children:e}),r.jsx("dl",{children:t.map(e=>r.jsxs("div",{children:[r.jsx("dt",{className:"mt-2 pl-4 indent-[-1rem]",children:r.jsxs("code",{className:"tok-operator",children:[r.jsx("span",{className:"tok-propertyName",children:e.name}),e.required||"?",":"," ","raw"in e.type?e.type.raw:e.type.name,e.defaultValue&&r.jsxs(r.Fragment,{children:[" = ",r.jsx("span",{className:"text-white",children:e.defaultValue.value})]})]})}),r.jsx("dd",{className:"ml-4 [&_code]:text-sky-300",dangerouslySetInnerHTML:{__html:e.description.replaceAll("\n- ","<br/>• ").replaceAll("\n\n","<br/><br/>").replaceAll(/`([^`]+)`/g,"<code>$1</code>")}})]},e.name))})]})}function d({json:e,section:s}){return r.jsxs(r.Fragment,{children:[r.jsxs(t,{align:"center",direction:"row",gap:2,wrap:!0,children:[r.jsx(l,{section:s,title:"Component props"}),r.jsx(a,{className:"text-sm text-emerald-300 hover:text-white",href:`${o.url.replace(".git","")}/blob/master/${e.filePath}`,children:r.jsx(n,{className:"inline-block size-4 fill-current"})})]}),r.jsx(i,{json:e})]})}export{d as C};
2
- //# sourceMappingURL=ComponentProps-BaSDIyGM.js.map
1
+ import{r as e,j as r,B as t,E as a}from"./index-1kZ13GgQ.js";import{H as l}from"./Header-CDZFHeTb.js";function s({title:r,titleId:t,...a},l){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:l,"aria-labelledby":t},a),r?e.createElement("title",{id:t},r):null,e.createElement("path",{fillRule:"evenodd",d:"M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z",clipRule:"evenodd"}),e.createElement("path",{fillRule:"evenodd",d:"M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z",clipRule:"evenodd"}))}const n=e.forwardRef(s),o={url:"https://github.com/bvaughn/react-window.git"};function i({json:t}){const{optionalProps:a,requiredProps:l}=e.useMemo(()=>function(e){const r=[],t=[];return Object.values(e.props).forEach(e=>{e.required?t.push(e):r.push(e)}),r.sort((e,r)=>e.name.localeCompare(r.name)),t.sort((e,r)=>e.name.localeCompare(r.name)),{optionalProps:r,requiredProps:t}}(t),[t]);return r.jsxs(r.Fragment,{children:[r.jsx(c,{header:"Required props",props:l}),r.jsx(c,{header:"Optional props",props:a})]})}function c({header:e,props:t}){return 0===t.length?null:r.jsxs("div",{children:[r.jsx("div",{className:"text-lg font-bold mt-2",children:e}),r.jsx("dl",{children:t.map(e=>r.jsxs("div",{children:[r.jsx("dt",{className:"mt-2 pl-4 indent-[-1rem]",children:r.jsxs("code",{className:"tok-operator",children:[r.jsx("span",{className:"tok-propertyName",children:e.name}),e.required||"?",":"," ","raw"in e.type?e.type.raw:e.type.name,e.defaultValue&&r.jsxs(r.Fragment,{children:[" = ",r.jsx("span",{className:"text-white",children:e.defaultValue.value})]})]})}),r.jsx("dd",{className:"ml-4 [&_code]:text-sky-300",dangerouslySetInnerHTML:{__html:e.description.replaceAll("\n- ","<br/>• ").replaceAll("\n\n","<br/><br/>").replaceAll(/`([^`]+)`/g,"<code>$1</code>")}})]},e.name))})]})}function d({json:e,section:s}){return r.jsxs(r.Fragment,{children:[r.jsxs(t,{align:"center",direction:"row",gap:2,wrap:!0,children:[r.jsx(l,{section:s,title:"Component props"}),r.jsx(a,{className:"text-sm text-emerald-300 hover:text-white",href:`${o.url.replace(".git","")}/blob/master/${e.filePath}`,children:r.jsx(n,{className:"inline-block size-4 fill-current"})})]}),r.jsx(i,{json:e})]})}export{d as C};
2
+ //# sourceMappingURL=ComponentProps-5QEdrETn.js.map