studiokit-scaffolding-js 7.0.17 → 7.0.19

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

@@ -64,10 +64,10 @@ var ActionList = function (_a) {
             defaultAction.icon,
             defaultAction.name)),
         !!model && (actionCount > 1 || alwaysShowKebab) && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(core_1.Button, { ref: anchorRef, onClick: function (event) { return setInfoMenuAnchorElement(event.currentTarget); }, "aria-label": "Actions", "aria-haspopup": "true", "aria-controls": infoMenuAnchorElement ? "info-menu-" + model.id : undefined, className: "action-list-text-button" + (defaultAction ? ' with-default-action' : ''), color: "primary" },
+            react_1.default.createElement(core_1.Button, { ref: anchorRef, onClick: function (event) { return setInfoMenuAnchorElement(event.currentTarget); }, "aria-label": "Actions", "aria-haspopup": "true", "aria-controls": infoMenuAnchorElement ? "info-menu-" + model.id : undefined, "aria-expanded": !!infoMenuAnchorElement, className: "action-list-text-button" + (defaultAction ? ' with-default-action' : ''), color: "primary" },
                 "Actions",
                 react_1.default.createElement(MoreVert_1.default, { color: "primary" })),
-            react_1.default.createElement(core_1.IconButton, { ref: anchorRef, onClick: function (event) { return setInfoMenuAnchorElement(event.currentTarget); }, "aria-label": "Actions", "aria-haspopup": "true", "aria-controls": infoMenuAnchorElement ? "info-menu-" + model.id : undefined, className: "action-list-icon-button" + (defaultAction ? ' with-default-action' : '') },
+            react_1.default.createElement(core_1.IconButton, { ref: anchorRef, onClick: function (event) { return setInfoMenuAnchorElement(event.currentTarget); }, "aria-label": "Actions", "aria-haspopup": "true", "aria-controls": infoMenuAnchorElement ? "info-menu-" + model.id : undefined, "aria-expanded": !!infoMenuAnchorElement, className: "action-list-icon-button" + (defaultAction ? ' with-default-action' : '') },
                 react_1.default.createElement(MoreVert_1.default, { color: "primary" })),
             react_1.default.createElement(core_1.Popper, { open: !!infoMenuAnchorElement, anchorEl: infoMenuAnchorElement, placement: "bottom-end", className: "z-1" + (className ? " " + className : ''), transition: true }, function (_a) {
                 var TransitionProps = _a.TransitionProps, placement = _a.placement;

package/lib/components/ConnectedModal.js

@@ -31,7 +31,7 @@ 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));
 };
 /**

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

@@ -31,7 +31,7 @@ interface FullscreenModalState {
  *
  * @param WrappedComponent The component to wrap.
  */
-export declare function configureFullscreenModalComponent<TOwnProps extends object>(WrappedComponent: ComponentType<TOwnProps & FullscreenModalWrappedProps>): {
+export declare function configureFullscreenModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & FullscreenModalWrappedProps>): {
     new (props: TOwnProps & FullscreenModalOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps): {
         componentDidMount(): void;
         componentDidUpdate(prevProps: TOwnProps & FullscreenModalOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps, prevState: FullscreenModalState): void;
@@ -69,5 +69,5 @@ export declare function configureFullscreenModalComponent<TOwnProps extends obje
  *
  * @param WrappedComponent The component to wrap.
  */
-export declare function fullscreenModalComponent<TOwnProps extends object>(WrappedComponent: ComponentType<TOwnProps & FullscreenModalWrappedProps>): ComponentClass<TOwnProps & FullscreenModalOwnProps>;
+export declare function fullscreenModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & FullscreenModalWrappedProps>): ComponentClass<TOwnProps & FullscreenModalOwnProps>;
 export default fullscreenModalComponent;

package/lib/components/HOC/FullscreenModalComponent.js

@@ -120,7 +120,7 @@ function configureFullscreenModalComponent(WrappedComponent) {
             });
         };
         FullscreenModalComponent.prototype.render = function () {
-            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"]);
+            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;

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/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/_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/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.17",
+	"version": "7.0.19",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",