studiokit-scaffolding-js 7.0.16 → 7.0.18

package/lib/components/AccessibleOverlayTrigger.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OverlayTriggerProps } from 'react-bootstrap';
+interface AccessibleOverlayTriggerProps extends Omit<OverlayTriggerProps, 'overlay'> {
+    overlay: React.ReactNode;
+    screenReaderNodeLocation?: 'before' | 'after';
+    popoverStyle?: React.CSSProperties;
+}
+/**
+ * Wrapper for react-bootstrap's OverlayTrigger with custom popover logic to improve screen reader support.
+ */
+export declare const AccessibleOverlayTrigger: ({ children, overlay, popoverStyle, screenReaderNodeLocation, ...restProps }: AccessibleOverlayTriggerProps) => React.JSX.Element;
+export {};

package/lib/components/AccessibleOverlayTrigger.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccessibleOverlayTrigger = void 0;
+var react_1 = __importDefault(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var useGuid_1 = require("../hooks/useGuid");
+/**
+ * Wrapper for react-bootstrap's OverlayTrigger with custom popover logic to improve screen reader support.
+ */
+var AccessibleOverlayTrigger = function (_a) {
+    var children = _a.children, overlay = _a.overlay, popoverStyle = _a.popoverStyle, _b = _a.screenReaderNodeLocation, screenReaderNodeLocation = _b === void 0 ? 'after' : _b, restProps = __rest(_a, ["children", "overlay", "popoverStyle", "screenReaderNodeLocation"]);
+    var guid = useGuid_1.useGuid();
+    var popover = (react_1.default.createElement(react_bootstrap_1.Popover, { id: "popover-" + guid, "aria-hidden": true, style: popoverStyle }, overlay));
+    var screenReaderNode = react_1.default.createElement("span", { className: "sr-only" }, overlay);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        screenReaderNodeLocation === 'before' && screenReaderNode,
+        react_1.default.createElement(react_bootstrap_1.OverlayTrigger, __assign({}, restProps, { overlay: popover }), children),
+        screenReaderNodeLocation === 'after' && screenReaderNode));
+};
+exports.AccessibleOverlayTrigger = AccessibleOverlayTrigger;

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,14 +27,14 @@ 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
-    guid = _a.guid, modals = _a.modals, isTopOpenFullscreenModal = _a.isTopOpenFullscreenModal, dispatch = _a.dispatch, modalProps = __rest(_a, ["guid", "modals", "isTopOpenFullscreenModal", "dispatch"]);
+    guid = _a.guid, modals = _a.modals, dispatch = _a.dispatch, modalProps = __rest(_a, ["guid", "modals", "dispatch"]);
     return react_1.default.createElement(react_bootstrap_1.Modal, __assign({}, modalProps));
 };
 /**
  * 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/Forms/DateField.js

@@ -42,6 +42,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -72,28 +83,14 @@ var DateField = /** @class */ (function (_super) {
         return _this;
     }
     DateField.prototype.render = function () {
-        var _a = this.props, value = _a.value, disabled = _a.disabled, minDate = _a.minDate, maxDate = _a.maxDate;
-        var formatWarning = !!value && value.length > 0 && !dateRegex.test(value)
-            ? date_1.isDateInputSupported
-                ? "Must match the format \"MM/DD/YYYY\""
-                : "Must match the format \"" + dateFormat + "\""
-            : !!value && value.length > 0 && !this.isDateValid(value)
-                ? 'Must be a valid date'
-                : undefined;
-        // prevent custom props from being passed to TextField
-        var newProps = __assign({}, this.props);
-        var className = newProps.className;
-        delete newProps.minDate;
-        delete newProps.maxDate;
-        delete newProps.className;
+        var _a = this.props, className = _a.className, minDate = _a.minDate, maxDate = _a.maxDate, disabled = _a.disabled, textFieldProps = __rest(_a, ["className", "minDate", "maxDate", "disabled"]);
         return (react_1.default.createElement("div", { className: className },
-            react_1.default.createElement(TextField_1.default, __assign({}, newProps, { type: "date", className: "material-text-field-date", inputProps: {
+            react_1.default.createElement(TextField_1.default, __assign({}, textFieldProps, { type: "date", className: "material-text-field-date", inputProps: {
                     pattern: datePattern,
                     placeholder: dateFormat,
                     min: !!minDate && !disabled ? date_1.getFormattedNumberedDateForInput(minDate) : null,
                     max: !!maxDate && !disabled ? date_1.getFormattedNumberedDateForInput(maxDate) : null
-                }, onChange: this.onChange })),
-            formatWarning && react_1.default.createElement("label", { className: "color-red i f6 db" }, formatWarning)));
+                }, onChange: this.onChange }))));
     };
     return DateField;
 }(react_1.Component));

package/lib/components/Forms/TimeField.js

@@ -42,17 +42,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimeField = void 0;
 var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
-var Help_1 = __importDefault(require("@material-ui/icons/Help"));
 var moment_1 = __importDefault(require("moment"));
 var react_1 = __importStar(require("react"));
-var react_bootstrap_1 = require("react-bootstrap");
-var date_1 = require("../../utils/date");
 var timePattern = '^(2[0-3]|[0-1][0-9]):([0-5][0-9])$';
 var timeFormat = 'HH:mm';
 var timeRegex = new RegExp(timePattern);
@@ -75,38 +83,12 @@ var TimeField = /** @class */ (function (_super) {
         return _this;
     }
     TimeField.prototype.render = function () {
-        var value = this.props.value;
-        var formatWarning = !!value && value.length > 0 && !timeRegex.test(value)
-            ? date_1.isTimeInputSupported
-                ? "Must match the format \"hh:mm a\""
-                : "Must match the format \"" + timeFormat + "\" using 24 hour time"
-            : !!value && value.length > 0 && !this.isTimeValid(value)
-                ? 'Must be a valid time'
-                : undefined;
-        // prevent some props from being passed to TextField
-        var newProps = __assign({}, this.props);
-        var className = newProps.className;
-        delete newProps.className;
-        if (!!newProps.label && !date_1.isTimeInputSupported) {
-            var popover = (react_1.default.createElement(react_bootstrap_1.Popover, { id: "activatedAssignments" },
-                react_1.default.createElement("h3", null, "Missing Browser Features"),
-                react_1.default.createElement("p", null,
-                    "Your current browser does not have a default time picker. You must use the 24 hour time format, \"",
-                    timeFormat,
-                    "\".")));
-            newProps.label = (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "top", trigger: ['click', 'hover', 'focus'], overlay: popover },
-                react_1.default.createElement("span", null,
-                    newProps.label,
-                    " ",
-                    react_1.default.createElement("small", null, "(24 hour time)"),
-                    react_1.default.createElement(Help_1.default, { color: "primary", className: "ml1 v-top f7", fontSize: "small", tabIndex: 0 }))));
-        }
+        var _a = this.props, className = _a.className, textFieldProps = __rest(_a, ["className"]);
         return (react_1.default.createElement("div", { className: className },
-            react_1.default.createElement(TextField_1.default, __assign({}, newProps, { type: "time", className: "material-text-field-time", inputProps: {
+            react_1.default.createElement(TextField_1.default, __assign({}, textFieldProps, { type: "time", className: "material-text-field-time", inputProps: {
                     pattern: timePattern,
                     placeholder: timeFormat
-                }, onChange: this.onChange })),
-            formatWarning && react_1.default.createElement("label", { className: "color-red i f6 db" }, formatWarning)));
+                }, onChange: this.onChange }))));
     };
     return TimeField;
 }(react_1.Component));

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

@@ -8,7 +8,6 @@ export declare type ConnectedModalReduxProps = {
 export interface ConnectedModalWrappedProps {
     onEntering: () => void;
     onExited: () => void;
-    isTopOpenFullscreenModal?: boolean;
 }
 export interface ConnectedModalState {
     isModalOpen: boolean;

package/lib/components/HOC/ConnectedModalComponent.js

@@ -118,12 +118,8 @@ function configureConnectedModalComponent(WrappedComponent, isFullscreen) {
             this.onExited();
         };
         ConnectedModalComponent.prototype.render = function () {
-            var _a, _b;
-            var _c = this.props, modals = _c.modals, guid = _c.guid, ownProps = __rest(_c, ["modals", "guid"]);
-            var topOpenFullscreenModal = lodash_1.maxBy(Object.values(modals).filter(function (m) { return m.isFullscreen; }), function (modal) { return modal.index; });
-            var thisModalIndex = (_b = (_a = modals[guid]) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : null;
-            var isTopOpenFullscreenModal = (topOpenFullscreenModal === null || topOpenFullscreenModal === void 0 ? void 0 : topOpenFullscreenModal.index) === thisModalIndex;
-            return (react_1.default.createElement(WrappedComponent, __assign({}, ownProps, { guid: guid, onEntering: this.onEntering, onExited: this.onExited, isTopOpenFullscreenModal: isTopOpenFullscreenModal })));
+            var _a = this.props, modals = _a.modals, guid = _a.guid, ownProps = __rest(_a, ["modals", "guid"]);
+            return (react_1.default.createElement(WrappedComponent, __assign({}, ownProps, { guid: guid, onEntering: this.onEntering, onExited: this.onExited })));
         };
         return ConnectedModalComponent;
     }(react_1.Component));

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,8 +25,7 @@ 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.
  *
@@ -38,9 +34,7 @@ interface FullscreenModalState {
 export declare function configureFullscreenModalComponent<TOwnProps extends {}>(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,16 +63,9 @@ 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.
  */

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, onEntering = _a.onEntering, onExited = _a.onExited, _ = _a.isOpen, closeModal = _a.closeModal, remainingProps = __rest(_a, ["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/components/Quill/ImageWithAltTextModal.js

@@ -30,6 +30,7 @@ var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var react_quill_1 = require("react-quill");
+var AccessibleOverlayTrigger_1 = require("../AccessibleOverlayTrigger");
 var ConnectedModal_1 = __importDefault(require("../ConnectedModal"));
 var ErrorMessage_1 = require("../ErrorMessage");
 var ImageWarning_1 = require("./ImageWarning");
@@ -137,8 +138,7 @@ var ImageWithAltTextModal = function (_a) {
                     react_1.default.createElement("h3", { className: "mv0" },
                         react_1.default.createElement(react_bootstrap_1.FormLabel, { htmlFor: "img-alt-text", className: "mb0" },
                             "Alt Text *",
-                            react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "top", trigger: ['hover', 'focus'], overlay: react_1.default.createElement(react_bootstrap_1.Popover, { id: "alt-text-explanation" },
-                                    react_1.default.createElement("p", { className: "mb0" }, "Used by screen readers to describe the content of an image.")) },
+                            react_1.default.createElement(AccessibleOverlayTrigger_1.AccessibleOverlayTrigger, { placement: "top", trigger: ['hover', 'focus'], overlay: react_1.default.createElement("p", { className: "mb0" }, "Used by screen readers to describe the content of an image.") },
                                 react_1.default.createElement("button", { type: "button", className: "dib help-button bg-transparent" },
                                     react_1.default.createElement(Help_1.default, { color: "primary", titleAccess: "Alt text explanation" })))))),
                 react_1.default.createElement(react_bootstrap_1.FormControl, { id: "img-alt-text", "aria-label": "Image Alt Text", as: "textarea", onChange: function (event) {

package/lib/components/UserRoles/Add.js

@@ -126,7 +126,7 @@ var UserRolesAdd = /** @class */ (function (_super) {
         var _a = this.state, identifiers = _a.identifiers, role = _a.role, showErrorAlert = _a.showErrorAlert, errorMessage = _a.errorMessage;
         var _b = this.props, entityName = _b.entityName, isAddingUsersToRole = _b.isAddingUsersToRole, roleDescriptions = _b.roleDescriptions, renderAddDescription = _b.renderAddDescription, disabled = _b.disabled, textForRole = _b.textForRole;
         var roles = lodash_1.default.keys(roleDescriptions);
-        var rolePopover = (react_1.default.createElement(react_bootstrap_1.Popover, { id: "role" },
+        var rolePopoverContent = (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("h3", null, "Role"),
             roles.map(function (r) { return (react_1.default.createElement(react_1.Fragment, { key: r }, roleDescriptions[r])); })));
         var appConfig = configuration_1.getAppConfig();
@@ -141,7 +141,7 @@ var UserRolesAdd = /** @class */ (function (_super) {
                         " (separated by a new line)"),
                     react_1.default.createElement(react_bootstrap_1.FormControl, { type: "text", as: "textarea", name: "account", "aria-label": "The account names to add", onChange: this.updateIdentifiers, value: identifiers, placeholder: domainIdentifier_1.getDomainIdentifierTypeString(), disabled: disabled }))),
             react_1.default.createElement(react_bootstrap_1.Col, { xs: 12, sm: 4 },
-                react_1.default.createElement(Select_1.RoleSelect, { options: roles, value: role, onChange: this.updateRole, labelVisible: true, popoverContentComponent: rolePopover, textForRole: textForRole })),
+                react_1.default.createElement(Select_1.RoleSelect, { options: roles, value: role, onChange: this.updateRole, labelVisible: true, popoverContentComponent: rolePopoverContent, textForRole: textForRole })),
             react_1.default.createElement(react_bootstrap_1.Col, { xs: 12, sm: 2, className: "mt3-ns pt2-ns" },
                 isAddingUsersToRole && react_1.default.createElement(Inline_1.RefreshIndicatorInline, { className: "mr3" }),
                 !isAddingUsersToRole && (react_1.default.createElement(Button_1.default, { id: "userRolesAddButton", color: "primary", className: "btn-primary w-100-lt-xs", disabled: !identifiers || disabled, onClick: this.handleSubmit },

package/lib/components/UserRoles/RoleCell.js

@@ -26,9 +26,9 @@ exports.RoleCell = void 0;
 var core_1 = require("@material-ui/core");
 var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
 var react_1 = __importStar(require("react"));
-var react_bootstrap_1 = require("react-bootstrap");
 var react_redux_1 = require("react-redux");
 var userRole_1 = require("../../utils/userRole");
+var AccessibleOverlayTrigger_1 = require("../AccessibleOverlayTrigger");
 var IconExternalUser_1 = require("../Icons/IconExternalUser");
 var Inline_1 = require("../RefreshIndicator/Inline");
 var Context_1 = require("./Context");
@@ -45,7 +45,6 @@ var RoleCell = function (_a) {
     return (react_1.default.createElement("ul", { className: "mb0 list pa0 tr" }, user.roles.sort(userRole_1.sortByRole(roles)).map(function (userRole) {
         var roleText = userRole_1.getRoleText(textForRole)(userRole);
         var isUserRoleExternal = userRole_1.isExternal(userRole);
-        var userId = userRole_1.getUserId(userRole);
         var canUpdate = 
         // current user has modify access
         canModify &&
@@ -77,7 +76,7 @@ var RoleCell = function (_a) {
             !canModify ||
             // update is disabled
             isUpdateDisabled;
-        var isExternalPopover = (react_1.default.createElement(react_bootstrap_1.Popover, { id: "is-external-popover-" + userId + "-" + userRole.role },
+        var isExternalPopoverContent = (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("h3", null, "Added via Roster Sync"),
             react_1.default.createElement("p", { className: "mb2" }, "This person was added automatically via roster sync and cannot be manually removed.")));
         var isUserRoleUpdating = isUpdating && (userRoleToUpdate === null || userRoleToUpdate === void 0 ? void 0 : userRoleToUpdate.id) === userRole.id;
@@ -91,7 +90,7 @@ var RoleCell = function (_a) {
                 react_1.default.createElement(Inline_1.RefreshIndicatorInline, { size: 20, className: "ma3" }))) : canDelete ? (react_1.default.createElement(core_1.IconButton, { className: "remove-user-button", "aria-label": "Remove " + roleText, onClick: function () {
                     removeUserRole(userRole);
                 }, disabled: isUpdating || isRemoving },
-                react_1.default.createElement(Delete_1.default, { color: "error" }))) : isUserRoleExternal ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "auto", trigger: ['hover', 'focus'], overlay: isExternalPopover },
+                react_1.default.createElement(Delete_1.default, { color: "error" }))) : isUserRoleExternal ? (react_1.default.createElement(AccessibleOverlayTrigger_1.AccessibleOverlayTrigger, { placement: "auto", trigger: ['hover', 'focus'], overlay: isExternalPopoverContent },
                 react_1.default.createElement(IconExternalUser_1.IconExternalUser, { tabIndex: 0, style: { margin: '12px', fill: '#949494' }, className: "external-icon", titleAccess: "External Role" }))) : (
             // dummy spacer to keep items aligned
             react_1.default.createElement("span", { style: {

package/lib/components/UserRoles/Select.js

@@ -30,6 +30,7 @@ var Help_1 = __importDefault(require("@material-ui/icons/Help"));
 var react_1 = __importDefault(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var baseRole_1 = require("../../utils/baseRole");
+var AccessibleOverlayTrigger_1 = require("../AccessibleOverlayTrigger");
 var label = function (hasMultipleOptions, labelVisible, hasTooltip, ref) {
     var content = (react_1.default.createElement(react_1.default.Fragment, null,
         "Role",
@@ -39,7 +40,7 @@ var label = function (hasMultipleOptions, labelVisible, hasTooltip, ref) {
 };
 var overlay = function (hasMultipleOptions, labelVisible, rolePopover) {
     if (labelVisible === void 0) { labelVisible = false; }
-    return rolePopover ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "right", trigger: ['hover', 'focus'], overlay: rolePopover }, function (_a) {
+    return rolePopover ? (react_1.default.createElement(AccessibleOverlayTrigger_1.AccessibleOverlayTrigger, { placement: "right", trigger: ['hover', 'focus'], overlay: rolePopover }, function (_a) {
         var ref = _a.ref, triggerHandler = __rest(_a, ["ref"]);
         return (react_1.default.createElement("span", __assign({}, triggerHandler), label(hasMultipleOptions, labelVisible, true, ref)));
     })) : (label(hasMultipleOptions, labelVisible, false));

package/lib/components/UserRoles/index.d.ts

@@ -107,5 +107,5 @@ export declare class UserRoles extends Component<UserRolesProps, UserRolesState>
     render(): React.JSX.Element;
 }
 export declare const mapStateToProps: (state: BaseReduxState, ownProps: UserRolesOwnProps) => UserRolesReduxProps;
-declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "guid" | "ref" | "modelName" | "pathParams" | "queryParams" | "externalProviders" | "model" | "key" | "readOnly" | "entityName" | "load" | "disableAutoLoad" | "disableAutoLoadOnParamsChange" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "modelStatus" | "previousModelStatus" | "fetchingId" | "textForRole" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
+declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "guid" | "ref" | "modelName" | "pathParams" | "queryParams" | "externalProviders" | "load" | "key" | "readOnly" | "model" | "entityName" | "disableAutoLoad" | "disableAutoLoadOnParamsChange" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "modelStatus" | "previousModelStatus" | "fetchingId" | "textForRole" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
 export default _default;

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/_forms.css

@@ -10,10 +10,11 @@
 	box-shadow: none;
 }
 
-.form-control:focus, .MuiInputBase-input:focus {
+.form-control:focus,
+.MuiInputBase-input:focus {
 	border-color: var(--color-focus-border);
 	box-shadow: var(--box-shadow-focus-shadow);
-	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
 select.form-control {

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/css/components/_quill.css

@@ -44,10 +44,6 @@
 	}
 }
 
-.ql-toolbar.ql-snow {
-	border-color: var(--color-medium-dark-grey);
-}
-
 /* Expandable toolbar */
 
 .more-options {
@@ -87,6 +83,7 @@
 /* Toolbar */
 
 .ql-toolbar.ql-snow {
+	border-color: var(--color-medium-dark-grey);
 	padding: 0.6rem;
 
 	&.disabled-invisible {
@@ -302,7 +299,7 @@
 	z-index: 1;
 
 	& .ql-container.ql-snow {
-		border-color:  var(--color-focus-border);
+		border-color: var(--color-focus-border);
 		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 	}
 }

package/lib/utils/date.d.ts

@@ -157,6 +157,4 @@ export declare function getFullFormattedTimeZone(timeZoneId?: string, showEaster
  * @param dateTimeUtc The date to format.
  */
 export declare function getFormattedTimeZone(dateTimeUtc: string): string;
-export declare const isDateInputSupported: boolean;
-export declare const isTimeInputSupported: boolean;
 export declare function isDateTimeValid(dateTime: string | Date): boolean;

package/lib/utils/date.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isDateTimeValid = exports.isTimeInputSupported = exports.isDateInputSupported = exports.getFormattedTimeZone = exports.getFullFormattedTimeZone = exports.getFormattedNumberedTimeWithoutZoneOrMeridian = exports.getFormattedNumberedTimeWithoutZone = exports.getFormattedNumberedTimeWithFullZone = exports.getFormattedNumberedTime = exports.getFormattedNumberedDateWithoutYear = exports.getFormattedNumberedDateForInput = exports.getFormattedNumberedDateWithFullYear = exports.getFormattedNumberedDate = exports.getFormattedSimplifiedDateWithYearIfNotCurrent = exports.getFormattedSimplifiedDateWithoutYear = exports.getFormattedSimplifiedDate = exports.getFormattedNumberedDateAndTimeWithoutYear = exports.getFormattedNumberedDateAndTime = exports.getFormattedFullDateWithWeek = exports.getFormattedFullDateAndTime = exports.isNowBeforeDate = exports.isNowAfterDate = exports.isNowEqualOrBeforeDate = exports.isNowEqualOrAfterDate = exports.getEndOfMinute = exports.getEndOfDay = exports.getDateMinusTime = exports.getLocalDateTimeFromUtc = exports.getLocalMomentFromUtc = exports.getZonedMomentFromLocalDateTime = exports.getZonedMomentFromUtcInDefaultZone = exports.getZonedMomentFromUtc = exports.getOffsetDate = exports.getServerNowUtc = exports.setClockOffset = void 0;
+exports.isDateTimeValid = exports.getFormattedTimeZone = exports.getFullFormattedTimeZone = exports.getFormattedNumberedTimeWithoutZoneOrMeridian = exports.getFormattedNumberedTimeWithoutZone = exports.getFormattedNumberedTimeWithFullZone = exports.getFormattedNumberedTime = exports.getFormattedNumberedDateWithoutYear = exports.getFormattedNumberedDateForInput = exports.getFormattedNumberedDateWithFullYear = exports.getFormattedNumberedDate = exports.getFormattedSimplifiedDateWithYearIfNotCurrent = exports.getFormattedSimplifiedDateWithoutYear = exports.getFormattedSimplifiedDate = exports.getFormattedNumberedDateAndTimeWithoutYear = exports.getFormattedNumberedDateAndTime = exports.getFormattedFullDateWithWeek = exports.getFormattedFullDateAndTime = exports.isNowBeforeDate = exports.isNowAfterDate = exports.isNowEqualOrBeforeDate = exports.isNowEqualOrAfterDate = exports.getEndOfMinute = exports.getEndOfDay = exports.getDateMinusTime = exports.getLocalDateTimeFromUtc = exports.getLocalMomentFromUtc = exports.getZonedMomentFromLocalDateTime = exports.getZonedMomentFromUtcInDefaultZone = exports.getZonedMomentFromUtc = exports.getOffsetDate = exports.getServerNowUtc = exports.setClockOffset = void 0;
 var moment_timezone_1 = __importDefault(require("moment-timezone"));
 var moment_timezone_utils_1 = __importDefault(require("moment-timezone/moment-timezone-utils"));
 var timezone_1 = require("./timezone");
@@ -382,19 +382,6 @@ function applyFormat(dateTimeUtc, format, timeZoneId) {
     if (timeZoneId === void 0) { timeZoneId = timezone_1.guessTimeZoneId(); }
     return exports.getZonedMomentFromUtc(dateTimeUtc, timeZoneId).format(format);
 }
-var isInputTypeSupported = function (type) {
-    try {
-        var test_1 = document.createElement('input');
-        test_1.type = type;
-        var isSupported = test_1.type === type;
-        return isSupported;
-    }
-    catch (e) {
-        return false;
-    }
-};
-exports.isDateInputSupported = isInputTypeSupported('date');
-exports.isTimeInputSupported = isInputTypeSupported('time');
 function isDateTimeValid(dateTime) {
     return !!dateTime && moment_timezone_1.default(dateTime).isValid();
 }

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/lib/utils/shard.js

@@ -30,7 +30,7 @@ function getShardKey(host, localhostShardKey) {
         lodash_1.default.includes(finalHost, 'web.core.windows.net') ||
         lodash_1.default.includes(finalHost, 'azureedge.net') ||
         lodash_1.default.includes(finalHost, 'z01.azurefd.net') ||
-        lodash_1.default.includes(finalHost, 'ngrok.io')) {
+        lodash_1.default.includes(finalHost, 'ngrok')) {
         return shard_1.SHARD.PURDUE;
     }
     var urlParts = finalHost.split('.');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "7.0.16",
+	"version": "7.0.18",
 	"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",