@wordpress/components 28.4.0 → 28.5.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 (250) hide show
  1. package/CHANGELOG.md +31 -1
  2. package/build/autocomplete/autocompleter-ui.js +2 -0
  3. package/build/autocomplete/autocompleter-ui.js.map +1 -1
  4. package/build/base-control/styles/base-control-styles.js +8 -8
  5. package/build/base-control/styles/base-control-styles.js.map +1 -1
  6. package/build/border-control/styles.js +18 -24
  7. package/build/border-control/styles.js.map +1 -1
  8. package/build/color-palette/index.js +1 -1
  9. package/build/color-palette/index.js.map +1 -1
  10. package/build/custom-select-control/index.js +37 -14
  11. package/build/custom-select-control/index.js.map +1 -1
  12. package/build/custom-select-control/types.js.map +1 -1
  13. package/build/custom-select-control-v2/styles.js +9 -9
  14. package/build/custom-select-control-v2/styles.js.map +1 -1
  15. package/build/date-time/index.js +0 -7
  16. package/build/date-time/index.js.map +1 -1
  17. package/build/date-time/time/index.js +66 -38
  18. package/build/date-time/time/index.js.map +1 -1
  19. package/build/date-time/time/styles.js +11 -11
  20. package/build/date-time/time/styles.js.map +1 -1
  21. package/build/date-time/{time-input → time/time-input}/index.js +7 -7
  22. package/build/date-time/time/time-input/index.js.map +1 -0
  23. package/build/dropdown-menu-v2/styles.js +14 -14
  24. package/build/dropdown-menu-v2/styles.js.map +1 -1
  25. package/build/form-toggle/index.js +24 -24
  26. package/build/form-toggle/index.js.map +1 -1
  27. package/build/guide/index.js +2 -0
  28. package/build/guide/index.js.map +1 -1
  29. package/build/heading/types.js.map +1 -1
  30. package/build/modal/index.js +18 -11
  31. package/build/modal/index.js.map +1 -1
  32. package/build/query-controls/index.js +1 -1
  33. package/build/query-controls/index.js.map +1 -1
  34. package/build/radio-control/index.js +35 -8
  35. package/build/radio-control/index.js.map +1 -1
  36. package/build/radio-control/types.js.map +1 -1
  37. package/build/select-control/index.js +20 -8
  38. package/build/select-control/index.js.map +1 -1
  39. package/build/select-control/types.js.map +1 -1
  40. package/build/text-control/index.js +1 -0
  41. package/build/text-control/index.js.map +1 -1
  42. package/build/toggle-control/index.js +27 -25
  43. package/build/toggle-control/index.js.map +1 -1
  44. package/build/toggle-group-control/toggle-group-control/component.js +6 -1
  45. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  46. package/build/toggle-group-control/toggle-group-control-option/component.js +6 -1
  47. package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  48. package/build/toggle-group-control/toggle-group-control-option-icon/component.js +14 -14
  49. package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  50. package/build/tooltip/index.js +12 -1
  51. package/build/tooltip/index.js.map +1 -1
  52. package/build/tree-select/index.js +1 -2
  53. package/build/tree-select/index.js.map +1 -1
  54. package/build/utils/config-values.js +6 -0
  55. package/build/utils/config-values.js.map +1 -1
  56. package/build-module/autocomplete/autocompleter-ui.js +2 -0
  57. package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
  58. package/build-module/base-control/styles/base-control-styles.js +8 -8
  59. package/build-module/base-control/styles/base-control-styles.js.map +1 -1
  60. package/build-module/border-control/styles.js +13 -23
  61. package/build-module/border-control/styles.js.map +1 -1
  62. package/build-module/color-palette/index.js +1 -1
  63. package/build-module/color-palette/index.js.map +1 -1
  64. package/build-module/custom-select-control/index.js +38 -14
  65. package/build-module/custom-select-control/index.js.map +1 -1
  66. package/build-module/custom-select-control/types.js.map +1 -1
  67. package/build-module/custom-select-control-v2/styles.js +9 -9
  68. package/build-module/custom-select-control-v2/styles.js.map +1 -1
  69. package/build-module/date-time/index.js +1 -2
  70. package/build-module/date-time/index.js.map +1 -1
  71. package/build-module/date-time/time/index.js +66 -38
  72. package/build-module/date-time/time/index.js.map +1 -1
  73. package/build-module/date-time/time/styles.js +11 -11
  74. package/build-module/date-time/time/styles.js.map +1 -1
  75. package/build-module/date-time/{time-input → time/time-input}/index.js +7 -7
  76. package/build-module/date-time/time/time-input/index.js.map +1 -0
  77. package/build-module/dropdown-menu-v2/styles.js +14 -14
  78. package/build-module/dropdown-menu-v2/styles.js.map +1 -1
  79. package/build-module/form-toggle/index.js +23 -22
  80. package/build-module/form-toggle/index.js.map +1 -1
  81. package/build-module/guide/index.js +2 -0
  82. package/build-module/guide/index.js.map +1 -1
  83. package/build-module/heading/types.js.map +1 -1
  84. package/build-module/modal/index.js +17 -11
  85. package/build-module/modal/index.js.map +1 -1
  86. package/build-module/query-controls/index.js +1 -1
  87. package/build-module/query-controls/index.js.map +1 -1
  88. package/build-module/radio-control/index.js +36 -10
  89. package/build-module/radio-control/index.js.map +1 -1
  90. package/build-module/radio-control/types.js.map +1 -1
  91. package/build-module/select-control/index.js +20 -8
  92. package/build-module/select-control/index.js.map +1 -1
  93. package/build-module/select-control/types.js.map +1 -1
  94. package/build-module/text-control/index.js +1 -0
  95. package/build-module/text-control/index.js.map +1 -1
  96. package/build-module/toggle-control/index.js +26 -24
  97. package/build-module/toggle-control/index.js.map +1 -1
  98. package/build-module/toggle-group-control/toggle-group-control/component.js +6 -1
  99. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  100. package/build-module/toggle-group-control/toggle-group-control-option/component.js +6 -1
  101. package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  102. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +14 -14
  103. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  104. package/build-module/tooltip/index.js +13 -2
  105. package/build-module/tooltip/index.js.map +1 -1
  106. package/build-module/tree-select/index.js +1 -2
  107. package/build-module/tree-select/index.js.map +1 -1
  108. package/build-module/utils/config-values.js +6 -0
  109. package/build-module/utils/config-values.js.map +1 -1
  110. package/build-style/style-rtl.css +60 -24
  111. package/build-style/style.css +60 -24
  112. package/build-types/autocomplete/autocompleter-ui.d.ts.map +1 -1
  113. package/build-types/border-control/styles.d.ts.map +1 -1
  114. package/build-types/button/stories/e2e/index.story.d.ts.map +1 -1
  115. package/build-types/color-palette/index.d.ts.map +1 -1
  116. package/build-types/color-palette/styles.d.ts +2 -2
  117. package/build-types/color-picker/styles.d.ts +3 -1
  118. package/build-types/color-picker/styles.d.ts.map +1 -1
  119. package/build-types/custom-select-control/index.d.ts +2 -2
  120. package/build-types/custom-select-control/index.d.ts.map +1 -1
  121. package/build-types/custom-select-control/stories/index.story.d.ts +3 -3
  122. package/build-types/custom-select-control/stories/index.story.d.ts.map +1 -1
  123. package/build-types/custom-select-control/types.d.ts +7 -7
  124. package/build-types/custom-select-control/types.d.ts.map +1 -1
  125. package/build-types/custom-select-control-v2/styles.d.ts +16 -28
  126. package/build-types/custom-select-control-v2/styles.d.ts.map +1 -1
  127. package/build-types/date-time/date/styles.d.ts +2 -2
  128. package/build-types/date-time/index.d.ts +1 -2
  129. package/build-types/date-time/index.d.ts.map +1 -1
  130. package/build-types/date-time/stories/time.story.d.ts +5 -0
  131. package/build-types/date-time/stories/time.story.d.ts.map +1 -1
  132. package/build-types/date-time/time/index.d.ts +3 -0
  133. package/build-types/date-time/time/index.d.ts.map +1 -1
  134. package/build-types/date-time/time/styles.d.ts.map +1 -1
  135. package/build-types/date-time/{time-input → time/time-input}/index.d.ts +1 -1
  136. package/build-types/date-time/time/time-input/index.d.ts.map +1 -0
  137. package/build-types/date-time/time/time-input/test/index.d.ts.map +1 -0
  138. package/build-types/dropdown-menu-v2/styles.d.ts +24 -42
  139. package/build-types/dropdown-menu-v2/styles.d.ts.map +1 -1
  140. package/build-types/form-toggle/index.d.ts +2 -5
  141. package/build-types/form-toggle/index.d.ts.map +1 -1
  142. package/build-types/guide/index.d.ts.map +1 -1
  143. package/build-types/heading/component.d.ts +1 -1
  144. package/build-types/heading/types.d.ts +1 -1
  145. package/build-types/heading/types.d.ts.map +1 -1
  146. package/build-types/modal/index.d.ts.map +1 -1
  147. package/build-types/navigation/styles/navigation-styles.d.ts +2 -2
  148. package/build-types/palette-edit/styles.d.ts +2 -2
  149. package/build-types/query-controls/index.d.ts.map +1 -1
  150. package/build-types/radio-control/index.d.ts.map +1 -1
  151. package/build-types/radio-control/stories/index.story.d.ts +1 -0
  152. package/build-types/radio-control/stories/index.story.d.ts.map +1 -1
  153. package/build-types/radio-control/test/index.d.ts +2 -0
  154. package/build-types/radio-control/test/index.d.ts.map +1 -0
  155. package/build-types/radio-control/types.d.ts +4 -0
  156. package/build-types/radio-control/types.d.ts.map +1 -1
  157. package/build-types/select-control/index.d.ts +4 -1
  158. package/build-types/select-control/index.d.ts.map +1 -1
  159. package/build-types/select-control/stories/index.story.d.ts +9 -3
  160. package/build-types/select-control/stories/index.story.d.ts.map +1 -1
  161. package/build-types/select-control/types.d.ts +27 -27
  162. package/build-types/select-control/types.d.ts.map +1 -1
  163. package/build-types/tabs/styles.d.ts +8 -14
  164. package/build-types/tabs/styles.d.ts.map +1 -1
  165. package/build-types/text-control/index.d.ts +1 -0
  166. package/build-types/text-control/index.d.ts.map +1 -1
  167. package/build-types/toggle-control/index.d.ts +3 -9
  168. package/build-types/toggle-control/index.d.ts.map +1 -1
  169. package/build-types/toggle-group-control/toggle-group-control/component.d.ts +6 -1
  170. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  171. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts +6 -1
  172. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
  173. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +14 -14
  174. package/build-types/tooltip/index.d.ts.map +1 -1
  175. package/build-types/tooltip/test/utils/index.d.ts +1 -5
  176. package/build-types/tooltip/test/utils/index.d.ts.map +1 -1
  177. package/build-types/tree-select/index.d.ts +1 -1
  178. package/build-types/tree-select/index.d.ts.map +1 -1
  179. package/build-types/utils/config-values.d.ts +6 -0
  180. package/package.json +20 -20
  181. package/src/alignment-matrix-control/test/index.tsx +1 -3
  182. package/src/autocomplete/autocompleter-ui.tsx +2 -0
  183. package/src/autocomplete/style.scss +0 -6
  184. package/src/base-control/styles/base-control-styles.ts +1 -1
  185. package/src/border-control/styles.ts +0 -5
  186. package/src/button/stories/e2e/index.story.tsx +103 -21
  187. package/src/button/style.scss +49 -21
  188. package/src/button/test/index.tsx +18 -40
  189. package/src/circular-option-picker/test/index.tsx +1 -4
  190. package/src/color-palette/index.tsx +22 -20
  191. package/src/composite/legacy/test/index.tsx +2 -18
  192. package/src/custom-select-control/index.tsx +55 -25
  193. package/src/custom-select-control/test/index.tsx +47 -30
  194. package/src/custom-select-control/types.ts +7 -7
  195. package/src/custom-select-control-v2/styles.ts +7 -6
  196. package/src/custom-select-control-v2/test/index.tsx +15 -19
  197. package/src/date-time/index.ts +1 -2
  198. package/src/date-time/stories/time.story.tsx +17 -0
  199. package/src/date-time/time/index.tsx +46 -16
  200. package/src/date-time/time/styles.ts +1 -0
  201. package/src/date-time/{time-input → time/time-input}/index.tsx +9 -9
  202. package/src/dropdown-menu-v2/styles.ts +18 -17
  203. package/src/dropdown-menu-v2/test/index.tsx +1 -4
  204. package/src/font-size-picker/test/index.tsx +50 -43
  205. package/src/form-toggle/index.tsx +23 -21
  206. package/src/guide/index.tsx +2 -0
  207. package/src/heading/types.ts +1 -4
  208. package/src/modal/index.tsx +21 -20
  209. package/src/placeholder/style.scss +11 -2
  210. package/src/query-controls/index.tsx +5 -1
  211. package/src/radio-control/index.tsx +48 -7
  212. package/src/radio-control/stories/index.story.tsx +23 -0
  213. package/src/radio-control/style.scss +26 -2
  214. package/src/radio-control/test/index.tsx +274 -0
  215. package/src/radio-control/types.ts +4 -0
  216. package/src/select-control/README.md +8 -1
  217. package/src/select-control/index.tsx +33 -22
  218. package/src/select-control/test/select-control.tsx +148 -4
  219. package/src/select-control/types.ts +70 -65
  220. package/src/tab-panel/test/index.tsx +1 -8
  221. package/src/tabs/test/index.tsx +68 -84
  222. package/src/text-control/README.md +1 -0
  223. package/src/text-control/index.tsx +1 -0
  224. package/src/text-control/style.scss +5 -0
  225. package/src/toggle-control/README.md +9 -0
  226. package/src/toggle-control/index.tsx +25 -22
  227. package/src/toggle-control/style.scss +2 -1
  228. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +6 -6
  229. package/src/toggle-group-control/test/index.tsx +0 -6
  230. package/src/toggle-group-control/toggle-group-control/README.md +13 -1
  231. package/src/toggle-group-control/toggle-group-control/component.tsx +6 -1
  232. package/src/toggle-group-control/toggle-group-control-option/README.md +6 -1
  233. package/src/toggle-group-control/toggle-group-control-option/component.tsx +6 -1
  234. package/src/toggle-group-control/toggle-group-control-option-icon/README.md +1 -1
  235. package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +14 -14
  236. package/src/tooltip/index.tsx +15 -2
  237. package/src/tooltip/test/index.tsx +0 -5
  238. package/src/tooltip/test/utils/index.tsx +5 -5
  239. package/src/tree-select/index.tsx +1 -2
  240. package/src/utils/config-values.js +6 -0
  241. package/tsconfig.tsbuildinfo +1 -1
  242. package/build/date-time/time-input/index.js.map +0 -1
  243. package/build-module/date-time/time-input/index.js.map +0 -1
  244. package/build-types/date-time/stories/time-input.story.d.ts +0 -12
  245. package/build-types/date-time/stories/time-input.story.d.ts.map +0 -1
  246. package/build-types/date-time/time-input/index.d.ts.map +0 -1
  247. package/build-types/date-time/time-input/test/index.d.ts.map +0 -1
  248. package/src/date-time/stories/time-input.story.tsx +0 -36
  249. /package/build-types/date-time/{time-input → time/time-input}/test/index.d.ts +0 -0
  250. /package/src/date-time/{time-input → time/time-input}/test/index.tsx +0 -0
@@ -1 +1 @@
1
- {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_react2","_utils","_space","_icon","_interopRequireDefault","_truncate","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_EMOTION_STRINGIFIED_CSS_ERROR__","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","space","ITEM_PADDING_BLOCK","ITEM_PADDING_INLINE","DEFAULT_BORDER_COLOR","COLORS","gray","DIVIDER_COLOR","TOOLBAR_VARIANT_BORDER_COLOR","DEFAULT_BOX_SHADOW","CONFIG","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","GRID_TEMPLATE_COLS","slideUpAndFade","keyframes","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","DropdownMenu","exports","_base","Menu","process","env","NODE_ENV","target","label","ui","background","props","css","variant","baseItem","font","radiusBlockUi","textDisabled","theme","accent","white","DropdownMenuItem","MenuItem","DropdownMenuCheckboxItem","MenuItemCheckbox","DropdownMenuRadioItem","MenuItemRadio","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuGroup","MenuGroup","name","styles","map","toString","DropdownMenuSeparator","MenuSeparator","SubmenuChevronIcon","Icon","rtl","DropdownMenuItemLabel","Truncate","DropdownMenuItemHelpText"],"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport Icon from '../icon';\nimport { Truncate } from '../truncate';\nimport type { DropdownMenuContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 1 );\nconst ITEM_PADDING_BLOCK = space( 2 );\nconst ITEM_PADDING_INLINE = space( 3 );\n\n// TODO:\n// - those values are different from saved variables?\n// - should bring this into the config, and make themeable\n// - border color and divider color are different?\nconst DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];\nconst DIVIDER_COLOR = COLORS.gray[ 200 ];\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';\n\nconst slideUpAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideRightAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideLeftAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nexport const DropdownMenu = styled( Ariakit.Menu )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\tposition: relative;\n\t/* Same as popover component */\n\t/* TODO: is there a way to read the sass variable? */\n\tz-index: 1000000;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\tgrid-template-rows: auto;\n\n\tbox-sizing: border-box;\n\tmin-width: 160px;\n\tmax-width: 320px;\n\tmax-height: var( --popover-available-height );\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: 4px;\n\t${ ( props ) => css`\n\t\tbox-shadow: ${ props.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t\t: DEFAULT_BOX_SHADOW };\n\t` }\n\n\toverscroll-behavior: contain;\n\toverflow: auto;\n\n\t/* Only visible in Windows High Contrast mode */\n\toutline: 2px solid transparent !important;\n\n\t/* Animation */\n\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\twill-change: transform, opacity;\n\t/* Default animation.*/\n\tanimation-name: ${ slideDownAndFade };\n\n\t&[data-side='left'] {\n\t\tanimation-name: ${ slideLeftAndFade };\n\t}\n\t&[data-side='up'] {\n\t\tanimation-name: ${ slideUpAndFade };\n\t}\n\t&[data-side='right'] {\n\t\tanimation-name: ${ slideRightAndFade };\n\t}\n\t@media ( prefers-reduced-motion ) {\n\t\tanimation-duration: 0s;\n\t}\n`;\n\nconst baseItem = css`\n\tall: unset;\n\n\tposition: relative;\n\tmin-height: ${ space( 10 ) };\n\tbox-sizing: border-box;\n\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\talign-items: center;\n\n\t@supports ( grid-template-columns: subgrid ) {\n\t\t/*\n\t\t * Define a grid layout which inherits the same columns configuration\n\t\t * from the parent layout (ie. subgrid). This allows the menu\n\t\t * to synchronize the indentation of all its items.\n\t\t */\n\t\tgrid-template-columns: subgrid;\n\t}\n\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\n\tpadding-block: ${ ITEM_PADDING_BLOCK };\n\tpadding-inline: ${ ITEM_PADDING_INLINE };\n\n\t/*\n\t * Make sure that, when an item is scrolled into view (eg. while using the\n\t * keyboard to move focus), the whole item comes into view\n\t */\n\tscroll-margin: ${ CONTENT_WRAPPER_PADDING };\n\n\tuser-select: none;\n\toutline: none;\n\n\t&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.ui.textDisabled };\n\t\tcursor: not-allowed;\n\t}\n\n\t/* Hover */\n\t&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t) {\n\t\tbackground-color: ${ COLORS.theme.accent };\n\t\tcolor: ${ COLORS.white };\n\t}\n\n\t/* Keyboard focus (focus-visible) */\n\t&[data-focus-visible] {\n\t\tbox-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };\n\n\t\t/* Only visible in Windows High Contrast mode */\n\t\toutline: 2px solid transparent;\n\t}\n\n\t/* Active (ie. pressed, mouse down) */\n\t&:active,\n\t&[data-active] {\n\t\t/* TODO: should there be a visual active state? */\n\t}\n\n\t/* When the item is the trigger of an open submenu */\n\t${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded=\"true\"] {\n\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n`;\n\nexport const DropdownMenuItem = styled( Ariakit.MenuItem )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`\n\t${ baseItem };\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t/* Always occupy the first column, even when auto-collapsing */\n\tgrid-column: 1;\n\n\t/*\n\t * Even when the item is not checked, occupy the same screen space to avoid\n\t * the space collapside when no items are checked.\n\t */\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > & {\n\t\t/* Same width as the check icons */\n\t\tmin-width: ${ space( 6 ) };\n\t}\n\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > &,\n\t&:not( :empty ) {\n\t\tmargin-inline-end: ${ space( 2 ) };\n\t}\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t/*\n\t* When the parent menu item is active, except when it's a non-focused/hovered\n\t* submenu trigger (in that case, color should not be inherited)\n\t*/\n\t[data-active-item]:not( [data-focus-visible] ) > &,\n\t/* When the parent menu item is disabled */\n\t[aria-disabled='true'] > & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuItemContentWrapper = styled.div`\n\t/*\n\t * Always occupy the second column, since the first column\n\t * is taken by the prefix wrapper (when displayed).\n\t */\n\tgrid-column: 2;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: ${ space( 3 ) };\n\n\tpointer-events: none;\n`;\n\nexport const DropdownMenuItemChildrenWrapper = styled.div`\n\tflex: 1;\n\n\tdisplay: inline-flex;\n\tflex-direction: column;\n\tgap: ${ space( 1 ) };\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\tflex: 0 1 fit-content;\n\tmin-width: 0;\n\twidth: fit-content;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: ${ space( 3 ) };\n\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t/*\n\t * When the parent menu item is active, except when it's a non-focused/hovered\n\t * submenu trigger (in that case, color should not be inherited)\n\t */\n\t[data-active-item]:not( [data-focus-visible] ) *:not(${ DropdownMenu }) &,\n\t/* When the parent menu item is disabled */\n\t[aria-disabled='true'] *:not(${ DropdownMenu }) & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuGroup = styled( Ariakit.MenuGroup )`\n\t/* Ignore this element when calculating the layout. Useful for subgrid */\n\tdisplay: contents;\n`;\n\nexport const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tborder: none;\n\theight: ${ CONFIG.borderWidth };\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DIVIDER_COLOR };\n\t/* Align with menu items' content */\n\tmargin-block: ${ space( 2 ) };\n\tmargin-inline: ${ ITEM_PADDING_INLINE };\n\n\t/* Only visible in Windows High Contrast mode */\n\toutline: 2px solid transparent;\n`;\n\nexport const SubmenuChevronIcon = styled( Icon )`\n\twidth: ${ space( 1.5 ) };\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1)`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1)`,\n\t\t}\n\t) };\n`;\n\nexport const DropdownMenuItemLabel = styled( Truncate )`\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tline-height: 20px;\n\tcolor: inherit;\n`;\n\nexport const DropdownMenuItemHelpText = styled( Truncate )`\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tline-height: 16px;\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,\n\t[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {\n\t\tcolor: inherit;\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_react2","_utils","_space","_icon","_interopRequireDefault","_truncate","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_EMOTION_STRINGIFIED_CSS_ERROR__","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","space","ITEM_PADDING_BLOCK","ITEM_PADDING_INLINE","DEFAULT_BORDER_COLOR","COLORS","gray","DIVIDER_COLOR","TOOLBAR_VARIANT_BORDER_COLOR","DEFAULT_BOX_SHADOW","CONFIG","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","GRID_TEMPLATE_COLS","slideUpAndFade","keyframes","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","DropdownMenu","exports","_base","Menu","process","env","NODE_ENV","target","label","ui","background","props","css","variant","baseItem","font","radiusBlockUi","textDisabled","theme","accent","white","DropdownMenuItem","MenuItem","DropdownMenuCheckboxItem","MenuItemCheckbox","DropdownMenuRadioItem","MenuItemRadio","ItemPrefixWrapper","DropdownMenuItemContentWrapper","DropdownMenuItemChildrenWrapper","ItemSuffixWrapper","DropdownMenuGroup","MenuGroup","name","styles","map","toString","DropdownMenuSeparator","MenuSeparator","SubmenuChevronIcon","Icon","rtl","DropdownMenuItemLabel","Truncate","DropdownMenuItemHelpText"],"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport Icon from '../icon';\nimport { Truncate } from '../truncate';\nimport type { DropdownMenuContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 1 );\nconst ITEM_PADDING_BLOCK = space( 2 );\nconst ITEM_PADDING_INLINE = space( 3 );\n\n// TODO:\n// - those values are different from saved variables?\n// - should bring this into the config, and make themeable\n// - border color and divider color are different?\nconst DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];\nconst DIVIDER_COLOR = COLORS.gray[ 200 ];\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';\n\nconst slideUpAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideRightAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideLeftAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nexport const DropdownMenu = styled( Ariakit.Menu )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\tposition: relative;\n\t/* Same as popover component */\n\t/* TODO: is there a way to read the sass variable? */\n\tz-index: 1000000;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\tgrid-template-rows: auto;\n\n\tbox-sizing: border-box;\n\tmin-width: 160px;\n\tmax-width: 320px;\n\tmax-height: var( --popover-available-height );\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: 4px;\n\t${ ( props ) => css`\n\t\tbox-shadow: ${ props.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t\t: DEFAULT_BOX_SHADOW };\n\t` }\n\n\toverscroll-behavior: contain;\n\toverflow: auto;\n\n\t/* Only visible in Windows High Contrast mode */\n\toutline: 2px solid transparent !important;\n\n\t/* Animation */\n\t&[data-open] {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\t\t\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\t\t\twill-change: transform, opacity;\n\t\t\t/* Default animation.*/\n\t\t\tanimation-name: ${ slideDownAndFade };\n\t\t\t&[data-side='left'] {\n\t\t\t\tanimation-name: ${ slideLeftAndFade };\n\t\t\t}\n\t\t\t&[data-side='up'] {\n\t\t\t\tanimation-name: ${ slideUpAndFade };\n\t\t\t}\n\t\t\t&[data-side='right'] {\n\t\t\t\tanimation-name: ${ slideRightAndFade };\n\t\t\t}\n\t\t}\n\t}\n`;\n\nconst baseItem = css`\n\tall: unset;\n\n\tposition: relative;\n\tmin-height: ${ space( 10 ) };\n\tbox-sizing: border-box;\n\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tdisplay: grid;\n\tgrid-template-columns: ${ GRID_TEMPLATE_COLS };\n\talign-items: center;\n\n\t@supports ( grid-template-columns: subgrid ) {\n\t\t/*\n\t\t * Define a grid layout which inherits the same columns configuration\n\t\t * from the parent layout (ie. subgrid). This allows the menu\n\t\t * to synchronize the indentation of all its items.\n\t\t */\n\t\tgrid-template-columns: subgrid;\n\t}\n\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\n\tpadding-block: ${ ITEM_PADDING_BLOCK };\n\tpadding-inline: ${ ITEM_PADDING_INLINE };\n\n\t/*\n\t * Make sure that, when an item is scrolled into view (eg. while using the\n\t * keyboard to move focus), the whole item comes into view\n\t */\n\tscroll-margin: ${ CONTENT_WRAPPER_PADDING };\n\n\tuser-select: none;\n\toutline: none;\n\n\t&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.ui.textDisabled };\n\t\tcursor: not-allowed;\n\t}\n\n\t/* Hover */\n\t&[data-active-item]:not( [data-focus-visible] ):not(\n\t\t\t[aria-disabled='true']\n\t\t) {\n\t\tbackground-color: ${ COLORS.theme.accent };\n\t\tcolor: ${ COLORS.white };\n\t}\n\n\t/* Keyboard focus (focus-visible) */\n\t&[data-focus-visible] {\n\t\tbox-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };\n\n\t\t/* Only visible in Windows High Contrast mode */\n\t\toutline: 2px solid transparent;\n\t}\n\n\t/* Active (ie. pressed, mouse down) */\n\t&:active,\n\t&[data-active] {\n\t\t/* TODO: should there be a visual active state? */\n\t}\n\n\t/* When the item is the trigger of an open submenu */\n\t${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded=\"true\"] {\n\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n`;\n\nexport const DropdownMenuItem = styled( Ariakit.MenuItem )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`\n\t${ baseItem };\n`;\n\nexport const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`\n\t${ baseItem };\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t/* Always occupy the first column, even when auto-collapsing */\n\tgrid-column: 1;\n\n\t/*\n\t * Even when the item is not checked, occupy the same screen space to avoid\n\t * the space collapside when no items are checked.\n\t */\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > & {\n\t\t/* Same width as the check icons */\n\t\tmin-width: ${ space( 6 ) };\n\t}\n\n\t${ DropdownMenuCheckboxItem } > &,\n\t${ DropdownMenuRadioItem } > &,\n\t&:not( :empty ) {\n\t\tmargin-inline-end: ${ space( 2 ) };\n\t}\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t/*\n\t* When the parent menu item is active, except when it's a non-focused/hovered\n\t* submenu trigger (in that case, color should not be inherited)\n\t*/\n\t[data-active-item]:not( [data-focus-visible] ) > &,\n\t/* When the parent menu item is disabled */\n\t[aria-disabled='true'] > & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuItemContentWrapper = styled.div`\n\t/*\n\t * Always occupy the second column, since the first column\n\t * is taken by the prefix wrapper (when displayed).\n\t */\n\tgrid-column: 2;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: ${ space( 3 ) };\n\n\tpointer-events: none;\n`;\n\nexport const DropdownMenuItemChildrenWrapper = styled.div`\n\tflex: 1;\n\n\tdisplay: inline-flex;\n\tflex-direction: column;\n\tgap: ${ space( 1 ) };\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\tflex: 0 1 fit-content;\n\tmin-width: 0;\n\twidth: fit-content;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: ${ space( 3 ) };\n\n\tcolor: ${ COLORS.gray[ '700' ] };\n\n\t/*\n\t * When the parent menu item is active, except when it's a non-focused/hovered\n\t * submenu trigger (in that case, color should not be inherited)\n\t */\n\t[data-active-item]:not( [data-focus-visible] ) *:not(${ DropdownMenu }) &,\n\t/* When the parent menu item is disabled */\n\t[aria-disabled='true'] *:not(${ DropdownMenu }) & {\n\t\tcolor: inherit;\n\t}\n`;\n\nexport const DropdownMenuGroup = styled( Ariakit.MenuGroup )`\n\t/* Ignore this element when calculating the layout. Useful for subgrid */\n\tdisplay: contents;\n`;\n\nexport const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<\n\tPick< DropdownMenuContext, 'variant' >\n>`\n\t/* Occupy the width of all grid columns (ie. full width) */\n\tgrid-column: 1 / -1;\n\n\tborder: none;\n\theight: ${ CONFIG.borderWidth };\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DIVIDER_COLOR };\n\t/* Align with menu items' content */\n\tmargin-block: ${ space( 2 ) };\n\tmargin-inline: ${ ITEM_PADDING_INLINE };\n\n\t/* Only visible in Windows High Contrast mode */\n\toutline: 2px solid transparent;\n`;\n\nexport const SubmenuChevronIcon = styled( Icon )`\n\twidth: ${ space( 1.5 ) };\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1)`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1)`,\n\t\t}\n\t) };\n`;\n\nexport const DropdownMenuItemLabel = styled( Truncate )`\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tline-height: 20px;\n\tcolor: inherit;\n`;\n\nexport const DropdownMenuItemHelpText = styled( Truncate )`\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tline-height: 16px;\n\tcolor: ${ COLORS.gray[ '700' ] };\n\tword-break: break-all;\n\n\t[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,\n\t[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {\n\t\tcolor: inherit;\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}
@@ -4,8 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.FormToggle = FormToggle;
8
- exports.noop = exports.default = void 0;
7
+ exports.noop = exports.default = exports.FormToggle = void 0;
9
8
  var _clsx = _interopRequireDefault(require("clsx"));
10
9
  var _element = require("@wordpress/element");
11
10
  var _jsxRuntime = require("react/jsx-runtime");
@@ -22,28 +21,8 @@ var _jsxRuntime = require("react/jsx-runtime");
22
21
  */
23
22
 
24
23
  const noop = () => {};
25
-
26
- /**
27
- * FormToggle switches a single setting on or off.
28
- *
29
- * ```jsx
30
- * import { FormToggle } from '@wordpress/components';
31
- * import { useState } from '@wordpress/element';
32
- *
33
- * const MyFormToggle = () => {
34
- * const [ isChecked, setChecked ] = useState( true );
35
- *
36
- * return (
37
- * <FormToggle
38
- * checked={ isChecked }
39
- * onChange={ () => setChecked( ( state ) => ! state ) }
40
- * />
41
- * );
42
- * };
43
- * ```
44
- */
45
24
  exports.noop = noop;
46
- function FormToggle(props, ref) {
25
+ function UnforwardedFormToggle(props, ref) {
47
26
  const {
48
27
  className,
49
28
  checked,
@@ -74,5 +53,26 @@ function FormToggle(props, ref) {
74
53
  })]
75
54
  });
76
55
  }
77
- var _default = exports.default = (0, _element.forwardRef)(FormToggle);
56
+
57
+ /**
58
+ * FormToggle switches a single setting on or off.
59
+ *
60
+ * ```jsx
61
+ * import { FormToggle } from '@wordpress/components';
62
+ * import { useState } from '@wordpress/element';
63
+ *
64
+ * const MyFormToggle = () => {
65
+ * const [ isChecked, setChecked ] = useState( true );
66
+ *
67
+ * return (
68
+ * <FormToggle
69
+ * checked={ isChecked }
70
+ * onChange={ () => setChecked( ( state ) => ! state ) }
71
+ * />
72
+ * );
73
+ * };
74
+ * ```
75
+ */
76
+ const FormToggle = exports.FormToggle = (0, _element.forwardRef)(UnforwardedFormToggle);
77
+ var _default = exports.default = FormToggle;
78
78
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_jsxRuntime","noop","exports","FormToggle","props","ref","className","checked","id","disabled","onChange","additionalProps","wrapperClasses","clsx","jsxs","children","jsx","type","_default","default","forwardRef"],"sources":["@wordpress/components/src/form-toggle/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { FormToggleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const noop = () => {};\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n * const [ isChecked, setChecked ] = useState( true );\n *\n * return (\n * <FormToggle\n * checked={ isChecked }\n * onChange={ () => setChecked( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport function FormToggle(\n\tprops: WordPressComponentProps< FormToggleProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tchecked,\n\t\tid,\n\t\tdisabled,\n\t\tonChange = noop,\n\t\t...additionalProps\n\t} = props;\n\tconst wrapperClasses = clsx( 'components-form-toggle', className, {\n\t\t'is-checked': checked,\n\t\t'is-disabled': disabled,\n\t} );\n\n\treturn (\n\t\t<span className={ wrapperClasses }>\n\t\t\t<input\n\t\t\t\tclassName=\"components-form-toggle__input\"\n\t\t\t\tid={ id }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...additionalProps }\n\t\t\t\tref={ ref }\n\t\t\t/>\n\t\t\t<span className=\"components-form-toggle__track\"></span>\n\t\t\t<span className=\"components-form-toggle__thumb\"></span>\n\t\t</span>\n\t);\n}\n\nexport default forwardRef( FormToggle );\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAAgD,IAAAE,WAAA,GAAAF,OAAA;AAThD;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,MAAMG,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBAC,OAAA,CAAAD,IAAA,GAAAA,IAAA;AAmBO,SAASE,UAAUA,CACzBC,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,SAAS;IACTC,OAAO;IACPC,EAAE;IACFC,QAAQ;IACRC,QAAQ,GAAGT,IAAI;IACf,GAAGU;EACJ,CAAC,GAAGP,KAAK;EACT,MAAMQ,cAAc,GAAG,IAAAC,aAAI,EAAE,wBAAwB,EAAEP,SAAS,EAAE;IACjE,YAAY,EAAEC,OAAO;IACrB,aAAa,EAAEE;EAChB,CAAE,CAAC;EAEH,oBACC,IAAAT,WAAA,CAAAc,IAAA;IAAMR,SAAS,EAAGM,cAAgB;IAAAG,QAAA,gBACjC,IAAAf,WAAA,CAAAgB,GAAA;MACCV,SAAS,EAAC,+BAA+B;MACzCE,EAAE,EAAGA,EAAI;MACTS,IAAI,EAAC,UAAU;MACfV,OAAO,EAAGA,OAAS;MACnBG,QAAQ,EAAGA,QAAU;MACrBD,QAAQ,EAAGA,QAAU;MAAA,GAChBE,eAAe;MACpBN,GAAG,EAAGA;IAAK,CACX,CAAC,eACF,IAAAL,WAAA,CAAAgB,GAAA;MAAMV,SAAS,EAAC;IAA+B,CAAO,CAAC,eACvD,IAAAN,WAAA,CAAAgB,GAAA;MAAMV,SAAS,EAAC;IAA+B,CAAO,CAAC;EAAA,CAClD,CAAC;AAET;AAAC,IAAAY,QAAA,GAAAhB,OAAA,CAAAiB,OAAA,GAEc,IAAAC,mBAAU,EAAEjB,UAAW,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_jsxRuntime","noop","exports","UnforwardedFormToggle","props","ref","className","checked","id","disabled","onChange","additionalProps","wrapperClasses","clsx","jsxs","children","jsx","type","FormToggle","forwardRef","_default","default"],"sources":["@wordpress/components/src/form-toggle/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { FormToggleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport const noop = () => {};\n\nfunction UnforwardedFormToggle(\n\tprops: WordPressComponentProps< FormToggleProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tchecked,\n\t\tid,\n\t\tdisabled,\n\t\tonChange = noop,\n\t\t...additionalProps\n\t} = props;\n\tconst wrapperClasses = clsx( 'components-form-toggle', className, {\n\t\t'is-checked': checked,\n\t\t'is-disabled': disabled,\n\t} );\n\n\treturn (\n\t\t<span className={ wrapperClasses }>\n\t\t\t<input\n\t\t\t\tclassName=\"components-form-toggle__input\"\n\t\t\t\tid={ id }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...additionalProps }\n\t\t\t\tref={ ref }\n\t\t\t/>\n\t\t\t<span className=\"components-form-toggle__track\"></span>\n\t\t\t<span className=\"components-form-toggle__thumb\"></span>\n\t\t</span>\n\t);\n}\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n * const [ isChecked, setChecked ] = useState( true );\n *\n * return (\n * <FormToggle\n * checked={ isChecked }\n * onChange={ () => setChecked( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport const FormToggle = forwardRef( UnforwardedFormToggle );\n\nexport default FormToggle;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAAgD,IAAAE,WAAA,GAAAF,OAAA;AAThD;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,MAAMG,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAACC,OAAA,CAAAD,IAAA,GAAAA,IAAA;AAE7B,SAASE,qBAAqBA,CAC7BC,KAAiE,EACjEC,GAAqC,EACpC;EACD,MAAM;IACLC,SAAS;IACTC,OAAO;IACPC,EAAE;IACFC,QAAQ;IACRC,QAAQ,GAAGT,IAAI;IACf,GAAGU;EACJ,CAAC,GAAGP,KAAK;EACT,MAAMQ,cAAc,GAAG,IAAAC,aAAI,EAAE,wBAAwB,EAAEP,SAAS,EAAE;IACjE,YAAY,EAAEC,OAAO;IACrB,aAAa,EAAEE;EAChB,CAAE,CAAC;EAEH,oBACC,IAAAT,WAAA,CAAAc,IAAA;IAAMR,SAAS,EAAGM,cAAgB;IAAAG,QAAA,gBACjC,IAAAf,WAAA,CAAAgB,GAAA;MACCV,SAAS,EAAC,+BAA+B;MACzCE,EAAE,EAAGA,EAAI;MACTS,IAAI,EAAC,UAAU;MACfV,OAAO,EAAGA,OAAS;MACnBG,QAAQ,EAAGA,QAAU;MACrBD,QAAQ,EAAGA,QAAU;MAAA,GAChBE,eAAe;MACpBN,GAAG,EAAGA;IAAK,CACX,CAAC,eACF,IAAAL,WAAA,CAAAgB,GAAA;MAAMV,SAAS,EAAC;IAA+B,CAAO,CAAC,eACvD,IAAAN,WAAA,CAAAgB,GAAA;MAAMV,SAAS,EAAC;IAA+B,CAAO,CAAC;EAAA,CAClD,CAAC;AAET;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,UAAU,GAAAhB,OAAA,CAAAgB,UAAA,GAAG,IAAAC,mBAAU,EAAEhB,qBAAsB,CAAC;AAAC,IAAAiB,QAAA,GAAAlB,OAAA,CAAAmB,OAAA,GAE/CH,UAAU","ignoreList":[]}
@@ -135,11 +135,13 @@ function Guide({
135
135
  className: "components-guide__back-button",
136
136
  variant: "tertiary",
137
137
  onClick: goBack,
138
+ __next40pxDefaultSize: true,
138
139
  children: (0, _i18n.__)('Previous')
139
140
  }), canGoForward && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
140
141
  className: "components-guide__forward-button",
141
142
  variant: "primary",
142
143
  onClick: goForward,
144
+ __next40pxDefaultSize: true,
143
145
  children: (0, _i18n.__)('Next')
144
146
  }), !canGoForward && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
145
147
  className: "components-guide__finish-button",
@@ -1 +1 @@
1
- {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_deprecated","_i18n","_modal","_button","_pageControl","_jsxRuntime","Guide","children","className","contentLabel","finishButtonText","__","onFinish","pages","ref","useRef","currentPage","setCurrentPage","useState","useEffect","frame","current","querySelector","HTMLElement","focus","Children","count","deprecated","since","alternative","_Children$map","map","child","content","canGoBack","canGoForward","length","goBack","goForward","jsx","default","clsx","isDismissible","onRequestClose","onKeyDown","event","code","preventDefault","jsxs","image","numberOfPages","variant","onClick","_default","exports"],"sources":["@wordpress/components/src/guide/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ clsx( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_deprecated","_i18n","_modal","_button","_pageControl","_jsxRuntime","Guide","children","className","contentLabel","finishButtonText","__","onFinish","pages","ref","useRef","currentPage","setCurrentPage","useState","useEffect","frame","current","querySelector","HTMLElement","focus","Children","count","deprecated","since","alternative","_Children$map","map","child","content","canGoBack","canGoForward","length","goBack","goForward","jsx","default","clsx","isDismissible","onRequestClose","onKeyDown","event","code","preventDefault","jsxs","image","numberOfPages","variant","onClick","__next40pxDefaultSize","_default","exports"],"sources":["@wordpress/components/src/guide/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ clsx( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default Guide;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["@wordpress/components/src/heading/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Props as TextProps } from '../text/types';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport type HeadingProps = Omit<\n\tTextProps,\n\t'size' | 'isBlock' | 'color' | 'weight'\n> & {\n\t/**\n\t * Passing any of the heading levels to `level` will both render the correct\n\t * typographic text size as well as the semantic element corresponding to\n\t * the level (`h1` for `1` for example).\n\t *\n\t * @default 2\n\t */\n\tlevel?: HeadingSize;\n\t/**\n\t * Sets `Heading` to have `display: block`. Note: text truncation only works\n\t * when `isBlock` is `false`.\n\t *\n\t * @default true\n\t */\n\tisBlock?: TextProps[ 'isBlock' ];\n\t/**\n\t * Adjusts the text color.\n\t *\n\t * @default '#1e1e1e'\n\t */\n\tcolor?: TextProps[ 'color' ];\n\t/**\n\t * Adjusts font-weight of the text.\n\t *\n\t * @default '600'\n\t */\n\tweight?: TextProps[ 'weight' ];\n};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/heading/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Props as TextProps } from '../text/types';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport type HeadingProps = Omit< TextProps, 'isBlock' | 'color' | 'weight' > & {\n\t/**\n\t * Passing any of the heading levels to `level` will both render the correct\n\t * typographic text size as well as the semantic element corresponding to\n\t * the level (`h1` for `1` for example).\n\t *\n\t * @default 2\n\t */\n\tlevel?: HeadingSize;\n\t/**\n\t * Sets `Heading` to have `display: block`. Note: text truncation only works\n\t * when `isBlock` is `false`.\n\t *\n\t * @default true\n\t */\n\tisBlock?: TextProps[ 'isBlock' ];\n\t/**\n\t * Adjusts the text color.\n\t *\n\t * @default '#1e1e1e'\n\t */\n\tcolor?: TextProps[ 'color' ];\n\t/**\n\t * Adjusts font-weight of the text.\n\t *\n\t * @default '600'\n\t */\n\tweight?: TextProps[ 'weight' ];\n};\n"],"mappings":"","ignoreList":[]}
@@ -31,7 +31,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
31
31
  */
32
32
 
33
33
  // Used to track and dismiss the prior modal when another opens unless nested.
34
- const ModalContext = (0, _element.createContext)([]);
34
+
35
+ const ModalContext = (0, _element.createContext)(new Set());
35
36
 
36
37
  // Used to track body class names applied while modals are open.
37
38
  const bodyOpenClasses = new Map();
@@ -118,22 +119,28 @@ function UnforwardedModal(props, forwardedRef) {
118
119
  // one should remain open at a time and the list enables closing prior ones.
119
120
  const dismissers = (0, _element.useContext)(ModalContext);
120
121
  // Used for the tracking and dismissing any nested modals.
121
- const nestedDismissers = (0, _element.useRef)([]);
122
+ const [nestedDismissers] = (0, _element.useState)(() => new Set());
122
123
 
123
124
  // Updates the stack tracking open modals at this level and calls
124
125
  // onRequestClose for any prior and/or nested modals as applicable.
125
126
  (0, _element.useEffect)(() => {
126
- dismissers.push(refOnRequestClose);
127
- const [first, second] = dismissers;
128
- if (second) {
129
- first?.current?.();
127
+ // add this modal instance to the dismissers set
128
+ dismissers.add(refOnRequestClose);
129
+ // request that all the other modals close themselves
130
+ for (const dismisser of dismissers) {
131
+ if (dismisser !== refOnRequestClose) {
132
+ dismisser.current?.();
133
+ }
130
134
  }
131
- const nested = nestedDismissers.current;
132
135
  return () => {
133
- nested[0]?.current?.();
134
- dismissers.shift();
136
+ // request that all the nested modals close themselves
137
+ for (const dismisser of nestedDismissers) {
138
+ dismisser.current?.();
139
+ }
140
+ // remove this modal instance from the dismissers set
141
+ dismissers.delete(refOnRequestClose);
135
142
  };
136
- }, [dismissers]);
143
+ }, [dismissers, nestedDismissers]);
137
144
 
138
145
  // Adds/removes the value of bodyOpenClassName to body element.
139
146
  (0, _element.useEffect)(() => {
@@ -266,7 +273,7 @@ function UnforwardedModal(props, forwardedRef) {
266
273
  })
267
274
  });
268
275
  return (0, _element.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContext.Provider, {
269
- value: nestedDismissers.current,
276
+ value: nestedDismissers,
270
277
  children: modal
271
278
  }), document.body);
272
279
  }
@@ -1 +1 @@
1
- {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_compose","_i18n","_icons","_dom","ariaHelper","_interopRequireWildcard","_button","_styleProvider","_withIgnoreImeEvents","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ModalContext","createContext","bodyOpenClasses","Map","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","size","headerActions","__experimentalHideHeader","ref","useRef","instanceId","useInstanceId","Modal","headingId","focusOnMountRef","useFocusOnMount","constrainedTabbingRef","useConstrainedTabbing","focusReturnRef","useFocusReturn","contentRef","childrenContainerRef","hasScrolledContent","setHasScrolledContent","useState","hasScrollableContent","setHasScrollableContent","sizeClass","isContentScrollable","useCallback","current","closestScrollContainer","getScrollContainer","useEffect","modalize","unmodalize","refOnRequestClose","dismissers","useContext","nestedDismissers","push","first","second","nested","shift","_bodyOpenClasses$get","theClass","oneMore","document","body","classList","add","oneLess","remove","delete","useLayoutEffect","window","ResizeObserver","resizeObserver","observe","disconnect","handleEscapeKeyDown","event","code","key","defaultPrevented","preventDefault","onContentContainerScroll","_e$currentTarget$scro","scrollY","currentTarget","scrollTop","pressTarget","overlayPressHandlers","onPointerDown","target","onPointerUp","button","isSameTarget","modal","jsx","useMergeRefs","clsx","withIgnoreIMEEvents","tabIndex","jsxs","onScroll","__","id","onClick","close","label","createPortal","Provider","value","exports","forwardRef","_default"],"sources":["@wordpress/components/src/modal/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type {\n\tForwardedRef,\n\tKeyboardEvent,\n\tMutableRefObject,\n\tUIEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n\tuseLayoutEffect,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\nconst ModalContext = createContext<\n\tMutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]\n>( [] );\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map< string, number >();\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\tsize,\n\t\theaderActions = null,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\n\t// The focus hook does not support 'firstContentElement' but this is a valid\n\t// value for the Modal's focusOnMount prop. The following code ensures the focus\n\t// hook will focus the first focusable node within the element to which it is applied.\n\t// When `firstContentElement` is passed as the value of the focusOnMount prop,\n\t// the focus hook is applied to the Modal's content element.\n\t// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n\t// focus hook will focus the first element in the Modal's **content** when\n\t// `firstContentElement` is passed.\n\tconst focusOnMountRef = useFocusOnMount(\n\t\tfocusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount\n\t);\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst childrenContainerRef = useRef< HTMLDivElement >( null );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\tconst [ hasScrollableContent, setHasScrollableContent ] = useState( false );\n\n\tlet sizeClass;\n\tif ( isFullScreen || size === 'fill' ) {\n\t\tsizeClass = 'is-full-screen';\n\t} else if ( size ) {\n\t\tsizeClass = `has-size-${ size }`;\n\t}\n\n\t// Determines whether the Modal content is scrollable and updates the state.\n\tconst isContentScrollable = useCallback( () => {\n\t\tif ( ! contentRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestScrollContainer = getScrollContainer( contentRef.current );\n\n\t\tif ( contentRef.current === closestScrollContainer ) {\n\t\t\tsetHasScrollableContent( true );\n\t\t} else {\n\t\t\tsetHasScrollableContent( false );\n\t\t}\n\t}, [ contentRef ] );\n\n\t// Accessibly isolates/unisolates the modal.\n\tuseEffect( () => {\n\t\tariaHelper.modalize( ref.current );\n\t\treturn () => ariaHelper.unmodalize();\n\t}, [] );\n\n\t// Keeps a fresh ref for the subsequent effect.\n\tconst refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();\n\tuseEffect( () => {\n\t\trefOnRequestClose.current = onRequestClose;\n\t}, [ onRequestClose ] );\n\n\t// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n\t// one should remain open at a time and the list enables closing prior ones.\n\tconst dismissers = useContext( ModalContext );\n\t// Used for the tracking and dismissing any nested modals.\n\tconst nestedDismissers = useRef< typeof dismissers >( [] );\n\n\t// Updates the stack tracking open modals at this level and calls\n\t// onRequestClose for any prior and/or nested modals as applicable.\n\tuseEffect( () => {\n\t\tdismissers.push( refOnRequestClose );\n\t\tconst [ first, second ] = dismissers;\n\t\tif ( second ) {\n\t\t\tfirst?.current?.();\n\t\t}\n\n\t\tconst nested = nestedDismissers.current;\n\t\treturn () => {\n\t\t\tnested[ 0 ]?.current?.();\n\t\t\tdismissers.shift();\n\t\t};\n\t}, [ dismissers ] );\n\n\t// Adds/removes the value of bodyOpenClassName to body element.\n\tuseEffect( () => {\n\t\tconst theClass = bodyOpenClassName;\n\t\tconst oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );\n\t\tbodyOpenClasses.set( theClass, oneMore );\n\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\treturn () => {\n\t\t\tconst oneLess = bodyOpenClasses.get( theClass )! - 1;\n\t\t\tif ( oneLess === 0 ) {\n\t\t\t\tdocument.body.classList.remove( theClass );\n\t\t\t\tbodyOpenClasses.delete( theClass );\n\t\t\t} else {\n\t\t\t\tbodyOpenClasses.set( theClass, oneLess );\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\t// Calls the isContentScrollable callback when the Modal children container resizes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! window.ResizeObserver || ! childrenContainerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( isContentScrollable );\n\t\tresizeObserver.observe( childrenContainerRef.current );\n\n\t\tisContentScrollable();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [ isContentScrollable, childrenContainerRef ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\t( event.code === 'Escape' || event.key === 'Escape' ) &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\tlet pressTarget: EventTarget | null = null;\n\tconst overlayPressHandlers: {\n\t\tonPointerDown: React.PointerEventHandler< HTMLDivElement >;\n\t\tonPointerUp: React.PointerEventHandler< HTMLDivElement >;\n\t} = {\n\t\tonPointerDown: ( event ) => {\n\t\t\tif ( event.target === event.currentTarget ) {\n\t\t\t\tpressTarget = event.target;\n\t\t\t\t// Avoids focus changing so that focus return works as expected.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t// Closes the modal with two exceptions. 1. Opening the context menu on\n\t\t// the overlay. 2. Pressing on the overlay then dragging the pointer\n\t\t// over the modal and releasing. Due to the modal being a child of the\n\t\t// overlay, such a gesture is a `click` on the overlay and cannot be\n\t\t// excepted by a `click` handler. Thus the tactic of handling\n\t\t// `pointerup` and comparing its target to that of the `pointerdown`.\n\t\tonPointerUp: ( { target, button } ) => {\n\t\t\tconst isSameTarget = target === pressTarget;\n\t\t\tpressTarget = null;\n\t\t\tif ( button === 0 && isSameTarget ) {\n\t\t\t\tonRequestClose();\n\t\t\t}\n\t\t},\n\t};\n\n\tconst modal = (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }\n\t\t\t{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tsizeClass,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMount !== 'firstContentElement'\n\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'is-scrollable': hasScrollableContent,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t\tref={ contentRef }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\thasScrollableContent\n\t\t\t\t\t\t\t\t? __( 'Scrollable section' )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttabIndex={ hasScrollableContent ? 0 : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ headerActions }\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel || __( 'Close' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\t\t\tchildrenContainerRef,\n\t\t\t\t\t\t\t\tfocusOnMount === 'firstContentElement'\n\t\t\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\t\t] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>\n\t);\n\n\treturn createPortal(\n\t\t<ModalContext.Provider value={ nestedDismissers.current }>\n\t\t\t{ modal }\n\t\t</ModalContext.Provider>,\n\t\tdocument.body\n\t);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n * const [ isOpen, setOpen ] = useState( false );\n * const openModal = () => setOpen( true );\n * const closeModal = () => setOpen( false );\n *\n * return (\n * <>\n * <Button variant=\"secondary\" onClick={ openModal }>\n * Open Modal\n * </Button>\n * { isOpen && (\n * <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n * <Button variant=\"secondary\" onClick={ closeModal }>\n * My custom close button\n * </Button>\n * </Modal>\n * ) }\n * </>\n * );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_compose","_i18n","_icons","_dom","ariaHelper","_interopRequireWildcard","_button","_styleProvider","_withIgnoreImeEvents","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ModalContext","createContext","Set","bodyOpenClasses","Map","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","size","headerActions","__experimentalHideHeader","ref","useRef","instanceId","useInstanceId","Modal","headingId","focusOnMountRef","useFocusOnMount","constrainedTabbingRef","useConstrainedTabbing","focusReturnRef","useFocusReturn","contentRef","childrenContainerRef","hasScrolledContent","setHasScrolledContent","useState","hasScrollableContent","setHasScrollableContent","sizeClass","isContentScrollable","useCallback","current","closestScrollContainer","getScrollContainer","useEffect","modalize","unmodalize","refOnRequestClose","dismissers","useContext","nestedDismissers","add","dismisser","delete","_bodyOpenClasses$get","theClass","oneMore","document","body","classList","oneLess","remove","useLayoutEffect","window","ResizeObserver","resizeObserver","observe","disconnect","handleEscapeKeyDown","event","code","key","defaultPrevented","preventDefault","onContentContainerScroll","_e$currentTarget$scro","scrollY","currentTarget","scrollTop","pressTarget","overlayPressHandlers","onPointerDown","target","onPointerUp","button","isSameTarget","modal","jsx","useMergeRefs","clsx","withIgnoreIMEEvents","tabIndex","jsxs","onScroll","__","id","onClick","close","label","createPortal","Provider","value","exports","forwardRef","_default"],"sources":["@wordpress/components/src/modal/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef, KeyboardEvent, RefObject, UIEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n\tuseLayoutEffect,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\ntype Dismissers = Set<\n\tRefObject< ModalProps[ 'onRequestClose' ] | undefined >\n>;\nconst ModalContext = createContext< Dismissers >( new Set() );\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map< string, number >();\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\tsize,\n\t\theaderActions = null,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\n\t// The focus hook does not support 'firstContentElement' but this is a valid\n\t// value for the Modal's focusOnMount prop. The following code ensures the focus\n\t// hook will focus the first focusable node within the element to which it is applied.\n\t// When `firstContentElement` is passed as the value of the focusOnMount prop,\n\t// the focus hook is applied to the Modal's content element.\n\t// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n\t// focus hook will focus the first element in the Modal's **content** when\n\t// `firstContentElement` is passed.\n\tconst focusOnMountRef = useFocusOnMount(\n\t\tfocusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount\n\t);\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst childrenContainerRef = useRef< HTMLDivElement >( null );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\tconst [ hasScrollableContent, setHasScrollableContent ] = useState( false );\n\n\tlet sizeClass;\n\tif ( isFullScreen || size === 'fill' ) {\n\t\tsizeClass = 'is-full-screen';\n\t} else if ( size ) {\n\t\tsizeClass = `has-size-${ size }`;\n\t}\n\n\t// Determines whether the Modal content is scrollable and updates the state.\n\tconst isContentScrollable = useCallback( () => {\n\t\tif ( ! contentRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestScrollContainer = getScrollContainer( contentRef.current );\n\n\t\tif ( contentRef.current === closestScrollContainer ) {\n\t\t\tsetHasScrollableContent( true );\n\t\t} else {\n\t\t\tsetHasScrollableContent( false );\n\t\t}\n\t}, [ contentRef ] );\n\n\t// Accessibly isolates/unisolates the modal.\n\tuseEffect( () => {\n\t\tariaHelper.modalize( ref.current );\n\t\treturn () => ariaHelper.unmodalize();\n\t}, [] );\n\n\t// Keeps a fresh ref for the subsequent effect.\n\tconst refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();\n\tuseEffect( () => {\n\t\trefOnRequestClose.current = onRequestClose;\n\t}, [ onRequestClose ] );\n\n\t// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n\t// one should remain open at a time and the list enables closing prior ones.\n\tconst dismissers = useContext( ModalContext );\n\t// Used for the tracking and dismissing any nested modals.\n\tconst [ nestedDismissers ] = useState< Dismissers >( () => new Set() );\n\n\t// Updates the stack tracking open modals at this level and calls\n\t// onRequestClose for any prior and/or nested modals as applicable.\n\tuseEffect( () => {\n\t\t// add this modal instance to the dismissers set\n\t\tdismissers.add( refOnRequestClose );\n\t\t// request that all the other modals close themselves\n\t\tfor ( const dismisser of dismissers ) {\n\t\t\tif ( dismisser !== refOnRequestClose ) {\n\t\t\t\tdismisser.current?.();\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\t// request that all the nested modals close themselves\n\t\t\tfor ( const dismisser of nestedDismissers ) {\n\t\t\t\tdismisser.current?.();\n\t\t\t}\n\t\t\t// remove this modal instance from the dismissers set\n\t\t\tdismissers.delete( refOnRequestClose );\n\t\t};\n\t}, [ dismissers, nestedDismissers ] );\n\n\t// Adds/removes the value of bodyOpenClassName to body element.\n\tuseEffect( () => {\n\t\tconst theClass = bodyOpenClassName;\n\t\tconst oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );\n\t\tbodyOpenClasses.set( theClass, oneMore );\n\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\treturn () => {\n\t\t\tconst oneLess = bodyOpenClasses.get( theClass )! - 1;\n\t\t\tif ( oneLess === 0 ) {\n\t\t\t\tdocument.body.classList.remove( theClass );\n\t\t\t\tbodyOpenClasses.delete( theClass );\n\t\t\t} else {\n\t\t\t\tbodyOpenClasses.set( theClass, oneLess );\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\t// Calls the isContentScrollable callback when the Modal children container resizes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! window.ResizeObserver || ! childrenContainerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( isContentScrollable );\n\t\tresizeObserver.observe( childrenContainerRef.current );\n\n\t\tisContentScrollable();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [ isContentScrollable, childrenContainerRef ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\t( event.code === 'Escape' || event.key === 'Escape' ) &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\tlet pressTarget: EventTarget | null = null;\n\tconst overlayPressHandlers: {\n\t\tonPointerDown: React.PointerEventHandler< HTMLDivElement >;\n\t\tonPointerUp: React.PointerEventHandler< HTMLDivElement >;\n\t} = {\n\t\tonPointerDown: ( event ) => {\n\t\t\tif ( event.target === event.currentTarget ) {\n\t\t\t\tpressTarget = event.target;\n\t\t\t\t// Avoids focus changing so that focus return works as expected.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t// Closes the modal with two exceptions. 1. Opening the context menu on\n\t\t// the overlay. 2. Pressing on the overlay then dragging the pointer\n\t\t// over the modal and releasing. Due to the modal being a child of the\n\t\t// overlay, such a gesture is a `click` on the overlay and cannot be\n\t\t// excepted by a `click` handler. Thus the tactic of handling\n\t\t// `pointerup` and comparing its target to that of the `pointerdown`.\n\t\tonPointerUp: ( { target, button } ) => {\n\t\t\tconst isSameTarget = target === pressTarget;\n\t\t\tpressTarget = null;\n\t\t\tif ( button === 0 && isSameTarget ) {\n\t\t\t\tonRequestClose();\n\t\t\t}\n\t\t},\n\t};\n\n\tconst modal = (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }\n\t\t\t{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tsizeClass,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMount !== 'firstContentElement'\n\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'is-scrollable': hasScrollableContent,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t\tref={ contentRef }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\thasScrollableContent\n\t\t\t\t\t\t\t\t? __( 'Scrollable section' )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttabIndex={ hasScrollableContent ? 0 : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ headerActions }\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel || __( 'Close' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\t\t\tchildrenContainerRef,\n\t\t\t\t\t\t\t\tfocusOnMount === 'firstContentElement'\n\t\t\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\t\t] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>\n\t);\n\n\treturn createPortal(\n\t\t<ModalContext.Provider value={ nestedDismissers }>\n\t\t\t{ modal }\n\t\t</ModalContext.Provider>,\n\t\tdocument.body\n\t);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n * const [ isOpen, setOpen ] = useState( false );\n * const openModal = () => setOpen( true );\n * const closeModal = () => setOpen( false );\n *\n * return (\n * <>\n * <Button variant=\"secondary\" onClick={ openModal }>\n * Open Modal\n * </Button>\n * { isOpen && (\n * <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n * <Button variant=\"secondary\" onClick={ closeModal }>\n * My custom close button\n * </Button>\n * </Modal>\n * ) }\n * </>\n * );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}
@@ -81,7 +81,7 @@ function QueryControls({
81
81
  __nextHasNoMarginBottom: true,
82
82
  __next40pxDefaultSize: __next40pxDefaultSize,
83
83
  label: (0, _i18n.__)('Order by'),
84
- value: `${orderBy}/${order}`,
84
+ value: orderBy === undefined || order === undefined ? undefined : `${orderBy}/${order}`,
85
85
  options: [{
86
86
  label: (0, _i18n.__)('Newest to oldest'),
87
87
  value: 'date/desc'
@@ -1 +1 @@
1
- {"version":3,"names":["_i18n","require","_authorSelect","_interopRequireDefault","_categorySelect","_formTokenField","_rangeControl","_selectControl","_vStack","_jsxRuntime","DEFAULT_MIN_ITEMS","DEFAULT_MAX_ITEMS","MAX_CATEGORIES_SUGGESTIONS","isSingleCategorySelection","props","isMultipleCategorySelection","QueryControls","__next40pxDefaultSize","authorList","selectedAuthorId","numberOfItems","order","orderBy","maxItems","minItems","onAuthorChange","onNumberOfItemsChange","onOrderChange","onOrderByChange","jsx","VStack","spacing","className","children","default","__nextHasNoMarginBottom","label","__","value","options","onChange","newOrderBy","newOrder","split","categoriesList","onCategoryChange","noOptionLabel","_x","selectedCategoryId","categorySuggestions","selectedCategories","map","item","id","name","suggestions","Object","keys","maxSuggestions","min","max","required","_default","exports"],"sources":["@wordpress/components/src/query-controls/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport type {\n\tQueryControlsProps,\n\tQueryControlsWithMultipleCategorySelectionProps,\n\tQueryControlsWithSingleCategorySelectionProps,\n} from './types';\n\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\n\nfunction isSingleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithSingleCategorySelectionProps {\n\treturn 'categoriesList' in props;\n}\n\nfunction isMultipleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithMultipleCategorySelectionProps {\n\treturn 'categorySuggestions' in props;\n}\n\n/**\n * Controls to query for posts.\n *\n * ```jsx\n * const MyQueryControls = () => (\n * <QueryControls\n * { ...{ maxItems, minItems, numberOfItems, order, orderBy } }\n * onOrderByChange={ ( newOrderBy ) => {\n * updateQuery( { orderBy: newOrderBy } )\n * }\n * onOrderChange={ ( newOrder ) => {\n * updateQuery( { order: newOrder } )\n * }\n * categoriesList={ categories }\n * selectedCategoryId={ category }\n * onCategoryChange={ ( newCategory ) => {\n * updateQuery( { category: newCategory } )\n * }\n * onNumberOfItemsChange={ ( newNumberOfItems ) => {\n * updateQuery( { numberOfItems: newNumberOfItems } )\n * } }\n * />\n * );\n * ```\n */\nexport function QueryControls( {\n\t__next40pxDefaultSize = false,\n\tauthorList,\n\tselectedAuthorId,\n\tnumberOfItems,\n\torder,\n\torderBy,\n\tmaxItems = DEFAULT_MAX_ITEMS,\n\tminItems = DEFAULT_MIN_ITEMS,\n\tonAuthorChange,\n\tonNumberOfItemsChange,\n\tonOrderChange,\n\tonOrderByChange,\n\t// Props for single OR multiple category selection are not destructured here,\n\t// but instead are destructured inline where necessary.\n\t...props\n}: QueryControlsProps ) {\n\treturn (\n\t\t<VStack spacing=\"4\" className=\"components-query-controls\">\n\t\t\t{ [\n\t\t\t\tonOrderChange && onOrderByChange && (\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-order-select\"\n\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\tvalue={ `${ orderBy }/${ order }` }\n\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Newest to oldest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Oldest to newest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/* translators: Label for ordering posts by title in ascending order. */\n\t\t\t\t\t\t\t\tlabel: __( 'A → Z' ),\n\t\t\t\t\t\t\t\tvalue: 'title/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/* translators: Label for ordering posts by title in descending order. */\n\t\t\t\t\t\t\t\tlabel: __( 'Z → A' ),\n\t\t\t\t\t\t\t\tvalue: 'title/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tif ( typeof value !== 'string' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\t\t\t\tif ( newOrder !== order ) {\n\t\t\t\t\t\t\t\tonOrderChange(\n\t\t\t\t\t\t\t\t\tnewOrder as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'order' ]\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( newOrderBy !== orderBy ) {\n\t\t\t\t\t\t\t\tonOrderByChange(\n\t\t\t\t\t\t\t\t\tnewOrderBy as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'orderBy' ]\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tisSingleCategorySelection( props ) &&\n\t\t\t\t\tprops.categoriesList &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<CategorySelect\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tkey=\"query-controls-category-select\"\n\t\t\t\t\t\t\tcategoriesList={ props.categoriesList }\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tnoOptionLabel={ _x( 'All', 'categories' ) }\n\t\t\t\t\t\t\tselectedCategoryId={ props.selectedCategoryId }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tisMultipleCategorySelection( props ) &&\n\t\t\t\t\tprops.categorySuggestions &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<FormTokenField\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tkey=\"query-controls-categories-select\"\n\t\t\t\t\t\t\tlabel={ __( 'Categories' ) }\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tprops.selectedCategories &&\n\t\t\t\t\t\t\t\tprops.selectedCategories.map( ( item ) => ( {\n\t\t\t\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\t\t\t\t// Keeping the fallback to `item.value` for legacy reasons,\n\t\t\t\t\t\t\t\t\t// even if items of `selectedCategories` should not have a\n\t\t\t\t\t\t\t\t\t// `value` property.\n\t\t\t\t\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\t\t\t\t\tvalue: item.name || item.value,\n\t\t\t\t\t\t\t\t} ) )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ Object.keys(\n\t\t\t\t\t\t\t\tprops.categorySuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t\tmaxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tonAuthorChange && (\n\t\t\t\t\t<AuthorSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-author-select\"\n\t\t\t\t\t\tauthorList={ authorList }\n\t\t\t\t\t\tlabel={ __( 'Author' ) }\n\t\t\t\t\t\tnoOptionLabel={ _x( 'All', 'authors' ) }\n\t\t\t\t\t\tselectedAuthorId={ selectedAuthorId }\n\t\t\t\t\t\tonChange={ onAuthorChange }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tonNumberOfItemsChange && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-range-control\"\n\t\t\t\t\t\tlabel={ __( 'Number of items' ) }\n\t\t\t\t\t\tvalue={ numberOfItems }\n\t\t\t\t\t\tonChange={ onNumberOfItemsChange }\n\t\t\t\t\t\tmin={ minItems }\n\t\t\t\t\t\tmax={ maxItems }\n\t\t\t\t\t\trequired\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t] }\n\t\t</VStack>\n\t);\n}\n\nexport default QueryControls;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_i18n","require","_authorSelect","_interopRequireDefault","_categorySelect","_formTokenField","_rangeControl","_selectControl","_vStack","_jsxRuntime","DEFAULT_MIN_ITEMS","DEFAULT_MAX_ITEMS","MAX_CATEGORIES_SUGGESTIONS","isSingleCategorySelection","props","isMultipleCategorySelection","QueryControls","__next40pxDefaultSize","authorList","selectedAuthorId","numberOfItems","order","orderBy","maxItems","minItems","onAuthorChange","onNumberOfItemsChange","onOrderChange","onOrderByChange","jsx","VStack","spacing","className","children","default","__nextHasNoMarginBottom","label","__","value","undefined","options","onChange","newOrderBy","newOrder","split","categoriesList","onCategoryChange","noOptionLabel","_x","selectedCategoryId","categorySuggestions","selectedCategories","map","item","id","name","suggestions","Object","keys","maxSuggestions","min","max","required","_default","exports"],"sources":["@wordpress/components/src/query-controls/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport type {\n\tQueryControlsProps,\n\tQueryControlsWithMultipleCategorySelectionProps,\n\tQueryControlsWithSingleCategorySelectionProps,\n} from './types';\n\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\n\nfunction isSingleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithSingleCategorySelectionProps {\n\treturn 'categoriesList' in props;\n}\n\nfunction isMultipleCategorySelection(\n\tprops: QueryControlsProps\n): props is QueryControlsWithMultipleCategorySelectionProps {\n\treturn 'categorySuggestions' in props;\n}\n\n/**\n * Controls to query for posts.\n *\n * ```jsx\n * const MyQueryControls = () => (\n * <QueryControls\n * { ...{ maxItems, minItems, numberOfItems, order, orderBy } }\n * onOrderByChange={ ( newOrderBy ) => {\n * updateQuery( { orderBy: newOrderBy } )\n * }\n * onOrderChange={ ( newOrder ) => {\n * updateQuery( { order: newOrder } )\n * }\n * categoriesList={ categories }\n * selectedCategoryId={ category }\n * onCategoryChange={ ( newCategory ) => {\n * updateQuery( { category: newCategory } )\n * }\n * onNumberOfItemsChange={ ( newNumberOfItems ) => {\n * updateQuery( { numberOfItems: newNumberOfItems } )\n * } }\n * />\n * );\n * ```\n */\nexport function QueryControls( {\n\t__next40pxDefaultSize = false,\n\tauthorList,\n\tselectedAuthorId,\n\tnumberOfItems,\n\torder,\n\torderBy,\n\tmaxItems = DEFAULT_MAX_ITEMS,\n\tminItems = DEFAULT_MIN_ITEMS,\n\tonAuthorChange,\n\tonNumberOfItemsChange,\n\tonOrderChange,\n\tonOrderByChange,\n\t// Props for single OR multiple category selection are not destructured here,\n\t// but instead are destructured inline where necessary.\n\t...props\n}: QueryControlsProps ) {\n\treturn (\n\t\t<VStack spacing=\"4\" className=\"components-query-controls\">\n\t\t\t{ [\n\t\t\t\tonOrderChange && onOrderByChange && (\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-order-select\"\n\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\torderBy === undefined || order === undefined\n\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t: `${ orderBy }/${ order }`\n\t\t\t\t\t\t}\n\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Newest to oldest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tlabel: __( 'Oldest to newest' ),\n\t\t\t\t\t\t\t\tvalue: 'date/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/* translators: Label for ordering posts by title in ascending order. */\n\t\t\t\t\t\t\t\tlabel: __( 'A → Z' ),\n\t\t\t\t\t\t\t\tvalue: 'title/asc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/* translators: Label for ordering posts by title in descending order. */\n\t\t\t\t\t\t\t\tlabel: __( 'Z → A' ),\n\t\t\t\t\t\t\t\tvalue: 'title/desc',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tif ( typeof value !== 'string' ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\t\t\t\tif ( newOrder !== order ) {\n\t\t\t\t\t\t\t\tonOrderChange(\n\t\t\t\t\t\t\t\t\tnewOrder as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'order' ]\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( newOrderBy !== orderBy ) {\n\t\t\t\t\t\t\t\tonOrderByChange(\n\t\t\t\t\t\t\t\t\tnewOrderBy as NonNullable<\n\t\t\t\t\t\t\t\t\t\tQueryControlsProps[ 'orderBy' ]\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tisSingleCategorySelection( props ) &&\n\t\t\t\t\tprops.categoriesList &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<CategorySelect\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tkey=\"query-controls-category-select\"\n\t\t\t\t\t\t\tcategoriesList={ props.categoriesList }\n\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\tnoOptionLabel={ _x( 'All', 'categories' ) }\n\t\t\t\t\t\t\tselectedCategoryId={ props.selectedCategoryId }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tisMultipleCategorySelection( props ) &&\n\t\t\t\t\tprops.categorySuggestions &&\n\t\t\t\t\tprops.onCategoryChange && (\n\t\t\t\t\t\t<FormTokenField\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tkey=\"query-controls-categories-select\"\n\t\t\t\t\t\t\tlabel={ __( 'Categories' ) }\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tprops.selectedCategories &&\n\t\t\t\t\t\t\t\tprops.selectedCategories.map( ( item ) => ( {\n\t\t\t\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\t\t\t\t// Keeping the fallback to `item.value` for legacy reasons,\n\t\t\t\t\t\t\t\t\t// even if items of `selectedCategories` should not have a\n\t\t\t\t\t\t\t\t\t// `value` property.\n\t\t\t\t\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\t\t\t\t\tvalue: item.name || item.value,\n\t\t\t\t\t\t\t\t} ) )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ Object.keys(\n\t\t\t\t\t\t\t\tprops.categorySuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ props.onCategoryChange }\n\t\t\t\t\t\t\tmaxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\tonAuthorChange && (\n\t\t\t\t\t<AuthorSelect\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-author-select\"\n\t\t\t\t\t\tauthorList={ authorList }\n\t\t\t\t\t\tlabel={ __( 'Author' ) }\n\t\t\t\t\t\tnoOptionLabel={ _x( 'All', 'authors' ) }\n\t\t\t\t\t\tselectedAuthorId={ selectedAuthorId }\n\t\t\t\t\t\tonChange={ onAuthorChange }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tonNumberOfItemsChange && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\tkey=\"query-controls-range-control\"\n\t\t\t\t\t\tlabel={ __( 'Number of items' ) }\n\t\t\t\t\t\tvalue={ numberOfItems }\n\t\t\t\t\t\tonChange={ onNumberOfItemsChange }\n\t\t\t\t\t\tmin={ minItems }\n\t\t\t\t\t\tmax={ maxItems }\n\t\t\t\t\t\trequired\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t] }\n\t\t</VStack>\n\t);\n}\n\nexport default QueryControls;\n"],"mappings":"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","ignoreList":[]}
@@ -10,6 +10,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
10
10
  var _compose = require("@wordpress/compose");
11
11
  var _baseControl = _interopRequireDefault(require("../base-control"));
12
12
  var _vStack = require("../v-stack");
13
+ var _hooks = require("../base-control/hooks");
14
+ var _baseControlStyles = require("../base-control/styles/base-control-styles");
13
15
  var _jsxRuntime = require("react/jsx-runtime");
14
16
  /**
15
17
  * External dependencies
@@ -23,6 +25,13 @@ var _jsxRuntime = require("react/jsx-runtime");
23
25
  * Internal dependencies
24
26
  */
25
27
 
28
+ function generateOptionDescriptionId(radioGroupId, index) {
29
+ return `${radioGroupId}-${index}-option-description`;
30
+ }
31
+ function generateOptionId(radioGroupId, index) {
32
+ return `${radioGroupId}-${index}`;
33
+ }
34
+
26
35
  /**
27
36
  * Render a user interface to select the user type using radio inputs.
28
37
  *
@@ -57,11 +66,21 @@ function RadioControl(props) {
57
66
  onChange,
58
67
  hideLabelFromVision,
59
68
  options = [],
69
+ id: preferredId,
60
70
  ...additionalProps
61
71
  } = props;
62
- const instanceId = (0, _compose.useInstanceId)(RadioControl);
63
- const id = `inspector-radio-control-${instanceId}`;
72
+ const id = (0, _compose.useInstanceId)(RadioControl, 'inspector-radio-control', preferredId);
64
73
  const onChangeValue = event => onChange(event.target.value);
74
+
75
+ // Use `useBaseControlProps` to get the id of the help text.
76
+ const {
77
+ controlProps: {
78
+ 'aria-describedby': helpTextId
79
+ }
80
+ } = (0, _hooks.useBaseControlProps)({
81
+ id,
82
+ help
83
+ });
65
84
  if (!options?.length) {
66
85
  return null;
67
86
  }
@@ -73,25 +92,33 @@ function RadioControl(props) {
73
92
  help: help,
74
93
  className: (0, _clsx.default)(className, 'components-radio-control'),
75
94
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
76
- spacing: 2,
95
+ spacing: 3,
96
+ className: (0, _clsx.default)('components-radio-control__group-wrapper', {
97
+ 'has-help': !!help
98
+ }),
77
99
  children: options.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
78
100
  className: "components-radio-control__option",
79
101
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
80
- id: `${id}-${index}`,
102
+ id: generateOptionId(id, index),
81
103
  className: "components-radio-control__input",
82
104
  type: "radio",
83
105
  name: id,
84
106
  value: option.value,
85
107
  onChange: onChangeValue,
86
108
  checked: option.value === selected,
87
- "aria-describedby": !!help ? `${id}__help` : undefined,
109
+ "aria-describedby": (0, _clsx.default)([!!option.description && generateOptionDescriptionId(id, index), helpTextId]) || undefined,
88
110
  ...additionalProps
89
111
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
90
112
  className: "components-radio-control__label",
91
- htmlFor: `${id}-${index}`,
113
+ htmlFor: generateOptionId(id, index),
92
114
  children: option.label
93
- })]
94
- }, `${id}-${index}`))
115
+ }), !!option.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledHelp, {
116
+ __nextHasNoMarginBottom: true,
117
+ id: generateOptionDescriptionId(id, index),
118
+ className: "components-radio-control__option-description",
119
+ children: option.description
120
+ }) : null]
121
+ }, generateOptionId(id, index)))
95
122
  })
96
123
  });
97
124
  }