react-bootstrap/dom-helpers

tiny, extremely modular, DOM helper library for IE9+

React-Bootstrap

Bootstrap 5 components built with React.

Bootstrap compatibility

React-Bootstrap is compatible with various versions of Bootstrap. As such, you need to ensure you are using the correct combination of versions.

See the below table on which version of React-Bootstrap you should be using in your project.

Bootstrap Version	React-Bootstrap Version	Documentation
v5.x	2.x	Link
v4.x	1.x (not maintained)	Link
v3.x	0.33.x (not maintained)	Link

Migrating from previous versions

Bootstrap 4 to Bootstrap 5

If you would like to update React-Bootstrap within an existing project to use Bootstrap 5, please read our docs for migrating to React-Bootstrap V2.

Bootstrap 3 to Bootstrap 4

If you would like to update React-Bootstrap within an existing project to use Bootstrap 4, please read our docs for migrating to React-Bootstrap V1.

Related modules

• react-router-bootstrap – Integration with React Router
• Awesome React Bootstrap Components - Additional components like off-canvas navbar, switch and sliders.

Local setup

Yarn is our package manager of choice here. Check out setup instructions here if you don't have it installed already. After that you can run yarn run bootstrap to install all the needed dependencies.

From there you can:

• Run the tests once with yarn test (Or run them in watch mode with yarn run tdd).
• Start a local copy of the docs site with yarn start
• Or build a local copy of the library with yarn run build

CodeSandbox Examples

Click here to explore some React-Bootstrap CodeSandbox examples.

Click here to automatically open CodeSandbox with the React-Bootstrap CodeSandbox Examples GitHub Repository as a workspace.

Contributions

Yes please! See the contributing guidelines for details.

dom-helpers's Issues

Missing `index.d.ts` file?

cjs/index.d.ts is missing in the npm module. Oddly all the other TypeScript files seem to be present. See this listing on unpkg:

https://unpkg.com/browse/[email protected]/cjs/

hyphenate.d.ts
hyphenate.js
hyphenateStyle.d.ts
hyphenateStyle.js
index.js
isDocument.d.ts
isDocument.js

The compiled package.json references the missing index.d.ts file:

  "main": "cjs/index.js",
  "types": "cjs/index.d.ts",

Steps to reproduce:

import { style, contains, addClass, removeClass } from "dom-helpers";

gives:

Could not find a declaration file for module 'dom-helpers'. '[...]/node_modules/dom-helpers/cjs/index.js' implicitly has an 'any' type.
  Try `npm install @types/dom-helpers` if it exists or add a new declaration (.d.ts) file containing `declare module 'dom-helpers';`ts(7016)

Workaround:

import style from "dom-helpers/css";
import contains from "dom-helpers/contains";
import addClass from "dom-helpers/addClass";
import removeClass from "dom-helpers/removeClass";

Missing license file in NPM distribution

Hello, is it possible to incorporate the LICENSE file inside the npm package ? Now it's missing. It's implied by MIT license that if licensed under the MIT the source code must be accompanied by full license text. If the license file is not in the npm package a lot of people cannot use it because it's a proprietary code at that point. Patch release with containing a LICENSE file will fix this.

Thank you very much

Incorrect transitionEnd event name reported in Firefox

dom-helpers currently report mozTransitionEnd as the event name for Firefox, which is not implemented anymore in Firefox. Instead the standard transitionend should be used.

"cancelRequestAnimationFrame" API method check is missing

When vendor prefixed requestAnimationFrame API method is established, corresponding cancelRequestAnimationFrame API method is assumed to be present. But some devices such as Samsung Galaxy S3 simply don't provide it.
The proposal is to check for the cancelRequestAnimationFrame as well.

README

In the README the insertion of the line

It does expect certain, polyfillable, es5 features to be present for which you can use es5-shim for ie8

disturbs the flow of thoughts, currently:

For example events.on works in all browsers ie8+ but it uses the native event system so actual event oddities will continue to exist. If you need robust cross-browser support, use jQuery. If you are just tired of rewriting:

It does expect certain, polyfillable, es5 features to be present for which you can use es5-shim for ie8

if (document.addEventListener)
 return (node, eventName, handler, capture) =>
   node.addEventListener(eventName, handler, capture || false);
else if (document.attachEvent)
 return (node, eventName, handler) =>
     node.attachEvent('on' + eventName, handler);

over and over again, or you need a ok getComputedStyle polyfill but don't want to include all of jQuery, use this.

I was going to open a PR but thought to first ask if there is preference on where to move that line? I was thinking of moving the line to after the thought ends, possibly in parentheses:

For example events.on works in all browsers ie8+ but it uses the native event system so actual event oddities will continue to exist. If you need robust cross-browser support, use jQuery. If you are just tired of rewriting:

if (document.addEventListener)
 return (node, eventName, handler, capture) =>
   node.addEventListener(eventName, handler, capture || false);
else if (document.attachEvent)
 return (node, eventName, handler) =>
     node.attachEvent('on' + eventName, handler);

over and over again, or you need a ok getComputedStyle polyfill but don't want to include all of jQuery, use this.

dom-helpers does expect certain, polyfillable, es5 features to be present for which you can use es5-shim for ie8

or

...
over and over again, or you need a ok getComputedStyle polyfill but don't want to include all of jQuery, use this. (It does expect certain, polyfillable, es5 features to be present for which you can use es5-shim for ie8)

dom-helpers and more extensions

are there plans for adding more helpers to dom-helpers?

are there any contribution guidelines for this project?

Release process?

Hi @taion;

It would be helpful for me to have a 'release' made that includes the commits since the last release. Do you plan to make a release?

best regards,
Richard

Include type definition on the npm package.

Since now dom-helpers uses typescript, please include the type definition on release.

Build failing due as dependency is not resolved

Hello,

We are using "react-transition-group" version 2 and facing a build failure due to unresolved dependency. The build is successful in local system but failing when automated using atlassian bamboo as below. May I know whats going wrong here?.

ERROR in ./~/react-transition-group/CSSTransition.js build 11-Oct-2018 07:17:50 [INFO] Module not found: Error: Can't resolve 'dom-helpers/class/addClass' in '/apps/bamboo-agent-home/master-merge3/xml-data/build-dir/AV3-ACTMM3252-JOB1/ameliav3/amelia-admin-ui/node_modules/react-transition-group' build 11-Oct-2018 07:17:50 [INFO] @ ./~/react-transition-group/CSSTransition.js 8:39-76 build 11-Oct-2018 07:17:50 [INFO] @ ./~/react-transition-group/index.js build 11-Oct-2018 07:17:50 [INFO] @ ./common/amelia-common-ui/view/fr-login/FaceRecogLogin.js build 11-Oct-2018 07:17:50 [INFO] @ ./common/amelia-common-ui/containers/fr-login/FaceRecogLoginContainer.js build 11-Oct-2018 07:17:50 [INFO] @ ./src/containers/main/AdminApp.js build 11-Oct-2018 07:17:50 [INFO] @ ./src/index.js build 11-Oct-2018 07:17:50 [INFO] @ multi babel-polyfill ./src/index.js bpmn-js react react-dom path build 11-Oct-2018 07:17:50 [INFO] build 11-Oct-2018 07:17:50 [INFO] ERROR in ./~/react-transition-group/CSSTransition.js build 11-Oct-2018 07:17:50 [INFO] Module not found: Error: Can't resolve 'dom-helpers/class/removeClass' in '/apps/bamboo-agent-home/master-merge3/xml-data/build-dir/AV3-ACTMM3252-JOB1/ameliav3/amelia-admin-ui/node_modules/react-transition-group' build 11-Oct-2018 07:17:50 [INFO] @ ./~/react-transition-group/CSSTransition.js 10:42-82 build 11-Oct-2018 07:17:50 [INFO] @ ./~/react-transition-group/index.js build 11-Oct-2018 07:17:50 [INFO] @ ./common/amelia-common-ui/view/fr-login/FaceRecogLogin.js build 11-Oct-2018 07:17:50 [INFO] @ ./common/amelia-common-ui/containers/fr-login/FaceRecogLoginContainer.js build 11-Oct-2018 07:17:50 [INFO] @ ./src/containers/main/AdminApp.js build 11-Oct-2018 07:17:50 [INFO] @ ./src/index.js build 11-Oct-2018 07:17:50 [INFO] @ multi babel-polyfill ./src/index.js bpmn-js react react-dom path build 11-Oct-2018 07:17:50 [INFO] Child html-webpack-plugin for "index.html": build 11-Oct-2018 07:17:50 [INFO] [0] ./~/lodash/lodash.js 540 kB {0} [built] build 11-Oct-2018 07:17:50 [INFO] [1] ./~/html-webpack-plugin/lib/loader.js!./public/index.html 918 bytes {0} [built] build 11-Oct-2018 07:17:50 [INFO] [2] (webpack)/buildin/global.js 509 bytes {0} [built] build 11-Oct-2018 07:17:50 [INFO] [3] (webpack)/buildin/module.js 517 bytes {0} [built]​

events filter: add a delegate target to event param which pass to handler

Do your guys think that it is easier to use to add a delegate target property to event param which pass to handler， such as:

e.delegateTarget = closest(e.target, selector);
handler.call(element, e);

misspelling

https://github.com/react-bootstrap/dom-helpers/blob/master/src/query/scrollLeft.js#L4

fix error with null document.body

In some libraries used dom-helpers appear error:

matches.js:23 Uncaught TypeError: Cannot read property 'matches' of null
    at matches.js:23
    at Object.exports.__esModule (matches.js:28)
    at __webpack_require__

just replace code in dom-helpers/query/matches.js from

  if (_inDOM2.default) {
    (function () {
      var body = document.body;
      var nativeMatch = body.matches || body.matchesSelector || body.webkitMatchesSelector || body.mozMatchesSelector || body.msMatchesSelector;

      matches = nativeMatch ? function (node, selector) {
        return nativeMatch.call(node, selector);
      } : ie8MatchesSelector;
    })();
  }

to

document.addEventListener('DOMContentLoaded', function() {
  if (_inDOM2.default) {
    (function () {
      var body = document.body;
      var nativeMatch = body.matches || body.matchesSelector || body.webkitMatchesSelector || body.mozMatchesSelector || body.msMatchesSelector;

      matches = nativeMatch ? function (node, selector) {
        return nativeMatch.call(node, selector);
      } : ie8MatchesSelector;
    })();
  }
});

That fix problems for null document.body

DOM Helpers Utils not working inside Shadow DOM

Dom Helpers does not seem to working properly inside Web Component shadow dom. I am trying to use offset method to get the offset of an element.

const divElem = document.createElement("div");
    divElem.id = "right-toolbar-text";
    divElem.style.position = "relative";
    divElem.style.top = "100px";
    divElem.textContent = this.getAttribute("text");

    const shadowRoot = this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    shadowRoot.appendChild(divElem);

    const style = getComputedStyle(
      this.shadowRoot.getElementById("right-toolbar-text")
    );
    console.log(style.top); // returns 100px
    const domHelperStyle = domHelpers.offset(
      this.shadowRoot.getElementById("right-toolbar-text")
    );
    console.log(domHelperStyle); // return object with all values as zero

Ideally it should return top: 100px but it is returning

{
top: 0,
left: 0,
height: 0,
width: 0
}

However, getComputedStyle returns correct position values.

I have create a codepen here for this scenario https://codepen.io/yamraaaj/pen/BaZdPKm. I suspect other utils might not be working inside Shadow DOM as well.

IE11 assignment to read-only properties is not allowed in strict mode

There is an problem in: src/class/addClass.js line 8 here

I'm not sure how to fix this since the function changes the parameter property value.

I will try to work around this by removing the "use strict"; statement.

transitionEnd doesn't pass handler through to emulateTransitionEnd

Describe the bug

transitionEnd does not run handler for browsers that do not pass TRANSITION_END support check.

To Reproduce

Steps to reproduce the behavior:

1. Use transition end in a browser that does not pass 'ontransitionend' in window or canUseDOM check.

Expected behavior

The handler should still be ran for browsers that do not pass the above check.

Environment (please complete the following information)

• Operating System: Windows 10
• Browser, Version: IE 11
• React-Bootstrap Version: 1.0.0-beta.11

Additional context

TRANSITION_SUPPORTED variable is always false for IE 11.

@babel/runtime in dependencies

Is it intentional in package.json that @babel/runtime is in dependencies as opposed to devDependencies?

getScrollAccessor on window seems wrong

dom-helpers/src/getScrollAccessor.ts

Line 19 in 536ae60

win.scrollTo(win[offset], val)

When offset is pageYOffset, scrollTo will be invoked with scrollTo(currentPageYOffset, newPageYOffset). When offset is pageXOffset, scrollTo will be invoked with scrollTo(currentPageXOffset, newPageXOffset).

This doesn't seem to be right. What we want to do is to preserve the value of X when we are changing Y and vice-versa.

`scrollbarSize` util function not documented in README

The utility function scrollbarSize is not documented in the README, yet it is as usable as the rest of the exposed functions. Is there a reason behind this?

I haven't checked thoroughly, but there might be other functions that could be exposed as well that aren't documented either.

support matrix

what browsers should we actually support here? RB has a bottom at ie11, and that seems fairly standard now, should we do that? react still theoretically supports ie9+ but in practice it asks you to pollyfill things like RAF, and really only handles the inconsistencies in places where it's not much more work above the ie11 support

In a quick run through i think we'd be able to remove a fair bit of cruft doing ie11+, removing ie8 gets us a lot but the ie9-10 support is not nothing. Question is who is stuck on ie9-10? In practice those people are almost certainly on ie11. I've never had a support issue for ie9-10 specifically

Question: Does this exist on a cdn?

I was hoping to use this package through https://unpkg.com/[email protected]/index.js or perhaps https://cdnjs.com/.

Is this something that makes sense?

Thanks!

Add option for passive event listeners

According an article https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners
we currently could use passive listeners for scroll events
here is an example how to detect their avalibility https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

Currently there is no way to specify that our listener is passive.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-plugin-mocha to v10
• chore(deps): update dependency mocha to v10
• chore(deps): update dependency rimraf to v5
• chore(deps): update dependency rollup to v4
• chore(deps): update dependency sinon to v18
• chore(deps): update dependency typescript to v5
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency karma-webpack to v5

Open

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

• chore(deps): update dependency karma to v6.3.16 [security]
• chore(deps): replace dependency babel-eslint with @babel/eslint-parser ^7.11.0
• chore(deps): update all non-major dependencies (@4c/build, @4c/rollout, @4c/tsconfig, @babel/cli, @babel/core, @babel/preset-typescript, @react-bootstrap/eslint-config-typescript, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, babel-loader, eslint, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-mocha, eslint-plugin-react, jquery, karma-chrome-launcher, karma-firefox-launcher, karma-sourcemap-loader, rollup, typescript, webpack)
• chore(deps): update dependency @4c/build to v4
• chore(deps): update dependency @4c/rollout to v4
• chore(deps): update dependency @react-bootstrap/babel-preset to v2
• chore(deps): update dependency @react-bootstrap/eslint-config to v3
• chore(deps): update dependency babel-loader to v9
• chore(deps): update dependency webpack to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @babel/runtime ^7.8.7
• csstype ^3.0.2
• @4c/build ^2.3.1
• @4c/rollout ^2.2.1
• @4c/tsconfig ^0.3.1
• @babel/cli ^7.13.16
• @babel/core ^7.14.0
• @babel/preset-typescript ^7.13.0
• @react-bootstrap/babel-preset ^1.2.0
• @react-bootstrap/eslint-config ^1.3.2
• @react-bootstrap/eslint-config-typescript ^2.0.1
• @typescript-eslint/eslint-plugin ^4.22.1
• @typescript-eslint/parser ^4.22.1
• babel-eslint ^10.1.0
• babel-loader ^8.2.2
• cherry-pick ^0.5.0
• eslint ^7.25.0
• eslint-plugin-import ^2.22.1
• eslint-plugin-jsx-a11y ^6.4.1
• eslint-plugin-mocha ^8.1.0
• eslint-plugin-react ^7.23.2
• expect.js ^0.3.1
• jquery ^3.6.0
• karma ^6.3.2
• karma-chrome-launcher ^3.1.0
• karma-firefox-launcher ^2.1.0
• karma-html2js-preprocessor ^1.1.0
• karma-mocha ~2.0.1
• karma-mocha-reporter ^2.2.5
• karma-sinon ^1.0.5
• karma-sourcemap-loader ^0.3.8
• karma-webpack ^4.0.2
• mocha ^8.4.0
• rimraf ^3.0.2
• rollup ^2.47.0
• rollup-plugin-size-snapshot ^0.12.0
• rollup-plugin-typescript ^1.0.1
• simulant ^0.2.2
• sinon ^9.2.4
• typescript ^4.2.4
• webpack ^4.46.0

travis

.travis.yml

---

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

DOMException: Failed to execute 'add' on 'DOMTokenList':

Getting this error - not really sure where this module is used in my project atm but its this module causing the error in my system.

The token provided ('[object Object]-appear') contains HTML space characters, which are not valid in tokens.

-appear makes me think it is the react addon for css transition...

Uncaught TypeError: Cannot set property top of #<ClientRect> which has only a getter

Using react-bootstrap 0.28.3...an OverlayTrigger with Popover content is causing the above error. Not sure why, maybe because the DOM element the Overlay is bound to is absolutely positioned. The Popover does not appear and is not present in the DOM

Commenting out these two lines in position.js resolves the issue but not sure it's a real fix

parentOffset.top += parseInt((0, _style2['default'])(offsetParent, 'borderTopWidth'), 10) - (0, _scrollTop2['default'])(offsetParent) || 0;
parentOffset.left += parseInt((0, _style2['default'])(offsetParent, 'borderLeftWidth'), 10) - (0, _scrollLeft2['default'])(offsetParent) || 0

Also if we remove the container prop for {this} from the OveralyTrigger, the Popover appears but is not positioned properly.

Any ideas?

Transition properties returning the incorrect end animation for Chrome latest (v61)

Expected: animationEnd and transitionEnd (according to https://developer.mozilla.org/en-US/docs/Web/Events/transitionend)

Actual: webkitAnimationEnd and webkitTransitionEnd

I believe this is because

dom-helpers/src/transition/properties.js

Line 68 in fd4a81c

if (`${vendor}TransitionProperty` in style) {

Chrome has both style.transitionProperty and style.webKitTransitionProperty

In contrast, React v15's detection is more robust and returns the correct property:
https://github.com/facebook/react/blob/master/src/renderers/shared/shared/event/getVendorPrefixedEventName.js

Add an exports map to package.json

TLDR: this package is missing an exports map in package.json and needs one.

When deep imports like dom-helpers/addClass are allowed, we would like them to be explicitly specified in the package.json exports map. This provides some safety features:

• Consumers can't import something you don't expect to be an api surface
• You can safely reorganize your package (move things around, rename things, change filename casing) without breaking consumers, since exports maps allow the producer to map how the import resolves.
• You can provide both commonjs and esm entry points without requiring the consumer to remap things in webpack config should that want to use another module format
• It becomes possible to ditch the nested package.jsons, reducing complexity of understanding how imports resolve to source files.

Example exports map:

{
  "exports": {
    ".": {
      "types": "./lib/index.d.ts",
      "require": "./lib-commonjs/index.cjs",
      "import": "./lib/index.js"
    },
    "./addClass": {
      "types": "./lib/addClass.d.ts",
      "require": "./lib-commonjs/addClass.cjs",
      "import": "./lib/addClass.js",
   },
   // etc
}

transitionEnd() doesn't work as expected if event fires on child node but not node itself

I was seeing an issue with react-bootstrap <Modal>s sometimes not being removed after completing their exit transition (and thus remaining on-screen and blocking any further user interaction.) This appears to be due to the transitionend event not firing on the top level DOM node, but other transitionend events firing on child nodes and bubbling up.

dom-hepers' transitionEnd has a check to emulate the transitionend event if on hasn't been seen after a timeout, however a event bubbling up from a child node will also count as the event being "seen" and thus no event is emulated. A quick patch which would change that behaviour:

diff --git a/src/transitionEnd.ts b/src/transitionEnd.ts
index cef860e..d26d7d0 100644
--- a/src/transitionEnd.ts
+++ b/src/transitionEnd.ts
@@ -25,10 +25,9 @@ function emulateTransitionEnd(
   const remove = listen(
     element,
     'transitionend',
-    () => {
-      called = true
-    },
-    { once: true }
+    (event) => {
+      if (event.target === element) called = true
+    }
   )
 
   return () => {

Side-note: a userland workaround for my specific issue is to wrap the <ModalDialog> component and stop the propagation of any transitionend events there.

SVG element doesn't have _contains_ on IE

On IE9 and IE11 I'm seeing the error message Object doesn't support property or method 'contains'. This is shown in the IE11 error console:

Would it be that there is a problem with SVG elements on IE?

Also:

> $('p')[0]
<p class="...">...</p>
> $('p')[0].contains
function contains() { [native code] }
> $('circle')[0]
[object Object]
> $('circle')[0].contains
undefined

scrollParent does not find horizontal scroll parents

due to a check of
height(node) < node.scrollHeight

in scrollParent, it will only find vertical scrolling parents.
By function name and description, this is not the behavior I would expect.

I believe it should be || with
width(node) < node.scrollWidth

Overlay problem in IE8: getBoundingClientRect does not support width and height

https://github.com/react-bootstrap/dom-helpers/blob/master/src/query/offset.js#L21

if (node.getBoundingClientRect !== undefined)
    box = node.getBoundingClientRect();
    if ( box.width || box.height ) {
        box = {
            top:    box.top  + (win.pageYOffset || docElem.scrollTop)  - (docElem.clientTop  || 0),
            left:   box.left + (win.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0),
            width:  (box.width  == null ? node.offsetWidth  : box.width)  || 0,
            height: (box.height == null ? node.offsetHeight : box.height) || 0
       }
   }

"box.width || box.height" will always be false in IE8 then the calculated offset may become NaN.

scrollParent: Should clientHeight be used to detect

dom-helpers/src/scrollParent.ts

Line 35 in 22d6864

(firstPossible || height(element) < element!.scrollHeight)

Should clientHeight be used to detect?

(firstPossible || height(element, true) < element!.scrollHeight)

How to migrate form 3.x to 5.x

There are a few breaking changes from 3.x to 5.x. Please provide a document to show how to migrate from 3x t0 5x.

Thanks
Duy

'style' helper must be imported from 'dom-helpers/css'

Sorry if this is the expected behavior. It looks like when requiring the style helper individually, it has to be imported from the dom-helpers/css route. E.g. the following doesn't work:

import style from 'dom-helpers/style';

Whereas the following examples do work:

import style from 'dom-helpers/css';

import { style } from 'dom-helpers';

I am getting some issues with dom-helpers this morning, It was working fine on last week.

ownerDocument throws when server rendering

export default function ownerDocument(node?: Element) {
  return (node && node.ownerDocument) || document
}

document is not defined when rendering on the server. This is causing our server to 500 Internal Server Error when trying to server render a page with a react-big-calendar component. The full stack trace is:

ReferenceError: document is not defined (Most recent call first)
at ownerDocument (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\node_modules\dom-helpers\ownerDocument.js line 7 col 39)
at resolveRef (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\cjs\utils\useWaitForDOMRef.js line 13 col 56)
at <unknown> (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\cjs\utils\useWaitForDOMRef.js line 22 col 11)
at ya (D:\home\site\wwwroot\node_modules\react-dom\cjs\react-dom-server.node.production.min.js line 26 col 263)
at Object.useState (D:\home\site\wwwroot\node_modules\react-dom\cjs\react-dom-server.node.production.min.js line 29 col 81)
at useState (D:\home\site\wwwroot\node_modules\react\cjs\react.production.min.js line 23 col 311)
at useWaitForDOMRef (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\cjs\utils\useWaitForDOMRef.js line 21 col 38)
at Object.render (D:\home\site\wwwroot\node_modules\react-big-calendar\node_modules\react-overlays\cjs\Overlay.js line 53 col 51)
at a.render (D:\home\site\wwwroot\node_modules\react-dom\cjs\react-dom-server.node.production.min.js line 43 col 59)
at a.read (D:\home\site\wwwroot\node_modules\react-dom\cjs\react-dom-server.node.production.min.js line 41 col 57)

I'm not sure if the proper place to report this is here or in react-big-calendar. If this library is meant to work with server rendering then this is the right spot, if not, it's an issue for react-big-calendar (or possibly react-overlays) to handle.

scrollbarSize always returns 0

I've been noticing that scrollbarSize only ever returns zero. I feel like in the past I used this function to successfully measure scrollbars, but it seems to not work properly anymore. Maybe a browser update? I'm not really sure what's going on.

Test in Chrome 60.0.3112.90

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: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Analysis: 50% of dependency updates in this repository can be merged.

Hey there 👋

Our bot, Adaptly, found that 5 out of 10 currently open dependency update PRs can be merged.
That's 50% right there:

View Safe to Merge PRs

1. chore(deps): update dependency @4c/rollout to v4
2. chore(deps): update dependency @4c/build to v4
3. chore(deps): replace dependency babel-eslint with @babel/eslint-parser ^7.11.0
4. chore(deps): update dependency karma to v6.3.16 [security]
5. chore(deps): update dependency karma-webpack to v5

🔎   How does Adaptly know this?

It analyses changelogs of dependencies updated in a PR.
If no breaking changes are found in the changelogs, PR is marked as good to merge.

✨ Try Adaptly yourself

Feel free to try Adaptly on your repositories and finally
merge dependency update PRs. Let us know if you have any questions.

Best of luck with your projects,
Lauris
[email protected]

suggestion: can offset support the second parameter

I don't want to create a package to implement the set offset function. Can dom-helpers support it?
e.g.

offset(node, {
top: 100
})

offset(node, {
top: 100,
left: 100
})