@prosekit/preact 0.7.0-beta.0 → 0.7.0-beta.1
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/prosekit-preact-autocomplete.d.ts +226 -18
- package/dist/prosekit-preact-autocomplete.d.ts.map +1 -1
- package/dist/prosekit-preact-autocomplete.js +218 -9
- package/dist/prosekit-preact-autocomplete.js.map +1 -1
- package/dist/prosekit-preact-block-handle.d.ts +210 -14
- package/dist/prosekit-preact-block-handle.d.ts.map +1 -1
- package/dist/prosekit-preact-block-handle.js +184 -7
- package/dist/prosekit-preact-block-handle.js.map +1 -1
- package/dist/prosekit-preact-drop-indicator.d.ts +27 -6
- package/dist/prosekit-preact-drop-indicator.d.ts.map +1 -1
- package/dist/prosekit-preact-drop-indicator.js +38 -3
- package/dist/prosekit-preact-drop-indicator.js.map +1 -1
- package/dist/prosekit-preact-inline-popover.d.ts +204 -8
- package/dist/prosekit-preact-inline-popover.d.ts.map +1 -1
- package/dist/prosekit-preact-inline-popover.js +130 -5
- package/dist/prosekit-preact-inline-popover.js.map +1 -1
- package/dist/prosekit-preact-menu.d.ts +288 -0
- package/dist/prosekit-preact-menu.d.ts.map +1 -0
- package/dist/prosekit-preact-menu.js +274 -0
- package/dist/prosekit-preact-menu.js.map +1 -0
- package/dist/prosekit-preact-popover.d.ts +227 -14
- package/dist/prosekit-preact-popover.d.ts.map +1 -1
- package/dist/prosekit-preact-popover.js +170 -7
- package/dist/prosekit-preact-popover.js.map +1 -1
- package/dist/prosekit-preact-resizable.d.ts +56 -12
- package/dist/prosekit-preact-resizable.d.ts.map +1 -1
- package/dist/prosekit-preact-resizable.js +80 -7
- package/dist/prosekit-preact-resizable.js.map +1 -1
- package/dist/prosekit-preact-table-handle.d.ts +447 -38
- package/dist/prosekit-preact-table-handle.d.ts.map +1 -1
- package/dist/prosekit-preact-table-handle.js +381 -19
- package/dist/prosekit-preact-table-handle.js.map +1 -1
- package/dist/prosekit-preact-tooltip.d.ts +211 -14
- package/dist/prosekit-preact-tooltip.d.ts.map +1 -1
- package/dist/prosekit-preact-tooltip.js +157 -7
- package/dist/prosekit-preact-tooltip.js.map +1 -1
- package/package.json +27 -16
- package/src/components/autocomplete/autocomplete-empty.gen.ts +41 -31
- package/src/components/autocomplete/autocomplete-item.gen.ts +84 -31
- package/src/components/autocomplete/autocomplete-popup.gen.ts +80 -0
- package/src/components/autocomplete/autocomplete-positioner.gen.ts +153 -0
- package/src/components/autocomplete/autocomplete-root.gen.ts +109 -0
- package/src/components/autocomplete/index.gen.ts +12 -4
- package/src/components/autocomplete/index.ts +27 -0
- package/src/components/block-handle/block-handle-add.gen.ts +59 -31
- package/src/components/block-handle/block-handle-draggable.gen.ts +59 -31
- package/src/components/block-handle/block-handle-popup.gen.ts +44 -0
- package/src/components/block-handle/block-handle-positioner.gen.ts +171 -0
- package/src/components/block-handle/block-handle-root.gen.ts +84 -0
- package/src/components/block-handle/index.gen.ts +13 -3
- package/src/components/block-handle/index.ts +27 -0
- package/src/components/drop-indicator/drop-indicator.gen.ts +65 -31
- package/src/components/drop-indicator/index.gen.ts +5 -1
- package/src/components/drop-indicator/index.ts +14 -0
- package/src/components/inline-popover/index.gen.ts +11 -1
- package/src/components/inline-popover/index.ts +22 -0
- package/src/components/inline-popover/inline-popover-popup.gen.ts +44 -0
- package/src/components/inline-popover/inline-popover-positioner.gen.ts +177 -0
- package/src/components/inline-popover/inline-popover-root.gen.ts +108 -0
- package/src/components/menu/index.gen.ts +19 -0
- package/src/components/menu/index.ts +37 -0
- package/src/components/menu/menu-item.gen.ts +91 -0
- package/src/components/menu/menu-popup.gen.ts +58 -0
- package/src/components/menu/menu-positioner.gen.ts +178 -0
- package/src/components/menu/menu-root.gen.ts +88 -0
- package/src/components/menu/menu-submenu-root.gen.ts +44 -0
- package/src/components/menu/menu-submenu-trigger.gen.ts +44 -0
- package/src/components/menu/menu-trigger.gen.ts +79 -0
- package/src/components/popover/index.gen.ts +11 -3
- package/src/components/popover/index.ts +24 -0
- package/src/components/popover/popover-popup.gen.ts +44 -0
- package/src/components/popover/popover-positioner.gen.ts +178 -0
- package/src/components/popover/popover-root.gen.ts +92 -31
- package/src/components/popover/popover-trigger.gen.ts +92 -31
- package/src/components/resizable/index.gen.ts +8 -2
- package/src/components/resizable/index.ts +20 -0
- package/src/components/resizable/resizable-handle.gen.ts +54 -31
- package/src/components/resizable/resizable-root.gen.ts +90 -31
- package/src/components/table-handle/index.gen.ts +17 -9
- package/src/components/table-handle/index.ts +58 -0
- package/src/components/table-handle/table-handle-column-menu-root.gen.ts +66 -0
- package/src/components/table-handle/table-handle-column-menu-trigger.gen.ts +60 -0
- package/src/components/table-handle/table-handle-column-popup.gen.ts +44 -0
- package/src/components/table-handle/table-handle-column-positioner.gen.ts +201 -0
- package/src/components/table-handle/table-handle-drag-preview.gen.ts +57 -31
- package/src/components/table-handle/table-handle-drop-indicator.gen.ts +57 -31
- package/src/components/table-handle/table-handle-root.gen.ts +59 -31
- package/src/components/table-handle/table-handle-row-menu-root.gen.ts +66 -0
- package/src/components/table-handle/table-handle-row-menu-trigger.gen.ts +60 -0
- package/src/components/table-handle/table-handle-row-popup.gen.ts +44 -0
- package/src/components/table-handle/table-handle-row-positioner.gen.ts +201 -0
- package/src/components/tooltip/index.gen.ts +11 -3
- package/src/components/tooltip/index.ts +24 -0
- package/src/components/tooltip/tooltip-popup.gen.ts +44 -0
- package/src/components/tooltip/tooltip-positioner.gen.ts +178 -0
- package/src/components/tooltip/tooltip-root.gen.ts +85 -31
- package/src/components/tooltip/tooltip-trigger.gen.ts +63 -31
- package/src/extensions/preact-node-view.spec.ts +151 -0
- package/dist/create-component.js +0 -95
- package/dist/create-component.js.map +0 -1
- package/dist/create-props.d.ts +0 -6
- package/dist/create-props.d.ts.map +0 -1
- package/src/components/autocomplete/autocomplete-list.gen.ts +0 -34
- package/src/components/autocomplete/autocomplete-popover.gen.ts +0 -34
- package/src/components/block-handle/block-handle-popover.gen.ts +0 -34
- package/src/components/create-component.ts +0 -123
- package/src/components/create-props.ts +0 -13
- package/src/components/inline-popover/inline-popover.gen.ts +0 -34
- package/src/components/merge-refs.ts +0 -35
- package/src/components/popover/popover-content.gen.ts +0 -34
- package/src/components/table-handle/table-handle-column-root.gen.ts +0 -34
- package/src/components/table-handle/table-handle-column-trigger.gen.ts +0 -34
- package/src/components/table-handle/table-handle-popover-content.gen.ts +0 -34
- package/src/components/table-handle/table-handle-popover-item.gen.ts +0 -34
- package/src/components/table-handle/table-handle-row-root.gen.ts +0 -34
- package/src/components/table-handle/table-handle-row-trigger.gen.ts +0 -34
- package/src/components/tooltip/tooltip-content.gen.ts +0 -34
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerInlinePopoverPositionerElement, type InlinePopoverPositionerElement, type InlinePopoverPositionerProps as InlinePopoverPositionerElementProps } from '@prosekit/web/inline-popover';
|
|
6
|
+
import { createElement, type HTMLAttributes, type Ref } from 'preact';
|
|
7
|
+
import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
|
|
8
|
+
import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Props for the {@link InlinePopoverPositioner} Preact component.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
export interface InlinePopoverPositionerProps extends HTMLAttributes<InlinePopoverPositionerElement> {
|
|
16
|
+
/**
|
|
17
|
+
* The initial placement of the floating element
|
|
18
|
+
*
|
|
19
|
+
* @default "top"
|
|
20
|
+
*/
|
|
21
|
+
placement?: InlinePopoverPositionerElementProps['placement'];
|
|
22
|
+
/**
|
|
23
|
+
* The distance between the reference and floating element.
|
|
24
|
+
*
|
|
25
|
+
* @default 12
|
|
26
|
+
*/
|
|
27
|
+
offset?: InlinePopoverPositionerElementProps['offset'];
|
|
28
|
+
/**
|
|
29
|
+
* Whether to hide the floating element when the reference element or the
|
|
30
|
+
* floating element is fully clipped.
|
|
31
|
+
*
|
|
32
|
+
* @default true
|
|
33
|
+
*/
|
|
34
|
+
hide?: InlinePopoverPositionerElementProps['hide'];
|
|
35
|
+
/**
|
|
36
|
+
* Whether the floating element can overlap the reference element to keep it
|
|
37
|
+
* in view.
|
|
38
|
+
*
|
|
39
|
+
* @default true
|
|
40
|
+
*/
|
|
41
|
+
overlap?: InlinePopoverPositionerElementProps['overlap'];
|
|
42
|
+
/**
|
|
43
|
+
* Whether to improve positioning for inline reference elements that span over
|
|
44
|
+
* multiple lines.
|
|
45
|
+
*
|
|
46
|
+
* @default true
|
|
47
|
+
*/
|
|
48
|
+
inline?: InlinePopoverPositionerElementProps['inline'];
|
|
49
|
+
/**
|
|
50
|
+
* Describes the virtual padding around the boundary to check for overflow.
|
|
51
|
+
*
|
|
52
|
+
* @default 8
|
|
53
|
+
*/
|
|
54
|
+
overflowPadding?: InlinePopoverPositionerElementProps['overflowPadding'];
|
|
55
|
+
/**
|
|
56
|
+
* The strategy to use for positioning
|
|
57
|
+
*
|
|
58
|
+
* @default "absolute"
|
|
59
|
+
*/
|
|
60
|
+
strategy?: InlinePopoverPositionerElementProps['strategy'];
|
|
61
|
+
/**
|
|
62
|
+
* Options to activate auto-update listeners
|
|
63
|
+
*
|
|
64
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
65
|
+
*
|
|
66
|
+
* @default true
|
|
67
|
+
*/
|
|
68
|
+
autoUpdate?: InlinePopoverPositionerElementProps['autoUpdate'];
|
|
69
|
+
/**
|
|
70
|
+
* Whether to use the browser Popover API to place the floating element on
|
|
71
|
+
* top of other page content.
|
|
72
|
+
*
|
|
73
|
+
* @default true
|
|
74
|
+
*/
|
|
75
|
+
hoist?: InlinePopoverPositionerElementProps['hoist'];
|
|
76
|
+
/**
|
|
77
|
+
* Whether to flip the `placement` in order to keep it in view when the
|
|
78
|
+
* preferred placement(s) will overflow the clipping boundary. You can also
|
|
79
|
+
* provide an array of placements to try sequentially if the preferred
|
|
80
|
+
* `placement` does not fit.
|
|
81
|
+
*
|
|
82
|
+
* @default true
|
|
83
|
+
*/
|
|
84
|
+
flip?: InlinePopoverPositionerElementProps['flip'];
|
|
85
|
+
/**
|
|
86
|
+
* Whether the floating element should shift to keep it in view.
|
|
87
|
+
*
|
|
88
|
+
* @default true
|
|
89
|
+
*/
|
|
90
|
+
shift?: InlinePopoverPositionerElementProps['shift'];
|
|
91
|
+
/**
|
|
92
|
+
* Whether to constrain the floating element's width and height to not exceed
|
|
93
|
+
* the viewport.
|
|
94
|
+
*
|
|
95
|
+
* @default false
|
|
96
|
+
*/
|
|
97
|
+
fitViewport?: InlinePopoverPositionerElementProps['fitViewport'];
|
|
98
|
+
/**
|
|
99
|
+
* Whether to constrain the floating element's width so that it matches the
|
|
100
|
+
* reference element.
|
|
101
|
+
*
|
|
102
|
+
* @default false
|
|
103
|
+
*/
|
|
104
|
+
sameWidth?: InlinePopoverPositionerElementProps['sameWidth'];
|
|
105
|
+
/**
|
|
106
|
+
* Whether to constrain the floating element's height so that it matches the
|
|
107
|
+
* reference element.
|
|
108
|
+
*
|
|
109
|
+
* @default false
|
|
110
|
+
*/
|
|
111
|
+
sameHeight?: InlinePopoverPositionerElementProps['sameHeight'];
|
|
112
|
+
/**
|
|
113
|
+
* Describes the clipping element(s) or area that overflow will be checked relative to.
|
|
114
|
+
* Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
|
|
115
|
+
*
|
|
116
|
+
* @default 'clippingAncestors'
|
|
117
|
+
*/
|
|
118
|
+
boundary?: InlinePopoverPositionerElementProps['boundary'];
|
|
119
|
+
/**
|
|
120
|
+
* Describes the root boundary that the element will be checked for overflow relative to.
|
|
121
|
+
* Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
|
|
122
|
+
*
|
|
123
|
+
* @default 'viewport'
|
|
124
|
+
*/
|
|
125
|
+
rootBoundary?: InlinePopoverPositionerElementProps['rootBoundary'];
|
|
126
|
+
/**
|
|
127
|
+
* The element that will be used to check for overflow. Please see
|
|
128
|
+
* https://floating-ui.com/docs/detectoverflow#elementcontext for more
|
|
129
|
+
* information.
|
|
130
|
+
*
|
|
131
|
+
* @default 'floating'
|
|
132
|
+
*/
|
|
133
|
+
elementContext?: InlinePopoverPositionerElementProps['elementContext'];
|
|
134
|
+
/**
|
|
135
|
+
* Whether to check the alternate elementContext's boundary. Please see
|
|
136
|
+
* https://floating-ui.com/docs/detectoverflow#altboundary for more
|
|
137
|
+
* information.
|
|
138
|
+
*
|
|
139
|
+
* @default false
|
|
140
|
+
*/
|
|
141
|
+
altBoundary?: InlinePopoverPositionerElementProps['altBoundary'];
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
function InlinePopoverPositionerComponent(props: InlinePopoverPositionerProps, forwardedRef: Ref<InlinePopoverPositionerElement>) {
|
|
145
|
+
registerInlinePopoverPositionerElement();
|
|
146
|
+
|
|
147
|
+
const elementRef = useRef<InlinePopoverPositionerElement>(null);
|
|
148
|
+
|
|
149
|
+
const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;
|
|
150
|
+
|
|
151
|
+
useLayoutEffect(() => {
|
|
152
|
+
const element = elementRef.current as Record<string, unknown> | null;
|
|
153
|
+
if (!element) return;
|
|
154
|
+
Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
const mergedRef = useCallback(
|
|
158
|
+
(element: InlinePopoverPositionerElement | null) => {
|
|
159
|
+
elementRef.current = element;
|
|
160
|
+
if (typeof forwardedRef === 'function') {
|
|
161
|
+
forwardedRef(element);
|
|
162
|
+
} else if (forwardedRef) {
|
|
163
|
+
forwardedRef.current = element;
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
[forwardedRef],
|
|
167
|
+
);
|
|
168
|
+
|
|
169
|
+
return createElement('prosekit-inline-popover-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* A Preact component that renders an `prosekit-inline-popover-positioner` custom element.
|
|
174
|
+
*
|
|
175
|
+
* @public
|
|
176
|
+
*/
|
|
177
|
+
export const InlinePopoverPositioner: ForwardRefExoticComponent<InlinePopoverPositionerProps & RefAttributes<InlinePopoverPositionerElement>> = /* @__PURE__ */ forwardRef(InlinePopoverPositionerComponent);
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerInlinePopoverRootElement, type InlinePopoverRootElement, type InlinePopoverRootProps as InlinePopoverRootElementProps, type InlinePopoverRootEvents } from '@prosekit/web/inline-popover';
|
|
6
|
+
import { createElement, type HTMLAttributes, type Ref } from 'preact';
|
|
7
|
+
import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
|
|
8
|
+
import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
|
|
9
|
+
|
|
10
|
+
import { useEditorContext } from '../../contexts/editor-context.ts';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Props for the {@link InlinePopoverRoot} Preact component.
|
|
14
|
+
*
|
|
15
|
+
* @public
|
|
16
|
+
*/
|
|
17
|
+
export interface InlinePopoverRootProps extends HTMLAttributes<InlinePopoverRootElement> {
|
|
18
|
+
/**
|
|
19
|
+
* The ProseKit editor instance.
|
|
20
|
+
*
|
|
21
|
+
* @default null
|
|
22
|
+
* @hidden
|
|
23
|
+
*/
|
|
24
|
+
editor?: InlinePopoverRootElementProps['editor'];
|
|
25
|
+
/**
|
|
26
|
+
* Whether the popover is open by default when some inline content is
|
|
27
|
+
* selected.
|
|
28
|
+
*
|
|
29
|
+
* @default true
|
|
30
|
+
*/
|
|
31
|
+
defaultOpen?: InlinePopoverRootElementProps['defaultOpen'];
|
|
32
|
+
/**
|
|
33
|
+
* Whether the inline popover should be dismissed when the editor receives an
|
|
34
|
+
* Escape key press.
|
|
35
|
+
*
|
|
36
|
+
* @default true
|
|
37
|
+
*/
|
|
38
|
+
dismissOnEscape?: InlinePopoverRootElementProps['dismissOnEscape'];
|
|
39
|
+
/**
|
|
40
|
+
* Whether the overlay is currently open.
|
|
41
|
+
* @default null
|
|
42
|
+
*/
|
|
43
|
+
open?: InlinePopoverRootElementProps['open'];
|
|
44
|
+
/**
|
|
45
|
+
* Whether the component should ignore user interaction.
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
disabled?: InlinePopoverRootElementProps['disabled'];
|
|
49
|
+
/** */
|
|
50
|
+
onOpenChange?: (event: InlinePopoverRootEvents['openChange']) => void;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function InlinePopoverRootComponent(props: InlinePopoverRootProps, forwardedRef: Ref<InlinePopoverRootElement>) {
|
|
54
|
+
registerInlinePopoverRootElement();
|
|
55
|
+
|
|
56
|
+
const elementRef = useRef<InlinePopoverRootElement>(null);
|
|
57
|
+
const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
|
|
58
|
+
|
|
59
|
+
const p3Fallback = useEditorContext();
|
|
60
|
+
|
|
61
|
+
const { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3, open: p4, onOpenChange: e0, ...restProps } = props;
|
|
62
|
+
|
|
63
|
+
useLayoutEffect(() => {
|
|
64
|
+
const element = elementRef.current as Record<string, unknown> | null;
|
|
65
|
+
if (!element) return;
|
|
66
|
+
Object.assign(element, { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3 ?? p3Fallback, open: p4 });
|
|
67
|
+
handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
useLayoutEffect(() => {
|
|
71
|
+
const element = elementRef.current;
|
|
72
|
+
if (!element) return;
|
|
73
|
+
const ac = new AbortController();
|
|
74
|
+
for (const [index, eventName] of ['openChange'].entries()) {
|
|
75
|
+
element.addEventListener(
|
|
76
|
+
eventName,
|
|
77
|
+
(event: Event) => {
|
|
78
|
+
handlersRef.current[index]?.(event);
|
|
79
|
+
},
|
|
80
|
+
{ signal: ac.signal },
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
return () => ac.abort();
|
|
84
|
+
}, []);
|
|
85
|
+
|
|
86
|
+
const mergedRef = useCallback(
|
|
87
|
+
(element: InlinePopoverRootElement | null) => {
|
|
88
|
+
elementRef.current = element;
|
|
89
|
+
if (typeof forwardedRef === 'function') {
|
|
90
|
+
forwardedRef(element);
|
|
91
|
+
} else if (forwardedRef) {
|
|
92
|
+
forwardedRef.current = element;
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
[forwardedRef],
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
return createElement('prosekit-inline-popover-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* A Preact component that renders an `prosekit-inline-popover-root` custom element.
|
|
103
|
+
*
|
|
104
|
+
* @public
|
|
105
|
+
*/
|
|
106
|
+
export const InlinePopoverRoot: ForwardRefExoticComponent<InlinePopoverRootProps & RefAttributes<InlinePopoverRootElement>> = /* @__PURE__ */ forwardRef(InlinePopoverRootComponent);
|
|
107
|
+
|
|
108
|
+
export type { InlinePopoverRootEvents };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export { MenuItem, type MenuItemProps, type MenuItemEvents } from './menu-item.gen.ts';
|
|
6
|
+
|
|
7
|
+
export { MenuPopup, type MenuPopupProps } from './menu-popup.gen.ts';
|
|
8
|
+
|
|
9
|
+
export { MenuPositioner, type MenuPositionerProps } from './menu-positioner.gen.ts';
|
|
10
|
+
|
|
11
|
+
export { MenuRoot, type MenuRootProps, type MenuRootEvents } from './menu-root.gen.ts';
|
|
12
|
+
|
|
13
|
+
export { MenuSubmenuRoot, type MenuSubmenuRootProps } from './menu-submenu-root.gen.ts';
|
|
14
|
+
|
|
15
|
+
export { MenuSubmenuTrigger, type MenuSubmenuTriggerProps } from './menu-submenu-trigger.gen.ts';
|
|
16
|
+
|
|
17
|
+
export { MenuTrigger, type MenuTriggerProps, type MenuTriggerEvents } from './menu-trigger.gen.ts';
|
|
18
|
+
|
|
19
|
+
export { OpenChangeEvent, SelectEvent } from '@prosekit/web/menu';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
|
|
3
|
+
@module
|
|
4
|
+
|
|
5
|
+
## Anatomy
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import {
|
|
9
|
+
MenuItem,
|
|
10
|
+
MenuPopup,
|
|
11
|
+
MenuPositioner,
|
|
12
|
+
MenuRoot,
|
|
13
|
+
MenuSubmenuRoot,
|
|
14
|
+
MenuSubmenuTrigger,
|
|
15
|
+
MenuTrigger,
|
|
16
|
+
} from 'prosekit/preact/menu'
|
|
17
|
+
|
|
18
|
+
<MenuRoot>
|
|
19
|
+
<MenuTrigger>...</MenuTrigger>
|
|
20
|
+
<MenuPositioner>
|
|
21
|
+
<MenuPopup>
|
|
22
|
+
<MenuItem>...</MenuItem>
|
|
23
|
+
<MenuSubmenuRoot>
|
|
24
|
+
<MenuSubmenuTrigger>...</MenuSubmenuTrigger>
|
|
25
|
+
<MenuPositioner>
|
|
26
|
+
<MenuPopup>
|
|
27
|
+
<MenuItem>...</MenuItem>
|
|
28
|
+
</MenuPopup>
|
|
29
|
+
</MenuPositioner>
|
|
30
|
+
</MenuSubmenuRoot>
|
|
31
|
+
</MenuPopup>
|
|
32
|
+
</MenuPositioner>
|
|
33
|
+
</MenuRoot>
|
|
34
|
+
```
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
export * from './index.gen.ts'
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerMenuItemElement, type MenuItemElement, type MenuItemProps as MenuItemElementProps, type MenuItemEvents } from '@prosekit/web/menu';
|
|
6
|
+
import { createElement, type HTMLAttributes, type Ref } from 'preact';
|
|
7
|
+
import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
|
|
8
|
+
import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Props for the {@link MenuItem} Preact component.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
export interface MenuItemProps extends Omit<HTMLAttributes<MenuItemElement>, 'onSelect'> {
|
|
16
|
+
/**
|
|
17
|
+
* The unique value for this menu item.
|
|
18
|
+
*
|
|
19
|
+
* @default ""
|
|
20
|
+
*/
|
|
21
|
+
value?: MenuItemElementProps['value'];
|
|
22
|
+
/**
|
|
23
|
+
* Whether this menu item is disabled.
|
|
24
|
+
*
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
disabled?: MenuItemElementProps['disabled'];
|
|
28
|
+
/**
|
|
29
|
+
* Whether to close the menu when the item is pressed.
|
|
30
|
+
*
|
|
31
|
+
* @default true
|
|
32
|
+
*/
|
|
33
|
+
closeOnSelect?: MenuItemElementProps['closeOnSelect'];
|
|
34
|
+
/** Emitted when the the item is selected. */
|
|
35
|
+
onSelect?: (event: MenuItemEvents['select']) => void;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function MenuItemComponent(props: MenuItemProps, forwardedRef: Ref<MenuItemElement>) {
|
|
39
|
+
registerMenuItemElement();
|
|
40
|
+
|
|
41
|
+
const elementRef = useRef<MenuItemElement>(null);
|
|
42
|
+
const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
|
|
43
|
+
|
|
44
|
+
const { closeOnSelect: p0, disabled: p1, value: p2, onSelect: e0, ...restProps } = props;
|
|
45
|
+
|
|
46
|
+
useLayoutEffect(() => {
|
|
47
|
+
const element = elementRef.current as Record<string, unknown> | null;
|
|
48
|
+
if (!element) return;
|
|
49
|
+
Object.assign(element, { closeOnSelect: p0, disabled: p1, value: p2 });
|
|
50
|
+
handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
useLayoutEffect(() => {
|
|
54
|
+
const element = elementRef.current;
|
|
55
|
+
if (!element) return;
|
|
56
|
+
const ac = new AbortController();
|
|
57
|
+
for (const [index, eventName] of ['select'].entries()) {
|
|
58
|
+
element.addEventListener(
|
|
59
|
+
eventName,
|
|
60
|
+
(event: Event) => {
|
|
61
|
+
handlersRef.current[index]?.(event);
|
|
62
|
+
},
|
|
63
|
+
{ signal: ac.signal },
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
return () => ac.abort();
|
|
67
|
+
}, []);
|
|
68
|
+
|
|
69
|
+
const mergedRef = useCallback(
|
|
70
|
+
(element: MenuItemElement | null) => {
|
|
71
|
+
elementRef.current = element;
|
|
72
|
+
if (typeof forwardedRef === 'function') {
|
|
73
|
+
forwardedRef(element);
|
|
74
|
+
} else if (forwardedRef) {
|
|
75
|
+
forwardedRef.current = element;
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
[forwardedRef],
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
return createElement('prosekit-menu-item', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* A Preact component that renders an `prosekit-menu-item` custom element.
|
|
86
|
+
*
|
|
87
|
+
* @public
|
|
88
|
+
*/
|
|
89
|
+
export const MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<MenuItemElement>> = /* @__PURE__ */ forwardRef(MenuItemComponent);
|
|
90
|
+
|
|
91
|
+
export type { MenuItemEvents };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerMenuPopupElement, type MenuPopupElement, type MenuPopupProps as MenuPopupElementProps } from '@prosekit/web/menu';
|
|
6
|
+
import { createElement, type HTMLAttributes, type Ref } from 'preact';
|
|
7
|
+
import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
|
|
8
|
+
import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Props for the {@link MenuPopup} Preact component.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
export interface MenuPopupProps extends HTMLAttributes<MenuPopupElement> {
|
|
16
|
+
/**
|
|
17
|
+
* By default, the MenuPopup element will listen for keydown events.
|
|
18
|
+
* You can pass a different element to listen for keydown events.
|
|
19
|
+
*
|
|
20
|
+
* @default null
|
|
21
|
+
*/
|
|
22
|
+
eventTarget?: MenuPopupElementProps['eventTarget'];
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function MenuPopupComponent(props: MenuPopupProps, forwardedRef: Ref<MenuPopupElement>) {
|
|
26
|
+
registerMenuPopupElement();
|
|
27
|
+
|
|
28
|
+
const elementRef = useRef<MenuPopupElement>(null);
|
|
29
|
+
|
|
30
|
+
const { eventTarget: p0, ...restProps } = props;
|
|
31
|
+
|
|
32
|
+
useLayoutEffect(() => {
|
|
33
|
+
const element = elementRef.current as Record<string, unknown> | null;
|
|
34
|
+
if (!element) return;
|
|
35
|
+
Object.assign(element, { eventTarget: p0 });
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
const mergedRef = useCallback(
|
|
39
|
+
(element: MenuPopupElement | null) => {
|
|
40
|
+
elementRef.current = element;
|
|
41
|
+
if (typeof forwardedRef === 'function') {
|
|
42
|
+
forwardedRef(element);
|
|
43
|
+
} else if (forwardedRef) {
|
|
44
|
+
forwardedRef.current = element;
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
[forwardedRef],
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
return createElement('prosekit-menu-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* A Preact component that renders an `prosekit-menu-popup` custom element.
|
|
55
|
+
*
|
|
56
|
+
* @public
|
|
57
|
+
*/
|
|
58
|
+
export const MenuPopup: ForwardRefExoticComponent<MenuPopupProps & RefAttributes<MenuPopupElement>> = /* @__PURE__ */ forwardRef(MenuPopupComponent);
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { registerMenuPositionerElement, type MenuPositionerElement, type MenuPositionerProps as MenuPositionerElementProps } from '@prosekit/web/menu';
|
|
6
|
+
import { createElement, type HTMLAttributes, type Ref } from 'preact';
|
|
7
|
+
import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
|
|
8
|
+
import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Props for the {@link MenuPositioner} Preact component.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
export interface MenuPositionerProps extends HTMLAttributes<MenuPositionerElement> {
|
|
16
|
+
/**
|
|
17
|
+
* The initial placement of the floating element
|
|
18
|
+
*
|
|
19
|
+
* @default "bottom-start"
|
|
20
|
+
*/
|
|
21
|
+
placement?: MenuPositionerElementProps['placement'];
|
|
22
|
+
/**
|
|
23
|
+
* The strategy to use for positioning
|
|
24
|
+
*
|
|
25
|
+
* @default "absolute"
|
|
26
|
+
*/
|
|
27
|
+
strategy?: MenuPositionerElementProps['strategy'];
|
|
28
|
+
/**
|
|
29
|
+
* Options to activate auto-update listeners
|
|
30
|
+
*
|
|
31
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
32
|
+
*
|
|
33
|
+
* @default true
|
|
34
|
+
*/
|
|
35
|
+
autoUpdate?: MenuPositionerElementProps['autoUpdate'];
|
|
36
|
+
/**
|
|
37
|
+
* Whether to use the browser Popover API to place the floating element on
|
|
38
|
+
* top of other page content.
|
|
39
|
+
*
|
|
40
|
+
* @default true
|
|
41
|
+
*/
|
|
42
|
+
hoist?: MenuPositionerElementProps['hoist'];
|
|
43
|
+
/**
|
|
44
|
+
* The distance between the reference and floating element.
|
|
45
|
+
*
|
|
46
|
+
* @default 6
|
|
47
|
+
*/
|
|
48
|
+
offset?: MenuPositionerElementProps['offset'];
|
|
49
|
+
/**
|
|
50
|
+
* Whether to flip the `placement` in order to keep it in view when the
|
|
51
|
+
* preferred placement(s) will overflow the clipping boundary. You can also
|
|
52
|
+
* provide an array of placements to try sequentially if the preferred
|
|
53
|
+
* `placement` does not fit.
|
|
54
|
+
*
|
|
55
|
+
* @default true
|
|
56
|
+
*/
|
|
57
|
+
flip?: MenuPositionerElementProps['flip'];
|
|
58
|
+
/**
|
|
59
|
+
* Whether the floating element should shift to keep it in view.
|
|
60
|
+
*
|
|
61
|
+
* @default true
|
|
62
|
+
*/
|
|
63
|
+
shift?: MenuPositionerElementProps['shift'];
|
|
64
|
+
/**
|
|
65
|
+
* Whether the floating element can overlap the reference element to keep it
|
|
66
|
+
* in view.
|
|
67
|
+
*
|
|
68
|
+
* @default false
|
|
69
|
+
*/
|
|
70
|
+
overlap?: MenuPositionerElementProps['overlap'];
|
|
71
|
+
/**
|
|
72
|
+
* Whether to constrain the floating element's width and height to not exceed
|
|
73
|
+
* the viewport.
|
|
74
|
+
*
|
|
75
|
+
* @default false
|
|
76
|
+
*/
|
|
77
|
+
fitViewport?: MenuPositionerElementProps['fitViewport'];
|
|
78
|
+
/**
|
|
79
|
+
* Whether to constrain the floating element's width so that it matches the
|
|
80
|
+
* reference element.
|
|
81
|
+
*
|
|
82
|
+
* @default false
|
|
83
|
+
*/
|
|
84
|
+
sameWidth?: MenuPositionerElementProps['sameWidth'];
|
|
85
|
+
/**
|
|
86
|
+
* Whether to constrain the floating element's height so that it matches the
|
|
87
|
+
* reference element.
|
|
88
|
+
*
|
|
89
|
+
* @default false
|
|
90
|
+
*/
|
|
91
|
+
sameHeight?: MenuPositionerElementProps['sameHeight'];
|
|
92
|
+
/**
|
|
93
|
+
* Whether to improve positioning for inline reference elements that span over
|
|
94
|
+
* multiple lines.
|
|
95
|
+
*
|
|
96
|
+
* @default false
|
|
97
|
+
*/
|
|
98
|
+
inline?: MenuPositionerElementProps['inline'];
|
|
99
|
+
/**
|
|
100
|
+
* Whether to hide the floating element when the reference element or the
|
|
101
|
+
* floating element is fully clipped.
|
|
102
|
+
*
|
|
103
|
+
* @default false
|
|
104
|
+
*/
|
|
105
|
+
hide?: MenuPositionerElementProps['hide'];
|
|
106
|
+
/**
|
|
107
|
+
* Describes the clipping element(s) or area that overflow will be checked relative to.
|
|
108
|
+
* Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
|
|
109
|
+
*
|
|
110
|
+
* @default 'clippingAncestors'
|
|
111
|
+
*/
|
|
112
|
+
boundary?: MenuPositionerElementProps['boundary'];
|
|
113
|
+
/**
|
|
114
|
+
* Describes the root boundary that the element will be checked for overflow relative to.
|
|
115
|
+
* Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
|
|
116
|
+
*
|
|
117
|
+
* @default 'viewport'
|
|
118
|
+
*/
|
|
119
|
+
rootBoundary?: MenuPositionerElementProps['rootBoundary'];
|
|
120
|
+
/**
|
|
121
|
+
* Describes the virtual padding around the boundary to check for overflow.
|
|
122
|
+
* Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
|
|
123
|
+
*
|
|
124
|
+
* @default 4
|
|
125
|
+
*/
|
|
126
|
+
overflowPadding?: MenuPositionerElementProps['overflowPadding'];
|
|
127
|
+
/**
|
|
128
|
+
* The element that will be used to check for overflow. Please see
|
|
129
|
+
* https://floating-ui.com/docs/detectoverflow#elementcontext for more
|
|
130
|
+
* information.
|
|
131
|
+
*
|
|
132
|
+
* @default 'floating'
|
|
133
|
+
*/
|
|
134
|
+
elementContext?: MenuPositionerElementProps['elementContext'];
|
|
135
|
+
/**
|
|
136
|
+
* Whether to check the alternate elementContext's boundary. Please see
|
|
137
|
+
* https://floating-ui.com/docs/detectoverflow#altboundary for more
|
|
138
|
+
* information.
|
|
139
|
+
*
|
|
140
|
+
* @default false
|
|
141
|
+
*/
|
|
142
|
+
altBoundary?: MenuPositionerElementProps['altBoundary'];
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
function MenuPositionerComponent(props: MenuPositionerProps, forwardedRef: Ref<MenuPositionerElement>) {
|
|
146
|
+
registerMenuPositionerElement();
|
|
147
|
+
|
|
148
|
+
const elementRef = useRef<MenuPositionerElement>(null);
|
|
149
|
+
|
|
150
|
+
const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;
|
|
151
|
+
|
|
152
|
+
useLayoutEffect(() => {
|
|
153
|
+
const element = elementRef.current as Record<string, unknown> | null;
|
|
154
|
+
if (!element) return;
|
|
155
|
+
Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
const mergedRef = useCallback(
|
|
159
|
+
(element: MenuPositionerElement | null) => {
|
|
160
|
+
elementRef.current = element;
|
|
161
|
+
if (typeof forwardedRef === 'function') {
|
|
162
|
+
forwardedRef(element);
|
|
163
|
+
} else if (forwardedRef) {
|
|
164
|
+
forwardedRef.current = element;
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
[forwardedRef],
|
|
168
|
+
);
|
|
169
|
+
|
|
170
|
+
return createElement('prosekit-menu-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* A Preact component that renders an `prosekit-menu-positioner` custom element.
|
|
175
|
+
*
|
|
176
|
+
* @public
|
|
177
|
+
*/
|
|
178
|
+
export const MenuPositioner: ForwardRefExoticComponent<MenuPositionerProps & RefAttributes<MenuPositionerElement>> = /* @__PURE__ */ forwardRef(MenuPositionerComponent);
|