@payfit/unity-components
Version:
56 lines (55 loc) • 1.9 kB
JavaScript
import { useMediaQuery as e } from "../../hooks/use-media-query.js";
import { isDesktopBreakpoint as t, useBreakpointListener as n } from "../../hooks/use-breakpoint-listener.js";
import { useScrollDirection as r } from "../../hooks/use-scroll-direction.js";
import { forwardRef as i, useCallback as a, useState as o } from "react";
import { uyTv as s } from "@payfit/unity-themes";
import { jsx as c } from "react/jsx-runtime";
import { Toolbar as l } from "react-aria-components/Toolbar";
//#region src/components/floating-action-bar/FloatingActionBar.tsx
var u = s({
base: [
"uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:z-20",
"uy:flex uy:flex-col uy:gap-125",
"uy:px-200 uy:pt-300",
"uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-100))]",
"uy:bg-linear-to-b uy:from-surface-neutral/0 uy:from-0% uy:via-surface-neutral uy:via-9% uy:to-surface-neutral uy:to-100%"
],
variants: {
isHidden: {
true: "uy:translate-y-full uy:focus-within:translate-0",
false: "uy:translate-y-0"
},
reduceMotion: {
true: "",
false: "uy:transition-transform uy:duration-300 uy:ease-in-out"
}
},
defaultVariants: {
isHidden: !1,
reduceMotion: !1
}
}), d = i(({ children: i, "aria-label": s = "Page actions", scrollContainerRef: d }, f) => {
let p = n(), m = e("(prefers-reduced-motion: reduce)"), [h, g] = r(d), [_, v] = o(!1), y = !m && !_ && g === "down", b = a(() => {
y && v(!0);
}, [y]), x = a(() => {
v(!1);
}, []), S = a((e) => {
h.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
}, [h, f]);
return t(p) ? null : /* @__PURE__ */ c(l, {
ref: S,
"data-unity-fab": !0,
"aria-label": s,
orientation: "vertical",
className: u({
isHidden: y,
reduceMotion: m
}),
onFocus: b,
onBlur: x,
children: i
});
});
d.displayName = "FloatingActionBar";
//#endregion
export { d as FloatingActionBar, u as floatingActionBar };