@wordpress/components 28.8.6 → 28.10.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 (894) hide show
  1. package/CHANGELOG.md +44 -5
  2. package/build/alignment-matrix-control/icon.js.map +1 -1
  3. package/build/alignment-matrix-control/types.js.map +1 -1
  4. package/build/alignment-matrix-control/utils.js.map +1 -1
  5. package/build/angle-picker-control/angle-circle.js.map +1 -1
  6. package/build/autocomplete/autocompleter-ui.js +3 -3
  7. package/build/autocomplete/autocompleter-ui.js.map +1 -1
  8. package/build/autocomplete/get-default-use-items.js.map +1 -1
  9. package/build/autocomplete/index.js +5 -1
  10. package/build/autocomplete/index.js.map +1 -1
  11. package/build/base-control/hooks.js.map +1 -1
  12. package/build/base-control/index.js.map +1 -1
  13. package/build/border-box-control/border-box-control/component.js +3 -14
  14. package/build/border-box-control/border-box-control/component.js.map +1 -1
  15. package/build/border-box-control/border-box-control/hook.js.map +1 -1
  16. package/build/border-box-control/styles.js.map +1 -1
  17. package/build/border-box-control/utils.js.map +1 -1
  18. package/build/border-control/border-control/component.js +1 -2
  19. package/build/border-control/border-control/component.js.map +1 -1
  20. package/build/border-control/border-control/hook.js.map +1 -1
  21. package/build/border-control/border-control-dropdown/component.js +2 -14
  22. package/build/border-control/border-control-dropdown/component.js.map +1 -1
  23. package/build/border-control/styles.js +13 -13
  24. package/build/border-control/styles.js.map +1 -1
  25. package/build/border-control/types.js.map +1 -1
  26. package/build/box-control/axial-input-controls.js.map +1 -1
  27. package/build/box-control/icon.js.map +1 -1
  28. package/build/box-control/index.js +4 -4
  29. package/build/box-control/index.js.map +1 -1
  30. package/build/box-control/input-controls.js.map +1 -1
  31. package/build/box-control/types.js.map +1 -1
  32. package/build/button/index.native.js +1 -1
  33. package/build/button/index.native.js.map +1 -1
  34. package/build/card/card/component.js +1 -1
  35. package/build/card/card/component.js.map +1 -1
  36. package/build/card/styles.js.map +1 -1
  37. package/build/color-palette/index.js.map +1 -1
  38. package/build/color-palette/index.native.js +2 -1
  39. package/build/color-palette/index.native.js.map +1 -1
  40. package/build/color-picker/styles.js.map +1 -1
  41. package/build/combobox-control/index.js +1 -1
  42. package/build/combobox-control/index.js.map +1 -1
  43. package/build/composite/legacy/index.js.map +1 -1
  44. package/build/context/context-connect.js +1 -0
  45. package/build/context/context-connect.js.map +1 -1
  46. package/build/context/context-system-provider.js +1 -1
  47. package/build/context/context-system-provider.js.map +1 -1
  48. package/build/context/get-styled-class-name-from-key.js.map +1 -1
  49. package/build/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
  50. package/build/custom-gradient-picker/index.js.map +1 -1
  51. package/build/custom-gradient-picker/serializer.js.map +1 -1
  52. package/build/custom-gradient-picker/utils.js.map +1 -1
  53. package/build/custom-select-control-v2/styles.js.map +1 -1
  54. package/build/dashicon/index.js.map +1 -1
  55. package/build/date-time/date/styles.js.map +1 -1
  56. package/build/date-time/time/timezone.js.map +1 -1
  57. package/build/draggable/index.js.map +1 -1
  58. package/build/drop-zone/index.js.map +1 -1
  59. package/build/dropdown-menu-v2/styles.js.map +1 -1
  60. package/build/duotone-picker/color-list-picker/index.js.map +1 -1
  61. package/build/duotone-picker/utils.js.map +1 -1
  62. package/build/elevation/hook.js.map +1 -1
  63. package/build/external-link/index.js +20 -23
  64. package/build/external-link/index.js.map +1 -1
  65. package/build/focal-point-picker/index.js.map +1 -1
  66. package/build/focal-point-picker/index.native.js.map +1 -1
  67. package/build/focal-point-picker/styles/focal-point-style.js.map +1 -1
  68. package/build/font-size-picker/index.js.map +1 -1
  69. package/build/form-token-field/index.js +2 -1
  70. package/build/form-token-field/index.js.map +1 -1
  71. package/build/form-token-field/suggestions-list.js.map +1 -1
  72. package/build/form-token-field/token-input.js.map +1 -1
  73. package/build/form-token-field/token.js +1 -1
  74. package/build/form-token-field/token.js.map +1 -1
  75. package/build/gradient-picker/index.js.map +1 -1
  76. package/build/grid/hook.js.map +1 -1
  77. package/build/guide/page-control.js +1 -1
  78. package/build/guide/page-control.js.map +1 -1
  79. package/build/h-stack/hook.js.map +1 -1
  80. package/build/heading/hook.js.map +1 -1
  81. package/build/index.js +36 -5
  82. package/build/index.js.map +1 -1
  83. package/build/input-control/index.js.map +1 -1
  84. package/build/input-control/input-base.js.map +1 -1
  85. package/build/input-control/styles/input-control-styles.js.map +1 -1
  86. package/build/item-group/styles.js.map +1 -1
  87. package/build/menu-group/index.js.map +1 -1
  88. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  89. package/build/mobile/bottom-sheet/cell.native.js +4 -4
  90. package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
  91. package/build/mobile/bottom-sheet/index.native.js.map +1 -1
  92. package/build/mobile/bottom-sheet/range-cell.native.js +1 -1
  93. package/build/mobile/bottom-sheet/range-cell.native.js.map +1 -1
  94. package/build/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
  95. package/build/mobile/bottom-sheet/stepper-cell/index.native.js +1 -1
  96. package/build/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
  97. package/build/mobile/bottom-sheet/switch-cell.native.js +4 -4
  98. package/build/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
  99. package/build/mobile/cycle-select-control/index.native.js.map +1 -1
  100. package/build/mobile/gradient/index.native.js.map +1 -1
  101. package/build/mobile/image/index.native.js.map +1 -1
  102. package/build/mobile/link-picker/index.native.js +1 -1
  103. package/build/mobile/link-picker/index.native.js.map +1 -1
  104. package/build/mobile/link-picker/link-picker-results.native.js.map +1 -1
  105. package/build/mobile/picker/index.android.js.map +1 -1
  106. package/build/mobile/segmented-control/index.native.js.map +1 -1
  107. package/build/mobile/utils/get-px-from-css-unit.native.js.map +1 -1
  108. package/build/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
  109. package/build/modal/aria-helper.js +2 -1
  110. package/build/modal/aria-helper.js.map +1 -1
  111. package/build/modal/index.js +2 -1
  112. package/build/modal/index.js.map +1 -1
  113. package/build/modal/use-modal-exit-animation.js.map +1 -1
  114. package/build/navigation/group/index.js.map +1 -1
  115. package/build/navigation/item/base.js.map +1 -1
  116. package/build/navigation/menu/index.js.map +1 -1
  117. package/build/navigation/menu/menu-title-search.js +2 -2
  118. package/build/navigation/menu/menu-title-search.js.map +1 -1
  119. package/build/navigation/menu/menu-title.js.map +1 -1
  120. package/build/navigation/styles/navigation-styles.js.map +1 -1
  121. package/build/navigator/index.js +128 -32
  122. package/build/navigator/index.js.map +1 -1
  123. package/build/navigator/legacy.js +179 -0
  124. package/build/navigator/legacy.js.map +1 -0
  125. package/build/navigator/{navigator-provider → navigator}/component.js +5 -40
  126. package/build/navigator/navigator/component.js.map +1 -0
  127. package/build/navigator/navigator-back-button/component.js +2 -38
  128. package/build/navigator/navigator-back-button/component.js.map +1 -1
  129. package/build/navigator/navigator-back-button/hook.js +1 -1
  130. package/build/navigator/navigator-back-button/hook.js.map +1 -1
  131. package/build/navigator/navigator-button/component.js +2 -37
  132. package/build/navigator/navigator-button/component.js.map +1 -1
  133. package/build/navigator/navigator-button/hook.js +1 -1
  134. package/build/navigator/navigator-button/hook.js.map +1 -1
  135. package/build/navigator/navigator-screen/component.js +40 -62
  136. package/build/navigator/navigator-screen/component.js.map +1 -1
  137. package/build/navigator/navigator-screen/use-screen-animate-presence.js +114 -0
  138. package/build/navigator/navigator-screen/use-screen-animate-presence.js.map +1 -0
  139. package/build/navigator/navigator-to-parent-button/component.js +3 -7
  140. package/build/navigator/navigator-to-parent-button/component.js.map +1 -1
  141. package/build/navigator/styles.js +78 -35
  142. package/build/navigator/styles.js.map +1 -1
  143. package/build/navigator/types.js.map +1 -1
  144. package/build/navigator/use-navigator.js +4 -1
  145. package/build/navigator/use-navigator.js.map +1 -1
  146. package/build/number-control/styles/number-control-styles.js.map +1 -1
  147. package/build/palette-edit/index.js +1 -1
  148. package/build/palette-edit/index.js.map +1 -1
  149. package/build/popover/index.js +1 -1
  150. package/build/popover/index.js.map +1 -1
  151. package/build/popover/overlay-middlewares.js.map +1 -1
  152. package/build/popover/utils.js.map +1 -1
  153. package/build/progress-bar/index.js.map +1 -1
  154. package/build/progress-bar/styles.js.map +1 -1
  155. package/build/query-controls/index.js.map +1 -1
  156. package/build/query-controls/index.native.js.map +1 -1
  157. package/build/radio-control/index.js.map +1 -1
  158. package/build/radio-control/index.native.js.map +1 -1
  159. package/build/range-control/index.js.map +1 -1
  160. package/build/range-control/index.native.js.map +1 -1
  161. package/build/range-control/rail.js.map +1 -1
  162. package/build/range-control/styles/range-control-styles.js +32 -32
  163. package/build/range-control/styles/range-control-styles.js.map +1 -1
  164. package/build/range-control/tooltip.js +1 -1
  165. package/build/range-control/tooltip.js.map +1 -1
  166. package/build/range-control/utils.js.map +1 -1
  167. package/build/resizable-box/resize-tooltip/label.js.map +1 -1
  168. package/build/resizable-box/resize-tooltip/utils.js.map +1 -1
  169. package/build/responsive-wrapper/index.js.map +1 -1
  170. package/build/sandbox/index.js.map +1 -1
  171. package/build/sandbox/index.native.js.map +1 -1
  172. package/build/search-control/index.js +11 -2
  173. package/build/search-control/index.js.map +1 -1
  174. package/build/search-control/index.native.js.map +1 -1
  175. package/build/search-control/types.js.map +1 -1
  176. package/build/select-control/index.js.map +1 -1
  177. package/build/select-control/index.native.js.map +1 -1
  178. package/build/slot-fill/index.js.map +1 -1
  179. package/build/spinner/styles.js.map +1 -1
  180. package/build/style-provider/index.js +1 -0
  181. package/build/style-provider/index.js.map +1 -1
  182. package/build/surface/hook.js.map +1 -1
  183. package/build/surface/styles.js.map +1 -1
  184. package/build/tab-panel/index.js.map +1 -1
  185. package/build/tabs/index.js.map +1 -1
  186. package/build/tabs/styles.js +30 -12
  187. package/build/tabs/styles.js.map +1 -1
  188. package/build/tabs/tab.js +7 -2
  189. package/build/tabs/tab.js.map +1 -1
  190. package/build/tabs/tablist.js +71 -39
  191. package/build/tabs/tablist.js.map +1 -1
  192. package/build/tabs/tabpanel.js.map +1 -1
  193. package/build/tabs/use-track-overflow.js +73 -0
  194. package/build/tabs/use-track-overflow.js.map +1 -0
  195. package/build/text/get-line-height.js.map +1 -1
  196. package/build/text/styles/text-mixins.native.js.map +1 -1
  197. package/build/text/utils.js.map +1 -1
  198. package/build/text-control/index.native.js.map +1 -1
  199. package/build/text-highlight/index.js.map +1 -1
  200. package/build/textarea-control/index.js.map +1 -1
  201. package/build/theme/color-algorithms.js.map +1 -1
  202. package/build/theme/styles.js.map +1 -1
  203. package/build/toggle-control/index.js.map +1 -1
  204. package/build/toggle-control/index.native.js.map +1 -1
  205. package/build/toggle-group-control/toggle-group-control/as-button-group.js +4 -2
  206. package/build/toggle-group-control/toggle-group-control/as-button-group.js.map +1 -1
  207. package/build/toggle-group-control/toggle-group-control/as-radio-group.js +13 -2
  208. package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
  209. package/build/toggle-group-control/toggle-group-control/component.js +15 -8
  210. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  211. package/build/toggle-group-control/toggle-group-control/styles.js +7 -7
  212. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  213. package/build/toggle-group-control/toggle-group-control-option-base/component.js +13 -20
  214. package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
  215. package/build/toggle-group-control/toggle-group-control-option-base/styles.js +8 -9
  216. package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  217. package/build/toggle-group-control/types.js.map +1 -1
  218. package/build/toolbar/toolbar/index.js.map +1 -1
  219. package/build/tools-panel/styles.js.map +1 -1
  220. package/build/unit-control/index.js.map +1 -1
  221. package/build/unit-control/utils.js.map +1 -1
  222. package/build/utils/breakpoint.js.map +1 -1
  223. package/build/utils/colors-values.js.map +1 -1
  224. package/build/utils/config-values.js.map +1 -1
  225. package/build/utils/element-rect.js +22 -13
  226. package/build/utils/element-rect.js.map +1 -1
  227. package/build/utils/font-size.js.map +1 -1
  228. package/build/utils/hooks/use-animated-offset-rect.js +80 -0
  229. package/build/utils/hooks/use-animated-offset-rect.js.map +1 -0
  230. package/build/utils/hooks/use-cx.js.map +1 -1
  231. package/build/utils/hooks/use-on-value-update.js +3 -7
  232. package/build/utils/hooks/use-on-value-update.js.map +1 -1
  233. package/build/utils/math.js +2 -2
  234. package/build/utils/math.js.map +1 -1
  235. package/build/utils/space.js.map +1 -1
  236. package/build/utils/unit-values.js.map +1 -1
  237. package/build/utils/use-responsive-value.js.map +1 -1
  238. package/build-module/alignment-matrix-control/cell.js +1 -2
  239. package/build-module/alignment-matrix-control/cell.js.map +1 -1
  240. package/build-module/alignment-matrix-control/icon.js.map +1 -1
  241. package/build-module/alignment-matrix-control/types.js.map +1 -1
  242. package/build-module/alignment-matrix-control/utils.js.map +1 -1
  243. package/build-module/angle-picker-control/angle-circle.js.map +1 -1
  244. package/build-module/angle-picker-control/index.js +1 -2
  245. package/build-module/angle-picker-control/index.js.map +1 -1
  246. package/build-module/autocomplete/autocompleter-ui.js +4 -6
  247. package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
  248. package/build-module/autocomplete/autocompleter-ui.native.js +1 -2
  249. package/build-module/autocomplete/autocompleter-ui.native.js.map +1 -1
  250. package/build-module/autocomplete/get-default-use-items.js.map +1 -1
  251. package/build-module/autocomplete/index.js +6 -4
  252. package/build-module/autocomplete/index.js.map +1 -1
  253. package/build-module/base-control/hooks.js.map +1 -1
  254. package/build-module/base-control/index.js +1 -2
  255. package/build-module/base-control/index.js.map +1 -1
  256. package/build-module/base-control/index.native.js +1 -2
  257. package/build-module/base-control/index.native.js.map +1 -1
  258. package/build-module/border-box-control/border-box-control/component.js +4 -16
  259. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  260. package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
  261. package/build-module/border-box-control/border-box-control-split-controls/component.js +1 -2
  262. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  263. package/build-module/border-box-control/styles.js.map +1 -1
  264. package/build-module/border-box-control/utils.js.map +1 -1
  265. package/build-module/border-control/border-control/component.js +2 -4
  266. package/build-module/border-control/border-control/component.js.map +1 -1
  267. package/build-module/border-control/border-control/hook.js.map +1 -1
  268. package/build-module/border-control/border-control-dropdown/component.js +3 -17
  269. package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
  270. package/build-module/border-control/styles.js +13 -13
  271. package/build-module/border-control/styles.js.map +1 -1
  272. package/build-module/border-control/types.js.map +1 -1
  273. package/build-module/box-control/all-input-control.js +1 -3
  274. package/build-module/box-control/all-input-control.js.map +1 -1
  275. package/build-module/box-control/axial-input-controls.js +1 -3
  276. package/build-module/box-control/axial-input-controls.js.map +1 -1
  277. package/build-module/box-control/icon.js +1 -2
  278. package/build-module/box-control/icon.js.map +1 -1
  279. package/build-module/box-control/index.js +5 -6
  280. package/build-module/box-control/index.js.map +1 -1
  281. package/build-module/box-control/input-controls.js +1 -3
  282. package/build-module/box-control/input-controls.js.map +1 -1
  283. package/build-module/box-control/types.js.map +1 -1
  284. package/build-module/button/index.js +1 -3
  285. package/build-module/button/index.js.map +1 -1
  286. package/build-module/button/index.native.js +2 -3
  287. package/build-module/button/index.native.js.map +1 -1
  288. package/build-module/card/card/component.js +2 -3
  289. package/build-module/card/card/component.js.map +1 -1
  290. package/build-module/card/styles.js.map +1 -1
  291. package/build-module/checkbox-control/index.js +1 -2
  292. package/build-module/checkbox-control/index.js.map +1 -1
  293. package/build-module/circular-option-picker/circular-option-picker-option.js +1 -2
  294. package/build-module/circular-option-picker/circular-option-picker-option.js.map +1 -1
  295. package/build-module/circular-option-picker/circular-option-picker.js +1 -2
  296. package/build-module/circular-option-picker/circular-option-picker.js.map +1 -1
  297. package/build-module/color-indicator/index.native.js +1 -2
  298. package/build-module/color-indicator/index.native.js.map +1 -1
  299. package/build-module/color-palette/index.js +1 -2
  300. package/build-module/color-palette/index.js.map +1 -1
  301. package/build-module/color-palette/index.native.js +3 -4
  302. package/build-module/color-palette/index.native.js.map +1 -1
  303. package/build-module/color-picker/component.js +1 -2
  304. package/build-module/color-picker/component.js.map +1 -1
  305. package/build-module/color-picker/hsl-input.js +1 -3
  306. package/build-module/color-picker/hsl-input.js.map +1 -1
  307. package/build-module/color-picker/hsv-color-picker.native.js +1 -2
  308. package/build-module/color-picker/hsv-color-picker.native.js.map +1 -1
  309. package/build-module/color-picker/hue-picker.native.js +1 -2
  310. package/build-module/color-picker/hue-picker.native.js.map +1 -1
  311. package/build-module/color-picker/index.native.js +1 -3
  312. package/build-module/color-picker/index.native.js.map +1 -1
  313. package/build-module/color-picker/input-with-slider.js +1 -2
  314. package/build-module/color-picker/input-with-slider.js.map +1 -1
  315. package/build-module/color-picker/rgb-input.js +1 -3
  316. package/build-module/color-picker/rgb-input.js.map +1 -1
  317. package/build-module/color-picker/saturation-picker.native.js +1 -2
  318. package/build-module/color-picker/saturation-picker.native.js.map +1 -1
  319. package/build-module/color-picker/styles.js.map +1 -1
  320. package/build-module/combobox-control/index.js +2 -3
  321. package/build-module/combobox-control/index.js.map +1 -1
  322. package/build-module/composite/legacy/index.js.map +1 -1
  323. package/build-module/confirm-dialog/component.js +1 -3
  324. package/build-module/confirm-dialog/component.js.map +1 -1
  325. package/build-module/context/context-connect.js +1 -0
  326. package/build-module/context/context-connect.js.map +1 -1
  327. package/build-module/context/context-system-provider.js +1 -1
  328. package/build-module/context/context-system-provider.js.map +1 -1
  329. package/build-module/context/get-styled-class-name-from-key.js.map +1 -1
  330. package/build-module/custom-gradient-picker/gradient-bar/control-points.js +1 -3
  331. package/build-module/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
  332. package/build-module/custom-gradient-picker/gradient-bar/index.js +1 -2
  333. package/build-module/custom-gradient-picker/gradient-bar/index.js.map +1 -1
  334. package/build-module/custom-gradient-picker/index.js +1 -2
  335. package/build-module/custom-gradient-picker/index.js.map +1 -1
  336. package/build-module/custom-gradient-picker/index.native.js +1 -3
  337. package/build-module/custom-gradient-picker/index.native.js.map +1 -1
  338. package/build-module/custom-gradient-picker/serializer.js.map +1 -1
  339. package/build-module/custom-gradient-picker/utils.js.map +1 -1
  340. package/build-module/custom-select-control/index.js +1 -3
  341. package/build-module/custom-select-control/index.js.map +1 -1
  342. package/build-module/custom-select-control-v2/custom-select.js +1 -2
  343. package/build-module/custom-select-control-v2/custom-select.js.map +1 -1
  344. package/build-module/custom-select-control-v2/item.js +1 -2
  345. package/build-module/custom-select-control-v2/item.js.map +1 -1
  346. package/build-module/custom-select-control-v2/styles.js.map +1 -1
  347. package/build-module/dashicon/index.js.map +1 -1
  348. package/build-module/date-time/date/index.js +1 -2
  349. package/build-module/date-time/date/index.js.map +1 -1
  350. package/build-module/date-time/date/styles.js.map +1 -1
  351. package/build-module/date-time/date-time/index.js +1 -3
  352. package/build-module/date-time/date-time/index.js.map +1 -1
  353. package/build-module/date-time/time/index.js +1 -2
  354. package/build-module/date-time/time/index.js.map +1 -1
  355. package/build-module/date-time/time/time-input/index.js +1 -2
  356. package/build-module/date-time/time/time-input/index.js.map +1 -1
  357. package/build-module/date-time/time/timezone.js.map +1 -1
  358. package/build-module/dimension-control/index.js +1 -3
  359. package/build-module/dimension-control/index.js.map +1 -1
  360. package/build-module/draggable/index.js +1 -3
  361. package/build-module/draggable/index.js.map +1 -1
  362. package/build-module/drop-zone/index.js +1 -2
  363. package/build-module/drop-zone/index.js.map +1 -1
  364. package/build-module/dropdown/index.js +1 -2
  365. package/build-module/dropdown/index.js.map +1 -1
  366. package/build-module/dropdown/index.native.js +1 -2
  367. package/build-module/dropdown/index.native.js.map +1 -1
  368. package/build-module/dropdown-menu/index.js +1 -2
  369. package/build-module/dropdown-menu/index.js.map +1 -1
  370. package/build-module/dropdown-menu/index.native.js +1 -2
  371. package/build-module/dropdown-menu/index.native.js.map +1 -1
  372. package/build-module/dropdown-menu-v2/checkbox-item.js +1 -2
  373. package/build-module/dropdown-menu-v2/checkbox-item.js.map +1 -1
  374. package/build-module/dropdown-menu-v2/index.js +1 -3
  375. package/build-module/dropdown-menu-v2/index.js.map +1 -1
  376. package/build-module/dropdown-menu-v2/item.js +1 -2
  377. package/build-module/dropdown-menu-v2/item.js.map +1 -1
  378. package/build-module/dropdown-menu-v2/radio-item.js +1 -2
  379. package/build-module/dropdown-menu-v2/radio-item.js.map +1 -1
  380. package/build-module/dropdown-menu-v2/styles.js.map +1 -1
  381. package/build-module/duotone-picker/color-list-picker/index.js +1 -3
  382. package/build-module/duotone-picker/color-list-picker/index.js.map +1 -1
  383. package/build-module/duotone-picker/duotone-picker.js +1 -2
  384. package/build-module/duotone-picker/duotone-picker.js.map +1 -1
  385. package/build-module/duotone-picker/utils.js.map +1 -1
  386. package/build-module/elevation/hook.js.map +1 -1
  387. package/build-module/external-link/index.js +21 -25
  388. package/build-module/external-link/index.js.map +1 -1
  389. package/build-module/external-link/index.native.js +1 -2
  390. package/build-module/external-link/index.native.js.map +1 -1
  391. package/build-module/focal-point-picker/controls.js +1 -2
  392. package/build-module/focal-point-picker/controls.js.map +1 -1
  393. package/build-module/focal-point-picker/focal-point.native.js +1 -2
  394. package/build-module/focal-point-picker/focal-point.native.js.map +1 -1
  395. package/build-module/focal-point-picker/grid.js +1 -2
  396. package/build-module/focal-point-picker/grid.js.map +1 -1
  397. package/build-module/focal-point-picker/index.js +1 -2
  398. package/build-module/focal-point-picker/index.js.map +1 -1
  399. package/build-module/focal-point-picker/index.native.js +1 -2
  400. package/build-module/focal-point-picker/index.native.js.map +1 -1
  401. package/build-module/focal-point-picker/styles/focal-point-style.js.map +1 -1
  402. package/build-module/focal-point-picker/tooltip/index.native.js +1 -2
  403. package/build-module/focal-point-picker/tooltip/index.native.js.map +1 -1
  404. package/build-module/font-size-picker/index.js +1 -2
  405. package/build-module/font-size-picker/index.js.map +1 -1
  406. package/build-module/font-size-picker/index.native.js +1 -3
  407. package/build-module/font-size-picker/index.native.js.map +1 -1
  408. package/build-module/form-file-upload/index.js +1 -2
  409. package/build-module/form-file-upload/index.js.map +1 -1
  410. package/build-module/form-toggle/index.js +1 -2
  411. package/build-module/form-toggle/index.js.map +1 -1
  412. package/build-module/form-token-field/index.js +3 -3
  413. package/build-module/form-token-field/index.js.map +1 -1
  414. package/build-module/form-token-field/suggestions-list.js +1 -2
  415. package/build-module/form-token-field/suggestions-list.js.map +1 -1
  416. package/build-module/form-token-field/token-input.js.map +1 -1
  417. package/build-module/form-token-field/token.js +2 -3
  418. package/build-module/form-token-field/token.js.map +1 -1
  419. package/build-module/gradient-picker/index.js +1 -2
  420. package/build-module/gradient-picker/index.js.map +1 -1
  421. package/build-module/grid/hook.js.map +1 -1
  422. package/build-module/guide/index.js +1 -2
  423. package/build-module/guide/index.js.map +1 -1
  424. package/build-module/guide/page-control.js +1 -1
  425. package/build-module/guide/page-control.js.map +1 -1
  426. package/build-module/h-stack/hook.js.map +1 -1
  427. package/build-module/heading/hook.js.map +1 -1
  428. package/build-module/higher-order/with-fallback-styles/index.js +3 -4
  429. package/build-module/higher-order/with-fallback-styles/index.js.map +1 -1
  430. package/build-module/index.js +14 -4
  431. package/build-module/index.js.map +1 -1
  432. package/build-module/input-control/index.js.map +1 -1
  433. package/build-module/input-control/input-base.js +1 -2
  434. package/build-module/input-control/input-base.js.map +1 -1
  435. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  436. package/build-module/item-group/styles.js.map +1 -1
  437. package/build-module/keyboard-shortcuts/index.js +1 -3
  438. package/build-module/keyboard-shortcuts/index.js.map +1 -1
  439. package/build-module/menu-group/index.js +1 -2
  440. package/build-module/menu-group/index.js.map +1 -1
  441. package/build-module/menu-item/index.js +1 -2
  442. package/build-module/menu-item/index.js.map +1 -1
  443. package/build-module/menu-items-choice/index.js +1 -2
  444. package/build-module/menu-items-choice/index.js.map +1 -1
  445. package/build-module/mobile/badge/index.native.js +1 -3
  446. package/build-module/mobile/badge/index.native.js.map +1 -1
  447. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +1 -2
  448. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  449. package/build-module/mobile/bottom-sheet/cell.native.js +5 -6
  450. package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
  451. package/build-module/mobile/bottom-sheet/color-cell.native.js +1 -2
  452. package/build-module/mobile/bottom-sheet/color-cell.native.js.map +1 -1
  453. package/build-module/mobile/bottom-sheet/index.native.js +1 -3
  454. package/build-module/mobile/bottom-sheet/index.native.js.map +1 -1
  455. package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js +1 -2
  456. package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js.map +1 -1
  457. package/build-module/mobile/bottom-sheet/nav-bar/back-button.native.js +1 -2
  458. package/build-module/mobile/bottom-sheet/nav-bar/back-button.native.js.map +1 -1
  459. package/build-module/mobile/bottom-sheet/range-cell.native.js +2 -3
  460. package/build-module/mobile/bottom-sheet/range-cell.native.js.map +1 -1
  461. package/build-module/mobile/bottom-sheet/range-text-input.native.js +1 -2
  462. package/build-module/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
  463. package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js +2 -3
  464. package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
  465. package/build-module/mobile/bottom-sheet/stepper-cell/stepper.android.js +1 -2
  466. package/build-module/mobile/bottom-sheet/stepper-cell/stepper.android.js.map +1 -1
  467. package/build-module/mobile/bottom-sheet/stepper-cell/stepper.ios.js +1 -2
  468. package/build-module/mobile/bottom-sheet/stepper-cell/stepper.ios.js.map +1 -1
  469. package/build-module/mobile/bottom-sheet/sub-sheet/index.native.js +1 -3
  470. package/build-module/mobile/bottom-sheet/sub-sheet/index.native.js.map +1 -1
  471. package/build-module/mobile/bottom-sheet/switch-cell.native.js +4 -4
  472. package/build-module/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
  473. package/build-module/mobile/bottom-sheet-select-control/index.native.js +1 -3
  474. package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  475. package/build-module/mobile/bottom-sheet-text-control/index.native.js +1 -3
  476. package/build-module/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
  477. package/build-module/mobile/color-settings/gradient-picker-screen.native.js +1 -2
  478. package/build-module/mobile/color-settings/gradient-picker-screen.native.js.map +1 -1
  479. package/build-module/mobile/color-settings/index.native.js +1 -2
  480. package/build-module/mobile/color-settings/index.native.js.map +1 -1
  481. package/build-module/mobile/color-settings/palette.screen.native.js +1 -3
  482. package/build-module/mobile/color-settings/palette.screen.native.js.map +1 -1
  483. package/build-module/mobile/cycle-select-control/index.native.js.map +1 -1
  484. package/build-module/mobile/focal-point-settings-panel/index.native.js +1 -2
  485. package/build-module/mobile/focal-point-settings-panel/index.native.js.map +1 -1
  486. package/build-module/mobile/gradient/index.native.js +1 -2
  487. package/build-module/mobile/gradient/index.native.js.map +1 -1
  488. package/build-module/mobile/html-text-input/index.native.js +1 -2
  489. package/build-module/mobile/html-text-input/index.native.js.map +1 -1
  490. package/build-module/mobile/image/icon-retry.native.js +1 -2
  491. package/build-module/mobile/image/icon-retry.native.js.map +1 -1
  492. package/build-module/mobile/image/image-editing-button.native.js +1 -2
  493. package/build-module/mobile/image/image-editing-button.native.js.map +1 -1
  494. package/build-module/mobile/image/index.native.js +1 -3
  495. package/build-module/mobile/image/index.native.js.map +1 -1
  496. package/build-module/mobile/keyboard-avoiding-view/index.ios.js +1 -2
  497. package/build-module/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
  498. package/build-module/mobile/link-picker/index.native.js +2 -3
  499. package/build-module/mobile/link-picker/index.native.js.map +1 -1
  500. package/build-module/mobile/link-picker/link-picker-results.native.js.map +1 -1
  501. package/build-module/mobile/link-settings/index.native.js +1 -3
  502. package/build-module/mobile/link-settings/index.native.js.map +1 -1
  503. package/build-module/mobile/link-settings/link-settings-navigation.native.js +1 -2
  504. package/build-module/mobile/link-settings/link-settings-navigation.native.js.map +1 -1
  505. package/build-module/mobile/picker/index.android.js +1 -2
  506. package/build-module/mobile/picker/index.android.js.map +1 -1
  507. package/build-module/mobile/segmented-control/index.native.js +1 -2
  508. package/build-module/mobile/segmented-control/index.native.js.map +1 -1
  509. package/build-module/mobile/utils/get-px-from-css-unit.native.js.map +1 -1
  510. package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
  511. package/build-module/modal/aria-helper.js +2 -1
  512. package/build-module/modal/aria-helper.js.map +1 -1
  513. package/build-module/modal/index.js +3 -4
  514. package/build-module/modal/index.js.map +1 -1
  515. package/build-module/modal/use-modal-exit-animation.js.map +1 -1
  516. package/build-module/navigation/back-button/index.js +1 -2
  517. package/build-module/navigation/back-button/index.js.map +1 -1
  518. package/build-module/navigation/group/index.js +1 -2
  519. package/build-module/navigation/group/index.js.map +1 -1
  520. package/build-module/navigation/item/base-content.js +1 -3
  521. package/build-module/navigation/item/base-content.js.map +1 -1
  522. package/build-module/navigation/item/base.js.map +1 -1
  523. package/build-module/navigation/item/index.js +1 -2
  524. package/build-module/navigation/item/index.js.map +1 -1
  525. package/build-module/navigation/menu/index.js +1 -2
  526. package/build-module/navigation/menu/index.js.map +1 -1
  527. package/build-module/navigation/menu/menu-title-search.js +2 -2
  528. package/build-module/navigation/menu/menu-title-search.js.map +1 -1
  529. package/build-module/navigation/menu/menu-title.js +1 -2
  530. package/build-module/navigation/menu/menu-title.js.map +1 -1
  531. package/build-module/navigation/menu/search-no-results-found.js +1 -2
  532. package/build-module/navigation/menu/search-no-results-found.js.map +1 -1
  533. package/build-module/navigation/styles/navigation-styles.js.map +1 -1
  534. package/build-module/navigator/index.js +130 -5
  535. package/build-module/navigator/index.js.map +1 -1
  536. package/build-module/navigator/legacy.js +167 -0
  537. package/build-module/navigator/legacy.js.map +1 -0
  538. package/build-module/navigator/{navigator-provider → navigator}/component.js +4 -39
  539. package/build-module/navigator/navigator/component.js.map +1 -0
  540. package/build-module/navigator/navigator-back-button/component.js +1 -37
  541. package/build-module/navigator/navigator-back-button/component.js.map +1 -1
  542. package/build-module/navigator/navigator-back-button/hook.js +1 -1
  543. package/build-module/navigator/navigator-back-button/hook.js.map +1 -1
  544. package/build-module/navigator/navigator-button/component.js +1 -36
  545. package/build-module/navigator/navigator-button/component.js.map +1 -1
  546. package/build-module/navigator/navigator-button/hook.js +1 -1
  547. package/build-module/navigator/navigator-button/hook.js.map +1 -1
  548. package/build-module/navigator/navigator-screen/component.js +39 -61
  549. package/build-module/navigator/navigator-screen/component.js.map +1 -1
  550. package/build-module/navigator/navigator-screen/use-screen-animate-presence.js +106 -0
  551. package/build-module/navigator/navigator-screen/use-screen-animate-presence.js.map +1 -0
  552. package/build-module/navigator/navigator-to-parent-button/component.js +2 -6
  553. package/build-module/navigator/navigator-to-parent-button/component.js.map +1 -1
  554. package/build-module/navigator/styles.js +77 -33
  555. package/build-module/navigator/styles.js.map +1 -1
  556. package/build-module/navigator/types.js.map +1 -1
  557. package/build-module/navigator/use-navigator.js +4 -1
  558. package/build-module/navigator/use-navigator.js.map +1 -1
  559. package/build-module/notice/index.js +1 -2
  560. package/build-module/notice/index.js.map +1 -1
  561. package/build-module/notice/index.native.js +1 -3
  562. package/build-module/notice/index.native.js.map +1 -1
  563. package/build-module/number-control/index.js +1 -3
  564. package/build-module/number-control/index.js.map +1 -1
  565. package/build-module/number-control/styles/number-control-styles.js.map +1 -1
  566. package/build-module/palette-edit/index.js +2 -4
  567. package/build-module/palette-edit/index.js.map +1 -1
  568. package/build-module/panel/actions.native.js +1 -2
  569. package/build-module/panel/actions.native.js.map +1 -1
  570. package/build-module/panel/body.js +1 -2
  571. package/build-module/panel/body.js.map +1 -1
  572. package/build-module/panel/body.native.js +1 -2
  573. package/build-module/panel/body.native.js.map +1 -1
  574. package/build-module/panel/header.js +1 -2
  575. package/build-module/panel/header.js.map +1 -1
  576. package/build-module/panel/index.js +1 -2
  577. package/build-module/panel/index.js.map +1 -1
  578. package/build-module/placeholder/index.js +1 -2
  579. package/build-module/placeholder/index.js.map +1 -1
  580. package/build-module/popover/index.js +2 -4
  581. package/build-module/popover/index.js.map +1 -1
  582. package/build-module/popover/overlay-middlewares.js.map +1 -1
  583. package/build-module/popover/utils.js.map +1 -1
  584. package/build-module/progress-bar/index.js +1 -2
  585. package/build-module/progress-bar/index.js.map +1 -1
  586. package/build-module/progress-bar/styles.js.map +1 -1
  587. package/build-module/query-controls/index.js.map +1 -1
  588. package/build-module/query-controls/index.native.js +1 -3
  589. package/build-module/query-controls/index.native.js.map +1 -1
  590. package/build-module/radio-control/index.js +1 -2
  591. package/build-module/radio-control/index.js.map +1 -1
  592. package/build-module/radio-control/index.native.js +1 -2
  593. package/build-module/radio-control/index.native.js.map +1 -1
  594. package/build-module/range-control/index.js +1 -2
  595. package/build-module/range-control/index.js.map +1 -1
  596. package/build-module/range-control/index.native.js.map +1 -1
  597. package/build-module/range-control/mark.js +1 -3
  598. package/build-module/range-control/mark.js.map +1 -1
  599. package/build-module/range-control/rail.js +1 -3
  600. package/build-module/range-control/rail.js.map +1 -1
  601. package/build-module/range-control/styles/range-control-styles.js +32 -32
  602. package/build-module/range-control/styles/range-control-styles.js.map +1 -1
  603. package/build-module/range-control/tooltip.js +1 -1
  604. package/build-module/range-control/tooltip.js.map +1 -1
  605. package/build-module/range-control/utils.js.map +1 -1
  606. package/build-module/resizable-box/index.js +1 -2
  607. package/build-module/resizable-box/index.js.map +1 -1
  608. package/build-module/resizable-box/resize-tooltip/index.js +1 -2
  609. package/build-module/resizable-box/resize-tooltip/index.js.map +1 -1
  610. package/build-module/resizable-box/resize-tooltip/label.js.map +1 -1
  611. package/build-module/resizable-box/resize-tooltip/utils.js.map +1 -1
  612. package/build-module/responsive-wrapper/index.js.map +1 -1
  613. package/build-module/sandbox/index.js +1 -2
  614. package/build-module/sandbox/index.js.map +1 -1
  615. package/build-module/sandbox/index.native.js +1 -2
  616. package/build-module/sandbox/index.native.js.map +1 -1
  617. package/build-module/search-control/index.js +11 -2
  618. package/build-module/search-control/index.js.map +1 -1
  619. package/build-module/search-control/index.native.js +1 -2
  620. package/build-module/search-control/index.native.js.map +1 -1
  621. package/build-module/search-control/types.js.map +1 -1
  622. package/build-module/select-control/index.js.map +1 -1
  623. package/build-module/select-control/index.native.js.map +1 -1
  624. package/build-module/slot-fill/index.js +1 -3
  625. package/build-module/slot-fill/index.js.map +1 -1
  626. package/build-module/slot-fill/slot.js +1 -2
  627. package/build-module/slot-fill/slot.js.map +1 -1
  628. package/build-module/snackbar/index.js +1 -2
  629. package/build-module/snackbar/index.js.map +1 -1
  630. package/build-module/snackbar/list.js +1 -2
  631. package/build-module/snackbar/list.js.map +1 -1
  632. package/build-module/spinner/index.js +1 -2
  633. package/build-module/spinner/index.js.map +1 -1
  634. package/build-module/spinner/styles.js.map +1 -1
  635. package/build-module/style-provider/index.js +1 -0
  636. package/build-module/style-provider/index.js.map +1 -1
  637. package/build-module/surface/hook.js.map +1 -1
  638. package/build-module/surface/styles.js.map +1 -1
  639. package/build-module/tab-panel/index.js +1 -2
  640. package/build-module/tab-panel/index.js.map +1 -1
  641. package/build-module/tabs/index.js.map +1 -1
  642. package/build-module/tabs/styles.js +28 -6
  643. package/build-module/tabs/styles.js.map +1 -1
  644. package/build-module/tabs/tab.js +9 -4
  645. package/build-module/tabs/tab.js.map +1 -1
  646. package/build-module/tabs/tablist.js +72 -40
  647. package/build-module/tabs/tablist.js.map +1 -1
  648. package/build-module/tabs/tabpanel.js.map +1 -1
  649. package/build-module/tabs/use-track-overflow.js +67 -0
  650. package/build-module/tabs/use-track-overflow.js.map +1 -0
  651. package/build-module/text/get-line-height.js.map +1 -1
  652. package/build-module/text/styles/text-mixins.native.js.map +1 -1
  653. package/build-module/text/utils.js.map +1 -1
  654. package/build-module/text-control/index.native.js.map +1 -1
  655. package/build-module/text-highlight/index.js +1 -2
  656. package/build-module/text-highlight/index.js.map +1 -1
  657. package/build-module/textarea-control/index.js.map +1 -1
  658. package/build-module/theme/color-algorithms.js.map +1 -1
  659. package/build-module/theme/styles.js.map +1 -1
  660. package/build-module/tip/index.js +1 -2
  661. package/build-module/tip/index.js.map +1 -1
  662. package/build-module/toggle-control/index.js +1 -2
  663. package/build-module/toggle-control/index.js.map +1 -1
  664. package/build-module/toggle-control/index.native.js.map +1 -1
  665. package/build-module/toggle-group-control/toggle-group-control/as-button-group.js +4 -2
  666. package/build-module/toggle-group-control/toggle-group-control/as-button-group.js.map +1 -1
  667. package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js +14 -3
  668. package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
  669. package/build-module/toggle-group-control/toggle-group-control/component.js +17 -12
  670. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  671. package/build-module/toggle-group-control/toggle-group-control/styles.js +7 -7
  672. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  673. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +16 -25
  674. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
  675. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +7 -8
  676. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  677. package/build-module/toggle-group-control/types.js.map +1 -1
  678. package/build-module/toolbar/toolbar/index.js.map +1 -1
  679. package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js +2 -2
  680. package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js.map +1 -1
  681. package/build-module/toolbar/toolbar-group/index.js +1 -2
  682. package/build-module/toolbar/toolbar-group/index.js.map +1 -1
  683. package/build-module/tools-panel/styles.js.map +1 -1
  684. package/build-module/tools-panel/tools-panel/component.js +1 -2
  685. package/build-module/tools-panel/tools-panel/component.js.map +1 -1
  686. package/build-module/tools-panel/tools-panel-header/component.js +1 -3
  687. package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
  688. package/build-module/tooltip/index.js +1 -2
  689. package/build-module/tooltip/index.js.map +1 -1
  690. package/build-module/tooltip/index.native.js +1 -3
  691. package/build-module/tooltip/index.native.js.map +1 -1
  692. package/build-module/tree-grid/cell.js +1 -2
  693. package/build-module/tree-grid/cell.js.map +1 -1
  694. package/build-module/unit-control/index.js.map +1 -1
  695. package/build-module/unit-control/index.native.js +1 -3
  696. package/build-module/unit-control/index.native.js.map +1 -1
  697. package/build-module/unit-control/utils.js.map +1 -1
  698. package/build-module/utils/breakpoint.js.map +1 -1
  699. package/build-module/utils/colors-values.js.map +1 -1
  700. package/build-module/utils/config-values.js.map +1 -1
  701. package/build-module/utils/element-rect.js +22 -12
  702. package/build-module/utils/element-rect.js.map +1 -1
  703. package/build-module/utils/font-size.js.map +1 -1
  704. package/build-module/utils/hooks/use-animated-offset-rect.js +74 -0
  705. package/build-module/utils/hooks/use-animated-offset-rect.js.map +1 -0
  706. package/build-module/utils/hooks/use-cx.js.map +1 -1
  707. package/build-module/utils/hooks/use-on-value-update.js +3 -6
  708. package/build-module/utils/hooks/use-on-value-update.js.map +1 -1
  709. package/build-module/utils/math.js +2 -2
  710. package/build-module/utils/math.js.map +1 -1
  711. package/build-module/utils/space.js.map +1 -1
  712. package/build-module/utils/unit-values.js.map +1 -1
  713. package/build-module/utils/use-responsive-value.js.map +1 -1
  714. package/build-style/style-rtl.css +30 -14
  715. package/build-style/style.css +30 -14
  716. package/build-types/alignment-matrix-control/types.d.ts +2 -0
  717. package/build-types/alignment-matrix-control/types.d.ts.map +1 -1
  718. package/build-types/autocomplete/index.d.ts.map +1 -1
  719. package/build-types/border-box-control/border-box-control/component.d.ts +5 -15
  720. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  721. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +2 -1
  722. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
  723. package/build-types/border-box-control/stories/index.story.d.ts +3 -2
  724. package/build-types/border-box-control/stories/index.story.d.ts.map +1 -1
  725. package/build-types/border-control/border-control/component.d.ts +3 -2
  726. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  727. package/build-types/border-control/border-control-dropdown/component.d.ts +2 -1
  728. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
  729. package/build-types/border-control/border-control-style-picker/component.d.ts.map +1 -1
  730. package/build-types/border-control/stories/index.story.d.ts +15 -30
  731. package/build-types/border-control/stories/index.story.d.ts.map +1 -1
  732. package/build-types/border-control/styles.d.ts.map +1 -1
  733. package/build-types/border-control/types.d.ts +12 -7
  734. package/build-types/border-control/types.d.ts.map +1 -1
  735. package/build-types/box-control/index.d.ts +4 -4
  736. package/build-types/box-control/stories/index.story.d.ts.map +1 -1
  737. package/build-types/box-control/types.d.ts +3 -3
  738. package/build-types/composite/stories/index.story.d.ts +22 -0
  739. package/build-types/composite/stories/index.story.d.ts.map +1 -1
  740. package/build-types/dropdown/stories/index.story.d.ts.map +1 -1
  741. package/build-types/dropdown-menu/stories/index.story.d.ts.map +1 -1
  742. package/build-types/index.d.ts +23 -4
  743. package/build-types/index.d.ts.map +1 -1
  744. package/build-types/modal/aria-helper.d.ts.map +1 -1
  745. package/build-types/navigator/index.d.ts +171 -5
  746. package/build-types/navigator/index.d.ts.map +1 -1
  747. package/build-types/navigator/legacy.d.ts +226 -0
  748. package/build-types/navigator/legacy.d.ts.map +1 -0
  749. package/build-types/navigator/navigator/component.d.ts +3 -0
  750. package/build-types/navigator/navigator/component.d.ts.map +1 -0
  751. package/build-types/navigator/navigator-back-button/component.d.ts +0 -35
  752. package/build-types/navigator/navigator-back-button/component.d.ts.map +1 -1
  753. package/build-types/navigator/navigator-button/component.d.ts +0 -34
  754. package/build-types/navigator/navigator-button/component.d.ts.map +1 -1
  755. package/build-types/navigator/navigator-screen/component.d.ts +0 -35
  756. package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
  757. package/build-types/navigator/navigator-screen/use-screen-animate-presence.d.ts +16 -0
  758. package/build-types/navigator/navigator-screen/use-screen-animate-presence.d.ts.map +1 -0
  759. package/build-types/navigator/navigator-to-parent-button/component.d.ts +0 -4
  760. package/build-types/navigator/navigator-to-parent-button/component.d.ts.map +1 -1
  761. package/build-types/navigator/stories/index.story.d.ts +5 -5
  762. package/build-types/navigator/stories/index.story.d.ts.map +1 -1
  763. package/build-types/navigator/styles.d.ts +20 -7
  764. package/build-types/navigator/styles.d.ts.map +1 -1
  765. package/build-types/navigator/types.d.ts +19 -1
  766. package/build-types/navigator/types.d.ts.map +1 -1
  767. package/build-types/navigator/use-navigator.d.ts +4 -1
  768. package/build-types/navigator/use-navigator.d.ts.map +1 -1
  769. package/build-types/range-control/styles/range-control-styles.d.ts +1 -1
  770. package/build-types/range-control/styles/range-control-styles.d.ts.map +1 -1
  771. package/build-types/search-control/index.d.ts.map +1 -1
  772. package/build-types/search-control/stories/index.story.d.ts +0 -8
  773. package/build-types/search-control/stories/index.story.d.ts.map +1 -1
  774. package/build-types/search-control/types.d.ts +3 -0
  775. package/build-types/search-control/types.d.ts.map +1 -1
  776. package/build-types/select-control/stories/index.story.d.ts +7 -0
  777. package/build-types/select-control/stories/index.story.d.ts.map +1 -1
  778. package/build-types/tabs/stories/index.story.d.ts +2 -1
  779. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  780. package/build-types/tabs/styles.d.ts +7 -0
  781. package/build-types/tabs/styles.d.ts.map +1 -1
  782. package/build-types/tabs/tab.d.ts.map +1 -1
  783. package/build-types/tabs/tablist.d.ts.map +1 -1
  784. package/build-types/tabs/use-track-overflow.d.ts +17 -0
  785. package/build-types/tabs/use-track-overflow.d.ts.map +1 -0
  786. package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts +2 -2
  787. package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts.map +1 -1
  788. package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts +2 -2
  789. package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map +1 -1
  790. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  791. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  792. package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map +1 -1
  793. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts +0 -1
  794. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -1
  795. package/build-types/toggle-group-control/types.d.ts +2 -1
  796. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  797. package/build-types/utils/element-rect.d.ts +8 -0
  798. package/build-types/utils/element-rect.d.ts.map +1 -1
  799. package/build-types/utils/hooks/use-animated-offset-rect.d.ts +62 -0
  800. package/build-types/utils/hooks/use-animated-offset-rect.d.ts.map +1 -0
  801. package/build-types/utils/hooks/use-on-value-update.d.ts.map +1 -1
  802. package/package.json +20 -20
  803. package/schemas/docs-manifest.json +38 -0
  804. package/src/alignment-matrix-control/README.md +46 -36
  805. package/src/alignment-matrix-control/docs-manifest.json +12 -0
  806. package/src/alignment-matrix-control/types.ts +2 -0
  807. package/src/angle-picker-control/README.md +36 -23
  808. package/src/angle-picker-control/docs-manifest.json +5 -0
  809. package/src/autocomplete/index.tsx +4 -1
  810. package/src/border-box-control/border-box-control/README.md +22 -26
  811. package/src/border-box-control/border-box-control/component.tsx +3 -14
  812. package/src/border-box-control/stories/index.story.tsx +2 -1
  813. package/src/border-control/border-control/README.md +26 -36
  814. package/src/border-control/border-control/component.tsx +1 -2
  815. package/src/border-control/border-control-dropdown/component.tsx +1 -15
  816. package/src/border-control/stories/index.story.tsx +4 -10
  817. package/src/border-control/styles.ts +0 -1
  818. package/src/border-control/test/index.js +2 -15
  819. package/src/border-control/types.ts +12 -7
  820. package/src/box-control/README.md +9 -12
  821. package/src/box-control/index.tsx +4 -4
  822. package/src/box-control/stories/index.story.tsx +1 -1
  823. package/src/box-control/types.ts +3 -3
  824. package/src/button/style.scss +5 -1
  825. package/src/composite/legacy/test/index.tsx +22 -21
  826. package/src/composite/stories/index.story.tsx +42 -0
  827. package/src/composite/test/index.tsx +629 -38
  828. package/src/dropdown/stories/index.story.tsx +1 -0
  829. package/src/dropdown/style.scss +10 -13
  830. package/src/dropdown-menu/stories/index.story.tsx +3 -0
  831. package/src/index.ts +19 -1
  832. package/src/menu-group/style.scss +4 -1
  833. package/src/menu-items-choice/style.scss +2 -0
  834. package/src/modal/aria-helper.ts +1 -0
  835. package/src/navigator/README.md +176 -0
  836. package/src/navigator/index.tsx +131 -0
  837. package/src/navigator/legacy.ts +169 -0
  838. package/src/navigator/{navigator-provider → navigator}/component.tsx +6 -44
  839. package/src/navigator/navigator-back-button/component.tsx +1 -37
  840. package/src/navigator/navigator-back-button/hook.ts +1 -1
  841. package/src/navigator/navigator-button/component.tsx +1 -36
  842. package/src/navigator/navigator-button/hook.ts +1 -1
  843. package/src/navigator/navigator-screen/component.tsx +48 -76
  844. package/src/navigator/navigator-screen/use-screen-animate-presence.ts +177 -0
  845. package/src/navigator/navigator-to-parent-button/component.tsx +2 -7
  846. package/src/navigator/stories/index.story.tsx +55 -54
  847. package/src/navigator/styles.ts +112 -41
  848. package/src/navigator/test/index.tsx +47 -47
  849. package/src/navigator/types.ts +19 -1
  850. package/src/navigator/use-navigator.ts +4 -1
  851. package/src/range-control/styles/range-control-styles.ts +19 -10
  852. package/src/range-control/tooltip.tsx +1 -1
  853. package/src/search-control/README.md +2 -0
  854. package/src/search-control/index.tsx +9 -2
  855. package/src/search-control/stories/index.story.tsx +0 -15
  856. package/src/search-control/test/index.tsx +4 -1
  857. package/src/search-control/types.ts +3 -0
  858. package/src/select-control/stories/index.story.tsx +14 -1
  859. package/src/tabs/stories/index.story.tsx +106 -0
  860. package/src/tabs/styles.ts +161 -58
  861. package/src/tabs/tab.tsx +8 -2
  862. package/src/tabs/tablist.tsx +72 -39
  863. package/src/tabs/use-track-overflow.ts +76 -0
  864. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +208 -44
  865. package/src/toggle-group-control/test/index.tsx +26 -0
  866. package/src/toggle-group-control/toggle-group-control/as-button-group.tsx +18 -10
  867. package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +30 -12
  868. package/src/toggle-group-control/toggle-group-control/component.tsx +19 -6
  869. package/src/toggle-group-control/toggle-group-control/styles.ts +41 -0
  870. package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +15 -28
  871. package/src/toggle-group-control/toggle-group-control-option-base/styles.ts +0 -11
  872. package/src/toggle-group-control/types.ts +3 -1
  873. package/src/tools-panel/tools-panel/README.md +10 -10
  874. package/src/utils/element-rect.ts +32 -15
  875. package/src/utils/hooks/use-animated-offset-rect.ts +107 -0
  876. package/src/utils/hooks/use-on-value-update.ts +3 -6
  877. package/tsconfig.tsbuildinfo +1 -1
  878. package/build/navigator/navigator-provider/component.js.map +0 -1
  879. package/build/utils/hooks/use-event.js +0 -41
  880. package/build/utils/hooks/use-event.js.map +0 -1
  881. package/build-module/navigator/navigator-provider/component.js.map +0 -1
  882. package/build-module/utils/hooks/use-event.js +0 -35
  883. package/build-module/utils/hooks/use-event.js.map +0 -1
  884. package/build-types/navigator/navigator-provider/component.d.ts +0 -37
  885. package/build-types/navigator/navigator-provider/component.d.ts.map +0 -1
  886. package/build-types/utils/hooks/use-event.d.ts +0 -20
  887. package/build-types/utils/hooks/use-event.d.ts.map +0 -1
  888. package/src/navigator/index.ts +0 -6
  889. package/src/navigator/navigator-back-button/README.md +0 -15
  890. package/src/navigator/navigator-button/README.md +0 -38
  891. package/src/navigator/navigator-provider/README.md +0 -94
  892. package/src/navigator/navigator-screen/README.md +0 -33
  893. package/src/navigator/navigator-to-parent-button/README.md +0 -17
  894. package/src/utils/hooks/use-event.ts +0 -38
@@ -1 +1 @@
1
- {"version":3,"names":["useLayoutEffect","useRef","useState","useResizeObserver","useEvent","NULL_ELEMENT_OFFSET_RECT","top","right","bottom","left","width","height","getElementOffsetRect","element","_element$offsetParent","rect","getBoundingClientRect","offsetParentRect","offsetParent","computedWidth","parseFloat","getComputedStyle","computedHeight","scaleX","scaleY","POLL_RATE","useTrackElementOffsetRect","targetElement","indicatorPosition","setIndicatorPosition","intervalRef","measure","elementOffsetRect","clearInterval","current","setElement","requestAnimationFrame","setInterval"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The distance from the right edge of the offset parent to the right edge\n\t * of the element.\n\t */\n\tright: number;\n\t/**\n\t * The distance from the bottom edge of the offset parent to the bottom edge\n\t * of the element.\n\t */\n\tbottom: number;\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\ttop: 0,\n\tright: 0,\n\tbottom: 0,\n\tleft: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent, with subpixel precision. Values reflect the real measures before any\n * potential scaling distortions along the X and Y axes.\n *\n * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`\n * entries are not suitable, such as when the element is transformed, and when\n * `element.offset<Top|Left|Width|Height>` methods are not precise enough.\n *\n * **Note:** in some contexts, like when the scale is 0, this method will fail\n * because it's impossible to calculate a scaling ratio. When that happens, it\n * will return `undefined`.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect | undefined {\n\t// Position and dimension values computed with `getBoundingClientRect` have\n\t// subpixel precision, but are affected by distortions since they represent\n\t// the \"real\" measures, or in other words, the actual final values as rendered\n\t// by the browser.\n\tconst rect = element.getBoundingClientRect();\n\tif ( rect.width === 0 || rect.height === 0 ) {\n\t\treturn;\n\t}\n\tconst offsetParentRect =\n\t\telement.offsetParent?.getBoundingClientRect() ??\n\t\tNULL_ELEMENT_OFFSET_RECT;\n\n\t// Computed widths and heights have subpixel precision, and are not affected\n\t// by distortions.\n\tconst computedWidth = parseFloat( getComputedStyle( element ).width );\n\tconst computedHeight = parseFloat( getComputedStyle( element ).height );\n\n\t// We can obtain the current scale factor for the element by comparing \"computed\"\n\t// dimensions with the \"real\" ones.\n\tconst scaleX = computedWidth / rect.width;\n\tconst scaleY = computedHeight / rect.height;\n\n\treturn {\n\t\t// To obtain the adjusted values for the position:\n\t\t// 1. Compute the element's position relative to the offset parent.\n\t\t// 2. Correct for the scale factor.\n\t\ttop: ( rect.top - offsetParentRect?.top ) * scaleY,\n\t\tright: ( offsetParentRect?.right - rect.right ) * scaleX,\n\t\tbottom: ( offsetParentRect?.bottom - rect.bottom ) * scaleY,\n\t\tleft: ( rect.left - offsetParentRect?.left ) * scaleX,\n\t\t// Computed dimensions don't need any adjustments.\n\t\twidth: computedWidth,\n\t\theight: computedHeight,\n\t};\n}\n\nconst POLL_RATE = 100;\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n *\n * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s\n * documentation for more details). When that happens, this hook will attempt\n * to measure again after a frame, and if that fails, it will poll every 100\n * milliseconds until it succeeds.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\tconst intervalRef = useRef< ReturnType< typeof setInterval > >();\n\n\tconst measure = useEvent( () => {\n\t\tif ( targetElement ) {\n\t\t\tconst elementOffsetRect = getElementOffsetRect( targetElement );\n\t\t\tif ( elementOffsetRect ) {\n\t\t\t\tsetIndicatorPosition( elementOffsetRect );\n\t\t\t\tclearInterval( intervalRef.current );\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} else {\n\t\t\tclearInterval( intervalRef.current );\n\t\t}\n\t\treturn false;\n\t} );\n\n\tconst setElement = useResizeObserver( () => {\n\t\tif ( ! measure() ) {\n\t\t\trequestAnimationFrame( () => {\n\t\t\t\tif ( ! measure() ) {\n\t\t\t\t\tintervalRef.current = setInterval( measure, POLL_RATE );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\n\tuseLayoutEffect(\n\t\t() => setElement( targetElement ),\n\t\t[ setElement, targetElement ]\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,SAASA,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,oBAAoB;AACtE,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,mBAAmB;;AAE5C;AACA;AACA;;AAgCA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAG;EACvCC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CAAC;EACTC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACT,CAA6B;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CACnCC,OAAoB,EACY;EAAA,IAAAC,qBAAA;EAChC;EACA;EACA;EACA;EACA,MAAMC,IAAI,GAAGF,OAAO,CAACG,qBAAqB,CAAC,CAAC;EAC5C,IAAKD,IAAI,CAACL,KAAK,KAAK,CAAC,IAAIK,IAAI,CAACJ,MAAM,KAAK,CAAC,EAAG;IAC5C;EACD;EACA,MAAMM,gBAAgB,IAAAH,qBAAA,GACrBD,OAAO,CAACK,YAAY,EAAEF,qBAAqB,CAAC,CAAC,cAAAF,qBAAA,cAAAA,qBAAA,GAC7CT,wBAAwB;;EAEzB;EACA;EACA,MAAMc,aAAa,GAAGC,UAAU,CAAEC,gBAAgB,CAAER,OAAQ,CAAC,CAACH,KAAM,CAAC;EACrE,MAAMY,cAAc,GAAGF,UAAU,CAAEC,gBAAgB,CAAER,OAAQ,CAAC,CAACF,MAAO,CAAC;;EAEvE;EACA;EACA,MAAMY,MAAM,GAAGJ,aAAa,GAAGJ,IAAI,CAACL,KAAK;EACzC,MAAMc,MAAM,GAAGF,cAAc,GAAGP,IAAI,CAACJ,MAAM;EAE3C,OAAO;IACN;IACA;IACA;IACAL,GAAG,EAAE,CAAES,IAAI,CAACT,GAAG,GAAGW,gBAAgB,EAAEX,GAAG,IAAKkB,MAAM;IAClDjB,KAAK,EAAE,CAAEU,gBAAgB,EAAEV,KAAK,GAAGQ,IAAI,CAACR,KAAK,IAAKgB,MAAM;IACxDf,MAAM,EAAE,CAAES,gBAAgB,EAAET,MAAM,GAAGO,IAAI,CAACP,MAAM,IAAKgB,MAAM;IAC3Df,IAAI,EAAE,CAAEM,IAAI,CAACN,IAAI,GAAGQ,gBAAgB,EAAER,IAAI,IAAKc,MAAM;IACrD;IACAb,KAAK,EAAES,aAAa;IACpBR,MAAM,EAAEW;EACT,CAAC;AACF;AAEA,MAAMG,SAAS,GAAG,GAAG;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CACxCC,aAA6C,EAC5C;EACD,MAAM,CAAEC,iBAAiB,EAAEC,oBAAoB,CAAE,GAChD3B,QAAQ,CAAuBG,wBAAyB,CAAC;EAC1D,MAAMyB,WAAW,GAAG7B,MAAM,CAAqC,CAAC;EAEhE,MAAM8B,OAAO,GAAG3B,QAAQ,CAAE,MAAM;IAC/B,IAAKuB,aAAa,EAAG;MACpB,MAAMK,iBAAiB,GAAGpB,oBAAoB,CAAEe,aAAc,CAAC;MAC/D,IAAKK,iBAAiB,EAAG;QACxBH,oBAAoB,CAAEG,iBAAkB,CAAC;QACzCC,aAAa,CAAEH,WAAW,CAACI,OAAQ,CAAC;QACpC,OAAO,IAAI;MACZ;IACD,CAAC,MAAM;MACND,aAAa,CAAEH,WAAW,CAACI,OAAQ,CAAC;IACrC;IACA,OAAO,KAAK;EACb,CAAE,CAAC;EAEH,MAAMC,UAAU,GAAGhC,iBAAiB,CAAE,MAAM;IAC3C,IAAK,CAAE4B,OAAO,CAAC,CAAC,EAAG;MAClBK,qBAAqB,CAAE,MAAM;QAC5B,IAAK,CAAEL,OAAO,CAAC,CAAC,EAAG;UAClBD,WAAW,CAACI,OAAO,GAAGG,WAAW,CAAEN,OAAO,EAAEN,SAAU,CAAC;QACxD;MACD,CAAE,CAAC;IACJ;EACD,CAAE,CAAC;EAEHzB,eAAe,CACd,MAAMmC,UAAU,CAAER,aAAc,CAAC,EACjC,CAAEQ,UAAU,EAAER,aAAa,CAC5B,CAAC;EAED,OAAOC,iBAAiB;AACzB;;AAEA","ignoreList":[]}
1
+ {"version":3,"names":["useLayoutEffect","useRef","useState","useEvent","useResizeObserver","NULL_ELEMENT_OFFSET_RECT","element","undefined","top","right","bottom","left","width","height","getElementOffsetRect","_offsetParent$getBoun","_offsetParent$scrollL","_offsetParent$scrollT","rect","getBoundingClientRect","offsetParent","offsetParentRect","offsetParentScrollX","scrollLeft","offsetParentScrollY","scrollTop","computedWidth","parseFloat","getComputedStyle","computedHeight","scaleX","scaleY","POLL_RATE","useTrackElementOffsetRect","targetElement","indicatorPosition","setIndicatorPosition","intervalRef","measure","elementOffsetRect","clearInterval","current","setElement","requestAnimationFrame","setInterval"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useState } from '@wordpress/element';\nimport { useEvent, useResizeObserver } from '@wordpress/compose';\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The element the rect belongs to.\n\t */\n\telement: HTMLElement | undefined;\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The distance from the right edge of the offset parent to the right edge\n\t * of the element.\n\t */\n\tright: number;\n\t/**\n\t * The distance from the bottom edge of the offset parent to the bottom edge\n\t * of the element.\n\t */\n\tbottom: number;\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\telement: undefined,\n\ttop: 0,\n\tright: 0,\n\tbottom: 0,\n\tleft: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent, with subpixel precision. Values reflect the real measures before any\n * potential scaling distortions along the X and Y axes.\n *\n * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`\n * entries are not suitable, such as when the element is transformed, and when\n * `element.offset<Top|Left|Width|Height>` methods are not precise enough.\n *\n * **Note:** in some contexts, like when the scale is 0, this method will fail\n * because it's impossible to calculate a scaling ratio. When that happens, it\n * will return `undefined`.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect | undefined {\n\t// Position and dimension values computed with `getBoundingClientRect` have\n\t// subpixel precision, but are affected by distortions since they represent\n\t// the \"real\" measures, or in other words, the actual final values as rendered\n\t// by the browser.\n\tconst rect = element.getBoundingClientRect();\n\tif ( rect.width === 0 || rect.height === 0 ) {\n\t\treturn;\n\t}\n\tconst offsetParent = element.offsetParent;\n\tconst offsetParentRect =\n\t\toffsetParent?.getBoundingClientRect() ?? NULL_ELEMENT_OFFSET_RECT;\n\tconst offsetParentScrollX = offsetParent?.scrollLeft ?? 0;\n\tconst offsetParentScrollY = offsetParent?.scrollTop ?? 0;\n\n\t// Computed widths and heights have subpixel precision, and are not affected\n\t// by distortions.\n\tconst computedWidth = parseFloat( getComputedStyle( element ).width );\n\tconst computedHeight = parseFloat( getComputedStyle( element ).height );\n\n\t// We can obtain the current scale factor for the element by comparing \"computed\"\n\t// dimensions with the \"real\" ones.\n\tconst scaleX = computedWidth / rect.width;\n\tconst scaleY = computedHeight / rect.height;\n\n\treturn {\n\t\telement,\n\t\t// To obtain the adjusted values for the position:\n\t\t// 1. Compute the element's position relative to the offset parent.\n\t\t// 2. Correct for the scale factor.\n\t\t// 3. Adjust for the scroll position of the offset parent.\n\t\ttop:\n\t\t\t( rect.top - offsetParentRect?.top ) * scaleY + offsetParentScrollY,\n\t\tright:\n\t\t\t( offsetParentRect?.right - rect.right ) * scaleX -\n\t\t\toffsetParentScrollX,\n\t\tbottom:\n\t\t\t( offsetParentRect?.bottom - rect.bottom ) * scaleY -\n\t\t\toffsetParentScrollY,\n\t\tleft:\n\t\t\t( rect.left - offsetParentRect?.left ) * scaleX +\n\t\t\toffsetParentScrollX,\n\t\t// Computed dimensions don't need any adjustments.\n\t\twidth: computedWidth,\n\t\theight: computedHeight,\n\t};\n}\n\nconst POLL_RATE = 100;\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n *\n * When no element is provided (`null` or `undefined`), the hook will return\n * a \"null\" rect, in which all values are `0` and `element` is `undefined`.\n *\n * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s\n * documentation for more details). When that happens, this hook will attempt\n * to measure again after a frame, and if that fails, it will poll every 100\n * milliseconds until it succeeds.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\tconst intervalRef = useRef< ReturnType< typeof setInterval > >();\n\n\tconst measure = useEvent( () => {\n\t\tif ( targetElement ) {\n\t\t\tconst elementOffsetRect = getElementOffsetRect( targetElement );\n\t\t\tif ( elementOffsetRect ) {\n\t\t\t\tsetIndicatorPosition( elementOffsetRect );\n\t\t\t\tclearInterval( intervalRef.current );\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} else {\n\t\t\tclearInterval( intervalRef.current );\n\t\t}\n\t\treturn false;\n\t} );\n\n\tconst setElement = useResizeObserver( () => {\n\t\tif ( ! measure() ) {\n\t\t\trequestAnimationFrame( () => {\n\t\t\t\tif ( ! measure() ) {\n\t\t\t\t\tintervalRef.current = setInterval( measure, POLL_RATE );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\n\tuseLayoutEffect( () => {\n\t\tsetElement( targetElement );\n\t\tif ( ! targetElement ) {\n\t\t\tsetIndicatorPosition( NULL_ELEMENT_OFFSET_RECT );\n\t\t}\n\t}, [ setElement, targetElement ] );\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,SAASA,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,oBAAoB;AACtE,SAASC,QAAQ,EAAEC,iBAAiB,QAAQ,oBAAoB;;AAEhE;AACA;AACA;;AAoCA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAG;EACvCC,OAAO,EAAEC,SAAS;EAClBC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CAAC;EACTC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACT,CAA6B;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CACnCR,OAAoB,EACY;EAAA,IAAAS,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA;EAChC;EACA;EACA;EACA;EACA,MAAMC,IAAI,GAAGZ,OAAO,CAACa,qBAAqB,CAAC,CAAC;EAC5C,IAAKD,IAAI,CAACN,KAAK,KAAK,CAAC,IAAIM,IAAI,CAACL,MAAM,KAAK,CAAC,EAAG;IAC5C;EACD;EACA,MAAMO,YAAY,GAAGd,OAAO,CAACc,YAAY;EACzC,MAAMC,gBAAgB,IAAAN,qBAAA,GACrBK,YAAY,EAAED,qBAAqB,CAAC,CAAC,cAAAJ,qBAAA,cAAAA,qBAAA,GAAIV,wBAAwB;EAClE,MAAMiB,mBAAmB,IAAAN,qBAAA,GAAGI,YAAY,EAAEG,UAAU,cAAAP,qBAAA,cAAAA,qBAAA,GAAI,CAAC;EACzD,MAAMQ,mBAAmB,IAAAP,qBAAA,GAAGG,YAAY,EAAEK,SAAS,cAAAR,qBAAA,cAAAA,qBAAA,GAAI,CAAC;;EAExD;EACA;EACA,MAAMS,aAAa,GAAGC,UAAU,CAAEC,gBAAgB,CAAEtB,OAAQ,CAAC,CAACM,KAAM,CAAC;EACrE,MAAMiB,cAAc,GAAGF,UAAU,CAAEC,gBAAgB,CAAEtB,OAAQ,CAAC,CAACO,MAAO,CAAC;;EAEvE;EACA;EACA,MAAMiB,MAAM,GAAGJ,aAAa,GAAGR,IAAI,CAACN,KAAK;EACzC,MAAMmB,MAAM,GAAGF,cAAc,GAAGX,IAAI,CAACL,MAAM;EAE3C,OAAO;IACNP,OAAO;IACP;IACA;IACA;IACA;IACAE,GAAG,EACF,CAAEU,IAAI,CAACV,GAAG,GAAGa,gBAAgB,EAAEb,GAAG,IAAKuB,MAAM,GAAGP,mBAAmB;IACpEf,KAAK,EACJ,CAAEY,gBAAgB,EAAEZ,KAAK,GAAGS,IAAI,CAACT,KAAK,IAAKqB,MAAM,GACjDR,mBAAmB;IACpBZ,MAAM,EACL,CAAEW,gBAAgB,EAAEX,MAAM,GAAGQ,IAAI,CAACR,MAAM,IAAKqB,MAAM,GACnDP,mBAAmB;IACpBb,IAAI,EACH,CAAEO,IAAI,CAACP,IAAI,GAAGU,gBAAgB,EAAEV,IAAI,IAAKmB,MAAM,GAC/CR,mBAAmB;IACpB;IACAV,KAAK,EAAEc,aAAa;IACpBb,MAAM,EAAEgB;EACT,CAAC;AACF;AAEA,MAAMG,SAAS,GAAG,GAAG;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CACxCC,aAA6C,EAC5C;EACD,MAAM,CAAEC,iBAAiB,EAAEC,oBAAoB,CAAE,GAChDlC,QAAQ,CAAuBG,wBAAyB,CAAC;EAC1D,MAAMgC,WAAW,GAAGpC,MAAM,CAAqC,CAAC;EAEhE,MAAMqC,OAAO,GAAGnC,QAAQ,CAAE,MAAM;IAC/B,IAAK+B,aAAa,EAAG;MACpB,MAAMK,iBAAiB,GAAGzB,oBAAoB,CAAEoB,aAAc,CAAC;MAC/D,IAAKK,iBAAiB,EAAG;QACxBH,oBAAoB,CAAEG,iBAAkB,CAAC;QACzCC,aAAa,CAAEH,WAAW,CAACI,OAAQ,CAAC;QACpC,OAAO,IAAI;MACZ;IACD,CAAC,MAAM;MACND,aAAa,CAAEH,WAAW,CAACI,OAAQ,CAAC;IACrC;IACA,OAAO,KAAK;EACb,CAAE,CAAC;EAEH,MAAMC,UAAU,GAAGtC,iBAAiB,CAAE,MAAM;IAC3C,IAAK,CAAEkC,OAAO,CAAC,CAAC,EAAG;MAClBK,qBAAqB,CAAE,MAAM;QAC5B,IAAK,CAAEL,OAAO,CAAC,CAAC,EAAG;UAClBD,WAAW,CAACI,OAAO,GAAGG,WAAW,CAAEN,OAAO,EAAEN,SAAU,CAAC;QACxD;MACD,CAAE,CAAC;IACJ;EACD,CAAE,CAAC;EAEHhC,eAAe,CAAE,MAAM;IACtB0C,UAAU,CAAER,aAAc,CAAC;IAC3B,IAAK,CAAEA,aAAa,EAAG;MACtBE,oBAAoB,CAAE/B,wBAAyB,CAAC;IACjD;EACD,CAAC,EAAE,CAAEqC,UAAU,EAAER,aAAa,CAAG,CAAC;EAElC,OAAOC,iBAAiB;AACzB;;AAEA","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"sources":["@wordpress/components/src/utils/font-size.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from './config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) {\n\t\t\treturn size;\n\t\t}\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,iBAAiB;AAgBpC,OAAO,MAAMC,cAAc,GAAG,EAAE;AAEhC,OAAO,MAAMC,iBAAiB,GAAG;EAChCC,IAAI,EAAEF,cAAc;EACpBG,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACC,OAAO,CAAIC,CAAC,IAAM,CACxEA,CAAC,EACDA,CAAC,CAACC,QAAQ,CAAC,CAAC,CACX,CAAC;AAEH,OAAO,SAASC,WAAWA,CAC1BC,IAEiC,GAAGb,cAAc,EACzC;EACT,IAAKa,IAAI,IAAIZ,iBAAiB,EAAG;IAChC,OAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAI,CACxB,CAAC;EACF;EAEA,IAAK,OAAOA,IAAI,KAAK,QAAQ,EAAG;IAC/B,MAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAK,CAAC;IACjC,IAAKG,MAAM,CAACC,KAAK,CAAEH,MAAO,CAAC,EAAG;MAC7B,OAAOD,IAAI;IACZ;IACAA,IAAI,GAAGC,MAAM;EACd;EAEA,MAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMb,cAAgB,GAAE;EACjD,OAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAAE;AACjD;AAEA,OAAO,SAASC,kBAAkBA,CAAEP,IAAe,GAAG,CAAC,EAAW;EACjE,IAAK,CAAEL,kBAAkB,CAACa,QAAQ,CAAER,IAAoB,CAAC,EAAG;IAC3D,OAAOD,WAAW,CAAEC,IAAK,CAAC;EAC3B;EAEA,MAAMS,WAAW,GAAI,YAAYT,IAAM,EAAgC;EACvE,OAAOd,MAAM,CAAEuB,WAAW,CAAE;AAC7B","ignoreList":[]}
1
+ {"version":3,"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"sources":["@wordpress/components/src/utils/font-size.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from './config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) {\n\t\t\treturn size;\n\t\t}\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,iBAAiB;AAgBpC,OAAO,MAAMC,cAAc,GAAG,EAAE;AAEhC,OAAO,MAAMC,iBAAiB,GAAG;EAChCC,IAAI,EAAEF,cAAc;EACpBG,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACC,OAAO,CAAIC,CAAC,IAAM,CACxEA,CAAC,EACDA,CAAC,CAACC,QAAQ,CAAC,CAAC,CACX,CAAC;AAEH,OAAO,SAASC,WAAWA,CAC1BC,IAEiC,GAAGb,cAAc,EACzC;EACT,IAAKa,IAAI,IAAIZ,iBAAiB,EAAG;IAChC,OAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAI,CACxB,CAAC;EACF;EAEA,IAAK,OAAOA,IAAI,KAAK,QAAQ,EAAG;IAC/B,MAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAK,CAAC;IACjC,IAAKG,MAAM,CAACC,KAAK,CAAEH,MAAO,CAAC,EAAG;MAC7B,OAAOD,IAAI;IACZ;IACAA,IAAI,GAAGC,MAAM;EACd;EAEA,MAAMI,KAAK,GAAG,IAAKL,IAAI,MAAQb,cAAc,GAAI;EACjD,OAAO,QAASkB,KAAK,MAAQnB,MAAM,CAACoB,QAAQ,GAAI;AACjD;AAEA,OAAO,SAASC,kBAAkBA,CAAEP,IAAe,GAAG,CAAC,EAAW;EACjE,IAAK,CAAEL,kBAAkB,CAACa,QAAQ,CAAER,IAAoB,CAAC,EAAG;IAC3D,OAAOD,WAAW,CAAEC,IAAK,CAAC;EAC3B;EAEA,MAAMS,WAAW,GAAG,YAAaT,IAAI,EAAkC;EACvE,OAAOd,MAAM,CAAEuB,WAAW,CAAE;AAC7B","ignoreList":[]}
@@ -0,0 +1,74 @@
1
+ /* eslint-disable jsdoc/require-param */
2
+
3
+ /**
4
+ * WordPress dependencies
5
+ */
6
+ import { useEvent } from '@wordpress/compose';
7
+ import { useLayoutEffect } from '@wordpress/element';
8
+ /**
9
+ * Internal dependencies
10
+ */
11
+
12
+ import { useOnValueUpdate } from './use-on-value-update';
13
+
14
+ /**
15
+ * A utility used to animate something in a container component based on the "offset
16
+ * rect" (position relative to the container and size) of a subelement. For example,
17
+ * this is useful to render an indicator for the selected option of a component, and
18
+ * to animate it when the selected option changes.
19
+ *
20
+ * Takes in a container element and the up-to-date "offset rect" of the target
21
+ * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:
22
+ *
23
+ * - Adds CSS variables with rect information to the container, so that the indicator
24
+ * can be rendered and animated with them. These are kept up-to-date, enabling CSS
25
+ * transitions on change.
26
+ * - Sets an attribute (`data-subelement-animated` by default) when the tracked
27
+ * element changes, so that the target (e.g. the indicator) can be animated to its
28
+ * new size and position.
29
+ * - Removes the attribute when the animation is done.
30
+ *
31
+ * The need for the attribute is due to the fact that the rect might update in
32
+ * situations other than when the tracked element changes, e.g. the tracked element
33
+ * might be resized. In such cases, there is no need to animate the indicator, and
34
+ * the change in size or position of the indicator needs to be reflected immediately.
35
+ */
36
+ export function useAnimatedOffsetRect(
37
+ /**
38
+ * The container element.
39
+ */
40
+ container,
41
+ /**
42
+ * The rect of the tracked element.
43
+ */
44
+ rect, {
45
+ prefix = 'subelement',
46
+ dataAttribute = `${prefix}-animated`,
47
+ transitionEndFilter = () => true
48
+ } = {}) {
49
+ const setProperties = useEvent(() => {
50
+ Object.keys(rect).forEach(property => property !== 'element' && container?.style.setProperty(`--${prefix}-${property}`, String(rect[property])));
51
+ });
52
+ useLayoutEffect(() => {
53
+ setProperties();
54
+ }, [rect, setProperties]);
55
+ useOnValueUpdate(rect.element, ({
56
+ previousValue
57
+ }) => {
58
+ // Only enable the animation when moving from one element to another.
59
+ if (rect.element && previousValue) {
60
+ container?.setAttribute(`data-${dataAttribute}`, '');
61
+ }
62
+ });
63
+ useLayoutEffect(() => {
64
+ function onTransitionEnd(event) {
65
+ if (transitionEndFilter(event)) {
66
+ container?.removeAttribute(`data-${dataAttribute}`);
67
+ }
68
+ }
69
+ container?.addEventListener('transitionend', onTransitionEnd);
70
+ return () => container?.removeEventListener('transitionend', onTransitionEnd);
71
+ }, [dataAttribute, container, transitionEndFilter]);
72
+ }
73
+ /* eslint-enable jsdoc/require-param */
74
+ //# sourceMappingURL=use-animated-offset-rect.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["useEvent","useLayoutEffect","useOnValueUpdate","useAnimatedOffsetRect","container","rect","prefix","dataAttribute","transitionEndFilter","setProperties","Object","keys","forEach","property","style","setProperty","String","element","previousValue","setAttribute","onTransitionEnd","event","removeAttribute","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/utils/hooks/use-animated-offset-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n\n/**\n * WordPress dependencies\n */\nimport { useEvent } from '@wordpress/compose';\nimport { useLayoutEffect } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { ElementOffsetRect } from '../element-rect';\nimport { useOnValueUpdate } from './use-on-value-update';\n\n/**\n * A utility used to animate something in a container component based on the \"offset\n * rect\" (position relative to the container and size) of a subelement. For example,\n * this is useful to render an indicator for the selected option of a component, and\n * to animate it when the selected option changes.\n *\n * Takes in a container element and the up-to-date \"offset rect\" of the target\n * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:\n *\n * - Adds CSS variables with rect information to the container, so that the indicator\n * can be rendered and animated with them. These are kept up-to-date, enabling CSS\n * transitions on change.\n * - Sets an attribute (`data-subelement-animated` by default) when the tracked\n * element changes, so that the target (e.g. the indicator) can be animated to its\n * new size and position.\n * - Removes the attribute when the animation is done.\n *\n * The need for the attribute is due to the fact that the rect might update in\n * situations other than when the tracked element changes, e.g. the tracked element\n * might be resized. In such cases, there is no need to animate the indicator, and\n * the change in size or position of the indicator needs to be reflected immediately.\n */\nexport function useAnimatedOffsetRect(\n\t/**\n\t * The container element.\n\t */\n\tcontainer: HTMLElement | undefined,\n\t/**\n\t * The rect of the tracked element.\n\t */\n\trect: ElementOffsetRect,\n\t{\n\t\tprefix = 'subelement',\n\t\tdataAttribute = `${ prefix }-animated`,\n\t\ttransitionEndFilter = () => true,\n\t}: {\n\t\t/**\n\t\t * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the\n\t\t * CSS variables will be `--selected-top`, `--selected-left`, etc.\n\t\t * @default 'subelement'\n\t\t */\n\t\tprefix?: string;\n\t\t/**\n\t\t * The name of the data attribute used to indicate that the animation is in\n\t\t * progress. The `data-` prefix is added automatically.\n\t\t *\n\t\t * For example, if `dataAttribute` is `indicator-animated`, the attribute will\n\t\t * be `data-indicator-animated`.\n\t\t * @default `${ prefix }-animated`\n\t\t */\n\t\tdataAttribute?: string;\n\t\t/**\n\t\t * A function that is called with the transition event and returns a boolean\n\t\t * indicating whether the animation should be stopped. The default is a function\n\t\t * that always returns `true`.\n\t\t *\n\t\t * For example, if the animated element is the `::before` pseudo-element, the\n\t\t * function can be written as `( event ) => event.pseudoElement === '::before'`.\n\t\t * @default () => true\n\t\t */\n\t\ttransitionEndFilter?: ( event: TransitionEvent ) => boolean;\n\t} = {}\n) {\n\tconst setProperties = useEvent( () => {\n\t\t( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(\n\t\t\t( property ) =>\n\t\t\t\tproperty !== 'element' &&\n\t\t\t\tcontainer?.style.setProperty(\n\t\t\t\t\t`--${ prefix }-${ property }`,\n\t\t\t\t\tString( rect[ property ] )\n\t\t\t\t)\n\t\t);\n\t} );\n\tuseLayoutEffect( () => {\n\t\tsetProperties();\n\t}, [ rect, setProperties ] );\n\tuseOnValueUpdate( rect.element, ( { previousValue } ) => {\n\t\t// Only enable the animation when moving from one element to another.\n\t\tif ( rect.element && previousValue ) {\n\t\t\tcontainer?.setAttribute( `data-${ dataAttribute }`, '' );\n\t\t}\n\t} );\n\tuseLayoutEffect( () => {\n\t\tfunction onTransitionEnd( event: TransitionEvent ) {\n\t\t\tif ( transitionEndFilter( event ) ) {\n\t\t\t\tcontainer?.removeAttribute( `data-${ dataAttribute }` );\n\t\t\t}\n\t\t}\n\t\tcontainer?.addEventListener( 'transitionend', onTransitionEnd );\n\t\treturn () =>\n\t\t\tcontainer?.removeEventListener( 'transitionend', onTransitionEnd );\n\t}, [ dataAttribute, container, transitionEndFilter ] );\n}\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,eAAe,QAAQ,oBAAoB;AACpD;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,uBAAuB;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA;AACpC;AACD;AACA;AACCC,SAAkC;AAClC;AACD;AACA;AACCC,IAAuB,EACvB;EACCC,MAAM,GAAG,YAAY;EACrBC,aAAa,GAAG,GAAID,MAAM,WAAY;EACtCE,mBAAmB,GAAGA,CAAA,KAAM;AA2B7B,CAAC,GAAG,CAAC,CAAC,EACL;EACD,MAAMC,aAAa,GAAGT,QAAQ,CAAE,MAAM;IACnCU,MAAM,CAACC,IAAI,CAAEN,IAAK,CAAC,CAAiCO,OAAO,CAC1DC,QAAQ,IACTA,QAAQ,KAAK,SAAS,IACtBT,SAAS,EAAEU,KAAK,CAACC,WAAW,CAC3B,KAAMT,MAAM,IAAMO,QAAQ,EAAG,EAC7BG,MAAM,CAAEX,IAAI,CAAEQ,QAAQ,CAAG,CAC1B,CACF,CAAC;EACF,CAAE,CAAC;EACHZ,eAAe,CAAE,MAAM;IACtBQ,aAAa,CAAC,CAAC;EAChB,CAAC,EAAE,CAAEJ,IAAI,EAAEI,aAAa,CAAG,CAAC;EAC5BP,gBAAgB,CAAEG,IAAI,CAACY,OAAO,EAAE,CAAE;IAAEC;EAAc,CAAC,KAAM;IACxD;IACA,IAAKb,IAAI,CAACY,OAAO,IAAIC,aAAa,EAAG;MACpCd,SAAS,EAAEe,YAAY,CAAE,QAASZ,aAAa,EAAG,EAAE,EAAG,CAAC;IACzD;EACD,CAAE,CAAC;EACHN,eAAe,CAAE,MAAM;IACtB,SAASmB,eAAeA,CAAEC,KAAsB,EAAG;MAClD,IAAKb,mBAAmB,CAAEa,KAAM,CAAC,EAAG;QACnCjB,SAAS,EAAEkB,eAAe,CAAE,QAASf,aAAa,EAAI,CAAC;MACxD;IACD;IACAH,SAAS,EAAEmB,gBAAgB,CAAE,eAAe,EAAEH,eAAgB,CAAC;IAC/D,OAAO,MACNhB,SAAS,EAAEoB,mBAAmB,CAAE,eAAe,EAAEJ,eAAgB,CAAC;EACpE,CAAC,EAAE,CAAEb,aAAa,EAAEH,SAAS,EAAEI,mBAAmB,CAAG,CAAC;AACvD;AACA","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["__unsafe_useEmotionCache","useEmotionCache","insertStyles","cx","innerCx","useCallback","isSerializedStyles","o","every","p","useCx","cache","classNames","Error","map","arg","key","name"],"sources":["@wordpress/components/src/utils/hooks/use-cx.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { __unsafe_useEmotionCache as useEmotionCache } from '@emotion/react';\nimport type { SerializedStyles } from '@emotion/serialize';\nimport { insertStyles } from '@emotion/utils';\n// eslint-disable-next-line no-restricted-imports\nimport type { ClassNamesArg } from '@emotion/css';\n// eslint-disable-next-line no-restricted-imports\nimport { cx as innerCx } from '@emotion/css';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\nconst isSerializedStyles = ( o: any ): o is SerializedStyles =>\n\ttypeof o !== 'undefined' &&\n\to !== null &&\n\t[ 'name', 'styles' ].every( ( p ) => typeof o[ p ] !== 'undefined' );\n\n/**\n * Retrieve a `cx` function that knows how to handle `SerializedStyles`\n * returned by the `@emotion/react` `css` function in addition to what\n * `cx` normally knows how to handle. It also hooks into the Emotion\n * Cache, allowing `css` calls to work inside iframes.\n *\n * ```jsx\n * import { css } from '@emotion/react';\n *\n * const styles = css`\n * \tcolor: red\n * `;\n *\n * function RedText( { className, ...props } ) {\n * \tconst cx = useCx();\n *\n * \tconst classes = cx(styles, className);\n *\n * \treturn <span className={classes} {...props} />;\n * }\n * ```\n */\nexport const useCx = () => {\n\tconst cache = useEmotionCache();\n\n\tconst cx = useCallback(\n\t\t( ...classNames: ( ClassNamesArg | SerializedStyles )[] ) => {\n\t\t\tif ( cache === null ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'The `useCx` hook should be only used within a valid Emotion Cache Context'\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn innerCx(\n\t\t\t\t...classNames.map( ( arg ) => {\n\t\t\t\t\tif ( isSerializedStyles( arg ) ) {\n\t\t\t\t\t\tinsertStyles( cache, arg, false );\n\t\t\t\t\t\treturn `${ cache.key }-${ arg.name }`;\n\t\t\t\t\t}\n\t\t\t\t\treturn arg;\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ cache ]\n\t);\n\n\treturn cx;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,wBAAwB,IAAIC,eAAe,QAAQ,gBAAgB;AAE5E,SAASC,YAAY,QAAQ,gBAAgB;AAC7C;;AAEA;AACA,SAASC,EAAE,IAAIC,OAAO,QAAQ,cAAc;;AAE5C;AACA;AACA;AACA,SAASC,WAAW,QAAQ,oBAAoB;AAEhD,MAAMC,kBAAkB,GAAKC,CAAM,IAClC,OAAOA,CAAC,KAAK,WAAW,IACxBA,CAAC,KAAK,IAAI,IACV,CAAE,MAAM,EAAE,QAAQ,CAAE,CAACC,KAAK,CAAIC,CAAC,IAAM,OAAOF,CAAC,CAAEE,CAAC,CAAE,KAAK,WAAY,CAAC;;AAErE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGA,CAAA,KAAM;EAC1B,MAAMC,KAAK,GAAGV,eAAe,CAAC,CAAC;EAE/B,MAAME,EAAE,GAAGE,WAAW,CACrB,CAAE,GAAGO,UAAkD,KAAM;IAC5D,IAAKD,KAAK,KAAK,IAAI,EAAG;MACrB,MAAM,IAAIE,KAAK,CACd,2EACD,CAAC;IACF;IAEA,OAAOT,OAAO,CACb,GAAGQ,UAAU,CAACE,GAAG,CAAIC,GAAG,IAAM;MAC7B,IAAKT,kBAAkB,CAAES,GAAI,CAAC,EAAG;QAChCb,YAAY,CAAES,KAAK,EAAEI,GAAG,EAAE,KAAM,CAAC;QACjC,OAAQ,GAAGJ,KAAK,CAACK,GAAK,IAAID,GAAG,CAACE,IAAM,EAAC;MACtC;MACA,OAAOF,GAAG;IACX,CAAE,CACH,CAAC;EACF,CAAC,EACD,CAAEJ,KAAK,CACR,CAAC;EAED,OAAOR,EAAE;AACV,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__unsafe_useEmotionCache","useEmotionCache","insertStyles","cx","innerCx","useCallback","isSerializedStyles","o","every","p","useCx","cache","classNames","Error","map","arg","key","name"],"sources":["@wordpress/components/src/utils/hooks/use-cx.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { __unsafe_useEmotionCache as useEmotionCache } from '@emotion/react';\nimport type { SerializedStyles } from '@emotion/serialize';\nimport { insertStyles } from '@emotion/utils';\n// eslint-disable-next-line no-restricted-imports\nimport type { ClassNamesArg } from '@emotion/css';\n// eslint-disable-next-line no-restricted-imports\nimport { cx as innerCx } from '@emotion/css';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\nconst isSerializedStyles = ( o: any ): o is SerializedStyles =>\n\ttypeof o !== 'undefined' &&\n\to !== null &&\n\t[ 'name', 'styles' ].every( ( p ) => typeof o[ p ] !== 'undefined' );\n\n/**\n * Retrieve a `cx` function that knows how to handle `SerializedStyles`\n * returned by the `@emotion/react` `css` function in addition to what\n * `cx` normally knows how to handle. It also hooks into the Emotion\n * Cache, allowing `css` calls to work inside iframes.\n *\n * ```jsx\n * import { css } from '@emotion/react';\n *\n * const styles = css`\n * \tcolor: red\n * `;\n *\n * function RedText( { className, ...props } ) {\n * \tconst cx = useCx();\n *\n * \tconst classes = cx(styles, className);\n *\n * \treturn <span className={classes} {...props} />;\n * }\n * ```\n */\nexport const useCx = () => {\n\tconst cache = useEmotionCache();\n\n\tconst cx = useCallback(\n\t\t( ...classNames: ( ClassNamesArg | SerializedStyles )[] ) => {\n\t\t\tif ( cache === null ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'The `useCx` hook should be only used within a valid Emotion Cache Context'\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn innerCx(\n\t\t\t\t...classNames.map( ( arg ) => {\n\t\t\t\t\tif ( isSerializedStyles( arg ) ) {\n\t\t\t\t\t\tinsertStyles( cache, arg, false );\n\t\t\t\t\t\treturn `${ cache.key }-${ arg.name }`;\n\t\t\t\t\t}\n\t\t\t\t\treturn arg;\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ cache ]\n\t);\n\n\treturn cx;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,wBAAwB,IAAIC,eAAe,QAAQ,gBAAgB;AAE5E,SAASC,YAAY,QAAQ,gBAAgB;AAC7C;;AAEA;AACA,SAASC,EAAE,IAAIC,OAAO,QAAQ,cAAc;;AAE5C;AACA;AACA;AACA,SAASC,WAAW,QAAQ,oBAAoB;AAEhD,MAAMC,kBAAkB,GAAKC,CAAM,IAClC,OAAOA,CAAC,KAAK,WAAW,IACxBA,CAAC,KAAK,IAAI,IACV,CAAE,MAAM,EAAE,QAAQ,CAAE,CAACC,KAAK,CAAIC,CAAC,IAAM,OAAOF,CAAC,CAAEE,CAAC,CAAE,KAAK,WAAY,CAAC;;AAErE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGA,CAAA,KAAM;EAC1B,MAAMC,KAAK,GAAGV,eAAe,CAAC,CAAC;EAE/B,MAAME,EAAE,GAAGE,WAAW,CACrB,CAAE,GAAGO,UAAkD,KAAM;IAC5D,IAAKD,KAAK,KAAK,IAAI,EAAG;MACrB,MAAM,IAAIE,KAAK,CACd,2EACD,CAAC;IACF;IAEA,OAAOT,OAAO,CACb,GAAGQ,UAAU,CAACE,GAAG,CAAIC,GAAG,IAAM;MAC7B,IAAKT,kBAAkB,CAAES,GAAI,CAAC,EAAG;QAChCb,YAAY,CAAES,KAAK,EAAEI,GAAG,EAAE,KAAM,CAAC;QACjC,OAAO,GAAIJ,KAAK,CAACK,GAAG,IAAMD,GAAG,CAACE,IAAI,EAAG;MACtC;MACA,OAAOF,GAAG;IACX,CAAE,CACH,CAAC;EACF,CAAC,EACD,CAAEJ,KAAK,CACR,CAAC;EAED,OAAOR,EAAE;AACV,CAAC","ignoreList":[]}
@@ -2,11 +2,8 @@
2
2
  /**
3
3
  * WordPress dependencies
4
4
  */
5
- import { useRef, useEffect } from '@wordpress/element';
6
- /**
7
- * Internal dependencies
8
- */
9
- import { useEvent } from './use-event';
5
+ import { useEvent } from '@wordpress/compose';
6
+ import { useRef, useLayoutEffect } from '@wordpress/element';
10
7
 
11
8
  /**
12
9
  * Context object for the `onUpdate` callback of `useOnValueUpdate`.
@@ -26,7 +23,7 @@ value,
26
23
  onUpdate) {
27
24
  const previousValueRef = useRef(value);
28
25
  const updateCallbackEvent = useEvent(onUpdate);
29
- useEffect(() => {
26
+ useLayoutEffect(() => {
30
27
  if (previousValueRef.current !== value) {
31
28
  updateCallbackEvent({
32
29
  previousValue: previousValueRef.current
@@ -1 +1 @@
1
- {"version":3,"names":["useRef","useEffect","useEvent","useOnValueUpdate","value","onUpdate","previousValueRef","updateCallbackEvent","current","previousValue"],"sources":["@wordpress/components/src/utils/hooks/use-on-value-update.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './use-event';\n\n/**\n * Context object for the `onUpdate` callback of `useOnValueUpdate`.\n */\nexport type ValueUpdateContext< T > = {\n\tpreviousValue: T;\n};\n\n/**\n * Calls the `onUpdate` callback when the `value` changes.\n */\nexport function useOnValueUpdate< T >(\n\t/**\n\t * The value to watch for changes.\n\t */\n\tvalue: T,\n\t/**\n\t * Callback to fire when the value changes.\n\t */\n\tonUpdate: ( context: ValueUpdateContext< T > ) => void\n) {\n\tconst previousValueRef = useRef( value );\n\tconst updateCallbackEvent = useEvent( onUpdate );\n\tuseEffect( () => {\n\t\tif ( previousValueRef.current !== value ) {\n\t\t\tupdateCallbackEvent( {\n\t\t\t\tpreviousValue: previousValueRef.current,\n\t\t\t} );\n\t\t\tpreviousValueRef.current = value;\n\t\t}\n\t}, [ updateCallbackEvent, value ] );\n}\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AACtD;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,aAAa;;AAEtC;AACA;AACA;;AAKA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA;AAC/B;AACD;AACA;AACCC,KAAQ;AACR;AACD;AACA;AACCC,QAAsD,EACrD;EACD,MAAMC,gBAAgB,GAAGN,MAAM,CAAEI,KAAM,CAAC;EACxC,MAAMG,mBAAmB,GAAGL,QAAQ,CAAEG,QAAS,CAAC;EAChDJ,SAAS,CAAE,MAAM;IAChB,IAAKK,gBAAgB,CAACE,OAAO,KAAKJ,KAAK,EAAG;MACzCG,mBAAmB,CAAE;QACpBE,aAAa,EAAEH,gBAAgB,CAACE;MACjC,CAAE,CAAC;MACHF,gBAAgB,CAACE,OAAO,GAAGJ,KAAK;IACjC;EACD,CAAC,EAAE,CAAEG,mBAAmB,EAAEH,KAAK,CAAG,CAAC;AACpC;AACA","ignoreList":[]}
1
+ {"version":3,"names":["useEvent","useRef","useLayoutEffect","useOnValueUpdate","value","onUpdate","previousValueRef","updateCallbackEvent","current","previousValue"],"sources":["@wordpress/components/src/utils/hooks/use-on-value-update.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useEvent } from '@wordpress/compose';\nimport { useRef, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Context object for the `onUpdate` callback of `useOnValueUpdate`.\n */\nexport type ValueUpdateContext< T > = {\n\tpreviousValue: T;\n};\n\n/**\n * Calls the `onUpdate` callback when the `value` changes.\n */\nexport function useOnValueUpdate< T >(\n\t/**\n\t * The value to watch for changes.\n\t */\n\tvalue: T,\n\t/**\n\t * Callback to fire when the value changes.\n\t */\n\tonUpdate: ( context: ValueUpdateContext< T > ) => void\n) {\n\tconst previousValueRef = useRef( value );\n\tconst updateCallbackEvent = useEvent( onUpdate );\n\tuseLayoutEffect( () => {\n\t\tif ( previousValueRef.current !== value ) {\n\t\t\tupdateCallbackEvent( {\n\t\t\t\tpreviousValue: previousValueRef.current,\n\t\t\t} );\n\t\t\tpreviousValueRef.current = value;\n\t\t}\n\t}, [ updateCallbackEvent, value ] );\n}\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,MAAM,EAAEC,eAAe,QAAQ,oBAAoB;;AAE5D;AACA;AACA;;AAKA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA;AAC/B;AACD;AACA;AACCC,KAAQ;AACR;AACD;AACA;AACCC,QAAsD,EACrD;EACD,MAAMC,gBAAgB,GAAGL,MAAM,CAAEG,KAAM,CAAC;EACxC,MAAMG,mBAAmB,GAAGP,QAAQ,CAAEK,QAAS,CAAC;EAChDH,eAAe,CAAE,MAAM;IACtB,IAAKI,gBAAgB,CAACE,OAAO,KAAKJ,KAAK,EAAG;MACzCG,mBAAmB,CAAE;QACpBE,aAAa,EAAEH,gBAAgB,CAACE;MACjC,CAAE,CAAC;MACHF,gBAAgB,CAACE,OAAO,GAAGJ,KAAK;IACjC;EACD,CAAC,EAAE,CAAEG,mBAAmB,EAAEH,KAAK,CAAG,CAAC;AACpC;AACA","ignoreList":[]}
@@ -18,7 +18,7 @@ export function getNumber(value) {
18
18
  * @return {number} The sum of values.
19
19
  */
20
20
  export function add(...args) {
21
- return args.reduce( /** @type {(sum:number, arg: number|string) => number} */
21
+ return args.reduce(/** @type {(sum:number, arg: number|string) => number} */
22
22
  (sum, arg) => sum + getNumber(arg), 0);
23
23
  }
24
24
 
@@ -30,7 +30,7 @@ export function add(...args) {
30
30
  * @return {number} The difference of the values.
31
31
  */
32
32
  export function subtract(...args) {
33
- return args.reduce( /** @type {(diff:number, arg: number|string, index:number) => number} */
33
+ return args.reduce(/** @type {(diff:number, arg: number|string, index:number) => number} */
34
34
  (diff, arg, index) => {
35
35
  const value = getNumber(arg);
36
36
  return index === 0 ? value : diff - value;
@@ -1 +1 @@
1
- {"version":3,"names":["getNumber","value","number","Number","isNaN","add","args","reduce","sum","arg","subtract","diff","index","getPrecision","split","undefined","length","clamp","min","max","baseValue","Math","roundClamp","Infinity","step","stepValue","precision","rounded","round","clampedValue","toFixed"],"sources":["@wordpress/components/src/utils/math.js"],"sourcesContent":["/**\n * Parses and retrieves a number value.\n *\n * @param {unknown} value The incoming value.\n *\n * @return {number} The parsed number value.\n */\nexport function getNumber( value ) {\n\tconst number = Number( value );\n\n\treturn isNaN( number ) ? 0 : number;\n}\n\n/**\n * Safely adds 2 values.\n *\n * @param {Array<number|string>} args Values to add together.\n *\n * @return {number} The sum of values.\n */\nexport function add( ...args ) {\n\treturn args.reduce(\n\t\t/** @type {(sum:number, arg: number|string) => number} */\n\t\t( sum, arg ) => sum + getNumber( arg ),\n\t\t0\n\t);\n}\n\n/**\n * Safely subtracts 2 values.\n *\n * @param {Array<number|string>} args Values to subtract together.\n *\n * @return {number} The difference of the values.\n */\nexport function subtract( ...args ) {\n\treturn args.reduce(\n\t\t/** @type {(diff:number, arg: number|string, index:number) => number} */\n\t\t( diff, arg, index ) => {\n\t\t\tconst value = getNumber( arg );\n\t\t\treturn index === 0 ? value : diff - value;\n\t\t},\n\t\t0\n\t);\n}\n\n/**\n * Determines the decimal position of a number value.\n *\n * @param {number} value The number to evaluate.\n *\n * @return {number} The number of decimal places.\n */\nfunction getPrecision( value ) {\n\tconst split = ( value + '' ).split( '.' );\n\treturn split[ 1 ] !== undefined ? split[ 1 ].length : 0;\n}\n\n/**\n * Clamps a value based on a min/max range.\n *\n * @param {number} value The value.\n * @param {number} min The minimum range.\n * @param {number} max The maximum range.\n *\n * @return {number} The clamped value.\n */\nexport function clamp( value, min, max ) {\n\tconst baseValue = getNumber( value );\n\treturn Math.max( min, Math.min( baseValue, max ) );\n}\n\n/**\n * Clamps a value based on a min/max range with rounding\n *\n * @param {number | string} value The value.\n * @param {number} min The minimum range.\n * @param {number} max The maximum range.\n * @param {number} step A multiplier for the value.\n *\n * @return {number} The rounded and clamped value.\n */\nexport function roundClamp(\n\tvalue = 0,\n\tmin = Infinity,\n\tmax = Infinity,\n\tstep = 1\n) {\n\tconst baseValue = getNumber( value );\n\tconst stepValue = getNumber( step );\n\tconst precision = getPrecision( step );\n\tconst rounded = Math.round( baseValue / stepValue ) * stepValue;\n\tconst clampedValue = clamp( rounded, min, max );\n\n\treturn precision\n\t\t? getNumber( clampedValue.toFixed( precision ) )\n\t\t: clampedValue;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,SAASA,CAAEC,KAAK,EAAG;EAClC,MAAMC,MAAM,GAAGC,MAAM,CAAEF,KAAM,CAAC;EAE9B,OAAOG,KAAK,CAAEF,MAAO,CAAC,GAAG,CAAC,GAAGA,MAAM;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,GAAGA,CAAE,GAAGC,IAAI,EAAG;EAC9B,OAAOA,IAAI,CAACC,MAAM,EACjB;EACA,CAAEC,GAAG,EAAEC,GAAG,KAAMD,GAAG,GAAGR,SAAS,CAAES,GAAI,CAAC,EACtC,CACD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAE,GAAGJ,IAAI,EAAG;EACnC,OAAOA,IAAI,CAACC,MAAM,EACjB;EACA,CAAEI,IAAI,EAAEF,GAAG,EAAEG,KAAK,KAAM;IACvB,MAAMX,KAAK,GAAGD,SAAS,CAAES,GAAI,CAAC;IAC9B,OAAOG,KAAK,KAAK,CAAC,GAAGX,KAAK,GAAGU,IAAI,GAAGV,KAAK;EAC1C,CAAC,EACD,CACD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASY,YAAYA,CAAEZ,KAAK,EAAG;EAC9B,MAAMa,KAAK,GAAG,CAAEb,KAAK,GAAG,EAAE,EAAGa,KAAK,CAAE,GAAI,CAAC;EACzC,OAAOA,KAAK,CAAE,CAAC,CAAE,KAAKC,SAAS,GAAGD,KAAK,CAAE,CAAC,CAAE,CAACE,MAAM,GAAG,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAEhB,KAAK,EAAEiB,GAAG,EAAEC,GAAG,EAAG;EACxC,MAAMC,SAAS,GAAGpB,SAAS,CAAEC,KAAM,CAAC;EACpC,OAAOoB,IAAI,CAACF,GAAG,CAAED,GAAG,EAAEG,IAAI,CAACH,GAAG,CAAEE,SAAS,EAAED,GAAI,CAAE,CAAC;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,UAAUA,CACzBrB,KAAK,GAAG,CAAC,EACTiB,GAAG,GAAGK,QAAQ,EACdJ,GAAG,GAAGI,QAAQ,EACdC,IAAI,GAAG,CAAC,EACP;EACD,MAAMJ,SAAS,GAAGpB,SAAS,CAAEC,KAAM,CAAC;EACpC,MAAMwB,SAAS,GAAGzB,SAAS,CAAEwB,IAAK,CAAC;EACnC,MAAME,SAAS,GAAGb,YAAY,CAAEW,IAAK,CAAC;EACtC,MAAMG,OAAO,GAAGN,IAAI,CAACO,KAAK,CAAER,SAAS,GAAGK,SAAU,CAAC,GAAGA,SAAS;EAC/D,MAAMI,YAAY,GAAGZ,KAAK,CAAEU,OAAO,EAAET,GAAG,EAAEC,GAAI,CAAC;EAE/C,OAAOO,SAAS,GACb1B,SAAS,CAAE6B,YAAY,CAACC,OAAO,CAAEJ,SAAU,CAAE,CAAC,GAC9CG,YAAY;AAChB","ignoreList":[]}
1
+ {"version":3,"names":["getNumber","value","number","Number","isNaN","add","args","reduce","sum","arg","subtract","diff","index","getPrecision","split","undefined","length","clamp","min","max","baseValue","Math","roundClamp","Infinity","step","stepValue","precision","rounded","round","clampedValue","toFixed"],"sources":["@wordpress/components/src/utils/math.js"],"sourcesContent":["/**\n * Parses and retrieves a number value.\n *\n * @param {unknown} value The incoming value.\n *\n * @return {number} The parsed number value.\n */\nexport function getNumber( value ) {\n\tconst number = Number( value );\n\n\treturn isNaN( number ) ? 0 : number;\n}\n\n/**\n * Safely adds 2 values.\n *\n * @param {Array<number|string>} args Values to add together.\n *\n * @return {number} The sum of values.\n */\nexport function add( ...args ) {\n\treturn args.reduce(\n\t\t/** @type {(sum:number, arg: number|string) => number} */\n\t\t( sum, arg ) => sum + getNumber( arg ),\n\t\t0\n\t);\n}\n\n/**\n * Safely subtracts 2 values.\n *\n * @param {Array<number|string>} args Values to subtract together.\n *\n * @return {number} The difference of the values.\n */\nexport function subtract( ...args ) {\n\treturn args.reduce(\n\t\t/** @type {(diff:number, arg: number|string, index:number) => number} */\n\t\t( diff, arg, index ) => {\n\t\t\tconst value = getNumber( arg );\n\t\t\treturn index === 0 ? value : diff - value;\n\t\t},\n\t\t0\n\t);\n}\n\n/**\n * Determines the decimal position of a number value.\n *\n * @param {number} value The number to evaluate.\n *\n * @return {number} The number of decimal places.\n */\nfunction getPrecision( value ) {\n\tconst split = ( value + '' ).split( '.' );\n\treturn split[ 1 ] !== undefined ? split[ 1 ].length : 0;\n}\n\n/**\n * Clamps a value based on a min/max range.\n *\n * @param {number} value The value.\n * @param {number} min The minimum range.\n * @param {number} max The maximum range.\n *\n * @return {number} The clamped value.\n */\nexport function clamp( value, min, max ) {\n\tconst baseValue = getNumber( value );\n\treturn Math.max( min, Math.min( baseValue, max ) );\n}\n\n/**\n * Clamps a value based on a min/max range with rounding\n *\n * @param {number | string} value The value.\n * @param {number} min The minimum range.\n * @param {number} max The maximum range.\n * @param {number} step A multiplier for the value.\n *\n * @return {number} The rounded and clamped value.\n */\nexport function roundClamp(\n\tvalue = 0,\n\tmin = Infinity,\n\tmax = Infinity,\n\tstep = 1\n) {\n\tconst baseValue = getNumber( value );\n\tconst stepValue = getNumber( step );\n\tconst precision = getPrecision( step );\n\tconst rounded = Math.round( baseValue / stepValue ) * stepValue;\n\tconst clampedValue = clamp( rounded, min, max );\n\n\treturn precision\n\t\t? getNumber( clampedValue.toFixed( precision ) )\n\t\t: clampedValue;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,SAASA,CAAEC,KAAK,EAAG;EAClC,MAAMC,MAAM,GAAGC,MAAM,CAAEF,KAAM,CAAC;EAE9B,OAAOG,KAAK,CAAEF,MAAO,CAAC,GAAG,CAAC,GAAGA,MAAM;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,GAAGA,CAAE,GAAGC,IAAI,EAAG;EAC9B,OAAOA,IAAI,CAACC,MAAM,CACjB;EACA,CAAEC,GAAG,EAAEC,GAAG,KAAMD,GAAG,GAAGR,SAAS,CAAES,GAAI,CAAC,EACtC,CACD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAE,GAAGJ,IAAI,EAAG;EACnC,OAAOA,IAAI,CAACC,MAAM,CACjB;EACA,CAAEI,IAAI,EAAEF,GAAG,EAAEG,KAAK,KAAM;IACvB,MAAMX,KAAK,GAAGD,SAAS,CAAES,GAAI,CAAC;IAC9B,OAAOG,KAAK,KAAK,CAAC,GAAGX,KAAK,GAAGU,IAAI,GAAGV,KAAK;EAC1C,CAAC,EACD,CACD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASY,YAAYA,CAAEZ,KAAK,EAAG;EAC9B,MAAMa,KAAK,GAAG,CAAEb,KAAK,GAAG,EAAE,EAAGa,KAAK,CAAE,GAAI,CAAC;EACzC,OAAOA,KAAK,CAAE,CAAC,CAAE,KAAKC,SAAS,GAAGD,KAAK,CAAE,CAAC,CAAE,CAACE,MAAM,GAAG,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAEhB,KAAK,EAAEiB,GAAG,EAAEC,GAAG,EAAG;EACxC,MAAMC,SAAS,GAAGpB,SAAS,CAAEC,KAAM,CAAC;EACpC,OAAOoB,IAAI,CAACF,GAAG,CAAED,GAAG,EAAEG,IAAI,CAACH,GAAG,CAAEE,SAAS,EAAED,GAAI,CAAE,CAAC;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,UAAUA,CACzBrB,KAAK,GAAG,CAAC,EACTiB,GAAG,GAAGK,QAAQ,EACdJ,GAAG,GAAGI,QAAQ,EACdC,IAAI,GAAG,CAAC,EACP;EACD,MAAMJ,SAAS,GAAGpB,SAAS,CAAEC,KAAM,CAAC;EACpC,MAAMwB,SAAS,GAAGzB,SAAS,CAAEwB,IAAK,CAAC;EACnC,MAAME,SAAS,GAAGb,YAAY,CAAEW,IAAK,CAAC;EACtC,MAAMG,OAAO,GAAGN,IAAI,CAACO,KAAK,CAAER,SAAS,GAAGK,SAAU,CAAC,GAAGA,SAAS;EAC/D,MAAMI,YAAY,GAAGZ,KAAK,CAAEU,OAAO,EAAET,GAAG,EAAEC,GAAI,CAAC;EAE/C,OAAOO,SAAS,GACb1B,SAAS,CAAE6B,YAAY,CAACC,OAAO,CAAEJ,SAAU,CAAE,CAAC,GAC9CG,YAAY;AAChB","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"sources":["@wordpress/components/src/utils/space.ts"],"sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,MAAMA,SAAS,GAAG,KAAK;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAEC,KAAkB,EAAuB;EAC/D,IAAK,OAAOA,KAAK,KAAK,WAAW,EAAG;IACnC,OAAOC,SAAS;EACjB;;EAEA;EACA,IAAK,CAAED,KAAK,EAAG;IACd,OAAO,GAAG;EACX;EAEA,MAAME,KAAK,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGG,MAAM,CAAEH,KAAM,CAAC;;EAEjE;EACA,IACG,OAAOI,MAAM,KAAK,WAAW,IAC9BA,MAAM,CAACC,GAAG,EAAEC,QAAQ,GAAI,QAAQ,EAAEN,KAAK,CAACO,QAAQ,CAAC,CAAE,CAAC,IACrDJ,MAAM,CAACK,KAAK,CAAEN,KAAM,CAAC,EACpB;IACD,OAAOF,KAAK,CAACO,QAAQ,CAAC,CAAC;EACxB;EAEA,OAAQ,QAAQT,SAAW,MAAME,KAAO,GAAE;AAC3C","ignoreList":[]}
1
+ {"version":3,"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"sources":["@wordpress/components/src/utils/space.ts"],"sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,MAAMA,SAAS,GAAG,KAAK;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAEC,KAAkB,EAAuB;EAC/D,IAAK,OAAOA,KAAK,KAAK,WAAW,EAAG;IACnC,OAAOC,SAAS;EACjB;;EAEA;EACA,IAAK,CAAED,KAAK,EAAG;IACd,OAAO,GAAG;EACX;EAEA,MAAME,KAAK,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGG,MAAM,CAAEH,KAAM,CAAC;;EAEjE;EACA,IACG,OAAOI,MAAM,KAAK,WAAW,IAC9BA,MAAM,CAACC,GAAG,EAAEC,QAAQ,GAAI,QAAQ,EAAEN,KAAK,CAACO,QAAQ,CAAC,CAAE,CAAC,IACrDJ,MAAM,CAACK,KAAK,CAAEN,KAAM,CAAC,EACpB;IACD,OAAOF,KAAK,CAACO,QAAQ,CAAC,CAAC;EACxB;EAEA,OAAO,QAAST,SAAS,MAAQE,KAAK,GAAI;AAC3C","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["UNITED_VALUE_REGEX","parseCSSUnitValue","toParse","value","trim","matched","match","undefined","num","unit","numParsed","parseFloat","Number","isNaN","createCSSUnitValue"],"sources":["@wordpress/components/src/utils/unit-values.ts"],"sourcesContent":["const UNITED_VALUE_REGEX =\n\t/^([\\d.\\-+]*)\\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;\n\n/**\n * Parses a number and unit from a value.\n *\n * @param toParse Value to parse\n *\n * @return The extracted number and unit.\n */\nexport function parseCSSUnitValue(\n\ttoParse: string\n): [ number | undefined, string | undefined ] {\n\tconst value = toParse.trim();\n\n\tconst matched = value.match( UNITED_VALUE_REGEX );\n\tif ( ! matched ) {\n\t\treturn [ undefined, undefined ];\n\t}\n\tconst [ , num, unit ] = matched;\n\tlet numParsed: number | undefined = parseFloat( num );\n\tnumParsed = Number.isNaN( numParsed ) ? undefined : numParsed;\n\n\treturn [ numParsed, unit ];\n}\n\n/**\n * Combines a value and a unit into a unit value.\n *\n * @param value\n * @param unit\n *\n * @return The unit value.\n */\nexport function createCSSUnitValue(\n\tvalue: string | number,\n\tunit: string\n): string {\n\treturn `${ value }${ unit }`;\n}\n"],"mappings":"AAAA,MAAMA,kBAAkB,GACvB,8NAA8N;;AAE/N;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAChCC,OAAe,EAC8B;EAC7C,MAAMC,KAAK,GAAGD,OAAO,CAACE,IAAI,CAAC,CAAC;EAE5B,MAAMC,OAAO,GAAGF,KAAK,CAACG,KAAK,CAAEN,kBAAmB,CAAC;EACjD,IAAK,CAAEK,OAAO,EAAG;IAChB,OAAO,CAAEE,SAAS,EAAEA,SAAS,CAAE;EAChC;EACA,MAAM,GAAIC,GAAG,EAAEC,IAAI,CAAE,GAAGJ,OAAO;EAC/B,IAAIK,SAA6B,GAAGC,UAAU,CAAEH,GAAI,CAAC;EACrDE,SAAS,GAAGE,MAAM,CAACC,KAAK,CAAEH,SAAU,CAAC,GAAGH,SAAS,GAAGG,SAAS;EAE7D,OAAO,CAAEA,SAAS,EAAED,IAAI,CAAE;AAC3B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,kBAAkBA,CACjCX,KAAsB,EACtBM,IAAY,EACH;EACT,OAAQ,GAAGN,KAAO,GAAGM,IAAM,EAAC;AAC7B","ignoreList":[]}
1
+ {"version":3,"names":["UNITED_VALUE_REGEX","parseCSSUnitValue","toParse","value","trim","matched","match","undefined","num","unit","numParsed","parseFloat","Number","isNaN","createCSSUnitValue"],"sources":["@wordpress/components/src/utils/unit-values.ts"],"sourcesContent":["const UNITED_VALUE_REGEX =\n\t/^([\\d.\\-+]*)\\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;\n\n/**\n * Parses a number and unit from a value.\n *\n * @param toParse Value to parse\n *\n * @return The extracted number and unit.\n */\nexport function parseCSSUnitValue(\n\ttoParse: string\n): [ number | undefined, string | undefined ] {\n\tconst value = toParse.trim();\n\n\tconst matched = value.match( UNITED_VALUE_REGEX );\n\tif ( ! matched ) {\n\t\treturn [ undefined, undefined ];\n\t}\n\tconst [ , num, unit ] = matched;\n\tlet numParsed: number | undefined = parseFloat( num );\n\tnumParsed = Number.isNaN( numParsed ) ? undefined : numParsed;\n\n\treturn [ numParsed, unit ];\n}\n\n/**\n * Combines a value and a unit into a unit value.\n *\n * @param value\n * @param unit\n *\n * @return The unit value.\n */\nexport function createCSSUnitValue(\n\tvalue: string | number,\n\tunit: string\n): string {\n\treturn `${ value }${ unit }`;\n}\n"],"mappings":"AAAA,MAAMA,kBAAkB,GACvB,8NAA8N;;AAE/N;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAChCC,OAAe,EAC8B;EAC7C,MAAMC,KAAK,GAAGD,OAAO,CAACE,IAAI,CAAC,CAAC;EAE5B,MAAMC,OAAO,GAAGF,KAAK,CAACG,KAAK,CAAEN,kBAAmB,CAAC;EACjD,IAAK,CAAEK,OAAO,EAAG;IAChB,OAAO,CAAEE,SAAS,EAAEA,SAAS,CAAE;EAChC;EACA,MAAM,GAAIC,GAAG,EAAEC,IAAI,CAAE,GAAGJ,OAAO;EAC/B,IAAIK,SAA6B,GAAGC,UAAU,CAAEH,GAAI,CAAC;EACrDE,SAAS,GAAGE,MAAM,CAACC,KAAK,CAAEH,SAAU,CAAC,GAAGH,SAAS,GAAGG,SAAS;EAE7D,OAAO,CAAEA,SAAS,EAAED,IAAI,CAAE;AAC3B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,kBAAkBA,CACjCX,KAAsB,EACtBM,IAAY,EACH;EACT,OAAO,GAAIN,KAAK,GAAKM,IAAI,EAAG;AAC7B","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"sources":["@wordpress/components/src/utils/use-responsive-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' ) {\n\t\treturn values;\n\t}\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AAExD,MAAMC,WAAW,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAE;AAE9C,OAAO,MAAMC,kBAAkB,GAAGA,CACjCC,OAAkC,GAAG,CAAC,CAAC,KACnC;EACJ,MAAM;IAAEC,YAAY,GAAG;EAAE,CAAC,GAAGD,OAAO;EAEpC,IAAK,OAAOC,YAAY,KAAK,QAAQ,EAAG;IACvC,MAAM,IAAIC,SAAS,CACjB,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EAC/F,CAAC;EACF,CAAC,MAAM,IAAKA,YAAY,GAAG,CAAC,IAAIA,YAAY,GAAGH,WAAW,CAACK,MAAM,GAAG,CAAC,EAAG;IACvE,MAAM,IAAIC,UAAU,CAClB,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EACnH,CAAC;EACF;EAEA,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAGT,QAAQ,CAAEI,YAAa,CAAC;EAEpDL,SAAS,CAAE,MAAM;IAChB,MAAMW,QAAQ,GAAGA,CAAA,KAChBT,WAAW,CAACU,MAAM,CAAIC,EAAE,IAAM;MAC7B,OAAO,OAAOC,MAAM,KAAK,WAAW,GACjCA,MAAM,CAACC,UAAU,CAAG,0BAA0BF,EAAI,GAAG,CAAC,CACrDG,OAAO,GACR,KAAK;IACT,CAAE,CAAC,CAACT,MAAM;IAEX,MAAMU,QAAQ,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGP,QAAQ,CAAC,CAAC;MAC3B,IAAKF,KAAK,KAAKS,QAAQ,EAAG;QACzBR,QAAQ,CAAEQ,QAAS,CAAC;MACrB;IACD,CAAC;IAEDD,QAAQ,CAAC,CAAC;IAEV,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;MACpCA,MAAM,CAACK,gBAAgB,CAAE,QAAQ,EAAEF,QAAS,CAAC;IAC9C;IACA,OAAO,MAAM;MACZ,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;QACpCA,MAAM,CAACM,mBAAmB,CAAE,QAAQ,EAAEH,QAAS,CAAC;MACjD;IACD,CAAC;EACF,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEd,OAAOA,KAAK;AACb,CAAC;AAED,OAAO,SAASY,kBAAkBA,CACjCC,MAA2B,EAC3BlB,OAAqD,GAAG,CAAC,CAAC,EAC1C;EAChB,MAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAQ,CAAC;;EAE3C;EACA,IAAK,CAAEoB,KAAK,CAACC,OAAO,CAAEH,MAAO,CAAC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAG;IAChE,OAAOA,MAAM;EACd;EAEA,MAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAE;;EAE1B;EACA,OAAO,kBAAmBI,KAAK,CAC9B;EACAH,KAAK,IAAIG,KAAK,CAACnB,MAAM,GAAGmB,KAAK,CAACnB,MAAM,GAAG,CAAC,GAAGgB,KAAK,CAChD;AACF","ignoreList":[]}
1
+ {"version":3,"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"sources":["@wordpress/components/src/utils/use-responsive-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' ) {\n\t\treturn values;\n\t}\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AAExD,MAAMC,WAAW,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAE;AAE9C,OAAO,MAAMC,kBAAkB,GAAGA,CACjCC,OAAkC,GAAG,CAAC,CAAC,KACnC;EACJ,MAAM;IAAEC,YAAY,GAAG;EAAE,CAAC,GAAGD,OAAO;EAEpC,IAAK,OAAOC,YAAY,KAAK,QAAQ,EAAG;IACvC,MAAM,IAAIC,SAAS,CAClB,qDAAsDD,YAAY,KAAO,OAAOA,YAAY,EAC7F,CAAC;EACF,CAAC,MAAM,IAAKA,YAAY,GAAG,CAAC,IAAIA,YAAY,GAAGH,WAAW,CAACK,MAAM,GAAG,CAAC,EAAG;IACvE,MAAM,IAAIC,UAAU,CACnB,oDAAqDN,WAAW,CAACK,MAAM,2BAA6BF,YAAY,EACjH,CAAC;EACF;EAEA,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAGT,QAAQ,CAAEI,YAAa,CAAC;EAEpDL,SAAS,CAAE,MAAM;IAChB,MAAMW,QAAQ,GAAGA,CAAA,KAChBT,WAAW,CAACU,MAAM,CAAIC,EAAE,IAAM;MAC7B,OAAO,OAAOC,MAAM,KAAK,WAAW,GACjCA,MAAM,CAACC,UAAU,CAAE,0BAA2BF,EAAE,GAAK,CAAC,CACrDG,OAAO,GACR,KAAK;IACT,CAAE,CAAC,CAACT,MAAM;IAEX,MAAMU,QAAQ,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGP,QAAQ,CAAC,CAAC;MAC3B,IAAKF,KAAK,KAAKS,QAAQ,EAAG;QACzBR,QAAQ,CAAEQ,QAAS,CAAC;MACrB;IACD,CAAC;IAEDD,QAAQ,CAAC,CAAC;IAEV,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;MACpCA,MAAM,CAACK,gBAAgB,CAAE,QAAQ,EAAEF,QAAS,CAAC;IAC9C;IACA,OAAO,MAAM;MACZ,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;QACpCA,MAAM,CAACM,mBAAmB,CAAE,QAAQ,EAAEH,QAAS,CAAC;MACjD;IACD,CAAC;EACF,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEd,OAAOA,KAAK;AACb,CAAC;AAED,OAAO,SAASY,kBAAkBA,CACjCC,MAA2B,EAC3BlB,OAAqD,GAAG,CAAC,CAAC,EAC1C;EAChB,MAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAQ,CAAC;;EAE3C;EACA,IAAK,CAAEoB,KAAK,CAACC,OAAO,CAAEH,MAAO,CAAC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAG;IAChE,OAAOA,MAAM;EACd;EAEA,MAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAE;;EAE1B;EACA,OAAO,kBAAmBI,KAAK,CAC9B;EACAH,KAAK,IAAIG,KAAK,CAACnB,MAAM,GAAGmB,KAAK,CAACnB,MAAM,GAAG,CAAC,GAAGgB,KAAK,CAChD;AACF","ignoreList":[]}
@@ -30,6 +30,9 @@
30
30
  /**
31
31
  * Fonts & basic variables.
32
32
  */
33
+ /**
34
+ * Typography
35
+ */
33
36
  /**
34
37
  * Grid System.
35
38
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -44,7 +47,10 @@
44
47
  * Dimensions.
45
48
  */
46
49
  /**
47
- * Editor widths.
50
+ * Mobile specific styles
51
+ */
52
+ /**
53
+ * Editor styles.
48
54
  */
49
55
  /**
50
56
  * Block & Editor UI.
@@ -68,6 +74,9 @@
68
74
  * Creates a fading overlay to signify that the content is longer
69
75
  * than the space allows.
70
76
  */
77
+ /**
78
+ * Typography
79
+ */
71
80
  /**
72
81
  * Breakpoint mixins
73
82
  */
@@ -324,7 +333,7 @@
324
333
  transform: none;
325
334
  }
326
335
  .components-button.is-secondary {
327
- box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
336
+ box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
328
337
  outline: 1px solid transparent;
329
338
  white-space: nowrap;
330
339
  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -336,6 +345,9 @@
336
345
  .components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
337
346
  box-shadow: inset 0 0 0 1px #ddd;
338
347
  }
348
+ .components-button.is-secondary:focus:not(:disabled) {
349
+ box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
350
+ }
339
351
  .components-button.is-tertiary {
340
352
  white-space: nowrap;
341
353
  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -1176,24 +1188,21 @@ body.is-dragging-components-draggable {
1176
1188
  .components-dropdown__content .components-popover__content {
1177
1189
  padding: 8px;
1178
1190
  }
1191
+ .components-dropdown__content .components-popover__content:has(.components-menu-group) {
1192
+ padding: 0;
1193
+ }
1194
+ .components-dropdown__content .components-popover__content:has(.components-menu-group) .components-dropdown-menu__menu > .components-menu-item__button,
1195
+ .components-dropdown__content .components-popover__content:has(.components-menu-group) > .components-menu-item__button {
1196
+ margin: 8px;
1197
+ width: auto;
1198
+ }
1179
1199
  .components-dropdown__content [role=menuitem] {
1180
1200
  white-space: nowrap;
1181
1201
  }
1182
1202
  .components-dropdown__content .components-menu-group {
1183
1203
  padding: 8px;
1184
- margin-top: 0;
1185
- margin-bottom: 0;
1186
- margin-right: -8px;
1187
- margin-left: -8px;
1188
- }
1189
- .components-dropdown__content .components-menu-group:first-child {
1190
- margin-top: -8px;
1191
- }
1192
- .components-dropdown__content .components-menu-group:last-child {
1193
- margin-bottom: -8px;
1194
1204
  }
1195
1205
  .components-dropdown__content .components-menu-group + .components-menu-group {
1196
- margin-top: 0;
1197
1206
  border-top: 1px solid #ccc;
1198
1207
  padding: 8px;
1199
1208
  }
@@ -1754,7 +1763,6 @@ body.is-dragging-components-draggable {
1754
1763
  }
1755
1764
 
1756
1765
  .components-menu-group + .components-menu-group {
1757
- margin-top: 8px;
1758
1766
  padding-top: 8px;
1759
1767
  border-top: 1px solid #1e1e1e;
1760
1768
  }
@@ -1764,6 +1772,10 @@ body.is-dragging-components-draggable {
1764
1772
  padding-top: 0;
1765
1773
  }
1766
1774
 
1775
+ .components-menu-group:has(> div:empty) {
1776
+ display: none;
1777
+ }
1778
+
1767
1779
  .components-menu-group__label {
1768
1780
  padding: 0 8px;
1769
1781
  margin-top: 4px;
@@ -1855,6 +1867,10 @@ body.is-dragging-components-draggable {
1855
1867
  }
1856
1868
  }
1857
1869
 
1870
+ .components-menu-items-choice,
1871
+ .components-menu-items-choice.components-button {
1872
+ height: auto;
1873
+ }
1858
1874
  .components-menu-items-choice svg,
1859
1875
  .components-menu-items-choice.components-button svg {
1860
1876
  margin-left: 12px;
@@ -30,6 +30,9 @@
30
30
  /**
31
31
  * Fonts & basic variables.
32
32
  */
33
+ /**
34
+ * Typography
35
+ */
33
36
  /**
34
37
  * Grid System.
35
38
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -44,7 +47,10 @@
44
47
  * Dimensions.
45
48
  */
46
49
  /**
47
- * Editor widths.
50
+ * Mobile specific styles
51
+ */
52
+ /**
53
+ * Editor styles.
48
54
  */
49
55
  /**
50
56
  * Block & Editor UI.
@@ -68,6 +74,9 @@
68
74
  * Creates a fading overlay to signify that the content is longer
69
75
  * than the space allows.
70
76
  */
77
+ /**
78
+ * Typography
79
+ */
71
80
  /**
72
81
  * Breakpoint mixins
73
82
  */
@@ -324,7 +333,7 @@
324
333
  transform: none;
325
334
  }
326
335
  .components-button.is-secondary {
327
- box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
336
+ box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
328
337
  outline: 1px solid transparent;
329
338
  white-space: nowrap;
330
339
  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -336,6 +345,9 @@
336
345
  .components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
337
346
  box-shadow: inset 0 0 0 1px #ddd;
338
347
  }
348
+ .components-button.is-secondary:focus:not(:disabled) {
349
+ box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
350
+ }
339
351
  .components-button.is-tertiary {
340
352
  white-space: nowrap;
341
353
  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -1181,24 +1193,21 @@ body.is-dragging-components-draggable {
1181
1193
  .components-dropdown__content .components-popover__content {
1182
1194
  padding: 8px;
1183
1195
  }
1196
+ .components-dropdown__content .components-popover__content:has(.components-menu-group) {
1197
+ padding: 0;
1198
+ }
1199
+ .components-dropdown__content .components-popover__content:has(.components-menu-group) .components-dropdown-menu__menu > .components-menu-item__button,
1200
+ .components-dropdown__content .components-popover__content:has(.components-menu-group) > .components-menu-item__button {
1201
+ margin: 8px;
1202
+ width: auto;
1203
+ }
1184
1204
  .components-dropdown__content [role=menuitem] {
1185
1205
  white-space: nowrap;
1186
1206
  }
1187
1207
  .components-dropdown__content .components-menu-group {
1188
1208
  padding: 8px;
1189
- margin-top: 0;
1190
- margin-bottom: 0;
1191
- margin-left: -8px;
1192
- margin-right: -8px;
1193
- }
1194
- .components-dropdown__content .components-menu-group:first-child {
1195
- margin-top: -8px;
1196
- }
1197
- .components-dropdown__content .components-menu-group:last-child {
1198
- margin-bottom: -8px;
1199
1209
  }
1200
1210
  .components-dropdown__content .components-menu-group + .components-menu-group {
1201
- margin-top: 0;
1202
1211
  border-top: 1px solid #ccc;
1203
1212
  padding: 8px;
1204
1213
  }
@@ -1759,7 +1768,6 @@ body.is-dragging-components-draggable {
1759
1768
  }
1760
1769
 
1761
1770
  .components-menu-group + .components-menu-group {
1762
- margin-top: 8px;
1763
1771
  padding-top: 8px;
1764
1772
  border-top: 1px solid #1e1e1e;
1765
1773
  }
@@ -1769,6 +1777,10 @@ body.is-dragging-components-draggable {
1769
1777
  padding-top: 0;
1770
1778
  }
1771
1779
 
1780
+ .components-menu-group:has(> div:empty) {
1781
+ display: none;
1782
+ }
1783
+
1772
1784
  .components-menu-group__label {
1773
1785
  padding: 0 8px;
1774
1786
  margin-top: 4px;
@@ -1860,6 +1872,10 @@ body.is-dragging-components-draggable {
1860
1872
  }
1861
1873
  }
1862
1874
 
1875
+ .components-menu-items-choice,
1876
+ .components-menu-items-choice.components-button {
1877
+ height: auto;
1878
+ }
1863
1879
  .components-menu-items-choice svg,
1864
1880
  .components-menu-items-choice.components-button svg {
1865
1881
  margin-right: 12px;
@@ -39,6 +39,8 @@ export type AlignmentMatrixControlIconProps = Pick<AlignmentMatrixControlProps,
39
39
  * component instead_
40
40
  *
41
41
  * The size of the icon.
42
+ *
43
+ * @deprecated
42
44
  * @ignore
43
45
  * @default 24
44
46
  */
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GACpC,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,eAAe,GACf,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAElB,MAAM,MAAM,2BAA2B,GAAG;IACzC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,2BAA2B,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,QAAQ,EAAE,2BAA2B,KAAM,IAAI,CAAC;IAC7D;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,IAAI,CACjD,2BAA2B,EAC3B,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC7C,KAAK,EAAE,WAAW,CAAE,2BAA2B,CAAE,OAAO,CAAE,CAAE,CAAC;CAC7D,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GACpC,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,eAAe,GACf,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAElB,MAAM,MAAM,2BAA2B,GAAG;IACzC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,2BAA2B,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,QAAQ,EAAE,2BAA2B,KAAM,IAAI,CAAC;IAC7D;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,IAAI,CACjD,2BAA2B,EAC3B,OAAO,CACP,GAAG;IACH;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC7C,KAAK,EAAE,WAAW,CAAE,2BAA2B,CAAE,OAAO,CAAE,CAAE,CAAC;CAC7D,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EACX,iBAAiB,EAMjB,oBAAoB,EAEpB,MAAM,SAAS,CAAC;AAiCjB,wBAAgB,eAAe,CAAE,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACV,EAAE,oBAAoB;;;;;EA8UtB;AAeD,wBAAgB,oBAAoB,CAAE,OAAO,EAAE,oBAAoB;;;;;;;;;;;;EAsClE;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,UAAU,EACV,GAAG,OAAO,EACV,EAAE,iBAAiB,+BAQnB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EACX,iBAAiB,EAMjB,oBAAoB,EAEpB,MAAM,SAAS,CAAC;AAoCjB,wBAAgB,eAAe,CAAE,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACV,EAAE,oBAAoB;;;;;EA8UtB;AAeD,wBAAgB,oBAAoB,CAAE,OAAO,EAAE,oBAAoB;;;;;;;;;;;;EAsClE;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,UAAU,EACV,GAAG,OAAO,EACV,EAAE,iBAAiB,+BAQnB"}
@@ -1,21 +1,10 @@
1
1
  import type { LabelProps, BorderControlProps } from '../../border-control/types';
2
2
  /**
3
- * The `BorderBoxControl` effectively has two view states. The first, a "linked"
4
- * view, allows configuration of a flat border via a single `BorderControl`.
5
- * The second, a "split" view, contains a `BorderControl` for each side
6
- * as well as a visualizer for the currently selected borders. Each view also
7
- * contains a button to toggle between the two.
8
- *
9
- * When switching from the "split" view to "linked", if the individual side
10
- * borders are not consistent, the "linked" view will display any border
11
- * properties selections that are consistent while showing a mixed state for
12
- * those that aren't. For example, if all borders had the same color and style
13
- * but different widths, then the border dropdown in the "linked" view's
14
- * `BorderControl` would show that consistent color and style but the "linked"
15
- * view's width input would show "Mixed" placeholder text.
3
+ * An input control for the color, style, and width of the border of a box. The
4
+ * border can be customized as a whole, or individually for each side of the box.
16
5
  *
17
6
  * ```jsx
18
- * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
7
+ * import { BorderBoxControl } from '@wordpress/components';
19
8
  * import { __ } from '@wordpress/i18n';
20
9
  *
21
10
  * const colors = [
@@ -48,8 +37,9 @@ import type { LabelProps, BorderControlProps } from '../../border-control/types'
48
37
  * };
49
38
  * ```
50
39
  */
51
- export declare const BorderBoxControl: import("../../context").WordPressComponent<"div", Pick<import("../../color-palette/types").ColorPaletteProps, "colors" | "enableAlpha" | "__experimentalIsRenderedInSidebar"> & {
40
+ export declare const BorderBoxControl: import("../../context").WordPressComponent<"div", Pick<import("../../color-palette/types").ColorPaletteProps, "colors" | "__experimentalIsRenderedInSidebar"> & {
52
41
  disableCustomColors?: boolean;
42
+ enableAlpha?: boolean;
53
43
  } & LabelProps & Pick<BorderControlProps, "size" | "enableStyle"> & {
54
44
  onChange: (value: import("../types").AnyBorder) => void;
55
45
  popoverPlacement?: import("../../popover/types").PopoverProps["placement"];
@@ -1 +1 @@
1
- {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,UAAU,EACV,kBAAkB,EAClB,MAAM,4BAA4B,CAAC;AA4HpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;8CAG5B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control/component.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACX,UAAU,EACV,kBAAkB,EAClB,MAAM,4BAA4B,CAAC;AA4HpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;8CAG5B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -1,5 +1,6 @@
1
- declare const ConnectedBorderBoxControlSplitControls: import("../../context").WordPressComponent<"div", Pick<import("../../color-palette/types").ColorPaletteProps, "colors" | "enableAlpha" | "__experimentalIsRenderedInSidebar"> & {
1
+ declare const ConnectedBorderBoxControlSplitControls: import("../../context").WordPressComponent<"div", Pick<import("../../color-palette/types").ColorPaletteProps, "colors" | "__experimentalIsRenderedInSidebar"> & {
2
2
  disableCustomColors?: boolean;
3
+ enableAlpha?: boolean;
3
4
  } & Pick<import("../types").BorderBoxControlProps, "size" | "enableStyle"> & {
4
5
  onChange: (value: import("../../border-control/types").Border | undefined, side: import("../types").BorderSide) => void;
5
6
  popoverPlacement?: import("../../popover/types").PopoverProps["placement"];
@@ -1 +1 @@
1
- {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],"names":[],"mappings":"AAmHA,QAAA,MAAM,sCAAsC;;;;;;;6CAG3C,CAAC;AACF,eAAe,sCAAsC,CAAC"}
1
+ {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],"names":[],"mappings":"AAmHA,QAAA,MAAM,sCAAsC;;;;;;;;6CAG3C,CAAC;AACF,eAAe,sCAAsC,CAAC"}