@payfit/unity-components
Version:
76 lines (75 loc) • 2.56 kB
JavaScript
import { SkipLink as e, SkipLinks as t } from "../skip-links/SkipLinks.js";
import { FunnelLayoutProvider as n } from "./FunnelLayout.context.js";
import { forwardRef as r, useMemo as i } from "react";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { FormattedMessage as c } from "react-intl";
import { useId as l } from "react-aria/useId";
//#region src/components/funnel-layout/FunnelLayout.tsx
var u = a({ base: "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto" }), d = r(({ children: r, header: a, ...d }, f) => {
let p = l(), m = i(() => ({
mainContentId: `funnel-main-content-${p}`,
topbarId: `funnel-top-bar-${p}`,
asideId: `funnel-complementary-left-content-${p}`,
funnelTitleId: `funnel-title-${p}`,
funnelDescriptionId: `funnel-description-${p}`,
funnelStatusId: `funnel-status-${p}`,
footerId: `funnel-footer-${p}`
}), [p]);
return /* @__PURE__ */ o(n, {
ids: m,
children: /* @__PURE__ */ s("div", {
"data-dd-privacy": "mask-user-input",
...d,
ref: f,
className: u(),
"data-unity-component": "FunnelLayout",
style: { "--uy-funnel-sidebar-offset": "calc(var(--uy-spacing-800) + var(--uy-spacing-600))" },
children: [
/* @__PURE__ */ s(t, { children: [
/* @__PURE__ */ o(e, {
targetId: m.topbarId,
children: /* @__PURE__ */ o(c, {
id: "unity:layout:funnel:skip-links:top-bar",
defaultMessage: "Top bar"
})
}),
/* @__PURE__ */ o(e, {
targetId: m.mainContentId,
children: /* @__PURE__ */ o(c, {
id: "unity:layout:funnel:skip-links:main-content",
defaultMessage: "Main content"
})
}),
/* @__PURE__ */ o(e, {
targetId: m.asideId,
children: /* @__PURE__ */ o(c, {
id: "unity:layout:funnel:skip-links:sidebar",
defaultMessage: "Sidebar"
})
}),
/* @__PURE__ */ o(e, {
targetId: m.footerId,
children: /* @__PURE__ */ o(c, {
id: "unity:layout:funnel:skip-links:footer",
defaultMessage: "Footer"
})
})
] }),
/* @__PURE__ */ o("div", {
"data-unity-component": "FunnelTopBar",
className: "uy:sticky uy:top-0 uy:z-10",
children: a
}),
/* @__PURE__ */ o("div", {
className: "uy:flex-1 uy:flex uy:md:block uy:overflow-visible",
"data-unity-slot": "funnel-layout-content-wrapper",
children: r
})
]
})
});
});
d.displayName = "FunnelLayout";
//#endregion
export { d as FunnelLayout, u as funnelLayout };