@revvue/embed-react 0.0.0-beta.3 → 0.0.0-beta.4
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/css/dialog.css +1 -1
- package/dist/css/drawer.css +1 -1
- package/dist/css/popover.css +1 -1
- package/dist/package.cjs +268 -106
- package/dist/package.mjs +266 -108
- package/dist/types/bindings/dialog/build-stable-deps.d.ts +5 -0
- package/dist/types/bindings/dialog/build-stable-deps.d.ts.map +1 -0
- package/dist/types/bindings/dialog/dialog.d.ts +5 -0
- package/dist/types/bindings/dialog/dialog.d.ts.map +1 -0
- package/dist/types/bindings/dialog/index.d.ts.map +1 -0
- package/dist/types/bindings/drawer/build-stable-deps.d.ts +11 -0
- package/dist/types/bindings/drawer/build-stable-deps.d.ts.map +1 -0
- package/dist/types/bindings/drawer/drawer.d.ts +24 -0
- package/dist/types/bindings/drawer/drawer.d.ts.map +1 -0
- package/dist/types/bindings/drawer/index.d.ts.map +1 -0
- package/dist/types/bindings/index.d.ts.map +1 -0
- package/dist/types/bindings/popover/build-stable-deps.d.ts +10 -0
- package/dist/types/bindings/popover/build-stable-deps.d.ts.map +1 -0
- package/dist/types/bindings/popover/index.d.ts.map +1 -0
- package/dist/types/bindings/popover/popover.d.ts +42 -0
- package/dist/types/bindings/popover/popover.d.ts.map +1 -0
- package/dist/types/bindings/widget/build-stable-deps.d.ts.map +1 -0
- package/dist/types/bindings/widget/index.d.ts.map +1 -0
- package/dist/types/bindings/widget/widget.d.ts +24 -0
- package/dist/types/bindings/widget/widget.d.ts.map +1 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/internal/create-floating-bindings.d.ts +60 -0
- package/dist/types/internal/create-floating-bindings.d.ts.map +1 -0
- package/dist/types/internal/create-widget-bindings.d.ts +32 -0
- package/dist/types/internal/create-widget-bindings.d.ts.map +1 -0
- package/dist/types/internal/index.d.ts +4 -0
- package/dist/types/internal/index.d.ts.map +1 -0
- package/dist/types/internal/slot.d.ts +31 -0
- package/dist/types/internal/slot.d.ts.map +1 -0
- package/package.json +2 -2
- package/dist/types/components/dialog/build-stable-deps.d.ts +0 -3
- package/dist/types/components/dialog/build-stable-deps.d.ts.map +0 -1
- package/dist/types/components/dialog/dialog.d.ts +0 -6
- package/dist/types/components/dialog/dialog.d.ts.map +0 -1
- package/dist/types/components/dialog/index.d.ts.map +0 -1
- package/dist/types/components/drawer/build-stable-deps.d.ts +0 -3
- package/dist/types/components/drawer/build-stable-deps.d.ts.map +0 -1
- package/dist/types/components/drawer/drawer.d.ts +0 -6
- package/dist/types/components/drawer/drawer.d.ts.map +0 -1
- package/dist/types/components/drawer/index.d.ts.map +0 -1
- package/dist/types/components/index.d.ts.map +0 -1
- package/dist/types/components/popover/build-stable-deps.d.ts +0 -3
- package/dist/types/components/popover/build-stable-deps.d.ts.map +0 -1
- package/dist/types/components/popover/index.d.ts.map +0 -1
- package/dist/types/components/popover/popover.d.ts +0 -29
- package/dist/types/components/popover/popover.d.ts.map +0 -1
- package/dist/types/components/widget/build-stable-deps.d.ts.map +0 -1
- package/dist/types/components/widget/index.d.ts.map +0 -1
- package/dist/types/components/widget/widget.d.ts +0 -11
- package/dist/types/components/widget/widget.d.ts.map +0 -1
- /package/dist/types/{components → bindings}/dialog/index.d.ts +0 -0
- /package/dist/types/{components → bindings}/drawer/index.d.ts +0 -0
- /package/dist/types/{components → bindings}/index.d.ts +0 -0
- /package/dist/types/{components → bindings}/popover/index.d.ts +0 -0
- /package/dist/types/{components → bindings}/widget/build-stable-deps.d.ts +0 -0
- /package/dist/types/{components → bindings}/widget/index.d.ts +0 -0
package/dist/package.mjs
CHANGED
|
@@ -1,8 +1,178 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { createDialog, createDrawer, createPopover, createWidget } from "@revvue/embed";
|
|
3
|
-
import {
|
|
3
|
+
import { cloneElement, isValidElement, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
//#region src/
|
|
5
|
+
//#region src/internal/slot.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Radix-style `asChild` slot. Clones the single React element child and merges
|
|
8
|
+
* trigger-related props onto it. The child's own props win for non-handler
|
|
9
|
+
* fields (so a consumer's `className` is preserved alongside ours), and event
|
|
10
|
+
* handlers are composed (the child handler runs first, then the slot handler —
|
|
11
|
+
* so consumers can call `event.preventDefault()` to skip our `toggle` call).
|
|
12
|
+
*
|
|
13
|
+
* Throws synchronously if `children` is not a single React element so the
|
|
14
|
+
* misuse is obvious in development.
|
|
15
|
+
*/
|
|
16
|
+
function Slot({ children, ...slotProps }) {
|
|
17
|
+
if (!isValidElement(children)) throw new Error("`asChild` requires exactly one React element as a child.");
|
|
18
|
+
const child = children;
|
|
19
|
+
const childProps = child.props;
|
|
20
|
+
const merged = {
|
|
21
|
+
...slotProps,
|
|
22
|
+
...childProps
|
|
23
|
+
};
|
|
24
|
+
if (slotProps.onClick || childProps.onClick) merged.onClick = (event) => {
|
|
25
|
+
childProps.onClick?.(event);
|
|
26
|
+
if (!event.defaultPrevented) slotProps.onClick?.(event);
|
|
27
|
+
};
|
|
28
|
+
if (slotProps.className || childProps.className) merged.className = [childProps.className, slotProps.className].filter(Boolean).join(" ");
|
|
29
|
+
if (slotProps.style || childProps.style) merged.style = {
|
|
30
|
+
...slotProps.style,
|
|
31
|
+
...childProps.style
|
|
32
|
+
};
|
|
33
|
+
return cloneElement(child, merged);
|
|
34
|
+
}
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region src/internal/create-floating-bindings.tsx
|
|
37
|
+
/**
|
|
38
|
+
* Builds a `{ useEmbed, Embed }` pair for a floating embed (drawer, dialog,
|
|
39
|
+
* popover). The hook owns mount/unmount + open-state subscription; the
|
|
40
|
+
* component is a thin wrapper that renders a default `<button>` trigger and
|
|
41
|
+
* spreads `getTriggerProps()` onto it.
|
|
42
|
+
*/
|
|
43
|
+
function createFloatingBindings({ factory, buildStableDeps }) {
|
|
44
|
+
function useEmbed(props) {
|
|
45
|
+
const instanceRef = useRef(null);
|
|
46
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
const instance = factory(props);
|
|
49
|
+
instanceRef.current = instance;
|
|
50
|
+
setIsOpen(instance.isOpen());
|
|
51
|
+
const unsubscribe = instance.subscribe(() => {
|
|
52
|
+
setIsOpen(instance.isOpen());
|
|
53
|
+
});
|
|
54
|
+
return () => {
|
|
55
|
+
unsubscribe();
|
|
56
|
+
instance.unmount();
|
|
57
|
+
instanceRef.current = null;
|
|
58
|
+
};
|
|
59
|
+
}, [...buildStableDeps(props)]);
|
|
60
|
+
const handlers = useMemo(() => ({
|
|
61
|
+
open: () => void instanceRef.current?.open(),
|
|
62
|
+
close: () => void instanceRef.current?.close(),
|
|
63
|
+
toggle: () => void instanceRef.current?.toggle(),
|
|
64
|
+
refresh: () => void instanceRef.current?.refresh(),
|
|
65
|
+
focus: () => void instanceRef.current?.focus()
|
|
66
|
+
}), []);
|
|
67
|
+
const getTriggerProps = useCallback(() => ({
|
|
68
|
+
type: "button",
|
|
69
|
+
onClick: () => handlers.toggle(),
|
|
70
|
+
"aria-expanded": isOpen,
|
|
71
|
+
"aria-haspopup": "dialog"
|
|
72
|
+
}), [handlers, isOpen]);
|
|
73
|
+
return useMemo(() => ({
|
|
74
|
+
...handlers,
|
|
75
|
+
isOpen,
|
|
76
|
+
getTriggerProps
|
|
77
|
+
}), [
|
|
78
|
+
handlers,
|
|
79
|
+
isOpen,
|
|
80
|
+
getTriggerProps
|
|
81
|
+
]);
|
|
82
|
+
}
|
|
83
|
+
return {
|
|
84
|
+
useEmbed,
|
|
85
|
+
Embed: memo(function FloatingEmbed(props) {
|
|
86
|
+
const { asChild, children, className, style, onClick, ref, ...embedProps } = props;
|
|
87
|
+
const { getTriggerProps, focus, close, open, toggle, refresh } = useEmbed(embedProps);
|
|
88
|
+
const trigger = getTriggerProps();
|
|
89
|
+
const composedOnClick = (event) => {
|
|
90
|
+
onClick?.(event);
|
|
91
|
+
if (!event.defaultPrevented) trigger.onClick?.(event);
|
|
92
|
+
};
|
|
93
|
+
useImperativeHandle(ref, () => ({
|
|
94
|
+
close,
|
|
95
|
+
focus,
|
|
96
|
+
open,
|
|
97
|
+
refresh,
|
|
98
|
+
toggle
|
|
99
|
+
}), [
|
|
100
|
+
focus,
|
|
101
|
+
close,
|
|
102
|
+
open,
|
|
103
|
+
toggle,
|
|
104
|
+
refresh
|
|
105
|
+
]);
|
|
106
|
+
if (asChild) return /* @__PURE__ */ jsx(Slot, {
|
|
107
|
+
type: trigger.type,
|
|
108
|
+
onClick: composedOnClick,
|
|
109
|
+
className,
|
|
110
|
+
style,
|
|
111
|
+
"aria-expanded": trigger["aria-expanded"],
|
|
112
|
+
"aria-haspopup": trigger["aria-haspopup"],
|
|
113
|
+
children
|
|
114
|
+
});
|
|
115
|
+
return /* @__PURE__ */ jsx("button", {
|
|
116
|
+
type: trigger.type,
|
|
117
|
+
onClick: composedOnClick,
|
|
118
|
+
className,
|
|
119
|
+
style,
|
|
120
|
+
"aria-expanded": trigger["aria-expanded"],
|
|
121
|
+
"aria-haspopup": trigger["aria-haspopup"],
|
|
122
|
+
children
|
|
123
|
+
});
|
|
124
|
+
})
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
//#endregion
|
|
128
|
+
//#region src/internal/create-widget-bindings.tsx
|
|
129
|
+
/**
|
|
130
|
+
* Builds a `{ useEmbed, Embed }` pair for an inline widget. Unlike floating
|
|
131
|
+
* embeds, widgets need a host element — the hook returns a `containerRef` the
|
|
132
|
+
* consumer must attach to a DOM node, and the component does that for you by
|
|
133
|
+
* rendering a `<div>`.
|
|
134
|
+
*/
|
|
135
|
+
function createWidgetBindings({ factory, buildStableDeps }) {
|
|
136
|
+
function useEmbed(props) {
|
|
137
|
+
const containerRef = useRef(null);
|
|
138
|
+
const instanceRef = useRef(null);
|
|
139
|
+
useEffect(() => {
|
|
140
|
+
if (!containerRef.current) return;
|
|
141
|
+
const instance = factory(props, containerRef.current);
|
|
142
|
+
instanceRef.current = instance;
|
|
143
|
+
return () => {
|
|
144
|
+
instance.unmount();
|
|
145
|
+
instanceRef.current = null;
|
|
146
|
+
};
|
|
147
|
+
}, [...buildStableDeps(props)]);
|
|
148
|
+
const handlers = useMemo(() => ({
|
|
149
|
+
refresh: () => void instanceRef.current?.refresh(),
|
|
150
|
+
focus: () => void instanceRef.current?.focus()
|
|
151
|
+
}), []);
|
|
152
|
+
return useMemo(() => ({
|
|
153
|
+
...handlers,
|
|
154
|
+
containerRef
|
|
155
|
+
}), [handlers]);
|
|
156
|
+
}
|
|
157
|
+
return {
|
|
158
|
+
useEmbed,
|
|
159
|
+
Embed: memo(function WidgetEmbed(props) {
|
|
160
|
+
const { className, style, ref, ...embedProps } = props;
|
|
161
|
+
const { containerRef, focus, refresh } = useEmbed(embedProps);
|
|
162
|
+
useImperativeHandle(ref, () => ({
|
|
163
|
+
focus,
|
|
164
|
+
refresh
|
|
165
|
+
}), [focus, refresh]);
|
|
166
|
+
return /* @__PURE__ */ jsx("div", {
|
|
167
|
+
ref: containerRef,
|
|
168
|
+
className,
|
|
169
|
+
style
|
|
170
|
+
});
|
|
171
|
+
})
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
//#endregion
|
|
175
|
+
//#region src/bindings/dialog/build-stable-deps.ts
|
|
6
176
|
function buildStableDeps$3(props) {
|
|
7
177
|
return [
|
|
8
178
|
props.tenant,
|
|
@@ -14,28 +184,21 @@ function buildStableDeps$3(props) {
|
|
|
14
184
|
];
|
|
15
185
|
}
|
|
16
186
|
//#endregion
|
|
17
|
-
//#region src/
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
open: () => void instanceRef.current?.open(),
|
|
22
|
-
close: () => void instanceRef.current?.close(),
|
|
23
|
-
toggle: () => void instanceRef.current?.toggle(),
|
|
24
|
-
refresh: () => void instanceRef.current?.refresh(),
|
|
25
|
-
focus: () => void instanceRef.current?.focus()
|
|
26
|
-
}), []);
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
const instance = createDialog(props);
|
|
29
|
-
instanceRef.current = instance;
|
|
30
|
-
return () => {
|
|
31
|
-
instance.unmount();
|
|
32
|
-
instanceRef.current = null;
|
|
33
|
-
};
|
|
34
|
-
}, [...buildStableDeps$3(props)]);
|
|
35
|
-
return null;
|
|
187
|
+
//#region src/bindings/dialog/dialog.ts
|
|
188
|
+
var bindings$3 = createFloatingBindings({
|
|
189
|
+
factory: (props) => createDialog(props),
|
|
190
|
+
buildStableDeps: buildStableDeps$3
|
|
36
191
|
});
|
|
192
|
+
var useDialog = bindings$3.useEmbed;
|
|
193
|
+
var Dialog = bindings$3.Embed;
|
|
37
194
|
//#endregion
|
|
38
|
-
//#region src/
|
|
195
|
+
//#region src/bindings/drawer/build-stable-deps.ts
|
|
196
|
+
/**
|
|
197
|
+
* Identity props — when any of these change between renders the embed instance
|
|
198
|
+
* is torn down and re-created. Keep this in lockstep with the props the
|
|
199
|
+
* underlying `createDrawer` actually consumes; cosmetic React-only props
|
|
200
|
+
* (className/style) must not appear here.
|
|
201
|
+
*/
|
|
39
202
|
function buildStableDeps$2(props) {
|
|
40
203
|
return [
|
|
41
204
|
props.tenant,
|
|
@@ -43,39 +206,44 @@ function buildStableDeps$2(props) {
|
|
|
43
206
|
props.app,
|
|
44
207
|
props.formId,
|
|
45
208
|
props.width,
|
|
46
|
-
props.height
|
|
47
|
-
props.label,
|
|
48
|
-
props.icon,
|
|
49
|
-
props.position,
|
|
50
|
-
props.color,
|
|
51
|
-
props.textColor,
|
|
52
|
-
props.autoOpen,
|
|
53
|
-
props.autoOpenDelay
|
|
209
|
+
props.height
|
|
54
210
|
];
|
|
55
211
|
}
|
|
56
212
|
//#endregion
|
|
57
|
-
//#region src/
|
|
58
|
-
var
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
open: () => void instanceRef.current?.open(),
|
|
62
|
-
close: () => void instanceRef.current?.close(),
|
|
63
|
-
toggle: () => void instanceRef.current?.toggle(),
|
|
64
|
-
refresh: () => void instanceRef.current?.refresh(),
|
|
65
|
-
focus: () => void instanceRef.current?.focus()
|
|
66
|
-
}), []);
|
|
67
|
-
useEffect(() => {
|
|
68
|
-
const instance = createDrawer(props);
|
|
69
|
-
instanceRef.current = instance;
|
|
70
|
-
return () => {
|
|
71
|
-
instance.unmount();
|
|
72
|
-
instanceRef.current = null;
|
|
73
|
-
};
|
|
74
|
-
}, [...buildStableDeps$2(props)]);
|
|
75
|
-
return null;
|
|
213
|
+
//#region src/bindings/drawer/drawer.ts
|
|
214
|
+
var bindings$2 = createFloatingBindings({
|
|
215
|
+
factory: (props) => createDrawer(props),
|
|
216
|
+
buildStableDeps: buildStableDeps$2
|
|
76
217
|
});
|
|
218
|
+
/**
|
|
219
|
+
* Hook form. Use when you want full control over the trigger element.
|
|
220
|
+
*
|
|
221
|
+
* @example
|
|
222
|
+
* ```tsx
|
|
223
|
+
* const drawer = useDrawer({ tenant, app: "chat", type: "drawer" });
|
|
224
|
+
* return <button {...drawer.getTriggerProps()}>Chat</button>;
|
|
225
|
+
* ```
|
|
226
|
+
*/
|
|
227
|
+
var useDrawer = bindings$2.useEmbed;
|
|
228
|
+
/**
|
|
229
|
+
* Component form. Renders a `<button>` trigger that opens the drawer.
|
|
230
|
+
* Use `asChild` to delegate to your own button component (Radix-style).
|
|
231
|
+
*
|
|
232
|
+
* @example
|
|
233
|
+
* ```tsx
|
|
234
|
+
* <Drawer tenant={tenant} app="chat" type="drawer">Chat</Drawer>
|
|
235
|
+
* ```
|
|
236
|
+
*/
|
|
237
|
+
var Drawer = bindings$2.Embed;
|
|
77
238
|
//#endregion
|
|
78
|
-
//#region src/
|
|
239
|
+
//#region src/bindings/popover/build-stable-deps.ts
|
|
240
|
+
/**
|
|
241
|
+
* Popover stable deps intentionally exclude button-styling props
|
|
242
|
+
* (label/icon/color/textColor/position) — those are not consumed by the
|
|
243
|
+
* embed factory in headless mode (`trigger: 'none'`); the React component
|
|
244
|
+
* renders its own trigger element. autoOpen/autoOpenDelay still affect the
|
|
245
|
+
* panel and are tracked.
|
|
246
|
+
*/
|
|
79
247
|
function buildStableDeps$1(props) {
|
|
80
248
|
return [
|
|
81
249
|
props.tenant,
|
|
@@ -84,54 +252,41 @@ function buildStableDeps$1(props) {
|
|
|
84
252
|
props.formId,
|
|
85
253
|
props.width,
|
|
86
254
|
props.height,
|
|
87
|
-
props.label,
|
|
88
|
-
props.icon,
|
|
89
|
-
props.position,
|
|
90
|
-
props.color,
|
|
91
|
-
props.textColor,
|
|
92
255
|
props.autoOpen,
|
|
93
256
|
props.autoOpenDelay
|
|
94
257
|
];
|
|
95
258
|
}
|
|
96
259
|
//#endregion
|
|
97
|
-
//#region src/
|
|
260
|
+
//#region src/bindings/popover/popover.ts
|
|
261
|
+
var bindings$1 = createFloatingBindings({
|
|
262
|
+
factory: (props) => createPopover({
|
|
263
|
+
...props,
|
|
264
|
+
trigger: "none"
|
|
265
|
+
}),
|
|
266
|
+
buildStableDeps: buildStableDeps$1
|
|
267
|
+
});
|
|
98
268
|
/**
|
|
99
|
-
*
|
|
100
|
-
*
|
|
101
|
-
* The component manages no DOM of its own — it delegates entirely to the
|
|
102
|
-
* `createPopover` factory, which appends the button and panel to `document.body`.
|
|
103
|
-
* Use the forwarded ref to imperatively open, close, or toggle the popover.
|
|
269
|
+
* Hook form. Use when you want to render your own trigger element.
|
|
104
270
|
*
|
|
105
271
|
* @example
|
|
106
272
|
* ```tsx
|
|
107
|
-
* const
|
|
108
|
-
*
|
|
109
|
-
*
|
|
273
|
+
* const popover = usePopover({ tenant, app: "chat", type: "popover" });
|
|
274
|
+
* return <button {...popover.getTriggerProps()}>Chat</button>;
|
|
275
|
+
* ```
|
|
276
|
+
*/
|
|
277
|
+
var usePopover = bindings$1.useEmbed;
|
|
278
|
+
/**
|
|
279
|
+
* Component form. Renders a `<button>` trigger that toggles the popover.
|
|
280
|
+
* Use `asChild` to delegate to your own button (Radix-style).
|
|
110
281
|
*
|
|
111
|
-
*
|
|
282
|
+
* @example
|
|
283
|
+
* ```tsx
|
|
284
|
+
* <Popover tenant={tenant} app="chat" type="popover">Chat</Popover>
|
|
112
285
|
* ```
|
|
113
286
|
*/
|
|
114
|
-
var Popover =
|
|
115
|
-
const instanceRef = useRef(null);
|
|
116
|
-
useImperativeHandle(ref, () => ({
|
|
117
|
-
open: () => void instanceRef.current?.open(),
|
|
118
|
-
close: () => void instanceRef.current?.close(),
|
|
119
|
-
toggle: () => void instanceRef.current?.toggle(),
|
|
120
|
-
refresh: () => void instanceRef.current?.refresh(),
|
|
121
|
-
focus: () => void instanceRef.current?.focus()
|
|
122
|
-
}), []);
|
|
123
|
-
useEffect(() => {
|
|
124
|
-
const instance = createPopover(props);
|
|
125
|
-
instanceRef.current = instance;
|
|
126
|
-
return () => {
|
|
127
|
-
instance.unmount();
|
|
128
|
-
instanceRef.current = null;
|
|
129
|
-
};
|
|
130
|
-
}, [...buildStableDeps$1(props)]);
|
|
131
|
-
return null;
|
|
132
|
-
});
|
|
287
|
+
var Popover = bindings$1.Embed;
|
|
133
288
|
//#endregion
|
|
134
|
-
//#region src/
|
|
289
|
+
//#region src/bindings/widget/build-stable-deps.ts
|
|
135
290
|
function buildStableDeps(props) {
|
|
136
291
|
return [
|
|
137
292
|
props.tenant,
|
|
@@ -143,28 +298,31 @@ function buildStableDeps(props) {
|
|
|
143
298
|
];
|
|
144
299
|
}
|
|
145
300
|
//#endregion
|
|
146
|
-
//#region src/
|
|
147
|
-
var
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
useImperativeHandle(ref, () => ({
|
|
151
|
-
refresh: () => void instanceRef.current?.refresh(),
|
|
152
|
-
focus: () => void instanceRef.current?.focus()
|
|
153
|
-
}), []);
|
|
154
|
-
useEffect(() => {
|
|
155
|
-
if (!containerRef.current) return;
|
|
156
|
-
const instance = createWidget(props, containerRef.current);
|
|
157
|
-
instanceRef.current = instance;
|
|
158
|
-
return () => {
|
|
159
|
-
instance.unmount();
|
|
160
|
-
instanceRef.current = null;
|
|
161
|
-
};
|
|
162
|
-
}, [...buildStableDeps(props)]);
|
|
163
|
-
return /* @__PURE__ */ jsx("div", {
|
|
164
|
-
ref: containerRef,
|
|
165
|
-
className,
|
|
166
|
-
style
|
|
167
|
-
});
|
|
301
|
+
//#region src/bindings/widget/widget.ts
|
|
302
|
+
var bindings = createWidgetBindings({
|
|
303
|
+
factory: (props, element) => createWidget(props, element),
|
|
304
|
+
buildStableDeps
|
|
168
305
|
});
|
|
306
|
+
/**
|
|
307
|
+
* Hook form. Returns a `containerRef` you must attach to a host element
|
|
308
|
+
* (typically a `<div>`) plus the imperative API.
|
|
309
|
+
*
|
|
310
|
+
* @example
|
|
311
|
+
* ```tsx
|
|
312
|
+
* const widget = useWidget({ tenant, app: "chat", type: "widget" });
|
|
313
|
+
* return <div ref={widget.containerRef} className="my-host" />;
|
|
314
|
+
* ```
|
|
315
|
+
*/
|
|
316
|
+
var useWidget = bindings.useEmbed;
|
|
317
|
+
/**
|
|
318
|
+
* Component form. Renders the host `<div>` for you and accepts `className`
|
|
319
|
+
* and `style` for layout.
|
|
320
|
+
*
|
|
321
|
+
* @example
|
|
322
|
+
* ```tsx
|
|
323
|
+
* <Widget tenant={tenant} app="chat" type="widget" className="h-full w-full" />
|
|
324
|
+
* ```
|
|
325
|
+
*/
|
|
326
|
+
var Widget = bindings.Embed;
|
|
169
327
|
//#endregion
|
|
170
|
-
export { Dialog, Drawer, Popover, Widget };
|
|
328
|
+
export { Dialog, Drawer, Popover, Widget, useDialog, useDrawer, usePopover, useWidget };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../src/bindings/dialog/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE1D,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,mCAErD"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { createDialog } from '@revvue/embed';
|
|
2
|
+
export type DialogProps = Parameters<typeof createDialog>[0];
|
|
3
|
+
export declare const useDialog: (props: import('@revvue/embed').Public<import('@revvue/embed').EmbedOptions>) => import('../..').UseFloatingResult;
|
|
4
|
+
export declare const Dialog: import('react').ComponentType<import('@revvue/embed').Public<import('@revvue/embed').EmbedOptions> & import('../..').FloatingComponentProps>;
|
|
5
|
+
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/bindings/dialog/dialog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAO7D,eAAO,MAAM,SAAS,oHAAoB,CAAC;AAC3C,eAAO,MAAM,MAAM,8IAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/bindings/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { createDrawer } from '@revvue/embed';
|
|
2
|
+
type DrawerHookProps = Parameters<typeof createDrawer>[0];
|
|
3
|
+
/**
|
|
4
|
+
* Identity props — when any of these change between renders the embed instance
|
|
5
|
+
* is torn down and re-created. Keep this in lockstep with the props the
|
|
6
|
+
* underlying `createDrawer` actually consumes; cosmetic React-only props
|
|
7
|
+
* (className/style) must not appear here.
|
|
8
|
+
*/
|
|
9
|
+
export declare function buildStableDeps(props: DrawerHookProps): (string | number | undefined)[];
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=build-stable-deps.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../src/bindings/drawer/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,mCAErD"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { createDrawer } from '@revvue/embed';
|
|
2
|
+
/** Props accepted by `useDrawer` and the `<Drawer>` component (embed-side). */
|
|
3
|
+
export type DrawerProps = Parameters<typeof createDrawer>[0];
|
|
4
|
+
/**
|
|
5
|
+
* Hook form. Use when you want full control over the trigger element.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* const drawer = useDrawer({ tenant, app: "chat", type: "drawer" });
|
|
10
|
+
* return <button {...drawer.getTriggerProps()}>Chat</button>;
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export declare const useDrawer: (props: import('@revvue/embed').Public<import('@revvue/embed').EmbedOptions>) => import('../..').UseFloatingResult;
|
|
14
|
+
/**
|
|
15
|
+
* Component form. Renders a `<button>` trigger that opens the drawer.
|
|
16
|
+
* Use `asChild` to delegate to your own button component (Radix-style).
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <Drawer tenant={tenant} app="chat" type="drawer">Chat</Drawer>
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const Drawer: import('react').ComponentType<import('@revvue/embed').Public<import('@revvue/embed').EmbedOptions> & import('../..').FloatingComponentProps>;
|
|
24
|
+
//# sourceMappingURL=drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/bindings/drawer/drawer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,+EAA+E;AAC/E,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAO7D;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,oHAAoB,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,8IAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/bindings/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/bindings/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { PopoverProps } from './popover';
|
|
2
|
+
/**
|
|
3
|
+
* Popover stable deps intentionally exclude button-styling props
|
|
4
|
+
* (label/icon/color/textColor/position) — those are not consumed by the
|
|
5
|
+
* embed factory in headless mode (`trigger: 'none'`); the React component
|
|
6
|
+
* renders its own trigger element. autoOpen/autoOpenDelay still affect the
|
|
7
|
+
* panel and are tracked.
|
|
8
|
+
*/
|
|
9
|
+
export declare function buildStableDeps(props: PopoverProps): (string | number | boolean | undefined)[];
|
|
10
|
+
//# sourceMappingURL=build-stable-deps.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../src/bindings/popover/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,6CAWlD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/bindings/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { createPopover } from '@revvue/embed';
|
|
2
|
+
type CreatePopoverProps = Parameters<typeof createPopover>[0];
|
|
3
|
+
/**
|
|
4
|
+
* Distributive variant of TS's built-in `Omit`. Required here because
|
|
5
|
+
* `CreatePopoverProps` is a union (chat vs. form), and a non-distributive
|
|
6
|
+
* `Omit<Union, K>` collapses to the *common* keys of the union — silently
|
|
7
|
+
* dropping discriminated fields like `formId` that only exist on one branch.
|
|
8
|
+
*/
|
|
9
|
+
type DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never;
|
|
10
|
+
type StrippedButtonKeys = "trigger" | "label" | "icon" | "color" | "textColor" | "position";
|
|
11
|
+
/**
|
|
12
|
+
* Popover props for the React API. Excludes button-styling and `trigger`
|
|
13
|
+
* options — the React component renders its own `<button>` element, so the
|
|
14
|
+
* embed factory is always invoked with `trigger: 'none'` and the
|
|
15
|
+
* label/icon/color/textColor/position fields would be silently ignored.
|
|
16
|
+
*
|
|
17
|
+
* `autoOpen` and `autoOpenDelay` are kept because they control panel behaviour
|
|
18
|
+
* that has nothing to do with the trigger.
|
|
19
|
+
*/
|
|
20
|
+
export type PopoverProps = DistributiveOmit<CreatePopoverProps, StrippedButtonKeys>;
|
|
21
|
+
/**
|
|
22
|
+
* Hook form. Use when you want to render your own trigger element.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* const popover = usePopover({ tenant, app: "chat", type: "popover" });
|
|
27
|
+
* return <button {...popover.getTriggerProps()}>Chat</button>;
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
export declare const usePopover: (props: PopoverProps) => import('../..').UseFloatingResult;
|
|
31
|
+
/**
|
|
32
|
+
* Component form. Renders a `<button>` trigger that toggles the popover.
|
|
33
|
+
* Use `asChild` to delegate to your own button (Radix-style).
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```tsx
|
|
37
|
+
* <Popover tenant={tenant} app="chat" type="popover">Chat</Popover>
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare const Popover: import('react').ComponentType<PopoverProps & import('../..').FloatingComponentProps>;
|
|
41
|
+
export {};
|
|
42
|
+
//# sourceMappingURL=popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/bindings/popover/popover.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9D;;;;;GAKG;AACH,KAAK,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,SAAS,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC;AAErF,KAAK,kBAAkB,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;AAE5F;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AAOpF;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,4DAAoB,CAAC;AAE5C;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,sFAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../src/bindings/widget/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,mCAEjD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/bindings/widget/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { createWidget } from '@revvue/embed';
|
|
2
|
+
export type WidgetProps = Parameters<typeof createWidget>[0];
|
|
3
|
+
/**
|
|
4
|
+
* Hook form. Returns a `containerRef` you must attach to a host element
|
|
5
|
+
* (typically a `<div>`) plus the imperative API.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* const widget = useWidget({ tenant, app: "chat", type: "widget" });
|
|
10
|
+
* return <div ref={widget.containerRef} className="my-host" />;
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export declare const useWidget: (props: import('@revvue/embed').Public<import('@revvue/embed').EmbedOptions>) => import('../..').UseWidgetResult;
|
|
14
|
+
/**
|
|
15
|
+
* Component form. Renders the host `<div>` for you and accepts `className`
|
|
16
|
+
* and `style` for layout.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <Widget tenant={tenant} app="chat" type="widget" className="h-full w-full" />
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const Widget: import('react').ComponentType<import('@revvue/embed').Public<import('@revvue/embed').EmbedOptions> & import('../..').WidgetComponentProps>;
|
|
24
|
+
//# sourceMappingURL=widget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../../src/bindings/widget/widget.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAO7D;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,kHAAoB,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,4IAAiB,CAAC"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAG3B,YAAY,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC"}
|