@cfx-dev/ui-components 5.0.20 → 5.0.21
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
|
|
1
|
+
@keyframes cfxui__Flyout__holder-appearance-rtl__3ccf2{0%{transform:translate(calc(var(--quant) * 2.5))}to{transform:translate(0)}}@keyframes cfxui__Flyout__holder-appearance-btu__84100{0%{transform:translateY(calc(var(--quant) * 2.5))}to{transform:translateY(0)}}@keyframes cfxui__Flyout__holder-disappearance-ltr__965dd{0%{transform:translate(0)}to{transform:translate(calc(var(--quant) * 2.5))}}@keyframes cfxui__Flyout__holder-disappearance-utb__94b61{0%{transform:translateY(0)}to{transform:translateY(calc(var(--quant) * 2.5))}}.cfxui__Flyout__root__eba04{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none;background-color:var(--color-overlay-backdrop-background)}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5 .cfxui__Flyout__content__04e42{width:100%;height:100%;overflow:hidden}@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__holder__d80b5{opacity:0;pointer-events:none;animation:cfxui__Flyout__holder-disappearance-utb__94b61 .2s ease}@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 .cfxui__Flyout__backdrop__57f9e{opacity:1;pointer-events:all}.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;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,23 +1,25 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import t from "react";
|
|
3
|
-
import { getBoxClassNames as
|
|
4
|
-
function
|
|
3
|
+
import { getBoxClassNames as l, getBoxStyles as f } from "../RSC/Box/Box.js";
|
|
4
|
+
function i(o) {
|
|
5
5
|
const {
|
|
6
6
|
children: e,
|
|
7
7
|
ref: s,
|
|
8
|
-
as: m = "div"
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
as: m = "div",
|
|
9
|
+
id: a
|
|
10
|
+
} = o, n = l(o), r = t.useMemo(() => f(o), [o]);
|
|
11
|
+
return /* @__PURE__ */ c(
|
|
11
12
|
m,
|
|
12
13
|
{
|
|
13
14
|
ref: s,
|
|
14
|
-
className:
|
|
15
|
-
style:
|
|
15
|
+
className: n,
|
|
16
|
+
style: r,
|
|
17
|
+
id: a,
|
|
16
18
|
children: e
|
|
17
19
|
}
|
|
18
20
|
);
|
|
19
21
|
}
|
|
20
|
-
const
|
|
22
|
+
const B = t.memo(i);
|
|
21
23
|
export {
|
|
22
|
-
|
|
24
|
+
B as default
|
|
23
25
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as t, jsxs as d } from "react/jsx-runtime";
|
|
2
2
|
import u from "react";
|
|
3
3
|
import { F as b } from "../../Combination-N-vN9BB-.js";
|
|
4
|
-
import
|
|
5
|
-
import { clsx as
|
|
4
|
+
import N from "../Button/Button.js";
|
|
5
|
+
import { clsx as l } from "../../utils/clsx.js";
|
|
6
6
|
import "../../utils/links.js";
|
|
7
|
-
import { Interactive as
|
|
7
|
+
import { Interactive as k } from "../Interactive/Interactive.js";
|
|
8
8
|
import { noop as C } from "../../utils/functional.js";
|
|
9
9
|
import "../../utils/hooks/useGlobalKeyboardEvent.js";
|
|
10
10
|
import { useKeyboardClose as v } from "../../utils/hooks/useKeyboardClose.js";
|
|
@@ -17,11 +17,9 @@ const O = "cfxui__Flyout__root__eba04", T = "cfxui__Flyout__backdrop__57f9e", L
|
|
|
17
17
|
header: E,
|
|
18
18
|
title: S,
|
|
19
19
|
closed: U,
|
|
20
|
-
"backdrop-disappearance": "cfxui__Flyout__backdrop-disappearance__bf898",
|
|
21
20
|
"holder-disappearance-utb": "cfxui__Flyout__holder-disappearance-utb__94b61",
|
|
22
21
|
"holder-disappearance-ltr": "cfxui__Flyout__holder-disappearance-ltr__965dd",
|
|
23
22
|
active: g,
|
|
24
|
-
"backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
|
|
25
23
|
mask: H,
|
|
26
24
|
"holder-appearance-btu": "cfxui__Flyout__holder-appearance-btu__84100",
|
|
27
25
|
"holder-appearance-rtl": "cfxui__Flyout__holder-appearance-rtl__3ccf2",
|
|
@@ -34,46 +32,46 @@ const O = "cfxui__Flyout__root__eba04", T = "cfxui__Flyout__backdrop__57f9e", L
|
|
|
34
32
|
function w(i) {
|
|
35
33
|
const {
|
|
36
34
|
disabled: o = !1,
|
|
37
|
-
size:
|
|
38
|
-
theme:
|
|
39
|
-
onClose:
|
|
35
|
+
size: s = "medium",
|
|
36
|
+
theme: c = "default",
|
|
37
|
+
onClose: a = C,
|
|
40
38
|
children: r,
|
|
41
39
|
holderClassName: m,
|
|
42
|
-
rootClassName:
|
|
43
|
-
maskClassName:
|
|
40
|
+
rootClassName: f,
|
|
41
|
+
maskClassName: p
|
|
44
42
|
} = i, h = z(Y), [y, x] = u.useState(!1);
|
|
45
43
|
u.useEffect(() => {
|
|
46
44
|
if (o)
|
|
47
45
|
return;
|
|
48
46
|
x(!0);
|
|
49
|
-
const
|
|
50
|
-
return
|
|
51
|
-
}, [o]), v(
|
|
52
|
-
const F =
|
|
47
|
+
const _ = document.getElementById(j);
|
|
48
|
+
return _ == null || _.classList.add(n), () => _ == null ? void 0 : _.classList.remove(n);
|
|
49
|
+
}, [o]), v(a);
|
|
50
|
+
const F = l(
|
|
53
51
|
e.root,
|
|
54
|
-
e[`size-${
|
|
55
|
-
e[`theme-${
|
|
52
|
+
e[`size-${s}`],
|
|
53
|
+
e[`theme-${c}`],
|
|
56
54
|
{
|
|
57
55
|
[e.active]: !o,
|
|
58
56
|
[e.closed]: y && o
|
|
59
57
|
},
|
|
60
|
-
|
|
58
|
+
f
|
|
61
59
|
);
|
|
62
|
-
return /* @__PURE__ */
|
|
63
|
-
/* @__PURE__ */
|
|
64
|
-
/* @__PURE__ */
|
|
60
|
+
return /* @__PURE__ */ t(h, { children: /* @__PURE__ */ d("div", { className: F, children: [
|
|
61
|
+
/* @__PURE__ */ t(k, { showPointer: !1, className: e.backdrop, onClick: a }),
|
|
62
|
+
/* @__PURE__ */ t("div", { className: l(e.mask, p), children: /* @__PURE__ */ t("div", { className: l(e.holder, m), children: /* @__PURE__ */ t(b, { disabled: o, className: e.content, children: r }) }) })
|
|
65
63
|
] }) });
|
|
66
64
|
}
|
|
67
65
|
w.Header = function(o) {
|
|
68
66
|
const {
|
|
69
|
-
onClose:
|
|
70
|
-
children:
|
|
71
|
-
ref:
|
|
67
|
+
onClose: s,
|
|
68
|
+
children: c,
|
|
69
|
+
ref: a,
|
|
72
70
|
className: r
|
|
73
71
|
} = o;
|
|
74
|
-
return /* @__PURE__ */ d("div", { ref:
|
|
75
|
-
/* @__PURE__ */
|
|
76
|
-
!!
|
|
72
|
+
return /* @__PURE__ */ d("div", { ref: a, className: l(e.header, r), children: [
|
|
73
|
+
/* @__PURE__ */ t("div", { className: e.title, children: c }),
|
|
74
|
+
!!s && /* @__PURE__ */ t(N, { icon: "Close", onClick: s })
|
|
77
75
|
] });
|
|
78
76
|
};
|
|
79
77
|
export {
|
|
@@ -18,6 +18,7 @@ export interface BoxProps extends MPProps {
|
|
|
18
18
|
style?: React.CSSProperties;
|
|
19
19
|
ref?: React.Ref<HTMLDivElement>;
|
|
20
20
|
as?: React.ElementType;
|
|
21
|
+
id?: string;
|
|
21
22
|
}
|
|
22
23
|
export declare const stringPropFormater: (val: string) => string;
|
|
23
24
|
export declare function getBoxClassNames(props: BoxProps): string;
|