@payfit/unity-components
Version:
82 lines (81 loc) • 2.63 kB
JavaScript
import { useLayoutEffect as e, useRef as t, useState as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
//#region src/components/app-top-bar/AppTopBar.tsx
var o = "--uy-app-layout-header-sticky-offset", s = "Application top bar", c = r({ slots: {
root: "uy:contents",
sentinel: "uy:pointer-events-none uy:h-px uy:w-full uy:-mb-px uy:opacity-0",
header: [
"uy:sticky uy:top-(--uy-app-layout-header-sticky-offset) uy:z-10",
"uy:flex uy:min-h-7.5 uy:w-full uy:items-center uy:justify-between",
"uy:gap-200 uy:bg-canvas uy:pl-150 uy:py-50 uy:pr-250",
"uy:transition-shadow uy:duration-200 uy:ease-out",
"uy:[clip-path:inset(0_0_-100px_0)]",
"uy:data-[stuck=true]:shadow-[0_2px_8px_-1px_var(--uy-color-utility-shadow-200)]"
],
search: "uy:min-w-0 uy:shrink",
actions: "uy:flex uy:min-w-0 uy:flex-1 uy:items-center uy:justify-end uy:gap-100",
profile: "uy:ml-auto uy:flex uy:shrink-0 uy:items-center"
} }), l = (e) => {
let t = getComputedStyle(e).getPropertyValue(o).trim(), n = Number.parseFloat(t);
return Number.isFinite(n) ? n : 0;
}, u = (e) => {
let t = e;
for (; t;) {
if (t.style.getPropertyValue(o)) return t;
t = t.parentElement;
}
return null;
}, d = ({ searchSlot: r, actionsSlot: o, profileMenuSlot: d, "aria-label": f = s }) => {
let [p, m] = n(!1), h = t(null), { root: g, sentinel: _, header: v, search: y, actions: b, profile: x } = c();
return e(() => {
let e = h.current;
if (!e || typeof IntersectionObserver > "u") return;
let t, n = () => {
t?.disconnect(), t = new IntersectionObserver(([e]) => {
m(e ? !e.isIntersecting : !1);
}, {
rootMargin: `-${l(e)}px 0px 0px 0px`,
threshold: 0
}), t.observe(e);
};
n();
let r = u(e), i = r ? new MutationObserver(n) : void 0;
return r && i && i.observe(r, {
attributes: !0,
attributeFilter: ["style"]
}), () => {
t?.disconnect(), i?.disconnect();
};
}, []), /* @__PURE__ */ a("div", {
className: g(),
"data-unity-component": "AppTopBar",
"data-dd-privacy": "allow",
children: [/* @__PURE__ */ i("div", {
ref: h,
"aria-hidden": !0,
className: _()
}), /* @__PURE__ */ a("header", {
"aria-label": f,
className: v(),
"data-stuck": p || void 0,
children: [
r && /* @__PURE__ */ i("div", {
className: y(),
children: r
}),
o && /* @__PURE__ */ i("div", {
className: b(),
children: o
}),
/* @__PURE__ */ i("div", {
className: x(),
children: d
})
]
})]
});
};
d.displayName = "AppTopBar";
//#endregion
export { d as AppTopBar };