@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":["_clsx","_interopRequireDefault","require","_compose","_baseControl","_vStack","_jsxRuntime","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","useInstanceId","id","onChangeValue","event","target","value","length","jsx","default","__nextHasNoMarginBottom","clsx","children","VStack","spacing","map","option","index","jsxs","type","name","checked","undefined","htmlFor","_default","exports"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n *\n * return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ `${ id }-${ index }` }\n\t\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={ `${ id }-${ index }` }\n\t\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\t!! help ? `${ id }__help` : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName=\"components-radio-control__label\"\n\t\t\t\t\t\t\thtmlFor={ `${ id }-${ index }` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AAGA,IAAAG,OAAA,GAAAH,OAAA;AAAoC,IAAAI,WAAA,GAAAJ,OAAA;AAjBpC;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,YAAYA,CAC3BC,KAAmE,EAClE;EACD,MAAM;IACLC,KAAK;IACLC,SAAS;IACTC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,mBAAmB;IACnBC,OAAO,GAAG,EAAE;IACZ,GAAGC;EACJ,CAAC,GAAGR,KAAK;EACT,MAAMS,UAAU,GAAG,IAAAC,sBAAa,EAAEX,YAAa,CAAC;EAChD,MAAMY,EAAE,GAAI,2BAA2BF,UAAY,EAAC;EACpD,MAAMG,aAAa,GAAKC,KAAsC,IAC7DR,QAAQ,CAAEQ,KAAK,CAACC,MAAM,CAACC,KAAM,CAAC;EAE/B,IAAK,CAAER,OAAO,EAAES,MAAM,EAAG;IACxB,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAlB,WAAA,CAAAmB,GAAA,EAACrB,YAAA,CAAAsB,OAAW;IACXC,uBAAuB;IACvBlB,KAAK,EAAGA,KAAO;IACfU,EAAE,EAAGA,EAAI;IACTL,mBAAmB,EAAGA,mBAAqB;IAC3CF,IAAI,EAAGA,IAAM;IACbF,SAAS,EAAG,IAAAkB,aAAI,EAAElB,SAAS,EAAE,0BAA2B,CAAG;IAAAmB,QAAA,eAE3D,IAAAvB,WAAA,CAAAmB,GAAA,EAACpB,OAAA,CAAAyB,MAAM;MAACC,OAAO,EAAG,CAAG;MAAAF,QAAA,EAClBd,OAAO,CAACiB,GAAG,CAAE,CAAEC,MAAM,EAAEC,KAAK,kBAC7B,IAAA5B,WAAA,CAAA6B,IAAA;QAECzB,SAAS,EAAC,kCAAkC;QAAAmB,QAAA,gBAE5C,IAAAvB,WAAA,CAAAmB,GAAA;UACCN,EAAE,EAAI,GAAGA,EAAI,IAAIe,KAAO,EAAG;UAC3BxB,SAAS,EAAC,iCAAiC;UAC3C0B,IAAI,EAAC,OAAO;UACZC,IAAI,EAAGlB,EAAI;UACXI,KAAK,EAAGU,MAAM,CAACV,KAAO;UACtBV,QAAQ,EAAGO,aAAe;UAC1BkB,OAAO,EAAGL,MAAM,CAACV,KAAK,KAAKZ,QAAU;UACrC,oBACC,CAAC,CAAEC,IAAI,GAAI,GAAGO,EAAI,QAAO,GAAGoB,SAC5B;UAAA,GACIvB;QAAe,CACpB,CAAC,eACF,IAAAV,WAAA,CAAAmB,GAAA;UACCf,SAAS,EAAC,iCAAiC;UAC3C8B,OAAO,EAAI,GAAGrB,EAAI,IAAIe,KAAO,EAAG;UAAAL,QAAA,EAE9BI,MAAM,CAACxB;QAAK,CACR,CAAC;MAAA,GArBD,GAAGU,EAAI,IAAIe,KAAO,EAsBrB,CACJ;IAAC,CACI;EAAC,CACG,CAAC;AAEhB;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEcnB,YAAY","ignoreList":[]}
1
+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_baseControl","_vStack","_hooks","_baseControlStyles","_jsxRuntime","generateOptionDescriptionId","radioGroupId","index","generateOptionId","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","id","preferredId","additionalProps","useInstanceId","onChangeValue","event","target","value","controlProps","helpTextId","useBaseControlProps","length","jsx","default","__nextHasNoMarginBottom","clsx","children","VStack","spacing","map","option","jsxs","type","name","checked","description","undefined","htmlFor","StyledHelp","_default","exports"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\nimport { useBaseControlProps } from '../base-control/hooks';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\n\nfunction generateOptionDescriptionId( radioGroupId: string, index: number ) {\n\treturn `${ radioGroupId }-${ index }-option-description`;\n}\n\nfunction generateOptionId( radioGroupId: string, index: number ) {\n\treturn `${ radioGroupId }-${ index }`;\n}\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n *\n * return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\tid: preferredId,\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId(\n\t\tRadioControl,\n\t\t'inspector-radio-control',\n\t\tpreferredId\n\t);\n\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\t// Use `useBaseControlProps` to get the id of the help text.\n\tconst {\n\t\tcontrolProps: { 'aria-describedby': helpTextId },\n\t} = useBaseControlProps( { id, help } );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack\n\t\t\t\tspacing={ 3 }\n\t\t\t\tclassName={ clsx( 'components-radio-control__group-wrapper', {\n\t\t\t\t\t'has-help': !! help,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ generateOptionId( id, index ) }\n\t\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={ generateOptionId( id, index ) }\n\t\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\tclsx( [\n\t\t\t\t\t\t\t\t\t!! option.description &&\n\t\t\t\t\t\t\t\t\t\tgenerateOptionDescriptionId(\n\t\t\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\thelpTextId,\n\t\t\t\t\t\t\t\t] ) || undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName=\"components-radio-control__label\"\n\t\t\t\t\t\t\thtmlFor={ generateOptionId( id, index ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t{ !! option.description ? (\n\t\t\t\t\t\t\t<StyledHelp\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\tid={ generateOptionDescriptionId( id, index ) }\n\t\t\t\t\t\t\t\tclassName=\"components-radio-control__option-description\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ option.description }\n\t\t\t\t\t\t\t</StyledHelp>\n\t\t\t\t\t\t) : null }\n\t\t\t\t\t</div>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["@wordpress/components/src/radio-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type RadioControlProps = Pick<\n\tBaseControlProps,\n\t'label' | 'help' | 'hideLabelFromVision'\n> & {\n\t/**\n\t * A function that receives the value of the new option that is being\n\t * selected as input.\n\t */\n\tonChange: ( value: string ) => void;\n\t/**\n\t * An array of objects containing the value and label of the options.\n\t */\n\toptions?: {\n\t\t/**\n\t\t * The label to be shown to the user\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * The internal value compared against select and passed to onChange\n\t\t */\n\t\tvalue: string;\n\t}[];\n\t/**\n\t * The value property of the currently selected option.\n\t */\n\tselected?: string;\n};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/radio-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type RadioControlProps = Pick<\n\tBaseControlProps,\n\t'label' | 'help' | 'hideLabelFromVision'\n> & {\n\t/**\n\t * A function that receives the value of the new option that is being\n\t * selected as input.\n\t */\n\tonChange: ( value: string ) => void;\n\t/**\n\t * An array of objects containing the value and label of the options.\n\t */\n\toptions?: {\n\t\t/**\n\t\t * The label to be shown to the user\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * The internal value compared against select and passed to onChange\n\t\t */\n\t\tvalue: string;\n\t\t/**\n\t\t * Optional help text to be shown in addition the label.\n\t\t */\n\t\tdescription?: string;\n\t}[];\n\t/**\n\t * The value property of the currently selected option.\n\t */\n\tselected?: string;\n};\n"],"mappings":"","ignoreList":[]}
@@ -30,6 +30,23 @@ function useUniqueId(idProp) {
30
30
  const id = `inspector-select-control-${instanceId}`;
31
31
  return idProp || id;
32
32
  }
33
+ function SelectOptions({
34
+ options
35
+ }) {
36
+ return options.map(({
37
+ id,
38
+ label,
39
+ value,
40
+ ...optionProps
41
+ }, index) => {
42
+ const key = id || `${label}-${value}-${index}`;
43
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
44
+ value: value,
45
+ ...optionProps,
46
+ children: label
47
+ }, key);
48
+ });
49
+ }
33
50
  function UnforwardedSelectControl(props, ref) {
34
51
  const {
35
52
  className,
@@ -108,14 +125,8 @@ function UnforwardedSelectControl(props, ref) {
108
125
  selectSize: size,
109
126
  value: valueProp,
110
127
  variant: variant,
111
- children: children || options.map((option, index) => {
112
- const key = option.id || `${option.label}-${option.value}-${index}`;
113
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
114
- value: option.value,
115
- disabled: option.disabled,
116
- hidden: option.hidden,
117
- children: option.label
118
- }, key);
128
+ children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectOptions, {
129
+ options: options
119
130
  })
120
131
  })
121
132
  })
@@ -135,6 +146,7 @@ function UnforwardedSelectControl(props, ref) {
135
146
  *
136
147
  * return (
137
148
  * <SelectControl
149
+ * __nextHasNoMarginBottom
138
150
  * label="Size"
139
151
  * value={ size }
140
152
  * options={ [
@@ -1 +1 @@
1
- {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_baseControl","_selectControlStyles","_chevronDown","_useDeprecatedProps","_jsxRuntime","useUniqueId","idProp","instanceId","useInstanceId","SelectControl","id","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","label","multiple","onChange","options","size","value","valueProp","labelPosition","children","prefix","suffix","variant","__next40pxDefaultSize","__nextHasNoMarginBottom","restProps","useDeprecated36pxDefaultSizeProp","helpId","undefined","length","handleOnChange","event","selectedOptions","Array","from","target","filter","selected","newValues","map","classes","clsx","jsx","default","StyledInputBase","isBorderless","__unstableInputWidth","Select","selectSize","option","index","key","hidden","exports","forwardRef","_default"],"sources":["@wordpress/components/src/select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { Select, StyledInputBase } from './styles/select-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport type { SelectControlProps } from './types';\nimport SelectControlChevronDown from './chevron-down';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( SelectControl );\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nfunction UnforwardedSelectControl(\n\tprops: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: React.ForwardedRef< HTMLSelectElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision,\n\t\tid: idProp,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonChange,\n\t\toptions = [],\n\t\tsize = 'default',\n\t\tvalue: valueProp,\n\t\tlabelPosition = 'top',\n\t\tchildren,\n\t\tprefix,\n\t\tsuffix,\n\t\tvariant = 'default',\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\tconst id = useUniqueId( idProp );\n\tconst helpId = help ? `${ id }__help` : undefined;\n\n\t// Disable reason: A select with an onchange throws a warning.\n\tif ( ! options?.length && ! children ) {\n\t\treturn null;\n\t}\n\n\tconst handleOnChange = (\n\t\tevent: React.ChangeEvent< HTMLSelectElement >\n\t) => {\n\t\tif ( props.multiple ) {\n\t\t\tconst selectedOptions = Array.from( event.target.options ).filter(\n\t\t\t\t( { selected } ) => selected\n\t\t\t);\n\t\t\tconst newValues = selectedOptions.map( ( { value } ) => value );\n\t\t\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value, { event } );\n\t};\n\n\tconst classes = clsx( 'components-select-control', className );\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<StyledInputBase\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisBorderless={ variant === 'minimal' }\n\t\t\t\tlabel={ label }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={\n\t\t\t\t\tsuffix || ( ! multiple && <SelectControlChevronDown /> )\n\t\t\t\t}\n\t\t\t\tprefix={ prefix }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\tvariant === 'minimal' ? 'auto' : undefined\n\t\t\t\t}\n\t\t\t\tvariant={ variant }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t>\n\t\t\t\t<Select\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\taria-describedby={ helpId }\n\t\t\t\t\tclassName=\"components-select-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\tvalue={ valueProp }\n\t\t\t\t\tvariant={ variant }\n\t\t\t\t>\n\t\t\t\t\t{ children ||\n\t\t\t\t\t\toptions.map( ( option, index ) => {\n\t\t\t\t\t\t\tconst key =\n\t\t\t\t\t\t\t\toption.id ||\n\t\t\t\t\t\t\t\t`${ option.label }-${ option.value }-${ index }`;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\t\t\t\t\thidden={ option.hidden }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</StyledInputBase>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * ```jsx\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n * const [ size, setSize ] = useState( '50%' );\n *\n * return (\n * <SelectControl\n * label=\"Size\"\n * value={ size }\n * options={ [\n * { label: 'Big', value: '100%' },\n * { label: 'Medium', value: '50%' },\n * { label: 'Small', value: '25%' },\n * ] }\n * onChange={ setSize }\n * />\n * );\n * };\n * ```\n */\nexport const SelectControl = forwardRef( UnforwardedSelectControl );\n\nexport default SelectControl;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_baseControl","_selectControlStyles","_chevronDown","_useDeprecatedProps","_jsxRuntime","useUniqueId","idProp","instanceId","useInstanceId","SelectControl","id","SelectOptions","options","map","label","value","optionProps","index","key","jsx","children","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","multiple","onChange","size","valueProp","labelPosition","prefix","suffix","variant","__next40pxDefaultSize","__nextHasNoMarginBottom","restProps","useDeprecated36pxDefaultSizeProp","helpId","undefined","length","handleOnChange","event","selectedOptions","Array","from","target","filter","selected","newValues","classes","clsx","default","StyledInputBase","isBorderless","__unstableInputWidth","Select","selectSize","exports","forwardRef","_default"],"sources":["@wordpress/components/src/select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { Select, StyledInputBase } from './styles/select-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport type { SelectControlProps } from './types';\nimport SelectControlChevronDown from './chevron-down';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( SelectControl );\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nfunction SelectOptions( {\n\toptions,\n}: {\n\toptions: NonNullable< SelectControlProps[ 'options' ] >;\n} ) {\n\treturn options.map( ( { id, label, value, ...optionProps }, index ) => {\n\t\tconst key = id || `${ label }-${ value }-${ index }`;\n\n\t\treturn (\n\t\t\t<option key={ key } value={ value } { ...optionProps }>\n\t\t\t\t{ label }\n\t\t\t</option>\n\t\t);\n\t} );\n}\n\nfunction UnforwardedSelectControl< V extends string >(\n\tprops: WordPressComponentProps< SelectControlProps< V >, 'select', false >,\n\tref: React.ForwardedRef< HTMLSelectElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision,\n\t\tid: idProp,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonChange,\n\t\toptions = [],\n\t\tsize = 'default',\n\t\tvalue: valueProp,\n\t\tlabelPosition = 'top',\n\t\tchildren,\n\t\tprefix,\n\t\tsuffix,\n\t\tvariant = 'default',\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\tconst id = useUniqueId( idProp );\n\tconst helpId = help ? `${ id }__help` : undefined;\n\n\t// Disable reason: A select with an onchange throws a warning.\n\tif ( ! options?.length && ! children ) {\n\t\treturn null;\n\t}\n\n\tconst handleOnChange = (\n\t\tevent: React.ChangeEvent< HTMLSelectElement >\n\t) => {\n\t\tif ( props.multiple ) {\n\t\t\tconst selectedOptions = Array.from( event.target.options ).filter(\n\t\t\t\t( { selected } ) => selected\n\t\t\t);\n\t\t\tconst newValues = selectedOptions.map(\n\t\t\t\t( { value } ) => value as V\n\t\t\t);\n\t\t\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value as V, { event } );\n\t};\n\n\tconst classes = clsx( 'components-select-control', className );\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<StyledInputBase\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisBorderless={ variant === 'minimal' }\n\t\t\t\tlabel={ label }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={\n\t\t\t\t\tsuffix || ( ! multiple && <SelectControlChevronDown /> )\n\t\t\t\t}\n\t\t\t\tprefix={ prefix }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\tvariant === 'minimal' ? 'auto' : undefined\n\t\t\t\t}\n\t\t\t\tvariant={ variant }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t>\n\t\t\t\t<Select\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\taria-describedby={ helpId }\n\t\t\t\t\tclassName=\"components-select-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\tvalue={ valueProp }\n\t\t\t\t\tvariant={ variant }\n\t\t\t\t>\n\t\t\t\t\t{ children || <SelectOptions options={ options } /> }\n\t\t\t\t</Select>\n\t\t\t</StyledInputBase>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * ```jsx\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n * const [ size, setSize ] = useState( '50%' );\n *\n * return (\n * <SelectControl\n * __nextHasNoMarginBottom\n * label=\"Size\"\n * value={ size }\n * options={ [\n * { label: 'Big', value: '100%' },\n * { label: 'Medium', value: '50%' },\n * { label: 'Small', value: '25%' },\n * ] }\n * onChange={ setSize }\n * />\n * );\n * };\n * ```\n */\nexport const SelectControl = forwardRef( UnforwardedSelectControl ) as <\n\tV extends string,\n>(\n\tprops: WordPressComponentProps<\n\t\tSelectControlProps< V >,\n\t\t'select',\n\t\tfalse\n\t> & { ref?: React.Ref< HTMLSelectElement > }\n) => React.JSX.Element | null;\n\nexport default SelectControl;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["@wordpress/components/src/select-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, FocusEvent, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { InputBaseProps } from '../input-control/types';\nimport type { BaseControlProps } from '../base-control/types';\n\ntype SelectControlBaseProps = Pick<\n\tInputBaseProps,\n\t| '__next36pxDefaultSize'\n\t| '__next40pxDefaultSize'\n\t| 'disabled'\n\t| 'hideLabelFromVision'\n\t| 'label'\n\t| 'labelPosition'\n\t| 'prefix'\n\t| 'size'\n\t| 'suffix'\n> &\n\tPick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {\n\t\tonBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;\n\t\tonFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;\n\t\toptions?: {\n\t\t\t/**\n\t\t\t * The label to be shown to the user.\n\t\t\t */\n\t\t\tlabel: string;\n\t\t\t/**\n\t\t\t * The internal value used to choose the selected value.\n\t\t\t * This is also the value passed to `onChange` when the option is selected.\n\t\t\t */\n\t\t\tvalue: string;\n\t\t\tid?: string;\n\t\t\t/**\n\t\t\t * Whether or not the option should have the disabled attribute.\n\t\t\t *\n\t\t\t * @default false\n\t\t\t */\n\t\t\tdisabled?: boolean;\n\t\t\t/**\n\t\t\t * Whether or not the option should be hidden.\n\t\t\t *\n\t\t\t * @default false\n\t\t\t */\n\t\t\thidden?: boolean;\n\t\t}[];\n\t\t/**\n\t\t * As an alternative to the `options` prop, `optgroup`s and `options` can be\n\t\t * passed in as `children` for more customizability.\n\t\t */\n\t\tchildren?: ReactNode;\n\t\t/**\n\t\t * The style variant of the control.\n\t\t *\n\t\t * @default 'default'\n\t\t */\n\t\tvariant?: 'default' | 'minimal';\n\t};\n\nexport type SelectControlSingleSelectionProps = SelectControlBaseProps & {\n\t/**\n\t * If this property is added, multiple values can be selected. The `value` passed should be an array.\n\t *\n\t * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.\n\t *\n\t * @default false\n\t */\n\tmultiple?: false;\n\tvalue?: string;\n\t/**\n\t * A function that receives the value of the new option that is being selected as input.\n\t *\n\t * If `multiple` is `true`, the value received is an array of the selected value.\n\t * Otherwise, the value received is a single value with the new selected value.\n\t */\n\tonChange?: (\n\t\tvalue: string,\n\t\textra?: { event?: ChangeEvent< HTMLSelectElement > }\n\t) => void;\n};\n\nexport type SelectControlMultipleSelectionProps = SelectControlBaseProps & {\n\t/**\n\t * If this property is added, multiple values can be selected. The `value` passed should be an array.\n\t *\n\t * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.\n\t *\n\t * @default false\n\t */\n\tmultiple: true;\n\tvalue?: string[];\n\t/**\n\t * A function that receives the value of the new option that is being selected as input.\n\t *\n\t * If `multiple` is `true`, the value received is an array of the selected value.\n\t * Otherwise, the value received is a single value with the new selected value.\n\t */\n\tonChange?: (\n\t\tvalue: string[],\n\t\textra?: { event?: ChangeEvent< HTMLSelectElement > }\n\t) => void;\n};\n\nexport type SelectControlProps =\n\t| SelectControlSingleSelectionProps\n\t| SelectControlMultipleSelectionProps;\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/select-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { InputBaseProps } from '../input-control/types';\nimport type { BaseControlProps } from '../base-control/types';\n\ntype SelectControlBaseProps< V extends string > = Pick<\n\tInputBaseProps,\n\t| '__next36pxDefaultSize'\n\t| '__next40pxDefaultSize'\n\t| 'disabled'\n\t| 'hideLabelFromVision'\n\t| 'label'\n\t| 'labelPosition'\n\t| 'prefix'\n\t| 'size'\n\t| 'suffix'\n> &\n\tPick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {\n\t\t/**\n\t\t * An array of option property objects to be rendered,\n\t\t * each with a `label` and `value` property, as well as any other\n\t\t * `<option>` attributes.\n\t\t */\n\t\toptions?: readonly ( {\n\t\t\t/**\n\t\t\t * The label to be shown to the user.\n\t\t\t */\n\t\t\tlabel: string;\n\t\t\t/**\n\t\t\t * The internal value used to choose the selected value.\n\t\t\t * This is also the value passed to `onChange` when the option is selected.\n\t\t\t */\n\t\t\tvalue: V;\n\t\t} & Omit<\n\t\t\tReact.OptionHTMLAttributes< HTMLOptionElement >,\n\t\t\t'label' | 'value'\n\t\t> )[];\n\t\t/**\n\t\t * As an alternative to the `options` prop, `optgroup`s and `options` can be\n\t\t * passed in as `children` for more customizability.\n\t\t */\n\t\tchildren?: ReactNode;\n\t\t/**\n\t\t * The style variant of the control.\n\t\t *\n\t\t * @default 'default'\n\t\t */\n\t\tvariant?: 'default' | 'minimal';\n\t};\n\nexport type SelectControlSingleSelectionProps< V extends string = string > =\n\tSelectControlBaseProps< V > & {\n\t\t/**\n\t\t * If this property is added, multiple values can be selected. The `value` passed should be an array.\n\t\t *\n\t\t * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tmultiple?: false;\n\t\t/**\n\t\t * The value of the selected option.\n\t\t *\n\t\t * If `multiple` is true, the `value` should be an array with the values of the selected options.\n\t\t */\n\t\tvalue?: NoInfer< V >;\n\t\t/**\n\t\t * A function that receives the value of the new option that is being selected as input.\n\t\t *\n\t\t * If `multiple` is `true`, the value received is an array of the selected value.\n\t\t * Otherwise, the value received is a single value with the new selected value.\n\t\t */\n\t\tonChange?: (\n\t\t\tvalue: NoInfer< V >,\n\t\t\textra?: { event?: ChangeEvent< HTMLSelectElement > }\n\t\t) => void;\n\t};\n\nexport type SelectControlMultipleSelectionProps< V extends string > =\n\tSelectControlBaseProps< V > & {\n\t\t/**\n\t\t * If this property is added, multiple values can be selected. The `value` passed should be an array.\n\t\t *\n\t\t * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tmultiple: true;\n\t\t/**\n\t\t * The value of the selected option.\n\t\t *\n\t\t * If `multiple` is true, the `value` should be an array with the values of the selected options.\n\t\t */\n\t\tvalue?: NoInfer< V >[];\n\t\t/**\n\t\t * A function that receives the value of the new option that is being selected as input.\n\t\t *\n\t\t * If `multiple` is `true`, the value received is an array of the selected value.\n\t\t * Otherwise, the value received is a single value with the new selected value.\n\t\t */\n\t\tonChange?: (\n\t\t\tvalue: NoInfer< V >[],\n\t\t\textra?: { event?: ChangeEvent< HTMLSelectElement > }\n\t\t) => void;\n\t};\n\nexport type SelectControlProps< V extends string = string > =\n\t| SelectControlSingleSelectionProps< V >\n\t| SelectControlMultipleSelectionProps< V >;\n"],"mappings":"","ignoreList":[]}
@@ -72,6 +72,7 @@ function UnforwardedTextControl(props, ref) {
72
72
  *
73
73
  * return (
74
74
  * <TextControl
75
+ * __nextHasNoMarginBottom
75
76
  * label="Additional CSS Class"
76
77
  * value={ className }
77
78
  * onChange={ ( value ) => setClassName( value ) }
@@ -1 +1 @@
1
- {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_baseControl","_jsxRuntime","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","label","hideLabelFromVision","value","help","id","idProp","className","onChange","type","additionalProps","useInstanceId","TextControl","onChangeValue","event","target","jsx","default","children","clsx","undefined","exports","forwardRef","_default"],"sources":["@wordpress/components/src/text-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize = false,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tid: idProp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId( TextControl, 'inspector-text-control', idProp );\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName={ clsx( 'components-text-control__input', {\n\t\t\t\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t\t\t} ) }\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n * const [ className, setClassName ] = useState( '' );\n *\n * return (\n * <TextControl\n * label=\"Additional CSS Class\"\n * value={ className }\n * onChange={ ( value ) => setClassName( value ) }\n * />\n * );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"],"mappings":";;;;;;;AAIA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAA0C,IAAAI,WAAA,GAAAJ,OAAA;AAf1C;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAKA,SAASK,sBAAsBA,CAC9BC,KAAkE,EAClEC,GAAqC,EACpC;EACD,MAAM;IACLC,uBAAuB;IACvBC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,EAAE,EAAEC,MAAM;IACVC,SAAS;IACTC,QAAQ;IACRC,IAAI,GAAG,MAAM;IACb,GAAGC;EACJ,CAAC,GAAGb,KAAK;EACT,MAAMQ,EAAE,GAAG,IAAAM,sBAAa,EAAEC,WAAW,EAAE,wBAAwB,EAAEN,MAAO,CAAC;EACzE,MAAMO,aAAa,GAAKC,KAAsC,IAC7DN,QAAQ,CAAEM,KAAK,CAACC,MAAM,CAACZ,KAAM,CAAC;EAE/B,oBACC,IAAAR,WAAA,CAAAqB,GAAA,EAACtB,YAAA,CAAAuB,OAAW;IACXlB,uBAAuB,EAAGA,uBAAyB;IACnDE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CG,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAW,QAAA,eAEvB,IAAAvB,WAAA,CAAAqB,GAAA;MACCT,SAAS,EAAG,IAAAY,aAAI,EAAE,gCAAgC,EAAE;QACnD,2BAA2B,EAAEnB;MAC9B,CAAE,CAAG;MACLS,IAAI,EAAGA,IAAM;MACbJ,EAAE,EAAGA,EAAI;MACTF,KAAK,EAAGA,KAAO;MACfK,QAAQ,EAAGK,aAAe;MAC1B,oBAAmB,CAAC,CAAET,IAAI,GAAGC,EAAE,GAAG,QAAQ,GAAGe,SAAW;MACxDtB,GAAG,EAAGA,GAAK;MAAA,GACNY;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,WAAW,GAAAS,OAAA,CAAAT,WAAA,GAAG,IAAAU,mBAAU,EAAE1B,sBAAuB,CAAC;AAAC,IAAA2B,QAAA,GAAAF,OAAA,CAAAJ,OAAA,GAEjDL,WAAW","ignoreList":[]}
1
+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_baseControl","_jsxRuntime","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","__next40pxDefaultSize","label","hideLabelFromVision","value","help","id","idProp","className","onChange","type","additionalProps","useInstanceId","TextControl","onChangeValue","event","target","jsx","default","children","clsx","undefined","exports","forwardRef","_default"],"sources":["@wordpress/components/src/text-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize = false,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tid: idProp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst id = useInstanceId( TextControl, 'inspector-text-control', idProp );\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName={ clsx( 'components-text-control__input', {\n\t\t\t\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t\t\t} ) }\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n * const [ className, setClassName ] = useState( '' );\n *\n * return (\n * <TextControl\n * __nextHasNoMarginBottom\n * label=\"Additional CSS Class\"\n * value={ className }\n * onChange={ ( value ) => setClassName( value ) }\n * />\n * );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"],"mappings":";;;;;;;AAIA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAA0C,IAAAI,WAAA,GAAAJ,OAAA;AAf1C;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAKA,SAASK,sBAAsBA,CAC9BC,KAAkE,EAClEC,GAAqC,EACpC;EACD,MAAM;IACLC,uBAAuB;IACvBC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,EAAE,EAAEC,MAAM;IACVC,SAAS;IACTC,QAAQ;IACRC,IAAI,GAAG,MAAM;IACb,GAAGC;EACJ,CAAC,GAAGb,KAAK;EACT,MAAMQ,EAAE,GAAG,IAAAM,sBAAa,EAAEC,WAAW,EAAE,wBAAwB,EAAEN,MAAO,CAAC;EACzE,MAAMO,aAAa,GAAKC,KAAsC,IAC7DN,QAAQ,CAAEM,KAAK,CAACC,MAAM,CAACZ,KAAM,CAAC;EAE/B,oBACC,IAAAR,WAAA,CAAAqB,GAAA,EAACtB,YAAA,CAAAuB,OAAW;IACXlB,uBAAuB,EAAGA,uBAAyB;IACnDE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CG,EAAE,EAAGA,EAAI;IACTD,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGA,SAAW;IAAAW,QAAA,eAEvB,IAAAvB,WAAA,CAAAqB,GAAA;MACCT,SAAS,EAAG,IAAAY,aAAI,EAAE,gCAAgC,EAAE;QACnD,2BAA2B,EAAEnB;MAC9B,CAAE,CAAG;MACLS,IAAI,EAAGA,IAAM;MACbJ,EAAE,EAAGA,EAAI;MACTF,KAAK,EAAGA,KAAO;MACfK,QAAQ,EAAGK,aAAe;MAC1B,oBAAmB,CAAC,CAAET,IAAI,GAAGC,EAAE,GAAG,QAAQ,GAAGe,SAAW;MACxDtB,GAAG,EAAGA,GAAK;MAAA,GACNY;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,WAAW,GAAAS,OAAA,CAAAT,WAAA,GAAG,IAAAU,mBAAU,EAAE1B,sBAAuB,CAAC;AAAC,IAAA2B,QAAA,GAAAF,OAAA,CAAAJ,OAAA,GAEjDL,WAAW","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.ToggleControl = ToggleControl;
8
- exports.default = void 0;
7
+ exports.default = exports.ToggleControl = void 0;
9
8
  var _react = require("@emotion/react");
10
9
  var _clsx = _interopRequireDefault(require("clsx"));
11
10
  var _element = require("@wordpress/element");
@@ -29,27 +28,7 @@ var _jsxRuntime = require("react/jsx-runtime");
29
28
  * Internal dependencies
30
29
  */
31
30
 
32
- /**
33
- * ToggleControl is used to generate a toggle user interface.
34
- *
35
- * ```jsx
36
- * import { ToggleControl } from '@wordpress/components';
37
- * import { useState } from '@wordpress/element';
38
- *
39
- * const MyToggleControl = () => {
40
- * const [ value, setValue ] = useState( false );
41
- *
42
- * return (
43
- * <ToggleControl
44
- * label="Fixed Background"
45
- * checked={ value }
46
- * onChange={ () => setValue( ( state ) => ! state ) }
47
- * />
48
- * );
49
- * };
50
- * ```
51
- */
52
- function ToggleControl({
31
+ function UnforwardedToggleControl({
53
32
  __nextHasNoMarginBottom,
54
33
  label,
55
34
  checked,
@@ -66,7 +45,7 @@ function ToggleControl({
66
45
  const cx = (0, _utils.useCx)();
67
46
  const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/(0, _react.css)({
68
47
  marginBottom: (0, _space.space)(3)
69
- }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1FK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50LCBGb3J3YXJkZWRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgY2xzeCBmcm9tICdjbHN4JztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uL2ZsZXgnO1xuaW1wb3J0IEZvcm1Ub2dnbGUgZnJvbSAnLi4vZm9ybS10b2dnbGUnO1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dC93b3JkcHJlc3MtY29tcG9uZW50JztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91dGlscy9zcGFjZSc7XG5cbi8qKlxuICogVG9nZ2xlQ29udHJvbCBpcyB1c2VkIHRvIGdlbmVyYXRlIGEgdG9nZ2xlIHVzZXIgaW50ZXJmYWNlLlxuICpcbiAqIGBgYGpzeFxuICogaW1wb3J0IHsgVG9nZ2xlQ29udHJvbCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKiBpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG4gKlxuICogY29uc3QgTXlUb2dnbGVDb250cm9sID0gKCkgPT4ge1xuICogICBjb25zdCBbIHZhbHVlLCBzZXRWYWx1ZSBdID0gdXNlU3RhdGUoIGZhbHNlICk7XG4gKlxuICogICByZXR1cm4gKFxuICogICAgIDxUb2dnbGVDb250cm9sXG4gKiAgICAgICBsYWJlbD1cIkZpeGVkIEJhY2tncm91bmRcIlxuICogICAgICAgY2hlY2tlZD17IHZhbHVlIH1cbiAqICAgICAgIG9uQ2hhbmdlPXsgKCkgPT4gc2V0VmFsdWUoICggc3RhdGUgKSA9PiAhIHN0YXRlICkgfVxuICogICAgIC8+XG4gKiAgICk7XG4gKiB9O1xuICogYGBgXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBUb2dnbGVDb250cm9sKFxuXHR7XG5cdFx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b20sXG5cdFx0bGFiZWwsXG5cdFx0Y2hlY2tlZCxcblx0XHRoZWxwLFxuXHRcdGNsYXNzTmFtZSxcblx0XHRvbkNoYW5nZSxcblx0XHRkaXNhYmxlZCxcblx0fTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IFRvZ2dsZUNvbnRyb2xQcm9wcywgJ2lucHV0JywgZmFsc2UgPixcblx0cmVmOiBGb3J3YXJkZWRSZWY8IEhUTUxJbnB1dEVsZW1lbnQgPlxuKSB7XG5cdGZ1bmN0aW9uIG9uQ2hhbmdlVG9nZ2xlKCBldmVudDogQ2hhbmdlRXZlbnQ8IEhUTUxJbnB1dEVsZW1lbnQgPiApIHtcblx0XHRvbkNoYW5nZSggZXZlbnQudGFyZ2V0LmNoZWNrZWQgKTtcblx0fVxuXHRjb25zdCBpbnN0YW5jZUlkID0gdXNlSW5zdGFuY2VJZCggVG9nZ2xlQ29udHJvbCApO1xuXHRjb25zdCBpZCA9IGBpbnNwZWN0b3ItdG9nZ2xlLWNvbnRyb2wtJHsgaW5zdGFuY2VJZCB9YDtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cdGNvbnN0IGNsYXNzZXMgPSBjeChcblx0XHQnY29tcG9uZW50cy10b2dnbGUtY29udHJvbCcsXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiYgY3NzKCB7IG1hcmdpbkJvdHRvbTogc3BhY2UoIDMgKSB9IClcblx0KTtcblxuXHRsZXQgZGVzY3JpYmVkQnksIGhlbHBMYWJlbDtcblx0aWYgKCBoZWxwICkge1xuXHRcdGlmICggdHlwZW9mIGhlbHAgPT09ICdmdW5jdGlvbicgKSB7XG5cdFx0XHQvLyBgaGVscGAgYXMgYSBmdW5jdGlvbiB3b3JrcyBvbmx5IGZvciBjb250cm9sbGVkIGNvbXBvbmVudHMgd2hlcmVcblx0XHRcdC8vIGBjaGVja2VkYCBpcyBwYXNzZWQgZG93biBmcm9tIHBhcmVudCBjb21wb25lbnQuIFVuY29udHJvbGxlZFxuXHRcdFx0Ly8gY29tcG9uZW50IGNhbiBzaG93IG9ubHkgYSBzdGF0aWMgaGVscCBsYWJlbC5cblx0XHRcdGlmICggY2hlY2tlZCAhPT0gdW5kZWZpbmVkICkge1xuXHRcdFx0XHRoZWxwTGFiZWwgPSBoZWxwKCBjaGVja2VkICk7XG5cdFx0XHR9XG5cdFx0fSBlbHNlIHtcblx0XHRcdGhlbHBMYWJlbCA9IGhlbHA7XG5cdFx0fVxuXHRcdGlmICggaGVscExhYmVsICkge1xuXHRcdFx0ZGVzY3JpYmVkQnkgPSBpZCArICdfX2hlbHAnO1xuXHRcdH1cblx0fVxuXG5cdHJldHVybiAoXG5cdFx0PEJhc2VDb250cm9sXG5cdFx0XHRpZD17IGlkIH1cblx0XHRcdGhlbHA9e1xuXHRcdFx0XHRoZWxwTGFiZWwgJiYgKFxuXHRcdFx0XHRcdDxzcGFuIGNsYXNzTmFtZT1cImNvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2xfX2hlbHBcIj5cblx0XHRcdFx0XHRcdHsgaGVscExhYmVsIH1cblx0XHRcdFx0XHQ8L3NwYW4+XG5cdFx0XHRcdClcblx0XHRcdH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b21cblx0XHQ+XG5cdFx0XHQ8SFN0YWNrIGp1c3RpZnk9XCJmbGV4LXN0YXJ0XCIgc3BhY2luZz17IDIgfT5cblx0XHRcdFx0PEZvcm1Ub2dnbGVcblx0XHRcdFx0XHRpZD17IGlkIH1cblx0XHRcdFx0XHRjaGVja2VkPXsgY2hlY2tlZCB9XG5cdFx0XHRcdFx0b25DaGFuZ2U9eyBvbkNoYW5nZVRvZ2dsZSB9XG5cdFx0XHRcdFx0YXJpYS1kZXNjcmliZWRieT17IGRlc2NyaWJlZEJ5IH1cblx0XHRcdFx0XHRkaXNhYmxlZD17IGRpc2FibGVkIH1cblx0XHRcdFx0XHRyZWY9eyByZWYgfVxuXHRcdFx0XHQvPlxuXHRcdFx0XHQ8RmxleEJsb2NrXG5cdFx0XHRcdFx0YXM9XCJsYWJlbFwiXG5cdFx0XHRcdFx0aHRtbEZvcj17IGlkIH1cblx0XHRcdFx0XHRjbGFzc05hbWU9eyBjbHN4KCAnY29tcG9uZW50cy10b2dnbGUtY29udHJvbF9fbGFiZWwnLCB7XG5cdFx0XHRcdFx0XHQnaXMtZGlzYWJsZWQnOiBkaXNhYmxlZCxcblx0XHRcdFx0XHR9ICkgfVxuXHRcdFx0XHQ+XG5cdFx0XHRcdFx0eyBsYWJlbCB9XG5cdFx0XHRcdDwvRmxleEJsb2NrPlxuXHRcdFx0PC9IU3RhY2s+XG5cdFx0PC9CYXNlQ29udHJvbD5cblx0KTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgZm9yd2FyZFJlZiggVG9nZ2xlQ29udHJvbCApO1xuIl19 */"));
48
+ }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50LCBGb3J3YXJkZWRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgY2xzeCBmcm9tICdjbHN4JztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uL2ZsZXgnO1xuaW1wb3J0IEZvcm1Ub2dnbGUgZnJvbSAnLi4vZm9ybS10b2dnbGUnO1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dC93b3JkcHJlc3MtY29tcG9uZW50JztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91dGlscy9zcGFjZSc7XG5cbmZ1bmN0aW9uIFVuZm9yd2FyZGVkVG9nZ2xlQ29udHJvbChcblx0e1xuXHRcdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxuXHRcdGxhYmVsLFxuXHRcdGNoZWNrZWQsXG5cdFx0aGVscCxcblx0XHRjbGFzc05hbWUsXG5cdFx0b25DaGFuZ2UsXG5cdFx0ZGlzYWJsZWQsXG5cdH06IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBUb2dnbGVDb250cm9sUHJvcHMsICdpbnB1dCcsIGZhbHNlID4sXG5cdHJlZjogRm9yd2FyZGVkUmVmPCBIVE1MSW5wdXRFbGVtZW50ID5cbikge1xuXHRmdW5jdGlvbiBvbkNoYW5nZVRvZ2dsZSggZXZlbnQ6IENoYW5nZUV2ZW50PCBIVE1MSW5wdXRFbGVtZW50ID4gKSB7XG5cdFx0b25DaGFuZ2UoIGV2ZW50LnRhcmdldC5jaGVja2VkICk7XG5cdH1cblx0Y29uc3QgaW5zdGFuY2VJZCA9IHVzZUluc3RhbmNlSWQoIFRvZ2dsZUNvbnRyb2wgKTtcblx0Y29uc3QgaWQgPSBgaW5zcGVjdG9yLXRvZ2dsZS1jb250cm9sLSR7IGluc3RhbmNlSWQgfWA7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gY3goXG5cdFx0J2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2wnLFxuXHRcdGNsYXNzTmFtZSxcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGNzcyggeyBtYXJnaW5Cb3R0b206IHNwYWNlKCAzICkgfSApXG5cdCk7XG5cblx0bGV0IGRlc2NyaWJlZEJ5LCBoZWxwTGFiZWw7XG5cdGlmICggaGVscCApIHtcblx0XHRpZiAoIHR5cGVvZiBoZWxwID09PSAnZnVuY3Rpb24nICkge1xuXHRcdFx0Ly8gYGhlbHBgIGFzIGEgZnVuY3Rpb24gd29ya3Mgb25seSBmb3IgY29udHJvbGxlZCBjb21wb25lbnRzIHdoZXJlXG5cdFx0XHQvLyBgY2hlY2tlZGAgaXMgcGFzc2VkIGRvd24gZnJvbSBwYXJlbnQgY29tcG9uZW50LiBVbmNvbnRyb2xsZWRcblx0XHRcdC8vIGNvbXBvbmVudCBjYW4gc2hvdyBvbmx5IGEgc3RhdGljIGhlbHAgbGFiZWwuXG5cdFx0XHRpZiAoIGNoZWNrZWQgIT09IHVuZGVmaW5lZCApIHtcblx0XHRcdFx0aGVscExhYmVsID0gaGVscCggY2hlY2tlZCApO1xuXHRcdFx0fVxuXHRcdH0gZWxzZSB7XG5cdFx0XHRoZWxwTGFiZWwgPSBoZWxwO1xuXHRcdH1cblx0XHRpZiAoIGhlbHBMYWJlbCApIHtcblx0XHRcdGRlc2NyaWJlZEJ5ID0gaWQgKyAnX19oZWxwJztcblx0XHR9XG5cdH1cblxuXHRyZXR1cm4gKFxuXHRcdDxCYXNlQ29udHJvbFxuXHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRoZWxwPXtcblx0XHRcdFx0aGVscExhYmVsICYmIChcblx0XHRcdFx0XHQ8c3BhbiBjbGFzc05hbWU9XCJjb21wb25lbnRzLXRvZ2dsZS1jb250cm9sX19oZWxwXCI+XG5cdFx0XHRcdFx0XHR7IGhlbHBMYWJlbCB9XG5cdFx0XHRcdFx0PC9zcGFuPlxuXHRcdFx0XHQpXG5cdFx0XHR9XG5cdFx0XHRjbGFzc05hbWU9eyBjbGFzc2VzIH1cblx0XHRcdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PlxuXHRcdFx0PEhTdGFjayBqdXN0aWZ5PVwiZmxleC1zdGFydFwiIHNwYWNpbmc9eyAyIH0+XG5cdFx0XHRcdDxGb3JtVG9nZ2xlXG5cdFx0XHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRcdFx0Y2hlY2tlZD17IGNoZWNrZWQgfVxuXHRcdFx0XHRcdG9uQ2hhbmdlPXsgb25DaGFuZ2VUb2dnbGUgfVxuXHRcdFx0XHRcdGFyaWEtZGVzY3JpYmVkYnk9eyBkZXNjcmliZWRCeSB9XG5cdFx0XHRcdFx0ZGlzYWJsZWQ9eyBkaXNhYmxlZCB9XG5cdFx0XHRcdFx0cmVmPXsgcmVmIH1cblx0XHRcdFx0Lz5cblx0XHRcdFx0PEZsZXhCbG9ja1xuXHRcdFx0XHRcdGFzPVwibGFiZWxcIlxuXHRcdFx0XHRcdGh0bWxGb3I9eyBpZCB9XG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgY2xzeCggJ2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2xfX2xhYmVsJywge1xuXHRcdFx0XHRcdFx0J2lzLWRpc2FibGVkJzogZGlzYWJsZWQsXG5cdFx0XHRcdFx0fSApIH1cblx0XHRcdFx0PlxuXHRcdFx0XHRcdHsgbGFiZWwgfVxuXHRcdFx0XHQ8L0ZsZXhCbG9jaz5cblx0XHRcdDwvSFN0YWNrPlxuXHRcdDwvQmFzZUNvbnRyb2w+XG5cdCk7XG59XG5cbi8qKlxuICogVG9nZ2xlQ29udHJvbCBpcyB1c2VkIHRvIGdlbmVyYXRlIGEgdG9nZ2xlIHVzZXIgaW50ZXJmYWNlLlxuICpcbiAqIGBgYGpzeFxuICogaW1wb3J0IHsgVG9nZ2xlQ29udHJvbCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKiBpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG4gKlxuICogY29uc3QgTXlUb2dnbGVDb250cm9sID0gKCkgPT4ge1xuICogICBjb25zdCBbIHZhbHVlLCBzZXRWYWx1ZSBdID0gdXNlU3RhdGUoIGZhbHNlICk7XG4gKlxuICogICByZXR1cm4gKFxuICogICAgIDxUb2dnbGVDb250cm9sXG4gKiAgICAgICBfX25leHRIYXNOb01hcmdpbkJvdHRvbVxuICogICAgICAgbGFiZWw9XCJGaXhlZCBCYWNrZ3JvdW5kXCJcbiAqICAgICAgIGNoZWNrZWQ9eyB2YWx1ZSB9XG4gKiAgICAgICBvbkNoYW5nZT17ICgpID0+IHNldFZhbHVlKCAoIHN0YXRlICkgPT4gISBzdGF0ZSApIH1cbiAqICAgICAvPlxuICogICApO1xuICogfTtcbiAqIGBgYFxuICovXG5leHBvcnQgY29uc3QgVG9nZ2xlQ29udHJvbCA9IGZvcndhcmRSZWYoIFVuZm9yd2FyZGVkVG9nZ2xlQ29udHJvbCApO1xuXG5leHBvcnQgZGVmYXVsdCBUb2dnbGVDb250cm9sO1xuIl19 */"));
70
49
  let describedBy, helpLabel;
71
50
  if (help) {
72
51
  if (typeof help === 'function') {
@@ -112,5 +91,28 @@ function ToggleControl({
112
91
  })
113
92
  });
114
93
  }
115
- var _default = exports.default = (0, _element.forwardRef)(ToggleControl);
94
+
95
+ /**
96
+ * ToggleControl is used to generate a toggle user interface.
97
+ *
98
+ * ```jsx
99
+ * import { ToggleControl } from '@wordpress/components';
100
+ * import { useState } from '@wordpress/element';
101
+ *
102
+ * const MyToggleControl = () => {
103
+ * const [ value, setValue ] = useState( false );
104
+ *
105
+ * return (
106
+ * <ToggleControl
107
+ * __nextHasNoMarginBottom
108
+ * label="Fixed Background"
109
+ * checked={ value }
110
+ * onChange={ () => setValue( ( state ) => ! state ) }
111
+ * />
112
+ * );
113
+ * };
114
+ * ```
115
+ */
116
+ const ToggleControl = exports.ToggleControl = (0, _element.forwardRef)(UnforwardedToggleControl);
117
+ var _default = exports.default = ToggleControl;
116
118
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_react","require","_clsx","_interopRequireDefault","_element","_compose","_flex","_formToggle","_baseControl","_hStack","_utils","_space","_jsxRuntime","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","ref","onChangeToggle","event","target","instanceId","useInstanceId","id","cx","useCx","classes","css","marginBottom","space","process","env","NODE_ENV","describedBy","helpLabel","undefined","jsx","default","children","jsxs","HStack","justify","spacing","FlexBlock","as","htmlFor","clsx","_default","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../utils/space';\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n * const [ value, setValue ] = useState( false );\n *\n * return (\n * <ToggleControl\n * label=\"Fixed Background\"\n * checked={ value }\n * onChange={ () => setValue( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport function ToggleControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tchecked,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\tdisabled,\n\t}: WordPressComponentProps< ToggleControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelpLabel && (\n\t\t\t\t\t<span className=\"components-toggle-control__help\">\n\t\t\t\t\t\t{ helpLabel }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tref={ ref }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName={ clsx( 'components-toggle-control__label', {\n\t\t\t\t\t\t'is-disabled': disabled,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default forwardRef( ToggleControl );\n"],"mappings":";;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,YAAA,GAAAL,sBAAA,CAAAF,OAAA;AAGA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,MAAA,GAAAV,OAAA;AAAuC,IAAAW,WAAA,GAAAX,OAAA;AAvBvC;AACA;AACA;;AAKA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASY,aAAaA,CAC5B;EACCC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAChEC,GAAqC,EACpC;EACD,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEJ,QAAQ,CAAEI,KAAK,CAACC,MAAM,CAACR,OAAQ,CAAC;EACjC;EACA,MAAMS,UAAU,GAAG,IAAAC,sBAAa,EAAEb,aAAc,CAAC;EACjD,MAAMc,EAAE,GAAI,4BAA4BF,UAAY,EAAC;EAErD,MAAMG,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAGF,EAAE,CACjB,2BAA2B,EAC3BV,SAAS,EACT,CAAEJ,uBAAuB,iBAAI,IAAAiB,UAAG,EAAE;IAAEC,YAAY,EAAE,IAAAC,YAAK,EAAE,CAAE;EAAE,CAAC,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,8lJAAC,CAChE,CAAC;EAED,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKrB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKuB,SAAS,EAAG;QAC5BD,SAAS,GAAGrB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNsB,SAAS,GAAGrB,IAAI;IACjB;IACA,IAAKqB,SAAS,EAAG;MAChBD,WAAW,GAAGV,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,oBACC,IAAAf,WAAA,CAAA4B,GAAA,EAAChC,YAAA,CAAAiC,OAAW;IACXd,EAAE,EAAGA,EAAI;IACTV,IAAI,EACHqB,SAAS,iBACR,IAAA1B,WAAA,CAAA4B,GAAA;MAAMtB,SAAS,EAAC,iCAAiC;MAAAwB,QAAA,EAC9CJ;IAAS,CACN,CAEP;IACDpB,SAAS,EAAGY,OAAS;IACrBhB,uBAAuB;IAAA4B,QAAA,eAEvB,IAAA9B,WAAA,CAAA+B,IAAA,EAAClC,OAAA,CAAAmC,MAAM;MAACC,OAAO,EAAC,YAAY;MAACC,OAAO,EAAG,CAAG;MAAAJ,QAAA,gBACzC,IAAA9B,WAAA,CAAA4B,GAAA,EAACjC,WAAA,CAAAkC,OAAU;QACVd,EAAE,EAAGA,EAAI;QACTX,OAAO,EAAGA,OAAS;QACnBG,QAAQ,EAAGG,cAAgB;QAC3B,oBAAmBe,WAAa;QAChCjB,QAAQ,EAAGA,QAAU;QACrBC,GAAG,EAAGA;MAAK,CACX,CAAC,eACF,IAAAT,WAAA,CAAA4B,GAAA,EAAClC,KAAA,CAAAyC,SAAS;QACTC,EAAE,EAAC,OAAO;QACVC,OAAO,EAAGtB,EAAI;QACdT,SAAS,EAAG,IAAAgC,aAAI,EAAE,kCAAkC,EAAE;UACrD,aAAa,EAAE9B;QAChB,CAAE,CAAG;QAAAsB,QAAA,EAEH3B;MAAK,CACG,CAAC;IAAA,CACL;EAAC,CACG,CAAC;AAEhB;AAAC,IAAAoC,QAAA,GAAAC,OAAA,CAAAX,OAAA,GAEc,IAAAY,mBAAU,EAAExC,aAAc,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["_react","require","_clsx","_interopRequireDefault","_element","_compose","_flex","_formToggle","_baseControl","_hStack","_utils","_space","_jsxRuntime","UnforwardedToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","ref","onChangeToggle","event","target","instanceId","useInstanceId","ToggleControl","id","cx","useCx","classes","css","marginBottom","space","process","env","NODE_ENV","describedBy","helpLabel","undefined","jsx","default","children","jsxs","HStack","justify","spacing","FlexBlock","as","htmlFor","clsx","exports","forwardRef","_default"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../utils/space';\n\nfunction UnforwardedToggleControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tchecked,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\tdisabled,\n\t}: WordPressComponentProps< ToggleControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelpLabel && (\n\t\t\t\t\t<span className=\"components-toggle-control__help\">\n\t\t\t\t\t\t{ helpLabel }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tref={ ref }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName={ clsx( 'components-toggle-control__label', {\n\t\t\t\t\t\t'is-disabled': disabled,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n * const [ value, setValue ] = useState( false );\n *\n * return (\n * <ToggleControl\n * __nextHasNoMarginBottom\n * label=\"Fixed Background\"\n * checked={ value }\n * onChange={ () => setValue( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport const ToggleControl = forwardRef( UnforwardedToggleControl );\n\nexport default ToggleControl;\n"],"mappings":"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","ignoreList":[]}
@@ -101,7 +101,12 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
101
101
  *
102
102
  * function Example() {
103
103
  * return (
104
- * <ToggleGroupControl label="my label" value="vertical" isBlock>
104
+ * <ToggleGroupControl
105
+ * label="my label"
106
+ * value="vertical"
107
+ * isBlock
108
+ * __nextHasNoMarginBottom
109
+ * >
105
110
  * <ToggleGroupControlOption value="horizontal" label="Horizontal" />
106
111
  * <ToggleGroupControlOption value="vertical" label="Vertical" />
107
112
  * </ToggleGroupControl>
@@ -1 +1 @@
1
- {"version":3,"names":["_framerMotion","require","_compose","_element","_context","_hooks","_baseControl","_interopRequireDefault","_styles","_interopRequireWildcard","styles","_asRadioGroup","_asButtonGroup","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","useContextSystem","baseId","useInstanceId","ToggleGroupControl","normalizedSize","cx","useCx","classes","useMemo","toggleGroupControl","block","MainControl","ToggleGroupControlAsButtonGroup","ToggleGroupControlAsRadioGroup","jsxs","jsx","VisualLabelWrapper","VisualLabel","ref","LayoutGroup","id","exports","contextConnect","_default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\tconst normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( {\n\t\t\t\t\tisBlock,\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tsize: normalizedSize,\n\t\t\t\t} ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, normalizedSize ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":";;;;;;;AAIA,IAAAA,aAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAMA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAC,sBAAA,CAAAN,OAAA;AAEA,IAAAO,OAAA,GAAAC,uBAAA,CAAAR,OAAA;AAA8C,IAAAS,MAAA,GAAAF,OAAA;AAE9C,IAAAG,aAAA,GAAAV,OAAA;AACA,IAAAW,cAAA,GAAAX,OAAA;AAAoE,IAAAY,WAAA,GAAAZ,OAAA;AAAA,SAAAa,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAvBpE;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAWA,SAASW,6BAA6BA,CACrCC,KAAuE,EACvEC,YAAiC,EAChC;EACD,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,qBAAqB,GAAG,KAAK;IAC7BC,SAAS;IACTC,eAAe,GAAG,KAAK;IACvBC,OAAO,GAAG,KAAK;IACfC,cAAc,GAAG,KAAK;IACtBC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEhB,KAAK,EAAE,oBAAqB,CAAC;EAEnD,MAAMiB,MAAM,GAAG,IAAAC,sBAAa,EAAEC,kBAAkB,EAAE,sBAAuB,CAAC;EAC1E,MAAMC,cAAc,GACnBjB,qBAAqB,IAAIS,IAAI,KAAK,SAAS,GAAG,kBAAkB,GAAGA,IAAI;EAExE,MAAMS,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EACtB,MACCH,EAAE,CACD9C,MAAM,CAACkD,kBAAkB,CAAE;IAC1BnB,OAAO;IACPC,cAAc;IACdK,IAAI,EAAEQ;EACP,CAAE,CAAC,EACHd,OAAO,IAAI/B,MAAM,CAACmD,KAAK,EACvBtB,SACD,CAAC,EACF,CAAEA,SAAS,EAAEiB,EAAE,EAAEf,OAAO,EAAEC,cAAc,EAAEa,cAAc,CACzD,CAAC;EAED,MAAMO,WAAW,GAAGpB,cAAc,GAC/BqB,8CAA+B,GAC/BC,4CAA8B;EAEjC,oBACC,IAAAnD,WAAA,CAAAoD,IAAA,EAAC3D,YAAA,CAAAc,OAAW;IACXyB,IAAI,EAAGA,IAAM;IACbR,uBAAuB,EAAGA,uBAAyB;IAAAY,QAAA,GAEjD,CAAEL,mBAAmB,iBACtB,IAAA/B,WAAA,CAAAqD,GAAA,EAAC1D,OAAA,CAAA2D,kBAAkB;MAAAlB,QAAA,eAClB,IAAApC,WAAA,CAAAqD,GAAA,EAAC5D,YAAA,CAAAc,OAAW,CAACgD,WAAW;QAAAnB,QAAA,EAAGN;MAAK,CAA2B;IAAC,CACzC,CACpB,eACD,IAAA9B,WAAA,CAAAqD,GAAA,EAACJ,WAAW;MAAA,GACNZ,UAAU;MACfX,SAAS,EAAGmB,OAAS;MACrBlB,eAAe,EAAGA,eAAiB;MACnCG,KAAK,EAAGA,KAAO;MACfG,QAAQ,EAAGA,QAAU;MACrBuB,GAAG,EAAGjC,YAAc;MACpBW,IAAI,EAAGQ,cAAgB;MACvBP,KAAK,EAAGA,KAAO;MAAAC,QAAA,eAEf,IAAApC,WAAA,CAAAqD,GAAA,EAAClE,aAAA,CAAAsE,WAAW;QAACC,EAAE,EAAGnB,MAAQ;QAAAH,QAAA,EAAGA;MAAQ,CAAe;IAAC,CACzC,CAAC;EAAA,CACF,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMK,kBAAkB,GAAAkB,OAAA,CAAAlB,kBAAA,GAAG,IAAAmB,uBAAc,EAC/CvC,6BAA6B,EAC7B,oBACD,CAAC;AAAC,IAAAwC,QAAA,GAAAF,OAAA,CAAApD,OAAA,GAEakC,kBAAkB","ignoreList":[]}
1
+ {"version":3,"names":["_framerMotion","require","_compose","_element","_context","_hooks","_baseControl","_interopRequireDefault","_styles","_interopRequireWildcard","styles","_asRadioGroup","_asButtonGroup","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","useContextSystem","baseId","useInstanceId","ToggleGroupControl","normalizedSize","cx","useCx","classes","useMemo","toggleGroupControl","block","MainControl","ToggleGroupControlAsButtonGroup","ToggleGroupControlAsRadioGroup","jsxs","jsx","VisualLabelWrapper","VisualLabel","ref","LayoutGroup","id","exports","contextConnect","_default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\tconst normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( {\n\t\t\t\t\tisBlock,\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tsize: normalizedSize,\n\t\t\t\t} ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, normalizedSize ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n * return (\n * <ToggleGroupControl\n * label=\"my label\"\n * value=\"vertical\"\n * isBlock\n * __nextHasNoMarginBottom\n * >\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":"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","ignoreList":[]}
@@ -45,7 +45,12 @@ function UnforwardedToggleGroupControlOption(props, ref) {
45
45
  *
46
46
  * function Example() {
47
47
  * return (
48
- * <ToggleGroupControl label="my label" value="vertical" isBlock>
48
+ * <ToggleGroupControl
49
+ * label="my label"
50
+ * value="vertical"
51
+ * isBlock
52
+ * __nextHasNoMarginBottom
53
+ * >
49
54
  * <ToggleGroupControlOption value="horizontal" label="Horizontal" />
50
55
  * <ToggleGroupControlOption value="vertical" label="Vertical" />
51
56
  * </ToggleGroupControl>
@@ -1 +1 @@
1
- {"version":3,"names":["_element","require","_toggleGroupControlOptionBase","_jsxRuntime","UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","jsx","ToggleGroupControlOptionBase","children","ToggleGroupControlOption","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nfunction UnforwardedToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { label, ...restProps } = props;\n\tconst optionLabel = restProps[ 'aria-label' ] || label;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\taria-label={ optionLabel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ label }\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(\n\tUnforwardedToggleGroupControlOption\n);\n\nexport default ToggleGroupControlOption;\n"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,6BAAA,GAAAD,OAAA;AAAmF,IAAAE,WAAA,GAAAF,OAAA;AAfnF;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASG,mCAAmCA,CAC3CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EACrC,MAAMI,WAAW,GAAGD,SAAS,CAAE,YAAY,CAAE,IAAID,KAAK;EACtD,oBACC,IAAAJ,WAAA,CAAAO,GAAA,EAACR,6BAAA,CAAAS,4BAA4B;IAAA,GACvBH,SAAS;IACd,cAAaC,WAAa;IAC1BH,GAAG,EAAGA,GAAK;IAAAM,QAAA,EAETL;EAAK,CACsB,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjDX,mCACD,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEaJ,wBAAwB","ignoreList":[]}
1
+ {"version":3,"names":["_element","require","_toggleGroupControlOptionBase","_jsxRuntime","UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","jsx","ToggleGroupControlOptionBase","children","ToggleGroupControlOption","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nfunction UnforwardedToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { label, ...restProps } = props;\n\tconst optionLabel = restProps[ 'aria-label' ] || label;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\taria-label={ optionLabel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ label }\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n * return (\n * <ToggleGroupControl\n * label=\"my label\"\n * value=\"vertical\"\n * isBlock\n * __nextHasNoMarginBottom\n * >\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(\n\tUnforwardedToggleGroupControlOption\n);\n\nexport default ToggleGroupControlOption;\n"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,6BAAA,GAAAD,OAAA;AAAmF,IAAAE,WAAA,GAAAF,OAAA;AAfnF;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASG,mCAAmCA,CAC3CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EACrC,MAAMI,WAAW,GAAGD,SAAS,CAAE,YAAY,CAAE,IAAID,KAAK;EACtD,oBACC,IAAAJ,WAAA,CAAAO,GAAA,EAACR,6BAAA,CAAAS,4BAA4B;IAAA,GACvBH,SAAS;IACd,cAAaC,WAAa;IAC1BH,GAAG,EAAGA,GAAK;IAAAM,QAAA,EAETL;EAAK,CACsB,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjDX,mCACD,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEaJ,wBAAwB","ignoreList":[]}
@@ -52,20 +52,20 @@ function UnforwardedToggleGroupControlOptionIcon(props, ref) {
52
52
  * import { formatLowercase, formatUppercase } from '@wordpress/icons';
53
53
  *
54
54
  * function Example() {
55
- * return (
56
- * <ToggleGroupControl>
57
- * <ToggleGroupControlOptionIcon
58
- * value="uppercase"
59
- * label="Uppercase"
60
- * icon={ formatUppercase }
61
- * />
62
- * <ToggleGroupControlOptionIcon
63
- * value="lowercase"
64
- * label="Lowercase"
65
- * icon={ formatLowercase }
66
- * />
67
- * </ToggleGroupControl>
68
- * );
55
+ * return (
56
+ * <ToggleGroupControl __nextHasNoMarginBottom>
57
+ * <ToggleGroupControlOptionIcon
58
+ * value="uppercase"
59
+ * label="Uppercase"
60
+ * icon={ formatUppercase }
61
+ * />
62
+ * <ToggleGroupControlOptionIcon
63
+ * value="lowercase"
64
+ * label="Lowercase"
65
+ * icon={ formatLowercase }
66
+ * />
67
+ * </ToggleGroupControl>
68
+ * );
69
69
  * }
70
70
  * ```
71
71
  */
@@ -1 +1 @@
1
- {"version":3,"names":["_element","require","_toggleGroupControlOptionBase","_icon","_interopRequireDefault","_jsxRuntime","UnforwardedToggleGroupControlOptionIcon","props","ref","icon","label","restProps","jsx","ToggleGroupControlOptionBase","isIcon","showTooltip","children","default","ToggleGroupControlOptionIcon","exports","forwardRef","_default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport type { ToggleGroupControlOptionIconProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\n\nfunction UnforwardedToggleGroupControlOptionIcon(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionIconProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { icon, label, ...restProps } = props;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\tisIcon\n\t\t\taria-label={ label }\n\t\t\tshowTooltip\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *\treturn (\n *\t\t<ToggleGroupControl>\n *\t\t\t<ToggleGroupControlOptionIcon\n *\t\t\t\tvalue=\"uppercase\"\n *\t\t\t\tlabel=\"Uppercase\"\n *\t\t\t\ticon={ formatUppercase }\n *\t\t\t/>\n *\t\t\t<ToggleGroupControlOptionIcon\n *\t\t\t\tvalue=\"lowercase\"\n *\t\t\t\tlabel=\"Lowercase\"\n *\t\t\t\ticon={ formatLowercase }\n *\t\t\t/>\n *\t\t</ToggleGroupControl>\n *\t);\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(\n\tUnforwardedToggleGroupControlOptionIcon\n);\n\nexport default ToggleGroupControlOptionIcon;\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,6BAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA8B,IAAAI,WAAA,GAAAJ,OAAA;AAhB9B;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAMA,SAASK,uCAAuCA,CAC/CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC3C,oBACC,IAAAF,WAAA,CAAAO,GAAA,EAACV,6BAAA,CAAAW,4BAA4B;IAAA,GACvBF,SAAS;IACdG,MAAM;IACN,cAAaJ,KAAO;IACpBK,WAAW;IACXP,GAAG,EAAGA,GAAK;IAAAQ,QAAA,eAEX,IAAAX,WAAA,CAAAO,GAAA,EAACT,KAAA,CAAAc,OAAI;MAACR,IAAI,EAAGA;IAAM,CAAE;EAAC,CACO,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMS,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,mBAAU,EACrDd,uCACD,CAAC;AAAC,IAAAe,QAAA,GAAAF,OAAA,CAAAF,OAAA,GAEaC,4BAA4B","ignoreList":[]}
1
+ {"version":3,"names":["_element","require","_toggleGroupControlOptionBase","_icon","_interopRequireDefault","_jsxRuntime","UnforwardedToggleGroupControlOptionIcon","props","ref","icon","label","restProps","jsx","ToggleGroupControlOptionBase","isIcon","showTooltip","children","default","ToggleGroupControlOptionIcon","exports","forwardRef","_default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport type { ToggleGroupControlOptionIconProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\n\nfunction UnforwardedToggleGroupControlOptionIcon(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionIconProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { icon, label, ...restProps } = props;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\tisIcon\n\t\t\taria-label={ label }\n\t\t\tshowTooltip\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n * return (\n * <ToggleGroupControl __nextHasNoMarginBottom>\n * <ToggleGroupControlOptionIcon\n * value=\"uppercase\"\n * label=\"Uppercase\"\n * icon={ formatUppercase }\n * />\n * <ToggleGroupControlOptionIcon\n * value=\"lowercase\"\n * label=\"Lowercase\"\n * icon={ formatLowercase }\n * />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(\n\tUnforwardedToggleGroupControlOptionIcon\n);\n\nexport default ToggleGroupControlOptionIcon;\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,6BAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA8B,IAAAI,WAAA,GAAAJ,OAAA;AAhB9B;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAMA,SAASK,uCAAuCA,CAC/CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC3C,oBACC,IAAAF,WAAA,CAAAO,GAAA,EAACV,6BAAA,CAAAW,4BAA4B;IAAA,GACvBF,SAAS;IACdG,MAAM;IACN,cAAaJ,KAAO;IACpBK,WAAW;IACXP,GAAG,EAAGA,GAAK;IAAAQ,QAAA,eAEX,IAAAX,WAAA,CAAAO,GAAA,EAACT,KAAA,CAAAc,OAAI;MAACR,IAAI,EAAGA;IAAM,CAAE;EAAC,CACO,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMS,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,mBAAU,EACrDd,uCACD,CAAC;AAAC,IAAAe,QAAA,GAAAF,OAAA,CAAAF,OAAA,GAEaC,4BAA4B","ignoreList":[]}
@@ -83,18 +83,29 @@ function UnforwardedTooltip(props, ref) {
83
83
  placement: computedPlacement,
84
84
  showTimeout: delay
85
85
  });
86
+ const mounted = tooltipStore.useState('mounted');
86
87
  if (isNestedInTooltip) {
87
88
  return isOnlyChild ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.Role, {
88
89
  ...restProps,
89
90
  render: children
90
91
  }) : children;
91
92
  }
93
+
94
+ // TODO: this is a temporary workaround to minimize the effects of the
95
+ // Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
96
+ // the tooltip anchor anymore since 0.4.0, so we need to add it manually.
97
+ // See: https://github.com/WordPress/gutenberg/pull/64066
98
+ function addDescribedById(element) {
99
+ return describedById && mounted ? (0, _element.cloneElement)(element, {
100
+ 'aria-describedby': describedById
101
+ }) : element;
102
+ }
92
103
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipInternalContext.Provider, {
93
104
  value: CONTEXT_VALUE,
94
105
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.TooltipAnchor, {
95
106
  onClick: hideOnClick ? tooltipStore.hide : undefined,
96
107
  store: tooltipStore,
97
- render: isOnlyChild ? children : undefined,
108
+ render: isOnlyChild ? addDescribedById(children) : undefined,
98
109
  ref: ref,
99
110
  children: isOnlyChild ? undefined : children
100
111
  }), isOnlyChild && (text || shortcut) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Ariakit.Tooltip, {
@@ -1 +1 @@
1
- {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_compose","_element","_deprecated","_shortcut","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TooltipInternalContext","createContext","isNestedInTooltip","TOOLTIP_DELAY","exports","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","useContext","baseId","useInstanceId","Tooltip","describedById","undefined","isOnlyChild","Children","count","process","env","NODE_ENV","console","error","computedPlacement","positionToPlacement","deprecated","since","alternative","tooltipStore","useTooltipStore","showTimeout","jsx","Role","render","jsxs","Provider","value","TooltipAnchor","onClick","hide","store","clsx","unmountOnHide","gutter","id","overflowPadding","forwardRef","_default"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text || shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement || 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={ isOnlyChild ? children : undefined }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text || shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\n\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_compose","_element","_deprecated","_shortcut","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TooltipInternalContext","createContext","isNestedInTooltip","TOOLTIP_DELAY","exports","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","useContext","baseId","useInstanceId","Tooltip","describedById","undefined","isOnlyChild","Children","count","process","env","NODE_ENV","console","error","computedPlacement","positionToPlacement","deprecated","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","useState","jsx","Role","render","addDescribedById","element","cloneElement","jsxs","Provider","value","TooltipAnchor","onClick","hide","store","clsx","unmountOnHide","gutter","id","overflowPadding","forwardRef","_default"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text || shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement || 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = tooltipStore.useState( 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById && mounted\n\t\t\t? cloneElement( element, { 'aria-describedby': describedById } )\n\t\t\t: element;\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={\n\t\t\t\t\tisOnlyChild ? addDescribedById( children ) : undefined\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text || shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}