@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.mjs
CHANGED
|
@@ -3740,6 +3740,7 @@ var Navbar = ({
|
|
|
3740
3740
|
const [mobileOpen, setMobileOpen] = useState11(false);
|
|
3741
3741
|
const [mobileExpanded, setMobileExpanded] = useState11(null);
|
|
3742
3742
|
const [scrolled, setScrolled] = useState11(false);
|
|
3743
|
+
const [isDesktop, setIsDesktop] = useState11(false);
|
|
3743
3744
|
const [langDropdownOpen, setLangDropdownOpen] = useState11(false);
|
|
3744
3745
|
const [mobileLangOpen, setMobileLangOpen] = useState11(false);
|
|
3745
3746
|
const hoverTimeoutRef = useRef11(null);
|
|
@@ -3761,6 +3762,13 @@ var Navbar = ({
|
|
|
3761
3762
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
3762
3763
|
return () => window.removeEventListener("scroll", onScroll);
|
|
3763
3764
|
}, []);
|
|
3765
|
+
useEffect9(() => {
|
|
3766
|
+
const mq = window.matchMedia("(min-width: 992px)");
|
|
3767
|
+
const onChange = () => setIsDesktop(mq.matches);
|
|
3768
|
+
onChange();
|
|
3769
|
+
mq.addEventListener("change", onChange);
|
|
3770
|
+
return () => mq.removeEventListener("change", onChange);
|
|
3771
|
+
}, []);
|
|
3764
3772
|
useEffect9(() => {
|
|
3765
3773
|
const onKey = (e) => {
|
|
3766
3774
|
if (e.key === "Escape") {
|
|
@@ -3825,6 +3833,8 @@ var Navbar = ({
|
|
|
3825
3833
|
hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
|
|
3826
3834
|
}, [clearHoverTimeout]);
|
|
3827
3835
|
const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
|
|
3836
|
+
const pillCopyInert = !scrolled;
|
|
3837
|
+
const outerCopyInert = scrolled && isDesktop;
|
|
3828
3838
|
return /* @__PURE__ */ jsxs29(
|
|
3829
3839
|
"nav",
|
|
3830
3840
|
{
|
|
@@ -3832,9 +3842,27 @@ var Navbar = ({
|
|
|
3832
3842
|
...props,
|
|
3833
3843
|
children: [
|
|
3834
3844
|
/* @__PURE__ */ jsxs29("div", { className: "navbar__bar", children: [
|
|
3835
|
-
/* @__PURE__ */ jsx32(
|
|
3845
|
+
/* @__PURE__ */ jsx32(
|
|
3846
|
+
"a",
|
|
3847
|
+
{
|
|
3848
|
+
href: logoHref,
|
|
3849
|
+
className: "navbar__logo",
|
|
3850
|
+
"aria-label": "Home",
|
|
3851
|
+
inert: outerCopyInert || void 0,
|
|
3852
|
+
children: /* @__PURE__ */ jsx32("img", { src: resolvedLogo, alt: "Logo" })
|
|
3853
|
+
}
|
|
3854
|
+
),
|
|
3836
3855
|
/* @__PURE__ */ jsx32("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ jsxs29("div", { className: "navbar__pill", children: [
|
|
3837
|
-
/* @__PURE__ */ jsx32(
|
|
3856
|
+
/* @__PURE__ */ jsx32(
|
|
3857
|
+
"a",
|
|
3858
|
+
{
|
|
3859
|
+
href: logoHref,
|
|
3860
|
+
className: "navbar__pill-logo",
|
|
3861
|
+
"aria-label": "Home",
|
|
3862
|
+
inert: pillCopyInert || void 0,
|
|
3863
|
+
children: /* @__PURE__ */ jsx32("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" })
|
|
3864
|
+
}
|
|
3865
|
+
),
|
|
3838
3866
|
/* @__PURE__ */ jsxs29("div", { className: "navbar__nav-group", children: [
|
|
3839
3867
|
navItems.map((item) => {
|
|
3840
3868
|
if (item.external) {
|
|
@@ -3902,10 +3930,17 @@ var Navbar = ({
|
|
|
3902
3930
|
}
|
|
3903
3931
|
)
|
|
3904
3932
|
] }),
|
|
3905
|
-
/* @__PURE__ */ jsxs29(
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3933
|
+
/* @__PURE__ */ jsxs29(
|
|
3934
|
+
"div",
|
|
3935
|
+
{
|
|
3936
|
+
className: "navbar__pill-actions",
|
|
3937
|
+
inert: pillCopyInert || void 0,
|
|
3938
|
+
children: [
|
|
3939
|
+
loginHref && /* @__PURE__ */ jsx32("a", { href: loginHref, children: /* @__PURE__ */ jsx32(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
|
|
3940
|
+
ctaHref && /* @__PURE__ */ jsx32("a", { href: ctaHref, children: /* @__PURE__ */ jsx32(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
3941
|
+
]
|
|
3942
|
+
}
|
|
3943
|
+
)
|
|
3909
3944
|
] }) }),
|
|
3910
3945
|
/* @__PURE__ */ jsx32(AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ jsx32(
|
|
3911
3946
|
DropdownPanel,
|
|
@@ -3951,17 +3986,24 @@ var Navbar = ({
|
|
|
3951
3986
|
)
|
|
3952
3987
|
}
|
|
3953
3988
|
) }),
|
|
3954
|
-
/* @__PURE__ */ jsxs29(
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
|
|
3964
|
-
|
|
3989
|
+
/* @__PURE__ */ jsxs29(
|
|
3990
|
+
"div",
|
|
3991
|
+
{
|
|
3992
|
+
className: "navbar__actions",
|
|
3993
|
+
inert: outerCopyInert || void 0,
|
|
3994
|
+
children: [
|
|
3995
|
+
loginHref && /* @__PURE__ */ jsx32("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ jsx32(
|
|
3996
|
+
Button,
|
|
3997
|
+
{
|
|
3998
|
+
colorScheme: theme === "dark" ? "white" : "black",
|
|
3999
|
+
variant: "secondary",
|
|
4000
|
+
label: loginLabel
|
|
4001
|
+
}
|
|
4002
|
+
) }),
|
|
4003
|
+
ctaHref && /* @__PURE__ */ jsx32("a", { href: ctaHref, children: /* @__PURE__ */ jsx32(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
4004
|
+
]
|
|
4005
|
+
}
|
|
4006
|
+
),
|
|
3965
4007
|
/* @__PURE__ */ jsxs29("div", { className: "navbar__mobile-actions", children: [
|
|
3966
4008
|
loginHref && /* @__PURE__ */ jsx32("a", { href: loginHref, children: /* @__PURE__ */ jsx32(
|
|
3967
4009
|
Button,
|