UNPKG

@payfit/unity-components

Version:

70 lines (69 loc) 2.13 kB
import { link as e } from "../link/RawLink.js"; import { forwardRef as t, useId as n } from "react"; import { uyTv as r } from "@payfit/unity-themes"; import { jsx as i, jsxs as a } from "react/jsx-runtime"; import { FormattedMessage as o } from "react-intl"; import { Link as s } from "react-aria-components/Link"; //#region src/components/skip-links/SkipLinks.tsx var c = r({ slots: { base: [ "uy:sr-only", "uy:focus-within:p-200", "uy:focus-within:bg-surface-neutral", "uy:focus-within:border-border-neutral uy:focus-within:border-solid uy:focus-within:border-1", "uy:focus-within:shadow-raising", "uy:focus-within:rounded-100", "uy:focus-within:not-sr-only", "uy:focus-within:absolute", "uy:focus-within:top-100", "uy:focus-within:left-100", "uy:focus-within:z-50" ], label: "uy:typography-h4", list: "uy:mt-1 uy:space-y-1 uy:list-none" } }), l = t(({ label: e, className: t, children: r, ...s }, l) => { let u = `skip-links-label-${n()}`; if (!r) return null; let { base: d, label: f, list: p } = c(); return /* @__PURE__ */ a("nav", { "data-dd-privacy": "allow", ...s, ref: l, className: d({ className: t }), role: "navigation", "aria-labelledby": u, "data-unity-component": "SkipLinks", children: [/* @__PURE__ */ i("span", { id: u, className: f(), children: e || /* @__PURE__ */ i(o, { id: "unity:component:skip-links:label", defaultMessage: "Skip to:" }) }), /* @__PURE__ */ i("ol", { className: p(), children: r })] }); }), u = t(({ targetId: t, children: n, ...r }, a) => { let { base: o } = e({ size: "small", color: "primary", variant: "standalone" }); return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(s, { ...r, ref: a, className: o(), onPress: () => { let e = document.getElementById(t); e && (e.focus(), e.hasAttribute("tabindex") || (e.setAttribute("tabindex", "-1"), e.addEventListener("blur", () => { e.removeAttribute("tabindex"); }, { once: !0 }))); }, children: n }) }); }); l.displayName = "SkipLinks", u.displayName = "SkipLink"; //#endregion export { u as SkipLink, l as SkipLinks };