studiokit-scaffolding-js 7.0.16 → 7.0.17

package/lib/components/ActionList.js

@@ -29,13 +29,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -81,13 +74,10 @@ var ActionList = function (_a) {
                 return (react_1.default.createElement(core_1.Grow, __assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom-end' ? 'top right' : 'bottom right' } }),
                     react_1.default.createElement(core_1.Paper, null,
                         react_1.default.createElement(core_1.ClickAwayListener, { onClickAway: onActionItemClick() },
-                            react_1.default.createElement(core_1.MenuList, { id: "info-menu-" + model.id, autoFocusItem: !!infoMenuAnchorElement, onKeyDown: handleListKeyDown, className: "action-list shadow-large" }, allowedActions.map(function (a, index) {
-                                return a.predicate
-                                    ? __spreadArrays((index > 0 ? [react_1.default.createElement(core_1.Divider, null)] : []), [
-                                        react_1.default.createElement(core_1.MenuItem, { key: a.id, className: "action-list-menu mv1 pv2 " + a.className, onClick: onActionItemClick(a.action), color: "primary", disabled: a.disabled },
-                                            a.icon,
-                                            a.name)
-                                    ]) : undefined;
+                            react_1.default.createElement(core_1.MenuList, { id: "info-menu-" + model.id, autoFocusItem: !!infoMenuAnchorElement, onKeyDown: handleListKeyDown, className: "action-list shadow-large" }, allowedActions.map(function (a) {
+                                return a.predicate ? (react_1.default.createElement(core_1.MenuItem, { key: a.id, className: "action-list-menu-item " + a.className, onClick: onActionItemClick(a.action), color: "primary", disabled: a.disabled },
+                                    a.icon,
+                                    a.name)) : undefined;
                             }))))));
             })))));
 };

package/lib/components/ConnectedModal.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
-var ConnectedModalComponent_1 = __importDefault(require("./HOC/ConnectedModalComponent"));
+var ConnectedModalComponent_1 = require("./HOC/ConnectedModalComponent");
 var ConnectedModal = function (_a) {
     var 
     // exclude props that shouldn't be passed to the Modal
@@ -37,4 +37,4 @@ var ConnectedModal = function (_a) {
 /**
  * Wrapped version of "react-bootstrap"'s `Modal` component. Uses `ConnectedModalComponent` to coordinate modal state in redux.
  */
-exports.default = ConnectedModalComponent_1.default(ConnectedModal);
+exports.default = ConnectedModalComponent_1.connectedModalComponent(ConnectedModal);

package/lib/components/HOC/FullscreenModalComponent.d.ts

@@ -3,7 +3,6 @@ import { ConnectedModalWrappedProps } from './ConnectedModalComponent';
 import { GuidComponentWrappedProps } from './GuidComponent';
 /**
  * The props that are provided to the HOC component directly from the caller, not other wrapping HOCs
- * NOTE: if more flexibility is needed, add more props from `ReactModal.Props`
  */
 export interface FullscreenModalOwnProps {
     isOpen?: boolean;
@@ -12,12 +11,10 @@ export interface FullscreenModalOwnProps {
      * If not provided, the modal manages itself.
      */
     closeModal?: () => void;
-    contentLabel?: string;
-    zIndex?: number;
 }
 /** The props that are provided to the HOC component, either directly or from other wrapping HOCs */
 export declare type FullscreenModalComponentProps = FullscreenModalOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps;
-/** The props that are provide to the wrapped component. */
+/** The props that are provided to the wrapped component. */
 export interface FullscreenModalWrappedProps {
     /** GUID of the fullscreen modal, used in state.modals. */
     guid: string;
@@ -28,19 +25,16 @@ interface FullscreenModalState {
     isOpen: boolean;
 }
 /**
- * HOC that manages a `ReactModal`, adds inline css, and
- * coordinates modal state in redux using.
+ * HOC that manages a "react-boostrap" `Modal` and adds fullscreen styles.
  *
  * NOTE: Meant for testing. Should be wrapped in `connectedModalComponent` normally.
  *
  * @param WrappedComponent The component to wrap.
  */
-export declare function configureFullscreenModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & FullscreenModalWrappedProps>): {
+export declare function configureFullscreenModalComponent<TOwnProps extends object>(WrappedComponent: ComponentType<TOwnProps & FullscreenModalWrappedProps>): {
     new (props: TOwnProps & FullscreenModalOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps): {
         componentDidMount(): void;
-        componentWillUnmount(): void;
         componentDidUpdate(prevProps: TOwnProps & FullscreenModalOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps, prevState: FullscreenModalState): void;
-        disableScroll: (e: Event) => boolean;
         onOpen: () => void;
         onClose: () => void;
         closeModal: () => void;
@@ -56,6 +50,7 @@ export declare function configureFullscreenModalComponent<TOwnProps extends {}>(
             [key: string]: React.ReactInstance;
         };
         shouldComponentUpdate?(nextProps: Readonly<TOwnProps & FullscreenModalOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>, nextState: Readonly<FullscreenModalState>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<TOwnProps & FullscreenModalOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>, prevState: Readonly<FullscreenModalState>): any;
         componentWillMount?(): void;
@@ -68,18 +63,11 @@ export declare function configureFullscreenModalComponent<TOwnProps extends {}>(
     contextType?: React.Context<any> | undefined;
 };
 /**
- * HOC that contains a `ReactModal` which can be auto managed or managed with props,
- * adds fullscreen styles, and coordinates modal state in redux.
+ * HOC that manages a "react-bootstrap" `Modal` and adds fullscreen styles.
  *
- * Uses `connectedModalComponent`.
- *
- * NOTE: Please add the following css
- *
- * .ReactModal__Body--open {
- * 	overflow: hidden;
- * }
+ * Uses `connectedModalComponent` to coordinate modal state in redux.
  *
  * @param WrappedComponent The component to wrap.
  */
-export declare function fullscreenModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & FullscreenModalWrappedProps>): ComponentClass<TOwnProps & FullscreenModalOwnProps>;
+export declare function fullscreenModalComponent<TOwnProps extends object>(WrappedComponent: ComponentType<TOwnProps & FullscreenModalWrappedProps>): ComponentClass<TOwnProps & FullscreenModalOwnProps>;
 export default fullscreenModalComponent;

package/lib/components/HOC/FullscreenModalComponent.js

@@ -53,17 +53,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fullscreenModalComponent = exports.configureFullscreenModalComponent = void 0;
 var react_1 = __importStar(require("react"));
-var react_modal_1 = __importDefault(require("react-modal"));
+var react_bootstrap_1 = require("react-bootstrap");
 var ConnectedModalComponent_1 = require("./ConnectedModalComponent");
 /**
- * HOC that manages a `ReactModal`, adds inline css, and
- * coordinates modal state in redux using.
+ * HOC that manages a "react-boostrap" `Modal` and adds fullscreen styles.
  *
  * NOTE: Meant for testing. Should be wrapped in `connectedModalComponent` normally.
  *
@@ -74,17 +70,10 @@ function configureFullscreenModalComponent(WrappedComponent) {
         __extends(FullscreenModalComponent, _super);
         function FullscreenModalComponent(props) {
             var _this = _super.call(this, props) || this;
-            _this.disableScroll = function (e) {
-                document.documentElement.scrollTop = 0;
-                e.preventDefault();
-                return false;
-            };
             _this.onOpen = function () {
-                document.documentElement.addEventListener('touchmove', _this.disableScroll);
                 _this.props.onEntering();
             };
             _this.onClose = function () {
-                document.documentElement.removeEventListener('touchmove', _this.disableScroll);
                 _this.props.onExited();
             };
             _this.closeModal = function () {
@@ -99,11 +88,6 @@ function configureFullscreenModalComponent(WrappedComponent) {
             _this.state = {
                 isOpen: props.isOpen === undefined ? true : props.isOpen
             };
-            // https://github.com/reactjs/react-modal#app-element
-            // Accessibility fixed when reading the content in the modal
-            if (document.getElementById('root')) {
-                react_modal_1.default.setAppElement('#root');
-            }
             return _this;
         }
         FullscreenModalComponent.prototype.componentDidMount = function () {
@@ -112,9 +96,6 @@ function configureFullscreenModalComponent(WrappedComponent) {
                 this.onOpen();
             }
         };
-        FullscreenModalComponent.prototype.componentWillUnmount = function () {
-            document.documentElement.removeEventListener('touchmove', this.disableScroll);
-        };
         FullscreenModalComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
             var isOpen;
             if (this.props.isOpen !== undefined && this.props.isOpen !== this.state.isOpen) {
@@ -139,33 +120,11 @@ function configureFullscreenModalComponent(WrappedComponent) {
             });
         };
         FullscreenModalComponent.prototype.render = function () {
-            var _a = this.props, contentLabel = _a.contentLabel, isTopOpenFullscreenModal = _a.isTopOpenFullscreenModal, onEntering = _a.onEntering, onExited = _a.onExited, _ = _a.isOpen, closeModal = _a.closeModal, zIndex = _a.zIndex, remainingProps = __rest(_a, ["contentLabel", "isTopOpenFullscreenModal", "onEntering", "onExited", "isOpen", "closeModal", "zIndex"]);
+            var _a = this.props, isTopOpenFullscreenModal = _a.isTopOpenFullscreenModal, onEntering = _a.onEntering, onExited = _a.onExited, _ = _a.isOpen, closeModal = _a.closeModal, remainingProps = __rest(_a, ["isTopOpenFullscreenModal", "onEntering", "onExited", "isOpen", "closeModal"]);
             // do not pass ConnectedModalWrappedProps to wrapped component
             var wrappedProps = __assign(__assign({}, remainingProps), { closeModal: this.closeModal });
             var isOpen = this.state.isOpen;
-            return (react_1.default.createElement(react_modal_1.default, { isOpen: isOpen, contentLabel: contentLabel, style: {
-                    content: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        overflow: 'hidden',
-                        padding: 0,
-                        border: 'none',
-                        backgroundColor: 'white'
-                    },
-                    overlay: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : 2000
-                    }
-                }, 
-                // apply custom class, if this is not the top open fullscreen modal, to allow targeted styling (e.g. hide when printing in Safari)
-                portalClassName: "ReactModalPortal" + (!isTopOpenFullscreenModal ? ' HiddenFullscreenModal' : ''), shouldCloseOnOverlayClick: false },
+            return (react_1.default.createElement(react_bootstrap_1.Modal, { show: isOpen, backdrop: false, animation: false, className: "fullscreen-modal" },
                 react_1.default.createElement(WrappedComponent, __assign({}, wrappedProps))));
         };
         return FullscreenModalComponent;
@@ -173,16 +132,9 @@ function configureFullscreenModalComponent(WrappedComponent) {
 }
 exports.configureFullscreenModalComponent = configureFullscreenModalComponent;
 /**
- * HOC that contains a `ReactModal` which can be auto managed or managed with props,
- * adds fullscreen styles, and coordinates modal state in redux.
- *
- * Uses `connectedModalComponent`.
- *
- * NOTE: Please add the following css
+ * HOC that manages a "react-bootstrap" `Modal` and adds fullscreen styles.
  *
- * .ReactModal__Body--open {
- * 	overflow: hidden;
- * }
+ * Uses `connectedModalComponent` to coordinate modal state in redux.
  *
  * @param WrappedComponent The component to wrap.
  */

package/lib/css/base/_print.css

@@ -13,7 +13,7 @@
 
 @media print {
 	/* override global react fullscreen modal styles */
-	.ReactModal__Body--open {
+	.modal-open {
 		overflow: visible !important;
 
 		/* always hide content underneath the fullscreen modal */
@@ -22,25 +22,29 @@
 		}
 	}
 
+	.fullscreen-modal {
+		position: static;
+	}
+
 	/* hide hidden fullscreen modal content when printing */
-	.ReactModalPortal.HiddenFullscreenModal {
-		display: none;
+	.fullscreen-modal[aria-hidden="true"] {
+		display: none !important;
 	}
 
-	.ReactModal__Overlay {
+	.fullscreen-modal .modal-dialog {
+		overflow: visible !important;
+
 		/* safari-only */
 		@supports (-webkit-hyphens:none) {
-			position: static !important;
+			border: none !important;
 		}
 	}
 
-	.ReactModal__Content {
-		overflow: visible !important;
-
+	.fullscreen-modal .modal-dialog,
+	.fullscreen-modal .modal-dialog .modal-content {
 		/* safari-only */
 		@supports (-webkit-hyphens:none) {
 			position: static !important;
-			border: none !important;
 		}
 	}
 }

package/lib/css/components/_buttons.css

@@ -281,6 +281,7 @@ button.close > span {
 .action-list {
 	display: block;
 	min-width: 146px;
+	padding: 0;
 
 	& .btn-default {
 		padding: 0.5rem 1rem;
@@ -295,11 +296,20 @@ button.close > span {
 		align-self: stretch;
 	}
 
-	& .action-list-menu svg {
-		height: 2rem;
-		width: 2rem;
-		vertical-align: middle;
-		margin-right: 0.5rem;
+	& .action-list-menu-item {
+		padding-top: 0.75rem;
+		padding-bottom: 0.75rem;
+
+		& svg {
+			height: 2rem;
+			width: 2rem;
+			vertical-align: middle;
+			margin-right: 0.5rem;
+		}
+
+		&:not(:last-of-type) {
+			border-bottom: 1px solid var(--color-medium-grey);
+		}
 	}
 }
 

package/lib/css/components/_modals.css

@@ -1,7 +1,3 @@
-.ReactModal__Body--open {
-	overflow: hidden;
-}
-
 .modal-dialog {
 	max-width: none;
 	width: auto;
@@ -40,6 +36,31 @@
 	}
 }
 
+.fullscreen-modal {
+	& .modal-dialog {
+		position: absolute;
+		top: 0;
+		left: 0;
+		overflow: hidden;
+		padding: 0;
+		margin: 0;
+		border: none;
+		background-color: white;
+		width: 100%;
+		transition: none !important;
+	}
+
+	& .modal-content {
+		box-shadow: none;
+		border-radius: 0;
+		border: none;
+	}
+}
+
+.modal-open .fullscreen-modal {
+	overflow: hidden;
+}
+
 /* Always display sentry feedback dialog on top of everything else. */
 .sentry-error-embed-wrapper {
 	z-index: 9999 !important;

package/lib/utils/dom.js

@@ -188,10 +188,6 @@ var setupMobileEventListeners = function () {
     // add event listeners
     visualViewport.addEventListener('resize', function () {
         setVisualViewportHeightVar();
-        // keep the document element scrolled to the top if a ReactModal is open
-        if (document.body.classList.contains('ReactModal__Body--open')) {
-            document.documentElement.scrollTop = 0;
-        }
     });
     window.addEventListener('focusin', onFocusIn);
     window.addEventListener('focusout', onFocusOut);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "7.0.16",
+	"version": "7.0.17",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -101,7 +101,6 @@
 		"@types/react": "^17.0.0",
 		"@types/react-dom": "^17.0.0",
 		"@types/react-helmet": "^6.1.0",
-		"@types/react-modal": "^3.16.3",
 		"@types/react-redux": "^7.1.16",
 		"@types/react-router": "^5.1.11",
 		"@types/react-router-bootstrap": "^0.24.5",
@@ -128,7 +127,6 @@
 		"react-bootstrap": "^1.4.3",
 		"react-ga4": "^2.1.0",
 		"react-helmet": "^6.1.0",
-		"react-modal": "^3.12.1",
 		"react-quill": "purdue-tlt/react-quill#fix/auto-focus",
 		"react-redux": "^7.2.2",
 		"react-router": "^5.2.0",