@ckeditor/ckeditor5-ui 48.8.1-alpha.3 → 49.0.0-alpha.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 (273) hide show
  1. package/LICENSE.md +1 -1
  2. package/dist/arialiveannouncer.d.ts +89 -90
  3. package/dist/augmentation.d.ts +86 -86
  4. package/dist/autocomplete/autocompleteview.d.ts +69 -70
  5. package/dist/badge/badge.d.ts +119 -121
  6. package/dist/bindings/addkeyboardhandlingforgrid.d.ts +22 -22
  7. package/dist/bindings/clickoutsidehandler.d.ts +24 -26
  8. package/dist/bindings/csstransitiondisablermixin.d.ts +47 -36
  9. package/dist/bindings/draggableviewmixin.d.ts +45 -37
  10. package/dist/bindings/preventdefault.d.ts +30 -30
  11. package/dist/bindings/submithandler.d.ts +49 -49
  12. package/dist/button/button.d.ts +167 -167
  13. package/dist/button/buttonlabel.d.ts +28 -28
  14. package/dist/button/buttonlabelview.d.ts +26 -26
  15. package/dist/button/buttonview.d.ts +191 -192
  16. package/dist/button/filedialogbuttonview.d.ts +107 -99
  17. package/dist/button/listitembuttonview.d.ts +72 -73
  18. package/dist/button/switchbuttonview.d.ts +39 -40
  19. package/dist/collapsible/collapsibleview.d.ts +62 -63
  20. package/dist/colorgrid/colorgridview.d.ts +116 -117
  21. package/dist/colorgrid/colors.d.ts +28 -0
  22. package/dist/colorgrid/colortileview.d.ts +21 -21
  23. package/dist/colorgrid/utils.d.ts +47 -35
  24. package/dist/colorpicker/colorpickerview.d.ts +154 -157
  25. package/dist/colorpicker/utils.d.ts +37 -37
  26. package/dist/colorselector/colorgridsfragmentview.d.ts +191 -191
  27. package/dist/colorselector/colorpickerfragmentview.d.ts +129 -129
  28. package/dist/colorselector/colorselectorview.d.ts +226 -229
  29. package/dist/colorselector/documentcolorcollection.d.ts +52 -59
  30. package/dist/componentfactory.d.ts +76 -76
  31. package/dist/dialog/dialog.d.ts +311 -288
  32. package/dist/dialog/dialogactionsview.d.ts +61 -62
  33. package/dist/dialog/dialogcontentview.d.ts +22 -22
  34. package/dist/dialog/dialogview.d.ts +254 -251
  35. package/dist/dropdown/button/dropdownbutton.d.ts +17 -17
  36. package/dist/dropdown/button/dropdownbuttonview.d.ts +41 -41
  37. package/dist/dropdown/button/splitbuttonview.d.ts +154 -155
  38. package/dist/dropdown/dropdownpanelfocusable.d.ts +16 -16
  39. package/dist/dropdown/dropdownpanelview.d.ts +56 -56
  40. package/dist/dropdown/dropdownview.d.ts +337 -326
  41. package/dist/dropdown/menu/dropdownmenubehaviors.d.ts +43 -43
  42. package/dist/dropdown/menu/dropdownmenubuttonview.d.ts +28 -29
  43. package/dist/dropdown/menu/dropdownmenulistitembuttonview.d.ts +11 -12
  44. package/dist/dropdown/menu/dropdownmenulistitemview.d.ts +16 -17
  45. package/dist/dropdown/menu/dropdownmenulistview.d.ts +19 -19
  46. package/dist/dropdown/menu/dropdownmenunestedmenupanelview.d.ts +27 -28
  47. package/dist/dropdown/menu/dropdownmenunestedmenuview.d.ts +125 -126
  48. package/dist/dropdown/menu/dropdownmenurootlistview.d.ts +132 -132
  49. package/dist/dropdown/menu/utils.d.ts +112 -112
  50. package/dist/dropdown/utils.d.ts +270 -272
  51. package/dist/editableui/editableuiview.d.ts +78 -67
  52. package/dist/editableui/inline/inlineeditableuiview.d.ts +38 -36
  53. package/dist/editorui/accessibilityhelp/accessibilityhelp.d.ts +49 -50
  54. package/dist/editorui/accessibilityhelp/accessibilityhelpcontentview.d.ts +30 -30
  55. package/dist/editorui/bodycollection.d.ts +167 -86
  56. package/dist/editorui/boxed/boxededitoruiview.d.ts +35 -35
  57. package/dist/editorui/editorui.d.ts +382 -351
  58. package/dist/editorui/editoruiview.d.ts +48 -53
  59. package/dist/editorui/evaluationbadge.d.ts +28 -28
  60. package/dist/editorui/poweredby.d.ts +25 -25
  61. package/dist/focuscycler.d.ts +265 -270
  62. package/dist/formheader/formheaderview.d.ts +52 -53
  63. package/dist/formrow/formrowview.d.ts +51 -52
  64. package/dist/highlightedtext/buttonlabelwithhighlightview.d.ts +25 -25
  65. package/dist/highlightedtext/highlightedtextview.d.ts +30 -34
  66. package/dist/highlightedtext/labelwithhighlightview.d.ts +21 -21
  67. package/dist/icon/iconview.d.ts +82 -83
  68. package/dist/iframe/iframeview.d.ts +42 -42
  69. package/dist/index-content.css +3 -0
  70. package/dist/index-content.css.map +1 -0
  71. package/dist/index-editor.css +3240 -2329
  72. package/dist/index-editor.css.map +1 -0
  73. package/dist/index.css +2939 -2032
  74. package/dist/index.css.map +1 -1
  75. package/dist/index.d.ts +144 -136
  76. package/dist/index.js +17821 -17732
  77. package/dist/index.js.map +1 -1
  78. package/dist/input/inputbase.d.ts +114 -114
  79. package/dist/input/inputview.d.ts +27 -28
  80. package/dist/inputnumber/inputnumberview.d.ts +44 -44
  81. package/dist/inputtext/inputtextview.d.ts +13 -13
  82. package/dist/label/labelview.d.ts +30 -31
  83. package/dist/labeledfield/labeledfieldview.d.ts +179 -180
  84. package/dist/labeledfield/utils.d.ts +112 -112
  85. package/dist/labeledinput/labeledinputview.d.ts +119 -120
  86. package/dist/legacyerrors.d.ts +0 -4
  87. package/dist/list/listitemgroupview.d.ts +54 -54
  88. package/dist/list/listitemview.d.ts +31 -31
  89. package/dist/list/listseparatorview.d.ts +13 -13
  90. package/dist/list/listview.d.ts +118 -119
  91. package/dist/menubar/menubarmenubuttonview.d.ts +27 -28
  92. package/dist/menubar/menubarmenulistitembuttonview.d.ts +15 -16
  93. package/dist/menubar/menubarmenulistitemfiledialogbuttonview.d.ts +17 -18
  94. package/dist/menubar/menubarmenulistitemview.d.ts +19 -20
  95. package/dist/menubar/menubarmenulistview.d.ts +24 -24
  96. package/dist/menubar/menubarmenupanelview.d.ts +46 -47
  97. package/dist/menubar/menubarmenuview.d.ts +112 -113
  98. package/dist/menubar/menubarview.d.ts +144 -145
  99. package/dist/menubar/utils.d.ts +455 -455
  100. package/dist/model.d.ts +19 -18
  101. package/dist/notification/notification.d.ts +200 -200
  102. package/dist/overlayhost.d.ts +210 -0
  103. package/dist/panel/balloon/balloonpanelview.d.ts +700 -692
  104. package/dist/panel/balloon/contextualballoon.d.ts +296 -298
  105. package/dist/panel/sticky/stickypanelview.d.ts +162 -151
  106. package/dist/search/filteredview.d.ts +23 -23
  107. package/dist/search/filtergroupanditemnames.d.ts +11 -11
  108. package/dist/search/searchinfoview.d.ts +39 -39
  109. package/dist/search/searchresultsview.d.ts +49 -49
  110. package/dist/search/text/searchtextqueryview.d.ts +63 -63
  111. package/dist/search/text/searchtextview.d.ts +202 -203
  112. package/dist/spinner/spinnerview.d.ts +19 -20
  113. package/dist/tabs/tabbuttonview.d.ts +53 -0
  114. package/dist/tabs/tabpanelview.d.ts +45 -0
  115. package/dist/template.d.ts +897 -902
  116. package/dist/textarea/textareaview.d.ts +100 -96
  117. package/dist/toolbar/balloon/balloontoolbar.d.ts +122 -122
  118. package/dist/toolbar/block/blockbuttonview.d.ts +29 -30
  119. package/dist/toolbar/block/blocktoolbar.d.ts +166 -166
  120. package/dist/toolbar/normalizetoolbarconfig.d.ts +35 -35
  121. package/dist/toolbar/toolbarlinebreakview.d.ts +13 -13
  122. package/dist/toolbar/toolbarseparatorview.d.ts +13 -13
  123. package/dist/toolbar/toolbarview.d.ts +270 -271
  124. package/dist/tooltipmanager.d.ts +317 -193
  125. package/dist/translations/af.js +1 -1
  126. package/dist/translations/af.umd.js +5 -3
  127. package/dist/translations/ar.js +1 -1
  128. package/dist/translations/ar.umd.js +5 -3
  129. package/dist/translations/ast.js +1 -1
  130. package/dist/translations/ast.umd.js +5 -3
  131. package/dist/translations/az.js +1 -1
  132. package/dist/translations/az.umd.js +5 -3
  133. package/dist/translations/be.js +1 -1
  134. package/dist/translations/be.umd.js +5 -3
  135. package/dist/translations/bg.js +1 -1
  136. package/dist/translations/bg.umd.js +5 -3
  137. package/dist/translations/bn.js +1 -1
  138. package/dist/translations/bn.umd.js +5 -3
  139. package/dist/translations/bs.js +1 -1
  140. package/dist/translations/bs.umd.js +5 -3
  141. package/dist/translations/ca.js +1 -1
  142. package/dist/translations/ca.umd.js +5 -3
  143. package/dist/translations/cs.js +1 -1
  144. package/dist/translations/cs.umd.js +5 -3
  145. package/dist/translations/da.js +1 -1
  146. package/dist/translations/da.umd.js +5 -3
  147. package/dist/translations/de-ch.js +1 -1
  148. package/dist/translations/de-ch.umd.js +5 -3
  149. package/dist/translations/de.js +1 -1
  150. package/dist/translations/de.umd.js +5 -3
  151. package/dist/translations/el.js +1 -1
  152. package/dist/translations/el.umd.js +5 -3
  153. package/dist/translations/en-au.js +1 -1
  154. package/dist/translations/en-au.umd.js +5 -3
  155. package/dist/translations/en-gb.js +1 -1
  156. package/dist/translations/en-gb.umd.js +5 -3
  157. package/dist/translations/en.js +1 -1
  158. package/dist/translations/en.umd.js +5 -3
  159. package/dist/translations/eo.js +1 -1
  160. package/dist/translations/eo.umd.js +5 -3
  161. package/dist/translations/es-co.js +1 -1
  162. package/dist/translations/es-co.umd.js +5 -3
  163. package/dist/translations/es.js +1 -1
  164. package/dist/translations/es.umd.js +5 -3
  165. package/dist/translations/et.js +1 -1
  166. package/dist/translations/et.umd.js +5 -3
  167. package/dist/translations/eu.js +1 -1
  168. package/dist/translations/eu.umd.js +5 -3
  169. package/dist/translations/fa.js +1 -1
  170. package/dist/translations/fa.umd.js +5 -3
  171. package/dist/translations/fi.js +1 -1
  172. package/dist/translations/fi.umd.js +5 -3
  173. package/dist/translations/fr.js +1 -1
  174. package/dist/translations/fr.umd.js +5 -3
  175. package/dist/translations/gl.js +1 -1
  176. package/dist/translations/gl.umd.js +5 -3
  177. package/dist/translations/gu.js +1 -1
  178. package/dist/translations/gu.umd.js +5 -3
  179. package/dist/translations/he.js +1 -1
  180. package/dist/translations/he.umd.js +5 -3
  181. package/dist/translations/hi.js +1 -1
  182. package/dist/translations/hi.umd.js +5 -3
  183. package/dist/translations/hr.js +1 -1
  184. package/dist/translations/hr.umd.js +5 -3
  185. package/dist/translations/hu.js +1 -1
  186. package/dist/translations/hu.umd.js +5 -3
  187. package/dist/translations/hy.js +1 -1
  188. package/dist/translations/hy.umd.js +5 -3
  189. package/dist/translations/id.js +1 -1
  190. package/dist/translations/id.umd.js +5 -3
  191. package/dist/translations/it.js +1 -1
  192. package/dist/translations/it.umd.js +5 -3
  193. package/dist/translations/ja.js +1 -1
  194. package/dist/translations/ja.umd.js +5 -3
  195. package/dist/translations/jv.js +1 -1
  196. package/dist/translations/jv.umd.js +5 -3
  197. package/dist/translations/kk.js +1 -1
  198. package/dist/translations/kk.umd.js +5 -3
  199. package/dist/translations/km.js +1 -1
  200. package/dist/translations/km.umd.js +5 -3
  201. package/dist/translations/kn.js +1 -1
  202. package/dist/translations/kn.umd.js +5 -3
  203. package/dist/translations/ko.js +1 -1
  204. package/dist/translations/ko.umd.js +5 -3
  205. package/dist/translations/ku.js +1 -1
  206. package/dist/translations/ku.umd.js +5 -3
  207. package/dist/translations/lt.js +1 -1
  208. package/dist/translations/lt.umd.js +5 -3
  209. package/dist/translations/lv.js +1 -1
  210. package/dist/translations/lv.umd.js +5 -3
  211. package/dist/translations/ms.js +1 -1
  212. package/dist/translations/ms.umd.js +5 -3
  213. package/dist/translations/nb.js +1 -1
  214. package/dist/translations/nb.umd.js +5 -3
  215. package/dist/translations/ne.js +1 -1
  216. package/dist/translations/ne.umd.js +5 -3
  217. package/dist/translations/nl.js +1 -1
  218. package/dist/translations/nl.umd.js +5 -3
  219. package/dist/translations/no.js +1 -1
  220. package/dist/translations/no.umd.js +5 -3
  221. package/dist/translations/oc.js +1 -1
  222. package/dist/translations/oc.umd.js +5 -3
  223. package/dist/translations/pl.js +1 -1
  224. package/dist/translations/pl.umd.js +5 -3
  225. package/dist/translations/pt-br.js +1 -1
  226. package/dist/translations/pt-br.umd.js +5 -3
  227. package/dist/translations/pt.js +1 -1
  228. package/dist/translations/pt.umd.js +5 -3
  229. package/dist/translations/ro.js +1 -1
  230. package/dist/translations/ro.umd.js +5 -3
  231. package/dist/translations/ru.js +1 -1
  232. package/dist/translations/ru.umd.js +5 -3
  233. package/dist/translations/si.js +1 -1
  234. package/dist/translations/si.umd.js +5 -3
  235. package/dist/translations/sk.js +1 -1
  236. package/dist/translations/sk.umd.js +5 -3
  237. package/dist/translations/sl.js +1 -1
  238. package/dist/translations/sl.umd.js +5 -3
  239. package/dist/translations/sq.js +1 -1
  240. package/dist/translations/sq.umd.js +5 -3
  241. package/dist/translations/sr-latn.js +1 -1
  242. package/dist/translations/sr-latn.umd.js +5 -3
  243. package/dist/translations/sr.js +1 -1
  244. package/dist/translations/sr.umd.js +5 -3
  245. package/dist/translations/sv.js +1 -1
  246. package/dist/translations/sv.umd.js +5 -3
  247. package/dist/translations/th.js +1 -1
  248. package/dist/translations/th.umd.js +5 -3
  249. package/dist/translations/ti.js +1 -1
  250. package/dist/translations/ti.umd.js +5 -3
  251. package/dist/translations/tk.js +1 -1
  252. package/dist/translations/tk.umd.js +5 -3
  253. package/dist/translations/tr.js +1 -1
  254. package/dist/translations/tr.umd.js +5 -3
  255. package/dist/translations/tt.js +1 -1
  256. package/dist/translations/tt.umd.js +5 -3
  257. package/dist/translations/ug.js +1 -1
  258. package/dist/translations/ug.umd.js +5 -3
  259. package/dist/translations/uk.js +1 -1
  260. package/dist/translations/uk.umd.js +5 -3
  261. package/dist/translations/ur.js +1 -1
  262. package/dist/translations/ur.umd.js +5 -3
  263. package/dist/translations/uz.js +1 -1
  264. package/dist/translations/uz.umd.js +5 -3
  265. package/dist/translations/vi.js +1 -1
  266. package/dist/translations/vi.umd.js +5 -3
  267. package/dist/translations/zh-cn.js +1 -1
  268. package/dist/translations/zh-cn.umd.js +5 -3
  269. package/dist/translations/zh.js +1 -1
  270. package/dist/translations/zh.umd.js +5 -3
  271. package/dist/view.d.ts +384 -388
  272. package/dist/viewcollection.d.ts +134 -134
  273. package/package.json +8 -7
@@ -1,291 +1,286 @@
1
1
  /**
2
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
2
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
+ */
5
5
  /**
6
- * @module ui/focuscycler
7
- */
8
- import { type ArrayOrItem, type FocusTracker, type KeystrokeHandler, type KeystrokeHandlerOptions } from '@ckeditor/ckeditor5-utils';
9
- import { type View } from './view.js';
10
- import { type ViewCollection } from './viewcollection.js';
11
- declare const FocusCycler_base: {
12
- new (): import("@ckeditor/ckeditor5-utils").Emitter;
13
- prototype: import("@ckeditor/ckeditor5-utils").Emitter;
14
- };
6
+ * @module ui/focuscycler
7
+ */
8
+ import { type ArrayOrItem, type FocusTracker, type KeystrokeHandler, type KeystrokeHandlerOptions, type EmitterMixinConstructor } from "@ckeditor/ckeditor5-utils";
9
+ import { type View } from "./view.js";
10
+ import { type ViewCollection } from "./viewcollection.js";
11
+ declare const FocusCyclerBase: EmitterMixinConstructor;
15
12
  /**
16
- * A utility class that helps cycling over {@link module:ui/focuscycler~FocusableView focusable views} in a
17
- * {@link module:ui/viewcollection~ViewCollection} when the focus is tracked by the
18
- * {@link module:utils/focustracker~FocusTracker} instance. It helps implementing keyboard
19
- * navigation in HTML forms, toolbars, lists and the like.
20
- *
21
- * To work properly it requires:
22
- * * a collection of focusable (HTML `tabindex` attribute) views that implement the `focus()` method,
23
- * * an associated focus tracker to determine which view is focused.
24
- *
25
- * A simple cycler setup can look like this:
26
- *
27
- * ```ts
28
- * const focusables = new ViewCollection<FocusableView>();
29
- * const focusTracker = new FocusTracker();
30
- *
31
- * // Add focusable views to the focus tracker.
32
- * focusTracker.add( ... );
33
- * ```
34
- *
35
- * Then, the cycler can be used manually:
36
- *
37
- * ```ts
38
- * const cycler = new FocusCycler( { focusables, focusTracker } );
39
- *
40
- * // Will focus the first focusable view in #focusables.
41
- * cycler.focusFirst();
42
- *
43
- * // Will log the next focusable item in #focusables.
44
- * console.log( cycler.next );
45
- * ```
46
- *
47
- * Alternatively, it can work side by side with the {@link module:utils/keystrokehandler~KeystrokeHandler}:
48
- *
49
- * ```ts
50
- * const keystrokeHandler = new KeystrokeHandler();
51
- *
52
- * // Activate the keystroke handler.
53
- * keystrokeHandler.listenTo( sourceOfEvents );
54
- *
55
- * const cycler = new FocusCycler( {
56
- * focusables, focusTracker, keystrokeHandler,
57
- * actions: {
58
- * // When arrowup of arrowleft is detected by the #keystrokeHandler,
59
- * // focusPrevious() will be called on the cycler.
60
- * focusPrevious: [ 'arrowup', 'arrowleft' ],
61
- * }
62
- * } );
63
- * ```
64
- *
65
- * Check out the {@glink framework/deep-dive/ui/focus-tracking "Deep dive into focus tracking"} guide to learn more.
66
- */
67
- export declare class FocusCycler extends /* #__PURE__ */ FocusCycler_base {
68
- /**
69
- * A {@link module:ui/focuscycler~FocusableView focusable views} collection that the cycler operates on.
70
- */
71
- readonly focusables: ViewCollection<FocusableView>;
72
- /**
73
- * A focus tracker instance that the cycler uses to determine the current focus
74
- * state in {@link #focusables}.
75
- */
76
- readonly focusTracker: FocusTracker;
77
- /**
78
- * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}
79
- * which can respond to certain keystrokes and cycle the focus.
80
- */
81
- readonly keystrokeHandler?: KeystrokeHandler;
82
- /**
83
- * Actions that the cycler can take when a keystroke is pressed. Requires
84
- * `options.keystrokeHandler` to be passed and working. When an action is
85
- * performed, `preventDefault` and `stopPropagation` will be called on the event
86
- * the keystroke fired in the DOM.
87
- *
88
- * ```ts
89
- * actions: {
90
- * // Will call #focusPrevious() when arrowleft or arrowup is pressed.
91
- * focusPrevious: [ 'arrowleft', 'arrowup' ],
92
- *
93
- * // Will call #focusNext() when arrowdown is pressed.
94
- * focusNext: 'arrowdown'
95
- * }
96
- * ```
97
- */
98
- readonly actions?: FocusCyclerActions;
99
- /**
100
- * Creates an instance of the focus cycler utility.
101
- *
102
- * @param options Configuration options.
103
- */
104
- constructor(options: {
105
- focusables: ViewCollection<FocusableView>;
106
- focusTracker: FocusTracker;
107
- keystrokeHandler?: KeystrokeHandler;
108
- keystrokeHandlerOptions?: KeystrokeHandlerOptions;
109
- actions?: FocusCyclerActions;
110
- });
111
- /**
112
- * Returns the first focusable view in {@link #focusables}.
113
- * Returns `null` if there is none.
114
- *
115
- * **Note**: Hidden views (e.g. with `display: none`) are ignored.
116
- */
117
- get first(): FocusableView | null;
118
- /**
119
- * Returns the last focusable view in {@link #focusables}.
120
- * Returns `null` if there is none.
121
- *
122
- * **Note**: Hidden views (e.g. with `display: none`) are ignored.
123
- */
124
- get last(): FocusableView | null;
125
- /**
126
- * Returns the next focusable view in {@link #focusables} based on {@link #current}.
127
- * Returns `null` if there is none.
128
- *
129
- * **Note**: Hidden views (e.g. with `display: none`) are ignored.
130
- */
131
- get next(): FocusableView | null;
132
- /**
133
- * Returns the previous focusable view in {@link #focusables} based on {@link #current}.
134
- * Returns `null` if there is none.
135
- *
136
- * **Note**: Hidden views (e.g. with `display: none`) are ignored.
137
- */
138
- get previous(): FocusableView | null;
139
- /**
140
- * An index of the view in the {@link #focusables} which is focused according
141
- * to {@link #focusTracker}. Returns `null` when there is no such view.
142
- */
143
- get current(): number | null;
144
- /**
145
- * Focuses the {@link #first} item in {@link #focusables}.
146
- *
147
- * **Note**: Hidden views (e.g. with `display: none`) are ignored.
148
- */
149
- focusFirst(): void;
150
- /**
151
- * Focuses the {@link #last} item in {@link #focusables}.
152
- *
153
- * **Note**: Hidden views (e.g. with `display: none`) are ignored.
154
- */
155
- focusLast(): void;
156
- /**
157
- * Focuses the {@link #next} item in {@link #focusables}.
158
- *
159
- * **Note**: Hidden views (e.g. with `display: none`) are ignored.
160
- */
161
- focusNext(): void;
162
- /**
163
- * Focuses the {@link #previous} item in {@link #focusables}.
164
- *
165
- * **Note**: Hidden views (e.g. with `display: none`) are ignored.
166
- */
167
- focusPrevious(): void;
168
- /**
169
- * Allows for creating continuous focus cycling across multiple focus cyclers and their collections of {@link #focusables}.
170
- *
171
- * It starts listening to the {@link module:ui/focuscycler~FocusCyclerForwardCycleEvent} and
172
- * {@link module:ui/focuscycler~FocusCyclerBackwardCycleEvent} events of the chained focus cycler and engages,
173
- * whenever the user reaches the last (forwards navigation) or first (backwards navigation) focusable view
174
- * and would normally start over. Instead, the navigation continues on the higher level (flattens).
175
- *
176
- * For instance, for the following nested focus navigation structure, the focus would get stuck the moment
177
- * the AB gets focused and its focus cycler starts managing it:
178
- *
179
- * ┌────────────┐ ┌──────────────────────────────────┐ ┌────────────┐
180
- * │ AA │ │ AB │ │ AC │
181
- * │ │ │ │ │ │
182
- * │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │
183
- * │ │ │ ┌──► ABA ├──► ABB ├──► ABC ├───┐ │ │ │
184
- * │ ├───► │ └─────┘ └─────┘ └─────┘ │ │ │ │
185
- * │ │ │ │ │ │ │ │
186
- * │ │ │ │ │ │ │ │
187
- * │ │ │ └──────────────────────────────┘ │ │ │
188
- * │ │ │ │ │ │
189
- * └────────────┘ └──────────────────────────────────┘ └────────────┘
190
- *
191
- * Chaining a focus tracker that manages AA, AB, and AC with the focus tracker that manages ABA, ABB, and ABC
192
- * creates a seamless navigation experience instead:
193
- *
194
- * ┌────────────┐ ┌──────────────────────────────────┐ ┌────────────┐
195
- * │ AA │ │ AB │ │ AC │
196
- * │ │ │ │ │ │
197
- * │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │
198
- * │ │ │ ┌──► ABA ├──► ABB ├──► ABC ├──┐ │ │ │
199
- * ┌──► ├───┼─┘ └─────┘ └─────┘ └─────┘ └──┼───► ├──┐
200
- * │ │ │ │ │ │ │ │
201
- * │ │ │ │ │ │ │ │
202
- * │ │ │ │ │ │ │ │
203
- * │ │ │ │ │ │ │ │
204
- * │ └────────────┘ └──────────────────────────────────┘ └────────────┘ │
205
- * │ │
206
- * │ │
207
- * └──────────────────────────────────────────────────────────────────────────┘
208
- *
209
- * See {@link #unchain} to reverse the chaining.
210
- */
211
- chain(chainedFocusCycler: FocusCycler): void;
212
- /**
213
- * Reverses a chaining made by {@link #chain}.
214
- */
215
- unchain(otherFocusCycler: FocusCycler): void;
216
- /**
217
- * Focuses the given view if it exists.
218
- *
219
- * @param view The view to be focused
220
- * @param direction The direction of the focus if the view has focusable children.
221
- * @returns
222
- */
223
- private _focus;
224
- /**
225
- * Returns the next or previous focusable view in {@link #focusables} with respect
226
- * to {@link #current}.
227
- *
228
- * @param step Either `1` for checking forward from {@link #current} or `-1` for checking backwards.
229
- */
230
- private _getDomFocusableItem;
13
+ * A utility class that helps cycling over {@link module:ui/focuscycler~FocusableView focusable views} in a
14
+ * {@link module:ui/viewcollection~ViewCollection} when the focus is tracked by the
15
+ * {@link module:utils/focustracker~FocusTracker} instance. It helps implementing keyboard
16
+ * navigation in HTML forms, toolbars, lists and the like.
17
+ *
18
+ * To work properly it requires:
19
+ * * a collection of focusable (HTML `tabindex` attribute) views that implement the `focus()` method,
20
+ * * an associated focus tracker to determine which view is focused.
21
+ *
22
+ * A simple cycler setup can look like this:
23
+ *
24
+ * ```ts
25
+ * const focusables = new ViewCollection<FocusableView>();
26
+ * const focusTracker = new FocusTracker();
27
+ *
28
+ * // Add focusable views to the focus tracker.
29
+ * focusTracker.add( ... );
30
+ * ```
31
+ *
32
+ * Then, the cycler can be used manually:
33
+ *
34
+ * ```ts
35
+ * const cycler = new FocusCycler( { focusables, focusTracker } );
36
+ *
37
+ * // Will focus the first focusable view in #focusables.
38
+ * cycler.focusFirst();
39
+ *
40
+ * // Will log the next focusable item in #focusables.
41
+ * console.log( cycler.next );
42
+ * ```
43
+ *
44
+ * Alternatively, it can work side by side with the {@link module:utils/keystrokehandler~KeystrokeHandler}:
45
+ *
46
+ * ```ts
47
+ * const keystrokeHandler = new KeystrokeHandler();
48
+ *
49
+ * // Activate the keystroke handler.
50
+ * keystrokeHandler.listenTo( sourceOfEvents );
51
+ *
52
+ * const cycler = new FocusCycler( {
53
+ * focusables, focusTracker, keystrokeHandler,
54
+ * actions: {
55
+ * // When arrowup of arrowleft is detected by the #keystrokeHandler,
56
+ * // focusPrevious() will be called on the cycler.
57
+ * focusPrevious: [ 'arrowup', 'arrowleft' ],
58
+ * }
59
+ * } );
60
+ * ```
61
+ *
62
+ * Check out the {@glink framework/deep-dive/ui/focus-tracking "Deep dive into focus tracking"} guide to learn more.
63
+ */
64
+ export declare class FocusCycler extends FocusCyclerBase {
65
+ /**
66
+ * A {@link module:ui/focuscycler~FocusableView focusable views} collection that the cycler operates on.
67
+ */
68
+ readonly focusables: ViewCollection<FocusableView>;
69
+ /**
70
+ * A focus tracker instance that the cycler uses to determine the current focus
71
+ * state in {@link #focusables}.
72
+ */
73
+ readonly focusTracker: FocusTracker;
74
+ /**
75
+ * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}
76
+ * which can respond to certain keystrokes and cycle the focus.
77
+ */
78
+ readonly keystrokeHandler?: KeystrokeHandler;
79
+ /**
80
+ * Actions that the cycler can take when a keystroke is pressed. Requires
81
+ * `options.keystrokeHandler` to be passed and working. When an action is
82
+ * performed, `preventDefault` and `stopPropagation` will be called on the event
83
+ * the keystroke fired in the DOM.
84
+ *
85
+ * ```ts
86
+ * actions: {
87
+ * // Will call #focusPrevious() when arrowleft or arrowup is pressed.
88
+ * focusPrevious: [ 'arrowleft', 'arrowup' ],
89
+ *
90
+ * // Will call #focusNext() when arrowdown is pressed.
91
+ * focusNext: 'arrowdown'
92
+ * }
93
+ * ```
94
+ */
95
+ readonly actions?: FocusCyclerActions;
96
+ /**
97
+ * Creates an instance of the focus cycler utility.
98
+ *
99
+ * @param options Configuration options.
100
+ */
101
+ constructor(options: {
102
+ focusables: ViewCollection<FocusableView>;
103
+ focusTracker: FocusTracker;
104
+ keystrokeHandler?: KeystrokeHandler;
105
+ keystrokeHandlerOptions?: KeystrokeHandlerOptions;
106
+ actions?: FocusCyclerActions;
107
+ });
108
+ /**
109
+ * Returns the first focusable view in {@link #focusables}.
110
+ * Returns `null` if there is none.
111
+ *
112
+ * **Note**: Hidden views (e.g. with `display: none`) are ignored.
113
+ */
114
+ get first(): FocusableView | null;
115
+ /**
116
+ * Returns the last focusable view in {@link #focusables}.
117
+ * Returns `null` if there is none.
118
+ *
119
+ * **Note**: Hidden views (e.g. with `display: none`) are ignored.
120
+ */
121
+ get last(): FocusableView | null;
122
+ /**
123
+ * Returns the next focusable view in {@link #focusables} based on {@link #current}.
124
+ * Returns `null` if there is none.
125
+ *
126
+ * **Note**: Hidden views (e.g. with `display: none`) are ignored.
127
+ */
128
+ get next(): FocusableView | null;
129
+ /**
130
+ * Returns the previous focusable view in {@link #focusables} based on {@link #current}.
131
+ * Returns `null` if there is none.
132
+ *
133
+ * **Note**: Hidden views (e.g. with `display: none`) are ignored.
134
+ */
135
+ get previous(): FocusableView | null;
136
+ /**
137
+ * An index of the view in the {@link #focusables} which is focused according
138
+ * to {@link #focusTracker}. Returns `null` when there is no such view.
139
+ */
140
+ get current(): number | null;
141
+ /**
142
+ * Focuses the {@link #first} item in {@link #focusables}.
143
+ *
144
+ * **Note**: Hidden views (e.g. with `display: none`) are ignored.
145
+ */
146
+ focusFirst(): void;
147
+ /**
148
+ * Focuses the {@link #last} item in {@link #focusables}.
149
+ *
150
+ * **Note**: Hidden views (e.g. with `display: none`) are ignored.
151
+ */
152
+ focusLast(): void;
153
+ /**
154
+ * Focuses the {@link #next} item in {@link #focusables}.
155
+ *
156
+ * **Note**: Hidden views (e.g. with `display: none`) are ignored.
157
+ */
158
+ focusNext(): void;
159
+ /**
160
+ * Focuses the {@link #previous} item in {@link #focusables}.
161
+ *
162
+ * **Note**: Hidden views (e.g. with `display: none`) are ignored.
163
+ */
164
+ focusPrevious(): void;
165
+ /**
166
+ * Allows for creating continuous focus cycling across multiple focus cyclers and their collections of {@link #focusables}.
167
+ *
168
+ * It starts listening to the {@link module:ui/focuscycler~FocusCyclerForwardCycleEvent} and
169
+ * {@link module:ui/focuscycler~FocusCyclerBackwardCycleEvent} events of the chained focus cycler and engages,
170
+ * whenever the user reaches the last (forwards navigation) or first (backwards navigation) focusable view
171
+ * and would normally start over. Instead, the navigation continues on the higher level (flattens).
172
+ *
173
+ * For instance, for the following nested focus navigation structure, the focus would get stuck the moment
174
+ * the AB gets focused and its focus cycler starts managing it:
175
+ *
176
+ * ┌────────────┐ ┌──────────────────────────────────┐ ┌────────────┐
177
+ * │ AA │ │ AB │ │ AC │
178
+ * │ │ │ │ │ │
179
+ * │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │
180
+ * │ │ │ ┌──► ABA ├──► ABB ├──► ABC ├───┐ │ │ │
181
+ * │ ├───► │ └─────┘ └─────┘ └─────┘ │ │ │ │
182
+ * │ │ │ │ │ │ │ │
183
+ * │ │ │ │ │ │ │ │
184
+ * │ │ │ └──────────────────────────────┘ │ │ │
185
+ * │ │ │ │ │ │
186
+ * └────────────┘ └──────────────────────────────────┘ └────────────┘
187
+ *
188
+ * Chaining a focus tracker that manages AA, AB, and AC with the focus tracker that manages ABA, ABB, and ABC
189
+ * creates a seamless navigation experience instead:
190
+ *
191
+ * ┌────────────┐ ┌──────────────────────────────────┐ ┌────────────┐
192
+ * │ AA │ │ AB │ │ AC │
193
+ * │ │ │ │ │ │
194
+ * │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │
195
+ * │ │ │ ┌──► ABA ├──► ABB ├──► ABC ├──┐ │ │ │
196
+ * ┌──► ├───┼─┘ └─────┘ └─────┘ └─────┘ └──┼───► ├──┐
197
+ * │ │ │ │ │ │ │ │
198
+ * │ │ │ │ │ │ │ │
199
+ * │ │ │ │ │ │ │ │
200
+ * │ │ │ │ │ │ │ │
201
+ * │ └────────────┘ └──────────────────────────────────┘ └────────────┘ │
202
+ * │ │
203
+ * │ │
204
+ * └──────────────────────────────────────────────────────────────────────────┘
205
+ *
206
+ * See {@link #unchain} to reverse the chaining.
207
+ */
208
+ chain(chainedFocusCycler: FocusCycler): void;
209
+ /**
210
+ * Reverses a chaining made by {@link #chain}.
211
+ */
212
+ unchain(otherFocusCycler: FocusCycler): void;
213
+ /**
214
+ * Focuses the given view if it exists.
215
+ *
216
+ * @param view The view to be focused
217
+ * @param direction The direction of the focus if the view has focusable children.
218
+ * @returns
219
+ */
220
+ private _focus;
221
+ /**
222
+ * Returns the next or previous focusable view in {@link #focusables} with respect
223
+ * to {@link #current}.
224
+ *
225
+ * @param step Either `1` for checking forward from {@link #current} or `-1` for checking backwards.
226
+ */
227
+ private _getDomFocusableItem;
231
228
  }
232
229
  /**
233
- * A {@link module:ui/view~View} that can be focused (e.g. has `focus()` method).
234
- */
230
+ * A {@link module:ui/view~View} that can be focused (e.g. has `focus()` method).
231
+ */
235
232
  export type FocusableView = View & {
236
- /**
237
- * Focuses the view.
238
- *
239
- * @param direction This optional parameter helps improve the UX by providing additional information about the direction the focus moved
240
- * (e.g. in a complex view or a form). It is useful for views that host multiple focusable children (e.g. lists, toolbars):
241
- * * `1` indicates that the focus moved forward and, in most cases, the first child of the focused view should get focused,
242
- * * `-1` indicates that the focus moved backwards, and the last focusable child should get focused
243
- *
244
- * See {@link module:ui/focuscycler~FocusCycler#event:forwardCycle} and {@link module:ui/focuscycler~FocusCycler#event:backwardCycle}
245
- * to learn more.
246
- */
247
- focus(direction?: 1 | -1): void;
233
+ /**
234
+ * Focuses the view.
235
+ *
236
+ * @param direction This optional parameter helps improve the UX by providing additional information about the direction the focus moved
237
+ * (e.g. in a complex view or a form). It is useful for views that host multiple focusable children (e.g. lists, toolbars):
238
+ * * `1` indicates that the focus moved forward and, in most cases, the first child of the focused view should get focused,
239
+ * * `-1` indicates that the focus moved backwards, and the last focusable child should get focused
240
+ *
241
+ * See {@link module:ui/focuscycler~FocusCycler#event:forwardCycle} and {@link module:ui/focuscycler~FocusCycler#event:backwardCycle}
242
+ * to learn more.
243
+ */
244
+ focus(direction?: 1 | -1): void;
248
245
  };
249
246
  /**
250
- * A {@link module:ui/view~View} that hosts one or more of focusable children being managed by a {@link module:ui/focuscycler~FocusCycler}
251
- * instance exposed under `focusCycler` property.
252
- */
247
+ * A {@link module:ui/view~View} that hosts one or more of focusable children being managed by a {@link module:ui/focuscycler~FocusCycler}
248
+ * instance exposed under `focusCycler` property.
249
+ */
253
250
  export type ViewWithFocusCycler = FocusableView & {
254
- focusCycler: FocusCycler;
255
- };
256
- export type FocusCyclerActions = {
257
- [key in 'focusFirst' | 'focusLast' | 'focusPrevious' | 'focusNext']?: ArrayOrItem<string>;
251
+ focusCycler: FocusCycler;
258
252
  };
253
+ export type FocusCyclerActions = { [key in "focusFirst" | "focusLast" | "focusPrevious" | "focusNext"]?: ArrayOrItem<string> };
259
254
  /**
260
- * Fired when the focus cycler is about to move the focus from the last focusable item
261
- * to the first one.
262
- *
263
- * @eventName ~FocusCycler#forwardCycle
264
- */
255
+ * Fired when the focus cycler is about to move the focus from the last focusable item
256
+ * to the first one.
257
+ *
258
+ * @eventName ~FocusCycler#forwardCycle
259
+ */
265
260
  export type FocusCyclerForwardCycleEvent = {
266
- name: 'forwardCycle';
267
- args: [];
261
+ name: "forwardCycle";
262
+ args: [];
268
263
  };
269
264
  /**
270
- * Fired when the focus cycler is about to move the focus from the first focusable item
271
- * to the last one.
272
- *
273
- * @eventName ~FocusCycler#backwardCycle
274
- */
265
+ * Fired when the focus cycler is about to move the focus from the first focusable item
266
+ * to the last one.
267
+ *
268
+ * @eventName ~FocusCycler#backwardCycle
269
+ */
275
270
  export type FocusCyclerBackwardCycleEvent = {
276
- name: 'backwardCycle';
277
- args: [];
271
+ name: "backwardCycle";
272
+ args: [];
278
273
  };
279
274
  /**
280
- * Checks whether a view is {@link ~FocusableView}.
281
- *
282
- * @param view A view to be checked.
283
- */
275
+ * Checks whether a view is {@link ~FocusableView}.
276
+ *
277
+ * @param view A view to be checked.
278
+ */
284
279
  export declare function isFocusable(view: View): view is FocusableView;
285
280
  /**
286
- * Checks whether a view is an instance of {@link ~ViewWithFocusCycler}.
287
- *
288
- * @param view A view to be checked.
289
- */
281
+ * Checks whether a view is an instance of {@link ~ViewWithFocusCycler}.
282
+ *
283
+ * @param view A view to be checked.
284
+ */
290
285
  export declare function isViewWithFocusCycler(view: View): view is ViewWithFocusCycler;
291
286
  export {};