studiokit-scaffolding-js 7.0.12-next.1.5 → 7.0.12-next.1.6

package/lib/components/ActionList.js

@@ -27,11 +27,7 @@ const ActionList = ({ actions = [], model = null, className, alwaysShowKebab })
     if (defaultAction) {
         allowedActions = allowedActions.filter(a => a !== defaultAction);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: !!defaultAction && !!model && (actionCount > 1 || alwaysShowKebab) ? 'inline-flex' : 'di', children: [!!defaultAction && ((0, jsx_runtime_1.jsxs)(core_1.Button, { color: "primary", onClick: defaultAction.action, id: defaultAction.id, className: defaultAction.className || '', disabled: defaultAction.disabled, children: [defaultAction.icon, defaultAction.name] })), !!model && (actionCount > 1 || alwaysShowKebab) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.Button, { ref: anchorRef, onClick: event => {
-                            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", children: ["Actions", (0, jsx_runtime_1.jsx)(MoreVert_1.default, { color: "primary" })] }), (0, jsx_runtime_1.jsx)(core_1.IconButton, { ref: anchorRef, onClick: event => {
-                            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' : ''}`, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, { color: "primary" }) }), (0, jsx_runtime_1.jsx)(core_1.Popper, { open: !!infoMenuAnchorElement, anchorEl: infoMenuAnchorElement, placement: "bottom-end", className: `z-1${className ? ` ${className}` : ''}`, transition: true, children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(core_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom-end' ? 'top right' : 'bottom right' }, children: (0, jsx_runtime_1.jsx)(core_1.Paper, { children: (0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: onActionItemClick(), children: (0, jsx_runtime_1.jsx)(core_1.MenuList, { id: `info-menu-${model.id}`, autoFocusItem: !!infoMenuAnchorElement, onKeyDown: handleListKeyDown, className: "action-list shadow-large", children: allowedActions.map((a, index) => a.predicate
+    return ((0, jsx_runtime_1.jsxs)("div", { className: !!defaultAction && !!model && (actionCount > 1 || alwaysShowKebab) ? 'inline-flex' : 'di', children: [!!defaultAction && ((0, jsx_runtime_1.jsxs)(core_1.Button, { color: "primary", onClick: defaultAction.action, id: defaultAction.id, className: defaultAction.className || '', disabled: defaultAction.disabled, children: [defaultAction.icon, defaultAction.name] })), !!model && (actionCount > 1 || alwaysShowKebab) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.Button, { ref: anchorRef, onClick: event => 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", children: ["Actions", (0, jsx_runtime_1.jsx)(MoreVert_1.default, { color: "primary" })] }), (0, jsx_runtime_1.jsx)(core_1.IconButton, { ref: anchorRef, onClick: event => 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' : ''}`, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, { color: "primary" }) }), (0, jsx_runtime_1.jsx)(core_1.Popper, { open: !!infoMenuAnchorElement, anchorEl: infoMenuAnchorElement, placement: "bottom-end", className: `z-1${className ? ` ${className}` : ''}`, transition: true, children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(core_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom-end' ? 'top right' : 'bottom right' }, children: (0, jsx_runtime_1.jsx)(core_1.Paper, { children: (0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: onActionItemClick(), children: (0, jsx_runtime_1.jsx)(core_1.MenuList, { id: `info-menu-${model.id}`, autoFocusItem: !!infoMenuAnchorElement, onKeyDown: handleListKeyDown, className: "action-list shadow-large", children: allowedActions.map((a, index) => a.predicate
                                             ? [
                                                 ...(index > 0 ? [(0, jsx_runtime_1.jsx)(core_1.Divider, {})] : []),
                                                 (0, jsx_runtime_1.jsxs)(core_1.MenuItem, { className: `action-list-menu mv1 pv2 ${a.className}`, onClick: onActionItemClick(a.action), color: "primary", disabled: a.disabled, children: [a.icon, a.name] }, a.id)

package/lib/components/Dropdowns/UserDropdown.js

@@ -20,8 +20,6 @@ const UserDropdown = (_a) => {
     var { userInfo, children } = _a, props = tslib_1.__rest(_a, ["userInfo", "children"]);
     const [guid] = (0, react_1.useState)((0, uuid_1.v4)());
     const dropdownTitle = userInfo.isImpersonated ? ((0, jsx_runtime_1.jsx)(UserDetail_1.ImpersonationUserDetail, Object.assign({ userInfo: userInfo }, props))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Hi, ", (0, user_1.displayFirstName)(userInfo)] }));
-    return ((0, jsx_runtime_1.jsxs)(ManagedNavDropdown_1.ManagedNavDropdown, { id: "user-menu", className: `user-menu${userInfo.isImpersonated ? ' user-menu-impersonated' : ''}`, title: dropdownTitle, children: [children, userInfo.isImpersonated && ((0, jsx_runtime_1.jsxs)(react_bootstrap_1.NavDropdown.Item, { onSelect: () => {
-                    (0, user_1.stopImpersonation)(guid);
-                }, children: [(0, jsx_runtime_1.jsx)(IconStopImpersonating_1.IconStopImpersonating, { className: "menu-icon" }), "Stop Impersonating"] })), (0, jsx_runtime_1.jsxs)(react_bootstrap_1.NavDropdown.Item, { onSelect: doLogOut, children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { className: "menu-icon" }), "Log Out"] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ManagedNavDropdown_1.ManagedNavDropdown, { id: "user-menu", className: `user-menu${userInfo.isImpersonated ? ' user-menu-impersonated' : ''}`, title: dropdownTitle, children: [children, userInfo.isImpersonated && ((0, jsx_runtime_1.jsxs)(react_bootstrap_1.NavDropdown.Item, { onSelect: () => (0, user_1.stopImpersonation)(guid), children: [(0, jsx_runtime_1.jsx)(IconStopImpersonating_1.IconStopImpersonating, { className: "menu-icon" }), "Stop Impersonating"] })), (0, jsx_runtime_1.jsxs)(react_bootstrap_1.NavDropdown.Item, { onSelect: doLogOut, children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { className: "menu-icon" }), "Log Out"] })] }));
 };
 exports.UserDropdown = UserDropdown;

package/lib/components/Groups/CreateEditCopySaveButtons.js

@@ -6,10 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = tslib_1.__importDefault(require("@material-ui/core/Button"));
 const CircularProgress_1 = tslib_1.__importDefault(require("@material-ui/core/CircularProgress"));
 const GroupCreateEditCopySaveButtons = ({ disabled, cannotSave, cannotSaveAndAddOwners, canAddInstructors, save, cancel }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [!!disabled && (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 30, className: "fr" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => {
-                    save();
-                }, color: "primary", className: `fr btn-primary${disabled ? ' visually-hidden' : ''}`, disabled: cannotSave(), children: "Save" }), canAddInstructors && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => {
-                    save(true);
-                }, color: "primary", className: `fr btn-primary mr1${disabled ? ' visually-hidden' : ''}`, disabled: cannotSaveAndAddOwners(), children: "Save and Add Instructors" })), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: cancel, color: "primary", className: `fr btn-text mr1${disabled ? ' visually-hidden' : ''}`, children: "Cancel" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [!!disabled && (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 30, className: "fr" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => save(), color: "primary", className: `fr btn-primary${disabled ? ' visually-hidden' : ''}`, disabled: cannotSave(), children: "Save" }), canAddInstructors && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => save(true), color: "primary", className: `fr btn-primary mr1${disabled ? ' visually-hidden' : ''}`, disabled: cannotSaveAndAddOwners(), children: "Save and Add Instructors" })), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: cancel, color: "primary", className: `fr btn-text mr1${disabled ? ' visually-hidden' : ''}`, children: "Cancel" })] }));
 };
 exports.GroupCreateEditCopySaveButtons = GroupCreateEditCopySaveButtons;

package/lib/components/Groups/ExternalGroups/Attach.js

@@ -131,9 +131,7 @@ class ExternalGroupsAttach extends react_1.Component {
     }
     componentWillUnmount() {
         const { ownerSchedules } = this.state;
-        (0, lodash_1.forEach)(ownerSchedules, os => {
-            (0, noStoreSaga_1.unregisterNoStoreActionHook)(os.hookId);
-        });
+        (0, lodash_1.forEach)(ownerSchedules, os => (0, noStoreSaga_1.unregisterNoStoreActionHook)(os.hookId));
     }
     componentDidUpdate(prevProps) {
         const { externalTermId: prevExternalTermId, groupUserRoles: prevGroupUserRoles } = prevProps;

package/lib/components/Groups/RosterSyncInfo.js

@@ -13,12 +13,6 @@ const RosterSyncInfo = ({ hasLtiRosterSync }) => {
     const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
     const lmsName = (0, configuration_1.getAppConfig)().LMS_NAME;
     const title = `${hasLtiRosterSync ? `${lmsName} ` : ''}Roster Sync`;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.default, { color: "primary", className: "mb0 mr1-ns pv2 ph2 fr-ns btn-text", onClick: () => {
-                    setIsModalOpen(true);
-                }, children: [(0, jsx_runtime_1.jsx)(Highlight_1.default, { className: "v-mid mr1" }), (0, jsx_runtime_1.jsx)("span", { className: "mb0 b", children: title })] }), (0, jsx_runtime_1.jsxs)(ConnectedModal_1.default, { show: isModalOpen, onHide: () => {
-                    setIsModalOpen(false);
-                }, children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Header, { closeButton: true, children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Title, { className: "f4", children: title }) }), (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Modal.Body, { children: [(0, jsx_runtime_1.jsx)("h3", { children: "When is the roster synced?" }), (0, jsx_runtime_1.jsxs)("p", { children: ["The roster is synced nightly throughout the duration of the course. People are added and removed automatically as the", ' ', hasLtiRosterSync ? `roster changes in ${lmsName}` : 'external roster changes', "."] })] }), (0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Footer, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { color: "primary", className: "ma0 btn-primary", onClick: () => {
-                                setIsModalOpen(false);
-                            }, children: "Close" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.default, { color: "primary", className: "mb0 mr1-ns pv2 ph2 fr-ns btn-text", onClick: () => setIsModalOpen(true), children: [(0, jsx_runtime_1.jsx)(Highlight_1.default, { className: "v-mid mr1" }), (0, jsx_runtime_1.jsx)("span", { className: "mb0 b", children: title })] }), (0, jsx_runtime_1.jsxs)(ConnectedModal_1.default, { show: isModalOpen, onHide: () => setIsModalOpen(false), children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Header, { closeButton: true, children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Title, { className: "f4", children: title }) }), (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Modal.Body, { children: [(0, jsx_runtime_1.jsx)("h3", { children: "When is the roster synced?" }), (0, jsx_runtime_1.jsxs)("p", { children: ["The roster is synced nightly throughout the duration of the course. People are added and removed automatically as the", ' ', hasLtiRosterSync ? `roster changes in ${lmsName}` : 'external roster changes', "."] })] }), (0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Footer, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { color: "primary", className: "ma0 btn-primary", onClick: () => setIsModalOpen(false), children: "Close" }) })] })] }));
 };
 exports.RosterSyncInfo = RosterSyncInfo;

package/lib/components/HOC/SearchPersistorComponent.js

@@ -162,9 +162,9 @@ const configureMapDispatchToProps = (key) => (dispatch) => {
     };
     const persistSearchDebounce = (search) => {
         if (searchDebounce) {
-            clearTimeout(searchDebounce);
+            window.clearTimeout(searchDebounce);
         }
-        searchDebounce = setTimeout(() => dispatchPersistSearch(search), 1000);
+        searchDebounce = window.setTimeout(() => dispatchPersistSearch(search), 1000);
     };
     return {
         persistSearch: persistSearchDebounce

package/lib/components/Notifications.d.ts

@@ -16,7 +16,7 @@ interface NotificationsState {
     isOpen: boolean;
 }
 export declare class Notifications extends Component<NotificationsProps, NotificationsState> {
-    afterCloseTimeout: NodeJS.Timeout | undefined;
+    afterCloseTimeout: number | undefined;
     constructor(props: NotificationsProps);
     componentDidMount(): void;
     componentDidUpdate(): void;

package/lib/components/Notifications.js

@@ -17,7 +17,7 @@ class Notifications extends react_1.Component {
         this.afterCloseTimeout = undefined;
         this.clearAfterCloseTimeout = () => {
             if (this.afterCloseTimeout) {
-                clearTimeout(this.afterCloseTimeout);
+                window.clearTimeout(this.afterCloseTimeout);
                 this.afterCloseTimeout = undefined;
             }
         };
@@ -60,7 +60,7 @@ class Notifications extends react_1.Component {
                 isOpen: false
             }, () => {
                 // wait until after Snackbar hide animation to clear the UI
-                this.afterCloseTimeout = setTimeout(() => {
+                this.afterCloseTimeout = window.setTimeout(() => {
                     this.removeNotification();
                     this.clearAfterCloseTimeout();
                     // removing the last notification, clear state

package/lib/components/Quill/ImageDropModule.js

@@ -54,7 +54,7 @@ class ImageDropModule {
             if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {
                 this.readFiles(evt.clipboardData.items, base64DataUrl => {
                     // wait until after the default paste action finishes
-                    setTimeout(() => this.insert(base64DataUrl, alt), 50);
+                    window.setTimeout(() => this.insert(base64DataUrl, alt), 50);
                 });
             }
         };

package/lib/hooks/usePrevious.d.ts

@@ -1,5 +1,18 @@
 /**
- * `usePrevious` persists a previous `value` when the `value` changes.
+ * Persists a previous `value` when the `value` changes. This change will not cause a re-render, causing it to 'lag' one
+ * render behind the current value.
+ *
  * @param value A value, e.g. a prop or a value from `useState`.
+ * @deprecated Reading ref values in render is not recommended. If you want to use the previous value to make a one-time
+ * calculation based on a change, you probably want to use `usePreviousState` instead. If you want to persist the
+ * previous value across renders, you probably want to just use `useState` instead.
  */
 export declare function usePrevious<T>(value: T): T;
+/**
+ * Returns the value from the previous render. This will update to the new value on the next render (and immediately
+ * re-render your component), making it helpful to make one-time changes based on the difference between an object and
+ * its previous value.
+ *
+ * @param currentValue The variable you want to track the value of in the previous render.
+ */
+export declare function usePreviousState<T>(currentValue: T): T;

package/lib/hooks/usePrevious.js

@@ -1,10 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePrevious = usePrevious;
+exports.usePreviousState = usePreviousState;
 const react_1 = require("react");
 /**
- * `usePrevious` persists a previous `value` when the `value` changes.
+ * Persists a previous `value` when the `value` changes. This change will not cause a re-render, causing it to 'lag' one
+ * render behind the current value.
+ *
  * @param value A value, e.g. a prop or a value from `useState`.
+ * @deprecated Reading ref values in render is not recommended. If you want to use the previous value to make a one-time
+ * calculation based on a change, you probably want to use `usePreviousState` instead. If you want to persist the
+ * previous value across renders, you probably want to just use `useState` instead.
  */
 function usePrevious(value) {
     const ref = (0, react_1.useRef)(value); // uses value as the initial value
@@ -16,3 +22,19 @@ function usePrevious(value) {
     // eslint-disable-next-line react-hooks/refs
     return ref.current;
 }
+/**
+ * Returns the value from the previous render. This will update to the new value on the next render (and immediately
+ * re-render your component), making it helpful to make one-time changes based on the difference between an object and
+ * its previous value.
+ *
+ * @param currentValue The variable you want to track the value of in the previous render.
+ */
+function usePreviousState(currentValue) {
+    // uses currentValue as the initial value
+    const [value, setValue] = (0, react_1.useState)(currentValue);
+    if (!Object.is(currentValue, value)) {
+        setValue(currentValue);
+    }
+    // Returns the previous value (happens before the state changes from calling setValue above)
+    return value;
+}

package/lib/utils/url.d.ts

@@ -1,5 +1,5 @@
-import type http from 'node:http';
 import { LocationDescriptor } from 'history';
+import { Dictionary } from 'lodash';
 import { TIER } from '../constants/tier';
 import { AppConfiguration } from '../types';
 export declare function getApiBaseUrl(tier: TIER, apiUrlString: string): string;
@@ -21,7 +21,7 @@ export interface ParsedHeadersResponse {
  * @param headers An array of request headers.
  * @returns The parsed result
  */
-export declare const parseHeadersResponse: (headers?: http.IncomingHttpHeaders) => ParsedHeadersResponse;
+export declare const parseHeadersResponse: (headers?: Dictionary<string | string[] | undefined>) => ParsedHeadersResponse;
 /**
  * Parse a path string into a location with separate pathname, search, and hash components.
  * @param path A path string

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "7.0.12-next.1.5",
+	"version": "7.0.12-next.1.6",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",