snowcoders / react-popover

A wrapper around @snowcoders/react-popper to give a quick start to 90% of the popover scenarios

Deprecated

Though the concept is still useful, popper.js has new hook options that make implementing the scenarios in here much easier. I highly recommend looking at their documentation directly

Wrapper around react-popper that handles ~95% of popper scenarios

Use it

npm install --save @snowcoders/react-popover save-prefix "~"

Parent Library

This component is part of a larger components library, react-ui-base. The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy).

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site https://snowcoders.github.io/react-ui-base/

This component

~95% of popovers fall into a basic category of I have a target that opens a popover and I want a popover that dismisses after a user action. This library summarizes that logic by providing Target types and Popover types that are interchangable. Currently, the available types are

• Target
  • Click - Popover opens when the user clicks on the target
  • Hover - Popover opens when the user hovers on the target
• Popover
  • Click - Popover closes when the user clicks anything except the popover. This click is not sent to the document.
  • Blur - Popover closes when the user clicks anything except the popover. This click is sent to the document.
  • Hover - Popover closes when the user hovers off of the popover

Basic usage

To see a live example, go to our demo site https://snowcoders.github.io/react-ui-base/

<Popover
  isOpen={false}
  popperContent={"I'm inside the popover"}
  popperOptions={{
      placement: "bottom"
  }}
  popperType={"hover"}
  targetContent={"I'm the target text"}
  targetType={"hover"}
/>

react-popover's Issues

Styles.scss should include unstyled-button-styles

If you use popper, the unstyled-button doesn't get styled and it looks like a normal button.

Temporary work around is to import it manually into your code but that's not ideal.

Event object should be passed to TargetClick and PopperBlur

Remove use of srcElement

Looks like it's been deprecated for a while and we should instead use target

Move to react-popper

https://github.com/FezVrasta/react-popper is now at 1.0.0 which means @snowcoders/react-popper will be deprecated. Time to migrate!

TargetClick should be a button

TargetClick should be a button since it's a click event for accessibility purposes

Need more variability in button

Using this library there is a bit of a frustration regarding how targets fill their space. For inline text and tooltips it works great. But lets say you want to create a dropdown component, the target doesn't fill out the space of the parent making the target be very small. I'll try to write up an example later but figuring I'd open the issue and see if someone already has this issue.

Also, it would be great to be able to use an existing button from a styled library instead of an unstyled button. If I'm aligning to material ui for example, it would be nice to just pass the material ui button instead of having to rewrite the styles for it.

Initial position seems to be off

On first load sometimes the popover seems to be positioned incorrectly and then on scroll or resize it positions correctly. Trying to figure out how to create a demo...

Component should reposition if the content inside changes size

This did work before 1.1.0 but seems to not work anymore...

Controlled component does not reposition when reopened

Repro environment is a bit difficult to create.

1. Open the popover
2. Animate something that will move the anchor
3. Close the popover
4. Open the popover

Expected
The popover to move on animation or to reposition when re-opened

Move away from using document listeners

When using a document listener for the "blur" popover type, if an element consumes an event but stop propagation, the dropdown won't be dismissed when that element is clicked.

Build failure due to popper.js positionFixed property

We need this property for popper.click to work properly but it's not available in the current release of popper.js. Soo waiting...

Reposition popover when the content inside the popover changes

Here is the scenario, you have a list with a filter inside of it

Now you start to filter on it

Here is the first issue, clearly the popover and the target do not reposition next to one another. Finally when you try to click on the item it actually does move but the item isn't selected

This results in a very jarring experience.

export es5 instead of es6

I'll try and create a reproduction environment so we can test this properly but it seems that the es6 isn't supported by node.js 6.10.0 (http://node.green/) which is going to limit usage of this library. This means that server side rendering for this component doesn't work.

We've tried a few things (getting babel to translate the node_module) but can't figure out a way to do it without putting some babel keywords into this library.

Basically, mind putting this at es5 and commonjs for the short term and I can work with you to figure out what a longer term solution is because I do agree, we should just be outputing es6 modules at this point.

Clean up build output

The build output has multiple js files and is a bit big... if you integrate webpack with this starting config it should get you going
webpack.config.js.txt

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset package is missing a renovate-config entry (@snowcoders)

React warning thrown from Popover

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Popover. See https://fb.me/react-warning-keys for more information.
in TargetHover (created by Popover)
in Popover (created by Tooltip)

Dependency Dashboard

This issue contains a list of Renovate updates and their statuses.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• Pin circleci/node Docker tag
• Update dependency prettier to v2.2.1
• Update dependency react-popper to v1.3.7
• Lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency lint-staged to v10.5.4
• Update dependency ts-jest to v26.5.0
• Update dependency react-popper to v2
• Check this option to rebase all the above open PRs at once

---

• Check this box to trigger a request for Renovate to run again on this repository