@frontify/fondue
Version:
Design system of Frontify
67 lines (66 loc) • 2.33 kB
JavaScript
import { jsxs as f, jsx as o } from "react/jsx-runtime";
import { useFocusRing as h } from "@react-aria/focus";
import { useRef as g } from "react";
import { FOCUS_STYLE as x } from "../../utilities/focusStyle.es.js";
import { merge as S } from "../../utilities/merge.es.js";
import { useScrollWrapper as E } from "./hooks/useScrollWrapper.es.js";
import { ScrollWrapperDirection as e, scrollWrapperDirections as W } from "./types.es.js";
const s = {
bottom: "linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)",
top: "linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)"
}, v = ({
tabindex: n = 0,
direction: r = e.Vertical,
children: d,
scrollShadows: l = !0,
"data-test-id": w = "scroll-wrapper"
}) => {
const t = g(null), [{ showTopShadow: c, showBottomShadow: p }, m] = E(t), { isFocusVisible: u, focusProps: b } = h(), a = r === e.Vertical || r === e.Both, i = t.current ? t.current.clientWidth + 8 : "100%";
return /* @__PURE__ */ f("div", { "data-test-id": w, className: "tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0", children: [
a && c && l && /* @__PURE__ */ o(
"div",
{
"data-test-id": "fondue-scrollwrapper-top-shadow",
className: "tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line",
style: {
background: s.top,
width: i
}
}
),
/* @__PURE__ */ o(
"div",
{
"data-test-id": "fondue-scrollwrapper-content",
ref: t,
tabIndex: n,
role: "region",
"aria-label": "Scrollable dialogue content",
className: S([
W[r],
"tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2",
u && x
]),
...m,
...b,
children: d
}
),
a && p && l && /* @__PURE__ */ o(
"div",
{
"data-test-id": "fondue-scrollwrapper-bottom-shadow",
className: "tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line",
style: {
background: s.bottom,
width: i
}
}
)
] });
};
v.displayName = "FondueScrollWrapper";
export {
v as ScrollWrapper
};
//# sourceMappingURL=ScrollWrapper.es.js.map