react-bootstrap - npm Package Compare versions

Comparing version 2.0.0-beta.2 to 2.0.0-beta.3

cjs/BootstrapModalManager.d.ts

 import ModalManager from 'react-overlays/ModalManager';
-export default class BootstrapModalManager extends ModalManager {
+declare class BootstrapModalManager extends ModalManager {
     private adjustAndStore;
@@ -8,1 +8,3 @@ private restore;
 }
+export declare function getSharedManager(): BootstrapModalManager;
+export default BootstrapModalManager;

cjs/BootstrapModalManager.js

@@ -6,2 +6,3 @@ "use strict";
 exports.__esModule = true;
+exports.getSharedManager = getSharedManager;
 exports.default = void 0;
@@ -63,3 +64,10 @@
 
-exports.default = BootstrapModalManager;
-module.exports = exports.default;
+let sharedManager;
+
+function getSharedManager() {
+  if (!sharedManager) sharedManager = new BootstrapModalManager();
+  return sharedManager;
+}
+
+var _default = BootstrapModalManager;
+exports.default = _default;

cjs/Modal.d.ts

 import * as React from 'react';
-import { ModalProps as BaseModalProps } from 'react-overlays/Modal';
+import { BaseModalProps } from 'react-overlays/Modal';
 import { BsPrefixRefForwardingComponent } from './helpers';
@@ -15,2 +15,3 @@ export interface ModalProps extends Omit<BaseModalProps, 'role' | 'renderBackdrop' | 'renderDialog' | 'transition' | 'backdropTransition'> {
     scrollable?: boolean;
+    [other: string]: any;
 }
@@ -17,0 +18,0 @@ declare const _default: BsPrefixRefForwardingComponent<"div", ModalProps> & {

cjs/Modal.js

@@ -34,3 +34,3 @@ "use strict";
 
-var _BootstrapModalManager = _interopRequireDefault(require("./BootstrapModalManager"));
+var _BootstrapModalManager = require("./BootstrapModalManager");
 
@@ -59,3 +59,2 @@ var _Fade = _interopRequireDefault(require("./Fade"));
 
-let manager;
 const defaultProps = {
@@ -124,4 +123,3 @@ show: false,
   const ignoreBackdropClickRef = (0, React.useRef)(false);
-  const removeStaticModalAnimationRef = (0, React.useRef)(null); // TODO: what's this type
-
+  const removeStaticModalAnimationRef = (0, React.useRef)(null);
   const [modal, setModalRef] = (0, _useCallbackRef.default)();
@@ -137,4 +135,3 @@ const mergedRef = (0, _useMergedRefs.default)(ref, setModalRef);
     if (propsManager) return propsManager;
-    if (!manager) manager = new _BootstrapModalManager.default();
-    return manager;
+    return (0, _BootstrapModalManager.getSharedManager)();
   }
@@ -202,3 +199,3 @@
 
-    onHide();
+    onHide == null ? void 0 : onHide();
   };
@@ -217,3 +214,3 @@
 
-  const handleEnter = (node, ...args) => {
+  const handleEnter = (node, isAppearing) => {
     if (node) {
@@ -224,12 +221,12 @@ node.style.display = 'block';
 
-    onEnter == null ? void 0 : onEnter(node, ...args);
+    onEnter == null ? void 0 : onEnter(node, isAppearing);
   };
 
-  const handleExit = (node, ...args) => {
+  const handleExit = node => {
     removeStaticModalAnimationRef.current == null ? void 0 : removeStaticModalAnimationRef.current();
-    onExit == null ? void 0 : onExit(node, ...args);
+    onExit == null ? void 0 : onExit(node);
   };
 
-  const handleEntering = (node, ...args) => {
-    onEntering == null ? void 0 : onEntering(node, ...args); // FIXME: This should work even when animation is disabled.
+  const handleEntering = (node, isAppearing) => {
+    onEntering == null ? void 0 : onEntering(node, isAppearing); // FIXME: This should work even when animation is disabled.
 
@@ -239,6 +236,6 @@ (0, _addEventListener.default)(window, 'resize', handleWindowResize);
 
-  const handleExited = (node, ...args) => {
+  const handleExited = node => {
     if (node) node.style.display = ''; // RHL removes it sometimes
 
-    onExited == null ? void 0 : onExited(...args); // FIXME: This should work even when animation is disabled.
+    onExited == null ? void 0 : onExited(node); // FIXME: This should work even when animation is disabled.
 
@@ -245,0 +242,0 @@ (0, _removeEventListener.default)(window, 'resize', handleWindowResize);

cjs/Offcanvas.js

@@ -10,4 +10,2 @@ "use strict";
 
-var _useCallbackRef = _interopRequireDefault(require("@restart/hooks/useCallbackRef"));
-
 var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
@@ -19,6 +17,2 @@
 
-var _ModalManager = _interopRequireDefault(require("react-overlays/ModalManager"));
-
-var _useRootClose = _interopRequireDefault(require("react-overlays/useRootClose"));
-
 var _Fade = _interopRequireDefault(require("./Fade"));
@@ -38,2 +32,4 @@
 
+var _BootstrapModalManager = _interopRequireWildcard(require("./BootstrapModalManager"));
+
 var _jsxRuntime = require("react/jsx-runtime");
@@ -96,11 +92,6 @@
 }, ref) => {
-  const [dialogElement, setDialogElement] = (0, _useCallbackRef.default)();
   const modalManager = (0, React.useRef)();
   const handleHide = (0, _useEventCallback.default)(onHide);
   bsPrefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'offcanvas');
-  const modalBsPrefix = (0, _ThemeProvider.useBootstrapPrefix)(undefined, 'modal'); // If there's a backdrop, let BaseModal handle closing.
-
-  (0, _useRootClose.default)(dialogElement, handleHide, {
-    disabled: backdrop
-  });
+  const modalBsPrefix = (0, _ThemeProvider.useBootstrapPrefix)(undefined, 'modal');
   const modalContext = (0, React.useMemo)(() => ({
@@ -112,6 +103,13 @@ onHide: handleHide
     if (propsManager) return propsManager;
-    if (!modalManager.current) modalManager.current = new _ModalManager.default({
-      handleContainerOverflow: !scroll
-    });
-    return modalManager.current;
+
+    if (scroll) {
+      // Have to use a different modal manager since the shared
+      // one handles overflow.
+      if (!modalManager.current) modalManager.current = new _BootstrapModalManager.default({
+        handleContainerOverflow: false
+      });
+      return modalManager.current;
+    }
+
+    return (0, _BootstrapModalManager.getSharedManager)();
   }
@@ -122,3 +120,2 @@
     onEnter == null ? void 0 : onEnter(node, ...args);
-    setDialogElement(node);
   };
@@ -129,3 +126,2 @@
     onExited == null ? void 0 : onExited(...args);
-    setDialogElement(null);
   };
@@ -155,3 +151,3 @@
       autoFocus: autoFocus,
-      enforceFocus: enforceFocus,
+      enforceFocus: enforceFocus && !scroll,
       restoreFocus: restoreFocus,
@@ -158,0 +154,0 @@ restoreFocusOptions: restoreFocusOptions,

esm/BootstrapModalManager.d.ts

 import ModalManager from 'react-overlays/ModalManager';
-export default class BootstrapModalManager extends ModalManager {
+declare class BootstrapModalManager extends ModalManager {
     private adjustAndStore;
@@ -8,1 +8,3 @@ private restore;
 }
+export declare function getSharedManager(): BootstrapModalManager;
+export default BootstrapModalManager;

esm/BootstrapModalManager.js

@@ -10,3 +10,4 @@ import css from 'dom-helpers/css';
 };
-export default class BootstrapModalManager extends ModalManager {
+
+class BootstrapModalManager extends ModalManager {
   adjustAndStore(prop, element, adjust) {
@@ -49,2 +50,9 @@ const actual = element.style[prop]; // TODO: DOMStringMap and CSSStyleDeclaration aren't strictly compatible
 
-}
+}
+
+let sharedManager;
+export function getSharedManager() {
+  if (!sharedManager) sharedManager = new BootstrapModalManager();
+  return sharedManager;
+}
+export default BootstrapModalManager;

esm/Modal.d.ts

 import * as React from 'react';
-import { ModalProps as BaseModalProps } from 'react-overlays/Modal';
+import { BaseModalProps } from 'react-overlays/Modal';
 import { BsPrefixRefForwardingComponent } from './helpers';
@@ -15,2 +15,3 @@ export interface ModalProps extends Omit<BaseModalProps, 'role' | 'renderBackdrop' | 'renderDialog' | 'transition' | 'backdropTransition'> {
     scrollable?: boolean;
+    [other: string]: any;
 }
@@ -17,0 +18,0 @@ declare const _default: BsPrefixRefForwardingComponent<"div", ModalProps> & {

esm/Modal.js

@@ -15,3 +15,3 @@ import classNames from 'classnames';
 import BaseModal from 'react-overlays/Modal';
-import BootstrapModalManager from './BootstrapModalManager';
+import { getSharedManager } from './BootstrapModalManager';
 import Fade from './Fade';
@@ -26,3 +26,2 @@ import ModalBody from './ModalBody';
 import { jsx as _jsx } from "react/jsx-runtime";
-let manager;
 const defaultProps = {
@@ -91,4 +90,3 @@ show: false,
   const ignoreBackdropClickRef = useRef(false);
-  const removeStaticModalAnimationRef = useRef(null); // TODO: what's this type
-
+  const removeStaticModalAnimationRef = useRef(null);
   const [modal, setModalRef] = useCallbackRef();
@@ -104,4 +102,3 @@ const mergedRef = useMergedRefs(ref, setModalRef);
     if (propsManager) return propsManager;
-    if (!manager) manager = new BootstrapModalManager();
-    return manager;
+    return getSharedManager();
   }
@@ -169,3 +166,3 @@
 
-    onHide();
+    onHide == null ? void 0 : onHide();
   };
@@ -184,3 +181,3 @@
 
-  const handleEnter = (node, ...args) => {
+  const handleEnter = (node, isAppearing) => {
     if (node) {
@@ -191,12 +188,12 @@ node.style.display = 'block';
 
-    onEnter == null ? void 0 : onEnter(node, ...args);
+    onEnter == null ? void 0 : onEnter(node, isAppearing);
   };
 
-  const handleExit = (node, ...args) => {
+  const handleExit = node => {
     removeStaticModalAnimationRef.current == null ? void 0 : removeStaticModalAnimationRef.current();
-    onExit == null ? void 0 : onExit(node, ...args);
+    onExit == null ? void 0 : onExit(node);
   };
 
-  const handleEntering = (node, ...args) => {
-    onEntering == null ? void 0 : onEntering(node, ...args); // FIXME: This should work even when animation is disabled.
+  const handleEntering = (node, isAppearing) => {
+    onEntering == null ? void 0 : onEntering(node, isAppearing); // FIXME: This should work even when animation is disabled.
 
@@ -206,6 +203,6 @@ addEventListener(window, 'resize', handleWindowResize);
 
-  const handleExited = (node, ...args) => {
+  const handleExited = node => {
     if (node) node.style.display = ''; // RHL removes it sometimes
 
-    onExited == null ? void 0 : onExited(...args); // FIXME: This should work even when animation is disabled.
+    onExited == null ? void 0 : onExited(node); // FIXME: This should work even when animation is disabled.
 
@@ -212,0 +209,0 @@ removeEventListener(window, 'resize', handleWindowResize);

esm/Offcanvas.js

 import classNames from 'classnames';
-import useCallbackRef from '@restart/hooks/useCallbackRef';
 import useEventCallback from '@restart/hooks/useEventCallback';
@@ -7,4 +6,2 @@ import * as React from 'react';
 import BaseModal from 'react-overlays/Modal';
-import ModalManager from 'react-overlays/ModalManager';
-import useRootClose from 'react-overlays/useRootClose';
 import Fade from './Fade';
@@ -17,2 +14,3 @@ import OffcanvasBody from './OffcanvasBody';
 import { useBootstrapPrefix } from './ThemeProvider';
+import BootstrapModalManager, { getSharedManager } from './BootstrapModalManager';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -70,11 +68,6 @@ const defaultProps = {
 }, ref) => {
-  const [dialogElement, setDialogElement] = useCallbackRef();
   const modalManager = useRef();
   const handleHide = useEventCallback(onHide);
   bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas');
-  const modalBsPrefix = useBootstrapPrefix(undefined, 'modal'); // If there's a backdrop, let BaseModal handle closing.
-
-  useRootClose(dialogElement, handleHide, {
-    disabled: backdrop
-  });
+  const modalBsPrefix = useBootstrapPrefix(undefined, 'modal');
   const modalContext = useMemo(() => ({
@@ -86,6 +79,13 @@ onHide: handleHide
     if (propsManager) return propsManager;
-    if (!modalManager.current) modalManager.current = new ModalManager({
-      handleContainerOverflow: !scroll
-    });
-    return modalManager.current;
+
+    if (scroll) {
+      // Have to use a different modal manager since the shared
+      // one handles overflow.
+      if (!modalManager.current) modalManager.current = new BootstrapModalManager({
+        handleContainerOverflow: false
+      });
+      return modalManager.current;
+    }
+
+    return getSharedManager();
   }
@@ -96,3 +96,2 @@
     onEnter == null ? void 0 : onEnter(node, ...args);
-    setDialogElement(node);
   };
@@ -103,3 +102,2 @@
     onExited == null ? void 0 : onExited(...args);
-    setDialogElement(null);
   };
@@ -129,3 +127,3 @@
       autoFocus: autoFocus,
-      enforceFocus: enforceFocus,
+      enforceFocus: enforceFocus && !scroll,
       restoreFocus: restoreFocus,
@@ -132,0 +130,0 @@ restoreFocusOptions: restoreFocusOptions,

package.json

 {
   "name": "react-bootstrap",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "Bootstrap 4 components built with React",
@@ -49,3 +49,3 @@ "keywords": [
     "prop-types-extra": "^1.1.0",
-    "react-overlays": "^5.0.1",
+    "react-overlays": "^5.1.1",
     "react-transition-group": "^4.4.1",
@@ -52,0 +52,0 @@ "uncontrollable": "^7.2.1",

README.md

@@ -12,16 +12,24 @@ # React-Bootstrap
 
-## Docs
+## Bootstrap compatibility
 
-See the [documentation][documentation] with live editable examples and API documentation.
+React-Bootstrap is compatible with various versions of Bootstrap.  As such, you need to ensure you are using the correct combination of versions.  
 
-To find the documentation for the latest **Bootstrap 4** compatible release, [go here](https://react-bootstrap.github.io) and for **Bootstrap 3** [go here](https://react-bootstrap-v3.netlify.app).
+See the below table on which version of React-Bootstrap you should be using in your project.
 
-### Migrating from Bootstrap 4 to Bootstrap 5
+| Bootstrap Version | React-Bootstrap Version | Documentation |
+| ------------- |:-------------:| -----:|
+| v5.x | 2.x beta | [Link][v5-documentation] |
+| v4.x | 1.x | [Link][v4-documentation] |
+| v3.x | 0.33.x (not maintained) | [Link][v3-documentation] |
 
-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](https://github.com/react-bootstrap/react-bootstrap/blob/master/www/src/pages/migrating.mdx)**.
+## Migrating from previous versions
 
-### Migrating from Bootstrap 3 to Bootstrap 4
+### Bootstrap 4 to Bootstrap 5
 
-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](https://react-bootstrap.github.io/migrating/)**.
+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][v5-migration]**.
 
+### 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][v4-migration]**.
+
 ## Related modules
@@ -56,3 +64,7 @@
 [react]: https://reactjs.org/
-[documentation]: https://react-bootstrap-v5.netlify.app/
+[v5-documentation]: https://react-bootstrap.github.io
+[v5-migration]: https://react-bootstrap.github.io/migrating
+[v4-documentation]: https://react-bootstrap-v4.netlify.app
+[v4-migration]: https://react-bootstrap-v4.netlify.app/migrating
+[v3-documentation]: https://react-bootstrap-v3.netlify.app
 [contributing]: CONTRIBUTING.md
@@ -72,4 +84,4 @@ [travis-badge]: https://travis-ci.org/react-bootstrap/react-bootstrap.svg?branch=master
 [netlify-badge]: https://api.netlify.com/api/v1/badges/f09d443f-11b2-4454-812b-0645aeaca824/deploy-status
-[netlify]: https://app.netlify.com/sites/react-bootstrap-v5/deploys
+[netlify]: https://app.netlify.com/sites/react-bootstrap/deploys
 [gh-actions-badge]: https://github.com/react-bootstrap/react-bootstrap/workflows/CI/badge.svg
 [gh-actions]: https://github.com/react-bootstrap/react-bootstrap/actions

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1338683

increased by0.04%

Lines of code

28704

increased by0.05%

Number of lines in readme file

85

increased by16.44%

Dependency changes

• Updatedreact-overlays@^5.1.1