@revvue/embed-react 0.0.2-dev.3 → 0.1.0-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dialog.css +1 -1
- package/dist/css/drawer.css +1 -1
- package/dist/css/embed.css +1 -1
- package/dist/css/popover.css +1 -1
- package/dist/css/widget.css +1 -1
- package/dist/package.cjs +39 -10
- package/dist/package.mjs +39 -12
- package/dist/types/src/bindings/dialog/build-stable-deps.d.ts +2 -4
- package/dist/types/src/bindings/dialog/build-stable-deps.d.ts.map +1 -1
- package/dist/types/src/bindings/dialog/dialog.d.ts +12 -1
- package/dist/types/src/bindings/dialog/dialog.d.ts.map +1 -1
- package/dist/types/src/bindings/drawer/build-stable-deps.d.ts +2 -10
- package/dist/types/src/bindings/drawer/build-stable-deps.d.ts.map +1 -1
- package/dist/types/src/bindings/drawer/drawer.d.ts +13 -2
- package/dist/types/src/bindings/drawer/drawer.d.ts.map +1 -1
- package/dist/types/src/bindings/embed/embed.d.ts +5 -0
- package/dist/types/src/bindings/embed/embed.d.ts.map +1 -0
- package/dist/types/src/bindings/embed/index.d.ts +2 -0
- package/dist/types/src/bindings/embed/index.d.ts.map +1 -0
- package/dist/types/src/bindings/index.d.ts +1 -0
- package/dist/types/src/bindings/index.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/css/dialog.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #
|
|
1
|
+
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0000004d;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:9999px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s}.rvv-button--trigger:hover{background-color:var(--rvv-button-color);color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button--trigger-fixed{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-fixed[data-position=right]{right:24px}.rvv-button--trigger-fixed[data-position=left]{left:24px}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){padding:12px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button--trigger-fixed{bottom:16px}.rvv-button--trigger-fixed[data-position=right]{right:16px}.rvv-button--trigger-fixed[data-position=left]{left:16px}}dialog.rvv-dialog{border-radius:var(--radius-base);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);transition:opacity .2s ease,transform .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:0 0;border:none;margin:auto;padding:0;overflow:visible;transform:scale(.96)translateY(10px)}dialog.rvv-dialog[open]{opacity:1;transform:scale(1)translateY(0)}@starting-style{dialog.rvv-dialog[open]{opacity:0;transform:scale(.96)translateY(10px)}}dialog.rvv-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:#00000080}dialog.rvv-dialog[open]::backdrop{opacity:1}@starting-style{dialog.rvv-dialog[open]::backdrop{opacity:0}}.rvv-dialog-wrapper{--rvv-width:440px;--rvv-height:600px;background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);height:var(--rvv-height);width:var(--rvv-width);overflow:hidden}.rvv-dialog-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){dialog.rvv-dialog{border-radius:0;max-width:100vw;max-height:100dvh;margin:0}.rvv-dialog-wrapper{border-radius:0;width:100vw;height:100dvh}}
|
package/dist/css/drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #
|
|
1
|
+
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0000004d;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:9999px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s}.rvv-button--trigger:hover{background-color:var(--rvv-button-color);color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button--trigger-fixed{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-fixed[data-position=right]{right:24px}.rvv-button--trigger-fixed[data-position=left]{left:24px}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){padding:12px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button--trigger-fixed{bottom:16px}.rvv-button--trigger-fixed[data-position=right]{right:16px}.rvv-button--trigger-fixed[data-position=left]{left:16px}}.rvv-drawer{pointer-events:none;z-index:calc(var(--rvv-z-index) + 1);background-color:#0000;transition:background-color .35s;position:fixed;inset:0}.rvv-drawer.open{pointer-events:auto;background-color:#0006}.rvv-drawer.open .rvv-drawer-wrapper{transform:translate(0)}.rvv-drawer-wrapper{--rvv-width:420px;background-color:var(--rvv-color-background);width:var(--rvv-width);transition:transform .35s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;right:0;overflow:hidden;transform:translate(100%);box-shadow:-4px 0 24px #0000001f}.rvv-drawer-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){.rvv-drawer-wrapper{width:100vw}}
|
package/dist/css/embed.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #
|
|
1
|
+
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0000004d;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-widget{--rvv-width:100%;--rvv-height:500px;background-color:var(--rvv-color-background);height:var(--rvv-height);width:var(--rvv-width);position:relative;overflow:hidden}.rvv-widget iframe{border:none;width:100%;height:100%;display:block}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:9999px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s}.rvv-button--trigger:hover{background-color:var(--rvv-button-color);color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button--trigger-fixed{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-fixed[data-position=right]{right:24px}.rvv-button--trigger-fixed[data-position=left]{left:24px}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){padding:12px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button--trigger-fixed{bottom:16px}.rvv-button--trigger-fixed[data-position=right]{right:16px}.rvv-button--trigger-fixed[data-position=left]{left:16px}}.rvv-popover{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);opacity:0;transform-origin:100% 100%;max-width:100%;transition:opacity .15s ease,transform .15s ease,display allow-discrete .15s,overlay allow-discrete .15s;z-index:var(--rvv-z-index);display:none;position:fixed;bottom:84px;right:24px;overflow:hidden;transform:translateY(6px)scale(.99)}.rvv-popover.open{opacity:1;display:flex;transform:translateY(0)scale(1)}@starting-style{.rvv-popover.open{opacity:0;transform:translateY(6px)scale(.99)}}.rvv-popover iframe{border:none;width:100%;min-height:100%}.rvv-popover-wrapper{--rvv-width:400px;--rvv-height:600px;height:var(--rvv-height);min-width:360px;min-height:400px;width:var(--rvv-width)}@media (width<=480px){.rvv-popover{bottom:74px;right:16px}}.rvv-drawer{pointer-events:none;z-index:calc(var(--rvv-z-index) + 1);background-color:#0000;transition:background-color .35s;position:fixed;inset:0}.rvv-drawer.open{pointer-events:auto;background-color:#0006}.rvv-drawer.open .rvv-drawer-wrapper{transform:translate(0)}.rvv-drawer-wrapper{--rvv-width:420px;background-color:var(--rvv-color-background);width:var(--rvv-width);transition:transform .35s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;right:0;overflow:hidden;transform:translate(100%);box-shadow:-4px 0 24px #0000001f}.rvv-drawer-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){.rvv-drawer-wrapper{width:100vw}}dialog.rvv-dialog{border-radius:var(--radius-base);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);transition:opacity .2s ease,transform .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:0 0;border:none;margin:auto;padding:0;overflow:visible;transform:scale(.96)translateY(10px)}dialog.rvv-dialog[open]{opacity:1;transform:scale(1)translateY(0)}@starting-style{dialog.rvv-dialog[open]{opacity:0;transform:scale(.96)translateY(10px)}}dialog.rvv-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:#00000080}dialog.rvv-dialog[open]::backdrop{opacity:1}@starting-style{dialog.rvv-dialog[open]::backdrop{opacity:0}}.rvv-dialog-wrapper{--rvv-width:440px;--rvv-height:600px;background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);height:var(--rvv-height);width:var(--rvv-width);overflow:hidden}.rvv-dialog-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){dialog.rvv-dialog{border-radius:0;max-width:100vw;max-height:100dvh;margin:0}.rvv-dialog-wrapper{border-radius:0;width:100vw;height:100dvh}}
|
package/dist/css/popover.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #
|
|
1
|
+
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0000004d;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:9999px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s}.rvv-button--trigger:hover{background-color:var(--rvv-button-color);color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button--trigger-fixed{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-fixed[data-position=right]{right:24px}.rvv-button--trigger-fixed[data-position=left]{left:24px}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){padding:12px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button--trigger-fixed{bottom:16px}.rvv-button--trigger-fixed[data-position=right]{right:16px}.rvv-button--trigger-fixed[data-position=left]{left:16px}}.rvv-popover{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);opacity:0;transform-origin:100% 100%;max-width:100%;transition:opacity .15s ease,transform .15s ease,display allow-discrete .15s,overlay allow-discrete .15s;z-index:var(--rvv-z-index);display:none;position:fixed;bottom:84px;right:24px;overflow:hidden;transform:translateY(6px)scale(.99)}.rvv-popover.open{opacity:1;display:flex;transform:translateY(0)scale(1)}@starting-style{.rvv-popover.open{opacity:0;transform:translateY(6px)scale(.99)}}.rvv-popover iframe{border:none;width:100%;min-height:100%}.rvv-popover-wrapper{--rvv-width:400px;--rvv-height:600px;height:var(--rvv-height);min-width:360px;min-height:400px;width:var(--rvv-width)}@media (width<=480px){.rvv-popover{bottom:74px;right:16px}}
|
package/dist/css/widget.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #
|
|
1
|
+
@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0000004d;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-widget{--rvv-width:100%;--rvv-height:500px;background-color:var(--rvv-color-background);height:var(--rvv-height);width:var(--rvv-width);position:relative;overflow:hidden}.rvv-widget iframe{border:none;width:100%;height:100%;display:block}
|
package/dist/package.cjs
CHANGED
|
@@ -181,25 +181,24 @@ function buildStableDeps$3(props) {
|
|
|
181
181
|
props.app,
|
|
182
182
|
props.formId,
|
|
183
183
|
props.width,
|
|
184
|
-
props.height
|
|
184
|
+
props.height,
|
|
185
|
+
props.autoOpen,
|
|
186
|
+
props.autoOpenDelay
|
|
185
187
|
];
|
|
186
188
|
}
|
|
187
189
|
//#endregion
|
|
188
190
|
//#region src/bindings/dialog/dialog.ts
|
|
189
191
|
var bindings$3 = createFloatingBindings({
|
|
190
|
-
factory: (props) => (0, _revvue_embed.createDialog)(
|
|
192
|
+
factory: (props) => (0, _revvue_embed.createDialog)({
|
|
193
|
+
...props,
|
|
194
|
+
trigger: "none"
|
|
195
|
+
}),
|
|
191
196
|
buildStableDeps: buildStableDeps$3
|
|
192
197
|
});
|
|
193
198
|
var useDialog = bindings$3.useEmbed;
|
|
194
199
|
var Dialog = bindings$3.Embed;
|
|
195
200
|
//#endregion
|
|
196
201
|
//#region src/bindings/drawer/build-stable-deps.ts
|
|
197
|
-
/**
|
|
198
|
-
* Identity props — when any of these change between renders the embed instance
|
|
199
|
-
* is torn down and re-created. Keep this in lockstep with the props the
|
|
200
|
-
* underlying `createDrawer` actually consumes; cosmetic React-only props
|
|
201
|
-
* (className/style) must not appear here.
|
|
202
|
-
*/
|
|
203
202
|
function buildStableDeps$2(props) {
|
|
204
203
|
return [
|
|
205
204
|
props.tenantId,
|
|
@@ -207,13 +206,18 @@ function buildStableDeps$2(props) {
|
|
|
207
206
|
props.app,
|
|
208
207
|
props.formId,
|
|
209
208
|
props.width,
|
|
210
|
-
props.height
|
|
209
|
+
props.height,
|
|
210
|
+
props.autoOpen,
|
|
211
|
+
props.autoOpenDelay
|
|
211
212
|
];
|
|
212
213
|
}
|
|
213
214
|
//#endregion
|
|
214
215
|
//#region src/bindings/drawer/drawer.ts
|
|
215
216
|
var bindings$2 = createFloatingBindings({
|
|
216
|
-
factory: (props) => (0, _revvue_embed.createDrawer)(
|
|
217
|
+
factory: (props) => (0, _revvue_embed.createDrawer)({
|
|
218
|
+
...props,
|
|
219
|
+
trigger: "none"
|
|
220
|
+
}),
|
|
217
221
|
buildStableDeps: buildStableDeps$2
|
|
218
222
|
});
|
|
219
223
|
/**
|
|
@@ -237,6 +241,29 @@ var useDrawer = bindings$2.useEmbed;
|
|
|
237
241
|
*/
|
|
238
242
|
var Drawer = bindings$2.Embed;
|
|
239
243
|
//#endregion
|
|
244
|
+
//#region src/bindings/embed/embed.ts
|
|
245
|
+
function useEmbed(id) {
|
|
246
|
+
(0, react.useEffect)(() => {
|
|
247
|
+
let cancelled = false;
|
|
248
|
+
let unmount;
|
|
249
|
+
(0, _revvue_embed.createEmbed)(id).then((instance) => {
|
|
250
|
+
if (cancelled) {
|
|
251
|
+
instance.unmount();
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
unmount = instance.unmount;
|
|
255
|
+
});
|
|
256
|
+
return () => {
|
|
257
|
+
cancelled = true;
|
|
258
|
+
unmount?.();
|
|
259
|
+
};
|
|
260
|
+
}, [id]);
|
|
261
|
+
}
|
|
262
|
+
function Embed({ id }) {
|
|
263
|
+
useEmbed(id);
|
|
264
|
+
return null;
|
|
265
|
+
}
|
|
266
|
+
//#endregion
|
|
240
267
|
//#region src/bindings/popover/build-stable-deps.ts
|
|
241
268
|
/**
|
|
242
269
|
* Popover stable deps intentionally exclude button-styling props
|
|
@@ -328,9 +355,11 @@ var Widget = bindings.Embed;
|
|
|
328
355
|
//#endregion
|
|
329
356
|
exports.Dialog = Dialog;
|
|
330
357
|
exports.Drawer = Drawer;
|
|
358
|
+
exports.Embed = Embed;
|
|
331
359
|
exports.Popover = Popover;
|
|
332
360
|
exports.Widget = Widget;
|
|
333
361
|
exports.useDialog = useDialog;
|
|
334
362
|
exports.useDrawer = useDrawer;
|
|
363
|
+
exports.useEmbed = useEmbed;
|
|
335
364
|
exports.usePopover = usePopover;
|
|
336
365
|
exports.useWidget = useWidget;
|
package/dist/package.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { createDialog, createDrawer, createPopover, createWidget } from "@revvue/embed";
|
|
2
|
+
import { createDialog, createDrawer, createEmbed, createPopover, createWidget } from "@revvue/embed";
|
|
3
3
|
import { cloneElement, isValidElement, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
//#region src/internal/slot.tsx
|
|
@@ -180,25 +180,24 @@ function buildStableDeps$3(props) {
|
|
|
180
180
|
props.app,
|
|
181
181
|
props.formId,
|
|
182
182
|
props.width,
|
|
183
|
-
props.height
|
|
183
|
+
props.height,
|
|
184
|
+
props.autoOpen,
|
|
185
|
+
props.autoOpenDelay
|
|
184
186
|
];
|
|
185
187
|
}
|
|
186
188
|
//#endregion
|
|
187
189
|
//#region src/bindings/dialog/dialog.ts
|
|
188
190
|
var bindings$3 = createFloatingBindings({
|
|
189
|
-
factory: (props) => createDialog(
|
|
191
|
+
factory: (props) => createDialog({
|
|
192
|
+
...props,
|
|
193
|
+
trigger: "none"
|
|
194
|
+
}),
|
|
190
195
|
buildStableDeps: buildStableDeps$3
|
|
191
196
|
});
|
|
192
197
|
var useDialog = bindings$3.useEmbed;
|
|
193
198
|
var Dialog = bindings$3.Embed;
|
|
194
199
|
//#endregion
|
|
195
200
|
//#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
|
-
*/
|
|
202
201
|
function buildStableDeps$2(props) {
|
|
203
202
|
return [
|
|
204
203
|
props.tenantId,
|
|
@@ -206,13 +205,18 @@ function buildStableDeps$2(props) {
|
|
|
206
205
|
props.app,
|
|
207
206
|
props.formId,
|
|
208
207
|
props.width,
|
|
209
|
-
props.height
|
|
208
|
+
props.height,
|
|
209
|
+
props.autoOpen,
|
|
210
|
+
props.autoOpenDelay
|
|
210
211
|
];
|
|
211
212
|
}
|
|
212
213
|
//#endregion
|
|
213
214
|
//#region src/bindings/drawer/drawer.ts
|
|
214
215
|
var bindings$2 = createFloatingBindings({
|
|
215
|
-
factory: (props) => createDrawer(
|
|
216
|
+
factory: (props) => createDrawer({
|
|
217
|
+
...props,
|
|
218
|
+
trigger: "none"
|
|
219
|
+
}),
|
|
216
220
|
buildStableDeps: buildStableDeps$2
|
|
217
221
|
});
|
|
218
222
|
/**
|
|
@@ -236,6 +240,29 @@ var useDrawer = bindings$2.useEmbed;
|
|
|
236
240
|
*/
|
|
237
241
|
var Drawer = bindings$2.Embed;
|
|
238
242
|
//#endregion
|
|
243
|
+
//#region src/bindings/embed/embed.ts
|
|
244
|
+
function useEmbed(id) {
|
|
245
|
+
useEffect(() => {
|
|
246
|
+
let cancelled = false;
|
|
247
|
+
let unmount;
|
|
248
|
+
createEmbed(id).then((instance) => {
|
|
249
|
+
if (cancelled) {
|
|
250
|
+
instance.unmount();
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
unmount = instance.unmount;
|
|
254
|
+
});
|
|
255
|
+
return () => {
|
|
256
|
+
cancelled = true;
|
|
257
|
+
unmount?.();
|
|
258
|
+
};
|
|
259
|
+
}, [id]);
|
|
260
|
+
}
|
|
261
|
+
function Embed({ id }) {
|
|
262
|
+
useEmbed(id);
|
|
263
|
+
return null;
|
|
264
|
+
}
|
|
265
|
+
//#endregion
|
|
239
266
|
//#region src/bindings/popover/build-stable-deps.ts
|
|
240
267
|
/**
|
|
241
268
|
* Popover stable deps intentionally exclude button-styling props
|
|
@@ -325,4 +352,4 @@ var useWidget = bindings.useEmbed;
|
|
|
325
352
|
*/
|
|
326
353
|
var Widget = bindings.Embed;
|
|
327
354
|
//#endregion
|
|
328
|
-
export { Dialog, Drawer, Popover, Widget, useDialog, useDrawer, usePopover, useWidget };
|
|
355
|
+
export { Dialog, Drawer, Embed, Popover, Widget, useDialog, useDrawer, useEmbed, usePopover, useWidget };
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export declare function buildStableDeps(props: DialogHookProps): any[];
|
|
4
|
-
export {};
|
|
1
|
+
import { DialogProps } from './dialog';
|
|
2
|
+
export declare function buildStableDeps(props: DialogProps): any[];
|
|
5
3
|
//# sourceMappingURL=build-stable-deps.d.ts.map
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../../src/bindings/dialog/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,SAWjD"}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
import { createDialog } from '@revvue/embed';
|
|
2
|
-
|
|
2
|
+
type CreateDialogProps = Parameters<typeof createDialog>[0];
|
|
3
|
+
type DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never;
|
|
4
|
+
type StrippedButtonKeys = "trigger" | "label" | "icon" | "color" | "textColor" | "position";
|
|
5
|
+
/**
|
|
6
|
+
* Dialog props for the React API. Excludes CDN-only button-styling props —
|
|
7
|
+
* the React component renders its own `<button>` element, so the embed factory
|
|
8
|
+
* is always invoked with `trigger: 'none'`.
|
|
9
|
+
*
|
|
10
|
+
* `autoOpen` and `autoOpenDelay` are kept because they control panel behaviour.
|
|
11
|
+
*/
|
|
12
|
+
export type DialogProps = DistributiveOmit<CreateDialogProps, StrippedButtonKeys>;
|
|
3
13
|
export declare const useDialog: (props: any) => import('../..').UseFloatingResult;
|
|
4
14
|
export declare const Dialog: import('react').ComponentType<any>;
|
|
15
|
+
export {};
|
|
5
16
|
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -1 +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,
|
|
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,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5D,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;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;AAOlF,eAAO,MAAM,SAAS,mDAAoB,CAAC;AAC3C,eAAO,MAAM,MAAM,oCAAiB,CAAC"}
|
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
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): any[];
|
|
10
|
-
export {};
|
|
1
|
+
import { DrawerProps } from './drawer';
|
|
2
|
+
export declare function buildStableDeps(props: DrawerProps): any[];
|
|
11
3
|
//# sourceMappingURL=build-stable-deps.d.ts.map
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../../src/bindings/drawer/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,SAWjD"}
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import { createDrawer } from '@revvue/embed';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type CreateDrawerProps = Parameters<typeof createDrawer>[0];
|
|
3
|
+
type DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never;
|
|
4
|
+
type StrippedButtonKeys = "trigger" | "label" | "icon" | "color" | "textColor" | "position";
|
|
5
|
+
/**
|
|
6
|
+
* Props accepted by `useDrawer` and the `<Drawer>` component.
|
|
7
|
+
* Excludes CDN-only button-styling props — the React component renders its
|
|
8
|
+
* own `<button>` element, so the embed factory is always invoked with
|
|
9
|
+
* `trigger: 'none'`.
|
|
10
|
+
*
|
|
11
|
+
* `autoOpen` and `autoOpenDelay` are kept because they control panel behaviour.
|
|
12
|
+
*/
|
|
13
|
+
export type DrawerProps = DistributiveOmit<CreateDrawerProps, StrippedButtonKeys>;
|
|
4
14
|
/**
|
|
5
15
|
* Hook form. Use when you want full control over the trigger element.
|
|
6
16
|
*
|
|
@@ -21,4 +31,5 @@ export declare const useDrawer: (props: any) => import('../..').UseFloatingResul
|
|
|
21
31
|
* ```
|
|
22
32
|
*/
|
|
23
33
|
export declare const Drawer: import('react').ComponentType<any>;
|
|
34
|
+
export {};
|
|
24
35
|
//# sourceMappingURL=drawer.d.ts.map
|
|
@@ -1 +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
|
|
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,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5D,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;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;AAOlF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,mDAAoB,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,oCAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../../../../../src/bindings/embed/embed.ts"],"names":[],"mappings":"AAKA,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAkBzC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGlD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/bindings/embed/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
|
|
@@ -1 +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"}
|
|
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,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revvue/embed-react",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0-dev.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@revvue/embed": "0.0
|
|
38
|
+
"@revvue/embed": "0.1.0-dev.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@testing-library/jest-dom": "^6.6.3",
|