@wordpress/components 21.0.2 → 21.1.2-next.4d3b314fd5.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 (255) hide show
  1. package/CHANGELOG.md +31 -4
  2. package/build/autocomplete/get-default-use-items.js +3 -3
  3. package/build/autocomplete/get-default-use-items.js.map +1 -1
  4. package/build/box-control/unit-control.js +0 -1
  5. package/build/box-control/unit-control.js.map +1 -1
  6. package/build/button/index.js +5 -1
  7. package/build/button/index.js.map +1 -1
  8. package/build/draggable/index.js +3 -6
  9. package/build/draggable/index.js.map +1 -1
  10. package/build/drop-zone/index.js +7 -1
  11. package/build/drop-zone/index.js.map +1 -1
  12. package/build/higher-order/with-filters/index.js +1 -1
  13. package/build/higher-order/with-filters/index.js.map +1 -1
  14. package/build/index.js +6 -0
  15. package/build/index.js.map +1 -1
  16. package/build/menu-item/index.js +4 -3
  17. package/build/menu-item/index.js.map +1 -1
  18. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +10 -3
  19. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js.map +1 -1
  20. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +15 -6
  21. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  22. package/build/mobile/bottom-sheet/sub-sheet/index.native.js +4 -1
  23. package/build/mobile/bottom-sheet/sub-sheet/index.native.js.map +1 -1
  24. package/build/mobile/color-settings/index.native.js +3 -1
  25. package/build/mobile/color-settings/index.native.js.map +1 -1
  26. package/build/mobile/color-settings/picker-screen.native.js +3 -1
  27. package/build/mobile/color-settings/picker-screen.native.js.map +1 -1
  28. package/build/mobile/image/index.native.js +3 -1
  29. package/build/mobile/image/index.native.js.map +1 -1
  30. package/build/mobile/keyboard-avoiding-view/index.ios.js +3 -1
  31. package/build/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
  32. package/build/mobile/link-picker/index.native.js +3 -1
  33. package/build/mobile/link-picker/index.native.js.map +1 -1
  34. package/build/mobile/link-picker/link-picker-results.native.js +6 -4
  35. package/build/mobile/link-picker/link-picker-results.native.js.map +1 -1
  36. package/build/mobile/link-picker/link-picker-screen.native.js +3 -1
  37. package/build/mobile/link-picker/link-picker-screen.native.js.map +1 -1
  38. package/build/mobile/link-settings/index.native.js +24 -6
  39. package/build/mobile/link-settings/index.native.js.map +1 -1
  40. package/build/mobile/link-settings/link-settings-screen.native.js +3 -1
  41. package/build/mobile/link-settings/link-settings-screen.native.js.map +1 -1
  42. package/build/mobile/segmented-control/index.native.js +6 -2
  43. package/build/mobile/segmented-control/index.native.js.map +1 -1
  44. package/build/mobile/utils/use-unit-converter-to-mobile.native.js +6 -2
  45. package/build/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
  46. package/build/notice/index.native.js +15 -19
  47. package/build/notice/index.native.js.map +1 -1
  48. package/build/notice/list.native.js +2 -3
  49. package/build/notice/list.native.js.map +1 -1
  50. package/build/palette-edit/index.js +1 -1
  51. package/build/palette-edit/index.js.map +1 -1
  52. package/build/popover/index.js +29 -32
  53. package/build/popover/index.js.map +1 -1
  54. package/build/popover/limit-shift.js +145 -0
  55. package/build/popover/limit-shift.js.map +1 -0
  56. package/build/popover/utils.js +55 -15
  57. package/build/popover/utils.js.map +1 -1
  58. package/build/range-control/input-range.js +1 -15
  59. package/build/range-control/input-range.js.map +1 -1
  60. package/build/range-control/tooltip.js +1 -1
  61. package/build/range-control/tooltip.js.map +1 -1
  62. package/build/range-control/utils.js +2 -58
  63. package/build/range-control/utils.js.map +1 -1
  64. package/build/tools-panel/styles.js +27 -12
  65. package/build/tools-panel/styles.js.map +1 -1
  66. package/build/tools-panel/tools-panel-header/component.js +19 -6
  67. package/build/tools-panel/tools-panel-header/component.js.map +1 -1
  68. package/build/tools-panel/tools-panel-header/hook.js +4 -0
  69. package/build/tools-panel/tools-panel-header/hook.js.map +1 -1
  70. package/build/tree-grid/index.js +13 -8
  71. package/build/tree-grid/index.js.map +1 -1
  72. package/build/unit-control/index.js +2 -2
  73. package/build/unit-control/index.js.map +1 -1
  74. package/build/unit-control/index.native.js +10 -2
  75. package/build/unit-control/index.native.js.map +1 -1
  76. package/build/unit-control/styles/unit-control-styles.js +21 -32
  77. package/build/unit-control/styles/unit-control-styles.js.map +1 -1
  78. package/build/utils/hooks/use-controlled-state.js +2 -3
  79. package/build/utils/hooks/use-controlled-state.js.map +1 -1
  80. package/build-module/autocomplete/get-default-use-items.js +1 -1
  81. package/build-module/autocomplete/get-default-use-items.js.map +1 -1
  82. package/build-module/box-control/unit-control.js +0 -1
  83. package/build-module/box-control/unit-control.js.map +1 -1
  84. package/build-module/button/index.js +5 -1
  85. package/build-module/button/index.js.map +1 -1
  86. package/build-module/draggable/index.js +2 -5
  87. package/build-module/draggable/index.js.map +1 -1
  88. package/build-module/drop-zone/index.js +7 -1
  89. package/build-module/drop-zone/index.js.map +1 -1
  90. package/build-module/higher-order/with-filters/index.js +2 -2
  91. package/build-module/higher-order/with-filters/index.js.map +1 -1
  92. package/build-module/index.js +1 -1
  93. package/build-module/index.js.map +1 -1
  94. package/build-module/menu-item/index.js +4 -3
  95. package/build-module/menu-item/index.js.map +1 -1
  96. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +10 -3
  97. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js.map +1 -1
  98. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +13 -4
  99. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  100. package/build-module/mobile/bottom-sheet/sub-sheet/index.native.js +4 -1
  101. package/build-module/mobile/bottom-sheet/sub-sheet/index.native.js.map +1 -1
  102. package/build-module/mobile/color-settings/index.native.js +3 -1
  103. package/build-module/mobile/color-settings/index.native.js.map +1 -1
  104. package/build-module/mobile/color-settings/picker-screen.native.js +3 -1
  105. package/build-module/mobile/color-settings/picker-screen.native.js.map +1 -1
  106. package/build-module/mobile/image/index.native.js +3 -1
  107. package/build-module/mobile/image/index.native.js.map +1 -1
  108. package/build-module/mobile/keyboard-avoiding-view/index.ios.js +3 -1
  109. package/build-module/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
  110. package/build-module/mobile/link-picker/index.native.js +3 -1
  111. package/build-module/mobile/link-picker/index.native.js.map +1 -1
  112. package/build-module/mobile/link-picker/link-picker-results.native.js +4 -2
  113. package/build-module/mobile/link-picker/link-picker-results.native.js.map +1 -1
  114. package/build-module/mobile/link-picker/link-picker-screen.native.js +3 -1
  115. package/build-module/mobile/link-picker/link-picker-screen.native.js.map +1 -1
  116. package/build-module/mobile/link-settings/index.native.js +24 -6
  117. package/build-module/mobile/link-settings/index.native.js.map +1 -1
  118. package/build-module/mobile/link-settings/link-settings-screen.native.js +3 -1
  119. package/build-module/mobile/link-settings/link-settings-screen.native.js.map +1 -1
  120. package/build-module/mobile/segmented-control/index.native.js +6 -2
  121. package/build-module/mobile/segmented-control/index.native.js.map +1 -1
  122. package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js +6 -2
  123. package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
  124. package/build-module/notice/index.native.js +16 -21
  125. package/build-module/notice/index.native.js.map +1 -1
  126. package/build-module/notice/list.native.js +3 -3
  127. package/build-module/notice/list.native.js.map +1 -1
  128. package/build-module/palette-edit/index.js +1 -1
  129. package/build-module/palette-edit/index.js.map +1 -1
  130. package/build-module/popover/index.js +31 -35
  131. package/build-module/popover/index.js.map +1 -1
  132. package/build-module/popover/limit-shift.js +136 -0
  133. package/build-module/popover/limit-shift.js.map +1 -0
  134. package/build-module/popover/utils.js +55 -15
  135. package/build-module/popover/utils.js.map +1 -1
  136. package/build-module/range-control/input-range.js +1 -14
  137. package/build-module/range-control/input-range.js.map +1 -1
  138. package/build-module/range-control/tooltip.js +1 -1
  139. package/build-module/range-control/tooltip.js.map +1 -1
  140. package/build-module/range-control/utils.js +2 -57
  141. package/build-module/range-control/utils.js.map +1 -1
  142. package/build-module/tools-panel/styles.js +23 -12
  143. package/build-module/tools-panel/styles.js.map +1 -1
  144. package/build-module/tools-panel/tools-panel-header/component.js +19 -7
  145. package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
  146. package/build-module/tools-panel/tools-panel-header/hook.js +4 -0
  147. package/build-module/tools-panel/tools-panel-header/hook.js.map +1 -1
  148. package/build-module/tree-grid/index.js +13 -8
  149. package/build-module/tree-grid/index.js.map +1 -1
  150. package/build-module/unit-control/index.js +2 -2
  151. package/build-module/unit-control/index.js.map +1 -1
  152. package/build-module/unit-control/index.native.js +10 -2
  153. package/build-module/unit-control/index.native.js.map +1 -1
  154. package/build-module/unit-control/styles/unit-control-styles.js +20 -31
  155. package/build-module/unit-control/styles/unit-control-styles.js.map +1 -1
  156. package/build-module/utils/hooks/use-controlled-state.js +3 -4
  157. package/build-module/utils/hooks/use-controlled-state.js.map +1 -1
  158. package/build-style/style-rtl.css +13 -2
  159. package/build-style/style.css +13 -2
  160. package/build-types/button/index.d.ts.map +1 -1
  161. package/build-types/draggable/index.d.ts.map +1 -1
  162. package/build-types/drop-zone/index.d.ts.map +1 -1
  163. package/build-types/external-link/styles/external-link-styles.d.ts +1 -1
  164. package/build-types/focal-point-picker/styles/focal-point-style.d.ts +3 -3
  165. package/build-types/menu-item/index.d.ts.map +1 -1
  166. package/build-types/popover/index.d.ts.map +1 -1
  167. package/build-types/popover/limit-shift.d.ts +87 -0
  168. package/build-types/popover/limit-shift.d.ts.map +1 -0
  169. package/build-types/popover/stories/e2e/index.d.ts +8 -0
  170. package/build-types/popover/stories/e2e/index.d.ts.map +1 -0
  171. package/build-types/popover/test/index.d.ts +2 -0
  172. package/build-types/popover/test/index.d.ts.map +1 -0
  173. package/build-types/popover/types.d.ts +1 -1
  174. package/build-types/popover/types.d.ts.map +1 -1
  175. package/build-types/popover/utils.d.ts.map +1 -1
  176. package/build-types/range-control/input-range.d.ts.map +1 -1
  177. package/build-types/range-control/stories/index.d.ts.map +1 -1
  178. package/build-types/range-control/types.d.ts +0 -34
  179. package/build-types/range-control/types.d.ts.map +1 -1
  180. package/build-types/range-control/utils.d.ts +1 -12
  181. package/build-types/range-control/utils.d.ts.map +1 -1
  182. package/build-types/spinner/index.d.ts +1 -1
  183. package/build-types/tools-panel/styles.d.ts +6 -0
  184. package/build-types/tools-panel/styles.d.ts.map +1 -1
  185. package/build-types/tools-panel/tools-panel-header/component.d.ts.map +1 -1
  186. package/build-types/tools-panel/tools-panel-header/hook.d.ts +1 -0
  187. package/build-types/tools-panel/tools-panel-header/hook.d.ts.map +1 -1
  188. package/build-types/tools-panel/types.d.ts +1 -0
  189. package/build-types/tools-panel/types.d.ts.map +1 -1
  190. package/build-types/unit-control/styles/unit-control-styles.d.ts +1 -4
  191. package/build-types/unit-control/styles/unit-control-styles.d.ts.map +1 -1
  192. package/build-types/utils/hooks/use-controlled-state.d.ts.map +1 -1
  193. package/package.json +17 -17
  194. package/src/autocomplete/get-default-use-items.js +1 -1
  195. package/src/box-control/unit-control.js +0 -1
  196. package/src/button/index.js +7 -1
  197. package/src/button/test/index.js +36 -0
  198. package/src/color-palette/test/__snapshots__/index.js.snap +169 -1106
  199. package/src/color-palette/test/index.js +107 -61
  200. package/src/draggable/index.js +2 -5
  201. package/src/drop-zone/index.tsx +4 -1
  202. package/src/font-size-picker/stories/e2e/index.js +47 -0
  203. package/src/higher-order/with-filters/index.js +2 -2
  204. package/src/index.js +1 -1
  205. package/src/menu-item/README.md +7 -0
  206. package/src/menu-item/index.js +11 -5
  207. package/src/menu-item/style.scss +1 -0
  208. package/src/menu-item/test/index.js +36 -0
  209. package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +9 -0
  210. package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +12 -2
  211. package/src/mobile/bottom-sheet/sub-sheet/index.native.js +3 -0
  212. package/src/mobile/color-settings/index.native.js +3 -0
  213. package/src/mobile/color-settings/picker-screen.native.js +3 -0
  214. package/src/mobile/image/index.native.js +3 -0
  215. package/src/mobile/keyboard-avoiding-view/index.ios.js +3 -0
  216. package/src/mobile/link-picker/index.native.js +3 -0
  217. package/src/mobile/link-picker/link-picker-results.native.js +4 -1
  218. package/src/mobile/link-picker/link-picker-screen.native.js +3 -0
  219. package/src/mobile/link-settings/index.native.js +18 -0
  220. package/src/mobile/link-settings/link-settings-screen.native.js +3 -0
  221. package/src/mobile/segmented-control/index.native.js +6 -0
  222. package/src/mobile/utils/use-unit-converter-to-mobile.native.js +6 -0
  223. package/src/notice/index.native.js +17 -20
  224. package/src/notice/list.native.js +7 -3
  225. package/src/palette-edit/index.js +1 -1
  226. package/src/placeholder/style.scss +1 -1
  227. package/src/popover/index.tsx +26 -42
  228. package/src/popover/limit-shift.ts +205 -0
  229. package/src/popover/stories/e2e/index.tsx +25 -0
  230. package/src/popover/test/index.tsx +230 -0
  231. package/src/popover/types.ts +1 -0
  232. package/src/popover/utils.ts +58 -16
  233. package/src/range-control/README.md +6 -7
  234. package/src/range-control/input-range.tsx +1 -21
  235. package/src/range-control/stories/index.tsx +2 -1
  236. package/src/range-control/tooltip.tsx +1 -1
  237. package/src/range-control/types.ts +0 -35
  238. package/src/range-control/utils.ts +3 -75
  239. package/src/tools-panel/stories/index.js +27 -0
  240. package/src/tools-panel/styles.ts +28 -1
  241. package/src/tools-panel/tools-panel-header/component.tsx +12 -5
  242. package/src/tools-panel/tools-panel-header/hook.ts +5 -0
  243. package/src/tools-panel/types.ts +1 -0
  244. package/src/tree-grid/index.js +23 -14
  245. package/src/tree-grid/test/__snapshots__/cell.js.snap +21 -17
  246. package/src/tree-grid/test/__snapshots__/index.js.snap +1 -1
  247. package/src/unit-control/index.native.js +8 -0
  248. package/src/unit-control/index.tsx +2 -2
  249. package/src/unit-control/styles/unit-control-styles.ts +0 -20
  250. package/src/unit-control/test/index.tsx +6 -3
  251. package/src/utils/hooks/use-controlled-state.js +9 -6
  252. package/tsconfig.tsbuildinfo +1 -1
  253. package/src/popover/test/__snapshots__/index.js.snap +0 -34
  254. package/src/popover/test/index.js +0 -164
  255. package/src/unit-control/test/__snapshots__/index.tsx.snap +0 -31
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/tools-panel/styles.ts"],"names":["toolsPanelGrid","columns","css","spacing","item","fullWidth","ToolsPanel","CONFIG","borderWidth","COLORS","gray","ToolsPanelWithInnerWrapper","ToolsPanelHiddenInnerWrapper","ToolsPanelHeader","ToolsPanelHeading","ToolsPanelItem","BaseControlWrapper","BaseControlField","BaseControlHelp","LabelWrapper","ToolsPanelItemPlaceholder","DropdownMenu"],"mappings":";;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;;;AAEA,MAAMA,cAAc,GAAG;AACtBC,EAAAA,OAAO,EAAIA,OAAF,qBAAuBC,UAAvB,4BACmB,WAAWD,OAAS,oBADvC,4qKADa;AAItBE,EAAAA,OAAO,mBAAED,UAAF,iBACS,kBAAO,CAAP,CADT,eAEM,kBAAO,CAAP,CAFN,qqKAJe;AAQtBE,EAAAA,IAAI,EAAE;AACLC,IAAAA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADJ;AARgB,CAAvB;;AAeO,MAAMC,UAAU,GAAKL,OAAF,qBAAuBC,UAAvB,EACtBF,cAAc,CAACC,OAAf,CAAwBA,OAAxB,CADsB,OAEtBD,cAAc,CAACG,OAFO,kBAIVI,cAAOC,WAJG,aAIoBC,cAAOC,IAAP,CAAa,GAAb,CAJpB,+BAMb,kBAAO,CAAP,CANa,wqKAAnB;AASP;AACA;AACA;AACA;AACA;;;;;AAEO,MAAMC,0BAA0B,GAAKV,OAAF,IAAuB;AAChE,0BAAOC,UAAP,8CAGKF,cAAc,CAACC,OAAf,CAAwBA,OAAxB,CAHL,OAIKD,cAAc,CAACG,OAJpB,OAKKH,cAAc,CAACI,IAAf,CAAoBC,SALzB;AAQA,CATM;;;AAWA,MAAMO,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlC;;AAMA,MAAMC,gBAAgB,oBAAGX,UAAH,EACzBF,cAAc,CAACI,IAAf,CAAoBC,SADK,WAEpB,kBAAO,CAAP,CAFoB,wCAYhB,kBAAO,CAAC,CAAR,CAZgB,mFAiBb,kBAAO,CAAP,CAjBa,+qKAAtB;;AAqBA,MAAMS,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAvB;;AAWA,MAAMC,cAAc,oBAAGb,UAAH,EACvBF,cAAc,CAACI,IAAf,CAAoBC,SADG,2EAapBW,0BAboB,uBAqBtBC,8BArBsB,oCA0BvBC,6BA1BuB,2BAqCpBC,gCArCoB,ssKAApB;;AA4CA,MAAMC,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAA/B;;AAIA,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledField as BaseControlField,\n\tStyledHelp as BaseControlHelp,\n\tWrapper as BaseControlWrapper,\n} from '../base-control/styles/base-control-styles';\nimport { LabelWrapper } from '../input-control/styles/input-control-styles';\nimport { COLORS, CONFIG } from '../utils';\nimport { space } from '../ui/utils/space';\n\nconst toolsPanelGrid = {\n\tcolumns: ( columns: number ) => css`\n\t\tgrid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };\n\t`,\n\tspacing: css`\n\t\tcolumn-gap: ${ space( 2 ) };\n\t\trow-gap: ${ space( 4 ) };\n\t`,\n\titem: {\n\t\tfullWidth: css`\n\t\t\tgrid-column: 1 / -1;\n\t\t`,\n\t},\n};\n\nexport const ToolsPanel = ( columns: number ) => css`\n\t${ toolsPanelGrid.columns( columns ) }\n\t${ toolsPanelGrid.spacing }\n\n\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };\n\tmargin-top: -1px;\n\tpadding: ${ space( 4 ) };\n`;\n\n/**\n * Items injected into a ToolsPanel via a virtual bubbling slot will require\n * an inner dom element to be injected. The following rule allows for the\n * CSS grid display to be re-established.\n */\n\nexport const ToolsPanelWithInnerWrapper = ( columns: number ) => {\n\treturn css`\n\t\t> div:not( :first-of-type ) {\n\t\t\tdisplay: grid;\n\t\t\t${ toolsPanelGrid.columns( columns ) }\n\t\t\t${ toolsPanelGrid.spacing }\n\t\t\t${ toolsPanelGrid.item.fullWidth }\n\t\t}\n\t`;\n};\n\nexport const ToolsPanelHiddenInnerWrapper = css`\n\t> div:not( :first-of-type ) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const ToolsPanelHeader = css`\n\t${ toolsPanelGrid.item.fullWidth }\n\tgap: ${ space( 2 ) };\n\n\t/**\n\t * The targeting of dropdown menu component classes here is a temporary\n\t * measure only.\n\t *\n\t * The following styles should be replaced once the DropdownMenu has been\n\t * refactored and can be targeted via component interpolation.\n\t */\n\t.components-dropdown-menu {\n\t\tmargin: ${ space( -1 ) } 0;\n\t\tline-height: 0;\n\t}\n\t&&&& .components-dropdown-menu__toggle {\n\t\tpadding: 0;\n\t\tmin-width: ${ space( 6 ) };\n\t}\n`;\n\nexport const ToolsPanelHeading = css`\n\tfont-size: inherit;\n\tfont-weight: 500;\n\tline-height: normal;\n\n\t/* Required to meet specificity requirements to ensure zero margin */\n\t&& {\n\t\tmargin: 0;\n\t}\n`;\n\nexport const ToolsPanelItem = css`\n\t${ toolsPanelGrid.item.fullWidth }\n\n\t/* Clear spacing in and around controls added as panel items. */\n\t/* Remove when they can be addressed via context system. */\n\t& > div,\n\t& > fieldset {\n\t\tpadding-bottom: 0;\n\t\tmargin-bottom: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t/* Remove BaseControl components margins and leave spacing to grid layout */\n\t&& ${ BaseControlWrapper } {\n\t\tmargin-bottom: 0;\n\n\t\t/**\n\t\t * To maintain proper spacing within a base control, the field's bottom\n\t\t * margin should only be removed when there is no help text included and\n\t\t * it is therefore the last-child.\n\t\t */\n\t\t${ BaseControlField }:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t${ BaseControlHelp } {\n\t\tmargin-bottom: 0;\n\t}\n\n\t/**\n\t * Standardize InputControl and BaseControl labels with other labels when\n\t * inside ToolsPanel.\n\t *\n\t * This is a temporary fix until the different control components have their\n\t * labels normalized.\n\t */\n\t&& ${ LabelWrapper } {\n\t\tlabel {\n\t\t\tline-height: 1.4em;\n\t\t}\n\t}\n`;\n\nexport const ToolsPanelItemPlaceholder = css`\n\tdisplay: none;\n`;\n\nexport const DropdownMenu = css`\n\tmin-width: 200px;\n`;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/tools-panel/styles.ts"],"names":["toolsPanelGrid","columns","css","spacing","item","fullWidth","ToolsPanel","CONFIG","borderWidth","COLORS","gray","ToolsPanelWithInnerWrapper","ToolsPanelHiddenInnerWrapper","ToolsPanelHeader","ToolsPanelHeading","ToolsPanelItem","BaseControlWrapper","BaseControlField","BaseControlHelp","LabelWrapper","ToolsPanelItemPlaceholder","DropdownMenu","ResetLabel","marginLeft","DefaultControlsItem"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;AAKA;;AACA;;AACA;;;;AAEA,MAAMA,cAAc,GAAG;AACtBC,EAAAA,OAAO,EAAIA,OAAF,qBAAuBC,UAAvB,4BACmB,WAAWD,OAAS,oBADvC,45LADa;AAItBE,EAAAA,OAAO,mBAAED,UAAF,iBACS,kBAAO,CAAP,CADT,eAEM,kBAAO,CAAP,CAFN,q5LAJe;AAQtBE,EAAAA,IAAI,EAAE;AACLC,IAAAA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADJ;AARgB,CAAvB;;AAeO,MAAMC,UAAU,GAAKL,OAAF,qBAAuBC,UAAvB,EACtBF,cAAc,CAACC,OAAf,CAAwBA,OAAxB,CADsB,OAEtBD,cAAc,CAACG,OAFO,kBAIVI,cAAOC,WAJG,aAIoBC,cAAOC,IAAP,CAAa,GAAb,CAJpB,+BAMb,kBAAO,CAAP,CANa,w5LAAnB;AASP;AACA;AACA;AACA;AACA;;;;;AAEO,MAAMC,0BAA0B,GAAKV,OAAF,IAAuB;AAChE,0BAAOC,UAAP,8CAGKF,cAAc,CAACC,OAAf,CAAwBA,OAAxB,CAHL,OAIKD,cAAc,CAACG,OAJpB,OAKKH,cAAc,CAACI,IAAf,CAAoBC,SALzB;AAQA,CATM;;;AAWA,MAAMO,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlC;;AAMA,MAAMC,gBAAgB,oBAAGX,UAAH,EACzBF,cAAc,CAACI,IAAf,CAAoBC,SADK,WAEpB,kBAAO,CAAP,CAFoB,wCAYhB,kBAAO,CAAC,CAAR,CAZgB,mFAiBb,kBAAO,CAAP,CAjBa,+5LAAtB;;AAqBA,MAAMS,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAvB;;AAWA,MAAMC,cAAc,oBAAGb,UAAH,EACvBF,cAAc,CAACI,IAAf,CAAoBC,SADG,2EAapBW,0BAboB,uBAqBtBC,8BArBsB,oCA0BvBC,6BA1BuB,2BAqCpBC,gCArCoB,s7LAApB;;AA4CA,MAAMC,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAA/B;;AAIA,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlB;;AAIA,MAAMC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,oGAKnB,gBAAK;AAAEC,EAAAA,UAAU,EAAE,kBAAO,CAAP;AAAd,CAAL,CALmB,82LAAhB;;AASA,MAAMC,mBAAmB,oBAAGtB,UAAH,YACrBO,cAAOC,IAAP,CAAa,GAAb,CADqB,sCAIpBD,cAAOC,IAAP,CAAa,GAAb,CAJoB,+BAQnBD,cAAOC,IAAP,CAAa,GAAb,CARmB,QAW3BY,UAX2B,+6LAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledField as BaseControlField,\n\tStyledHelp as BaseControlHelp,\n\tWrapper as BaseControlWrapper,\n} from '../base-control/styles/base-control-styles';\nimport { LabelWrapper } from '../input-control/styles/input-control-styles';\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\n\nconst toolsPanelGrid = {\n\tcolumns: ( columns: number ) => css`\n\t\tgrid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };\n\t`,\n\tspacing: css`\n\t\tcolumn-gap: ${ space( 2 ) };\n\t\trow-gap: ${ space( 4 ) };\n\t`,\n\titem: {\n\t\tfullWidth: css`\n\t\t\tgrid-column: 1 / -1;\n\t\t`,\n\t},\n};\n\nexport const ToolsPanel = ( columns: number ) => css`\n\t${ toolsPanelGrid.columns( columns ) }\n\t${ toolsPanelGrid.spacing }\n\n\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };\n\tmargin-top: -1px;\n\tpadding: ${ space( 4 ) };\n`;\n\n/**\n * Items injected into a ToolsPanel via a virtual bubbling slot will require\n * an inner dom element to be injected. The following rule allows for the\n * CSS grid display to be re-established.\n */\n\nexport const ToolsPanelWithInnerWrapper = ( columns: number ) => {\n\treturn css`\n\t\t> div:not( :first-of-type ) {\n\t\t\tdisplay: grid;\n\t\t\t${ toolsPanelGrid.columns( columns ) }\n\t\t\t${ toolsPanelGrid.spacing }\n\t\t\t${ toolsPanelGrid.item.fullWidth }\n\t\t}\n\t`;\n};\n\nexport const ToolsPanelHiddenInnerWrapper = css`\n\t> div:not( :first-of-type ) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const ToolsPanelHeader = css`\n\t${ toolsPanelGrid.item.fullWidth }\n\tgap: ${ space( 2 ) };\n\n\t/**\n\t * The targeting of dropdown menu component classes here is a temporary\n\t * measure only.\n\t *\n\t * The following styles should be replaced once the DropdownMenu has been\n\t * refactored and can be targeted via component interpolation.\n\t */\n\t.components-dropdown-menu {\n\t\tmargin: ${ space( -1 ) } 0;\n\t\tline-height: 0;\n\t}\n\t&&&& .components-dropdown-menu__toggle {\n\t\tpadding: 0;\n\t\tmin-width: ${ space( 6 ) };\n\t}\n`;\n\nexport const ToolsPanelHeading = css`\n\tfont-size: inherit;\n\tfont-weight: 500;\n\tline-height: normal;\n\n\t/* Required to meet specificity requirements to ensure zero margin */\n\t&& {\n\t\tmargin: 0;\n\t}\n`;\n\nexport const ToolsPanelItem = css`\n\t${ toolsPanelGrid.item.fullWidth }\n\n\t/* Clear spacing in and around controls added as panel items. */\n\t/* Remove when they can be addressed via context system. */\n\t& > div,\n\t& > fieldset {\n\t\tpadding-bottom: 0;\n\t\tmargin-bottom: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t/* Remove BaseControl components margins and leave spacing to grid layout */\n\t&& ${ BaseControlWrapper } {\n\t\tmargin-bottom: 0;\n\n\t\t/**\n\t\t * To maintain proper spacing within a base control, the field's bottom\n\t\t * margin should only be removed when there is no help text included and\n\t\t * it is therefore the last-child.\n\t\t */\n\t\t${ BaseControlField }:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t${ BaseControlHelp } {\n\t\tmargin-bottom: 0;\n\t}\n\n\t/**\n\t * Standardize InputControl and BaseControl labels with other labels when\n\t * inside ToolsPanel.\n\t *\n\t * This is a temporary fix until the different control components have their\n\t * labels normalized.\n\t */\n\t&& ${ LabelWrapper } {\n\t\tlabel {\n\t\t\tline-height: 1.4em;\n\t\t}\n\t}\n`;\n\nexport const ToolsPanelItemPlaceholder = css`\n\tdisplay: none;\n`;\n\nexport const DropdownMenu = css`\n\tmin-width: 200px;\n`;\n\nexport const ResetLabel = styled.span`\n\tcolor: var( --wp-admin-theme-color-darker-10 );\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tline-height: 1.4;\n\t${ rtl( { marginLeft: space( 3 ) } ) }\n\ttext-transform: uppercase;\n`;\n\nexport const DefaultControlsItem = css`\n\tcolor: ${ COLORS.gray[ 900 ] };\n\n\t&&[aria-disabled='true'] {\n\t\tcolor: ${ COLORS.gray[ 700 ] };\n\t\topacity: 1;\n\n\t\t&:hover {\n\t\t\tcolor: ${ COLORS.gray[ 700 ] };\n\t\t}\n\n\t\t${ ResetLabel } {\n\t\t\topacity: 0.3;\n\t\t}\n\t}\n`;\n"]}
@@ -31,6 +31,8 @@ var _hook = require("./hook");
31
31
 
32
32
  var _context = require("../../ui/context");
33
33
 
34
+ var _styles = require("../styles");
35
+
34
36
  /**
35
37
  * External dependencies
36
38
  */
@@ -44,6 +46,7 @@ var _context = require("../../ui/context");
44
46
  */
45
47
  const DefaultControlsGroup = _ref => {
46
48
  let {
49
+ itemClassName,
47
50
  items,
48
51
  toggleItem
49
52
  } = _ref;
@@ -52,28 +55,34 @@ const DefaultControlsGroup = _ref => {
52
55
  return null;
53
56
  }
54
57
 
55
- return (0, _element.createElement)(_menuGroup.default, null, items.map(_ref2 => {
58
+ const resetSuffix = (0, _element.createElement)(_styles.ResetLabel, {
59
+ "aria-hidden": true
60
+ }, (0, _i18n.__)('Reset'));
61
+ return (0, _element.createElement)(_menuGroup.default, {
62
+ label: (0, _i18n.__)('Defaults')
63
+ }, items.map(_ref2 => {
56
64
  let [label, hasValue] = _ref2;
57
65
 
58
66
  if (hasValue) {
59
67
  return (0, _element.createElement)(_menuItem.default, {
60
68
  key: label,
69
+ className: itemClassName,
61
70
  role: "menuitem",
62
- icon: _icons.reset,
63
71
  label: (0, _i18n.sprintf)( // translators: %s: The name of the control being reset e.g. "Padding".
64
72
  (0, _i18n.__)('Reset %s'), label),
65
73
  onClick: () => {
66
74
  toggleItem(label);
67
75
  (0, _a11y.speak)((0, _i18n.sprintf)( // translators: %s: The name of the control being reset e.g. "Padding".
68
76
  (0, _i18n.__)('%s reset to default'), label), 'assertive');
69
- }
77
+ },
78
+ suffix: resetSuffix
70
79
  }, label);
71
80
  }
72
81
 
73
82
  return (0, _element.createElement)(_menuItem.default, {
74
83
  key: label,
84
+ className: itemClassName,
75
85
  role: "menuitemcheckbox",
76
- icon: _icons.check,
77
86
  isSelected: true,
78
87
  "aria-disabled": true
79
88
  }, label);
@@ -90,7 +99,9 @@ const OptionalControlsGroup = _ref3 => {
90
99
  return null;
91
100
  }
92
101
 
93
- return (0, _element.createElement)(_menuGroup.default, null, items.map(_ref4 => {
102
+ return (0, _element.createElement)(_menuGroup.default, {
103
+ label: (0, _i18n.__)('Tools')
104
+ }, items.map(_ref4 => {
94
105
  let [label, isSelected] = _ref4;
95
106
  const itemLabel = isSelected ? (0, _i18n.sprintf)( // translators: %s: The name of the control being hidden and reset e.g. "Padding".
96
107
  (0, _i18n.__)('Hide and reset %s'), label) : (0, _i18n.sprintf)( // translators: %s: The name of the control to display e.g. "Padding".
@@ -119,6 +130,7 @@ const OptionalControlsGroup = _ref3 => {
119
130
  const ToolsPanelHeader = (props, forwardedRef) => {
120
131
  const {
121
132
  areAllOptionalControlsHidden,
133
+ defaultControlsItemClassName,
122
134
  dropdownMenuClassName,
123
135
  hasMenuItems,
124
136
  headingClassName,
@@ -160,7 +172,8 @@ const ToolsPanelHeader = (props, forwardedRef) => {
160
172
  }
161
173
  }, () => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(DefaultControlsGroup, {
162
174
  items: defaultItems,
163
- toggleItem: toggleItem
175
+ toggleItem: toggleItem,
176
+ itemClassName: defaultControlsItemClassName
164
177
  }), (0, _element.createElement)(OptionalControlsGroup, {
165
178
  items: optionalItems,
166
179
  toggleItem: toggleItem
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/component.tsx"],"names":["DefaultControlsGroup","items","toggleItem","length","map","label","hasValue","reset","check","OptionalControlsGroup","isSelected","itemLabel","ToolsPanelHeader","props","forwardedRef","areAllOptionalControlsHidden","dropdownMenuClassName","hasMenuItems","headingClassName","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","dropDownMenuIcon","plus","moreVertical","dropDownMenuLabelText","dropdownMenuDescriptionText","undefined","canResetAll","some","className","isSmall","describedBy","ConnectedToolsPanelHeader"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { check, reset, moreVertical, plus } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../../dropdown-menu';\nimport MenuGroup from '../../menu-group';\nimport MenuItem from '../../menu-item';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { useToolsPanelHeader } from './hook';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type {\n\tToolsPanelControlsGroupProps,\n\tToolsPanelHeaderProps,\n} from '../types';\n\nconst DefaultControlsGroup = ( {\n\titems,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, hasValue ] ) => {\n\t\t\t\tif ( hasValue ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\t\trole=\"menuitem\"\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t\t__( 'Reset %s' ),\n\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t\t\t\t__( '%s reset to default' ),\n\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t'assertive'\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\taria-disabled\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst OptionalControlsGroup = ( {\n\titems,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, isSelected ] ) => {\n\t\t\t\tconst itemLabel = isSelected\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being hidden and reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Hide and reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control to display e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Show %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t );\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tif ( isSelected ) {\n\t\t\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t\t\t\t__( '%s hidden and reset to default' ),\n\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t'assertive'\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t\t\t\t__( '%s is now visible' ),\n\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t'assertive'\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst ToolsPanelHeader = (\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tareAllOptionalControlsHidden,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tlabel: labelText,\n\t\tmenuItems,\n\t\tresetAll,\n\t\ttoggleItem,\n\t\t...headerProps\n\t} = useToolsPanelHeader( props );\n\n\tif ( ! labelText ) {\n\t\treturn null;\n\t}\n\n\tconst defaultItems = Object.entries( menuItems?.default || {} );\n\tconst optionalItems = Object.entries( menuItems?.optional || {} );\n\tconst dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;\n\tconst dropDownMenuLabelText = sprintf(\n\t\t// translators: %s: The name of the tool e.g. \"Color\" or \"Typography\".\n\t\t_x( '%s options', 'Button label to reveal tool panel options' ),\n\t\tlabelText\n\t);\n\tconst dropdownMenuDescriptionText = areAllOptionalControlsHidden\n\t\t? __( 'All options are currently hidden' )\n\t\t: undefined;\n\n\tconst canResetAll = [ ...defaultItems, ...optionalItems ].some(\n\t\t( [ , isSelected ] ) => isSelected\n\t);\n\n\treturn (\n\t\t<HStack { ...headerProps } ref={ forwardedRef }>\n\t\t\t<Heading level={ 2 } className={ headingClassName }>\n\t\t\t\t{ labelText }\n\t\t\t</Heading>\n\t\t\t{ hasMenuItems && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ dropDownMenuIcon }\n\t\t\t\t\tlabel={ dropDownMenuLabelText }\n\t\t\t\t\tmenuProps={ { className: dropdownMenuClassName } }\n\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\tdescribedBy: dropdownMenuDescriptionText,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ () => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DefaultControlsGroup\n\t\t\t\t\t\t\t\titems={ defaultItems }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<OptionalControlsGroup\n\t\t\t\t\t\t\t\titems={ optionalItems }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\taria-disabled={ ! canResetAll }\n\t\t\t\t\t\t\t\t\tvariant={ 'tertiary' }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif ( canResetAll ) {\n\t\t\t\t\t\t\t\t\t\t\tresetAll();\n\t\t\t\t\t\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'All options reset' ),\n\t\t\t\t\t\t\t\t\t\t\t\t'assertive'\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset all' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n};\n\nconst ConnectedToolsPanelHeader = contextConnect(\n\tToolsPanelHeader,\n\t'ToolsPanelHeader'\n);\n\nexport default ConnectedToolsPanelHeader;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/component.tsx"],"names":["DefaultControlsGroup","itemClassName","items","toggleItem","length","resetSuffix","map","label","hasValue","OptionalControlsGroup","isSelected","itemLabel","check","ToolsPanelHeader","props","forwardedRef","areAllOptionalControlsHidden","defaultControlsItemClassName","dropdownMenuClassName","hasMenuItems","headingClassName","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","dropDownMenuIcon","plus","moreVertical","dropDownMenuLabelText","dropdownMenuDescriptionText","undefined","canResetAll","some","className","isSmall","describedBy","ConnectedToolsPanelHeader"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { check, moreVertical, plus } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../../dropdown-menu';\nimport MenuGroup from '../../menu-group';\nimport MenuItem from '../../menu-item';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { useToolsPanelHeader } from './hook';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { ResetLabel } from '../styles';\nimport type {\n\tToolsPanelControlsGroupProps,\n\tToolsPanelHeaderProps,\n} from '../types';\n\nconst DefaultControlsGroup = ( {\n\titemClassName,\n\titems,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\tconst resetSuffix = <ResetLabel aria-hidden>{ __( 'Reset' ) }</ResetLabel>;\n\n\treturn (\n\t\t<MenuGroup label={ __( 'Defaults' ) }>\n\t\t\t{ items.map( ( [ label, hasValue ] ) => {\n\t\t\t\tif ( hasValue ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\t\tclassName={ itemClassName }\n\t\t\t\t\t\t\trole=\"menuitem\"\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t\t__( 'Reset %s' ),\n\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t\t\t\t__( '%s reset to default' ),\n\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t'assertive'\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsuffix={ resetSuffix }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\tclassName={ itemClassName }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\taria-disabled\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst OptionalControlsGroup = ( {\n\titems,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup label={ __( 'Tools' ) }>\n\t\t\t{ items.map( ( [ label, isSelected ] ) => {\n\t\t\t\tconst itemLabel = isSelected\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being hidden and reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Hide and reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control to display e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Show %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t );\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tif ( isSelected ) {\n\t\t\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t\t\t\t__( '%s hidden and reset to default' ),\n\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t'assertive'\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t\t\t\t__( '%s is now visible' ),\n\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t'assertive'\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst ToolsPanelHeader = (\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tareAllOptionalControlsHidden,\n\t\tdefaultControlsItemClassName,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tlabel: labelText,\n\t\tmenuItems,\n\t\tresetAll,\n\t\ttoggleItem,\n\t\t...headerProps\n\t} = useToolsPanelHeader( props );\n\n\tif ( ! labelText ) {\n\t\treturn null;\n\t}\n\n\tconst defaultItems = Object.entries( menuItems?.default || {} );\n\tconst optionalItems = Object.entries( menuItems?.optional || {} );\n\tconst dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;\n\tconst dropDownMenuLabelText = sprintf(\n\t\t// translators: %s: The name of the tool e.g. \"Color\" or \"Typography\".\n\t\t_x( '%s options', 'Button label to reveal tool panel options' ),\n\t\tlabelText\n\t);\n\tconst dropdownMenuDescriptionText = areAllOptionalControlsHidden\n\t\t? __( 'All options are currently hidden' )\n\t\t: undefined;\n\n\tconst canResetAll = [ ...defaultItems, ...optionalItems ].some(\n\t\t( [ , isSelected ] ) => isSelected\n\t);\n\n\treturn (\n\t\t<HStack { ...headerProps } ref={ forwardedRef }>\n\t\t\t<Heading level={ 2 } className={ headingClassName }>\n\t\t\t\t{ labelText }\n\t\t\t</Heading>\n\t\t\t{ hasMenuItems && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ dropDownMenuIcon }\n\t\t\t\t\tlabel={ dropDownMenuLabelText }\n\t\t\t\t\tmenuProps={ { className: dropdownMenuClassName } }\n\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\tdescribedBy: dropdownMenuDescriptionText,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ () => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DefaultControlsGroup\n\t\t\t\t\t\t\t\titems={ defaultItems }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t\titemClassName={ defaultControlsItemClassName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<OptionalControlsGroup\n\t\t\t\t\t\t\t\titems={ optionalItems }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\taria-disabled={ ! canResetAll }\n\t\t\t\t\t\t\t\t\tvariant={ 'tertiary' }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif ( canResetAll ) {\n\t\t\t\t\t\t\t\t\t\t\tresetAll();\n\t\t\t\t\t\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'All options reset' ),\n\t\t\t\t\t\t\t\t\t\t\t\t'assertive'\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset all' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n};\n\nconst ConnectedToolsPanelHeader = contextConnect(\n\tToolsPanelHeader,\n\t'ToolsPanelHeader'\n);\n\nexport default ConnectedToolsPanelHeader;\n"]}
@@ -41,6 +41,9 @@ function useToolsPanelHeader(props) {
41
41
  const headingClassName = (0, _element.useMemo)(() => {
42
42
  return cx(styles.ToolsPanelHeading);
43
43
  }, [cx]);
44
+ const defaultControlsItemClassName = (0, _element.useMemo)(() => {
45
+ return cx(styles.DefaultControlsItem);
46
+ }, [cx]);
44
47
  const {
45
48
  menuItems,
46
49
  hasMenuItems,
@@ -48,6 +51,7 @@ function useToolsPanelHeader(props) {
48
51
  } = (0, _context.useToolsPanelContext)();
49
52
  return { ...otherProps,
50
53
  areAllOptionalControlsHidden,
54
+ defaultControlsItemClassName,
51
55
  dropdownMenuClassName,
52
56
  hasMenuItems,
53
57
  headingClassName,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/hook.ts"],"names":["useToolsPanelHeader","props","className","otherProps","cx","classes","styles","ToolsPanelHeader","dropdownMenuClassName","DropdownMenu","headingClassName","ToolsPanelHeading","menuItems","hasMenuItems","areAllOptionalControlsHidden"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,mBAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+B,gCACpCF,KADoC,EAEpC,kBAFoC,CAArC;AAKA,QAAMG,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,gBAAT,EAA2BL,SAA3B,CAAT;AACA,GAFe,EAEb,CAAEA,SAAF,EAAaE,EAAb,CAFa,CAAhB;AAIA,QAAMI,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,WAAOJ,EAAE,CAAEE,MAAM,CAACG,YAAT,CAAT;AACA,GAF6B,EAE3B,CAAEL,EAAF,CAF2B,CAA9B;AAIA,QAAMM,gBAAgB,GAAG,sBAAS,MAAM;AACvC,WAAON,EAAE,CAAEE,MAAM,CAACK,iBAAT,CAAT;AACA,GAFwB,EAEtB,CAAEP,EAAF,CAFsB,CAAzB;AAIA,QAAM;AAAEQ,IAAAA,SAAF;AAAaC,IAAAA,YAAb;AAA2BC,IAAAA;AAA3B,MACL,oCADD;AAGA,SAAO,EACN,GAAGX,UADG;AAENW,IAAAA,4BAFM;AAGNN,IAAAA,qBAHM;AAINK,IAAAA,YAJM;AAKNH,IAAAA,gBALM;AAMNE,IAAAA,SANM;AAONV,IAAAA,SAAS,EAAEG;AAPL,GAAP;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelHeaderProps } from '../types';\n\nexport function useToolsPanelHeader(\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'ToolsPanelHeader'\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelHeader, className );\n\t}, [ className, cx ] );\n\n\tconst dropdownMenuClassName = useMemo( () => {\n\t\treturn cx( styles.DropdownMenu );\n\t}, [ cx ] );\n\n\tconst headingClassName = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelHeading );\n\t}, [ cx ] );\n\n\tconst { menuItems, hasMenuItems, areAllOptionalControlsHidden } =\n\t\tuseToolsPanelContext();\n\n\treturn {\n\t\t...otherProps,\n\t\tareAllOptionalControlsHidden,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tmenuItems,\n\t\tclassName: classes,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/hook.ts"],"names":["useToolsPanelHeader","props","className","otherProps","cx","classes","styles","ToolsPanelHeader","dropdownMenuClassName","DropdownMenu","headingClassName","ToolsPanelHeading","defaultControlsItemClassName","DefaultControlsItem","menuItems","hasMenuItems","areAllOptionalControlsHidden"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,mBAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+B,gCACpCF,KADoC,EAEpC,kBAFoC,CAArC;AAKA,QAAMG,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,gBAAT,EAA2BL,SAA3B,CAAT;AACA,GAFe,EAEb,CAAEA,SAAF,EAAaE,EAAb,CAFa,CAAhB;AAIA,QAAMI,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,WAAOJ,EAAE,CAAEE,MAAM,CAACG,YAAT,CAAT;AACA,GAF6B,EAE3B,CAAEL,EAAF,CAF2B,CAA9B;AAIA,QAAMM,gBAAgB,GAAG,sBAAS,MAAM;AACvC,WAAON,EAAE,CAAEE,MAAM,CAACK,iBAAT,CAAT;AACA,GAFwB,EAEtB,CAAEP,EAAF,CAFsB,CAAzB;AAIA,QAAMQ,4BAA4B,GAAG,sBAAS,MAAM;AACnD,WAAOR,EAAE,CAAEE,MAAM,CAACO,mBAAT,CAAT;AACA,GAFoC,EAElC,CAAET,EAAF,CAFkC,CAArC;AAIA,QAAM;AAAEU,IAAAA,SAAF;AAAaC,IAAAA,YAAb;AAA2BC,IAAAA;AAA3B,MACL,oCADD;AAGA,SAAO,EACN,GAAGb,UADG;AAENa,IAAAA,4BAFM;AAGNJ,IAAAA,4BAHM;AAINJ,IAAAA,qBAJM;AAKNO,IAAAA,YALM;AAMNL,IAAAA,gBANM;AAONI,IAAAA,SAPM;AAQNZ,IAAAA,SAAS,EAAEG;AARL,GAAP;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { ToolsPanelHeaderProps } from '../types';\n\nexport function useToolsPanelHeader(\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'ToolsPanelHeader'\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelHeader, className );\n\t}, [ className, cx ] );\n\n\tconst dropdownMenuClassName = useMemo( () => {\n\t\treturn cx( styles.DropdownMenu );\n\t}, [ cx ] );\n\n\tconst headingClassName = useMemo( () => {\n\t\treturn cx( styles.ToolsPanelHeading );\n\t}, [ cx ] );\n\n\tconst defaultControlsItemClassName = useMemo( () => {\n\t\treturn cx( styles.DefaultControlsItem );\n\t}, [ cx ] );\n\n\tconst { menuItems, hasMenuItems, areAllOptionalControlsHidden } =\n\t\tuseToolsPanelContext();\n\n\treturn {\n\t\t...otherProps,\n\t\tareAllOptionalControlsHidden,\n\t\tdefaultControlsItemClassName,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tmenuItems,\n\t\tclassName: classes,\n\t};\n}\n"]}
@@ -74,12 +74,13 @@ function getRowFocusables(rowElement) {
74
74
  * Renders both a table and tbody element, used to create a tree hierarchy.
75
75
  *
76
76
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
77
- * @param {Object} props Component props.
78
- * @param {WPElement} props.children Children to be rendered.
79
- * @param {Function} props.onExpandRow Callback to fire when row is expanded.
80
- * @param {Function} props.onCollapseRow Callback to fire when row is collapsed.
81
- * @param {Function} props.onFocusRow Callback to fire when moving focus to a different row.
82
- * @param {Object} ref A ref to the underlying DOM table element.
77
+ * @param {Object} props Component props.
78
+ * @param {WPElement} props.children Children to be rendered.
79
+ * @param {Function} props.onExpandRow Callback to fire when row is expanded.
80
+ * @param {Function} props.onCollapseRow Callback to fire when row is collapsed.
81
+ * @param {Function} props.onFocusRow Callback to fire when moving focus to a different row.
82
+ * @param {string} props.applicationAriaLabel Label to use for the application role.
83
+ * @param {Object} ref A ref to the underlying DOM table element.
83
84
  */
84
85
 
85
86
 
@@ -89,6 +90,7 @@ function TreeGrid(_ref, ref) {
89
90
  onExpandRow = () => {},
90
91
  onCollapseRow = () => {},
91
92
  onFocusRow = () => {},
93
+ applicationAriaLabel,
92
94
  ...props
93
95
  } = _ref;
94
96
  const onKeyDown = (0, _element.useCallback)(event => {
@@ -289,11 +291,14 @@ function TreeGrid(_ref, ref) {
289
291
 
290
292
  /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
291
293
 
292
- return (0, _element.createElement)(_rovingTabIndex.default, null, (0, _element.createElement)("table", (0, _extends2.default)({}, props, {
294
+ return (0, _element.createElement)(_rovingTabIndex.default, null, (0, _element.createElement)("div", {
295
+ role: "application",
296
+ "aria-label": applicationAriaLabel
297
+ }, (0, _element.createElement)("table", (0, _extends2.default)({}, props, {
293
298
  role: "treegrid",
294
299
  onKeyDown: onKeyDown,
295
300
  ref: ref
296
- }), (0, _element.createElement)("tbody", null, children)));
301
+ }), (0, _element.createElement)("tbody", null, children))));
297
302
  /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
298
303
  }
299
304
 
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/tree-grid/index.js"],"names":["getRowFocusables","rowElement","focusablesInRow","focus","focusable","find","sequential","length","filter","closest","TreeGrid","ref","children","onExpandRow","onCollapseRow","onFocusRow","props","onKeyDown","event","keyCode","metaKey","ctrlKey","altKey","hasModifierKeyPressed","UP","DOWN","LEFT","RIGHT","HOME","END","includes","stopPropagation","activeElement","document","currentTarget","treeGridElement","contains","activeRow","currentColumnIndex","indexOf","canExpandCollapse","cannotFocusNextColumn","getAttribute","nextIndex","Math","max","min","preventDefault","level","parseInt","rows","Array","from","querySelectorAll","parentRow","currentRowIndex","i","focusableItems","nextRowIndex","focusablesInNextRow"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { forwardRef, useCallback } from '@wordpress/element';\nimport { UP, DOWN, LEFT, RIGHT, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport RovingTabIndexContainer from './roving-tab-index';\n\n/**\n * Return focusables in a row element, excluding those from other branches\n * nested within the row.\n *\n * @param {Element} rowElement The DOM element representing the row.\n *\n * @return {?Array} The array of focusables in the row.\n */\nfunction getRowFocusables( rowElement ) {\n\tconst focusablesInRow = focus.focusable.find( rowElement, {\n\t\tsequential: true,\n\t} );\n\n\tif ( ! focusablesInRow || ! focusablesInRow.length ) {\n\t\treturn;\n\t}\n\n\treturn focusablesInRow.filter( ( focusable ) => {\n\t\treturn focusable.closest( '[role=\"row\"]' ) === rowElement;\n\t} );\n}\n\n/**\n * Renders both a table and tbody element, used to create a tree hierarchy.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md\n * @param {Object} props Component props.\n * @param {WPElement} props.children Children to be rendered.\n * @param {Function} props.onExpandRow Callback to fire when row is expanded.\n * @param {Function} props.onCollapseRow Callback to fire when row is collapsed.\n * @param {Function} props.onFocusRow Callback to fire when moving focus to a different row.\n * @param {Object} ref A ref to the underlying DOM table element.\n */\nfunction TreeGrid(\n\t{\n\t\tchildren,\n\t\tonExpandRow = () => {},\n\t\tonCollapseRow = () => {},\n\t\tonFocusRow = () => {},\n\t\t...props\n\t},\n\tref\n) {\n\tconst onKeyDown = useCallback(\n\t\t( event ) => {\n\t\t\tconst { keyCode, metaKey, ctrlKey, altKey } = event;\n\n\t\t\t// The shift key is intentionally absent from the following list,\n\t\t\t// to enable shift + up/down to select items from the list.\n\t\t\tconst hasModifierKeyPressed = metaKey || ctrlKey || altKey;\n\n\t\t\tif (\n\t\t\t\thasModifierKeyPressed ||\n\t\t\t\t! [ UP, DOWN, LEFT, RIGHT, HOME, END ].includes( keyCode )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// The event will be handled, stop propagation.\n\t\t\tevent.stopPropagation();\n\n\t\t\tconst { activeElement } = document;\n\t\t\tconst { currentTarget: treeGridElement } = event;\n\t\t\tif ( ! treeGridElement.contains( activeElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Calculate the columnIndex of the active element.\n\t\t\tconst activeRow = activeElement.closest( '[role=\"row\"]' );\n\t\t\tconst focusablesInRow = getRowFocusables( activeRow );\n\t\t\tconst currentColumnIndex = focusablesInRow.indexOf( activeElement );\n\t\t\tconst canExpandCollapse = 0 === currentColumnIndex;\n\t\t\tconst cannotFocusNextColumn =\n\t\t\t\tcanExpandCollapse &&\n\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) === 'false' &&\n\t\t\t\tkeyCode === RIGHT;\n\n\t\t\tif ( [ LEFT, RIGHT ].includes( keyCode ) ) {\n\t\t\t\t// Calculate to the next element.\n\t\t\t\tlet nextIndex;\n\t\t\t\tif ( keyCode === LEFT ) {\n\t\t\t\t\tnextIndex = Math.max( 0, currentColumnIndex - 1 );\n\t\t\t\t} else {\n\t\t\t\t\tnextIndex = Math.min(\n\t\t\t\t\t\tcurrentColumnIndex + 1,\n\t\t\t\t\t\tfocusablesInRow.length - 1\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Focus is at the left most column.\n\t\t\t\tif ( canExpandCollapse ) {\n\t\t\t\t\tif ( keyCode === LEFT ) {\n\t\t\t\t\t\t// Left:\n\t\t\t\t\t\t// If a row is focused, and it is expanded, collapses the current row.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) === 'true'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonCollapseRow( activeRow );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If a row is focused, and it is collapsed, moves to the parent row (if there is one).\n\t\t\t\t\t\tconst level = Math.max(\n\t\t\t\t\t\t\tparseInt(\n\t\t\t\t\t\t\t\tactiveRow?.getAttribute( 'aria-level' ) ?? 1,\n\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t) - 1,\n\t\t\t\t\t\t\t1\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst rows = Array.from(\n\t\t\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t\t\t);\n\t\t\t\t\t\tlet parentRow = activeRow;\n\t\t\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\t\t\tfor ( let i = currentRowIndex; i >= 0; i-- ) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tparseInt(\n\t\t\t\t\t\t\t\t\trows[ i ].getAttribute( 'aria-level' ),\n\t\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t\t) === level\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tparentRow = rows[ i ];\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgetRowFocusables( parentRow )?.[ 0 ]?.focus();\n\t\t\t\t\t}\n\t\t\t\t\tif ( keyCode === RIGHT ) {\n\t\t\t\t\t\t// Right:\n\t\t\t\t\t\t// If a row is focused, and it is collapsed, expands the current row.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) ===\n\t\t\t\t\t\t\t'false'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonExpandRow( activeRow );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If a row is focused, and it is expanded, focuses the rightmost cell in the row.\n\t\t\t\t\t\tconst focusableItems = getRowFocusables( activeRow );\n\t\t\t\t\t\tif ( focusableItems.length > 0 ) {\n\t\t\t\t\t\t\tfocusableItems[\n\t\t\t\t\t\t\t\tfocusableItems.length - 1\n\t\t\t\t\t\t\t]?.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start reading text on continued use of left/right arrow\n\t\t\t\t\t// keys.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.\n\t\t\t\tif ( cannotFocusNextColumn ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tfocusablesInRow[ nextIndex ].focus();\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t} else if ( [ UP, DOWN ].includes( keyCode ) ) {\n\t\t\t\t// Calculate the rowIndex of the next row.\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t);\n\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\tlet nextRowIndex;\n\n\t\t\t\tif ( keyCode === UP ) {\n\t\t\t\t\tnextRowIndex = Math.max( 0, currentRowIndex - 1 );\n\t\t\t\t} else {\n\t\t\t\t\tnextRowIndex = Math.min(\n\t\t\t\t\t\tcurrentRowIndex + 1,\n\t\t\t\t\t\trows.length - 1\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Focus is either at the top or bottom edge of the grid. Do nothing.\n\t\t\t\tif ( nextRowIndex === currentRowIndex ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start navigating horizontally when reaching the vertical\n\t\t\t\t\t// bounds of a table.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Get the focusables in the next row.\n\t\t\t\tconst focusablesInNextRow = getRowFocusables(\n\t\t\t\t\trows[ nextRowIndex ]\n\t\t\t\t);\n\n\t\t\t\t// If for some reason there are no focusables in the next row, do nothing.\n\t\t\t\tif ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will still focus text when using arrow keys, while this\n\t\t\t\t\t// component should limit navigation to focusables.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Try to focus the element in the next row that's at a similar column to the activeElement.\n\t\t\t\tconst nextIndex = Math.min(\n\t\t\t\t\tcurrentColumnIndex,\n\t\t\t\t\tfocusablesInNextRow.length - 1\n\t\t\t\t);\n\t\t\t\tfocusablesInNextRow[ nextIndex ].focus();\n\n\t\t\t\t// Let consumers know the row that was originally focused,\n\t\t\t\t// and the row that is now in focus.\n\t\t\t\tonFocusRow( event, activeRow, rows[ nextRowIndex ] );\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t} else if ( [ HOME, END ].includes( keyCode ) ) {\n\t\t\t\t// Calculate the rowIndex of the next row.\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t);\n\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\tlet nextRowIndex;\n\n\t\t\t\tif ( keyCode === HOME ) {\n\t\t\t\t\tnextRowIndex = 0;\n\t\t\t\t} else {\n\t\t\t\t\tnextRowIndex = rows.length - 1;\n\t\t\t\t}\n\n\t\t\t\t// Focus is either at the top or bottom edge of the grid. Do nothing.\n\t\t\t\tif ( nextRowIndex === currentRowIndex ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start navigating horizontally when reaching the vertical\n\t\t\t\t\t// bounds of a table.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Get the focusables in the next row.\n\t\t\t\tconst focusablesInNextRow = getRowFocusables(\n\t\t\t\t\trows[ nextRowIndex ]\n\t\t\t\t);\n\n\t\t\t\t// If for some reason there are no focusables in the next row, do nothing.\n\t\t\t\tif ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will still focus text when using arrow keys, while this\n\t\t\t\t\t// component should limit navigation to focusables.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Try to focus the element in the next row that's at a similar column to the activeElement.\n\t\t\t\tconst nextIndex = Math.min(\n\t\t\t\t\tcurrentColumnIndex,\n\t\t\t\t\tfocusablesInNextRow.length - 1\n\t\t\t\t);\n\t\t\t\tfocusablesInNextRow[ nextIndex ].focus();\n\n\t\t\t\t// Let consumers know the row that was originally focused,\n\t\t\t\t// and the row that is now in focus.\n\t\t\t\tonFocusRow( event, activeRow, rows[ nextRowIndex ] );\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t[ onExpandRow, onCollapseRow, onFocusRow ]\n\t);\n\n\t/* Disable reason: A treegrid is implemented using a table element. */\n\t/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n\treturn (\n\t\t<RovingTabIndexContainer>\n\t\t\t<table\n\t\t\t\t{ ...props }\n\t\t\t\trole=\"treegrid\"\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t<tbody>{ children }</tbody>\n\t\t\t</table>\n\t\t</RovingTabIndexContainer>\n\t);\n\t/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */\n}\n\nexport default forwardRef( TreeGrid );\nexport { default as TreeGridRow } from './row';\nexport { default as TreeGridCell } from './cell';\nexport { default as TreeGridItem } from './item';\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/tree-grid/index.js"],"names":["getRowFocusables","rowElement","focusablesInRow","focus","focusable","find","sequential","length","filter","closest","TreeGrid","ref","children","onExpandRow","onCollapseRow","onFocusRow","applicationAriaLabel","props","onKeyDown","event","keyCode","metaKey","ctrlKey","altKey","hasModifierKeyPressed","UP","DOWN","LEFT","RIGHT","HOME","END","includes","stopPropagation","activeElement","document","currentTarget","treeGridElement","contains","activeRow","currentColumnIndex","indexOf","canExpandCollapse","cannotFocusNextColumn","getAttribute","nextIndex","Math","max","min","preventDefault","level","parseInt","rows","Array","from","querySelectorAll","parentRow","currentRowIndex","i","focusableItems","nextRowIndex","focusablesInNextRow"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { forwardRef, useCallback } from '@wordpress/element';\nimport { UP, DOWN, LEFT, RIGHT, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport RovingTabIndexContainer from './roving-tab-index';\n\n/**\n * Return focusables in a row element, excluding those from other branches\n * nested within the row.\n *\n * @param {Element} rowElement The DOM element representing the row.\n *\n * @return {?Array} The array of focusables in the row.\n */\nfunction getRowFocusables( rowElement ) {\n\tconst focusablesInRow = focus.focusable.find( rowElement, {\n\t\tsequential: true,\n\t} );\n\n\tif ( ! focusablesInRow || ! focusablesInRow.length ) {\n\t\treturn;\n\t}\n\n\treturn focusablesInRow.filter( ( focusable ) => {\n\t\treturn focusable.closest( '[role=\"row\"]' ) === rowElement;\n\t} );\n}\n\n/**\n * Renders both a table and tbody element, used to create a tree hierarchy.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md\n * @param {Object} props Component props.\n * @param {WPElement} props.children Children to be rendered.\n * @param {Function} props.onExpandRow Callback to fire when row is expanded.\n * @param {Function} props.onCollapseRow Callback to fire when row is collapsed.\n * @param {Function} props.onFocusRow Callback to fire when moving focus to a different row.\n * @param {string} props.applicationAriaLabel Label to use for the application role.\n * @param {Object} ref A ref to the underlying DOM table element.\n */\nfunction TreeGrid(\n\t{\n\t\tchildren,\n\t\tonExpandRow = () => {},\n\t\tonCollapseRow = () => {},\n\t\tonFocusRow = () => {},\n\t\tapplicationAriaLabel,\n\t\t...props\n\t},\n\tref\n) {\n\tconst onKeyDown = useCallback(\n\t\t( event ) => {\n\t\t\tconst { keyCode, metaKey, ctrlKey, altKey } = event;\n\n\t\t\t// The shift key is intentionally absent from the following list,\n\t\t\t// to enable shift + up/down to select items from the list.\n\t\t\tconst hasModifierKeyPressed = metaKey || ctrlKey || altKey;\n\n\t\t\tif (\n\t\t\t\thasModifierKeyPressed ||\n\t\t\t\t! [ UP, DOWN, LEFT, RIGHT, HOME, END ].includes( keyCode )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// The event will be handled, stop propagation.\n\t\t\tevent.stopPropagation();\n\n\t\t\tconst { activeElement } = document;\n\t\t\tconst { currentTarget: treeGridElement } = event;\n\t\t\tif ( ! treeGridElement.contains( activeElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Calculate the columnIndex of the active element.\n\t\t\tconst activeRow = activeElement.closest( '[role=\"row\"]' );\n\t\t\tconst focusablesInRow = getRowFocusables( activeRow );\n\t\t\tconst currentColumnIndex = focusablesInRow.indexOf( activeElement );\n\t\t\tconst canExpandCollapse = 0 === currentColumnIndex;\n\t\t\tconst cannotFocusNextColumn =\n\t\t\t\tcanExpandCollapse &&\n\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) === 'false' &&\n\t\t\t\tkeyCode === RIGHT;\n\n\t\t\tif ( [ LEFT, RIGHT ].includes( keyCode ) ) {\n\t\t\t\t// Calculate to the next element.\n\t\t\t\tlet nextIndex;\n\t\t\t\tif ( keyCode === LEFT ) {\n\t\t\t\t\tnextIndex = Math.max( 0, currentColumnIndex - 1 );\n\t\t\t\t} else {\n\t\t\t\t\tnextIndex = Math.min(\n\t\t\t\t\t\tcurrentColumnIndex + 1,\n\t\t\t\t\t\tfocusablesInRow.length - 1\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Focus is at the left most column.\n\t\t\t\tif ( canExpandCollapse ) {\n\t\t\t\t\tif ( keyCode === LEFT ) {\n\t\t\t\t\t\t// Left:\n\t\t\t\t\t\t// If a row is focused, and it is expanded, collapses the current row.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) === 'true'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonCollapseRow( activeRow );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If a row is focused, and it is collapsed, moves to the parent row (if there is one).\n\t\t\t\t\t\tconst level = Math.max(\n\t\t\t\t\t\t\tparseInt(\n\t\t\t\t\t\t\t\tactiveRow?.getAttribute( 'aria-level' ) ?? 1,\n\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t) - 1,\n\t\t\t\t\t\t\t1\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst rows = Array.from(\n\t\t\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t\t\t);\n\t\t\t\t\t\tlet parentRow = activeRow;\n\t\t\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\t\t\tfor ( let i = currentRowIndex; i >= 0; i-- ) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tparseInt(\n\t\t\t\t\t\t\t\t\trows[ i ].getAttribute( 'aria-level' ),\n\t\t\t\t\t\t\t\t\t10\n\t\t\t\t\t\t\t\t) === level\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tparentRow = rows[ i ];\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgetRowFocusables( parentRow )?.[ 0 ]?.focus();\n\t\t\t\t\t}\n\t\t\t\t\tif ( keyCode === RIGHT ) {\n\t\t\t\t\t\t// Right:\n\t\t\t\t\t\t// If a row is focused, and it is collapsed, expands the current row.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tactiveRow.getAttribute( 'aria-expanded' ) ===\n\t\t\t\t\t\t\t'false'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonExpandRow( activeRow );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If a row is focused, and it is expanded, focuses the rightmost cell in the row.\n\t\t\t\t\t\tconst focusableItems = getRowFocusables( activeRow );\n\t\t\t\t\t\tif ( focusableItems.length > 0 ) {\n\t\t\t\t\t\t\tfocusableItems[\n\t\t\t\t\t\t\t\tfocusableItems.length - 1\n\t\t\t\t\t\t\t]?.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start reading text on continued use of left/right arrow\n\t\t\t\t\t// keys.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.\n\t\t\t\tif ( cannotFocusNextColumn ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tfocusablesInRow[ nextIndex ].focus();\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t} else if ( [ UP, DOWN ].includes( keyCode ) ) {\n\t\t\t\t// Calculate the rowIndex of the next row.\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t);\n\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\tlet nextRowIndex;\n\n\t\t\t\tif ( keyCode === UP ) {\n\t\t\t\t\tnextRowIndex = Math.max( 0, currentRowIndex - 1 );\n\t\t\t\t} else {\n\t\t\t\t\tnextRowIndex = Math.min(\n\t\t\t\t\t\tcurrentRowIndex + 1,\n\t\t\t\t\t\trows.length - 1\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Focus is either at the top or bottom edge of the grid. Do nothing.\n\t\t\t\tif ( nextRowIndex === currentRowIndex ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start navigating horizontally when reaching the vertical\n\t\t\t\t\t// bounds of a table.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Get the focusables in the next row.\n\t\t\t\tconst focusablesInNextRow = getRowFocusables(\n\t\t\t\t\trows[ nextRowIndex ]\n\t\t\t\t);\n\n\t\t\t\t// If for some reason there are no focusables in the next row, do nothing.\n\t\t\t\tif ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will still focus text when using arrow keys, while this\n\t\t\t\t\t// component should limit navigation to focusables.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Try to focus the element in the next row that's at a similar column to the activeElement.\n\t\t\t\tconst nextIndex = Math.min(\n\t\t\t\t\tcurrentColumnIndex,\n\t\t\t\t\tfocusablesInNextRow.length - 1\n\t\t\t\t);\n\t\t\t\tfocusablesInNextRow[ nextIndex ].focus();\n\n\t\t\t\t// Let consumers know the row that was originally focused,\n\t\t\t\t// and the row that is now in focus.\n\t\t\t\tonFocusRow( event, activeRow, rows[ nextRowIndex ] );\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t} else if ( [ HOME, END ].includes( keyCode ) ) {\n\t\t\t\t// Calculate the rowIndex of the next row.\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttreeGridElement.querySelectorAll( '[role=\"row\"]' )\n\t\t\t\t);\n\t\t\t\tconst currentRowIndex = rows.indexOf( activeRow );\n\t\t\t\tlet nextRowIndex;\n\n\t\t\t\tif ( keyCode === HOME ) {\n\t\t\t\t\tnextRowIndex = 0;\n\t\t\t\t} else {\n\t\t\t\t\tnextRowIndex = rows.length - 1;\n\t\t\t\t}\n\n\t\t\t\t// Focus is either at the top or bottom edge of the grid. Do nothing.\n\t\t\t\tif ( nextRowIndex === currentRowIndex ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will start navigating horizontally when reaching the vertical\n\t\t\t\t\t// bounds of a table.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Get the focusables in the next row.\n\t\t\t\tconst focusablesInNextRow = getRowFocusables(\n\t\t\t\t\trows[ nextRowIndex ]\n\t\t\t\t);\n\n\t\t\t\t// If for some reason there are no focusables in the next row, do nothing.\n\t\t\t\tif ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {\n\t\t\t\t\t// Prevent key use for anything else. For example, Voiceover\n\t\t\t\t\t// will still focus text when using arrow keys, while this\n\t\t\t\t\t// component should limit navigation to focusables.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Try to focus the element in the next row that's at a similar column to the activeElement.\n\t\t\t\tconst nextIndex = Math.min(\n\t\t\t\t\tcurrentColumnIndex,\n\t\t\t\t\tfocusablesInNextRow.length - 1\n\t\t\t\t);\n\t\t\t\tfocusablesInNextRow[ nextIndex ].focus();\n\n\t\t\t\t// Let consumers know the row that was originally focused,\n\t\t\t\t// and the row that is now in focus.\n\t\t\t\tonFocusRow( event, activeRow, rows[ nextRowIndex ] );\n\n\t\t\t\t// Prevent key use for anything else. This ensures Voiceover\n\t\t\t\t// doesn't try to handle key navigation.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t[ onExpandRow, onCollapseRow, onFocusRow ]\n\t);\n\n\t/* Disable reason: A treegrid is implemented using a table element. */\n\t/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n\treturn (\n\t\t<RovingTabIndexContainer>\n\t\t\t{\n\t\t\t\t// Prevent browser mode from triggering in NVDA by wrapping List View\n\t\t\t\t// in a role=application wrapper.\n\t\t\t\t// see: https://github.com/WordPress/gutenberg/issues/43729\n\t\t\t }\n\t\t\t<div role=\"application\" aria-label={ applicationAriaLabel }>\n\t\t\t\t<table\n\t\t\t\t\t{ ...props }\n\t\t\t\t\trole=\"treegrid\"\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tref={ ref }\n\t\t\t\t>\n\t\t\t\t\t<tbody>{ children }</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</RovingTabIndexContainer>\n\t);\n\t/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */\n}\n\nexport default forwardRef( TreeGrid );\nexport { default as TreeGridRow } from './row';\nexport { default as TreeGridCell } from './cell';\nexport { default as TreeGridItem } from './item';\n"]}
@@ -96,7 +96,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
96
96
  if (parsedUnit !== undefined) {
97
97
  setUnit(parsedUnit);
98
98
  }
99
- }, [parsedUnit]); // Stores parsed value for hand-off in state reducer.
99
+ }, [parsedUnit, setUnit]); // Stores parsed value for hand-off in state reducer.
100
100
 
101
101
  const refParsedQuantity = (0, _element.useRef)(undefined);
102
102
  const classes = (0, _classnames.default)('components-unit-control', className);
@@ -239,7 +239,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
239
239
  autoComplete: autoComplete,
240
240
  className: classes,
241
241
  disabled: disabled,
242
- disableUnits: disableUnits,
242
+ hideHTMLArrows: true,
243
243
  isPressEnterToChange: isPressEnterToChange,
244
244
  label: label,
245
245
  onBlur: handleOnBlur,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","style","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onBlur","onBlurProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","inputControlActionTypes","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n\tChangeEvent,\n\tPointerEvent,\n} from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number | undefined >( undefined );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent:\n\t\t\t\t| ChangeEvent< HTMLInputElement >\n\t\t\t\t| PointerEvent< HTMLInputElement >;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [ validParsedQuantity, validParsedUnit ] =\n\t\t\tgetValidParsedQuantityAndUnit(\n\t\t\t\tevent.currentTarget.value,\n\t\t\t\tunits,\n\t\t\t\tparsedQuantity,\n\t\t\t\tunit\n\t\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\t// The `onChange` callback already gets called, no need to call it explicitely.\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param state State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/*\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t */\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...props }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnQuantityChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * const [ value, setValue ] = useState( '10px' );\n *\n * return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","style","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onBlur","onBlurProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","inputControlActionTypes","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n\tChangeEvent,\n\tPointerEvent,\n} from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number | undefined >( undefined );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent:\n\t\t\t\t| ChangeEvent< HTMLInputElement >\n\t\t\t\t| PointerEvent< HTMLInputElement >;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [ validParsedQuantity, validParsedUnit ] =\n\t\t\tgetValidParsedQuantityAndUnit(\n\t\t\t\tevent.currentTarget.value,\n\t\t\t\tunits,\n\t\t\t\tparsedQuantity,\n\t\t\t\tunit\n\t\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\t// The `onChange` callback already gets called, no need to call it explicitely.\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param state State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/*\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t */\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...props }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideHTMLArrows\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnQuantityChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * const [ value, setValue ] = useState( '10px' );\n *\n * return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}
@@ -65,7 +65,11 @@ function UnitControl(_ref) {
65
65
  const onPickerPresent = (0, _element.useCallback)(() => {
66
66
  if (pickerRef !== null && pickerRef !== void 0 && pickerRef.current) {
67
67
  pickerRef.current.presentPicker();
68
- }
68
+ } // Disable reason: this should be fixed by the native team.
69
+ // It would be great if this could be done in the context of
70
+ // https://github.com/WordPress/gutenberg/pull/39218
71
+ // eslint-disable-next-line react-hooks/exhaustive-deps
72
+
69
73
  }, [pickerRef === null || pickerRef === void 0 ? void 0 : pickerRef.current]);
70
74
  const currentInputValue = currentInput === null ? value : currentInput;
71
75
  const initialControlValue = isFinite(currentInputValue) ? currentInputValue : initialPosition;
@@ -92,7 +96,11 @@ function UnitControl(_ref) {
92
96
 
93
97
  return unitButton;
94
98
  }, [onPickerPresent, accessibilityLabel, accessibilityHint, unitButtonTextStyle, unit, units]);
95
- const getAnchor = (0, _element.useCallback)(() => anchorNodeRef !== null && anchorNodeRef !== void 0 && anchorNodeRef.current ? (0, _reactNative.findNodeHandle)(anchorNodeRef === null || anchorNodeRef === void 0 ? void 0 : anchorNodeRef.current) : undefined, [anchorNodeRef === null || anchorNodeRef === void 0 ? void 0 : anchorNodeRef.current]);
99
+ const getAnchor = (0, _element.useCallback)(() => anchorNodeRef !== null && anchorNodeRef !== void 0 && anchorNodeRef.current ? (0, _reactNative.findNodeHandle)(anchorNodeRef === null || anchorNodeRef === void 0 ? void 0 : anchorNodeRef.current) : undefined, // Disable reason: this should be fixed by the native team.
100
+ // It would be great if this could be done in the context of
101
+ // https://github.com/WordPress/gutenberg/pull/39218
102
+ // eslint-disable-next-line react-hooks/exhaustive-deps
103
+ [anchorNodeRef === null || anchorNodeRef === void 0 ? void 0 : anchorNodeRef.current]);
96
104
 
97
105
  const getDecimal = step => {
98
106
  // Return the decimal offset based on the step size.
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/unit-control/index.native.js"],"names":["UnitControl","currentInput","label","value","onChange","onUnitChange","initialPosition","min","max","separatorType","units","CSS_UNITS","unit","getStylesFromColorScheme","props","pickerRef","anchorNodeRef","onPickerPresent","current","presentPicker","currentInputValue","initialControlValue","isFinite","unitButtonTextStyle","styles","unitButtonText","unitButtonTextDark","accessibilityLabel","accessibilityHint","Platform","OS","renderUnitButton","unitButton","length","getAnchor","undefined","getDecimal","step","stepToString","splitStep","toString","split","renderUnitPicker","unitMenu","activeUnit","find","option","decimalNum"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tText,\n\tView,\n\tTouchableWithoutFeedback,\n\tPlatform,\n\tfindNodeHandle,\n} from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\nimport Picker from '../mobile/picker';\nimport styles from './style.scss';\nimport { CSS_UNITS, hasUnits, getAccessibleLabelForUnit } from './utils';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useMemo, memo } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\nfunction UnitControl( {\n\tcurrentInput,\n\tlabel,\n\tvalue,\n\tonChange,\n\tonUnitChange,\n\tinitialPosition,\n\tmin,\n\tmax,\n\tseparatorType,\n\tunits = CSS_UNITS,\n\tunit,\n\tgetStylesFromColorScheme,\n\t...props\n} ) {\n\tconst pickerRef = useRef();\n\tconst anchorNodeRef = useRef();\n\n\tconst onPickerPresent = useCallback( () => {\n\t\tif ( pickerRef?.current ) {\n\t\t\tpickerRef.current.presentPicker();\n\t\t}\n\t}, [ pickerRef?.current ] );\n\n\tconst currentInputValue = currentInput === null ? value : currentInput;\n\tconst initialControlValue = isFinite( currentInputValue )\n\t\t? currentInputValue\n\t\t: initialPosition;\n\n\tconst unitButtonTextStyle = getStylesFromColorScheme(\n\t\tstyles.unitButtonText,\n\t\tstyles.unitButtonTextDark\n\t);\n\n\t/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */\n\tconst accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );\n\n\tconst accessibilityHint =\n\t\tPlatform.OS === 'ios'\n\t\t\t? __( 'Double tap to open Action Sheet with available options' )\n\t\t\t: __( 'Double tap to open Bottom Sheet with available options' );\n\n\tconst renderUnitButton = useMemo( () => {\n\t\tconst unitButton = (\n\t\t\t<View style={ styles.unitButton }>\n\t\t\t\t<Text style={ unitButtonTextStyle }>{ unit }</Text>\n\t\t\t</View>\n\t\t);\n\n\t\tif ( hasUnits( units ) && units?.length > 1 ) {\n\t\t\treturn (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ onPickerPresent }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t>\n\t\t\t\t\t{ unitButton }\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t);\n\t\t}\n\n\t\treturn unitButton;\n\t}, [\n\t\tonPickerPresent,\n\t\taccessibilityLabel,\n\t\taccessibilityHint,\n\t\tunitButtonTextStyle,\n\t\tunit,\n\t\tunits,\n\t] );\n\n\tconst getAnchor = useCallback(\n\t\t() =>\n\t\t\tanchorNodeRef?.current\n\t\t\t\t? findNodeHandle( anchorNodeRef?.current )\n\t\t\t\t: undefined,\n\t\t[ anchorNodeRef?.current ]\n\t);\n\n\tconst getDecimal = ( step ) => {\n\t\t// Return the decimal offset based on the step size.\n\t\t// if step size is 0.1 we expect the offset to be 1.\n\t\t// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );\n\t\t// steps are defined in the CSS_UNITS and they vary from unit to unit.\n\t\tconst stepToString = step;\n\t\tconst splitStep = stepToString.toString().split( '.' );\n\t\treturn splitStep[ 1 ] ? splitStep[ 1 ].length : 0;\n\t};\n\n\tconst renderUnitPicker = useCallback( () => {\n\t\t// Keeping for legacy reasons, although `false` should not be a valid\n\t\t// value for the `units` prop anymore.\n\t\tif ( units === false ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.unitMenu } ref={ anchorNodeRef }>\n\t\t\t\t{ renderUnitButton }\n\t\t\t\t{ hasUnits( units ) && units?.length > 1 ? (\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tref={ pickerRef }\n\t\t\t\t\t\toptions={ units }\n\t\t\t\t\t\tonChange={ onUnitChange }\n\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tgetAnchor={ getAnchor }\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</View>\n\t\t);\n\t}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\tconst decimalNum = getDecimal( step );\n\n\treturn (\n\t\t<>\n\t\t\t{ unit !== '%' ? (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tshouldDisplayTextInput\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</StepperCell>\n\t\t\t) : (\n\t\t\t\t<RangeCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tminimumValue={ min }\n\t\t\t\t\tmaximumValue={ max }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tunit={ unit }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</RangeCell>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport { useCustomUnits } from './utils';\nexport default memo( withPreferredColorScheme( UnitControl ) );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/unit-control/index.native.js"],"names":["UnitControl","currentInput","label","value","onChange","onUnitChange","initialPosition","min","max","separatorType","units","CSS_UNITS","unit","getStylesFromColorScheme","props","pickerRef","anchorNodeRef","onPickerPresent","current","presentPicker","currentInputValue","initialControlValue","isFinite","unitButtonTextStyle","styles","unitButtonText","unitButtonTextDark","accessibilityLabel","accessibilityHint","Platform","OS","renderUnitButton","unitButton","length","getAnchor","undefined","getDecimal","step","stepToString","splitStep","toString","split","renderUnitPicker","unitMenu","activeUnit","find","option","decimalNum"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tText,\n\tView,\n\tTouchableWithoutFeedback,\n\tPlatform,\n\tfindNodeHandle,\n} from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\nimport Picker from '../mobile/picker';\nimport styles from './style.scss';\nimport { CSS_UNITS, hasUnits, getAccessibleLabelForUnit } from './utils';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useMemo, memo } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\nfunction UnitControl( {\n\tcurrentInput,\n\tlabel,\n\tvalue,\n\tonChange,\n\tonUnitChange,\n\tinitialPosition,\n\tmin,\n\tmax,\n\tseparatorType,\n\tunits = CSS_UNITS,\n\tunit,\n\tgetStylesFromColorScheme,\n\t...props\n} ) {\n\tconst pickerRef = useRef();\n\tconst anchorNodeRef = useRef();\n\n\tconst onPickerPresent = useCallback( () => {\n\t\tif ( pickerRef?.current ) {\n\t\t\tpickerRef.current.presentPicker();\n\t\t}\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ pickerRef?.current ] );\n\n\tconst currentInputValue = currentInput === null ? value : currentInput;\n\tconst initialControlValue = isFinite( currentInputValue )\n\t\t? currentInputValue\n\t\t: initialPosition;\n\n\tconst unitButtonTextStyle = getStylesFromColorScheme(\n\t\tstyles.unitButtonText,\n\t\tstyles.unitButtonTextDark\n\t);\n\n\t/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */\n\tconst accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );\n\n\tconst accessibilityHint =\n\t\tPlatform.OS === 'ios'\n\t\t\t? __( 'Double tap to open Action Sheet with available options' )\n\t\t\t: __( 'Double tap to open Bottom Sheet with available options' );\n\n\tconst renderUnitButton = useMemo( () => {\n\t\tconst unitButton = (\n\t\t\t<View style={ styles.unitButton }>\n\t\t\t\t<Text style={ unitButtonTextStyle }>{ unit }</Text>\n\t\t\t</View>\n\t\t);\n\n\t\tif ( hasUnits( units ) && units?.length > 1 ) {\n\t\t\treturn (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ onPickerPresent }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t>\n\t\t\t\t\t{ unitButton }\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t);\n\t\t}\n\n\t\treturn unitButton;\n\t}, [\n\t\tonPickerPresent,\n\t\taccessibilityLabel,\n\t\taccessibilityHint,\n\t\tunitButtonTextStyle,\n\t\tunit,\n\t\tunits,\n\t] );\n\n\tconst getAnchor = useCallback(\n\t\t() =>\n\t\t\tanchorNodeRef?.current\n\t\t\t\t? findNodeHandle( anchorNodeRef?.current )\n\t\t\t\t: undefined,\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[ anchorNodeRef?.current ]\n\t);\n\n\tconst getDecimal = ( step ) => {\n\t\t// Return the decimal offset based on the step size.\n\t\t// if step size is 0.1 we expect the offset to be 1.\n\t\t// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );\n\t\t// steps are defined in the CSS_UNITS and they vary from unit to unit.\n\t\tconst stepToString = step;\n\t\tconst splitStep = stepToString.toString().split( '.' );\n\t\treturn splitStep[ 1 ] ? splitStep[ 1 ].length : 0;\n\t};\n\n\tconst renderUnitPicker = useCallback( () => {\n\t\t// Keeping for legacy reasons, although `false` should not be a valid\n\t\t// value for the `units` prop anymore.\n\t\tif ( units === false ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.unitMenu } ref={ anchorNodeRef }>\n\t\t\t\t{ renderUnitButton }\n\t\t\t\t{ hasUnits( units ) && units?.length > 1 ? (\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tref={ pickerRef }\n\t\t\t\t\t\toptions={ units }\n\t\t\t\t\t\tonChange={ onUnitChange }\n\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tgetAnchor={ getAnchor }\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</View>\n\t\t);\n\t}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\tconst decimalNum = getDecimal( step );\n\n\treturn (\n\t\t<>\n\t\t\t{ unit !== '%' ? (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tshouldDisplayTextInput\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</StepperCell>\n\t\t\t) : (\n\t\t\t\t<RangeCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tminimumValue={ min }\n\t\t\t\t\tmaximumValue={ max }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tunit={ unit }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</RangeCell>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport { useCustomUnits } from './utils';\nexport default memo( withPreferredColorScheme( UnitControl ) );\n"]}