UNPKG

@ariakit/react-core

Version:

Ariakit React core

79 lines (76 loc) 2.04 kB
"use client"; import { usePopoverContext } from "./Y67KZUMI.js"; import { createElement, createHook, forwardRef } from "./VOQWLFSQ.js"; import { __objRest, __spreadProps, __spreadValues } from "./3YLGPPWQ.js"; // src/popover/popover-disclosure-arrow.tsx import { invariant, removeUndefinedValues } from "@ariakit/core/utils/misc"; import { useMemo } from "react"; import { jsx } from "react/jsx-runtime"; var TagName = "span"; var pointsMap = { top: "4,10 8,6 12,10", right: "6,4 10,8 6,12", bottom: "4,6 8,10 12,6", left: "10,4 6,8 10,12" }; var usePopoverDisclosureArrow = createHook(function usePopoverDisclosureArrow2(_a) { var _b = _a, { store, placement } = _b, props = __objRest(_b, ["store", "placement"]); const context = usePopoverContext(); store = store || context; invariant( store, process.env.NODE_ENV !== "production" && "PopoverDisclosureArrow must be wrapped in a PopoverDisclosure component." ); const position = store.useState((state) => placement || state.placement); const dir = position.split("-")[0]; const points = pointsMap[dir]; const children = useMemo( () => /* @__PURE__ */ jsx( "svg", { display: "block", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, viewBox: "0 0 16 16", height: "1em", width: "1em", children: /* @__PURE__ */ jsx("polyline", { points }) } ), [points] ); props = __spreadProps(__spreadValues({ children, "aria-hidden": true }, props), { style: __spreadValues({ width: "1em", height: "1em", pointerEvents: "none" }, props.style) }); return removeUndefinedValues(props); }); var PopoverDisclosureArrow = forwardRef( function PopoverDisclosureArrow2(props) { const htmlProps = usePopoverDisclosureArrow(props); return createElement(TagName, htmlProps); } ); export { usePopoverDisclosureArrow, PopoverDisclosureArrow };