From 495bf209f771d8368107cd131f62c12de62b16f5 Mon Sep 17 00:00:00 2001 From: SerhiiTsybulskyi Date: Wed, 12 Jun 2024 12:31:45 +0300 Subject: [PATCH 1/3] update popper.js on floating-ui --- package-lock.json | 64 +++++-- package.json | 2 +- src/form/Select/SelectInput/SelectInput.tsx | 1 - src/form/Select/utils/useWidth.ts | 24 ++- src/layers/Menu/Menu.story.tsx | 12 +- src/layers/Menu/Menu.tsx | 56 +++--- src/layers/Menu/NestedMenu.tsx | 2 +- src/layers/Tooltip/Tooltip.story.tsx | 42 +++++ src/layers/Tooltip/Tooltip.tsx | 4 +- src/utils/ExitListener/useExitListener.tsx | 4 +- .../ConnectedOverlayContent.tsx | 17 +- .../Overlay/OverlayPortal/OverlayPortal.tsx | 17 +- src/utils/Portal/Portal.ts | 80 +++++---- src/utils/Position/Position.story.tsx | 91 +++++++--- src/utils/Position/usePosition.tsx | 170 +++++++----------- 15 files changed, 363 insertions(+), 223 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4a499e11..b1f4c00d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,15 @@ { "name": "reablocks", - "version": "7.11.0", + "version": "7.12.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "reablocks", - "version": "7.11.0", + "version": "7.12.0", "license": "Apache-2.0", "dependencies": { + "@floating-ui/react": "^0.26.16", "@marko19907/string-to-color": "^1.0.0", "@reaviz/react-use-fuzzy": "^1.0.3", "body-scroll-lock-upgrade": "^1.1.0", @@ -25,7 +26,6 @@ "human-format": "^1.2.0", "name-initials": "^0.1.3", "pluralize": "^8.0.0", - "popper.js": "^1.16.1", "react-fast-compare": "^3.2.2", "react-highlight-words": "^0.20.0", "react-textarea-autosize": "^8.5.3", @@ -3601,6 +3601,54 @@ "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==", "dev": true }, + "node_modules/@floating-ui/core": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz", + "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==", + "dependencies": { + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", + "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.16", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz", + "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==", + "dependencies": { + "@floating-ui/react-dom": "^2.1.0", + "@floating-ui/utils": "^0.2.0", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz", + "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -15449,16 +15497,6 @@ "node": ">=10" } }, - "node_modules/popper.js": { - "version": "1.16.1", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", - "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", - "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", diff --git a/package.json b/package.json index 3984694f..8d9e15bd 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ }, "homepage": "https://github.com/reaviz/reablocks#readme", "dependencies": { + "@floating-ui/react": "^0.26.16", "@marko19907/string-to-color": "^1.0.0", "@reaviz/react-use-fuzzy": "^1.0.3", "body-scroll-lock-upgrade": "^1.1.0", @@ -77,7 +78,6 @@ "human-format": "^1.2.0", "name-initials": "^0.1.3", "pluralize": "^8.0.0", - "popper.js": "^1.16.1", "react-fast-compare": "^3.2.2", "react-highlight-words": "^0.20.0", "react-textarea-autosize": "^8.5.3", diff --git a/src/form/Select/SelectInput/SelectInput.tsx b/src/form/Select/SelectInput/SelectInput.tsx index 957dc3b1..37c09aee 100644 --- a/src/form/Select/SelectInput/SelectInput.tsx +++ b/src/form/Select/SelectInput/SelectInput.tsx @@ -538,7 +538,6 @@ export const SelectInput: FC = ({ onFocus={onInputFocus} onBlur={onBlur} onPaste={onPaste} - placeholderIsMinWidth={false} />
diff --git a/src/form/Select/utils/useWidth.ts b/src/form/Select/utils/useWidth.ts index 571f9bcb..7d297de3 100644 --- a/src/form/Select/utils/useWidth.ts +++ b/src/form/Select/utils/useWidth.ts @@ -1,4 +1,10 @@ -import { RefObject, useCallback, useEffect, useState } from 'react'; +import { + RefObject, + useCallback, + useEffect, + useLayoutEffect, + useState +} from 'react'; import { ConnectedOverlayContentRef } from '@/utils/Overlay'; export const useWidth = ( @@ -21,12 +27,18 @@ export const useWidth = ( updateWidthInternal(); }, [updateWidthInternal]); - useEffect(() => { - if (typeof window !== 'undefined') { - window.addEventListener('resize', updateWidthInternal); - return () => window.removeEventListener('resize', updateWidthInternal); + useLayoutEffect(() => { + if (!ref?.current) { + return; } - }, [updateWidthInternal]); + const resizeObserver = new ResizeObserver(() => { + const { width } = ref.current.getBoundingClientRect(); + setMenuWidth(width); + }); + resizeObserver.observe(ref.current); + + return () => resizeObserver.disconnect(); + }, [ref]); const updateWidth = useCallback(() => { if (updateWidthInternal()) { diff --git a/src/layers/Menu/Menu.story.tsx b/src/layers/Menu/Menu.story.tsx index 368609b4..079f46f5 100644 --- a/src/layers/Menu/Menu.story.tsx +++ b/src/layers/Menu/Menu.story.tsx @@ -149,7 +149,17 @@ export const AutoWidthModifiers = () => { diff --git a/src/layers/Menu/Menu.tsx b/src/layers/Menu/Menu.tsx index 2967b5fb..d6e843d6 100644 --- a/src/layers/Menu/Menu.tsx +++ b/src/layers/Menu/Menu.tsx @@ -1,9 +1,9 @@ import React, { FC, forwardRef, LegacyRef, useMemo } from 'react'; import FocusTrap from 'focus-trap-react'; +import { MiddlewareState, size } from '@floating-ui/react'; import { ConnectedOverlay, OverlayEvent } from '@/utils/Overlay'; -import { Placement } from '@/utils/Position'; +import { Modifiers, Placement } from '@/utils/Position'; import { useId } from '@/utils'; -import { Modifiers } from 'popper.js'; import { motion } from 'framer-motion'; import { twMerge } from 'tailwind-merge'; import { MenuTheme } from './MenuTheme'; @@ -41,7 +41,7 @@ export interface MenuProps { closeOnEscape?: boolean; /** - * Popper placement type. + * floating-ui placement type. */ placement?: Placement; @@ -66,7 +66,7 @@ export interface MenuProps { maxHeight?: string; /** - * Popper.js Position modifiers. + * floating-ui Position modifiers. */ modifiers?: Modifiers; @@ -143,15 +143,25 @@ export const Menu: FC = forwardRef< ) => { const id = useId(); + const shiftByOnePixel = { + name: 'shiftByOnePixel', + fn({ x, y }) { + return { + x: x + 1, + y: y + 1, + data: { + amount: 1 + } + }; + } + }; + const internalModifiers = useMemo(() => { if (autoWidth) { const sameWidth = { - enabled: true, - order: 840, - fn: data => { - const { width, left, right } = data.offsets.reference; - const passedOffset = modifiers?.offset?.offset; - let passedXOffset = 0; + name: 'sameWidth', + fn: (state: MiddlewareState) => { + const { width } = state.rects.reference; let menuWidth = width; if (maxWidth && menuWidth > maxWidth) { @@ -160,25 +170,19 @@ export const Menu: FC = forwardRef< menuWidth = minWidth; } - if (passedOffset) { - if (typeof passedOffset === 'number') { - passedXOffset = passedOffset; - } else { - const [skidding] = passedOffset.split(','); - passedXOffset = parseInt(skidding.trim(), 10); - } - } - - data.styles.width = menuWidth; - data.offsets.popper.width = menuWidth; - data.offsets.popper.left = left + passedXOffset; - data.offsets.popper.right = right + passedXOffset; - - return data; + return { data: { menuWidth } }; } }; - return modifiers ? { ...modifiers, sameWidth } : { sameWidth }; + const sizeModifier = size({ + apply({ middlewareData, elements }) { + elements.floating.style.width = `${middlewareData?.sameWidth?.menuWidth ?? 0}px`; + } + }); + + return modifiers + ? [...(modifiers ?? []), sameWidth, sizeModifier] + : [sameWidth, sizeModifier]; } return modifiers; diff --git a/src/layers/Menu/NestedMenu.tsx b/src/layers/Menu/NestedMenu.tsx index d31cf3fa..c2c235f7 100644 --- a/src/layers/Menu/NestedMenu.tsx +++ b/src/layers/Menu/NestedMenu.tsx @@ -16,7 +16,7 @@ export interface NestedMenuProps { label: any; /** - * Popper placement type. + * floating-ui placement type. */ placement?: Placement; diff --git a/src/layers/Tooltip/Tooltip.story.tsx b/src/layers/Tooltip/Tooltip.story.tsx index e8110688..04940b63 100644 --- a/src/layers/Tooltip/Tooltip.story.tsx +++ b/src/layers/Tooltip/Tooltip.story.tsx @@ -53,6 +53,48 @@ export const CustomTheme = () => { ); }; +export const FollowCursor = () => ( +
+ +
+); + +export const FollowScroll = () => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hover me +
+); + export const Disabled = () => (
diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx index 204cc6be..c2e880b4 100644 --- a/src/layers/Tooltip/Tooltip.tsx +++ b/src/layers/Tooltip/Tooltip.tsx @@ -39,7 +39,7 @@ export interface TooltipProps { reference?: ReferenceObject | HTMLElement | any; /** - * Popperjs placement. + * floating-ui placement. */ placement?: Placement; @@ -54,7 +54,7 @@ export interface TooltipProps { leaveDelay?: number; /** - * Popperjs modifiers. + * floating-ui modifiers. */ modifiers?: any; diff --git a/src/utils/ExitListener/useExitListener.tsx b/src/utils/ExitListener/useExitListener.tsx index 5ab6eeaa..862c4064 100644 --- a/src/utils/ExitListener/useExitListener.tsx +++ b/src/utils/ExitListener/useExitListener.tsx @@ -1,11 +1,11 @@ -import { RefObject, useEffect } from 'react'; +import { MutableRefObject, RefObject, useEffect } from 'react'; interface ExitListenerOptions { /** * A ref object pointing to the target element that the hook should * observe for click outside and escape key events. */ - ref: RefObject; + ref: RefObject | MutableRefObject; /** * An optional boolean to enable or disable the event listeners. diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx index 73ac632c..0cc73947 100644 --- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx +++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx @@ -97,7 +97,8 @@ export const ConnectedOverlayContent: FC< ) => { const id = useId(); const [overlayIndex, setOverlayIndex] = useState(null); - const [positionRef, popperRef] = usePosition(triggerRef, { + const { refs, floatingStyles, update } = usePosition({ + reference: triggerRef.current, followCursor, modifiers, placement @@ -105,7 +106,7 @@ export const ConnectedOverlayContent: FC< useImperativeHandle(ref, () => ({ updatePosition: () => { - popperRef?.current?.scheduleUpdate(); + update(); } })); @@ -143,22 +144,24 @@ export const ConnectedOverlayContent: FC< useExitListener({ open: true, - ref: positionRef, + ref: refs.floating, onClickOutside, onEscape }); useEffect(() => { - if (positionRef && overlayIndex) { - positionRef.current.style.zIndex = overlayIndex; + if (refs.reference && overlayIndex) { + (refs.reference.current as HTMLElement).style.zIndex = + overlayIndex.toString(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [positionRef.current, overlayIndex]); + }, [refs.reference.current, overlayIndex]); return ( = forwardRef( ( - { className, children, onMount, onUnmount, appendToBody = true, id }, + { + className, + children, + onMount, + onUnmount, + appendToBody = true, + id, + style + }, ref ) => { let portalId = useId(id); @@ -96,6 +110,7 @@ export const OverlayPortal: FC = { portals.push(portalId); diff --git a/src/utils/Portal/Portal.ts b/src/utils/Portal/Portal.ts index a29a881e..094aef2e 100644 --- a/src/utils/Portal/Portal.ts +++ b/src/utils/Portal/Portal.ts @@ -1,3 +1,4 @@ +import React, { CSSProperties } from 'react'; import { useImperativeHandle, forwardRef, @@ -22,6 +23,11 @@ export interface PortalProps extends PropsWithChildren { */ className?: string; + /** + * Style to apply to the portal element. + */ + style?: CSSProperties; + /** * Callback for portal mounts. */ @@ -43,42 +49,52 @@ export interface PortalRef { export const Portal: FC = forwardRef< HTMLElement, PortalProps ->(({ children, className, element = 'div', onMount, onUnmount }, ref) => { - const elementRef = useRef(null); - const mounted = useRef(false); +>( + ( + { children, className, style, element = 'div', onMount, onUnmount }, + ref + ) => { + const elementRef = useRef(null); + const mounted = useRef(false); - useEffect(() => { - if (className && elementRef.current) { - elementRef.current.setAttribute('class', `${className} rdk-portal`); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [className, elementRef.current]); + useEffect(() => { + if (className && elementRef.current) { + elementRef.current.setAttribute('class', `${className} rdk-portal`); + } + if (style && elementRef.current) { + Object.keys(style)?.forEach((key: string) => + elementRef.current.style?.setProperty(key, style[key]) + ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [className, style, elementRef.current]); - useLayoutEffect(() => { - // Create ref to created element once, on mount - elementRef.current = document.createElement(element); - onMount?.(); - }, []); + useLayoutEffect(() => { + // Create ref to created element once, on mount + elementRef.current = document.createElement(element); + onMount?.(); + }, []); - useUnmount(() => { - onUnmount?.(); - const ref = elementRef.current; - if (ref && document.body.contains(ref)) { - document.body.removeChild(ref); - } - }); + useUnmount(() => { + onUnmount?.(); + const ref = elementRef.current; + if (ref && document.body.contains(ref)) { + document.body.removeChild(ref); + } + }); - useImperativeHandle(ref, () => elementRef.current!); + useImperativeHandle(ref, () => elementRef.current!); - if (!elementRef.current) { - return null; - } + if (!elementRef.current) { + return null; + } - if (!mounted.current) { - mounted.current = true; - elementRef.current.classList.add('rdk-portal'); - document.body.appendChild(elementRef.current); - } + if (!mounted.current) { + mounted.current = true; + elementRef.current.classList.add('rdk-portal'); + document.body.appendChild(elementRef.current); + } - return createPortal(children, elementRef.current) as JSX.Element; -}); + return createPortal(children, elementRef.current) as React.JSX.Element; + } +); diff --git a/src/utils/Position/Position.story.tsx b/src/utils/Position/Position.story.tsx index c79b6918..7031b5f7 100644 --- a/src/utils/Position/Position.story.tsx +++ b/src/utils/Position/Position.story.tsx @@ -1,38 +1,85 @@ import { Meta } from '@storybook/react'; -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import { usePosition } from './usePosition'; const meta: Meta = { title: 'Components/Utils/Position' }; -export const Simple = { - render: () => { - const anchorRef = useRef(null); - const [positionRef] = usePosition(anchorRef, { placement: 'bottom' }); +export const Simple = () => { + const { refs, floatingStyles } = usePosition({ + placement: 'bottom' + }); - return ( + return ( +
-
- Hello! -
-
Positioned
+ Hello!
- ); - } +
+ Positioned +
+
+ ); +}; + +export const TopPosition = () => { + const [reference, setReference] = useState(null); + const [floating, setFloating] = useState(null); + const { floatingStyles } = usePosition({ + reference: reference, + floating, + placement: 'top' + }); + + return ( +
+
+ Hello! +
+
+ Positioned +
+
+ ); +}; + +export const FollowCursor = () => { + const { refs, floatingStyles } = usePosition({ followCursor: true }); + + return ( + <> +
+ Floating +
+ + ); }; export default meta; diff --git a/src/utils/Position/usePosition.tsx b/src/utils/Position/usePosition.tsx index 35a15d96..42c2b176 100644 --- a/src/utils/Position/usePosition.tsx +++ b/src/utils/Position/usePosition.tsx @@ -1,7 +1,15 @@ -import { useRef, useLayoutEffect, RefObject, useMemo } from 'react'; -import PopperJS from 'popper.js'; - -export type Placement = PopperJS.Placement; +import { useLayoutEffect, RefObject, useCallback } from 'react'; +import { + useFloating, + Placement as FloatingUIPlacement, + Middleware, + flip, + limitShift, + shift +} from '@floating-ui/react'; + +export type Placement = FloatingUIPlacement; +export type Modifiers = Middleware[]; export type ReferenceProp = | ReferenceObject @@ -16,122 +24,68 @@ export interface ReferenceObject { } export interface PositionOptions { + reference?: Element; + floating?: HTMLElement; placement?: Placement; - modifiers?: PopperJS.Modifiers; + modifiers?: Modifiers; followCursor?: boolean; } /** * Hook for positioning an element relative to another. */ -export const usePosition = ( - reference: ReferenceProp, - { followCursor, placement, modifiers }: PositionOptions = {} -) => { - const elementRef = useRef(null); - const popper = useRef(null); - const mouse = useRef<{ pageX: number; pageY: number }>({ - pageX: 0, - pageY: 0 - }); - - // Find the real reference pointer for updating - const refPointer = (reference as RefObject).current; - - const popperRef = useMemo(() => { - const refObj = reference as RefObject; - if (refObj.current !== undefined) { - return refObj.current; - } - - const refElement = reference as HTMLElement; - if (followCursor) { - return { - getBoundingClientRect: () => ({ - top: mouse.current.pageY, - right: mouse.current.pageX, - bottom: mouse.current.pageY, - left: mouse.current.pageX, - width: 0, - height: 0 - }), - clientWidth: 0, - clientHeight: 0 - }; - } else if (refElement && !refElement.getBoundingClientRect) { - const { top, left, width, height } = reference as ReferenceObject; - - return { - getBoundingClientRect: () => ({ - top, - left, - width, - bottom: top - height, - right: left - width, - height - }), - clientWidth: width, - clientHeight: height - }; +export const usePosition = ({ + reference, + floating, + followCursor, + placement = 'top', + modifiers = [flip(), shift({ limiter: limitShift() })] +}: PositionOptions = {}) => { + const { refs, floatingStyles, update } = useFloating({ + open: true, + placement, + middleware: modifiers, + elements: { + reference: reference, + floating: floating } + }); - return refElement; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [followCursor, reference, refPointer, mouse]); - - useLayoutEffect(() => { - let rqf; - - const onMouseMove = ({ pageX, pageY }: MouseEvent) => { - mouse.current = { pageX, pageY }; - popper.current?.scheduleUpdate(); - }; - - const onWindowScroll = () => { - rqf = requestAnimationFrame(() => { - popper.current?.scheduleUpdate(); - }); - }; - - if (elementRef.current && popperRef) { - //@ts-ignore - popper.current = new PopperJS(popperRef, elementRef.current, { - placement: placement || 'top', - modifiers: modifiers || {}, - onCreate: () => { - if (typeof window !== 'undefined') { - window.addEventListener('scroll', onWindowScroll); - - if (followCursor) { - window.addEventListener('mousemove', onMouseMove); - } - } + const onMouseMove = useCallback( + ({ pageX, pageY }: MouseEvent) => { + console.log('pageXY', pageX, pageY); + refs.setPositionReference({ + getBoundingClientRect() { + return { + width: 0, + height: 0, + x: pageX, + y: pageY, + left: pageX, + top: pageY, + right: pageX, + bottom: pageY + }; } }); - } - - return () => { - if (!elementRef.current) { - popper.current?.destroy(); - - cancelAnimationFrame(rqf); - if (typeof window !== 'undefined') { - window.removeEventListener('scroll', onWindowScroll); - - if (followCursor) { - window.removeEventListener('mousemove', onMouseMove); - } - } - } - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [elementRef.current]); + }, + [refs] + ); useLayoutEffect(() => { - if (popper.current) { - popper.current.reference = popperRef as any; - popper.current.scheduleUpdate(); + if (followCursor) { + window.addEventListener('mousemove', onMouseMove); } - }, [popperRef]); - return [elementRef, popper]; + return () => { + window.removeEventListener('mousemove', onMouseMove); + }; + }, [followCursor, onMouseMove]); + + return { + refs, + anchorRef: refs.reference, + floatingRef: refs.floating, + floatingStyles, + update + }; }; From d9a701eb0bd8bc52d93f189a78602b02418e20ac Mon Sep 17 00:00:00 2001 From: SerhiiTsybulskyi Date: Wed, 12 Jun 2024 12:38:22 +0300 Subject: [PATCH 2/3] clean up --- src/layers/Menu/Menu.tsx | 13 ------------- src/layers/Tooltip/Tooltip.story.tsx | 16 +--------------- src/utils/Position/usePosition.tsx | 2 +- 3 files changed, 2 insertions(+), 29 deletions(-) diff --git a/src/layers/Menu/Menu.tsx b/src/layers/Menu/Menu.tsx index d6e843d6..5a2efb0d 100644 --- a/src/layers/Menu/Menu.tsx +++ b/src/layers/Menu/Menu.tsx @@ -143,19 +143,6 @@ export const Menu: FC = forwardRef< ) => { const id = useId(); - const shiftByOnePixel = { - name: 'shiftByOnePixel', - fn({ x, y }) { - return { - x: x + 1, - y: y + 1, - data: { - amount: 1 - } - }; - } - }; - const internalModifiers = useMemo(() => { if (autoWidth) { const sameWidth = { diff --git a/src/layers/Tooltip/Tooltip.story.tsx b/src/layers/Tooltip/Tooltip.story.tsx index 04940b63..8305c957 100644 --- a/src/layers/Tooltip/Tooltip.story.tsx +++ b/src/layers/Tooltip/Tooltip.story.tsx @@ -76,21 +76,7 @@ export const FollowScroll = () => ( color: 'green' }} > -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Hover me
); diff --git a/src/utils/Position/usePosition.tsx b/src/utils/Position/usePosition.tsx index 42c2b176..29ac1386 100644 --- a/src/utils/Position/usePosition.tsx +++ b/src/utils/Position/usePosition.tsx @@ -52,7 +52,7 @@ export const usePosition = ({ const onMouseMove = useCallback( ({ pageX, pageY }: MouseEvent) => { - console.log('pageXY', pageX, pageY); + // Virtual reference object for cursor position. refs.setPositionReference({ getBoundingClientRect() { return { From b53725886d998df2c9bb615584063d0604be45a0 Mon Sep 17 00:00:00 2001 From: SerhiiTsybulskyi Date: Wed, 12 Jun 2024 12:48:15 +0300 Subject: [PATCH 3/3] add checking --- .../Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx index 0cc73947..4f8972f0 100644 --- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx +++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx @@ -150,9 +150,11 @@ export const ConnectedOverlayContent: FC< }); useEffect(() => { - if (refs.reference && overlayIndex) { - (refs.reference.current as HTMLElement).style.zIndex = - overlayIndex.toString(); + if (refs.reference && refs.reference.current && overlayIndex) { + (refs.reference.current as HTMLElement).style?.setProperty( + 'zIndex', + overlayIndex.toString() + ); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [refs.reference.current, overlayIndex]);