@deriv-web-design/ui 0.1.29 → 0.1.30
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/block-registry.json +2 -2
- package/dist/index.css +2 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +59 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +59 -17
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3857,6 +3857,7 @@ var Navbar = ({
|
|
|
3857
3857
|
const [mobileOpen, setMobileOpen] = (0, import_react17.useState)(false);
|
|
3858
3858
|
const [mobileExpanded, setMobileExpanded] = (0, import_react17.useState)(null);
|
|
3859
3859
|
const [scrolled, setScrolled] = (0, import_react17.useState)(false);
|
|
3860
|
+
const [isDesktop, setIsDesktop] = (0, import_react17.useState)(false);
|
|
3860
3861
|
const [langDropdownOpen, setLangDropdownOpen] = (0, import_react17.useState)(false);
|
|
3861
3862
|
const [mobileLangOpen, setMobileLangOpen] = (0, import_react17.useState)(false);
|
|
3862
3863
|
const hoverTimeoutRef = (0, import_react17.useRef)(null);
|
|
@@ -3878,6 +3879,13 @@ var Navbar = ({
|
|
|
3878
3879
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
3879
3880
|
return () => window.removeEventListener("scroll", onScroll);
|
|
3880
3881
|
}, []);
|
|
3882
|
+
(0, import_react17.useEffect)(() => {
|
|
3883
|
+
const mq = window.matchMedia("(min-width: 992px)");
|
|
3884
|
+
const onChange = () => setIsDesktop(mq.matches);
|
|
3885
|
+
onChange();
|
|
3886
|
+
mq.addEventListener("change", onChange);
|
|
3887
|
+
return () => mq.removeEventListener("change", onChange);
|
|
3888
|
+
}, []);
|
|
3881
3889
|
(0, import_react17.useEffect)(() => {
|
|
3882
3890
|
const onKey = (e) => {
|
|
3883
3891
|
if (e.key === "Escape") {
|
|
@@ -3942,6 +3950,8 @@ var Navbar = ({
|
|
|
3942
3950
|
hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
|
|
3943
3951
|
}, [clearHoverTimeout]);
|
|
3944
3952
|
const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
|
|
3953
|
+
const pillCopyInert = !scrolled;
|
|
3954
|
+
const outerCopyInert = scrolled && isDesktop;
|
|
3945
3955
|
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
3946
3956
|
"nav",
|
|
3947
3957
|
{
|
|
@@ -3949,9 +3959,27 @@ var Navbar = ({
|
|
|
3949
3959
|
...props,
|
|
3950
3960
|
children: [
|
|
3951
3961
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "navbar__bar", children: [
|
|
3952
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3962
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3963
|
+
"a",
|
|
3964
|
+
{
|
|
3965
|
+
href: logoHref,
|
|
3966
|
+
className: "navbar__logo",
|
|
3967
|
+
"aria-label": "Home",
|
|
3968
|
+
inert: outerCopyInert || void 0,
|
|
3969
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: resolvedLogo, alt: "Logo" })
|
|
3970
|
+
}
|
|
3971
|
+
),
|
|
3953
3972
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "navbar__pill", children: [
|
|
3954
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3973
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3974
|
+
"a",
|
|
3975
|
+
{
|
|
3976
|
+
href: logoHref,
|
|
3977
|
+
className: "navbar__pill-logo",
|
|
3978
|
+
"aria-label": "Home",
|
|
3979
|
+
inert: pillCopyInert || void 0,
|
|
3980
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" })
|
|
3981
|
+
}
|
|
3982
|
+
),
|
|
3955
3983
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "navbar__nav-group", children: [
|
|
3956
3984
|
navItems.map((item) => {
|
|
3957
3985
|
if (item.external) {
|
|
@@ -4019,10 +4047,17 @@ var Navbar = ({
|
|
|
4019
4047
|
}
|
|
4020
4048
|
)
|
|
4021
4049
|
] }),
|
|
4022
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4050
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4051
|
+
"div",
|
|
4052
|
+
{
|
|
4053
|
+
className: "navbar__pill-actions",
|
|
4054
|
+
inert: pillCopyInert || void 0,
|
|
4055
|
+
children: [
|
|
4056
|
+
loginHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
|
|
4057
|
+
ctaHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
4058
|
+
]
|
|
4059
|
+
}
|
|
4060
|
+
)
|
|
4026
4061
|
] }) }),
|
|
4027
4062
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4028
4063
|
DropdownPanel,
|
|
@@ -4068,17 +4103,24 @@ var Navbar = ({
|
|
|
4068
4103
|
)
|
|
4069
4104
|
}
|
|
4070
4105
|
) }),
|
|
4071
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4072
|
-
|
|
4073
|
-
|
|
4074
|
-
|
|
4075
|
-
|
|
4076
|
-
|
|
4077
|
-
|
|
4078
|
-
|
|
4079
|
-
|
|
4080
|
-
|
|
4081
|
-
|
|
4106
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4107
|
+
"div",
|
|
4108
|
+
{
|
|
4109
|
+
className: "navbar__actions",
|
|
4110
|
+
inert: outerCopyInert || void 0,
|
|
4111
|
+
children: [
|
|
4112
|
+
loginHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4113
|
+
Button,
|
|
4114
|
+
{
|
|
4115
|
+
colorScheme: theme === "dark" ? "white" : "black",
|
|
4116
|
+
variant: "secondary",
|
|
4117
|
+
label: loginLabel
|
|
4118
|
+
}
|
|
4119
|
+
) }),
|
|
4120
|
+
ctaHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
4121
|
+
]
|
|
4122
|
+
}
|
|
4123
|
+
),
|
|
4082
4124
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "navbar__mobile-actions", children: [
|
|
4083
4125
|
loginHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4084
4126
|
Button,
|