everweij / react-laag Goto Github PK

Is it possible to make the closeOnOutsideClick setting work for nested popovers/menus?

I.e. if I have a nested menu, it should close when I click outside all of the menu layers, but not close the entire menu if I click inside a child layer (as it currently does).

If not, is there any workaround I can use?

https://www.react-laag.com/docs#tooltip

Both on Mac and iPhone:

The docs include a reference to this:

So I think it would be best to include this fix in the examples, no?

In general it would be a huge win to have the library defer to ResizeObserver + IntersectionObserver where possible.

We have a big results list where each item has 3 popovers. So 3 * 25 in the typical case. I’m noticing in multiple cases react-laag is calling getBoundingClientRect during mount/unmount. This is totally unnecessary.

One, it can call that once you hover no need to do it eagerly. Second, it can do it only when it’s intersecting on the screen. Third, it can use ResizeObserver to avoid some calls altogether.

This is sorely needed for React. There just doesn’t exist a great Popover primitive and that sucks. I should help write it instead of bitching here, but instead I’ll just bitch for now. I spent way too much time writing one a while ago but it didn’t have the elegance of API as you have here.

Would be absolutely awesome to see movement here.

Even better: make a generic utility for tracking size that combines the best of MutationObserver (can it help avoid some work?) ResizeObserver, IntersectionObserver and finally when all else fails getBoundingClientRect. I’d love to have a micro library that made a sane API for that to use elsewhere.

I am getting an error in IE 11 (I wish I didn't have to support it but... corporate) with a syntax error

return Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {

It's erroring on the fat arrow.

I suspect this is something misconfigured on my end but everything worked and built correctly until I added react-laag and I'm not good enough at understanding webpack and babel yet to know.

I had my webpack output the stats file to analyze the dependencies

It looks like ./node_modules/react-laag/dist/index.es.js is getting picked up which does in-fact contain the fat arrows.

I see that the package.json contains

  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",

I don't know enough about module and jsnext:main to know if that's correct.

Looking at Redux in node_modules for comparison they do something similar and appear to use similar tooling with rollup and typescript.

"main": "lib/redux.js",
"module": "es/redux.js",

However I can't find any fat arrows in their es/redux.js.

All that said, browsing the examples in IE11 mostly work so maybe is in my janky configs: https://gist.github.com/pebcakerror/c1bccfcf91c345b46a074e9e725f536b

Our codebase @userlike has a very similar menu solution, so we had plans to reuse react-laag and potentially contribute with bug fixes.

Now I gave it a try to replace our menu/dropdown/tooltips with react-laag, but sadly it didn't work out.

Our "Dropdown" component takes the triggerRef from outside (because we have a few cases in which triggerRef is needed by others) and it can be both controlled and uncontrolled.

useToggleLayer looks pretty good for our use cases, but it lacks a controlled mode.

Our Dropdown component has the following prop:

interface DropdownProps {
  openState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
}

It's optional. If it's not passed, Dropdown is uncontrolled. Otherwise it's controlled.

Actually, let me give the full picture:

  const openState = useState(false);
  const [open, setOpen] = openState;

  const triggerRef = useRef();
  const layerRef = useRef();
  
  return (
      <Dropdown layer={() => <div ref={layerRef}>Hello</div>} layerRef={layerRef} triggerRef={triggerRef} openState={openState} ...>
        <button ref={triggerRef} onClick={() => setOpen(open => !open)}>Toggle</button>
      </Dropdown>
  );

Dropdown manages positioning the layer, closing on outside clicks etc.
And we have another component that reuses Dropdown to attach key binds and hovers to make an accessible dropdown menu. We've noticed that Dropdown has the best chance of reuse if layerRef, triggerRef and open state can be passed from outside.

Dropdown's behaviour is encoded inside a useDropdown hook, so other hooks can reuse dropdown's logic.

Sorry for my lengthy/unstructured writing.

Hi Erik,

See the following Sandbox: https://codesandbox.io/s/react-laag-menu-viewport-margin-x40cc

When opening the menu, it has no margin relative to the viewport:

Even though scrollOffset: 12. Any idea what is the problem here?

I take an example from the documentation. I connect dependencies.

import React from 'react';
import { useToggleLayer, anchor } from 'react-laag';
import { translate } from 'react-i18next';
import './style.css';

const CWMainNone = () => {
  const [element, toggleLayerProps] = useToggleLayer(
    // render the layer
    ({ layerProps, isOpen }) => isOpen && <div {...layerProps} />,
    // provide some options, like placement
    { placement: { anchor: anchor.BOTTOM_CENTER } }
  );

  return (
    <div>
      {element}
      <div onClick={toggleLayerProps.openFromMouseEvent}>Click me!</div>
    </div>
  );
};

export default translate()(CWMainNone);

Running webpack and getting an error

ERROR in ./node_modules/react-laag/dist/index.es.js
Module parse failed: Unexpected token (497:11)
You may need an appropriate loader to handle this file type.
|   } = splitAnchor(anchor);
|   const primaryDirection = getPrimaryDirection(anchor);
|   return { ...getPrimaryStyle(primary, rects, scroll, triggerOffset),
|     ...getSecondaryStyle(secondary, rects, scroll, offsetSecondary, primaryDirection)
|   };

Fixed with option in webpack include: [/src/, /node_modules\/react-laag/]. With plugin for babel '@babel/plugin-proposal-object-rest-spread'. Before be exclude: /node_modules/.

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader'
        },
        include: [/src/, /node_modules\/react-laag/]
      },
      {
        test: /\.css$/,

Perhaps it is worth collecting bundle with the correct destructuring, rest, spread.

Just ran into a fairly nasty bug using useTooltip that I actually tracked down to a react problem, but thought it would be good to include in the docs.

In short: Disabled buttons in react fire mouseenter events (will open the tooltip) but they do NOT fire mouseleave events (the tooltip never goes away!) This can be fixed by applying pointer-events: none; to the disabled button.

Here's a codesandbox illustrating the issue (and solution)

The relevant react issue: facebook/react#4251

An example of react-bootstrap documenting this in their tooltip documentation: https://react-bootstrap.github.io/components/overlays/#overlays-disabled

Just thought it would be good to call this out so nobody else has to get very confused when their tooltips become permanent...

Is it possible to have an example of how to use the open() method from useToggle? I don't understand what the clientRect and target parameters are, where I can access them from, or why they need to be passed in order to open the layer.

More context: I'm trying to open the layer from a keyboard event (so I can't use the openFromMouseEvent() like I do when clicking through the GUI). I basically want an open() method I can call from a keyboard event.

Based on the example from the release notes:

function New() {
  const [ isOpen, setOpen ] = React.useState( false )

  const { layerProps, triggerProps, renderLayer } = useLayer({ isOpen })

  return (
    <AnimatePresence>
      <button onClick={() => setOpen( !isOpen )} {...triggerProps}>Trigger</button>
      {isOpen && renderLayer( <motion.div {...layerProps}>Layer</motion.div> )}
    </AnimatePresence>
  )
}

This triggers the following error:

Uncaught Error: react-laag: Could not find a valid reference for the layer element. There might be 2 causes:
   - Make sure that the 'ref' is set correctly on the layer element when isOpen: true. Also make sure your component forwards the ref with "forwardRef()".
   - Make sure that you are actually rendering the layer when the isOpen prop is set to true

It does work when I replace the <AnimatePresence> with a Fragment (<>).

Hi! Can we please have support for React 17 so I don't get this peer dependency warning when installing in my React 17 projects? Thanks!

npm WARN [email protected] requires a peer of react@^16.8.0 || ^16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^16.8.0 || ^16.9.0 but none is installed. You must install peer dependencies yourself.

Thanks for the great library. I submitted a merge request to correct the spelling of "menus".

#25

So it appears this is broken in Edge 18 (at least). Loading the tooltip example (https://pt2en.csb.app/) in Edge results in this error:

Unhandled promise rejection: Syntax error Expected identifier, string or number.

In my own app, simply importing the package also gives the same error on Edge.

Any ideas?

The useTooltip documentation linked in the sidebar of the docs page is not there. Clicking the link does not navigate, and putting the URL in manually gets a 404.

The sidebar links to https://www.react-laag.com/docs/usetooltip/

Right now, it's tricky to get things like nested menu's working...

Take the following config:

useLayer({
  placement: 'right-center',
  possiblePlacements: [
    'right-center',
    'left-center',
    'bottom-center',
    'top-center',
  ],
  auto: false,
})

Expected result:

Actual result:

The possiblePlacements are only used when auto is set to true. This does not make sense to me, also when reading the definition of auto:

should we switch automatically to a placement that is more visible on the screen?

What I want to happen here is for useLayer to find the best position when opening the layer, but not reposition it afterwards. This way, there is no possibility to do that, because you'd always need to set auto to true.

Suggested change: make auto only control repositioning of an open layer, and initial placement always take possiblePlacements into account. If you'd not want any other positions to be selected, you just leave possiblePlacements empty right?

The arrow position is not aligned to the tooltip if the toggle element is too large and we use a corner anchor:

We have a popover componet that moves out of the root component and gets created as a sibling of the root.

We are not able to find the exact reason of this, as it seems to be working fine in other places of the application, but in a few pages for the first time it renders properly, but from the second time it gets created as a child to the root component.

Can you please let us know on this?

Hi. Thx for the great library. Is it the correct behavior that u can not import types from react-laag/dist/ToggleLayer/types.d.ts ?

import { ToggleLayerOptions } from 'react-laag'; // has no exported member 'ToggleLayerOptions'

Example:
https://codesandbox.io/s/icy-bush-kj4qv

Problem
I am not able to make production build of my Next.js project after update to [email protected]. Development build (using nodemon) works fine. It won't work both on my local Debian in WSL 1 (node 15.2.1) and dockerized production server (some stable node 14 on alpine linux) but previously it worked fine with [email protected]. Any idea what I do wrong? Thanks :-)

yarn run v1.22.5
$ rm -rf ./next && next build && tsc --project tsconfig.server.json
Loaded env from /mnt/c/sample-project/.env.local
Loaded env from /mnt/c/sample-project/.env.production
Loaded env from /mnt/c/sample-project/.env
info  - Using external babel configuration from /mnt/c/Develop/sample-project/.babelrc
info  - Creating an optimized production build
info  - Compiled successfully

> Build error occurred
TypeError: p.jb is not a function
    at Object.<anonymous> (/mnt/c/Develop/sample-project/node_modules/react-laag/dist/react-laag.cjs.production.min.js:12:248)
    at Module._compile (node:internal/modules/cjs/loader:1102:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/mnt/c/Develop/sample-project/node_modules/react-laag/dist/index.js:5:20)
    at Module._compile (node:internal/modules/cjs/loader:1102:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.0TEl (/mnt/c/Develop/sample-project/.next/server/pages/_error.js:185:18)
    at __webpack_require__ (/mnt/c/Develop/sample-project/.next/server/pages/_error.js:23:31)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment:

• Next.js 10.0.1, React 17.0.1, TypeScript 4.1.3, Node.js 15.2.1, Yarn 1.22.5
• OS: Debian 10 buster (WSL 1 on Windows 10 Pro 2004)

Hey guys, I have some problem when I try to test my ToggleLayer, I receive an error.

Can you provide some information about whether this is related to "react-laag" or not?

My test
I am using @testing-library/react

describe('Tooltip content', () => {
	it('should render tooltip if a text is not empty', () => {
		const content = faker.random.word();

		const { getByText } = render(
			<WithTooltip text={faker.random.word()}>
				<div>{content}</div>
			</WithTooltip>,
		);

		fireEvent.mouseOver(getByText(content));
		expect(ToolTip).toBeCalled();
	});
});

My component

export const WithTooltip = (props: PropsWithChildren<{ text: string }>) => {
	const text = props.text;
	return (
	     <ToggleLayer
		    ResizeObserver={ResizeObserver}
		    renderLayer={({ layerProps, isOpen }) =>
	    		isOpen && (
				<Styled.ToolTip
					ref={layerProps.ref}
					style={{
						...layerProps.style,
					}}
				>
					<Styled.Text>{text}</Styled.Text>
				</Styled.ToolTip>
			)
		}
		placement={{
			anchor: anchor.TOP_CENTER,
			autoAdjust: true,
			triggerOffset: 5,
		}}
	>
		{({ open, close, triggerRef }) => (
			<span ref={triggerRef} onMouseOver={open} onMouseLeave={close}>
				{props.children}
			</span>
		)}
	</ToggleLayer>
    );
};

Is it possible to have some more documentation on the logic behind autoAdjust?

For example, how does it respond regarding container margins, padding, and different container overflow properties?

Right now, there's a lot of information on the docs page (https://www.react-laag.com/docs). As more and more features are added to the library, the docs become harder to read. Also, there are some props that could benefit from some examples to clarify their use-case(s).

Hey there \o

I'm working with some browsers compatibility. Testing on Chrome, Firefox and Edge, the toolptip is doing well, but on IE (in its twentieth version), i'm having some problems with a unnecessary addition of top in relation to the document, making the Tooltip out of alignment with its parent component.

Chrome example:

IE example:

Currently, the code of the Tooltip looks like that:

import React, { cloneElement } from 'react';
import ResizeObserver from "resize-observer-polyfill";
import { useToggleLayer, anchor, Arrow } from 'react-laag'

 import Container from './styles';

function Tooltip({ content, children }) {

  const [element, toggleLayerProps] = useToggleLayer(
    ({ layerProps, isOpen, arrowStyle, layerSide }) => isOpen && (
      <Container 
      ref={layerProps.ref}
      style={{
        ...layerProps.style,
      }}
      >
        {content}
        <Arrow 
          style={{
            ...arrowStyle,
          }}
          layerSide={layerSide}
          backgroundColor="#FFFFFF"
          borderWidth={1}
          borderColor="#FFFFFF"
          angle={40}
          size={9}
          roundness={0.8}
        />
      </Container>
    ),
    {
      placement: {
        anchor: anchor.RIGHT_CENTER,
        triggerOffset: 10
      },
      closeOnOutsideClick: true,
      ResizeObserver,
    }
  )
  return (
    <>
    {element}
    {cloneElement(children, {onClick: toggleLayerProps.openFromMouseEvent})}
    </>
  )
}

export default Tooltip;

I'm don't have sure if my approach is the best way of abstraction and reuse with the lib, if that is wrong, i'd like to know the best pratice. I'm just want to figure out why i'm having this browsers mismatch 😅

In the process of reimplementing my react-popper-based Tooltip component with react-laag, I ran into an issue. I’ve used Popper’s createPortal support to position my tooltips at a specific place in the DOM. Something like this:

<Tooltip
  tooltip="Project status"
  container={document.querySelector( '.grid .projects .tooltips' )}
>
  <Project />
</Tooltip>

There’s a couple reasons I do this:

1. I can easily control the tooltips z-index by setting it on the .tooltips element;
2. The width and style (font size, weight etc) of the tooltips is not influenced by its target;
3. But more importantly, I can make sure the tooltips scroll with the content (without JS repositioning jank). I simply put the .tooltips container in the same scroll parent as the content and it automatically works.

When I attempt to use a portal in renderLayer, the positioning is off. Any advice or is this simply not supported?

Hi Erik, me again ;) I ran into an issue while creating a menu with submenus. See this codesandbox: https://codesandbox.io/s/react-laag-sub-menus-k3kfn

1. Open the menu
2. Click "Visibility"
3. Note that the menu closes, and the console prints "close via outside click"

Expected behaviour: menu doesn’t close.

Hello, great component. one question: I tested a menu accessible (as described here: https://dev.to/everweij/accessible-and-adaptive-select-menu-s-using-react-laag-and-downshift-abn)
But since the Menu is rendered in DOM not in root and right before body end the autofocus causes a automatic scroll to the end of my view (although the menu is in the header).
I hope I did describe this clearly. any ideas. thanks.
(-- I believe it actually is a downshift topic. so probably the wrong spot here.)

[nothing urgent for me]

This documentation example doesn't seem to work properly in Safari:

https://codesandbox.io/s/nested-context-menus-xx52d?fontsize=14

The menu doesn't stay visible unless you hold down the mouse/trackpad while right-clicking. Unlike for Firefox where right-click alone is enough to keep the menu open.

Is it possible to have a documentation example of using useHover and useToggleLayer together? I could only find examples of each separately, and wasn't able to work out how to use both together. E.g. the tooltip example shows useHover with ToggleLayer but not useToggleLayer.

https://codesandbox.io/s/tooltip-pt2en?fontsize=14

(also, as feedback, I think the the Tooltip example could illustrate the point more clearly to newcomers if it were simpler, for example without framer-motion or styled components.)

Laag does not wait for a delay in rendering React at the default value "isOpen = true" and throws an error:

Could not find a valid reference of the trigger element. See https://www.react-laag.com/docs/togglelayer/#children for more info.

default value
isOpen=true

case
When the page is displayed, the tooltip should be visible

sandbox with error

const [show, toggle] = useState(true);

https://codesandbox.io/s/busy-night-3pjt5?fontsize=14&hidenavigation=1&theme=dark

When rendering into iframes/shadow-dom, global window and document refer to different instances than those that are rendered in. A similar capability to downshift's environment prop is needed.

I'm sure I'm missing something, but I'm having a hard time finding out how to set my tooltips permanently open/visible based on some state value I send them, and not dependent on hovering.

Thanks in advance.

Apologies if there is an easy way to do this that I'm missing, but I would like my tooltips to show when the target is focused. For example, I like to do this on IconButton's (A button that just has an Icon and an aria-label) so that when the user hovers over the IconButton or tabs to it, they get a helpful tooltip. useTooltip makes supporting hover very easy (since it uses useHover), but I'd love to support both hover and focus.

Not sure what is going wrong here, but check out this sandbox: https://codesandbox.io/s/react-laag-tooltip-positioning-ej9hs

The tooltip is not positioned correctly:

Note that when you remove the <nav> component, somehow it works:

This took like 2 hours to reproduce.. hope you can figure it out 😅

Uh oh, wrong repo, sorry 🙈

Parameter similar to https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.padding

Hi.

Is it possible to do something like this

type Props = {
  triggerRef: React.RefObject<HtmlElement>
}

funciton Tooltip(props: Props) {
  return <ToggleLayer triggerRef={props.triggerRef />
}

Does this library have accessibility features similar to downshift and react-beautiful-dnd that were mentioned in the introductory block post?

Small one: it would be nice if useHover() wouldn’t trigger an error.

• const [ show, hoverProps ] = useHover({}) -> works (defaults are used)
• const [ show, hoverProps ] = useHover() -> error ("cannot destructure null or undefined")

When using the code provided by the builder on the homepage I get an error after clicking on the toggle. It displays without error on initial render.

Threw mostly stripped down code: https://github.com/pebcakerror/nav-poc

TypeError: Cannot read property 'getBoundingClientRect' of null
(anonymous function)
C:/DEV/projects/misc/src/ToggleLayer/ToggleLayer.tsx:81
  78 | const isOpen = isSet(isOpenExternal) ? isOpenExternal! : isOpenInternal;
  79 | 
  80 | const handlePositioning = React.useCallback(() => {
> 81 |   const triggerRect = triggerElement!.getBoundingClientRect();
     | ^  82 | 
  83 |   const result = getPositioning({
  84 |     triggerRect,
View compiled
(anonymous function)
C:/DEV/projects/misc/src/ToggleLayer/ToggleLayer.tsx:203
  200 |   //   throw new Error("Please provide a valid ref to the layer element");
  201 |   // }
  202 | 
> 203 |   handlePositioning();
      | ^  204 | });
  205 | 
  206 | // calculate new layer style when window size changes
View compiled
▼ 20 stack frames were expanded.
commitHookEffectList
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:22030
commitLifeCycles
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:22080
commitLayoutEffects
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:25344
HTMLUnknownElement.callCallback
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:336
invokeGuardedCallbackDev
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:385
invokeGuardedCallback
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:440
commitRootImpl
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:25082
unstable_runWithPriority
C:/DEV/projects/misc/nav-poc/node_modules/scheduler/cjs/scheduler.development.js:697
runWithPriority$2
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12149
commitRoot
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:24922
finishSyncRender
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:24329
performSyncWorkOnRoot
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:24307
(anonymous function)
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12199
unstable_runWithPriority
C:/DEV/projects/misc/nav-poc/node_modules/scheduler/cjs/scheduler.development.js:697
runWithPriority$2
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12149
flushSyncCallbackQueueImpl
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12194
flushSyncCallbackQueue
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:12182
discreteUpdates$1
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:24423
discreteUpdates
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:1438
dispatchDiscreteEvent
C:/DEV/projects/misc/nav-poc/node_modules/react-dom/cjs/react-dom.development.js:5881
▲ 20 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

https://github.com/pebcakerror/nav-poc/blob/master/src/components/AppHeader/components/ProfileNav/ProfileNav.js:

import React from "react";
import { ToggleLayer } from "react-laag";

function ProfileNav() {
  return (
    <ToggleLayer
      renderLayer={({ isOpen, layerProps }) =>
        isOpen && (
          <div
            ref={layerProps.ref}
            className="layer"
            style={{
              ...layerProps.style,
              width: 150,
              height: 100,
              backgroundColor: "#e7f5ff",
              borderWidth: 1,
              borderColor: "#d8d6d9"
            }}
          >
            Layer
          </div>
        )
      }
      placement={{
        autoAdjust: true,
        triggerOffset: 10
      }}
    >
      {({ innerRef, toggle }) => (
        <button ref={innerRef} className="toggle-btn" onClick={toggle}>
          Toggle
        </button>
      )}
    </ToggleLayer>
  );
}

export default ProfileNav;

Hey,
I think that input validation example has a small issue with positioning dropdown in one case.

Demo below

Gif

On https://www.react-laag.com it refers to this
import { ToggleLayer, anchors } from "react-laag";

However the export is anchor

Currently the library requires window..

Maybe look for a way to check if the component is being rendered in the browser before doing that to support SSR

Just wondering, is this a known thing because documentation/issues seems to suggest not.

I would have expected the default behavior to use portals and position the popovers completely outside everything. Instead, it seems to render it inside at the parent scroll element.

But as is often the case scroll elements have overflow hidden, so 95% of our popovers fail.

I tried adding container={document.body} thinking that would solve it, but then all popovers appear all the way at the top left of the page, they seem to only add the offset relative to the element and none from the top left of the whole page.

Is this possible? Perhaps I'm missing passing something, I've tried a few variants. If so, it's a big gap in a popover library that otherwise seems well done.

I'm trying to create a widget container which has a lot of widgets in itself. Users can open multiple widgets at the same time and I'm planning to use this library to implement this functionality.

However I'm not sure if it's possible to open multiple popovers at the same time without intersecting with each other. So I expect it to be opened next possible position (next to the other popovers)

Right now, when the user scrolls the page while a tooltip for example is open, it will hide the tooltip automatically. It would be nice if the user could set a flag hideOnScroll: true / false in the options object (1st argument of useHover).

Given the following config:

possibleAnchors: [
  anchor.RIGHT_CENTER,
  anchor.BOTTOM_CENTER,
  anchor.LEFT_CENTER,
  anchor.BOTTOM_LEFT,
  anchor.BOTTOM_RIGHT,
  anchor.TOP_CENTER,
]

I would expect this menu to be placed BOTTOM_CENTER:

And this one to be LEFT_CENTER:

Right now, it seems to pick somewhat randomly from the available options. Could this behaviour be changed so it picks the first available option?