@cfx-dev/ui-components 5.0.17 → 5.0.19
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes cfxui__Flyout__backdrop-appearance__d9564{0%{opacity:0}to{opacity:1}}@keyframes cfxui__Flyout__backdrop-disappearance__bf898{0%{opacity:1}to{opacity:0}}@keyframes cfxui__Flyout__holder-appearance-rtl__3ccf2{0%{opacity:0;transform:translate(calc(var(--quant) * 2.5))}to{opacity:1;transform:translate(0)}}@keyframes cfxui__Flyout__holder-appearance-btu__84100{0%{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}to{opacity:1;transform:translateY(0)}}@keyframes cfxui__Flyout__holder-
|
|
1
|
+
@keyframes cfxui__Flyout__backdrop-appearance__d9564{0%{opacity:0}to{opacity:1}}@keyframes cfxui__Flyout__backdrop-disappearance__bf898{0%{opacity:1}to{opacity:0}}@keyframes cfxui__Flyout__holder-appearance-rtl__3ccf2{0%{opacity:0;transform:translate(calc(var(--quant) * 2.5))}to{opacity:1;transform:translate(0)}}@keyframes cfxui__Flyout__holder-appearance-btu__84100{0%{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}to{opacity:1;transform:translateY(0)}}@keyframes cfxui__Flyout__holder-disappearance-ltr__965dd{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(calc(var(--quant) * 2.5))}}@keyframes cfxui__Flyout__holder-disappearance-utb__94b61{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}}.cfxui__Flyout__root__eba04{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{position:fixed;top:0;right:0;bottom:0;left:0}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{opacity:0;position:fixed;top:0;right:0;bottom:0;left:0}@media (min-width: 640px){.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{inset:0 0 0 calc(100vw - 420px);border-radius:var(--border-radius-medium) 0 0 var(--border-radius-medium)}}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--quant) * 2)}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009 .cfxui__Flyout__title__b235a{flex-grow:1;width:1px;display:flex;align-items:center;gap:calc(var(--quant) * 2);font-size:var(--font-size-xxlarge)}.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__backdrop__57f9e{opacity:0;pointer-events:none;animation:cfxui__Flyout__backdrop-disappearance__bf898 .2s ease}.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__holder__d80b5{opacity:0;transform:translate(calc(var(--quant) * 2.5));pointer-events:none;animation:cfxui__Flyout__holder-disappearance-utb__94b61 .2s ease}.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__holder__d80b5 .cfxui__Flyout__content__04e42{width:100%;height:100%;overflow:hidden}@media (min-width: 640px){.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__holder__d80b5{animation:cfxui__Flyout__holder-disappearance-ltr__965dd .2s ease}}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29{opacity:1}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__backdrop__57f9e{opacity:1;pointer-events:all;animation:cfxui__Flyout__backdrop-appearance__d9564 .2s ease;background-color:var(--color-overlay-backdrop-background)}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__mask__72713{opacity:1}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{opacity:1;transform:translate(0);pointer-events:all;animation:cfxui__Flyout__holder-appearance-btu__84100 .2s ease;background:rgba(var(--color-bg),1);border-radius:0}@media (min-width: 640px){.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{animation:cfxui__Flyout__holder-appearance-rtl__3ccf2 .2s ease}}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452{--offset-flyout: calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--quant) * 4);top:var(--offset-flyout, initial);bottom:var(--offset-flyout, initial);padding:calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc((100vw - (var(--width) - var(--offset-safezone) * 2) * 1) * .5) calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc(var(--quant) * 6);border-radius:var(--border-radius-large) 0 0 var(--border-radius-large);box-shadow:0 0 0 calc(var(--quant) * .25) var(--color-flyout-holder-border) inset,var(--shadow-large, initial)}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452 .cfxui__Flyout__mask__72713{--mask-right: var(--viewport-right, initial);--mask-right-offset: calc(var(--mask-right, initial) - var(--quant) * 4);position:fixed;top:0;right:0;bottom:0;left:0;mask:linear-gradient(90deg,#000 0%,#000 var(--mask-right-offset, initial),transparent var(--mask-right, initial),transparent 100%);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-medium__1fc09 .cfxui__Flyout__holder__d80b5{left:32vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-small__038a5 .cfxui__Flyout__holder__d80b5{left:48vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-xsmall__839e8 .cfxui__Flyout__holder__d80b5{left:64vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-xxsmall__33712 .cfxui__Flyout__holder__d80b5{left:80vw;padding:calc(var(--quant) * 5) calc(var(--quant) * 3.75)}
|
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
import { jsx as _, jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { F as
|
|
4
|
-
import
|
|
1
|
+
import { jsx as _, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import u from "react";
|
|
3
|
+
import { F as b } from "../../Combination-N-vN9BB-.js";
|
|
4
|
+
import k from "../Button/Button.js";
|
|
5
5
|
import { clsx as c } from "../../utils/clsx.js";
|
|
6
6
|
import "../../utils/links.js";
|
|
7
|
-
import { Interactive as
|
|
8
|
-
import { noop as
|
|
7
|
+
import { Interactive as N } from "../Interactive/Interactive.js";
|
|
8
|
+
import { noop as C } from "../../utils/functional.js";
|
|
9
9
|
import "../../utils/hooks/useGlobalKeyboardEvent.js";
|
|
10
|
-
import { useKeyboardClose as
|
|
11
|
-
import { useOutlet as
|
|
12
|
-
const
|
|
13
|
-
root:
|
|
14
|
-
backdrop:
|
|
10
|
+
import { useKeyboardClose as v } from "../../utils/hooks/useKeyboardClose.js";
|
|
11
|
+
import { useOutlet as z } from "../../utils/hooks/useOutlet.js";
|
|
12
|
+
const O = "cfxui__Flyout__root__eba04", T = "cfxui__Flyout__backdrop__57f9e", L = "cfxui__Flyout__holder__d80b5", I = "cfxui__Flyout__header__40009", E = "cfxui__Flyout__title__b235a", S = "cfxui__Flyout__closed__aa9a7", U = "cfxui__Flyout__content__04e42", g = "cfxui__Flyout__active__14a29", H = "cfxui__Flyout__mask__72713", e = {
|
|
13
|
+
root: O,
|
|
14
|
+
backdrop: T,
|
|
15
|
+
holder: L,
|
|
16
|
+
header: I,
|
|
17
|
+
title: E,
|
|
18
|
+
closed: S,
|
|
15
19
|
"backdrop-disappearance": "cfxui__Flyout__backdrop-disappearance__bf898",
|
|
16
|
-
holder:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
header: T,
|
|
21
|
-
title: I,
|
|
22
|
-
active: E,
|
|
20
|
+
"holder-disappearance-utb": "cfxui__Flyout__holder-disappearance-utb__94b61",
|
|
21
|
+
content: U,
|
|
22
|
+
"holder-disappearance-ltr": "cfxui__Flyout__holder-disappearance-ltr__965dd",
|
|
23
|
+
active: g,
|
|
23
24
|
"backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
|
|
24
|
-
mask:
|
|
25
|
+
mask: H,
|
|
25
26
|
"holder-appearance-btu": "cfxui__Flyout__holder-appearance-btu__84100",
|
|
26
27
|
"holder-appearance-rtl": "cfxui__Flyout__holder-appearance-rtl__3ccf2",
|
|
27
28
|
"theme-legacy": "cfxui__Flyout__theme-legacy__a3452",
|
|
@@ -29,53 +30,55 @@ const v = "cfxui__Flyout__root__eba04", z = "cfxui__Flyout__backdrop__57f9e", O
|
|
|
29
30
|
"size-small": "cfxui__Flyout__size-small__038a5",
|
|
30
31
|
"size-xsmall": "cfxui__Flyout__size-xsmall__839e8",
|
|
31
32
|
"size-xxsmall": "cfxui__Flyout__size-xxsmall__33712"
|
|
32
|
-
},
|
|
33
|
-
function
|
|
33
|
+
}, Y = "flyout-outlet", j = "cfxui-root", n = "shrink";
|
|
34
|
+
function w(i) {
|
|
34
35
|
const {
|
|
35
36
|
disabled: o = !1,
|
|
36
37
|
size: a = "medium",
|
|
37
|
-
theme:
|
|
38
|
-
onClose:
|
|
39
|
-
children:
|
|
38
|
+
theme: l = "default",
|
|
39
|
+
onClose: s = C,
|
|
40
|
+
children: r,
|
|
40
41
|
holderClassName: m,
|
|
41
|
-
rootClassName:
|
|
42
|
-
maskClassName:
|
|
43
|
-
} = i,
|
|
44
|
-
|
|
42
|
+
rootClassName: p,
|
|
43
|
+
maskClassName: f
|
|
44
|
+
} = i, h = z(Y), [y, x] = u.useState(!1);
|
|
45
|
+
u.useEffect(() => {
|
|
45
46
|
if (o)
|
|
46
47
|
return;
|
|
47
|
-
|
|
48
|
+
x(!0);
|
|
49
|
+
const t = document.getElementById(j);
|
|
48
50
|
return t == null || t.classList.add(n), () => t == null ? void 0 : t.classList.remove(n);
|
|
49
|
-
}, [o]),
|
|
50
|
-
const
|
|
51
|
+
}, [o]), v(s);
|
|
52
|
+
const F = c(
|
|
51
53
|
e.root,
|
|
52
54
|
e[`size-${a}`],
|
|
53
|
-
e[`theme-${
|
|
55
|
+
e[`theme-${l}`],
|
|
54
56
|
{
|
|
55
|
-
[e.active]: !o
|
|
57
|
+
[e.active]: !o,
|
|
58
|
+
[e.closed]: y && o
|
|
56
59
|
},
|
|
57
|
-
|
|
60
|
+
p
|
|
58
61
|
);
|
|
59
|
-
return /* @__PURE__ */ _(
|
|
60
|
-
/* @__PURE__ */ _(
|
|
61
|
-
/* @__PURE__ */ _("div", { className: c(e.mask,
|
|
62
|
+
return /* @__PURE__ */ _(h, { children: /* @__PURE__ */ d("div", { className: F, children: [
|
|
63
|
+
/* @__PURE__ */ _(N, { showPointer: !1, className: e.backdrop, onClick: s }),
|
|
64
|
+
/* @__PURE__ */ _("div", { className: c(e.mask, f), children: /* @__PURE__ */ _("div", { className: c(e.holder, m), children: /* @__PURE__ */ _(b, { disabled: o, className: e.content, children: r }) }) })
|
|
62
65
|
] }) });
|
|
63
66
|
}
|
|
64
|
-
|
|
67
|
+
w.Header = function(o) {
|
|
65
68
|
const {
|
|
66
69
|
onClose: a,
|
|
67
|
-
children:
|
|
68
|
-
ref:
|
|
69
|
-
className:
|
|
70
|
+
children: l,
|
|
71
|
+
ref: s,
|
|
72
|
+
className: r
|
|
70
73
|
} = o;
|
|
71
|
-
return /* @__PURE__ */
|
|
72
|
-
/* @__PURE__ */ _("div", { className: e.title, children:
|
|
73
|
-
!!a && /* @__PURE__ */ _(
|
|
74
|
+
return /* @__PURE__ */ d("div", { ref: s, className: c(e.header, r), children: [
|
|
75
|
+
/* @__PURE__ */ _("div", { className: e.title, children: l }),
|
|
76
|
+
!!a && /* @__PURE__ */ _(k, { icon: "Close", onClick: a })
|
|
74
77
|
] });
|
|
75
78
|
};
|
|
76
79
|
export {
|
|
77
|
-
|
|
78
|
-
|
|
80
|
+
Y as FLYOUT_OUTLET_ID,
|
|
81
|
+
j as FLYOUT_ROOT_ID,
|
|
79
82
|
n as FLYOUT_ROOT_SHRINK_CLASSNAME,
|
|
80
|
-
|
|
83
|
+
w as Flyout
|
|
81
84
|
};
|