studiokit-scaffolding-js 7.0.15 → 7.0.17

package/README.md

@@ -103,7 +103,10 @@ Components and utils can be imported from `studiokit-scaffolding-js/lib/...`
 	1. Increment the **last** number in the version
 		* e.g. `1.0.0-next.2.1` => `1.0.0-next.2.2` for a feature/issue branch
 		* e.g. `1.0.1-alpha.1` => `1.0.1-alpha.2` for a hotfix branch
-	1. Push to gitlab. Azure DevOps will run a pipeline and publish this version to npmjs.org
+	1. Push to gitlab.
+    1. Publish to npmjs.org
+        * `npm publish --tag next`  
+            (You will need to be logged into npm via `npm login` if you aren't already. Use your own login, not the itap-informatics one.)
 	1. Install the new version in the project(s) you are working on by updating its `package.json` and running `yarn`
 		  * As an alternative to the two steps above, if you don't need to make changes available to other devs yet you can:
 		    1. In the studiokit directory, run `yarn build` then `yarn pack`. You'll still need to have incremented the version number to avoid having it cached.
@@ -115,7 +118,9 @@ Components and utils can be imported from `studiokit-scaffolding-js/lib/...`
 1. Release
 	* **Feature/Issue**: After merging, create a new "release" branch from `develop` and follow the "git flow" release steps as normal
 	* **Hotfix**: Finish the "git flow" hotfix steps as normal from the hotfix branch
-	* Azure DevOps will run a pipeline to publish the version merged to `master` to npmjs.org
+1. Publish to npmjs.org
+    * `npm publish`  
+        (You will need to be logged into npm via `npm login` if you aren't already. Use your own login, not the itap-informatics one.)
 
 ## Styles
 

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/AlertDialog.d.ts

@@ -12,6 +12,7 @@ export interface AlertDialogProps {
     hideCancel?: boolean;
     onDestroy?: MouseEventHandler<HTMLElement>;
     destroyText?: string;
+    usePrimaryColorForDestroy?: boolean;
     manualBackground?: boolean;
 }
 export declare const AlertDialog: FunctionComponent<AlertDialogProps>;

package/lib/components/AlertDialog.js

@@ -9,7 +9,7 @@ var react_1 = __importDefault(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var ConnectedModal_1 = __importDefault(require("./ConnectedModal"));
 var AlertDialog = function (props) {
-    var isOpen = props.isOpen, title = props.title, description = props.description, onProceed = props.onProceed, proceedText = props.proceedText, onCancel = props.onCancel, cancelText = props.cancelText, hideCancel = props.hideCancel, onDestroy = props.onDestroy, destroyText = props.destroyText, manualBackground = props.manualBackground;
+    var isOpen = props.isOpen, title = props.title, description = props.description, onProceed = props.onProceed, proceedText = props.proceedText, onCancel = props.onCancel, cancelText = props.cancelText, hideCancel = props.hideCancel, onDestroy = props.onDestroy, destroyText = props.destroyText, usePrimaryColorForDestroy = props.usePrimaryColorForDestroy, manualBackground = props.manualBackground;
     return (react_1.default.createElement(ConnectedModal_1.default, { show: isOpen, onHide: onCancel, className: "z-9999" + (manualBackground ? ' bg-black-50' : '') },
         react_1.default.createElement(react_bootstrap_1.Modal.Header, { closeButton: true },
             react_1.default.createElement(react_bootstrap_1.Modal.Title, null, title)),
@@ -17,6 +17,6 @@ var AlertDialog = function (props) {
         react_1.default.createElement(react_bootstrap_1.Modal.Footer, null,
             !!onProceed && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-proceed-btn", "aria-label": proceedText || 'Confirm', className: "btn-primary ttc fr mb1", color: "primary", onClick: onProceed }, proceedText || 'Confirm')),
             !hideCancel && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-cancel-btn", color: "primary", "aria-label": cancelText || 'Cancel', className: "btn-text ttc" + (onDestroy ? ' fr' : ' fl') + " " + (onProceed ? ' mr1' : ''), onClick: onCancel }, cancelText || 'Cancel')),
-            !!onDestroy && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-destroy-btn", "aria-label": destroyText || 'Destroy', color: "secondary", className: "btn-text color-red ttc fl", onClick: onDestroy }, destroyText || 'Destroy')))));
+            !!onDestroy && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-destroy-btn", "aria-label": destroyText || 'Destroy', color: usePrimaryColorForDestroy ? 'primary' : 'secondary', className: "btn-text fl ttc" + (usePrimaryColorForDestroy ? '' : ' color-red'), onClick: onDestroy }, destroyText || 'Destroy')))));
 };
 exports.AlertDialog = AlertDialog;

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
-                    }
-                }, 
-                // hide the rendered portal if this is not the top open fullscreen modal
-                portalClassName: "ReactModalPortal" + (!isTopOpenFullscreenModal ? ' dn' : ''), 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/components/Lti/CreateNonLtiGroupAlertDialog.d.ts

@@ -9,5 +9,5 @@ export interface CreateNonLtiGroupAlertDialogProps extends Omit<AlertDialogProps
 }
 export declare const CreateNonLtiGroupAlertDialog: FunctionComponent<CreateNonLtiGroupAlertDialogProps>;
 export declare const mapStateToProps: (state: BaseReduxState) => CreateNonLtiGroupAlertDialogReduxProps;
-declare const _default: import("react-redux").ConnectedComponent<React.FunctionComponent<CreateNonLtiGroupAlertDialogProps>, Pick<React.PropsWithChildren<CreateNonLtiGroupAlertDialogProps>, "description" | "id" | "children" | "onCancel" | "isOpen" | "onProceed" | "proceedText" | "cancelText" | "hideCancel" | "onDestroy" | "destroyText" | "manualBackground" | "externalHelpResourcePageUrl">>;
+declare const _default: import("react-redux").ConnectedComponent<React.FunctionComponent<CreateNonLtiGroupAlertDialogProps>, Pick<React.PropsWithChildren<CreateNonLtiGroupAlertDialogProps>, "description" | "id" | "children" | "onCancel" | "isOpen" | "onProceed" | "proceedText" | "cancelText" | "hideCancel" | "onDestroy" | "destroyText" | "usePrimaryColorForDestroy" | "manualBackground" | "externalHelpResourcePageUrl">>;
 export default _default;

package/lib/css/base/_print.css

@@ -0,0 +1,66 @@
+/*
+	Sets the default printing options for the browser print dialog,
+	while still allowing the dialog to override.
+
+	NOTE: not supported by Safari
+*/
+@page {
+	size: 8.5in 11in;
+	margin: 0.5in;
+	/* stylelint-disable-next-line at-rule-descriptor-no-unknown */
+	widows: 5;
+}
+
+@media print {
+	/* override global react fullscreen modal styles */
+	.modal-open {
+		overflow: visible !important;
+
+		/* always hide content underneath the fullscreen modal */
+		& #root {
+			display: none;
+		}
+	}
+
+	.fullscreen-modal {
+		position: static;
+	}
+
+	/* hide hidden fullscreen modal content when printing */
+	.fullscreen-modal[aria-hidden="true"] {
+		display: none !important;
+	}
+
+	.fullscreen-modal .modal-dialog {
+		overflow: visible !important;
+
+		/* safari-only */
+		@supports (-webkit-hyphens:none) {
+			border: none !important;
+		}
+	}
+
+	.fullscreen-modal .modal-dialog,
+	.fullscreen-modal .modal-dialog .modal-content {
+		/* safari-only */
+		@supports (-webkit-hyphens:none) {
+			position: static !important;
+		}
+	}
+}
+
+.page-break-after {
+	break-after: page;
+}
+
+.page-break-before {
+	break-before: page;
+}
+
+.print-only {
+	display: none;
+
+	@media print {
+		display: initial;
+	}
+}

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.15",
+	"version": "7.0.17",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -25,7 +25,7 @@
 		"prepublishOnly": "yarn build",
 		"test": "jest",
 		"test:ci": "cross-env CI=true yarn test",
-		"test:ci-junit": "cross-env CI=true npm run test -- --coverage --reporters='default' --reporters='jest-junit' --coverageReporters='cobertura' --coverageReporters='html'"
+		"test:ci-junit": "cross-env CI=true yarn test --coverage --reporters='default' --reporters='jest-junit' --coverageReporters='cobertura' --coverageReporters='html'"
 	},
 	"husky": {
 		"hooks": {
@@ -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.10.6",
 		"@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",
@@ -203,5 +201,5 @@
 			"optional": true
 		}
 	},
-	"packageManager": "yarn@4.4.0"
+	"packageManager": "yarn@4.12.0"
 }