@bazza-ui/react 0.0.0 → 0.1.0-canary.10
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.
- package/dist/ListboxStore-BYBpGrOz.d.ts +453 -0
- package/dist/ListboxStore-nmorsoqX.d.cts +453 -0
- package/dist/chunk-4C666HHU.js +2 -0
- package/dist/chunk-4C666HHU.js.map +1 -0
- package/dist/chunk-5T5B5SPR.cjs +2 -0
- package/dist/chunk-5T5B5SPR.cjs.map +1 -0
- package/dist/chunk-A4Z5BY7H.js +2 -0
- package/dist/chunk-A4Z5BY7H.js.map +1 -0
- package/dist/chunk-BFOY762U.js +2 -0
- package/dist/chunk-BFOY762U.js.map +1 -0
- package/dist/chunk-IT372NHF.js +2 -0
- package/dist/chunk-IT372NHF.js.map +1 -0
- package/dist/chunk-JFEVUUPC.cjs +2 -0
- package/dist/chunk-JFEVUUPC.cjs.map +1 -0
- package/dist/chunk-KO3DXT3Y.js +2 -0
- package/dist/chunk-KO3DXT3Y.js.map +1 -0
- package/dist/chunk-LXXK4S4Q.js +2 -0
- package/dist/chunk-LXXK4S4Q.js.map +1 -0
- package/dist/chunk-M4G6J7DP.cjs +2 -0
- package/dist/chunk-M4G6J7DP.cjs.map +1 -0
- package/dist/chunk-SCDHQZFI.cjs +2 -0
- package/dist/chunk-SCDHQZFI.cjs.map +1 -0
- package/dist/chunk-W4ACKMIZ.cjs +2 -0
- package/dist/chunk-W4ACKMIZ.cjs.map +1 -0
- package/dist/chunk-XMZZ62VJ.cjs +2 -0
- package/dist/chunk-XMZZ62VJ.cjs.map +1 -0
- package/dist/combobox/index.cjs +2 -0
- package/dist/combobox/index.cjs.map +1 -0
- package/dist/combobox/index.d.cts +1066 -0
- package/dist/combobox/index.d.ts +1066 -0
- package/dist/combobox/index.js +2 -0
- package/dist/combobox/index.js.map +1 -0
- package/dist/command-menu/index.cjs +2 -0
- package/dist/command-menu/index.cjs.map +1 -0
- package/dist/command-menu/index.d.cts +154 -0
- package/dist/command-menu/index.d.ts +154 -0
- package/dist/command-menu/index.js +2 -0
- package/dist/command-menu/index.js.map +1 -0
- package/dist/command-score-CTJ9NV6n.d.cts +23 -0
- package/dist/command-score-CTJ9NV6n.d.ts +23 -0
- package/dist/context-menu/index.cjs +2 -0
- package/dist/context-menu/index.cjs.map +1 -0
- package/dist/context-menu/index.d.cts +672 -0
- package/dist/context-menu/index.d.ts +672 -0
- package/dist/context-menu/index.js +2 -0
- package/dist/context-menu/index.js.map +1 -0
- package/dist/dropdown-menu/index.cjs +2 -0
- package/dist/dropdown-menu/index.cjs.map +1 -0
- package/dist/dropdown-menu/index.d.cts +699 -0
- package/dist/dropdown-menu/index.d.ts +699 -0
- package/dist/dropdown-menu/index.js +2 -0
- package/dist/dropdown-menu/index.js.map +1 -0
- package/dist/events-DOGItflK.d.ts +1776 -0
- package/dist/events-DPsuhBln.d.cts +1776 -0
- package/dist/input-C95v6jB0.d.cts +46 -0
- package/dist/input-CYweYB_i.d.ts +46 -0
- package/dist/internal/listbox/index.cjs +2 -0
- package/dist/internal/listbox/index.cjs.map +1 -0
- package/dist/internal/listbox/index.d.cts +272 -0
- package/dist/internal/listbox/index.d.ts +272 -0
- package/dist/internal/listbox/index.js +2 -0
- package/dist/internal/listbox/index.js.map +1 -0
- package/dist/internal/popup-menu/index.cjs +2 -0
- package/dist/internal/popup-menu/index.cjs.map +1 -0
- package/dist/internal/popup-menu/index.d.cts +238 -0
- package/dist/internal/popup-menu/index.d.ts +238 -0
- package/dist/internal/popup-menu/index.js +2 -0
- package/dist/internal/popup-menu/index.js.map +1 -0
- package/dist/items-B6HeFO_8.d.cts +37 -0
- package/dist/items-B6HeFO_8.d.ts +37 -0
- package/dist/kbd/index.cjs +2 -0
- package/dist/kbd/index.cjs.map +1 -0
- package/dist/kbd/index.d.cts +61 -0
- package/dist/kbd/index.d.ts +61 -0
- package/dist/kbd/index.js +2 -0
- package/dist/kbd/index.js.map +1 -0
- package/dist/loaders/index.cjs +2 -0
- package/dist/loaders/index.cjs.map +1 -0
- package/dist/loaders/index.d.cts +363 -0
- package/dist/loaders/index.d.ts +363 -0
- package/dist/loaders/index.js +2 -0
- package/dist/loaders/index.js.map +1 -0
- package/dist/loading-C6WZGUc3.d.cts +29 -0
- package/dist/loading-CC4n55sR.d.ts +29 -0
- package/dist/resolve-BYm41YfG.d.ts +406 -0
- package/dist/resolve-Dk_fAKb2.d.cts +406 -0
- package/dist/scroll-arrow-B81wZTZ2.d.cts +544 -0
- package/dist/scroll-arrow-CNd0tgME.d.ts +544 -0
- package/dist/select/index.cjs +2 -0
- package/dist/select/index.cjs.map +1 -0
- package/dist/select/index.d.cts +985 -0
- package/dist/select/index.d.ts +985 -0
- package/dist/select/index.js +2 -0
- package/dist/select/index.js.map +1 -0
- package/dist/separator-BiySI623.d.cts +275 -0
- package/dist/separator-De8l8DKO.d.ts +275 -0
- package/dist/surface-context-ClmxshBW.d.ts +14 -0
- package/dist/surface-context-DF-L-30G.d.cts +14 -0
- package/dist/type-guards-BC2B6bVi.d.cts +350 -0
- package/dist/type-guards-ybcHBB3C.d.ts +350 -0
- package/dist/types-DT4FOOa2.d.cts +51 -0
- package/dist/types-DT4FOOa2.d.ts +51 -0
- package/dist/use-listbox-item-NzZuY34-.d.cts +212 -0
- package/dist/use-listbox-item-NzZuY34-.d.ts +212 -0
- package/dist/video-player/index.cjs +3 -0
- package/dist/video-player/index.cjs.map +1 -0
- package/dist/video-player/index.d.cts +1391 -0
- package/dist/video-player/index.d.ts +1391 -0
- package/dist/video-player/index.js +3 -0
- package/dist/video-player/index.js.map +1 -0
- package/package.json +66 -12
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -2
|
@@ -0,0 +1,350 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { PopoverPositionerProps, Popover, PopoverRootProps } from '@base-ui/react/popover';
|
|
3
|
+
import { U as UseListboxItemParams, f as UseListboxItemReturn, b as GroupPositional } from './use-listbox-item-NzZuY34-.js';
|
|
4
|
+
import { C as ComponentProps } from './types-DT4FOOa2.js';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { B as PopupMenuItemState, A as PopupMenuItemProps, P as PopupMenuHighlightChangeHandler, aS as HighlightChangeEventDetails, N as NodeDef, aG as TreeItemDef } from './events-DOGItflK.js';
|
|
7
|
+
import { V as VirtualItem } from './ListboxStore-BYBpGrOz.js';
|
|
8
|
+
import { a as PopupMenuRootActions } from './scroll-arrow-CNd0tgME.js';
|
|
9
|
+
|
|
10
|
+
interface SubmenuContextValue {
|
|
11
|
+
/** Whether the submenu is open */
|
|
12
|
+
open: boolean;
|
|
13
|
+
/** Set the submenu open state */
|
|
14
|
+
setOpen: (open: boolean) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Latch set by explicit close actions (keyboard ArrowLeft/Ctrl+H/Escape-in-submenu,
|
|
17
|
+
* or clicking the open trigger). While set and the trigger remains highlighted,
|
|
18
|
+
* pointer/keyboard auto-open is suppressed. Reset when highlight leaves the trigger.
|
|
19
|
+
*/
|
|
20
|
+
suppressAutoOpenRef: React.MutableRefObject<boolean>;
|
|
21
|
+
/** Reference to the trigger element */
|
|
22
|
+
triggerRef: React.RefObject<HTMLElement | null>;
|
|
23
|
+
/** Reference to the submenu content element (for aim guard rect calculations) */
|
|
24
|
+
contentRef: React.RefObject<HTMLElement | null>;
|
|
25
|
+
/** Surface ID of the parent menu (for keyboard navigation back) */
|
|
26
|
+
parentSurfaceId: string;
|
|
27
|
+
/** Surface ID of this submenu (for keyboard navigation into) */
|
|
28
|
+
childSurfaceId: string;
|
|
29
|
+
/**
|
|
30
|
+
* Whether pressing Escape in this submenu closes the entire menu from the root.
|
|
31
|
+
* When true, Escape closes the entire menu tree.
|
|
32
|
+
* When false, Escape only closes this submenu and moves focus to the parent.
|
|
33
|
+
* @default true
|
|
34
|
+
*/
|
|
35
|
+
closeRootOnEsc: boolean;
|
|
36
|
+
}
|
|
37
|
+
declare function useSubmenuContext(): SubmenuContextValue;
|
|
38
|
+
declare function useMaybeSubmenuContext(): SubmenuContextValue | null;
|
|
39
|
+
|
|
40
|
+
interface SubpageContextValue {
|
|
41
|
+
/** Current page ID. */
|
|
42
|
+
pageId: string;
|
|
43
|
+
/** Surface ID for this page. */
|
|
44
|
+
surfaceId: string;
|
|
45
|
+
/** Surface ID for the previous page, if available. */
|
|
46
|
+
parentSurfaceId: string | null;
|
|
47
|
+
/** Whether this page is currently active. */
|
|
48
|
+
isActive: boolean;
|
|
49
|
+
/** Whether Escape should close the entire menu tree from this page. */
|
|
50
|
+
closeRootOnEsc: boolean;
|
|
51
|
+
/** Navigate back one page. Returns true when navigation happened. */
|
|
52
|
+
goBack: () => boolean;
|
|
53
|
+
}
|
|
54
|
+
declare function useSubpageContext(): SubpageContextValue;
|
|
55
|
+
declare function useMaybeSubpageContext(): SubpageContextValue | null;
|
|
56
|
+
|
|
57
|
+
interface SubpageRegistration {
|
|
58
|
+
pageId: string;
|
|
59
|
+
surfaceId: string;
|
|
60
|
+
closeRootOnEsc: boolean;
|
|
61
|
+
}
|
|
62
|
+
interface SubpageStackContextValue {
|
|
63
|
+
/** Active page ID; `null` when the root surface is active. */
|
|
64
|
+
activePageId: string | null;
|
|
65
|
+
/** Surface ID of the root surface. */
|
|
66
|
+
rootSurfaceId: string;
|
|
67
|
+
/** Surface ID for the currently active page. */
|
|
68
|
+
activeSurfaceId: string;
|
|
69
|
+
/** Whether there is a previous page to navigate back to. */
|
|
70
|
+
canGoBack: boolean;
|
|
71
|
+
/** Whether Escape in the active page should close the entire menu tree. */
|
|
72
|
+
shouldCloseRootOnEsc: boolean;
|
|
73
|
+
/** Open page IDs, bottom to top; empty at root. */
|
|
74
|
+
stack: readonly string[];
|
|
75
|
+
/** Register a page and return an unregister cleanup. */
|
|
76
|
+
registerPage: (registration: SubpageRegistration) => () => void;
|
|
77
|
+
/** Push a page onto the stack. Returns true when navigation happened. */
|
|
78
|
+
openPage: (pageId: string) => boolean;
|
|
79
|
+
/** Pop one page from the stack. Returns true when navigation happened. */
|
|
80
|
+
goBack: () => boolean;
|
|
81
|
+
/** Resolve a surface ID for a page ID. */
|
|
82
|
+
getSurfaceId: (pageId: string) => string | null;
|
|
83
|
+
}
|
|
84
|
+
declare const SubpageStackContext: React.Context<SubpageStackContextValue | null>;
|
|
85
|
+
declare function useSubpageStack(): SubpageStackContextValue;
|
|
86
|
+
declare function useMaybeSubpageStack(): SubpageStackContextValue | null;
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Extended align options for popup menus.
|
|
90
|
+
* - 'start' | 'center' | 'end': Standard Base UI alignment
|
|
91
|
+
* - 'list-start': Align trigger top with the top of the List component (horizontal sides only)
|
|
92
|
+
*/
|
|
93
|
+
type PopupMenuPositionerAlign = PopoverPositionerProps['align'] | 'list-start';
|
|
94
|
+
interface PopupMenuPositionerProps extends Omit<PopoverPositionerProps, 'align' | 'style'> {
|
|
95
|
+
/**
|
|
96
|
+
* Override the virtual anchor from context.
|
|
97
|
+
* Useful for nested menus that need different positioning.
|
|
98
|
+
*/
|
|
99
|
+
virtualAnchor?: {
|
|
100
|
+
getBoundingClientRect(): DOMRect;
|
|
101
|
+
};
|
|
102
|
+
/**
|
|
103
|
+
* How to align the popup relative to the specified side.
|
|
104
|
+
* - 'start': align to start of anchor
|
|
105
|
+
* - 'center': align to center of anchor
|
|
106
|
+
* - 'end': align to end of anchor
|
|
107
|
+
* - 'list-start': align the List component's top with the anchor top (horizontal sides only)
|
|
108
|
+
* @default 'start' for submenus, 'center' for root dropdowns
|
|
109
|
+
*/
|
|
110
|
+
align?: PopupMenuPositionerAlign;
|
|
111
|
+
/**
|
|
112
|
+
* Custom styles for the positioner.
|
|
113
|
+
* Note: During list-start alignment measurement, `transition: 'none'` is
|
|
114
|
+
* temporarily applied to prevent visual flash.
|
|
115
|
+
*/
|
|
116
|
+
style?: React.CSSProperties;
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Positions the popup menu against its anchor.
|
|
120
|
+
* Wraps Popover.Positioner with:
|
|
121
|
+
* - Automatic virtualAnchor from PopupMenuContext (for context menus)
|
|
122
|
+
* - Smart default positioning based on depth and menu type
|
|
123
|
+
* - Smart collision avoidance: shift for horizontal menus, flip for vertical
|
|
124
|
+
* - 'list-start' alignment for horizontal submenus
|
|
125
|
+
*
|
|
126
|
+
* Renders a `<div>` element.
|
|
127
|
+
*/
|
|
128
|
+
declare const PopupMenuPositioner: React.ForwardRefExoticComponent<Omit<PopupMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
129
|
+
declare namespace PopupMenuPositioner {
|
|
130
|
+
type Props = PopupMenuPositionerProps;
|
|
131
|
+
type State = Popover.Positioner.State;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
interface UsePopupMenuItemParams extends Omit<UseListboxItemParams, 'aimGuard' | 'onAfterSelect'> {
|
|
135
|
+
/**
|
|
136
|
+
* Whether clicking this item should close the menu.
|
|
137
|
+
* @default true
|
|
138
|
+
*/
|
|
139
|
+
closeOnClick?: boolean;
|
|
140
|
+
}
|
|
141
|
+
interface UsePopupMenuItemReturn extends UseListboxItemReturn {
|
|
142
|
+
/** Whether this item is effectively disabled (item disabled OR menu disabled). */
|
|
143
|
+
disabled: boolean;
|
|
144
|
+
}
|
|
145
|
+
/**
|
|
146
|
+
* Hook that provides all shared logic for navigatable/highlightable popup menu items.
|
|
147
|
+
* This is a thin wrapper around useListboxItem that automatically adds aim-guard
|
|
148
|
+
* support and handles close-on-click behavior.
|
|
149
|
+
*
|
|
150
|
+
* @see useListboxItem for full documentation
|
|
151
|
+
*/
|
|
152
|
+
declare function usePopupMenuItem(params: UsePopupMenuItemParams): UsePopupMenuItemReturn;
|
|
153
|
+
|
|
154
|
+
interface PopupMenuRadioItemIndicatorState extends Record<string, unknown> {
|
|
155
|
+
/**
|
|
156
|
+
* Whether the parent radio item is currently selected/checked.
|
|
157
|
+
*/
|
|
158
|
+
checked: boolean;
|
|
159
|
+
/**
|
|
160
|
+
* Whether the parent radio item is currently highlighted.
|
|
161
|
+
*/
|
|
162
|
+
highlighted: boolean;
|
|
163
|
+
/**
|
|
164
|
+
* Whether the parent radio item is disabled.
|
|
165
|
+
*/
|
|
166
|
+
disabled: boolean;
|
|
167
|
+
}
|
|
168
|
+
interface PopupMenuRadioItemIndicatorProps extends ComponentProps<'span', PopupMenuRadioItemIndicator.State> {
|
|
169
|
+
/**
|
|
170
|
+
* Whether to keep the indicator mounted in the DOM when unchecked.
|
|
171
|
+
* Useful for animations.
|
|
172
|
+
* @default false
|
|
173
|
+
*/
|
|
174
|
+
keepMounted?: boolean;
|
|
175
|
+
}
|
|
176
|
+
/**
|
|
177
|
+
* A visual indicator that shows when a RadioItem is selected.
|
|
178
|
+
* Must be used within a RadioItem component.
|
|
179
|
+
* Renders a `<span>` element with aria-hidden="true".
|
|
180
|
+
*/
|
|
181
|
+
declare const PopupMenuRadioItemIndicator: React.ForwardRefExoticComponent<Omit<PopupMenuRadioItemIndicator.Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
182
|
+
declare namespace PopupMenuRadioItemIndicator {
|
|
183
|
+
type State = PopupMenuRadioItemIndicatorState;
|
|
184
|
+
interface Props extends PopupMenuRadioItemIndicatorProps {
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
interface PopupMenuGroupValueProps {
|
|
189
|
+
/** Group id items register under. Omit for ungrouped rows that only need positional flags. */
|
|
190
|
+
groupId?: string;
|
|
191
|
+
/** Positional flags for this row; each defined flag overrides the store-derived value. */
|
|
192
|
+
positional?: GroupPositional;
|
|
193
|
+
children: React.ReactNode;
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* Headless provider for group membership and positional state.
|
|
197
|
+
* Renders no DOM. Use to wrap individual rows in virtualized lists where
|
|
198
|
+
* the store cannot derive position from mounted order.
|
|
199
|
+
*/
|
|
200
|
+
declare function PopupMenuGroupValue(props: PopupMenuGroupValueProps): react_jsx_runtime.JSX.Element;
|
|
201
|
+
declare namespace PopupMenuGroupValue {
|
|
202
|
+
interface Props extends PopupMenuGroupValueProps {
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
interface PopupMenuTreeState extends Record<string, unknown> {
|
|
207
|
+
depth: number;
|
|
208
|
+
}
|
|
209
|
+
interface PopupMenuTreeProps extends ComponentProps<'div', PopupMenuTree.State> {
|
|
210
|
+
children: React.ReactNode;
|
|
211
|
+
}
|
|
212
|
+
declare const PopupMenuTree: React.ForwardRefExoticComponent<Omit<PopupMenuTree.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
213
|
+
declare namespace PopupMenuTree {
|
|
214
|
+
type State = PopupMenuTreeState;
|
|
215
|
+
interface Props extends PopupMenuTreeProps {
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
interface PopupMenuTreeConnectorState extends Record<string, unknown> {
|
|
220
|
+
depth: number;
|
|
221
|
+
}
|
|
222
|
+
interface PopupMenuTreeConnectorProps extends ComponentProps<'span', PopupMenuTreeConnector.State> {
|
|
223
|
+
depth?: number;
|
|
224
|
+
}
|
|
225
|
+
declare const PopupMenuTreeConnector: React.ForwardRefExoticComponent<Omit<PopupMenuTreeConnector.Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
226
|
+
declare namespace PopupMenuTreeConnector {
|
|
227
|
+
type State = PopupMenuTreeConnectorState;
|
|
228
|
+
interface Props extends PopupMenuTreeConnectorProps {
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
interface PopupMenuTreeItemProps extends Omit<PopupMenuItemProps, 'activatable'> {
|
|
233
|
+
/** Whether this tree item can be activated. @default true */
|
|
234
|
+
selectable?: boolean;
|
|
235
|
+
/** Explicit tree depth override. */
|
|
236
|
+
depth?: number;
|
|
237
|
+
}
|
|
238
|
+
declare const PopupMenuTreeItem: React.ForwardRefExoticComponent<Omit<PopupMenuTreeItem.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
239
|
+
declare namespace PopupMenuTreeItem {
|
|
240
|
+
type State = PopupMenuItemState;
|
|
241
|
+
interface Props extends PopupMenuTreeItemProps {
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
interface PopupMenuSubmenuRootProps extends Omit<PopoverRootProps, 'open' | 'onOpenChange' | 'defaultOpen' | 'actionsRef'> {
|
|
246
|
+
/**
|
|
247
|
+
* Whether the submenu is open.
|
|
248
|
+
* Use for controlled mode.
|
|
249
|
+
*/
|
|
250
|
+
open?: boolean;
|
|
251
|
+
/**
|
|
252
|
+
* Callback when the open state changes.
|
|
253
|
+
* The second parameter contains event details including the reason for the change.
|
|
254
|
+
*/
|
|
255
|
+
onOpenChange?: (open: boolean, eventDetails: Popover.Root.ChangeEventDetails) => void;
|
|
256
|
+
/**
|
|
257
|
+
* Whether the submenu is initially open.
|
|
258
|
+
* Use for uncontrolled mode.
|
|
259
|
+
* @default false
|
|
260
|
+
*/
|
|
261
|
+
defaultOpen?: boolean;
|
|
262
|
+
/**
|
|
263
|
+
* Whether pressing Escape in this submenu closes the entire menu from the root.
|
|
264
|
+
* When true (default), Escape closes the entire menu tree.
|
|
265
|
+
* When false, Escape only closes this submenu and moves focus to the parent.
|
|
266
|
+
* @default true
|
|
267
|
+
*/
|
|
268
|
+
closeRootOnEsc?: boolean;
|
|
269
|
+
/**
|
|
270
|
+
* Whether virtualization mode is enabled for this submenu.
|
|
271
|
+
* When true, items should provide an explicit `index` prop and
|
|
272
|
+
* the `items` prop should be provided for navigation to work correctly.
|
|
273
|
+
* @default false
|
|
274
|
+
*/
|
|
275
|
+
virtualized?: boolean;
|
|
276
|
+
/**
|
|
277
|
+
* Pre-registered items for virtualization.
|
|
278
|
+
* When provided with `virtualized={true}`, this allows navigation to work
|
|
279
|
+
* for items that aren't currently mounted in the DOM.
|
|
280
|
+
*/
|
|
281
|
+
items?: VirtualItem[];
|
|
282
|
+
/**
|
|
283
|
+
* Callback when the highlighted item changes. `id` is first; `node` is the
|
|
284
|
+
* resolved menu node enrichment and may be null.
|
|
285
|
+
* Useful for synchronizing with a virtualizer (e.g., scrollToIndex).
|
|
286
|
+
*/
|
|
287
|
+
onHighlightChange?: PopupMenuHighlightChangeHandler<HighlightChangeEventDetails>;
|
|
288
|
+
/**
|
|
289
|
+
* Event handler called after any open/close animations have completed.
|
|
290
|
+
* When `clearSearchOnClose="after-exit"` is set on Surface, the search
|
|
291
|
+
* will be cleared before this callback is invoked.
|
|
292
|
+
*/
|
|
293
|
+
onOpenChangeComplete?: (open: boolean) => void;
|
|
294
|
+
/**
|
|
295
|
+
* Whether this submenu should ignore user interaction.
|
|
296
|
+
* Also inherits disabled state from its parent menu.
|
|
297
|
+
* @default false
|
|
298
|
+
*/
|
|
299
|
+
disabled?: boolean;
|
|
300
|
+
/**
|
|
301
|
+
* A ref to imperative actions.
|
|
302
|
+
* - `close`: closes the submenu imperatively.
|
|
303
|
+
* - `unmount`: unmounts the popup imperatively (when keep-mounted mode is enabled).
|
|
304
|
+
* - `setDisabled`: enables/disables the submenu imperatively.
|
|
305
|
+
*/
|
|
306
|
+
actionsRef?: React.RefObject<PopupMenuSubmenuRoot.Actions | null>;
|
|
307
|
+
children: React.ReactNode;
|
|
308
|
+
}
|
|
309
|
+
/**
|
|
310
|
+
* Groups all parts of a submenu.
|
|
311
|
+
* Manages open state and provides context to children.
|
|
312
|
+
* Creates its own ListboxStore independent from the parent menu.
|
|
313
|
+
* Doesn't render its own HTML element.
|
|
314
|
+
*/
|
|
315
|
+
declare function PopupMenuSubmenuRoot(props: PopupMenuSubmenuRootProps): react_jsx_runtime.JSX.Element;
|
|
316
|
+
declare namespace PopupMenuSubmenuRoot {
|
|
317
|
+
interface Props extends PopupMenuSubmenuRootProps {
|
|
318
|
+
}
|
|
319
|
+
type ChangeEventDetails = Popover.Root.ChangeEventDetails;
|
|
320
|
+
type Actions = PopupMenuRootActions;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
interface PopupMenuSubmenuTriggerIndicatorState extends Record<string, unknown> {
|
|
324
|
+
/**
|
|
325
|
+
* Whether the submenu popup is open.
|
|
326
|
+
*/
|
|
327
|
+
popupOpen: boolean;
|
|
328
|
+
/**
|
|
329
|
+
* Whether the submenu owns keyboard focus.
|
|
330
|
+
*/
|
|
331
|
+
popupFocused: boolean;
|
|
332
|
+
}
|
|
333
|
+
interface PopupMenuSubmenuTriggerIndicatorProps extends ComponentProps<'span', PopupMenuSubmenuTriggerIndicator.State> {
|
|
334
|
+
}
|
|
335
|
+
/**
|
|
336
|
+
* An indicator element for submenu triggers that reflects the submenu's open and focus state.
|
|
337
|
+
* Typically used to render a chevron or arrow icon.
|
|
338
|
+
* Must be used within PopupMenu.SubmenuTrigger.
|
|
339
|
+
* Renders a `<span>` element.
|
|
340
|
+
*/
|
|
341
|
+
declare const PopupMenuSubmenuTriggerIndicator: React.ForwardRefExoticComponent<Omit<PopupMenuSubmenuTriggerIndicator.Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
342
|
+
declare namespace PopupMenuSubmenuTriggerIndicator {
|
|
343
|
+
type State = PopupMenuSubmenuTriggerIndicatorState;
|
|
344
|
+
interface Props extends PopupMenuSubmenuTriggerIndicatorProps {
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
declare function isTreeItemDef(node: NodeDef): node is TreeItemDef;
|
|
349
|
+
|
|
350
|
+
export { PopupMenuGroupValue as P, type SubmenuContextValue as S, type UsePopupMenuItemParams as U, PopupMenuPositioner as a, PopupMenuRadioItemIndicator as b, PopupMenuSubmenuRoot as c, PopupMenuSubmenuTriggerIndicator as d, PopupMenuTree as e, PopupMenuTreeConnector as f, PopupMenuTreeItem as g, type PopupMenuPositionerAlign as h, type PopupMenuPositionerProps as i, type PopupMenuRadioItemIndicatorProps as j, type PopupMenuRadioItemIndicatorState as k, type PopupMenuSubmenuRootProps as l, type PopupMenuSubmenuTriggerIndicatorProps as m, type PopupMenuSubmenuTriggerIndicatorState as n, type SubpageContextValue as o, type SubpageStackContextValue as p, useMaybeSubpageContext as q, useMaybeSubpageStack as r, useSubmenuContext as s, useSubpageContext as t, useMaybeSubmenuContext as u, useSubpageStack as v, type UsePopupMenuItemReturn as w, usePopupMenuItem as x, isTreeItemDef as y, SubpageStackContext as z };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Render function that receives props and state, returns a React element.
|
|
5
|
+
*/
|
|
6
|
+
type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
|
|
7
|
+
/**
|
|
8
|
+
* HTML props with ref support.
|
|
9
|
+
*/
|
|
10
|
+
type HTMLProps<T = any> = React.HTMLAttributes<T> & {
|
|
11
|
+
ref?: React.Ref<T> | undefined;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* React synthetic event augmented by Base UI's mergeProps utility.
|
|
15
|
+
*/
|
|
16
|
+
type PreventableBaseHandlerEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
|
|
17
|
+
preventBaseUIHandler: () => void;
|
|
18
|
+
readonly baseUIHandlerPrevented?: boolean;
|
|
19
|
+
};
|
|
20
|
+
type WithPreventableBaseHandler<T> = T extends (event: infer E) => infer R ? E extends React.SyntheticEvent<Element, Event> ? (event: PreventableBaseHandlerEvent<E>) => R : T : T;
|
|
21
|
+
/**
|
|
22
|
+
* Adds Base UI's preventBaseUIHandler event typing to React event handlers.
|
|
23
|
+
*/
|
|
24
|
+
type WithPreventableBaseHandlers<T> = {
|
|
25
|
+
[K in keyof T]: WithPreventableBaseHandler<T[K]>;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Props shared by all Bazza UI components.
|
|
29
|
+
* Includes className (string or state-based function), render prop, and style (object or state-based function).
|
|
30
|
+
*/
|
|
31
|
+
type ComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<React.ComponentPropsWithRef<ElementType>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
|
|
32
|
+
/**
|
|
33
|
+
* CSS class applied to the element, or a function that
|
|
34
|
+
* returns a class based on the component's state.
|
|
35
|
+
*/
|
|
36
|
+
className?: string | ((state: State) => string | undefined);
|
|
37
|
+
/**
|
|
38
|
+
* Allows you to replace the component's HTML element
|
|
39
|
+
* with a different tag, or compose it with another component.
|
|
40
|
+
*
|
|
41
|
+
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
42
|
+
*/
|
|
43
|
+
render?: ComponentRenderFn<RenderFunctionProps, State> | React.ReactElement;
|
|
44
|
+
/**
|
|
45
|
+
* Style applied to the element, or a function that
|
|
46
|
+
* returns a style object based on the component's state.
|
|
47
|
+
*/
|
|
48
|
+
style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined);
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export type { ComponentProps as C, WithPreventableBaseHandlers as W, ComponentRenderFn as a };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Render function that receives props and state, returns a React element.
|
|
5
|
+
*/
|
|
6
|
+
type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
|
|
7
|
+
/**
|
|
8
|
+
* HTML props with ref support.
|
|
9
|
+
*/
|
|
10
|
+
type HTMLProps<T = any> = React.HTMLAttributes<T> & {
|
|
11
|
+
ref?: React.Ref<T> | undefined;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* React synthetic event augmented by Base UI's mergeProps utility.
|
|
15
|
+
*/
|
|
16
|
+
type PreventableBaseHandlerEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
|
|
17
|
+
preventBaseUIHandler: () => void;
|
|
18
|
+
readonly baseUIHandlerPrevented?: boolean;
|
|
19
|
+
};
|
|
20
|
+
type WithPreventableBaseHandler<T> = T extends (event: infer E) => infer R ? E extends React.SyntheticEvent<Element, Event> ? (event: PreventableBaseHandlerEvent<E>) => R : T : T;
|
|
21
|
+
/**
|
|
22
|
+
* Adds Base UI's preventBaseUIHandler event typing to React event handlers.
|
|
23
|
+
*/
|
|
24
|
+
type WithPreventableBaseHandlers<T> = {
|
|
25
|
+
[K in keyof T]: WithPreventableBaseHandler<T[K]>;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Props shared by all Bazza UI components.
|
|
29
|
+
* Includes className (string or state-based function), render prop, and style (object or state-based function).
|
|
30
|
+
*/
|
|
31
|
+
type ComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<React.ComponentPropsWithRef<ElementType>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
|
|
32
|
+
/**
|
|
33
|
+
* CSS class applied to the element, or a function that
|
|
34
|
+
* returns a class based on the component's state.
|
|
35
|
+
*/
|
|
36
|
+
className?: string | ((state: State) => string | undefined);
|
|
37
|
+
/**
|
|
38
|
+
* Allows you to replace the component's HTML element
|
|
39
|
+
* with a different tag, or compose it with another component.
|
|
40
|
+
*
|
|
41
|
+
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
42
|
+
*/
|
|
43
|
+
render?: ComponentRenderFn<RenderFunctionProps, State> | React.ReactElement;
|
|
44
|
+
/**
|
|
45
|
+
* Style applied to the element, or a function that
|
|
46
|
+
* returns a style object based on the component's state.
|
|
47
|
+
*/
|
|
48
|
+
style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined);
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export type { ComponentProps as C, WithPreventableBaseHandlers as W, ComponentRenderFn as a };
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface GroupPositional {
|
|
4
|
+
first?: boolean;
|
|
5
|
+
last?: boolean;
|
|
6
|
+
firstInGroup?: boolean;
|
|
7
|
+
lastInGroup?: boolean;
|
|
8
|
+
firstGroup?: boolean;
|
|
9
|
+
lastGroup?: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface GroupContextValue {
|
|
12
|
+
groupId?: string;
|
|
13
|
+
positional?: GroupPositional;
|
|
14
|
+
}
|
|
15
|
+
declare const GroupContext: React.Context<GroupContextValue | null>;
|
|
16
|
+
declare function useGroupContext(): GroupContextValue | null;
|
|
17
|
+
|
|
18
|
+
interface ItemContextValue {
|
|
19
|
+
/** Unique ID for this item (for DOM id attribute) */
|
|
20
|
+
id: string;
|
|
21
|
+
/** Whether the item is highlighted */
|
|
22
|
+
highlighted: boolean;
|
|
23
|
+
/** Whether the item is disabled */
|
|
24
|
+
disabled: boolean;
|
|
25
|
+
/** Keyboard shortcut for this item */
|
|
26
|
+
shortcut?: string;
|
|
27
|
+
}
|
|
28
|
+
declare const ItemContext: React.Context<ItemContextValue | null>;
|
|
29
|
+
declare function useItemContext(): ItemContextValue;
|
|
30
|
+
declare function useMaybeItemContext(): ItemContextValue | null;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Aim guard refs for submenu navigation.
|
|
34
|
+
* Optional - only needed for popup menus with submenus.
|
|
35
|
+
*/
|
|
36
|
+
interface AimGuardRefs {
|
|
37
|
+
/** Whether aim guard is currently active */
|
|
38
|
+
aimGuardActiveRef: React.RefObject<boolean>;
|
|
39
|
+
/** The depth at which aim guard is active (null when not guarding) */
|
|
40
|
+
guardedDepthRef: React.RefObject<number | null>;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Parameters for the useListboxItem hook.
|
|
44
|
+
*/
|
|
45
|
+
interface UseListboxItemParams {
|
|
46
|
+
/**
|
|
47
|
+
* Explicit unique identifier for this item in the store.
|
|
48
|
+
* Takes highest priority for item registration.
|
|
49
|
+
* Used by data-first APIs to ensure consistent IDs.
|
|
50
|
+
*/
|
|
51
|
+
id?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Unique value for this item used as identifier and for filtering.
|
|
54
|
+
* If not provided, will be inferred from textContent.
|
|
55
|
+
* Used for registration when `id` is not provided.
|
|
56
|
+
*/
|
|
57
|
+
value?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Additional keywords to match against when filtering.
|
|
60
|
+
* Useful for aliases or synonyms.
|
|
61
|
+
*/
|
|
62
|
+
keywords?: string[];
|
|
63
|
+
/**
|
|
64
|
+
* Whether this item is disabled.
|
|
65
|
+
* Disabled items are not selectable and are skipped during keyboard navigation.
|
|
66
|
+
*/
|
|
67
|
+
disabled?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Whether this item can be activated via Enter or click.
|
|
70
|
+
* Non-activatable items remain highlightable.
|
|
71
|
+
* @default true
|
|
72
|
+
*/
|
|
73
|
+
activatable?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Whether to force render this item regardless of filter results.
|
|
76
|
+
* @default false
|
|
77
|
+
*/
|
|
78
|
+
forceMount?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Keyboard shortcut to trigger this item.
|
|
81
|
+
* When the menu is focused and the user presses this key, the item will be selected.
|
|
82
|
+
* Should be a single character (e.g., "1", "a", etc.).
|
|
83
|
+
*/
|
|
84
|
+
shortcut?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Forces this row's relative order during score-based sorting.
|
|
87
|
+
* Lower values appear earlier.
|
|
88
|
+
* @default 0
|
|
89
|
+
*/
|
|
90
|
+
forceOrder?: number;
|
|
91
|
+
/**
|
|
92
|
+
* Overrides this row's computed fuzzy-match score.
|
|
93
|
+
* Useful for pinning or manually ranking rows in score-based views.
|
|
94
|
+
*/
|
|
95
|
+
forceScore?: number;
|
|
96
|
+
/**
|
|
97
|
+
* Whether this item is a submenu trigger (for store registration).
|
|
98
|
+
* @default false
|
|
99
|
+
*/
|
|
100
|
+
isSubmenuTrigger?: boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Callback when this item is selected (via click or Enter key).
|
|
103
|
+
* For simple items, pass this directly. For checkbox/radio items,
|
|
104
|
+
* use registerSelect() to register a dynamic handler.
|
|
105
|
+
*/
|
|
106
|
+
onSelect?: () => void;
|
|
107
|
+
/**
|
|
108
|
+
* Whether selecting this item should close the menu.
|
|
109
|
+
* @default true
|
|
110
|
+
*/
|
|
111
|
+
closeOnClick?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Callback invoked after selection occurs (via click).
|
|
114
|
+
* Called with the item's ID. The consumer handles any
|
|
115
|
+
* post-selection behavior like closing menus.
|
|
116
|
+
*/
|
|
117
|
+
onAfterSelect?: (itemId: string) => void;
|
|
118
|
+
/**
|
|
119
|
+
* Children (used for text content inference when value is not provided).
|
|
120
|
+
*/
|
|
121
|
+
children?: React.ReactNode;
|
|
122
|
+
/**
|
|
123
|
+
* Optional aim guard refs for popup menu navigation.
|
|
124
|
+
* When provided, pointer move events will respect the aim guard.
|
|
125
|
+
*/
|
|
126
|
+
aimGuard?: AimGuardRefs;
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Return value from the useListboxItem hook.
|
|
130
|
+
*/
|
|
131
|
+
interface UseListboxItemReturn {
|
|
132
|
+
/** Unique ID for this item (DOM ID for aria-activedescendant) */
|
|
133
|
+
id: string;
|
|
134
|
+
/**
|
|
135
|
+
* Store identifier for this item.
|
|
136
|
+
* Use this when calling store methods like setHighlightedId, registerSubmenuOpen, etc.
|
|
137
|
+
* This is the `value` prop (or inferred from textContent).
|
|
138
|
+
*/
|
|
139
|
+
storeId: string;
|
|
140
|
+
/** Ref to attach to the item element */
|
|
141
|
+
ref: React.RefObject<HTMLDivElement | null>;
|
|
142
|
+
/** Callback ref that tracks the mounted row element for positional attributes. Merge into the rendered element's ref. */
|
|
143
|
+
rowRef: (element: HTMLElement | null) => void;
|
|
144
|
+
/** Positional state among visible rows (all false in virtualized mode). */
|
|
145
|
+
positional: {
|
|
146
|
+
first: boolean;
|
|
147
|
+
last: boolean;
|
|
148
|
+
firstInGroup: boolean;
|
|
149
|
+
lastInGroup: boolean;
|
|
150
|
+
};
|
|
151
|
+
/** Whether item is currently highlighted */
|
|
152
|
+
isHighlighted: boolean;
|
|
153
|
+
/** Whether item should be rendered (passes filter) */
|
|
154
|
+
isVisible: boolean;
|
|
155
|
+
/** Context value to provide to children via ItemContext.Provider */
|
|
156
|
+
contextValue: ItemContextValue;
|
|
157
|
+
/**
|
|
158
|
+
* Event handlers to spread on the element.
|
|
159
|
+
* These handle click, pointer move, and pointer down events.
|
|
160
|
+
*/
|
|
161
|
+
handlers: {
|
|
162
|
+
onClick: React.MouseEventHandler<HTMLDivElement>;
|
|
163
|
+
onPointerMove: React.PointerEventHandler<HTMLDivElement>;
|
|
164
|
+
onPointerDown: React.PointerEventHandler<HTMLDivElement>;
|
|
165
|
+
};
|
|
166
|
+
/**
|
|
167
|
+
* Register a custom onSelect handler.
|
|
168
|
+
* This is useful for checkbox/radio items where the select behavior
|
|
169
|
+
* needs to be customized (e.g., toggle checked state).
|
|
170
|
+
* Returns an unregister function.
|
|
171
|
+
*/
|
|
172
|
+
registerSelect: (handler: (() => void) | undefined) => () => void;
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Hook that provides all shared logic for navigatable/highlightable listbox items.
|
|
176
|
+
*
|
|
177
|
+
* This hook handles:
|
|
178
|
+
* - Item registration with the listbox store
|
|
179
|
+
* - Highlight state management (keyboard and pointer)
|
|
180
|
+
* - Filter/search visibility
|
|
181
|
+
* - Scroll into view on keyboard navigation
|
|
182
|
+
* - Click, pointer move, and pointer down event handlers
|
|
183
|
+
* - Optional aim guard integration (for submenu navigation)
|
|
184
|
+
*
|
|
185
|
+
* @example
|
|
186
|
+
* ```tsx
|
|
187
|
+
* function CustomItem(props) {
|
|
188
|
+
* const item = useListboxItem({
|
|
189
|
+
* value: props.value,
|
|
190
|
+
* disabled: props.disabled,
|
|
191
|
+
* onSelect: props.onSelect,
|
|
192
|
+
* })
|
|
193
|
+
*
|
|
194
|
+
* if (!item.isVisible) return null
|
|
195
|
+
*
|
|
196
|
+
* return (
|
|
197
|
+
* <ItemContext.Provider value={item.contextValue}>
|
|
198
|
+
* <div
|
|
199
|
+
* ref={item.ref}
|
|
200
|
+
* {...item.handlers}
|
|
201
|
+
* data-highlighted={item.isHighlighted || undefined}
|
|
202
|
+
* >
|
|
203
|
+
* {props.children}
|
|
204
|
+
* </div>
|
|
205
|
+
* </ItemContext.Provider>
|
|
206
|
+
* )
|
|
207
|
+
* }
|
|
208
|
+
* ```
|
|
209
|
+
*/
|
|
210
|
+
declare function useListboxItem(params: UseListboxItemParams): UseListboxItemReturn;
|
|
211
|
+
|
|
212
|
+
export { type AimGuardRefs as A, type GroupContextValue as G, type ItemContextValue as I, type UseListboxItemParams as U, useMaybeItemContext as a, type GroupPositional as b, GroupContext as c, useGroupContext as d, ItemContext as e, type UseListboxItemReturn as f, useListboxItem as g, useItemContext as u };
|