react-overlays
Utilities for creating robust overlay components.
Documentation
https://react-bootstrap.github.io/react-overlays
Installation
npm install --save react-overlays
Notes
All of these utilities have been abstracted out of React-Bootstrap in order to provide better access to the generic implementations of these commonly-needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, CSS or otherwise.
If you are looking for more complete overlays, modals, or tooltips β something you can use out-of-the-box β check out React-Bootstrap, which is built using these components.
Modal does not work with React 16
Probably the same issue as https://github.com/facebook/react/issues/9808. When the Modal is shown and tries to get focus (via
componentDidUpdate
->onShow
-focus
),setModalNode
will not have been called andgetDialogElement
will returnundefined
.Use Popper for position calculations
There's a functional change here in same-axis positioning when the positioned element is about to escape. Otherwise I think everything mostly works the same. There's a debounce on the initial update, but that's not really noticeable.
I changed the API a bit to make it maybe cleaner. Plus now I explicitly hide the positioned element when we don't have a position for it.
We're not really exposing all that Popper is offering, but I'm okay with that. This closes a lot of the positioning issues on our end.
Closes #52 Closes #135 Closes #175 Closes #176 Closes #178
Unknown props when using Overlay
Using React 15.2.0 and react-overlays 0.6.4 results in the following Warning in the console while using the
Overlay
component.Some code that shows how i use the
Overlay
component so that it is clear that my code isn't sending down wierd props.How to use the transition prop in Modal?
I have the following code:
but returned the following error:
Uncaught TypeError: (0 , _uncontrollable.default) is not a function
issue: Uncaught TypeError: (0 , _uncontrollable.default) is not a function
packages: react-dom: 16.8.6 react:16.8.6 react-overlays:1.2.0
still getting this error:
browser source: Uncaught TypeError: (0 , _uncontrollable.default) is not a function
var UncontrolledDropdown = (0, _uncontrollable.default)(Dropdown, { show: 'onToggle' });
browsewr console output: Uncaught TypeError: (0 , _uncontrollable.default) is not a function at Object../node_modules/react-bootstrap/node_modules/react-overlays/Dropdown.js (Dropdown.js:305) at webpack_require (bootstrap 5aa110fbdd7b2189a480:680) at fn (bootstrap 5aa110fbdd7b2189a480:105) at Object../node_modules/react-bootstrap/es/Dropdown.js (app.5aa110fbdd7b2189a480.js:105655) at webpack_require (bootstrap 5aa110fbdd7b2189a480:680) at fn (bootstrap 5aa110fbdd7b2189a480:105) at Object../node_modules/react-bootstrap/es/index.js (app.5aa110fbdd7b2189a480.js:110277) at webpack_require (bootstrap 5aa110fbdd7b2189a480:680) at fn (bootstrap 5aa110fbdd7b2189a480:105) at Object. (TooltipWrapper.jsx:2)
client?843a:38 [WDS] Hot Module Replacement enabled.
we do not directly use the uncontrolled component, it is being used by react-overlays in the Dropdown component.
anything i may be missing? and do i need to open a new issue for the same problem?
Originally posted by @MarkEmerson in https://github.com/react-bootstrap/react-overlays/issues/300#issuecomment-515867172
More placement types for Position
Would it be possible to add more placement types for the
Position
component? It works great, but I can only position in one dimension, the other gets centered (e.g. placement=bottom means essentially bottom center).Ideally, the
Position
component would have a similar API to that of jQuery UI Position - the user says what point of the element should be positioned to what point of the target. Is that realistic in the context of thePosition
component? .Fix transition in behaviour for unmountOnExit
It seems that if you're using the
unmountOnExit
option, then the Transition component both mounts your child component and applies theenteringClassName
in the same Javascript tick, this causes the browser to not trigger the animation (and instead theenteringClassName
attributes are immediately applied).By forcing a wait until the next Javascript tick in this case animation appears to reliable happen.
DO NOT MERGE: Add OverlayTrigger
I needed it, so I ripped it out from react-bootstrap. This needs to get cleaned up, but I figure having a PR doesn't hurt.
The examples server wasn't working for some reason, so I converted the two loaders to ES5 and used webpack-dev-server from the CLI.
Using npm v3.3.0, I managed to install all dependencies and generate a new example bundle. I was getting errors and updating all outdated dependencies somehow solved it. Re-added the jquense/component-playground package to get stuff working again.
In OverlayTrigger I removed the reference to react-bootstrap from the warning message. In OverlayTriggerSpec I removed the overlay types, since there's no tooltips / popovers here. Probably need to add a new test-case for that.
Reduced the Transition timeout from 5 seconds to 1 second, because otherwise the test would time out. Increased the wait-time for that test to 5 seconds as well.
You can confirm that it works by checking out by branch, and running a file-server from the examples folder.
AutoAffix - layout jumps up once affixed
Example code:
Initial layout:
Scrolled one pixel down to trigger the affix (opacity added via devtools):
Once
position: fixed
is applied, I believe there needs to be some kind of placeholder inserted with an equal height in order to keep sibling content from jumping up.As far as a solution, this worked for me, but it's kind of a mess. Is there a better approach or would you take a PR with something like this?
How to get more control over backdrop (I want to put an x mark on it)
Hey,
So I want to create a modal that has an x mark in the corner, and I'm having trouble.
So I have a reusable component encapsulating the react-overlay instance, and the same way that I'm passing a function to execute on hide, I'd like to be able to pass a function to the component encapsulating react-overlay that I can just execute.
I don't know how much I need to flesh this out, but basically I needed more control over the backdrop so I put my own backdrop inside the modal, and that's been working fairly well. I either need a way to get more control over the backdrop, or I need to figure out how to give the encapsulating component itself the ability to take the close function and execute it. Any ideas? If I need to flesh out any ideas let me know.
Expose public API to allow overflow when Modal is open
Currently the
style
object has a hard codedoverflow
value of'hidden'
.https://github.com/react-bootstrap/react-overlays/blob/master/src/ModalManager.js#L68
We have a use case where our UX team would like the user to be able to scroll the content behind the modal. We are not explicitly passing in a container, so it's defaulting to the body, and we'd like to avoid just styling the body element directly.
Would you guys accept a PR that implements an
allowScroll
prop? Or, if you want to generalize this, acontainerStyle
prop that is spread on the defaultstyle
object?chore(deps): bump express from 4.17.1 to 4.18.2
Bumps express from 4.17.1 to 4.18.2.
Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump express from 4.17.1 to 4.18.2 in /www
Bumps express from 4.17.1 to 4.18.2.
Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.
Changelog
Sourced from qs's changelog.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so itβs properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /www
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.