@enonic/ui 1.6.0 → 1.7.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 (65) hide show
  1. package/README.md +10 -6
  2. package/dist/enonic-ui.cjs +1 -1
  3. package/dist/enonic-ui.es.js +135 -134
  4. package/dist/style.cjs +1 -1
  5. package/dist/style.es.js +1 -1
  6. package/dist/styles/style.css +2 -2
  7. package/dist/types/components/avatar/avatar.d.ts +18 -13
  8. package/dist/types/components/button/button.d.ts +6 -3
  9. package/dist/types/components/checkbox/checkbox.d.ts +25 -3
  10. package/dist/types/components/combobox/combobox.d.ts +20 -12
  11. package/dist/types/components/context-menu/context-menu.d.ts +78 -37
  12. package/dist/types/components/date-picker/date-picker.d.ts +36 -23
  13. package/dist/types/components/dialog/dialog-actions.d.ts +1 -1
  14. package/dist/types/components/dialog/dialog.d.ts +81 -44
  15. package/dist/types/components/grid-list/grid-list.d.ts +102 -12
  16. package/dist/types/components/icon-button/icon-button.d.ts +2 -4
  17. package/dist/types/components/input/input.d.ts +28 -6
  18. package/dist/types/components/link/link.d.ts +7 -3
  19. package/dist/types/components/listbox/listbox.d.ts +5 -3
  20. package/dist/types/components/menu/menu.d.ts +52 -25
  21. package/dist/types/components/menubar/menubar.d.ts +94 -33
  22. package/dist/types/components/radio-group/radio-group.d.ts +30 -12
  23. package/dist/types/components/search-field/search-field.d.ts +1 -3
  24. package/dist/types/components/selectable-list-item/selectable-list-item.d.ts +1 -1
  25. package/dist/types/components/selector/selector.d.ts +72 -36
  26. package/dist/types/components/stepper/stepper.d.ts +54 -18
  27. package/dist/types/components/tab/tab.d.ts +93 -21
  28. package/dist/types/components/tag/tag.d.ts +27 -18
  29. package/dist/types/components/textarea/textarea.d.ts +34 -3
  30. package/dist/types/components/time-picker/time-picker.d.ts +26 -19
  31. package/dist/types/components/toast/toast.d.ts +28 -25
  32. package/dist/types/components/toggle/toggle.d.ts +5 -3
  33. package/dist/types/components/toggle-group/toggle-group.d.ts +6 -9
  34. package/dist/types/components/toolbar/toolbar-toggle-group.d.ts +10 -12
  35. package/dist/types/components/toolbar/toolbar.d.ts +29 -21
  36. package/dist/types/components/tooltip/tooltip.d.ts +13 -1
  37. package/dist/types/components/tree-list/tree-list.d.ts +253 -60
  38. package/dist/types/components/virtualized-tree-list/virtualized-tree-list.d.ts +87 -41
  39. package/dist/types/hooks/use-active-item-focus.d.ts +1 -1
  40. package/dist/types/hooks/use-active-on-open.d.ts +1 -1
  41. package/dist/types/hooks/use-click-outside.d.ts +2 -2
  42. package/dist/types/hooks/use-floating-position.d.ts +2 -2
  43. package/dist/types/hooks/use-pointer-position.d.ts +1 -1
  44. package/dist/types/hooks/use-radio-navigation.d.ts +1 -1
  45. package/dist/types/hooks/use-scroll-active-into-view.d.ts +1 -1
  46. package/dist/types/hooks/use-step-navigation.d.ts +1 -1
  47. package/dist/types/hooks/use-submenu-safe-area.d.ts +1 -1
  48. package/dist/types/hooks/use-sync-value.d.ts +1 -1
  49. package/dist/types/primitives/menu-primitive/menu-primitive.d.ts +41 -20
  50. package/dist/types/providers/combobox-provider.d.ts +5 -5
  51. package/dist/types/providers/context-menu-provider.d.ts +4 -5
  52. package/dist/types/providers/context-menu-sub-provider.d.ts +3 -3
  53. package/dist/types/providers/date-picker-provider.d.ts +2 -2
  54. package/dist/types/providers/focus-container-provider.d.ts +1 -1
  55. package/dist/types/providers/menu-provider.d.ts +2 -2
  56. package/dist/types/providers/menubar-menu-provider.d.ts +4 -4
  57. package/dist/types/providers/menubar-provider.d.ts +1 -1
  58. package/dist/types/providers/search-field-provider.d.ts +1 -1
  59. package/dist/types/providers/selector-provider.d.ts +1 -1
  60. package/dist/types/providers/time-picker-provider.d.ts +3 -3
  61. package/dist/types/providers/toolbar-provider.d.ts +1 -1
  62. package/dist/types/types/lucide.d.ts +9 -5
  63. package/dist/types/utils/dom.d.ts +15 -1
  64. package/dist/types/utils/unwrap.d.ts +1 -1
  65. package/package.json +27 -32
@@ -98,23 +98,26 @@ export type TreeListRowLeftProps = {
98
98
  children?: ReactNode;
99
99
  className?: string;
100
100
  } & ComponentPropsWithoutRef<'div'>;
101
- export declare const TreeListRowLeft: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLeftProps> & {
102
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
103
- }>;
101
+ export declare const TreeListRowLeft: import('react').ForwardRefExoticComponent<{
102
+ children?: ReactNode;
103
+ className?: string;
104
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
104
105
  export type TreeListRowRightProps = {
105
106
  children?: ReactNode;
106
107
  className?: string;
107
108
  } & ComponentPropsWithoutRef<'div'>;
108
- export declare const TreeListRowRight: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowRightProps> & {
109
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
110
- }>;
109
+ export declare const TreeListRowRight: import('react').ForwardRefExoticComponent<{
110
+ children?: ReactNode;
111
+ className?: string;
112
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
111
113
  export type TreeListRowContentProps = {
112
114
  children?: ReactNode;
113
115
  className?: string;
114
116
  } & ComponentPropsWithoutRef<'div'>;
115
- export declare const TreeListRowContent: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowContentProps> & {
116
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
117
- }>;
117
+ export declare const TreeListRowContent: import('react').ForwardRefExoticComponent<{
118
+ children?: ReactNode;
119
+ className?: string;
120
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
118
121
  export type TreeListActionProps = {
119
122
  /** Interactive element to exclude from normal tab order (use F2 action mode) */
120
123
  children: ReactElement;
@@ -134,9 +137,12 @@ export type TreeListRowLevelSpacerProps = {
134
137
  levelIndent?: number;
135
138
  className?: string;
136
139
  } & ComponentPropsWithoutRef<'div'>;
137
- export declare const TreeListRowLevelSpacer: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLevelSpacerProps> & {
138
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
139
- }>;
140
+ export declare const TreeListRowLevelSpacer: import('react').ForwardRefExoticComponent<{
141
+ level?: number;
142
+ /** Indent per level in pixels. Default: 20 */
143
+ levelIndent?: number;
144
+ className?: string;
145
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
140
146
  export type TreeListRowExpandControlProps = {
141
147
  /** Row ID - if provided, clicking will also set this row as active */
142
148
  rowId?: string;
@@ -148,9 +154,17 @@ export type TreeListRowExpandControlProps = {
148
154
  'aria-label'?: string;
149
155
  className?: string;
150
156
  } & Omit<IconButtonProps, 'icon' | 'onClick' | 'aria-label'>;
151
- export declare const TreeListRowExpandControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowExpandControlProps> & {
152
- ref?: import('preact').Ref<HTMLButtonElement> | undefined;
153
- }>;
157
+ export declare const TreeListRowExpandControl: import('react').ForwardRefExoticComponent<{
158
+ /** Row ID - if provided, clicking will also set this row as active */
159
+ rowId?: string;
160
+ expanded?: boolean;
161
+ hasChildren?: boolean;
162
+ onToggle?: () => void;
163
+ icon?: LucideIcon;
164
+ selected?: boolean;
165
+ 'aria-label'?: string;
166
+ className?: string;
167
+ } & Omit<IconButtonProps, "aria-label" | "onClick" | "icon"> & import('react').RefAttributes<HTMLButtonElement>>;
154
168
  export type TreeListRowSelectionControlProps = {
155
169
  /** Row ID - required for toggle selection to work */
156
170
  rowId: string;
@@ -161,9 +175,16 @@ export type TreeListRowSelectionControlProps = {
161
175
  variant?: 'checkbox' | 'radio';
162
176
  className?: string;
163
177
  } & Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>;
164
- export declare const TreeListRowSelectionControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowSelectionControlProps> & {
165
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
166
- }>;
178
+ export declare const TreeListRowSelectionControl: import('react').ForwardRefExoticComponent<{
179
+ /** Row ID - required for toggle selection to work */
180
+ rowId: string;
181
+ /** Override selection state. If not provided, reads from TreeList selection context. */
182
+ selected?: boolean;
183
+ selectable?: boolean;
184
+ /** Override indicator style. Default: checkbox for multiple, none for single */
185
+ variant?: "checkbox" | "radio";
186
+ className?: string;
187
+ } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClick"> & import('react').RefAttributes<HTMLDivElement>>;
167
188
  export type TreeListRowLoadingProps = {
168
189
  level?: number;
169
190
  /** Indent per level in pixels. Default: 20 */
@@ -171,9 +192,13 @@ export type TreeListRowLoadingProps = {
171
192
  className?: string;
172
193
  children?: ReactNode;
173
194
  } & ComponentPropsWithoutRef<'div'>;
174
- export declare const TreeListRowLoading: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLoadingProps> & {
175
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
176
- }>;
195
+ export declare const TreeListRowLoading: import('react').ForwardRefExoticComponent<{
196
+ level?: number;
197
+ /** Indent per level in pixels. Default: 20 */
198
+ levelIndent?: number;
199
+ className?: string;
200
+ children?: ReactNode;
201
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
177
202
  export type TreeListRowPlaceholderProps = {
178
203
  level?: number;
179
204
  /** Indent per level in pixels. Default: 20 */
@@ -181,45 +206,213 @@ export type TreeListRowPlaceholderProps = {
181
206
  className?: string;
182
207
  children?: ReactNode;
183
208
  } & ComponentPropsWithoutRef<'div'>;
184
- export declare const TreeListRowPlaceholder: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowPlaceholderProps> & {
185
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
186
- }>;
187
- export declare const TreeList: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRootProps> & {
188
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
189
- }> & {
190
- Root: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRootProps> & {
191
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
192
- }>;
193
- Container: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListContainerProps> & {
194
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
195
- }>;
196
- Row: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowProps> & {
197
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
198
- }>;
199
- RowLeft: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLeftProps> & {
200
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
201
- }>;
202
- RowRight: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowRightProps> & {
203
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
204
- }>;
205
- RowContent: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowContentProps> & {
206
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
207
- }>;
208
- RowLevelSpacer: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLevelSpacerProps> & {
209
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
210
- }>;
211
- RowExpandControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowExpandControlProps> & {
212
- ref?: import('preact').Ref<HTMLButtonElement> | undefined;
213
- }>;
214
- RowSelectionControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowSelectionControlProps> & {
215
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
216
- }>;
217
- RowLoading: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLoadingProps> & {
218
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
219
- }>;
220
- RowPlaceholder: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowPlaceholderProps> & {
221
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
222
- }>;
209
+ export declare const TreeListRowPlaceholder: import('react').ForwardRefExoticComponent<{
210
+ level?: number;
211
+ /** Indent per level in pixels. Default: 20 */
212
+ levelIndent?: number;
213
+ className?: string;
214
+ children?: ReactNode;
215
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
216
+ export declare const TreeList: import('react').ForwardRefExoticComponent<{
217
+ selection?: ReadonlySet<string>;
218
+ defaultSelection?: ReadonlySet<string>;
219
+ onSelectionChange?: (selection: ReadonlySet<string>) => void;
220
+ selectionMode?: SelectionMode;
221
+ active?: string;
222
+ defaultActive?: string;
223
+ onActiveChange?: (active: string | undefined) => void;
224
+ loop?: boolean;
225
+ className?: string;
226
+ children?: ReactNode;
227
+ onActivate?: (id: string) => void;
228
+ getParentId?: (id: string) => string | undefined;
229
+ getFirstChildId?: (id: string) => string | undefined;
230
+ expanded?: ReadonlySet<string>;
231
+ onExpandedChange?: (expanded: ReadonlySet<string>) => void;
232
+ /**
233
+ * Controls how users can interact with each item.
234
+ *
235
+ * Returns:
236
+ * - `'full'`: Item can be navigated to and selected (default)
237
+ * - `'navigate-only'`: Item can receive focus but cannot be selected
238
+ * - `'none'`: Item is completely non-interactive (skipped in navigation, cannot be selected)
239
+ *
240
+ * Default behavior when not provided:
241
+ * - Uses the `disabled` prop from TreeListRow (disabled = 'none', enabled = 'full')
242
+ */
243
+ getItemInteraction?: (id: string) => ItemInteraction;
244
+ /**
245
+ * When true, single-clicking the active item while selection is empty
246
+ * will clear the active state. Double-clicks are not affected.
247
+ * Default: false.
248
+ *
249
+ * This enables "toggle active" behavior where users can deactivate
250
+ * an item by clicking it again when nothing is selected.
251
+ */
252
+ clearActiveOnReclick?: boolean;
253
+ /**
254
+ * Controls how selection behaves on a plain row click (no modifier keys).
255
+ * Shift+Click (range) and Ctrl/Cmd+Click (toggle) are unaffected.
256
+ *
257
+ * - `'select'` (default): Selects only the clicked item, clearing others.
258
+ * In single mode, clicking the already-selected item deselects it.
259
+ * - `'toggle'`: Toggles the clicked item without affecting other selections.
260
+ * Suitable for combobox dropdowns where row click = checkbox click.
261
+ * - `'clear'`: Clears all selection on click. Row click only manages
262
+ * the active item. Modifier clicks still work for selection.
263
+ *
264
+ * @default 'select'
265
+ */
266
+ rowClickSelection?: RowClickSelection;
267
+ /**
268
+ * When true (default), pressing Escape clears the selection.
269
+ * Set to false when using inside a Combobox where Escape should
270
+ * only close the dropdown without clearing selection.
271
+ *
272
+ * @default true
273
+ */
274
+ clearSelectionOnEscape?: boolean;
275
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>> & {
276
+ Root: import('react').ForwardRefExoticComponent<{
277
+ selection?: ReadonlySet<string>;
278
+ defaultSelection?: ReadonlySet<string>;
279
+ onSelectionChange?: (selection: ReadonlySet<string>) => void;
280
+ selectionMode?: SelectionMode;
281
+ active?: string;
282
+ defaultActive?: string;
283
+ onActiveChange?: (active: string | undefined) => void;
284
+ loop?: boolean;
285
+ className?: string;
286
+ children?: ReactNode;
287
+ onActivate?: (id: string) => void;
288
+ getParentId?: (id: string) => string | undefined;
289
+ getFirstChildId?: (id: string) => string | undefined;
290
+ expanded?: ReadonlySet<string>;
291
+ onExpandedChange?: (expanded: ReadonlySet<string>) => void;
292
+ /**
293
+ * Controls how users can interact with each item.
294
+ *
295
+ * Returns:
296
+ * - `'full'`: Item can be navigated to and selected (default)
297
+ * - `'navigate-only'`: Item can receive focus but cannot be selected
298
+ * - `'none'`: Item is completely non-interactive (skipped in navigation, cannot be selected)
299
+ *
300
+ * Default behavior when not provided:
301
+ * - Uses the `disabled` prop from TreeListRow (disabled = 'none', enabled = 'full')
302
+ */
303
+ getItemInteraction?: (id: string) => ItemInteraction;
304
+ /**
305
+ * When true, single-clicking the active item while selection is empty
306
+ * will clear the active state. Double-clicks are not affected.
307
+ * Default: false.
308
+ *
309
+ * This enables "toggle active" behavior where users can deactivate
310
+ * an item by clicking it again when nothing is selected.
311
+ */
312
+ clearActiveOnReclick?: boolean;
313
+ /**
314
+ * Controls how selection behaves on a plain row click (no modifier keys).
315
+ * Shift+Click (range) and Ctrl/Cmd+Click (toggle) are unaffected.
316
+ *
317
+ * - `'select'` (default): Selects only the clicked item, clearing others.
318
+ * In single mode, clicking the already-selected item deselects it.
319
+ * - `'toggle'`: Toggles the clicked item without affecting other selections.
320
+ * Suitable for combobox dropdowns where row click = checkbox click.
321
+ * - `'clear'`: Clears all selection on click. Row click only manages
322
+ * the active item. Modifier clicks still work for selection.
323
+ *
324
+ * @default 'select'
325
+ */
326
+ rowClickSelection?: RowClickSelection;
327
+ /**
328
+ * When true (default), pressing Escape clears the selection.
329
+ * Set to false when using inside a Combobox where Escape should
330
+ * only close the dropdown without clearing selection.
331
+ *
332
+ * @default true
333
+ */
334
+ clearSelectionOnEscape?: boolean;
335
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
336
+ Container: import('react').ForwardRefExoticComponent<{
337
+ children?: ReactNode;
338
+ className?: string;
339
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
340
+ Row: import('react').ForwardRefExoticComponent<{
341
+ id: string;
342
+ disabled?: boolean;
343
+ selectable?: boolean;
344
+ /** ARIA level for tree hierarchy (1-based, optional for accessibility) */
345
+ level?: number;
346
+ /** Whether this node has children (affects aria-expanded) */
347
+ hasChildren?: boolean;
348
+ /** Whether this node is expanded (required if hasChildren=true) */
349
+ expanded?: boolean;
350
+ /**
351
+ * Position of this item within its siblings (1-indexed).
352
+ * Used for `aria-posinset`. Optional - only set if you have this data.
353
+ */
354
+ posinset?: number;
355
+ /**
356
+ * Total number of siblings at this level.
357
+ * Used for `aria-setsize`. Optional - only set if you have this data.
358
+ */
359
+ setsize?: number;
360
+ className?: string;
361
+ children?: ReactNode;
362
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
363
+ RowLeft: import('react').ForwardRefExoticComponent<{
364
+ children?: ReactNode;
365
+ className?: string;
366
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
367
+ RowRight: import('react').ForwardRefExoticComponent<{
368
+ children?: ReactNode;
369
+ className?: string;
370
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
371
+ RowContent: import('react').ForwardRefExoticComponent<{
372
+ children?: ReactNode;
373
+ className?: string;
374
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
375
+ RowLevelSpacer: import('react').ForwardRefExoticComponent<{
376
+ level?: number;
377
+ /** Indent per level in pixels. Default: 20 */
378
+ levelIndent?: number;
379
+ className?: string;
380
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
381
+ RowExpandControl: import('react').ForwardRefExoticComponent<{
382
+ /** Row ID - if provided, clicking will also set this row as active */
383
+ rowId?: string;
384
+ expanded?: boolean;
385
+ hasChildren?: boolean;
386
+ onToggle?: () => void;
387
+ icon?: LucideIcon;
388
+ selected?: boolean;
389
+ 'aria-label'?: string;
390
+ className?: string;
391
+ } & Omit<IconButtonProps, "aria-label" | "onClick" | "icon"> & import('react').RefAttributes<HTMLButtonElement>>;
392
+ RowSelectionControl: import('react').ForwardRefExoticComponent<{
393
+ /** Row ID - required for toggle selection to work */
394
+ rowId: string;
395
+ /** Override selection state. If not provided, reads from TreeList selection context. */
396
+ selected?: boolean;
397
+ selectable?: boolean;
398
+ /** Override indicator style. Default: checkbox for multiple, none for single */
399
+ variant?: "checkbox" | "radio";
400
+ className?: string;
401
+ } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClick"> & import('react').RefAttributes<HTMLDivElement>>;
402
+ RowLoading: import('react').ForwardRefExoticComponent<{
403
+ level?: number;
404
+ /** Indent per level in pixels. Default: 20 */
405
+ levelIndent?: number;
406
+ className?: string;
407
+ children?: ReactNode;
408
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
409
+ RowPlaceholder: import('react').ForwardRefExoticComponent<{
410
+ level?: number;
411
+ /** Indent per level in pixels. Default: 20 */
412
+ levelIndent?: number;
413
+ className?: string;
414
+ children?: ReactNode;
415
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
223
416
  Action: {
224
417
  ({ children }: TreeListActionProps): ReactElement;
225
418
  displayName: string;
@@ -34,12 +34,6 @@ export type VirtualizedTreeListItemProps = {
34
34
  'aria-expanded': boolean | undefined;
35
35
  'aria-level': number;
36
36
  onClick: (e: React.MouseEvent<HTMLElement>) => void;
37
- /**
38
- * Double-click handler (Preact). Preact uses `onDblClick`, React uses `onDoubleClick`.
39
- * Both are provided for cross-framework compatibility. See architecture.md.
40
- */
41
- onDblClick: () => void;
42
- /** Double-click handler (React). See `onDblClick` comment above. */
43
37
  onDoubleClick: () => void;
44
38
  active: boolean;
45
39
  selected: boolean;
@@ -65,8 +59,8 @@ export type VirtualizedTreeListRenderProps<TData> = {
65
59
  tabIndex: 0;
66
60
  className: string;
67
61
  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
68
- onFocus: () => void;
69
- onBlur: () => void;
62
+ onFocus: (e?: React.FocusEvent<HTMLElement>) => void;
63
+ onBlur: (e?: React.FocusEvent<HTMLElement>) => void;
70
64
  };
71
65
  };
72
66
  /**
@@ -237,9 +231,17 @@ export type VirtualizedTreeListRowExpandControlProps = {
237
231
  'aria-label'?: string;
238
232
  className?: string;
239
233
  } & Omit<IconButtonProps, 'icon' | 'onClick' | 'aria-label'>;
240
- export declare const VirtualizedTreeListRowExpandControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowExpandControlProps> & {
241
- ref?: import('preact').Ref<HTMLButtonElement> | undefined;
242
- }>;
234
+ export declare const VirtualizedTreeListRowExpandControl: import('react').ForwardRefExoticComponent<{
235
+ /** Row ID - if provided, clicking will also set this row as active */
236
+ rowId?: string;
237
+ expanded?: boolean;
238
+ hasChildren?: boolean;
239
+ onToggle?: () => void;
240
+ icon?: LucideIcon;
241
+ selected?: boolean;
242
+ 'aria-label'?: string;
243
+ className?: string;
244
+ } & Omit<IconButtonProps, "aria-label" | "onClick" | "icon"> & import('react').RefAttributes<HTMLButtonElement>>;
243
245
  export type VirtualizedTreeListRowSelectionControlProps = {
244
246
  /** Row ID - required for toggle selection to work */
245
247
  rowId: string;
@@ -250,39 +252,83 @@ export type VirtualizedTreeListRowSelectionControlProps = {
250
252
  variant?: 'checkbox' | 'radio';
251
253
  className?: string;
252
254
  } & Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>;
253
- export declare const VirtualizedTreeListRowSelectionControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowSelectionControlProps> & {
254
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
255
- }>;
255
+ export declare const VirtualizedTreeListRowSelectionControl: import('react').ForwardRefExoticComponent<{
256
+ /** Row ID - required for toggle selection to work */
257
+ rowId: string;
258
+ /** Override selection state. If not provided, reads from VirtualizedTreeList selection context. */
259
+ selected?: boolean;
260
+ selectable?: boolean;
261
+ /** Override indicator style. Default: checkbox for multiple, none for single */
262
+ variant?: "checkbox" | "radio";
263
+ className?: string;
264
+ } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClick"> & import('react').RefAttributes<HTMLDivElement>>;
256
265
  export declare const VirtualizedTreeList: (<TData = unknown>(props: VirtualizedTreeListRootProps<TData> & {
257
266
  ref?: React.ForwardedRef<HTMLDivElement>;
258
267
  }) => ReactElement) & {
259
- Row: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowProps> & {
260
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
261
- }>;
262
- RowLeft: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLeftProps> & {
263
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
264
- }>;
265
- RowRight: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowRightProps> & {
266
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
267
- }>;
268
- RowContent: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowContentProps> & {
269
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
270
- }>;
271
- RowLevelSpacer: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLevelSpacerProps> & {
272
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
273
- }>;
274
- RowExpandControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowExpandControlProps> & {
275
- ref?: import('preact').Ref<HTMLButtonElement> | undefined;
276
- }>;
277
- RowSelectionControl: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<VirtualizedTreeListRowSelectionControlProps> & {
278
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
279
- }>;
280
- RowLoading: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowLoadingProps> & {
281
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
282
- }>;
283
- RowPlaceholder: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TreeListRowPlaceholderProps> & {
284
- ref?: import('preact').Ref<HTMLDivElement> | undefined;
285
- }>;
268
+ Row: import('react').ForwardRefExoticComponent<{
269
+ /** Whether this row is the active (focused) row */
270
+ active?: boolean;
271
+ /** Whether this row is selected */
272
+ selected?: boolean;
273
+ /** Whether this row is disabled */
274
+ disabled?: boolean;
275
+ /** @deprecated Has no effect. Selection is governed by `getItemInteraction` and `RowSelectionControl`'s `selectable`. */
276
+ selectable?: boolean;
277
+ /** Additional class names */
278
+ className?: string;
279
+ /** Row content */
280
+ children?: ReactNode;
281
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
282
+ RowLeft: import('react').ForwardRefExoticComponent<{
283
+ children?: ReactNode;
284
+ className?: string;
285
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
286
+ RowRight: import('react').ForwardRefExoticComponent<{
287
+ children?: ReactNode;
288
+ className?: string;
289
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
290
+ RowContent: import('react').ForwardRefExoticComponent<{
291
+ children?: ReactNode;
292
+ className?: string;
293
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
294
+ RowLevelSpacer: import('react').ForwardRefExoticComponent<{
295
+ level?: number;
296
+ levelIndent?: number;
297
+ className?: string;
298
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
299
+ RowExpandControl: import('react').ForwardRefExoticComponent<{
300
+ /** Row ID - if provided, clicking will also set this row as active */
301
+ rowId?: string;
302
+ expanded?: boolean;
303
+ hasChildren?: boolean;
304
+ onToggle?: () => void;
305
+ icon?: LucideIcon;
306
+ selected?: boolean;
307
+ 'aria-label'?: string;
308
+ className?: string;
309
+ } & Omit<IconButtonProps, "aria-label" | "onClick" | "icon"> & import('react').RefAttributes<HTMLButtonElement>>;
310
+ RowSelectionControl: import('react').ForwardRefExoticComponent<{
311
+ /** Row ID - required for toggle selection to work */
312
+ rowId: string;
313
+ /** Override selection state. If not provided, reads from VirtualizedTreeList selection context. */
314
+ selected?: boolean;
315
+ selectable?: boolean;
316
+ /** Override indicator style. Default: checkbox for multiple, none for single */
317
+ variant?: "checkbox" | "radio";
318
+ className?: string;
319
+ } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClick"> & import('react').RefAttributes<HTMLDivElement>>;
320
+ RowLoading: import('react').ForwardRefExoticComponent<{
321
+ level?: number;
322
+ levelIndent?: number;
323
+ className?: string;
324
+ children?: ReactNode;
325
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
326
+ RowPlaceholder: import('react').ForwardRefExoticComponent<{
327
+ level?: number;
328
+ levelIndent?: number;
329
+ className?: string;
330
+ children?: ReactNode;
331
+ } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
286
332
  Action: {
287
333
  ({ children }: VirtualizedTreeListActionProps): ReactElement;
288
334
  displayName: string;
@@ -1,7 +1,7 @@
1
1
  import { RefObject } from 'react';
2
2
  export type UseActiveItemFocusConfig = {
3
3
  /** Reference to the item element to focus */
4
- ref: RefObject<HTMLElement> | null;
4
+ ref: RefObject<HTMLElement | null> | null;
5
5
  /** Whether this item is currently active */
6
6
  isActive: boolean;
7
7
  /** Whether this item is disabled */
@@ -23,7 +23,7 @@ export type UseActiveOnOpenConfig = {
23
23
  * updated (useful for tests or virtualized consumers handling scroll
24
24
  * through their own adapter).
25
25
  */
26
- containerRef?: RefObject<HTMLElement> | null;
26
+ containerRef?: RefObject<HTMLElement | null> | null;
27
27
  /**
28
28
  * Build the option element's DOM id from a registry id. Defaults to
29
29
  * identity. Match the consumer's `buildElementId` used elsewhere.
@@ -3,12 +3,12 @@ export type UseClickOutsideConfig = {
3
3
  /** Whether the click outside listener is active */
4
4
  enabled: boolean;
5
5
  /** Reference to the content element (clicks inside are ignored) */
6
- contentRef: RefObject<HTMLElement>;
6
+ contentRef: RefObject<HTMLElement | null>;
7
7
  /**
8
8
  * Optional references to elements that should be excluded from "outside" detection.
9
9
  * Typically used for trigger buttons that toggle the content visibility.
10
10
  */
11
- excludeRefs?: (RefObject<HTMLElement> | undefined)[];
11
+ excludeRefs?: (RefObject<HTMLElement | null> | undefined)[];
12
12
  /** Callback when pointer down occurs outside */
13
13
  onPointerDownOutside?: (event: PointerEvent) => void;
14
14
  /** Callback when any interaction occurs outside */
@@ -30,9 +30,9 @@ export type UseFloatingPositionConfig = {
30
30
  /** Whether the floating element is open/visible */
31
31
  enabled: boolean;
32
32
  /** Reference to the anchor element to position relative to */
33
- anchorRef: RefObject<HTMLElement> | null;
33
+ anchorRef: RefObject<HTMLElement | null> | null;
34
34
  /** Reference to the floating content element */
35
- contentRef: RefObject<HTMLElement> | null;
35
+ contentRef: RefObject<HTMLElement | null> | null;
36
36
  /**
37
37
  * Preferred side relative to the anchor.
38
38
  * @default 'bottom'
@@ -12,7 +12,7 @@ export type UsePointerPositionConfig = {
12
12
  y: number;
13
13
  } | null;
14
14
  /** Reference to the floating content element */
15
- contentRef: RefObject<HTMLElement> | null;
15
+ contentRef: RefObject<HTMLElement | null> | null;
16
16
  };
17
17
  /**
18
18
  * Calculates optimal position for floating content relative to pointer coordinates,
@@ -3,7 +3,7 @@ export type RadioNavigationConfig = {
3
3
  baseId: string;
4
4
  getItems: () => string[];
5
5
  getItemId?: (baseId: string, itemId: string) => string;
6
- rootRef?: RefObject<HTMLElement>;
6
+ rootRef?: RefObject<HTMLElement | null>;
7
7
  value: string | undefined;
8
8
  onValueChange: (value: string) => void;
9
9
  isItemDisabled: (id: string) => boolean;
@@ -1,7 +1,7 @@
1
1
  import { RefObject } from 'react';
2
2
  export type UseScrollActiveIntoViewConfig = {
3
3
  /** Reference to the container element */
4
- containerRef: RefObject<HTMLElement> | null;
4
+ containerRef: RefObject<HTMLElement | null> | null;
5
5
  /** ID of the currently active item (undefined if no active item) */
6
6
  activeId: string | undefined;
7
7
  /**
@@ -3,7 +3,7 @@ export type StepNavigationConfig = {
3
3
  baseId: string;
4
4
  getItems: () => string[];
5
5
  getNextFocusable?: (baseId: string, itemId: string) => string;
6
- rootRef?: RefObject<HTMLElement>;
6
+ rootRef?: RefObject<HTMLElement | null>;
7
7
  value: string | undefined;
8
8
  onValueChange: (value: string) => void;
9
9
  isItemDisabled: (id: string) => boolean;
@@ -4,7 +4,7 @@ export type UseSubmenuSafeAreaConfig = {
4
4
  /** Whether the submenu is open (tracking is active) */
5
5
  enabled: boolean;
6
6
  /** Reference to the submenu content element — used to compute its near edge */
7
- submenuRef: RefObject<HTMLElement>;
7
+ submenuRef: RefObject<HTMLElement | null>;
8
8
  /**
9
9
  * Which side the submenu sits on relative to its trigger.
10
10
  * - 'right': near edge is the submenu's LEFT edge; pointer travels right toward it
@@ -1,4 +1,4 @@
1
- import { Signalish } from 'preact';
1
+ import { Signalish } from '../utils';
2
2
  /**
3
3
  * Syncs a value related to a setter function with a value from arguments
4
4
  * @param value - The value to sync with