@ryuzaki13/react-foundation-ui 3.5.0 → 3.6.0

package/dist/chunks/popover-BJH-yHvb.js

@@ -0,0 +1,263 @@
+import { t as e } from "./floating-arrow-B_iSbzUZ.js";
+import { cn as t } from "@ryuzaki13/react-foundation-lib/utils";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { cloneElement as a, createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useRef as f, useState as p } from "react";
+import { FloatingPortal as m, arrow as h, autoUpdate as g, flip as _, offset as v, shift as y, size as b, useDismiss as x, useFloating as S, useFocus as C, useHover as w, useInteractions as T, useRole as E } from "@floating-ui/react";
+import { useClickOutside as D, useEscapeDismiss as O, useOverlayFocus as k } from "@ryuzaki13/react-foundation-lib/dom";
+import { createMissingContextError as A } from "@ryuzaki13/react-foundation-lib/error";
+import { createPortal as j } from "react-dom";
+//#region src/popover/lib/applyPopoverAvailableSize.ts
+function M({ availableWidth: e, availableHeight: t, floating: n }) {
+	n.style.setProperty("--popover-available-width", `${Math.max(0, e)}px`), n.style.setProperty("--popover-available-height", `${Math.max(0, t)}px`);
+}
+var N = {
+	popover: "JK2Y7t",
+	primary: "_5QtpCJ",
+	secondary: "hZuysP"
+}, P = o(null);
+function F() {
+	let e = c(P);
+	if (!e) throw A({
+		hookName: "usePopoverContext",
+		providerName: "Popover"
+	});
+	return e;
+}
+//#endregion
+//#region src/popover/components/PopoverContent.tsx
+function I({ children: n, onClose: a, closeOnOutside: o = !0, closeOnEscape: c = !0, disableOutsideClick: l = !1, background: u = "secondary", role: d, "aria-label": p, "aria-labelledby": h, "aria-describedby": g }) {
+	let { open: _, setOpen: v, refs: y, floatingStyles: b, middlewareData: x, placement: S, arrowRef: C, contentId: w } = F(), T = f(null), E = s((e) => {
+		T.current = e, y.setFloating(e);
+	}, [y]), A = k({
+		active: _,
+		initialFocus: "container",
+		restoreFocus: !0,
+		containerRef: T
+	}), j = s(() => {
+		_ && (v(!1), a?.());
+	}, [
+		v,
+		a,
+		_
+	]);
+	O({
+		active: _,
+		enabled: c,
+		onDismiss: j,
+		containerRef: A
+	});
+	let M = s(() => {
+		!_ || l || o && j();
+	}, [
+		_,
+		l,
+		o,
+		j
+	]);
+	return D([y.floating, y.reference], M), _ ? /* @__PURE__ */ r(m, { children: /* @__PURE__ */ i("div", {
+		id: w,
+		ref: E,
+		style: b,
+		className: t(N.popover, N[u]),
+		role: d,
+		"aria-label": p,
+		"aria-labelledby": h,
+		"aria-describedby": g,
+		tabIndex: -1,
+		children: [typeof n == "function" ? n({ setClose: j }) : n, /* @__PURE__ */ r(e, {
+			ref: C,
+			placement: S,
+			middlewareData: x
+		})]
+	}) }) : null;
+}
+//#endregion
+//#region src/popover/components/PopoverTrigger.tsx
+function L({ passive: e, children: t }) {
+	let { open: n, setOpen: r, refs: i, contentId: o } = F(), c = [t.props["aria-controls"], o].filter(Boolean).join(" "), l = s((n) => {
+		t.props.onClick && t.props.onClick(n), !n.defaultPrevented && (n.preventDefault(), n.stopPropagation(), !e && r((e) => !e));
+	}, [
+		t,
+		r,
+		e
+	]);
+	return a(t, {
+		ref: i.setReference,
+		"aria-expanded": n,
+		"aria-controls": c,
+		onClick: l
+	});
+}
+//#endregion
+//#region src/popover/components/Popover.tsx
+var R = 16;
+function z({ children: e, open: t, defaultOpen: n, onOpenChange: i, placement: a = "bottom" }) {
+	let [o, c] = p(n ?? !1), l = u(), d = t !== void 0, m = d ? t : o, x = s((e) => {
+		let t = typeof e == "function" ? e(m) : e;
+		d || c(t), i?.(t);
+	}, [
+		d,
+		i,
+		m
+	]), C = f(null), { refs: w, floatingStyles: T, middlewareData: E, placement: D } = S({
+		open: m,
+		onOpenChange: x,
+		placement: a,
+		middleware: [
+			v(8),
+			_({ padding: R }),
+			y({ padding: R }),
+			b({
+				padding: R,
+				apply({ availableWidth: e, availableHeight: t, elements: n }) {
+					M({
+						availableWidth: e,
+						availableHeight: t,
+						floating: n.floating
+					});
+				}
+			}),
+			h({ element: C.current })
+		],
+		whileElementsMounted: g
+	});
+	return /* @__PURE__ */ r(P.Provider, {
+		value: {
+			open: m,
+			setOpen: x,
+			refs: w,
+			floatingStyles: T,
+			placement: D,
+			middlewareData: E,
+			arrowRef: C,
+			contentId: l
+		},
+		children: e
+	});
+}
+z.Trigger = L, z.Content = I;
+var B = {
+	tooltipPanel: "sZ0x6w",
+	tooltip: "_538Ejd",
+	negative: "fqciCO",
+	information: "sHkUiQ",
+	error: "bpGNoX",
+	warning: "tYnRg-",
+	success: "_8lflEh"
+};
+//#endregion
+//#region src/popover/FloatingPopover.tsx
+function V({ content: a, children: o, openOnHover: s = !0, placement: c = "bottom", openDelay: l = 200, closeDelay: u = 100, maxWidth: m, state: b, tooltip: D, positionUpdateKey: O }) {
+	let [k, A] = p(!1), M = f(null), { refs: N, floatingStyles: P, middlewareData: F, context: I, placement: L, update: R } = S({
+		open: k,
+		onOpenChange: A,
+		placement: c,
+		middleware: [
+			v(8),
+			_({
+				fallbackAxisSideDirection: "end",
+				fallbackPlacements: [
+					"top",
+					"right",
+					"bottom"
+				]
+			}),
+			y({ padding: 8 }),
+			h({
+				element: M,
+				padding: 8
+			})
+		],
+		whileElementsMounted: g
+	});
+	d(() => {
+		k && R();
+	}, [
+		k,
+		O,
+		R
+	]);
+	let z = w(I, {
+		enabled: s,
+		move: !1,
+		delay: {
+			open: l,
+			close: u
+		}
+	}), V = C(I, { enabled: s }), H = x(I), U = E(I, { role: "tooltip" }), { getReferenceProps: W, getFloatingProps: G } = T([
+		z,
+		V,
+		H,
+		U
+	]);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+		ref: N.setReference,
+		...W(),
+		style: { lineHeight: 1 },
+		children: o
+	}), k && j(/* @__PURE__ */ i("div", {
+		ref: N.setFloating,
+		style: {
+			...P,
+			zIndex: "var(--z-tooltip)",
+			maxWidth: m ? `${m}em` : void 0
+		},
+		...G(),
+		role: "tooltip",
+		className: t(B.tooltipPanel, D && B.tooltip, b && B[b]),
+		children: [a, /* @__PURE__ */ r(e, {
+			ref: M,
+			placement: L,
+			middlewareData: F
+		})]
+	}), document.body)] });
+}
+//#endregion
+//#region src/popover/FloatingTooltip.tsx
+function H({ x: t, y: n, children: a }) {
+	let o = f(null), { refs: s, floatingStyles: c, middlewareData: u, placement: d } = S({
+		strategy: "absolute",
+		placement: "top",
+		middleware: [
+			v(6),
+			_(),
+			y({ padding: 16 }),
+			h({ element: o })
+		]
+	});
+	return l(() => {
+		s.setReference && s.setReference({ getBoundingClientRect: () => ({
+			x: t,
+			y: n,
+			width: 0,
+			height: 0,
+			top: n,
+			left: t,
+			bottom: n,
+			right: t,
+			toJSON: () => {}
+		}) });
+	}, [
+		t,
+		n,
+		s
+	]), /* @__PURE__ */ i("div", {
+		ref: s.setFloating,
+		style: {
+			...c,
+			position: "absolute",
+			pointerEvents: "none"
+		},
+		role: "tooltip",
+		className: B.tooltip,
+		children: [a, /* @__PURE__ */ r(e, {
+			ref: o,
+			placement: d,
+			middlewareData: u
+		})]
+	});
+}
+//#endregion
+export { I as a, L as i, V as n, F as o, z as r, H as t };
+
+//# sourceMappingURL=popover-BJH-yHvb.js.map

package/dist/chunks/popover-BJH-yHvb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-BJH-yHvb.js","names":[],"sources":["../../src/popover/lib/applyPopoverAvailableSize.ts","../../src/popover/components/Popover.module.scss","../../src/popover/components/PopoverContext.tsx","../../src/popover/components/PopoverContent.tsx","../../src/popover/components/PopoverTrigger.tsx","../../src/popover/components/Popover.tsx","../../src/popover/Popover.module.scss","../../src/popover/FloatingPopover.tsx","../../src/popover/FloatingTooltip.tsx"],"sourcesContent":["type ApplyPopoverAvailableSizeOptions = {\n\treadonly availableWidth: number;\n\treadonly availableHeight: number;\n\treadonly floating: HTMLElement;\n};\n\n/**\n * Передаёт вычисленную Floating UI доступную область самому popover через CSS-переменные.\n * Потребитель может совместить эти границы со своим размером и режимом прокрутки,\n * не дублируя `size()` middleware и правила clipping context.\n */\nexport function applyPopoverAvailableSize({ availableWidth, availableHeight, floating }: ApplyPopoverAvailableSizeOptions) {\n\tfloating.style.setProperty(\"--popover-available-width\", `${Math.max(0, availableWidth)}px`);\n\tfloating.style.setProperty(\"--popover-available-height\", `${Math.max(0, availableHeight)}px`);\n}\n",".popover {\n\tpadding: var(--space-sm);\n\t// background-image: radial-gradient(var(--surface-0) 50%, var(--surface-1) 100%);\n\n\tborder: var(--border-width) solid var(--border-1);\n\tborder-radius: var(--radius-sm);\n\tcolor: var(--content-0);\n\n\tfilter: drop-shadow(var(--shadow-md));\n\n\tz-index: var(--z-popover);\n\n\t&.primary {\n\t\tbackground-color: var(--surface-0);\n\t}\n\n\t&.secondary {\n\t\tbackground-color: var(--surface-1);\n\t}\n}\n","import React, { createContext, useContext } from \"react\";\n\nimport { useFloating, type Placement } from \"@floating-ui/react\";\nimport { createMissingContextError } from \"@ryuzaki13/react-foundation-lib/error\";\n\ninterface PopoverContextValue {\n\topen: boolean;\n\tsetOpen: React.Dispatch<React.SetStateAction<boolean>>;\n\trefs: ReturnType<typeof useFloating>[\"refs\"];\n\tfloatingStyles: React.CSSProperties;\n\tplacement: Placement;\n\tmiddlewareData: ReturnType<typeof useFloating>[\"middlewareData\"];\n\tarrowRef: React.RefObject<HTMLDivElement | null>;\n\tcontentId: string;\n}\n\nexport const PopoverContext = createContext<PopoverContextValue | null>(null);\n\nexport function usePopoverContext() {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow createMissingContextError({\n\t\t\thookName: \"usePopoverContext\",\n\t\t\tproviderName: \"Popover\"\n\t\t});\n\t}\n\treturn context;\n}\n","import React, { useCallback, useRef } from \"react\";\n\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { useClickOutside, useEscapeDismiss, useOverlayFocus } from \"@ryuzaki13/react-foundation-lib/dom\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { TooltipArrow } from \"../../floating-arrow\";\n\nimport styles from \"./Popover.module.scss\";\nimport { usePopoverContext } from \"./PopoverContext\";\n\nexport type PopoverContentProps = Readonly<{\n\tchildren: React.ReactNode | ((ctx: { setClose: () => void }) => React.ReactNode);\n\tonClose?: () => void;\n\tcloseOnOutside?: boolean;\n\tcloseOnEscape?: boolean;\n\tdisableOutsideClick?: boolean;\n\tbackground?: \"primary\" | \"secondary\";\n}> &\n\tPick<React.HTMLAttributes<HTMLDivElement>, \"role\" | \"aria-label\" | \"aria-labelledby\" | \"aria-describedby\">;\n\n/**\n * Содержимое немодального Popover, отображаемое в портале.\n * Компонент не навязывает ARIA-role: consumer задаёт семантику содержимого\n * явно и добавляет доступное имя для ролей, которым оно требуется.\n */\nexport function PopoverContent({\n\tchildren,\n\tonClose,\n\tcloseOnOutside = true,\n\tcloseOnEscape = true,\n\tdisableOutsideClick = false,\n\tbackground = \"secondary\",\n\trole,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy,\n\t\"aria-describedby\": ariaDescribedBy\n}: PopoverContentProps) {\n\tconst { open, setOpen, refs, floatingStyles, middlewareData, placement, arrowRef, contentId } = usePopoverContext();\n\tconst floatingElementRef = useRef<HTMLDivElement | null>(null);\n\tconst setFloating = useCallback(\n\t\t(node: HTMLDivElement | null) => {\n\t\t\tfloatingElementRef.current = node;\n\t\t\trefs.setFloating(node);\n\t\t},\n\t\t[refs]\n\t);\n\n\tconst floatingRef = useOverlayFocus<HTMLDivElement>({\n\t\tactive: open,\n\t\tinitialFocus: \"container\",\n\t\trestoreFocus: true,\n\t\tcontainerRef: floatingElementRef\n\t});\n\n\tconst setClose = useCallback(() => {\n\t\tif (!open) return;\n\t\tsetOpen(false);\n\t\tonClose?.();\n\t}, [setOpen, onClose, open]);\n\n\tuseEscapeDismiss({\n\t\tactive: open,\n\t\tenabled: closeOnEscape,\n\t\tonDismiss: setClose,\n\t\tcontainerRef: floatingRef as React.RefObject<HTMLElement | null>\n\t});\n\n\tconst outsideClose = useCallback(() => {\n\t\tif (!open || disableOutsideClick) return;\n\t\tif (closeOnOutside) setClose();\n\t}, [open, disableOutsideClick, closeOnOutside, setClose]);\n\n\tuseClickOutside([refs.floating as React.RefObject<HTMLElement>, refs.reference as React.RefObject<HTMLElement>], outsideClose);\n\n\tif (!open) return null;\n\n\treturn (\n\t\t<FloatingPortal>\n\t\t\t<div\n\t\t\t\tid={contentId}\n\t\t\t\tref={setFloating}\n\t\t\t\tstyle={floatingStyles}\n\t\t\t\tclassName={cn(styles.popover, styles[background])}\n\t\t\t\trole={role}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\ttabIndex={-1}>\n\t\t\t\t{typeof children === \"function\" ? children({ setClose }) : children}\n\t\t\t\t<TooltipArrow ref={arrowRef} placement={placement} middlewareData={middlewareData} />\n\t\t\t</div>\n\t\t</FloatingPortal>\n\t);\n}\n","import React, { cloneElement, useCallback } from \"react\";\n\nimport { usePopoverContext } from \"./PopoverContext\";\n\nexport interface PopoverTriggerProps {\n\tpassive?: true;\n\tchildren: React.ReactElement<React.HTMLAttributes<Element> & { ref?: React.Ref<Element> }>;\n}\n\nexport function PopoverTrigger({ passive, children }: PopoverTriggerProps) {\n\tconst { open, setOpen, refs, contentId } = usePopoverContext();\n\tconst ariaControls = [children.props[\"aria-controls\"], contentId].filter(Boolean).join(\" \");\n\n\tconst handleClick = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (children.props.onClick) {\n\t\t\t\tchildren.props.onClick(e);\n\t\t\t}\n\t\t\tif (e.defaultPrevented) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\n\t\t\tif (passive) return;\n\n\t\t\tsetOpen((v) => !v);\n\t\t},\n\t\t[children, setOpen, passive]\n\t);\n\n\treturn cloneElement(children as React.JSX.Element, {\n\t\tref: refs.setReference,\n\t\t\"aria-expanded\": open,\n\t\t\"aria-controls\": ariaControls,\n\t\tonClick: handleClick\n\t});\n}\n","import React, { useCallback, useId, useRef, useState } from \"react\";\n\nimport { arrow, autoUpdate, flip, offset, shift, size as floatingSize, useFloating, type Placement } from \"@floating-ui/react\";\n\nimport { applyPopoverAvailableSize } from \"../lib/applyPopoverAvailableSize\";\n\nimport { PopoverContent } from \"./PopoverContent\";\nimport { PopoverContext } from \"./PopoverContext\";\nimport { PopoverTrigger } from \"./PopoverTrigger\";\n\nconst POPOVER_VIEWPORT_PADDING = 16;\n\nexport interface PopoverProps {\n\tchildren: React.ReactNode;\n\tplacement?: Placement;\n\topen?: boolean;\n\tdefaultOpen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Якорный немодальный Popover.\n * Используется в связке с Popover.Trigger и Popover.Content; для блокирующих\n * сценариев с недоступным фоном следует использовать Dialog или Modal.\n */\nexport function Popover({ children, open: controlledOpen, defaultOpen, onOpenChange, placement = \"bottom\" }: PopoverProps) {\n\tconst [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n\tconst contentId = useId();\n\n\tconst isControlled = controlledOpen !== undefined;\n\tconst open = isControlled ? controlledOpen : uncontrolledOpen;\n\tconst setOpen = useCallback<React.Dispatch<React.SetStateAction<boolean>>>(\n\t\t(value) => {\n\t\t\tconst next = typeof value === \"function\" ? value(open) : value;\n\t\t\tif (!isControlled) setUncontrolledOpen(next);\n\t\t\tonOpenChange?.(next);\n\t\t},\n\t\t[isControlled, onOpenChange, open]\n\t);\n\n\tconst arrowRef = useRef<HTMLDivElement | null>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tplacement: actualPlacement\n\t} = useFloating({\n\t\topen,\n\t\tonOpenChange: setOpen,\n\t\tplacement,\n\t\tmiddleware: [\n\t\t\toffset(8),\n\t\t\tflip({ padding: POPOVER_VIEWPORT_PADDING }),\n\t\t\tshift({ padding: POPOVER_VIEWPORT_PADDING }),\n\t\t\tfloatingSize({\n\t\t\t\tpadding: POPOVER_VIEWPORT_PADDING,\n\t\t\t\tapply({ availableWidth, availableHeight, elements }) {\n\t\t\t\t\tapplyPopoverAvailableSize({ availableWidth, availableHeight, floating: elements.floating });\n\t\t\t\t}\n\t\t\t}),\n\t\t\t// eslint-disable-next-line react-hooks/refs\n\t\t\tarrow({ element: arrowRef.current })\n\t\t],\n\t\twhileElementsMounted: autoUpdate\n\t});\n\n\treturn (\n\t\t<PopoverContext.Provider\n\t\t\tvalue={{ open, setOpen, refs, floatingStyles, placement: actualPlacement, middlewareData, arrowRef, contentId }}>\n\t\t\t{children}\n\t\t</PopoverContext.Provider>\n\t);\n}\n\n/**\n * Композиционное API:\n * <Popover>\n *   <Popover.Trigger />\n *   <Popover.Content />\n * </Popover>\n */\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n",".tooltipPanel {\n\tpadding: var(--space-sm);\n\t// background-image: radial-gradient(var(--surface-0) 50%, var(--surface-1) 100%);\n\tbackground-color: var(--surface-1);\n\tborder: var(--border-width) solid var(--border-2);\n\tborder-radius: var(--radius-sm);\n\tcolor: var(--content-0);\n\n\tfilter: drop-shadow(var(--shadow-sm));\n\n\t&.negative {\n\t\t--border-1: var(--content-0);\n\n\t\tbackground-color: var(--content-0);\n\t\tborder-color: var(--border-1);\n\t\tcolor: var(--surface-1);\n\t}\n\n\t&.information {\n\t\t--border-1: var(--info-text);\n\n\t\tbackground-color: var(--info-text);\n\t\tborder-color: var(--info-text);\n\t\tcolor: var(--info-on-fill);\n\t}\n\n\t&.error {\n\t\t--border-1: var(--error-text);\n\n\t\tbackground-color: var(--error-text);\n\t\tborder-color: var(--error-text);\n\t\tcolor: var(--error-on-fill);\n\t}\n\n\t&.warning {\n\t\t--border-1: var(--warning-text);\n\n\t\tbackground-color: var(--warning-text);\n\t\tborder-color: var(--warning-text);\n\t\tcolor: var(--warning-on-fill);\n\t}\n\n\t&.success {\n\t\t--border-1: var(--success-text);\n\n\t\tbackground-color: var(--success-text);\n\t\tborder-color: var(--success-text);\n\t\tcolor: var(--success-on-fill);\n\t}\n}\n\n.tooltip {\n\tz-index: var(--z-tooltip);\n\tpointer-events: none;\n\n\ttext-align: initial;\n\tfont-size: var(--font-size-sm);\n\tfont-style: normal;\n\tfont-weight: 500;\n\tfont-variation-settings: \"wght\" 500;\n\tline-height: var(--line-height);\n\n\t@extend .tooltipPanel;\n}\n","/* eslint-disable react-hooks/refs */\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport {\n\tarrow,\n\tautoUpdate,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tuseDismiss,\n\tuseFocus,\n\tuseFloating,\n\tuseHover,\n\tuseInteractions,\n\tuseRole\n} from \"@floating-ui/react\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { createPortal } from \"react-dom\";\n\nimport { FloatingArrow } from \"../floating-arrow/FloatingArrow\";\n\nimport styles from \"./Popover.module.scss\";\n\ninterface FloatingPopoverProps {\n\tcontent: React.ReactNode;\n\tchildren: React.ReactNode;\n\topenOnHover?: boolean;\n\tplacement?: Placement;\n\topenDelay?: number;\n\tcloseDelay?: number;\n\tmaxWidth?: number;\n\tstate?: \"information\" | \"error\" | \"warning\" | \"success\" | \"negative\";\n\ttooltip?: true;\n\t/**\n\t * Изменяется вместе с CSS-координатой trigger, когда её изменение не отслеживается `autoUpdate`.\n\t * После commit React выполняется повторный расчёт позиции открытой floating-панели.\n\t */\n\tpositionUpdateKey?: unknown;\n}\n\nexport function FloatingPopover({\n\tcontent,\n\tchildren,\n\topenOnHover = true,\n\tplacement = \"bottom\",\n\topenDelay = 200,\n\tcloseDelay = 100,\n\tmaxWidth,\n\tstate,\n\ttooltip,\n\tpositionUpdateKey\n}: FloatingPopoverProps) {\n\tconst [open, setOpen] = useState(false);\n\tconst arrowRef = useRef<HTMLDivElement>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tcontext,\n\t\tplacement: computedPlacement,\n\t\tupdate\n\t} = useFloating({\n\t\topen,\n\t\tonOpenChange: setOpen,\n\t\tplacement,\n\t\tmiddleware: [\n\t\t\toffset(8),\n\t\t\tflip({ fallbackAxisSideDirection: \"end\", fallbackPlacements: [\"top\", \"right\", \"bottom\"] }),\n\t\t\tshift({ padding: 8 }),\n\t\t\tarrow({ element: arrowRef, padding: 8 })\n\t\t],\n\t\twhileElementsMounted: autoUpdate\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tif (open) {\n\t\t\tvoid update();\n\t\t}\n\t}, [open, positionUpdateKey, update]);\n\n\tconst hover = useHover(context, {\n\t\tenabled: openOnHover,\n\t\tmove: false,\n\t\tdelay: {\n\t\t\topen: openDelay,\n\t\t\tclose: closeDelay\n\t\t}\n\t});\n\t// Hover-подсказка обязана иметь ту же пассивную точку входа с клавиатуры.\n\t// Связываем focus с тем же флагом, чтобы `openOnHover={false}` не менял\n\t// управляемые сценарии, которые не запрашивали автоматическое открытие.\n\tconst focus = useFocus(context, { enabled: openOnHover });\n\tconst dismiss = useDismiss(context);\n\tconst role = useRole(context, { role: \"tooltip\" });\n\n\tconst { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);\n\n\treturn (\n\t\t<>\n\t\t\t<span ref={refs.setReference} {...getReferenceProps()} style={{ lineHeight: 1 }}>\n\t\t\t\t{children}\n\t\t\t</span>\n\n\t\t\t{open &&\n\t\t\t\tcreatePortal(\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={refs.setFloating}\n\t\t\t\t\t\tstyle={{ ...floatingStyles, zIndex: \"var(--z-tooltip)\", maxWidth: maxWidth ? `${maxWidth}em` : undefined }}\n\t\t\t\t\t\t{...getFloatingProps()}\n\t\t\t\t\t\trole=\"tooltip\"\n\t\t\t\t\t\tclassName={cn(styles.tooltipPanel, tooltip && styles.tooltip, state && styles[state])}>\n\t\t\t\t\t\t{content}\n\n\t\t\t\t\t\t<FloatingArrow ref={arrowRef} placement={computedPlacement} middlewareData={middlewareData} />\n\t\t\t\t\t</div>,\n\t\t\t\t\tdocument.body\n\t\t\t\t)}\n\t\t</>\n\t);\n}\n","import React, { useEffect, useRef } from \"react\";\n\nimport { arrow, flip, offset, shift, useFloating } from \"@floating-ui/react\";\n\nimport { FloatingArrow } from \"../floating-arrow/FloatingArrow\";\n\nimport styles from \"./Popover.module.scss\";\n\nexport function FloatingTooltip({ x, y, children }: { x: number; y: number; children: React.ReactNode }) {\n\tconst arrowRef = useRef<HTMLDivElement | null>(null);\n\n\tconst {\n\t\trefs,\n\t\tfloatingStyles,\n\t\tmiddlewareData,\n\t\tplacement: computedPlacement\n\t} = useFloating({\n\t\tstrategy: \"absolute\",\n\t\tplacement: \"top\",\n\t\t// eslint-disable-next-line react-hooks/refs\n\t\tmiddleware: [offset(6), flip(), shift({ padding: 16 }), arrow({ element: arrowRef })]\n\t});\n\n\tuseEffect(() => {\n\t\tif (refs.setReference) {\n\t\t\trefs.setReference({\n\t\t\t\tgetBoundingClientRect: () =>\n\t\t\t\t\t({\n\t\t\t\t\t\tx,\n\t\t\t\t\t\ty,\n\t\t\t\t\t\twidth: 0,\n\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\ttop: y,\n\t\t\t\t\t\tleft: x,\n\t\t\t\t\t\tbottom: y,\n\t\t\t\t\t\tright: x,\n\t\t\t\t\t\ttoJSON: () => {}\n\t\t\t\t\t}) as DOMRect\n\t\t\t});\n\t\t}\n\t}, [x, y, refs]);\n\n\treturn (\n\t\t<div\n\t\t\tref={refs.setFloating}\n\t\t\tstyle={{ ...floatingStyles, position: \"absolute\", pointerEvents: \"none\" }}\n\t\t\trole=\"tooltip\"\n\t\t\tclassName={styles.tooltip}>\n\t\t\t{children}\n\n\t\t\t<FloatingArrow ref={arrowRef} placement={computedPlacement} middlewareData={middlewareData} />\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}