@wordpress/components 22.0.0 → 22.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (356) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/build/angle-picker-control/index.js +3 -1
  3. package/build/angle-picker-control/index.js.map +1 -1
  4. package/build/autocomplete/index.js +7 -3
  5. package/build/autocomplete/index.js.map +1 -1
  6. package/build/border-box-control/border-box-control/component.js +1 -1
  7. package/build/border-box-control/border-box-control/component.js.map +1 -1
  8. package/build/border-box-control/border-box-control/hook.js +13 -1
  9. package/build/border-box-control/border-box-control/hook.js.map +1 -1
  10. package/build/border-box-control/border-box-control-split-controls/hook.js +11 -1
  11. package/build/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
  12. package/build/border-control/border-control/component.js +2 -2
  13. package/build/border-control/border-control/component.js.map +1 -1
  14. package/build/border-control/border-control/hook.js +11 -1
  15. package/build/border-control/border-control/hook.js.map +1 -1
  16. package/build/border-control/border-control-dropdown/component.js +1 -1
  17. package/build/border-control/border-control-dropdown/component.js.map +1 -1
  18. package/build/border-control/border-control-dropdown/hook.js +10 -2
  19. package/build/border-control/border-control-dropdown/hook.js.map +1 -1
  20. package/build/color-palette/index.js +1 -1
  21. package/build/color-palette/index.js.map +1 -1
  22. package/build/color-picker/input-with-slider.js +17 -3
  23. package/build/color-picker/input-with-slider.js.map +1 -1
  24. package/build/custom-select-control/index.js +5 -2
  25. package/build/custom-select-control/index.js.map +1 -1
  26. package/build/dashicon/index.js +17 -2
  27. package/build/dashicon/index.js.map +1 -1
  28. package/build/draggable/index.js +58 -38
  29. package/build/draggable/index.js.map +1 -1
  30. package/build/draggable/types.js +6 -0
  31. package/build/draggable/types.js.map +1 -0
  32. package/build/flex/flex/hook.js +2 -3
  33. package/build/flex/flex/hook.js.map +1 -1
  34. package/build/focal-point-picker/focal-point.js +2 -12
  35. package/build/focal-point-picker/focal-point.js.map +1 -1
  36. package/build/focal-point-picker/styles/focal-point-style.js +11 -51
  37. package/build/focal-point-picker/styles/focal-point-style.js.map +1 -1
  38. package/build/font-size-picker/constants.js +41 -0
  39. package/build/font-size-picker/constants.js.map +1 -0
  40. package/build/font-size-picker/font-size-picker-select.js +97 -0
  41. package/build/font-size-picker/font-size-picker-select.js.map +1 -0
  42. package/build/font-size-picker/font-size-picker-toggle-group.js +50 -0
  43. package/build/font-size-picker/font-size-picker-toggle-group.js.map +1 -0
  44. package/build/font-size-picker/index.js +39 -76
  45. package/build/font-size-picker/index.js.map +1 -1
  46. package/build/font-size-picker/utils.js +17 -89
  47. package/build/font-size-picker/utils.js.map +1 -1
  48. package/build/form-token-field/index.js +9 -6
  49. package/build/form-token-field/index.js.map +1 -1
  50. package/build/higher-order/navigate-regions/index.js +3 -0
  51. package/build/higher-order/navigate-regions/index.js.map +1 -1
  52. package/build/icon/index.js +3 -2
  53. package/build/icon/index.js.map +1 -1
  54. package/build/index.js +8 -0
  55. package/build/index.js.map +1 -1
  56. package/build/menu-group/index.js +17 -3
  57. package/build/menu-group/index.js.map +1 -1
  58. package/build/menu-group/types.js +6 -0
  59. package/build/menu-group/types.js.map +1 -0
  60. package/build/navigator/navigator-screen/component.js +9 -5
  61. package/build/navigator/navigator-screen/component.js.map +1 -1
  62. package/build/palette-edit/index.js +3 -1
  63. package/build/palette-edit/index.js.map +1 -1
  64. package/build/popover/index.js +8 -4
  65. package/build/popover/index.js.map +1 -1
  66. package/build/range-control/styles/range-control-styles.js +47 -57
  67. package/build/range-control/styles/range-control-styles.js.map +1 -1
  68. package/build/spinner/styles.js +4 -4
  69. package/build/spinner/styles.js.map +1 -1
  70. package/build/tab-panel/index.js +3 -4
  71. package/build/tab-panel/index.js.map +1 -1
  72. package/build/toggle-group-control/toggle-group-control/component.js +1 -0
  73. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  74. package/build/toggle-group-control/toggle-group-control/styles.js +11 -6
  75. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  76. package/build/tools-panel/styles.js +14 -14
  77. package/build/tools-panel/styles.js.map +1 -1
  78. package/build/tools-panel/tools-panel-item/hook.js +9 -5
  79. package/build/tools-panel/tools-panel-item/hook.js.map +1 -1
  80. package/build/utils/colors-values.js +3 -2
  81. package/build/utils/colors-values.js.map +1 -1
  82. package/build/utils/input/base.js +2 -2
  83. package/build/utils/input/base.js.map +1 -1
  84. package/build/view/index.js.map +1 -1
  85. package/build-module/angle-picker-control/index.js +2 -1
  86. package/build-module/angle-picker-control/index.js.map +1 -1
  87. package/build-module/autocomplete/index.js +7 -3
  88. package/build-module/autocomplete/index.js.map +1 -1
  89. package/build-module/border-box-control/border-box-control/component.js +1 -1
  90. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  91. package/build-module/border-box-control/border-box-control/hook.js +13 -1
  92. package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
  93. package/build-module/border-box-control/border-box-control-split-controls/hook.js +11 -1
  94. package/build-module/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
  95. package/build-module/border-control/border-control/component.js +2 -2
  96. package/build-module/border-control/border-control/component.js.map +1 -1
  97. package/build-module/border-control/border-control/hook.js +11 -1
  98. package/build-module/border-control/border-control/hook.js.map +1 -1
  99. package/build-module/border-control/border-control-dropdown/component.js +1 -1
  100. package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
  101. package/build-module/border-control/border-control-dropdown/hook.js +10 -2
  102. package/build-module/border-control/border-control-dropdown/hook.js.map +1 -1
  103. package/build-module/color-palette/index.js +1 -1
  104. package/build-module/color-palette/index.js.map +1 -1
  105. package/build-module/color-picker/input-with-slider.js +17 -3
  106. package/build-module/color-picker/input-with-slider.js.map +1 -1
  107. package/build-module/custom-select-control/index.js +5 -2
  108. package/build-module/custom-select-control/index.js.map +1 -1
  109. package/build-module/dashicon/index.js +17 -2
  110. package/build-module/dashicon/index.js.map +1 -1
  111. package/build-module/draggable/index.js +59 -38
  112. package/build-module/draggable/index.js.map +1 -1
  113. package/build-module/draggable/types.js +2 -0
  114. package/build-module/draggable/types.js.map +1 -0
  115. package/build-module/flex/flex/hook.js +2 -3
  116. package/build-module/flex/flex/hook.js.map +1 -1
  117. package/build-module/focal-point-picker/focal-point.js +3 -13
  118. package/build-module/focal-point-picker/focal-point.js.map +1 -1
  119. package/build-module/focal-point-picker/styles/focal-point-style.js +6 -52
  120. package/build-module/focal-point-picker/styles/focal-point-style.js.map +1 -1
  121. package/build-module/font-size-picker/constants.js +31 -0
  122. package/build-module/font-size-picker/constants.js.map +1 -0
  123. package/build-module/font-size-picker/font-size-picker-select.js +83 -0
  124. package/build-module/font-size-picker/font-size-picker-select.js.map +1 -0
  125. package/build-module/font-size-picker/font-size-picker-toggle-group.js +40 -0
  126. package/build-module/font-size-picker/font-size-picker-toggle-group.js.map +1 -0
  127. package/build-module/font-size-picker/index.js +38 -76
  128. package/build-module/font-size-picker/index.js.map +1 -1
  129. package/build-module/font-size-picker/utils.js +15 -86
  130. package/build-module/font-size-picker/utils.js.map +1 -1
  131. package/build-module/form-token-field/index.js +9 -6
  132. package/build-module/form-token-field/index.js.map +1 -1
  133. package/build-module/higher-order/navigate-regions/index.js +3 -0
  134. package/build-module/higher-order/navigate-regions/index.js.map +1 -1
  135. package/build-module/icon/index.js +3 -2
  136. package/build-module/icon/index.js.map +1 -1
  137. package/build-module/index.js +1 -0
  138. package/build-module/index.js.map +1 -1
  139. package/build-module/menu-group/index.js +20 -2
  140. package/build-module/menu-group/index.js.map +1 -1
  141. package/build-module/menu-group/types.js +2 -0
  142. package/build-module/menu-group/types.js.map +1 -0
  143. package/build-module/navigator/navigator-screen/component.js +9 -5
  144. package/build-module/navigator/navigator-screen/component.js.map +1 -1
  145. package/build-module/palette-edit/index.js +3 -1
  146. package/build-module/palette-edit/index.js.map +1 -1
  147. package/build-module/popover/index.js +8 -4
  148. package/build-module/popover/index.js.map +1 -1
  149. package/build-module/range-control/styles/range-control-styles.js +47 -57
  150. package/build-module/range-control/styles/range-control-styles.js.map +1 -1
  151. package/build-module/spinner/styles.js +4 -4
  152. package/build-module/spinner/styles.js.map +1 -1
  153. package/build-module/tab-panel/index.js +4 -5
  154. package/build-module/tab-panel/index.js.map +1 -1
  155. package/build-module/toggle-group-control/toggle-group-control/component.js +1 -0
  156. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  157. package/build-module/toggle-group-control/toggle-group-control/styles.js +12 -6
  158. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  159. package/build-module/tools-panel/styles.js +14 -14
  160. package/build-module/tools-panel/styles.js.map +1 -1
  161. package/build-module/tools-panel/tools-panel-item/hook.js +9 -5
  162. package/build-module/tools-panel/tools-panel-item/hook.js.map +1 -1
  163. package/build-module/utils/colors-values.js +3 -2
  164. package/build-module/utils/colors-values.js.map +1 -1
  165. package/build-module/utils/input/base.js +2 -2
  166. package/build-module/utils/input/base.js.map +1 -1
  167. package/build-module/view/index.js.map +1 -1
  168. package/build-style/style-rtl.css +72 -44
  169. package/build-style/style.css +72 -44
  170. package/build-types/border-box-control/border-box-control/component.d.ts +4 -4
  171. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  172. package/build-types/border-box-control/border-box-control/hook.d.ts +6 -6
  173. package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
  174. package/build-types/border-box-control/border-box-control-linked-button/component.d.ts +4 -2
  175. package/build-types/border-box-control/border-box-control-linked-button/component.d.ts.map +1 -1
  176. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +3 -3
  177. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +5 -5
  178. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -1
  179. package/build-types/border-box-control/border-box-control-visualizer/component.d.ts +3 -2
  180. package/build-types/border-box-control/border-box-control-visualizer/component.d.ts.map +1 -1
  181. package/build-types/border-box-control/stories/index.d.ts +3 -3
  182. package/build-types/border-box-control/types.d.ts +5 -38
  183. package/build-types/border-box-control/types.d.ts.map +1 -1
  184. package/build-types/border-control/border-control/component.d.ts +4 -2
  185. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  186. package/build-types/border-control/border-control/hook.d.ts +5 -5
  187. package/build-types/border-control/border-control/hook.d.ts.map +1 -1
  188. package/build-types/border-control/border-control-dropdown/component.d.ts +3 -3
  189. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
  190. package/build-types/border-control/border-control-dropdown/hook.d.ts +5 -5
  191. package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -1
  192. package/build-types/border-control/stories/index.d.ts +24 -12
  193. package/build-types/border-control/stories/index.d.ts.map +1 -1
  194. package/build-types/border-control/types.d.ts +10 -51
  195. package/build-types/border-control/types.d.ts.map +1 -1
  196. package/build-types/color-palette/index.d.ts +16 -2
  197. package/build-types/color-palette/index.d.ts.map +1 -1
  198. package/build-types/color-palette/stories/index.d.ts +31 -2
  199. package/build-types/color-palette/stories/index.d.ts.map +1 -1
  200. package/build-types/color-palette/types.d.ts +14 -10
  201. package/build-types/color-palette/types.d.ts.map +1 -1
  202. package/build-types/color-picker/input-with-slider.d.ts.map +1 -1
  203. package/build-types/custom-select-control/index.d.ts.map +1 -1
  204. package/build-types/dashicon/index.d.ts +6 -1
  205. package/build-types/dashicon/index.d.ts.map +1 -1
  206. package/build-types/date-time/types.d.ts +0 -16
  207. package/build-types/date-time/types.d.ts.map +1 -1
  208. package/build-types/draggable/index.d.ts +42 -66
  209. package/build-types/draggable/index.d.ts.map +1 -1
  210. package/build-types/draggable/stories/index.d.ts +12 -0
  211. package/build-types/draggable/stories/index.d.ts.map +1 -0
  212. package/build-types/draggable/types.d.ts +58 -0
  213. package/build-types/draggable/types.d.ts.map +1 -0
  214. package/build-types/flex/flex/hook.d.ts.map +1 -1
  215. package/build-types/focal-point-picker/focal-point.d.ts.map +1 -1
  216. package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts +1 -1
  217. package/build-types/focal-point-picker/styles/focal-point-style.d.ts +1 -12
  218. package/build-types/focal-point-picker/styles/focal-point-style.d.ts.map +1 -1
  219. package/build-types/font-size-picker/constants.d.ts +15 -0
  220. package/build-types/font-size-picker/constants.d.ts.map +1 -0
  221. package/build-types/font-size-picker/font-size-picker-select.d.ts +5 -0
  222. package/build-types/font-size-picker/font-size-picker-select.d.ts.map +1 -0
  223. package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts +5 -0
  224. package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts.map +1 -0
  225. package/build-types/font-size-picker/index.d.ts.map +1 -1
  226. package/build-types/font-size-picker/types.d.ts +13 -13
  227. package/build-types/font-size-picker/types.d.ts.map +1 -1
  228. package/build-types/font-size-picker/utils.d.ts +6 -18
  229. package/build-types/font-size-picker/utils.d.ts.map +1 -1
  230. package/build-types/form-token-field/index.d.ts.map +1 -1
  231. package/build-types/icon/index.d.ts +1 -1
  232. package/build-types/icon/index.d.ts.map +1 -1
  233. package/build-types/menu-group/index.d.ts +21 -1
  234. package/build-types/menu-group/index.d.ts.map +1 -1
  235. package/build-types/menu-group/test/index.d.ts +2 -0
  236. package/build-types/menu-group/test/index.d.ts.map +1 -0
  237. package/build-types/menu-group/types.d.ts +23 -0
  238. package/build-types/menu-group/types.d.ts.map +1 -0
  239. package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
  240. package/build-types/popover/index.d.ts.map +1 -1
  241. package/build-types/tab-panel/index.d.ts.map +1 -1
  242. package/build-types/toggle-group-control/stories/index.d.ts.map +1 -1
  243. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +1 -2
  244. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  245. package/build-types/toggle-group-control/types.d.ts +2 -1
  246. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  247. package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
  248. package/build-types/unit-control/index.d.ts +1 -1
  249. package/build-types/utils/colors-values.d.ts +1 -0
  250. package/build-types/utils/colors-values.d.ts.map +1 -1
  251. package/build-types/view/index.d.ts +1 -1
  252. package/build-types/view/index.d.ts.map +1 -1
  253. package/package.json +17 -17
  254. package/src/angle-picker-control/index.js +2 -1
  255. package/src/autocomplete/index.js +12 -3
  256. package/src/autocomplete/style.scss +1 -1
  257. package/src/base-field/test/__snapshots__/index.js.snap +9 -7
  258. package/src/base-field/test/index.js +27 -15
  259. package/src/border-box-control/border-box-control/README.md +5 -17
  260. package/src/border-box-control/border-box-control/component.tsx +1 -1
  261. package/src/border-box-control/border-box-control/hook.ts +18 -4
  262. package/src/border-box-control/border-box-control-split-controls/hook.ts +10 -0
  263. package/src/border-box-control/types.ts +32 -58
  264. package/src/border-control/border-control/README.md +4 -17
  265. package/src/border-control/border-control/component.tsx +2 -2
  266. package/src/border-control/border-control/hook.ts +10 -0
  267. package/src/border-control/border-control-dropdown/component.tsx +7 -6
  268. package/src/border-control/border-control-dropdown/hook.ts +9 -1
  269. package/src/border-control/types.ts +43 -80
  270. package/src/card/test/__snapshots__/index.tsx.snap +64 -368
  271. package/src/card/test/index.tsx +2 -2
  272. package/src/checkbox-control/style.scss +3 -3
  273. package/src/color-palette/README.md +12 -16
  274. package/src/color-palette/index.tsx +1 -1
  275. package/src/color-palette/style.scss +1 -1
  276. package/src/color-palette/types.ts +14 -10
  277. package/src/color-picker/input-with-slider.tsx +13 -2
  278. package/src/custom-select-control/index.js +7 -0
  279. package/src/custom-select-control/stories/index.js +1 -0
  280. package/src/custom-select-control/style.scss +6 -1
  281. package/src/custom-select-control/test/index.js +39 -0
  282. package/src/dashicon/index.js +21 -2
  283. package/src/date-time/date/test/index.tsx +2 -2
  284. package/src/date-time/types.ts +0 -19
  285. package/src/divider/test/index.tsx +4 -4
  286. package/src/draggable/README.md +13 -18
  287. package/src/draggable/{index.js → index.tsx} +71 -47
  288. package/src/draggable/stories/index.tsx +83 -0
  289. package/src/draggable/types.ts +58 -0
  290. package/src/drop-zone/style.scss +1 -1
  291. package/src/flex/flex/hook.ts +0 -3
  292. package/src/flex/test/index.tsx +29 -3
  293. package/src/focal-point-picker/focal-point.tsx +2 -24
  294. package/src/focal-point-picker/styles/focal-point-style.ts +8 -32
  295. package/src/font-size-picker/constants.ts +37 -0
  296. package/src/font-size-picker/font-size-picker-select.tsx +98 -0
  297. package/src/font-size-picker/font-size-picker-toggle-group.tsx +41 -0
  298. package/src/font-size-picker/index.tsx +55 -118
  299. package/src/font-size-picker/test/index.tsx +253 -44
  300. package/src/font-size-picker/test/utils.ts +58 -98
  301. package/src/font-size-picker/types.ts +25 -16
  302. package/src/font-size-picker/utils.ts +16 -102
  303. package/src/form-toggle/style.scss +3 -3
  304. package/src/form-token-field/index.tsx +13 -5
  305. package/src/form-token-field/style.scss +2 -2
  306. package/src/form-token-field/test/index.tsx +6 -6
  307. package/src/higher-order/navigate-regions/index.js +4 -0
  308. package/src/higher-order/navigate-regions/style.scss +72 -20
  309. package/src/higher-order/with-notices/test/index.js +1 -1
  310. package/src/icon/index.tsx +3 -2
  311. package/src/icon/test/index.js +10 -0
  312. package/src/index.js +1 -0
  313. package/src/item-group/stories/index.js +1 -1
  314. package/src/menu-group/{index.js → index.tsx} +22 -3
  315. package/src/menu-group/test/{index.js → index.tsx} +0 -0
  316. package/src/menu-group/types.ts +23 -0
  317. package/src/menu-item/style.scss +1 -1
  318. package/src/mobile/bottom-sheet/test/range-cell.native.js +4 -4
  319. package/src/mobile/html-text-input/test/index.native.js +2 -2
  320. package/src/mobile/link-settings/test/edit.native.js +29 -29
  321. package/src/mobile/link-settings/test/link-settings-navigation.native.js +5 -5
  322. package/src/navigator/navigator-screen/component.tsx +8 -3
  323. package/src/notice/README.md +2 -1
  324. package/src/notice/style.scss +1 -1
  325. package/src/palette-edit/index.js +3 -0
  326. package/src/panel/style.scss +1 -1
  327. package/src/popover/index.tsx +18 -7
  328. package/src/range-control/styles/range-control-styles.ts +2 -2
  329. package/src/resizable-box/style.scss +2 -2
  330. package/src/scrollable/test/index.tsx +7 -3
  331. package/src/search-control/style.scss +1 -1
  332. package/src/snackbar/style.scss +2 -2
  333. package/src/spacer/test/index.tsx +33 -3
  334. package/src/spinner/styles.ts +1 -1
  335. package/src/surface/test/index.tsx +12 -12
  336. package/src/tab-panel/index.tsx +9 -6
  337. package/src/tab-panel/style.scss +4 -5
  338. package/src/text/test/index.tsx +4 -4
  339. package/src/toggle-group-control/stories/index.tsx +2 -0
  340. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +6 -8
  341. package/src/toggle-group-control/test/index.tsx +29 -17
  342. package/src/toggle-group-control/toggle-group-control/README.md +8 -1
  343. package/src/toggle-group-control/toggle-group-control/component.tsx +1 -1
  344. package/src/toggle-group-control/toggle-group-control/styles.ts +22 -16
  345. package/src/toggle-group-control/types.ts +2 -1
  346. package/src/tools-panel/styles.ts +1 -1
  347. package/src/tools-panel/tools-panel-item/hook.ts +6 -1
  348. package/src/tree-grid/test/index.js +12 -12
  349. package/src/truncate/test/index.tsx +9 -9
  350. package/src/ui/form-group/test/index.js +16 -17
  351. package/src/utils/colors-values.js +4 -2
  352. package/src/utils/hooks/stories/use-cx.js +1 -1
  353. package/src/utils/input/base.js +2 -2
  354. package/src/view/{index.js → index.ts} +0 -0
  355. package/tsconfig.tsbuildinfo +1 -1
  356. package/src/draggable/stories/index.js +0 -72
package/CHANGELOG.md CHANGED
@@ -2,6 +2,40 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 22.1.0 (2022-11-16)
6
+
7
+ ### Enhancements
8
+
9
+ - `ColorPalette`, `BorderBox`, `BorderBoxControl`: polish and DRY prop types, add default values ([#45463](https://github.com/WordPress/gutenberg/pull/45463)).
10
+
11
+ ### Bug Fix
12
+
13
+ - `FormTokenField`: Fix duplicate input in IME composition ([#45607](https://github.com/WordPress/gutenberg/pull/45607)).
14
+ - `Autocomplete`: Check key events more strictly in IME composition ([#45626](https://github.com/WordPress/gutenberg/pull/45626)).
15
+ - `Autocomplete`: Fix unexpected block insertion during IME composition ([#45510](https://github.com/WordPress/gutenberg/pull/45510)).
16
+ - `Icon`: Making size prop work for icon components using dash icon strings ([#45593](https://github.com/WordPress/gutenberg/pull/45593))
17
+ - `ToolsPanelItem`: Prevent unintended calls to onDeselect when parent panel is remounted and item is rendered via SlotFill ([#45673](https://github.com/WordPress/gutenberg/pull/45673))
18
+ - `ColorPicker`: Prevent all number fields from becoming "0" when one of them is an empty string ([#45649](https://github.com/WordPress/gutenberg/pull/45649)).
19
+
20
+ ### Internal
21
+
22
+ - `ToolsPanel`: Update to fix `exhaustive-deps` eslint rule ([#45715](https://github.com/WordPress/gutenberg/pull/45715)).
23
+ - `PaletteEditListView`: Update to ignore `exhaustive-deps` eslint rule ([#45467](https://github.com/WordPress/gutenberg/pull/45467)).
24
+ - `Popover`: Update to pass `exhaustive-deps` eslint rule ([#45656](https://github.com/WordPress/gutenberg/pull/45656)).
25
+ - `Flex`: Update to pass `exhaustive-deps` eslint rule ([#45528](https://github.com/WordPress/gutenberg/pull/45528)).
26
+ - `withNotices`: Update to pass `exhaustive-deps` eslint rule ([#45530](https://github.com/WordPress/gutenberg/pull/45530)).
27
+ - `ItemGroup`: Update to pass `exhaustive-deps` eslint rule ([#45531](https://github.com/WordPress/gutenberg/pull/45531)).
28
+ - `TabPanel`: Update to pass `exhaustive-deps` eslint rule ([#45660](https://github.com/WordPress/gutenberg/pull/45660)).
29
+ - `NavigatorScreen`: Update to pass `exhaustive-deps` eslint rule ([#45648](https://github.com/WordPress/gutenberg/pull/45648)).
30
+ - `Draggable`: Convert to TypeScript ([#45471](https://github.com/WordPress/gutenberg/pull/45471)).
31
+ - `MenuGroup`: Convert to TypeScript ([#45617](https://github.com/WordPress/gutenberg/pull/45617)).
32
+ - `useCx`: fix story to satisfy the `react-hooks/exhaustive-deps` eslint rule ([#45614](https://github.com/WordPress/gutenberg/pull/45614))
33
+ - Activate the `react-hooks/exhuastive-deps` eslint rule for the Components package ([#41166](https://github.com/WordPress/gutenberg/pull/41166))
34
+
35
+ ### Experimental
36
+
37
+ - `ToggleGroupControl`: Only show enclosing border when `isBlock` and not `isDeselectable` ([#45492](https://github.com/WordPress/gutenberg/pull/45492)).
38
+
5
39
  ## 22.0.0 (2022-11-02)
6
40
 
7
41
  ### Breaking Changes
@@ -22,15 +56,18 @@
22
56
 
23
57
  ### Enhancements
24
58
 
59
+ - `FontSizePicker`: Pass the preset object to the onChange callback to allow conversion from preset slugs to CSS vars ([#44967](https://github.com/WordPress/gutenberg/pull/44967)).
25
60
  - `FontSizePicker`: Improved slider design when `withSlider` is set ([#44598](https://github.com/WordPress/gutenberg/pull/44598)).
26
61
  - `ToggleControl`: Improved types for the `help` prop, covering the dynamic render function option, and enabled the dynamic `help` behavior only for a controlled component ([#45279](https://github.com/WordPress/gutenberg/pull/45279)).
27
62
  - `BorderControl` & `BorderBoxControl`: Replace `__next36pxDefaultSize` with "default" and "large" size variants ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
28
63
  - `UnitControl`: Remove outer wrapper to normalize className placement ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
29
64
  - `ColorPalette`: Fix transparent checkered background pattern ([#45295](https://github.com/WordPress/gutenberg/pull/45295)).
30
65
  - `ToggleGroupControl`: Add `isDeselectable` prop to allow deselecting the selected option ([#45123](https://github.com/WordPress/gutenberg/pull/45123)).
66
+ - `FontSizePicker`: Improve hint text shown next to 'Font size' label ([#44966](https://github.com/WordPress/gutenberg/pull/44966)).
31
67
 
32
68
  ### Bug Fix
33
69
 
70
+ - `useNavigateRegions`: Add new keyboard shortcut alias to cover backtick and tilde keys inconsistencies across browsers ([#45019](https://github.com/WordPress/gutenberg/pull/45019)).
34
71
  - `Button`: Tweak the destructive button primary, link, and default variants ([#44427](https://github.com/WordPress/gutenberg/pull/44427)).
35
72
  - `UnitControl`: Fix `disabled` style is overridden by core `form.css` style ([#45250](https://github.com/WordPress/gutenberg/pull/45250)).
36
73
  - `ItemGroup`: fix RTL `Item` styles when rendered as a button ([#45280](https://github.com/WordPress/gutenberg/pull/45280)).
@@ -59,11 +96,16 @@
59
96
  - `Autocomplete`: use Popover's new `placement` prop instead of legacy `position` prop ([#44396](https://github.com/WordPress/gutenberg/pull/44396/)).
60
97
  - `SelectControl`: Add `onChange`, `onBlur` and `onFocus` to storybook actions ([#45432](https://github.com/WordPress/gutenberg/pull/45432/)).
61
98
  - `FontSizePicker`: Add more comprehensive tests ([#45298](https://github.com/WordPress/gutenberg/pull/45298)).
99
+ - `FontSizePicker`: Refactor to use components instead of helper functions ([#44891](https://github.com/WordPress/gutenberg/pull/44891)).
62
100
 
63
101
  ### Experimental
64
102
 
65
103
  - `NumberControl`: Replace `hideHTMLArrows` prop with `spinControls` prop. Allow custom spin controls via `spinControls="custom"` ([#45333](https://github.com/WordPress/gutenberg/pull/45333)).
66
104
 
105
+ ### Experimental
106
+
107
+ - Theming: updated Components package to utilize the new `accent` prop of the experimental `Theme` component.
108
+
67
109
  ## 21.3.0 (2022-10-19)
68
110
 
69
111
  ### Bug Fix
@@ -29,6 +29,8 @@ var _text = require("../text");
29
29
 
30
30
  var _spacer = require("../spacer");
31
31
 
32
+ var _colorsValues = require("../utils/colors-values");
33
+
32
34
  /**
33
35
  * External dependencies
34
36
  */
@@ -83,7 +85,7 @@ function AnglePickerControl(_ref) {
83
85
  marginBottom: 0,
84
86
  marginRight: (0, _space.space)(3),
85
87
  style: {
86
- color: 'var( --wp-admin-theme-color )'
88
+ color: _colorsValues.COLORS.ui.theme
87
89
  }
88
90
  }, "\xB0")
89
91
  })), (0, _element.createElement)(_flex.FlexItem, {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","__nextHasNoMarginBottom","className","label","onChange","value","since","version","hint","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AASe,SAASA,kBAAT,OAOX;AAAA,MAPwC;AAC3C;AACAC,IAAAA,uBAAuB,GAAG,KAFiB;AAG3CC,IAAAA,SAH2C;AAI3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAJmC;AAK3CC,IAAAA,QAL2C;AAM3CC,IAAAA;AAN2C,GAOxC;;AACH,MAAK,CAAEJ,uBAAP,EAAiC;AAChC,6BACC,2DADD,EAEC;AACCK,MAAAA,KAAK,EAAE,KADR;AAECC,MAAAA,OAAO,EAAE,KAFV;AAGCC,MAAAA,IAAI,EAAE;AAHP,KAFD;AAQA;;AAED,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAN,IAAAA,QAAQ,CAAEO,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CX,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AACC,IAAA,uBAAuB,EAAGD,uBAD3B;AAEC,IAAA,SAAS,EAAGY,OAFb;AAGC,IAAA,GAAG,EAAG;AAHP,KAKC,4BAAC,eAAD,QACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGM,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGJ,KART;AASC,IAAA,YAAY,EAAC,MATd;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGS,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAE;AADA;AAJT;AAXF,IADD,CALD,EA8BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CADP;AAEPC,MAAAA,SAAS,EAAE;AAFJ;AADT,KAMC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGZ,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAND,CA9BD,CADD;AA6CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\n\nexport default function AnglePickerControl( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: 'var( --wp-admin-theme-color )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","__nextHasNoMarginBottom","className","label","onChange","value","since","version","hint","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","COLORS","ui","theme","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAUe,SAASA,kBAAT,OAOX;AAAA,MAPwC;AAC3C;AACAC,IAAAA,uBAAuB,GAAG,KAFiB;AAG3CC,IAAAA,SAH2C;AAI3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAJmC;AAK3CC,IAAAA,QAL2C;AAM3CC,IAAAA;AAN2C,GAOxC;;AACH,MAAK,CAAEJ,uBAAP,EAAiC;AAChC,6BACC,2DADD,EAEC;AACCK,MAAAA,KAAK,EAAE,KADR;AAECC,MAAAA,OAAO,EAAE,KAFV;AAGCC,MAAAA,IAAI,EAAE;AAHP,KAFD;AAQA;;AAED,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAN,IAAAA,QAAQ,CAAEO,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CX,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AACC,IAAA,uBAAuB,EAAGD,uBAD3B;AAEC,IAAA,SAAS,EAAGY,OAFb;AAGC,IAAA,GAAG,EAAG;AAHP,KAKC,4BAAC,eAAD,QACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGM,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGJ,KART;AASC,IAAA,YAAY,EAAC,MATd;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGS,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAEC,qBAAOC,EAAP,CAAUC;AADV;AAJT;AAXF,IADD,CALD,EA8BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CADP;AAEPC,MAAAA,SAAS,EAAE;AAFJ;AADT,KAMC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGf,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAND,CA9BD,CADD;AA6CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { COLORS } from '../utils/colors-values';\n\nexport default function AnglePickerControl( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: COLORS.ui.theme,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}
@@ -208,7 +208,7 @@ function useAutocomplete(_ref) {
208
208
  }
209
209
 
210
210
  function handleKeyDown(event) {
211
- backspacing.current = event.code === 'Backspace';
211
+ backspacing.current = event.key === 'Backspace';
212
212
 
213
213
  if (!autocompleter) {
214
214
  return;
@@ -218,11 +218,15 @@ function useAutocomplete(_ref) {
218
218
  return;
219
219
  }
220
220
 
221
- if (event.defaultPrevented) {
221
+ if (event.defaultPrevented || // Ignore keydowns from IMEs
222
+ event.isComposing || // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
223
+ // is `isComposing=false`, even though it's technically still part of the composition.
224
+ // These can only be detected by keyCode.
225
+ event.keyCode === 229) {
222
226
  return;
223
227
  }
224
228
 
225
- switch (event.code) {
229
+ switch (event.key) {
226
230
  case 'ArrowUp':
227
231
  setSelectedIndex((selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1);
228
232
  break;
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/autocomplete/index.js"],"names":["useAutocomplete","record","onChange","onReplace","completers","contentRef","debouncedSpeak","speak","instanceId","selectedIndex","setSelectedIndex","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","current","code","defaultPrevented","preventDefault","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","slice","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","key","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useAutocompleteProps","ref","onKeyDownRef","element","_onKeyDown","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { find } from 'lodash';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseInstanceId,\n\tuseDebounce,\n\tuseMergeRefs,\n\tuseRefEffect,\n} from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\n\n/**\n * A raw completer option.\n *\n * @typedef {*} CompleterOption\n */\n\n/**\n * @callback FnGetOptions\n *\n * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.\n */\n\n/**\n * @callback FnGetOptionKeywords\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} list of key words to search.\n */\n\n/**\n * @callback FnIsOptionDisabled\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} whether or not the given option is disabled.\n */\n\n/**\n * @callback FnGetOptionLabel\n * @param {CompleterOption} option a completer option.\n *\n * @return {(string|Array.<(string|WPElement)>)} list of react components to render.\n */\n\n/**\n * @callback FnAllowContext\n * @param {string} before the string before the auto complete trigger and query.\n * @param {string} after the string after the autocomplete trigger and query.\n *\n * @return {boolean} true if the completer can handle.\n */\n\n/**\n * @typedef {Object} OptionCompletion\n * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.\n * @property {OptionCompletionValue} value the completion value.\n */\n\n/**\n * A completion value.\n *\n * @typedef {(string|WPElement|Object)} OptionCompletionValue\n */\n\n/**\n * @callback FnGetOptionCompletion\n * @param {CompleterOption} value the value of the completer option.\n * @param {string} query the text value of the autocomplete query.\n *\n * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an\n * \t\t\t\t\t\t\t\t\t\t\t\t\t OptionCompletionValue is returned, the\n * \t\t\t\t\t\t\t\t\t\t\t\t\t completion action defaults to `insert-at-caret`.\n */\n\n/**\n * @typedef {Object} WPCompleter\n * @property {string} name a way to identify a completer, useful for selective overriding.\n * @property {?string} className A class to apply to the popup menu.\n * @property {string} triggerPrefix the prefix that will display the menu.\n * @property {(CompleterOption[]|FnGetOptions)} options the completer options or a function to get them.\n * @property {?FnGetOptionKeywords} getOptionKeywords get the keywords for a given option.\n * @property {?FnIsOptionDisabled} isOptionDisabled get whether or not the given option is disabled.\n * @property {FnGetOptionLabel} getOptionLabel get the label for a given option.\n * @property {?FnAllowContext} allowContext filter the context under which the autocomplete activates.\n * @property {FnGetOptionCompletion} getOptionCompletion get the completion associated with a given option.\n */\n\nfunction useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n} ) {\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\tconst [ filteredOptions, setFilteredOptions ] = useState( [] );\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState( null );\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState( null );\n\tconst backspacing = useRef( false );\n\n\tfunction insertCompletion( replacement ) {\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst { action, value } =\n\t\t\t\tundefined === completion.action ||\n\t\t\t\tundefined === completion.value\n\t\t\t\t\t? { action: 'insert-at-caret', value: completion }\n\t\t\t\t\t: completion;\n\n\t\t\tif ( 'replace' === action ) {\n\t\t\t\tonReplace( [ value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === action ) {\n\t\t\t\tinsertCompletion( value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( [] );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\tfunction announce( options ) {\n\t\tif ( ! debouncedSpeak ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( !! options.length ) {\n\t\t\tdebouncedSpeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\toptions.length\n\t\t\t\t\t),\n\t\t\t\t\toptions.length\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else {\n\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t}\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t\tannounce( options );\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tbackspacing.current = event.code === 'Backspace';\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.code ) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowDown':\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'Escape':\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowLeft':\n\t\t\tcase 'ArrowRight':\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled key should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\t// textContent is a primitive (string), memoizing is not strictly necessary\n\t// but this is a preemptive performance improvement, since the autocompleter\n\t// is a potential bottleneck for the editor type metric.\n\tconst textContent = useMemo( () => {\n\t\tif ( isCollapsed( record ) ) {\n\t\t\treturn getTextContent( slice( record, 0 ) );\n\t\t}\n\t}, [ record ] );\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst text = removeAccents( textContent );\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\t\tconst completer = find(\n\t\t\tcompleters,\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = text.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = text.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing.current &&\n\t\t\t\t\ttextWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext( text.slice( 0, index ), textAfterSelection )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query );\n\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ textContent ] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: null;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\treturn {\n\t\tref: useMergeRefs( [\n\t\t\tref,\n\t\t\tuseRefEffect( ( element ) => {\n\t\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\t\tonKeyDownRef.current( event );\n\t\t\t\t}\n\t\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\t};\n\t\t\t}, [] ),\n\t\t] ),\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( { children, isSelected, ...options } ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/autocomplete/index.js"],"names":["useAutocomplete","record","onChange","onReplace","completers","contentRef","debouncedSpeak","speak","instanceId","selectedIndex","setSelectedIndex","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","current","key","defaultPrevented","isComposing","keyCode","preventDefault","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","slice","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useAutocompleteProps","ref","onKeyDownRef","element","_onKeyDown","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":";;;;;;;;;;AASA;;AANA;;AACA;;AAYA;;AACA;;AAMA;;AAOA;;AAKA;;AACA;;AApCA;AACA;AACA;;AAIA;AACA;AACA;;AAwBA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,eAAT,OAMI;AAAA,MANsB;AACzBC,IAAAA,MADyB;AAEzBC,IAAAA,QAFyB;AAGzBC,IAAAA,SAHyB;AAIzBC,IAAAA,UAJyB;AAKzBC,IAAAA;AALyB,GAMtB;AACH,QAAMC,cAAc,GAAG,0BAAaC,WAAb,EAAoB,GAApB,CAAvB;AACA,QAAMC,UAAU,GAAG,4BAAeR,eAAf,CAAnB;AACA,QAAM,CAAES,aAAF,EAAiBC,gBAAjB,IAAsC,uBAAU,CAAV,CAA5C;AACA,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0C,uBAAU,EAAV,CAAhD;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,EAAV,CAAxC;AACA,QAAM,CAAEC,aAAF,EAAiBC,gBAAjB,IAAsC,uBAAU,IAAV,CAA5C;AACA,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0C,uBAAU,IAAV,CAAhD;AACA,QAAMC,WAAW,GAAG,qBAAQ,KAAR,CAApB;;AAEA,WAASC,gBAAT,CAA2BC,WAA3B,EAAyC;AACxC,UAAMC,GAAG,GAAGrB,MAAM,CAACsB,KAAnB;AACA,UAAMA,KAAK,GACVD,GAAG,GAAGP,aAAa,CAACS,aAAd,CAA4BC,MAAlC,GAA2CZ,WAAW,CAACY,MADxD;AAEA,UAAMC,QAAQ,GAAG,sBAAQ;AAAEC,MAAAA,IAAI,EAAE,6BAAgBN,WAAhB;AAAR,KAAR,CAAjB;AAEAnB,IAAAA,QAAQ,CAAE,sBAAQD,MAAR,EAAgByB,QAAhB,EAA0BH,KAA1B,EAAiCD,GAAjC,CAAF,CAAR;AACA;;AAED,WAASM,MAAT,CAAiBC,MAAjB,EAA0B;AACzB,UAAM;AAAEC,MAAAA;AAAF,QAA0Bf,aAAa,IAAI,EAAjD;;AAEA,QAAKc,MAAM,CAACE,UAAZ,EAAyB;AACxB;AACA;;AAED,QAAKD,mBAAL,EAA2B;AAC1B,YAAME,UAAU,GAAGF,mBAAmB,CAAED,MAAM,CAACI,KAAT,EAAgBpB,WAAhB,CAAtC;AAEA,YAAM;AAAEqB,QAAAA,MAAF;AAAUD,QAAAA;AAAV,UACLE,SAAS,KAAKH,UAAU,CAACE,MAAzB,IACAC,SAAS,KAAKH,UAAU,CAACC,KADzB,GAEG;AAAEC,QAAAA,MAAM,EAAE,iBAAV;AAA6BD,QAAAA,KAAK,EAAED;AAApC,OAFH,GAGGA,UAJJ;;AAMA,UAAK,cAAcE,MAAnB,EAA4B;AAC3B/B,QAAAA,SAAS,CAAE,CAAE8B,KAAF,CAAF,CAAT,CAD2B,CAE3B;AACA;;AACA;AACA,OALD,MAKO,IAAK,sBAAsBC,MAA3B,EAAoC;AAC1Cd,QAAAA,gBAAgB,CAAEa,KAAF,CAAhB;AACA;AACD,KAxBwB,CA0BzB;AACA;;;AACAG,IAAAA,KAAK;AACL;;AAED,WAASA,KAAT,GAAiB;AAChB1B,IAAAA,gBAAgB,CAAE,CAAF,CAAhB;AACAE,IAAAA,kBAAkB,CAAE,EAAF,CAAlB;AACAE,IAAAA,cAAc,CAAE,EAAF,CAAd;AACAE,IAAAA,gBAAgB,CAAE,IAAF,CAAhB;AACAE,IAAAA,kBAAkB,CAAE,IAAF,CAAlB;AACA;;AAED,WAASmB,QAAT,CAAmBC,OAAnB,EAA6B;AAC5B,QAAK,CAAEhC,cAAP,EAAwB;AACvB;AACA;;AACD,QAAK,CAAC,CAAEgC,OAAO,CAACb,MAAhB,EAAyB;AACxBnB,MAAAA,cAAc,CACb;AACC;AACA,oBACC,0DADD,EAEC,2DAFD,EAGCgC,OAAO,CAACb,MAHT,CAFD,EAOCa,OAAO,CAACb,MAPT,CADa,EAUb,WAVa,CAAd;AAYA,KAbD,MAaO;AACNnB,MAAAA,cAAc,CAAE,cAAI,aAAJ,CAAF,EAAuB,WAAvB,CAAd;AACA;AACD;AAED;AACD;AACA;AACA;AACA;;;AACC,WAASiC,eAAT,CAA0BD,OAA1B,EAAoC;AACnC5B,IAAAA,gBAAgB,CACf4B,OAAO,CAACb,MAAR,KAAmBd,eAAe,CAACc,MAAnC,GAA4ChB,aAA5C,GAA4D,CAD7C,CAAhB;AAGAG,IAAAA,kBAAkB,CAAE0B,OAAF,CAAlB;AACAD,IAAAA,QAAQ,CAAEC,OAAF,CAAR;AACA;;AAED,WAASE,aAAT,CAAwBC,KAAxB,EAAgC;AAC/BtB,IAAAA,WAAW,CAACuB,OAAZ,GAAsBD,KAAK,CAACE,GAAN,KAAc,WAApC;;AAEA,QAAK,CAAE5B,aAAP,EAAuB;AACtB;AACA;;AACD,QAAKJ,eAAe,CAACc,MAAhB,KAA2B,CAAhC,EAAoC;AACnC;AACA;;AAED,QACCgB,KAAK,CAACG,gBAAN,IACA;AACAH,IAAAA,KAAK,CAACI,WAFN,IAGA;AACA;AACA;AACAJ,IAAAA,KAAK,CAACK,OAAN,KAAkB,GAPnB,EAQE;AACD;AACA;;AACD,YAASL,KAAK,CAACE,GAAf;AACC,WAAK,SAAL;AACCjC,QAAAA,gBAAgB,CACf,CAAED,aAAa,KAAK,CAAlB,GACCE,eAAe,CAACc,MADjB,GAEChB,aAFH,IAEqB,CAHN,CAAhB;AAKA;;AAED,WAAK,WAAL;AACCC,QAAAA,gBAAgB,CACf,CAAED,aAAa,GAAG,CAAlB,IAAwBE,eAAe,CAACc,MADzB,CAAhB;AAGA;;AAED,WAAK,QAAL;AACCT,QAAAA,gBAAgB,CAAE,IAAF,CAAhB;AACAE,QAAAA,kBAAkB,CAAE,IAAF,CAAlB;AACAuB,QAAAA,KAAK,CAACM,cAAN;AACA;;AAED,WAAK,OAAL;AACCnB,QAAAA,MAAM,CAAEjB,eAAe,CAAEF,aAAF,CAAjB,CAAN;AACA;;AAED,WAAK,WAAL;AACA,WAAK,YAAL;AACC2B,QAAAA,KAAK;AACL;;AAED;AACC;AA/BF,KArB+B,CAuD/B;AACA;;;AACAK,IAAAA,KAAK,CAACM,cAAN;AACA,GAvJE,CAyJH;AACA;AACA;;;AACA,QAAMC,WAAW,GAAG,sBAAS,MAAM;AAClC,QAAK,2BAAa/C,MAAb,CAAL,EAA6B;AAC5B,aAAO,8BAAgB,qBAAOA,MAAP,EAAe,CAAf,CAAhB,CAAP;AACA;AACD,GAJmB,EAIjB,CAAEA,MAAF,CAJiB,CAApB;AAMA,0BAAW,MAAM;AAChB,QAAK,CAAE+C,WAAP,EAAqB;AACpBZ,MAAAA,KAAK;AACL;AACA;;AAED,UAAMa,IAAI,GAAG,4BAAeD,WAAf,CAAb;AACA,UAAME,kBAAkB,GAAG,8BAC1B,qBAAOjD,MAAP,EAAekC,SAAf,EAA0B,8BAAgBlC,MAAhB,EAAyBwB,MAAnD,CAD0B,CAA3B;AAGA,UAAM0B,SAAS,GAAG,kBACjB/C,UADiB,EAEjB,SAAuC;AAAA,UAArC;AAAEoB,QAAAA,aAAF;AAAiB4B,QAAAA;AAAjB,OAAqC;AACtC,YAAMC,KAAK,GAAGJ,IAAI,CAACK,WAAL,CAAkB9B,aAAlB,CAAd;;AAEA,UAAK6B,KAAK,KAAK,CAAC,CAAhB,EAAoB;AACnB,eAAO,KAAP;AACA;;AAED,YAAME,kBAAkB,GAAGN,IAAI,CAACO,KAAL,CAC1BH,KAAK,GAAG7B,aAAa,CAACC,MADI,CAA3B;AAIA,YAAMgC,qBAAqB,GAAGF,kBAAkB,CAAC9B,MAAnB,GAA4B,EAA1D,CAXsC,CAWwB;AAC9D;AACA;AACA;AACA;AACA;;AACA,UAAKgC,qBAAL,EAA6B,OAAO,KAAP;AAE7B,YAAMC,QAAQ,GAAG/C,eAAe,CAACc,MAAhB,KAA2B,CAA5C;AACA,YAAMkC,gBAAgB,GAAGJ,kBAAkB,CAACK,KAAnB,CAA0B,IAA1B,CAAzB,CApBsC,CAqBtC;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,YAAMC,iBAAiB,GAAGF,gBAAgB,CAAClC,MAAjB,KAA4B,CAAtD,CA5BsC,CA6BtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,YAAMqC,wBAAwB,GAC7B3C,WAAW,CAACuB,OAAZ,IACAa,kBAAkB,CAACK,KAAnB,CAA0B,IAA1B,EAAiCnC,MAAjC,IAA2C,CAF5C;;AAIA,UACCiC,QAAQ,IACR,EAAII,wBAAwB,IAAID,iBAAhC,CAFD,EAGE;AACD,eAAO,KAAP;AACA;;AAED,UACCT,YAAY,IACZ,CAAEA,YAAY,CAAEH,IAAI,CAACO,KAAL,CAAY,CAAZ,EAAeH,KAAf,CAAF,EAA0BH,kBAA1B,CAFf,EAGE;AACD,eAAO,KAAP;AACA;;AAED,UACC,MAAMa,IAAN,CAAYR,kBAAZ,KACA,SAASQ,IAAT,CAAeR,kBAAf,CAFD,EAGE;AACD,eAAO,KAAP;AACA;;AAED,aAAO,oBAAoBQ,IAApB,CAA0BR,kBAA1B,CAAP;AACA,KAlEgB,CAAlB;;AAqEA,QAAK,CAAEJ,SAAP,EAAmB;AAClBf,MAAAA,KAAK;AACL;AACA;;AAED,UAAM4B,WAAW,GAAG,2BAAcb,SAAS,CAAC3B,aAAxB,CAApB;AACA,UAAMyC,KAAK,GAAGhB,IAAI,CAChBO,KADY,CACLP,IAAI,CAACK,WAAL,CAAkBH,SAAS,CAAC3B,aAA5B,CADK,EAEZyC,KAFY,CAEL,IAAIC,MAAJ,CAAa,GAAGF,WAAa,qBAA7B,CAFK,CAAd;AAGA,UAAMG,KAAK,GAAGF,KAAK,IAAIA,KAAK,CAAE,CAAF,CAA5B;AAEAjD,IAAAA,gBAAgB,CAAEmC,SAAF,CAAhB;AACAjC,IAAAA,kBAAkB,CAAE,MACnBiC,SAAS,KAAKpC,aAAd,GACG,yCAAoBoC,SAApB,CADH,GAEGlC,eAHc,CAAlB;AAKAH,IAAAA,cAAc,CAAEqD,KAAF,CAAd,CAhGgB,CAiGhB;AACA;AACA;AACA,GApGD,EAoGG,CAAEnB,WAAF,CApGH;AAsGA,QAAM;AAAEL,IAAAA,GAAG,EAAEyB,WAAW,GAAG;AAArB,MAA4BzD,eAAe,CAAEF,aAAF,CAAf,IAAoC,EAAtE;AACA,QAAM;AAAE4D,IAAAA;AAAF,MAAgBtD,aAAa,IAAI,EAAvC;AACA,QAAMuD,UAAU,GAAG,CAAC,CAAEvD,aAAH,IAAoBJ,eAAe,CAACc,MAAhB,GAAyB,CAAhE;AACA,QAAM8C,SAAS,GAAGD,UAAU,GACxB,mCAAmC9D,UAAY,EADvB,GAEzB,IAFH;AAGA,QAAMgE,QAAQ,GAAGF,UAAU,GACvB,gCAAgC9D,UAAY,IAAI4D,WAAa,EADtC,GAExB,IAFH;AAGA,QAAMK,YAAY,GAAGxE,MAAM,CAACsB,KAAP,KAAiBY,SAAtC;AAEA,SAAO;AACNoC,IAAAA,SADM;AAENC,IAAAA,QAFM;AAGNE,IAAAA,SAAS,EAAElC,aAHL;AAINmC,IAAAA,OAAO,EAAEF,YAAY,IAAIxD,eAAhB,IACR,4BAAC,eAAD;AACC,MAAA,SAAS,EAAGoD,SADb;AAEC,MAAA,WAAW,EAAGxD,WAFf;AAGC,MAAA,UAAU,EAAGL,UAHd;AAIC,MAAA,SAAS,EAAG+D,SAJb;AAKC,MAAA,aAAa,EAAG9D,aALjB;AAMC,MAAA,eAAe,EAAG8B,eANnB;AAOC,MAAA,QAAQ,EAAGX,MAPZ;AAQC,MAAA,KAAK,EAAG3B,MART;AASC,MAAA,UAAU,EAAGI,UATd;AAUC,MAAA,KAAK,EAAG+B;AAVT;AALK,GAAP;AAmBA;;AAEM,SAASwC,oBAAT,CAA+BtC,OAA/B,EAAyC;AAC/C,QAAMuC,GAAG,GAAG,sBAAZ;AACA,QAAMC,YAAY,GAAG,sBAArB;AACA,QAAM;AAAEH,IAAAA,OAAF;AAAWJ,IAAAA,SAAX;AAAsBC,IAAAA,QAAtB;AAAgCE,IAAAA;AAAhC,MAA8C1E,eAAe,CAAE,EACpE,GAAGsC,OADiE;AAEpEjC,IAAAA,UAAU,EAAEwE;AAFwD,GAAF,CAAnE;AAIAC,EAAAA,YAAY,CAACpC,OAAb,GAAuBgC,SAAvB;AACA,SAAO;AACNG,IAAAA,GAAG,EAAE,2BAAc,CAClBA,GADkB,EAElB,2BAAgBE,OAAF,IAAe;AAC5B,eAASC,UAAT,CAAqBvC,KAArB,EAA6B;AAC5BqC,QAAAA,YAAY,CAACpC,OAAb,CAAsBD,KAAtB;AACA;;AACDsC,MAAAA,OAAO,CAACE,gBAAR,CAA0B,SAA1B,EAAqCD,UAArC;AACA,aAAO,MAAM;AACZD,QAAAA,OAAO,CAACG,mBAAR,CAA6B,SAA7B,EAAwCF,UAAxC;AACA,OAFD;AAGA,KARD,EAQG,EARH,CAFkB,CAAd,CADC;AAaNG,IAAAA,QAAQ,EAAER,OAbJ;AAcN,yBAAqBJ,SAAS,GAAG,MAAH,GAAYpC,SAdpC;AAeN,iBAAaoC,SAfP;AAgBN,6BAAyBC;AAhBnB,GAAP;AAkBA;;AAEc,SAASY,YAAT,QAA8D;AAAA,MAAvC;AAAED,IAAAA,QAAF;AAAYE,IAAAA,UAAZ;AAAwB,OAAG/C;AAA3B,GAAuC;AAC5E,QAAM;AAAEqC,IAAAA,OAAF;AAAW,OAAGW;AAAd,MAAwBtF,eAAe,CAAEsC,OAAF,CAA7C;AACA,SACC,qDACG6C,QAAQ,CAAEG,KAAF,CADX,EAEGD,UAAU,IAAIV,OAFjB,CADD;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { find } from 'lodash';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseInstanceId,\n\tuseDebounce,\n\tuseMergeRefs,\n\tuseRefEffect,\n} from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\n\n/**\n * A raw completer option.\n *\n * @typedef {*} CompleterOption\n */\n\n/**\n * @callback FnGetOptions\n *\n * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.\n */\n\n/**\n * @callback FnGetOptionKeywords\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} list of key words to search.\n */\n\n/**\n * @callback FnIsOptionDisabled\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} whether or not the given option is disabled.\n */\n\n/**\n * @callback FnGetOptionLabel\n * @param {CompleterOption} option a completer option.\n *\n * @return {(string|Array.<(string|WPElement)>)} list of react components to render.\n */\n\n/**\n * @callback FnAllowContext\n * @param {string} before the string before the auto complete trigger and query.\n * @param {string} after the string after the autocomplete trigger and query.\n *\n * @return {boolean} true if the completer can handle.\n */\n\n/**\n * @typedef {Object} OptionCompletion\n * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.\n * @property {OptionCompletionValue} value the completion value.\n */\n\n/**\n * A completion value.\n *\n * @typedef {(string|WPElement|Object)} OptionCompletionValue\n */\n\n/**\n * @callback FnGetOptionCompletion\n * @param {CompleterOption} value the value of the completer option.\n * @param {string} query the text value of the autocomplete query.\n *\n * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an\n * \t\t\t\t\t\t\t\t\t\t\t\t\t OptionCompletionValue is returned, the\n * \t\t\t\t\t\t\t\t\t\t\t\t\t completion action defaults to `insert-at-caret`.\n */\n\n/**\n * @typedef {Object} WPCompleter\n * @property {string} name a way to identify a completer, useful for selective overriding.\n * @property {?string} className A class to apply to the popup menu.\n * @property {string} triggerPrefix the prefix that will display the menu.\n * @property {(CompleterOption[]|FnGetOptions)} options the completer options or a function to get them.\n * @property {?FnGetOptionKeywords} getOptionKeywords get the keywords for a given option.\n * @property {?FnIsOptionDisabled} isOptionDisabled get whether or not the given option is disabled.\n * @property {FnGetOptionLabel} getOptionLabel get the label for a given option.\n * @property {?FnAllowContext} allowContext filter the context under which the autocomplete activates.\n * @property {FnGetOptionCompletion} getOptionCompletion get the completion associated with a given option.\n */\n\nfunction useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n} ) {\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\tconst [ filteredOptions, setFilteredOptions ] = useState( [] );\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState( null );\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState( null );\n\tconst backspacing = useRef( false );\n\n\tfunction insertCompletion( replacement ) {\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst { action, value } =\n\t\t\t\tundefined === completion.action ||\n\t\t\t\tundefined === completion.value\n\t\t\t\t\t? { action: 'insert-at-caret', value: completion }\n\t\t\t\t\t: completion;\n\n\t\t\tif ( 'replace' === action ) {\n\t\t\t\tonReplace( [ value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === action ) {\n\t\t\t\tinsertCompletion( value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( [] );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\tfunction announce( options ) {\n\t\tif ( ! debouncedSpeak ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( !! options.length ) {\n\t\t\tdebouncedSpeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\toptions.length\n\t\t\t\t\t),\n\t\t\t\t\toptions.length\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else {\n\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t}\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t\tannounce( options );\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tbackspacing.current = event.key === 'Backspace';\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\tevent.defaultPrevented ||\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.key ) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowDown':\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'Escape':\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowLeft':\n\t\t\tcase 'ArrowRight':\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled key should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\t// textContent is a primitive (string), memoizing is not strictly necessary\n\t// but this is a preemptive performance improvement, since the autocompleter\n\t// is a potential bottleneck for the editor type metric.\n\tconst textContent = useMemo( () => {\n\t\tif ( isCollapsed( record ) ) {\n\t\t\treturn getTextContent( slice( record, 0 ) );\n\t\t}\n\t}, [ record ] );\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst text = removeAccents( textContent );\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\t\tconst completer = find(\n\t\t\tcompleters,\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = text.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = text.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing.current &&\n\t\t\t\t\ttextWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext( text.slice( 0, index ), textAfterSelection )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query );\n\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ textContent ] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: null;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\treturn {\n\t\tref: useMergeRefs( [\n\t\t\tref,\n\t\t\tuseRefEffect( ( element ) => {\n\t\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\t\tonKeyDownRef.current( event );\n\t\t\t\t}\n\t\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\t};\n\t\t\t}, [] ),\n\t\t] ),\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( { children, isSelected, ...options } ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"]}
@@ -71,7 +71,7 @@ const UnconnectedBorderBoxControl = (props, forwardedRef) => {
71
71
  onSplitChange,
72
72
  popoverPlacement,
73
73
  popoverOffset,
74
- size = 'default',
74
+ size,
75
75
  splitValue,
76
76
  toggleLinked,
77
77
  wrapperClassName,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","popoverAnchor","setPopoverAnchor","popoverProps","placement","offset","anchor","shift","undefined","mergedRef","BorderBoxControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsize = 'default',\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<View className={ wrapperClassName }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n *\n * When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n *\n * ```jsx\n * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n *\n * \treturn (\n * \t\t<BorderBoxControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","popoverAnchor","setPopoverAnchor","popoverProps","placement","offset","anchor","shift","undefined","mergedRef","BorderBoxControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsize,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<View className={ wrapperClassName }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n *\n * When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n *\n * ```jsx\n * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n *\n * \treturn (\n * \t\t<BorderBoxControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"]}
@@ -29,8 +29,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
29
29
  function useBorderBoxControl(props) {
30
30
  const {
31
31
  className,
32
+ colors = [],
32
33
  onChange,
34
+ enableAlpha = false,
35
+ enableStyle = true,
36
+ size = 'default',
33
37
  value,
38
+ __experimentalHasMultipleOrigins = false,
39
+ __experimentalIsRenderedInSidebar = false,
34
40
  ...otherProps
35
41
  } = (0, _context.useContextSystem)(props, 'BorderBoxControl');
36
42
  const mixedBorders = (0, _utils.hasMixedBorders)(value);
@@ -105,7 +111,10 @@ function useBorderBoxControl(props) {
105
111
  }, [cx]);
106
112
  return { ...otherProps,
107
113
  className: classes,
114
+ colors,
108
115
  disableUnits: mixedBorders && !hasWidthValue,
116
+ enableAlpha,
117
+ enableStyle,
109
118
  hasMixedBorders: mixedBorders,
110
119
  isLinked,
111
120
  linkedControlClassName,
@@ -113,8 +122,11 @@ function useBorderBoxControl(props) {
113
122
  onSplitChange,
114
123
  toggleLinked,
115
124
  linkedValue,
125
+ size,
116
126
  splitValue,
117
- wrapperClassName
127
+ wrapperClassName,
128
+ __experimentalHasMultipleOrigins,
129
+ __experimentalIsRenderedInSidebar
118
130
  };
119
131
  }
120
132
  //# sourceMappingURL=hook.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useBorderBoxControl","props","className","onChange","value","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","hasWidthValue","isNaN","parseFloat","width","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","styles","borderBoxControl","linkedControlClassName","linkedBorderControl","wrapperClassName","wrapper","disableUnits","hasMixedBorders"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AASA;;AACA;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;AAiBO,SAASA,mBAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuBC,IAAAA,KAAvB;AAA8B,OAAGC;AAAjC,MAAgD,+BACrDJ,KADqD,EAErD,kBAFqD,CAAtD;AAKA,QAAMK,YAAY,GAAG,4BAAiBF,KAAjB,CAArB;AACA,QAAMG,YAAY,GAAG,4BAAiBH,KAAjB,CAArB;AAEA,QAAMI,WAAW,GAAGD,YAAY,GAC7B,4BAAiBH,KAAjB,CAD6B,GAE3BA,KAFL;AAIA,QAAMK,UAAU,GAAGF,YAAY,GAC1BH,KAD0B,GAE5B,4BAAiBA,KAAjB,CAFH,CAbC,CAiBD;;AACA,QAAMM,aAAa,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAG,GAAGJ,WAAJ,aAAIA,WAAJ,uBAAIA,WAAW,CAAEK,KAAO,EAA1B,CAAZ,CAA7B;AAEA,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,CAAET,YAAZ,CAAlC;;AACA,QAAMU,YAAY,GAAG,MAAMD,WAAW,CAAE,CAAED,QAAJ,CAAtC;;AAEA,QAAMG,cAAc,GAAKC,SAAF,IAA0B;AAChD,QAAK,CAAEA,SAAP,EAAmB;AAClB,aAAOf,QAAQ,CAAEgB,SAAF,CAAf;AACA,KAH+C,CAKhD;;;AACA,QAAK,CAAEb,YAAF,IAAkB,6BAAkBY,SAAlB,CAAvB,EAAuD;AACtD,aAAOf,QAAQ,CACd,0BAAee,SAAf,IAA6BC,SAA7B,GAAyCD,SAD3B,CAAf;AAGA,KAV+C,CAYhD;AACA;AACA;AACA;;;AACA,UAAME,OAAO,GAAG,0BACfZ,WADe,EAEfU,SAFe,CAAhB;AAIA,UAAMG,cAAc,GAAG;AACtBC,MAAAA,GAAG,EAAE,EAAE,IAAKlB,KAAL,aAAKA,KAAL,uBAAKA,KAAF,CAAsBkB,GAAzB,CAAF;AAAgC,WAAGF;AAAnC,OADiB;AAEtBG,MAAAA,KAAK,EAAE,EAAE,IAAKnB,KAAL,aAAKA,KAAL,uBAAKA,KAAF,CAAsBmB,KAAzB,CAAF;AAAkC,WAAGH;AAArC,OAFe;AAGtBI,MAAAA,MAAM,EAAE,EAAE,IAAKpB,KAAL,aAAKA,KAAL,uBAAKA,KAAF,CAAsBoB,MAAzB,CAAF;AAAmC,WAAGJ;AAAtC,OAHc;AAItBK,MAAAA,IAAI,EAAE,EAAE,IAAKrB,KAAL,aAAKA,KAAL,uBAAKA,KAAF,CAAsBqB,IAAzB,CAAF;AAAiC,WAAGL;AAApC;AAJgB,KAAvB;;AAOA,QAAK,4BAAiBC,cAAjB,CAAL,EAAyC;AACxC,aAAOlB,QAAQ,CAAEkB,cAAF,CAAf;AACA;;AAED,UAAMK,cAAc,GAAG,0BAAeL,cAAc,CAACC,GAA9B,IACpBH,SADoB,GAEpBE,cAAc,CAACC,GAFlB;AAIAnB,IAAAA,QAAQ,CAAEuB,cAAF,CAAR;AACA,GApCD;;AAsCA,QAAMC,aAAa,GAAG,CACrBT,SADqB,EAErBU,IAFqB,KAGjB;AACJ,UAAMP,cAAc,GAAG,EAAE,GAAGZ,UAAL;AAAiB,OAAEmB,IAAF,GAAUV;AAA3B,KAAvB;;AAEA,QAAK,4BAAiBG,cAAjB,CAAL,EAAyC;AACxClB,MAAAA,QAAQ,CAAEkB,cAAF,CAAR;AACA,KAFD,MAEO;AACNlB,MAAAA,QAAQ,CAAEe,SAAF,CAAR;AACA;AACD,GAXD;;AAaA,QAAMW,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,gBAAT,EAA2B9B,SAA3B,CAAT;AACA,GAFe,EAEb,CAAE2B,EAAF,EAAM3B,SAAN,CAFa,CAAhB;AAIA,QAAM+B,sBAAsB,GAAG,sBAAS,MAAM;AAC7C,WAAOJ,EAAE,CAAEE,MAAM,CAACG,mBAAP,EAAF,CAAT;AACA,GAF8B,EAE5B,CAAEL,EAAF,CAF4B,CAA/B;AAIA,QAAMM,gBAAgB,GAAG,sBAAS,MAAM;AACvC,WAAON,EAAE,CAAEE,MAAM,CAACK,OAAT,CAAT;AACA,GAFwB,EAEtB,CAAEP,EAAF,CAFsB,CAAzB;AAIA,SAAO,EACN,GAAGxB,UADG;AAENH,IAAAA,SAAS,EAAE4B,OAFL;AAGNO,IAAAA,YAAY,EAAE/B,YAAY,IAAI,CAAEI,aAH1B;AAIN4B,IAAAA,eAAe,EAAEhC,YAJX;AAKNQ,IAAAA,QALM;AAMNmB,IAAAA,sBANM;AAONhB,IAAAA,cAPM;AAQNU,IAAAA,aARM;AASNX,IAAAA,YATM;AAUNR,IAAAA,WAVM;AAWNC,IAAAA,UAXM;AAYN0B,IAAAA;AAZM,GAAP;AAcA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst { className, onChange, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControl'\n\t);\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\t// If no numeric width value is set, the unit select will be disabled.\n\tconst hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.linkedBorderControl() );\n\t}, [ cx ] );\n\n\tconst wrapperClassName = useMemo( () => {\n\t\treturn cx( styles.wrapper );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tdisableUnits: mixedBorders && ! hasWidthValue,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsplitValue,\n\t\twrapperClassName,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useBorderBoxControl","props","className","colors","onChange","enableAlpha","enableStyle","size","value","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","hasWidthValue","isNaN","parseFloat","width","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","styles","borderBoxControl","linkedControlClassName","linkedBorderControl","wrapperClassName","wrapper","disableUnits","hasMixedBorders"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AASA;;AACA;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;AAiBO,SAASA,mBAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,MAAM,GAAG,EAFJ;AAGLC,IAAAA,QAHK;AAILC,IAAAA,WAAW,GAAG,KAJT;AAKLC,IAAAA,WAAW,GAAG,IALT;AAMLC,IAAAA,IAAI,GAAG,SANF;AAOLC,IAAAA,KAPK;AAQLC,IAAAA,gCAAgC,GAAG,KAR9B;AASLC,IAAAA,iCAAiC,GAAG,KAT/B;AAUL,OAAGC;AAVE,MAWF,+BAAkBV,KAAlB,EAAyB,kBAAzB,CAXJ;AAaA,QAAMW,YAAY,GAAG,4BAAiBJ,KAAjB,CAArB;AACA,QAAMK,YAAY,GAAG,4BAAiBL,KAAjB,CAArB;AAEA,QAAMM,WAAW,GAAGD,YAAY,GAC7B,4BAAiBL,KAAjB,CAD6B,GAE3BA,KAFL;AAIA,QAAMO,UAAU,GAAGF,YAAY,GAC1BL,KAD0B,GAE5B,4BAAiBA,KAAjB,CAFH,CArBC,CAyBD;;AACA,QAAMQ,aAAa,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAG,GAAGJ,WAAJ,aAAIA,WAAJ,uBAAIA,WAAW,CAAEK,KAAO,EAA1B,CAAZ,CAA7B;AAEA,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,CAAET,YAAZ,CAAlC;;AACA,QAAMU,YAAY,GAAG,MAAMD,WAAW,CAAE,CAAED,QAAJ,CAAtC;;AAEA,QAAMG,cAAc,GAAKC,SAAF,IAA0B;AAChD,QAAK,CAAEA,SAAP,EAAmB;AAClB,aAAOpB,QAAQ,CAAEqB,SAAF,CAAf;AACA,KAH+C,CAKhD;;;AACA,QAAK,CAAEb,YAAF,IAAkB,6BAAkBY,SAAlB,CAAvB,EAAuD;AACtD,aAAOpB,QAAQ,CACd,0BAAeoB,SAAf,IAA6BC,SAA7B,GAAyCD,SAD3B,CAAf;AAGA,KAV+C,CAYhD;AACA;AACA;AACA;;;AACA,UAAME,OAAO,GAAG,0BACfZ,WADe,EAEfU,SAFe,CAAhB;AAIA,UAAMG,cAAc,GAAG;AACtBC,MAAAA,GAAG,EAAE,EAAE,IAAKpB,KAAL,aAAKA,KAAL,uBAAKA,KAAF,CAAsBoB,GAAzB,CAAF;AAAgC,WAAGF;AAAnC,OADiB;AAEtBG,MAAAA,KAAK,EAAE,EAAE,IAAKrB,KAAL,aAAKA,KAAL,uBAAKA,KAAF,CAAsBqB,KAAzB,CAAF;AAAkC,WAAGH;AAArC,OAFe;AAGtBI,MAAAA,MAAM,EAAE,EAAE,IAAKtB,KAAL,aAAKA,KAAL,uBAAKA,KAAF,CAAsBsB,MAAzB,CAAF;AAAmC,WAAGJ;AAAtC,OAHc;AAItBK,MAAAA,IAAI,EAAE,EAAE,IAAKvB,KAAL,aAAKA,KAAL,uBAAKA,KAAF,CAAsBuB,IAAzB,CAAF;AAAiC,WAAGL;AAApC;AAJgB,KAAvB;;AAOA,QAAK,4BAAiBC,cAAjB,CAAL,EAAyC;AACxC,aAAOvB,QAAQ,CAAEuB,cAAF,CAAf;AACA;;AAED,UAAMK,cAAc,GAAG,0BAAeL,cAAc,CAACC,GAA9B,IACpBH,SADoB,GAEpBE,cAAc,CAACC,GAFlB;AAIAxB,IAAAA,QAAQ,CAAE4B,cAAF,CAAR;AACA,GApCD;;AAsCA,QAAMC,aAAa,GAAG,CACrBT,SADqB,EAErBU,IAFqB,KAGjB;AACJ,UAAMP,cAAc,GAAG,EAAE,GAAGZ,UAAL;AAAiB,OAAEmB,IAAF,GAAUV;AAA3B,KAAvB;;AAEA,QAAK,4BAAiBG,cAAjB,CAAL,EAAyC;AACxCvB,MAAAA,QAAQ,CAAEuB,cAAF,CAAR;AACA,KAFD,MAEO;AACNvB,MAAAA,QAAQ,CAAEoB,SAAF,CAAR;AACA;AACD,GAXD;;AAaA,QAAMW,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,gBAAT,EAA2BpC,SAA3B,CAAT;AACA,GAFe,EAEb,CAAEiC,EAAF,EAAMjC,SAAN,CAFa,CAAhB;AAIA,QAAMqC,sBAAsB,GAAG,sBAAS,MAAM;AAC7C,WAAOJ,EAAE,CAAEE,MAAM,CAACG,mBAAP,EAAF,CAAT;AACA,GAF8B,EAE5B,CAAEL,EAAF,CAF4B,CAA/B;AAIA,QAAMM,gBAAgB,GAAG,sBAAS,MAAM;AACvC,WAAON,EAAE,CAAEE,MAAM,CAACK,OAAT,CAAT;AACA,GAFwB,EAEtB,CAAEP,EAAF,CAFsB,CAAzB;AAIA,SAAO,EACN,GAAGxB,UADG;AAENT,IAAAA,SAAS,EAAEkC,OAFL;AAGNjC,IAAAA,MAHM;AAINwC,IAAAA,YAAY,EAAE/B,YAAY,IAAI,CAAEI,aAJ1B;AAKNX,IAAAA,WALM;AAMNC,IAAAA,WANM;AAONsC,IAAAA,eAAe,EAAEhC,YAPX;AAQNQ,IAAAA,QARM;AASNmB,IAAAA,sBATM;AAUNhB,IAAAA,cAVM;AAWNU,IAAAA,aAXM;AAYNX,IAAAA,YAZM;AAaNR,IAAAA,WAbM;AAcNP,IAAAA,IAdM;AAeNQ,IAAAA,UAfM;AAgBN0B,IAAAA,gBAhBM;AAiBNhC,IAAAA,gCAjBM;AAkBNC,IAAAA;AAlBM,GAAP;AAoBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tonChange,\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins = false,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControl' );\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\t// If no numeric width value is set, the unit select will be disabled.\n\tconst hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.linkedBorderControl() );\n\t}, [ cx ] );\n\n\tconst wrapperClassName = useMemo( () => {\n\t\treturn cx( styles.wrapper );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tdisableUnits: mixedBorders && ! hasWidthValue,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsize,\n\t\tsplitValue,\n\t\twrapperClassName,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}
@@ -27,7 +27,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
27
27
  function useBorderBoxControlSplitControls(props) {
28
28
  const {
29
29
  className,
30
+ colors = [],
31
+ enableAlpha = false,
32
+ enableStyle = true,
30
33
  size = 'default',
34
+ __experimentalHasMultipleOrigins = false,
35
+ __experimentalIsRenderedInSidebar = false,
31
36
  ...otherProps
32
37
  } = (0, _context.useContextSystem)(props, 'BorderBoxControlSplitControls'); // Generate class names.
33
38
 
@@ -44,8 +49,13 @@ function useBorderBoxControlSplitControls(props) {
44
49
  return { ...otherProps,
45
50
  centeredClassName,
46
51
  className: classes,
52
+ colors,
53
+ enableAlpha,
54
+ enableStyle,
47
55
  rightAlignedClassName,
48
- size
56
+ size,
57
+ __experimentalHasMultipleOrigins,
58
+ __experimentalIsRenderedInSidebar
49
59
  };
50
60
  }
51
61
  //# sourceMappingURL=hook.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useBorderBoxControlSplitControls","props","className","size","otherProps","cx","classes","styles","borderBoxControlSplitControls","centeredClassName","centeredBorderControl","rightAlignedClassName","rightBorderControl"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,IAAI,GAAG,SAFF;AAGL,OAAGC;AAHE,MAIF,+BAAkBH,KAAlB,EAAyB,+BAAzB,CAJJ,CADC,CAOD;;AACA,QAAMI,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,6BAAP,CAAsCL,IAAtC,CAAF,EAAgDD,SAAhD,CAAT;AACA,GAFe,EAEb,CAAEG,EAAF,EAAMH,SAAN,EAAiBC,IAAjB,CAFa,CAAhB;AAIA,QAAMM,iBAAiB,GAAG,sBAAS,MAAM;AACxC,WAAOJ,EAAE,CAAEE,MAAM,CAACG,qBAAT,EAAgCR,SAAhC,CAAT;AACA,GAFyB,EAEvB,CAAEG,EAAF,EAAMH,SAAN,CAFuB,CAA1B;AAIA,QAAMS,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,WAAON,EAAE,CAAEE,MAAM,CAACK,kBAAP,EAAF,EAA+BV,SAA/B,CAAT;AACA,GAF6B,EAE3B,CAAEG,EAAF,EAAMH,SAAN,CAF2B,CAA9B;AAIA,SAAO,EACN,GAAGE,UADG;AAENK,IAAAA,iBAFM;AAGNP,IAAAA,SAAS,EAAEI,OAHL;AAINK,IAAAA,qBAJM;AAKNR,IAAAA;AALM,GAAP;AAOA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tsize = 'default',\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlSplitControls' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControlSplitControls( size ), className );\n\t}, [ cx, className, size ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.centeredBorderControl, className );\n\t}, [ cx, className ] );\n\n\tconst rightAlignedClassName = useMemo( () => {\n\t\treturn cx( styles.rightBorderControl(), className );\n\t}, [ cx, className ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tcenteredClassName,\n\t\tclassName: classes,\n\t\trightAlignedClassName,\n\t\tsize,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useBorderBoxControlSplitControls","props","className","colors","enableAlpha","enableStyle","size","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","cx","classes","styles","borderBoxControlSplitControls","centeredClassName","centeredBorderControl","rightAlignedClassName","rightBorderControl"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,MAAM,GAAG,EAFJ;AAGLC,IAAAA,WAAW,GAAG,KAHT;AAILC,IAAAA,WAAW,GAAG,IAJT;AAKLC,IAAAA,IAAI,GAAG,SALF;AAMLC,IAAAA,gCAAgC,GAAG,KAN9B;AAOLC,IAAAA,iCAAiC,GAAG,KAP/B;AAQL,OAAGC;AARE,MASF,+BAAkBR,KAAlB,EAAyB,+BAAzB,CATJ,CADC,CAYD;;AACA,QAAMS,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,6BAAP,CAAsCP,IAAtC,CAAF,EAAgDJ,SAAhD,CAAT;AACA,GAFe,EAEb,CAAEQ,EAAF,EAAMR,SAAN,EAAiBI,IAAjB,CAFa,CAAhB;AAIA,QAAMQ,iBAAiB,GAAG,sBAAS,MAAM;AACxC,WAAOJ,EAAE,CAAEE,MAAM,CAACG,qBAAT,EAAgCb,SAAhC,CAAT;AACA,GAFyB,EAEvB,CAAEQ,EAAF,EAAMR,SAAN,CAFuB,CAA1B;AAIA,QAAMc,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,WAAON,EAAE,CAAEE,MAAM,CAACK,kBAAP,EAAF,EAA+Bf,SAA/B,CAAT;AACA,GAF6B,EAE3B,CAAEQ,EAAF,EAAMR,SAAN,CAF2B,CAA9B;AAIA,SAAO,EACN,GAAGO,UADG;AAENK,IAAAA,iBAFM;AAGNZ,IAAAA,SAAS,EAAES,OAHL;AAINR,IAAAA,MAJM;AAKNC,IAAAA,WALM;AAMNC,IAAAA,WANM;AAONW,IAAAA,qBAPM;AAQNV,IAAAA,IARM;AASNC,IAAAA,gCATM;AAUNC,IAAAA;AAVM,GAAP;AAYA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\t__experimentalHasMultipleOrigins = false,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlSplitControls' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControlSplitControls( size ), className );\n\t}, [ cx, className, size ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.centeredBorderControl, className );\n\t}, [ cx, className ] );\n\n\tconst rightAlignedClassName = useMemo( () => {\n\t\treturn cx( styles.rightBorderControl(), className );\n\t}, [ cx, className ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tcenteredClassName,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\trightAlignedClassName,\n\t\tsize,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}
@@ -61,7 +61,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
61
61
  disableCustomColors,
62
62
  disableUnits,
63
63
  enableAlpha,
64
- enableStyle = true,
64
+ enableStyle,
65
65
  hideLabelFromVision,
66
66
  innerWrapperClassName,
67
67
  inputWidth,
@@ -73,7 +73,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
73
73
  __unstablePopoverProps,
74
74
  previousStyleSelection,
75
75
  showDropdownHeader,
76
- size = 'default',
76
+ size,
77
77
  sliderClassName,
78
78
  value: border,
79
79
  widthUnit,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","width","includes","undefined","BorderControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle = true,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize = 'default',\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","width","includes","undefined","BorderControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"]}
@@ -40,12 +40,17 @@ const sanitizeBorder = border => {
40
40
  function useBorderControl(props) {
41
41
  const {
42
42
  className,
43
+ colors = [],
43
44
  isCompact,
44
45
  onChange,
46
+ enableAlpha = true,
47
+ enableStyle = true,
45
48
  shouldSanitizeBorder = true,
46
49
  size = 'default',
47
50
  value: border,
48
51
  width,
52
+ __experimentalHasMultipleOrigins = false,
53
+ __experimentalIsRenderedInSidebar = false,
49
54
  ...otherProps
50
55
  } = (0, _context.useContextSystem)(props, 'BorderControl');
51
56
  const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border === null || border === void 0 ? void 0 : border.width);
@@ -121,6 +126,9 @@ function useBorderControl(props) {
121
126
  }, [cx]);
122
127
  return { ...otherProps,
123
128
  className: classes,
129
+ colors,
130
+ enableAlpha,
131
+ enableStyle,
124
132
  innerWrapperClassName,
125
133
  inputWidth: wrapperWidth,
126
134
  onBorderChange,
@@ -131,7 +139,9 @@ function useBorderControl(props) {
131
139
  value: border,
132
140
  widthUnit,
133
141
  widthValue,
134
- size
142
+ size,
143
+ __experimentalHasMultipleOrigins,
144
+ __experimentalIsRenderedInSidebar
135
145
  };
136
146
  }
137
147
  //# sourceMappingURL=hook.js.map