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

package/lib/css/utils/_icon.css

@@ -1,16 +1,16 @@
-/* Icon Sizes */
-
-.icon-size-1 {
-	height: 1.25rem;
-	width: 1.25rem;
-}
-
-.icon-size-2 {
-	height: 2rem;
-	width: 2rem;
-}
-
-.icon-size-3 {
-	height: 3rem;
-	width: 3rem;
-}
+/* Icon Sizes */
+
+.icon-size-1 {
+	height: 1.25rem;
+	width: 1.25rem;
+}
+
+.icon-size-2 {
+	height: 2rem;
+	width: 2rem;
+}
+
+.icon-size-3 {
+	height: 3rem;
+	width: 3rem;
+}

package/lib/css/utils/_text.css

@@ -1,25 +1,25 @@
-/* Font Size */
-
-/* 60% between f5 and f4 */
-.f4pt6 {
-	font-size: 1.15rem;
-}
-
-/* Text Align */
-
-.tr-gte-lg {
-	@media (--lg) {
-		text-align: right !important;
-	}
-}
-
-/* White Space */
-
-.pre-wrap {
-	white-space: pre-wrap;
-}
-
-.word-break {
-	word-break: normal;
-	overflow-wrap: anywhere;
-}
+/* Font Size */
+
+/* 60% between f5 and f4 */
+.f4pt6 {
+	font-size: 1.15rem;
+}
+
+/* Text Align */
+
+.tr-gte-lg {
+	@media (--lg) {
+		text-align: right !important;
+	}
+}
+
+/* White Space */
+
+.pre-wrap {
+	white-space: pre-wrap;
+}
+
+.word-break {
+	word-break: normal;
+	overflow-wrap: anywhere;
+}

package/lib/css/utils/_width.css

@@ -1,60 +1,60 @@
-/* Width */
-
-.w-15 {
-	width: 15%;
-}
-
-.w-35 {
-	width: 35%;
-}
-
-.w-45 {
-	width: 45%;
-}
-
-.w-55 {
-	width: 55%;
-}
-
-.w-65 {
-	width: 65%;
-}
-
-.w-75 {
-	width: 75%;
-}
-
-.w-85 {
-	width: 85%;
-}
-
-.w-95 {
-	width: 95%;
-}
-
-.w-auto-ns {
-	@media screen and (min-width: 30em) {
-		width: auto !important;
-	}
-}
-
-.w-100-lt-xs {
-	@media (--lt-xs) {
-		width: 100%;
-		float: none;
-		clear: both;
-		margin-left: 0;
-		margin-right: 0;
-		display: block;
-
-		& .MuiFormControl-root {
-			width: 100%;
-		}
-	}
-}
-
-/* Max Width */
-
-.max-width-9 {
-	max-width: 9rem;
-}
+/* Width */
+
+.w-15 {
+	width: 15%;
+}
+
+.w-35 {
+	width: 35%;
+}
+
+.w-45 {
+	width: 45%;
+}
+
+.w-55 {
+	width: 55%;
+}
+
+.w-65 {
+	width: 65%;
+}
+
+.w-75 {
+	width: 75%;
+}
+
+.w-85 {
+	width: 85%;
+}
+
+.w-95 {
+	width: 95%;
+}
+
+.w-auto-ns {
+	@media screen and (min-width: 30em) {
+		width: auto !important;
+	}
+}
+
+.w-100-lt-xs {
+	@media (--lt-xs) {
+		width: 100%;
+		float: none;
+		clear: both;
+		margin-left: 0;
+		margin-right: 0;
+		display: block;
+
+		& .MuiFormControl-root {
+			width: 100%;
+		}
+	}
+}
+
+/* Max Width */
+
+.max-width-9 {
+	max-width: 9rem;
+}

package/lib/css/variables.css

@@ -1,84 +1,84 @@
-:root {
-	/* Fonts */
-	--text-font-stack-no-webfonts: 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-	--text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-	--code-font-stack: 'Hack', 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;
-
-	/* Font Size */
-	--base-font-size: 16px;
-	--base-line-height: 1.57rem;
-
-	/* Font Weights */
-	--font-weight-light: 300;
-	--font-weight-normal: 400;
-	--font-weight-semibold: 600;
-	--font-weight-bold: 700;
-	--font-weight-black: 800;
-
-	/**
-	 * Constant Colors
-	 * These are the same across all apps
-	 */
-	--color-black: #000;
-	--color-white: #fff;
-	--color-off-white: #f9f9fb;
-	--color-light-grey: #dfe2e5;
-	--color-blue: #00749c;
-	--color-light-red: #f5ccd1;
-	--color-dark-gold: #7d882d;
-	--color-light-green: #e4f1d4;
-	--color-orange: #ee701b;
-	--color-light-orange: #f8f5e6;
-	--color-dark-yellow: #b2a44a;
-	--color-dark-grey: #30363d;
-
-	/* from Bootstrap's warning alert border and bg */
-	--color-light-yellow: #ffeeba;
-	--color-lightest-yellow: #fff3cd;
-
-	/**
-	 * Common Colors
-	 * These usually vary across each app
-	 */
-	--color-accent-blue: #086ee4;
-	--color-grey: #555;
-	--color-medium-dark-grey: #888;
-	--color-medium-grey: #ccc;
-	--color-lightest-grey: #e8e8f0;
-	--color-blue-grey: #3b444b;
-	--color-light-blue: #e8f4fd;
-	--color-purple: #4450be;
-	--color-pink: #c31776;
-	--color-red: #c93d44;
-	--color-green: #7bcf64;
-
-	/**
-	 * Themed Colors
-	 * These will be customized per app
-	 */
-	--color-disabled: #747474;
-	--color-primary: var(--color-blue);
-	--color-error: var(--color-red);
-	--color-success: var(--color-green);
-
-	/* Border Radius */
-	--border-radius: 3px;
-}
-
-/* Media Queries */
-
-/* Older phone widths, e.g. iPhone 8 and earlier, old iPhone SE */
-@custom-media --lt-phone-new only screen and (width < 375px);
-
-/* Newer phone widths, e.g. iPhone X and newer, new iPhone SE */
-@custom-media --phone-new only screen and (width >= 375px);
-@custom-media --lt-xs only screen and (width < 480px);
-@custom-media --xs only screen and (width >= 480px);
-@custom-media --lt-sm only screen and (width < 576px);
-@custom-media --sm only screen and (width >= 576px);
-@custom-media --lt-md only screen and (width < 768px);
-@custom-media --md only screen and (width >= 768px);
-@custom-media --lt-lg only screen and (width < 992px);
-@custom-media --lg only screen and (width >= 992px);
-@custom-media --lt-xl only screen and (width < 1200px);
-@custom-media --xl only screen and (width >= 1200px);
+:root {
+	/* Fonts */
+	--text-font-stack-no-webfonts: 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+	--text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+	--code-font-stack: 'Hack', 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;
+
+	/* Font Size */
+	--base-font-size: 16px;
+	--base-line-height: 1.57rem;
+
+	/* Font Weights */
+	--font-weight-light: 300;
+	--font-weight-normal: 400;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+	--font-weight-black: 800;
+
+	/**
+	 * Constant Colors
+	 * These are the same across all apps
+	 */
+	--color-black: #000;
+	--color-white: #fff;
+	--color-off-white: #f9f9fb;
+	--color-light-grey: #dfe2e5;
+	--color-blue: #00749c;
+	--color-light-red: #f5ccd1;
+	--color-dark-gold: #7d882d;
+	--color-light-green: #e4f1d4;
+	--color-orange: #ee701b;
+	--color-light-orange: #f8f5e6;
+	--color-dark-yellow: #b2a44a;
+	--color-dark-grey: #30363d;
+
+	/* from Bootstrap's warning alert border and bg */
+	--color-light-yellow: #ffeeba;
+	--color-lightest-yellow: #fff3cd;
+
+	/**
+	 * Common Colors
+	 * These usually vary across each app
+	 */
+	--color-accent-blue: #086ee4;
+	--color-grey: #555;
+	--color-medium-dark-grey: #888;
+	--color-medium-grey: #ccc;
+	--color-lightest-grey: #e8e8f0;
+	--color-blue-grey: #3b444b;
+	--color-light-blue: #e8f4fd;
+	--color-purple: #4450be;
+	--color-pink: #c31776;
+	--color-red: #c93d44;
+	--color-green: #7bcf64;
+
+	/**
+	 * Themed Colors
+	 * These will be customized per app
+	 */
+	--color-disabled: #747474;
+	--color-primary: var(--color-blue);
+	--color-error: var(--color-red);
+	--color-success: var(--color-green);
+
+	/* Border Radius */
+	--border-radius: 3px;
+}
+
+/* Media Queries */
+
+/* Older phone widths, e.g. iPhone 8 and earlier, old iPhone SE */
+@custom-media --lt-phone-new only screen and (width < 375px);
+
+/* Newer phone widths, e.g. iPhone X and newer, new iPhone SE */
+@custom-media --phone-new only screen and (width >= 375px);
+@custom-media --lt-xs only screen and (width < 480px);
+@custom-media --xs only screen and (width >= 480px);
+@custom-media --lt-sm only screen and (width < 576px);
+@custom-media --sm only screen and (width >= 576px);
+@custom-media --lt-md only screen and (width < 768px);
+@custom-media --md only screen and (width >= 768px);
+@custom-media --lt-lg only screen and (width < 992px);
+@custom-media --lg only screen and (width >= 992px);
+@custom-media --lt-xl only screen and (width < 1200px);
+@custom-media --xl only screen and (width >= 1200px);

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/fetch.js

@@ -53,13 +53,15 @@ function prepareFetch(modelFetchRequestAction, endpointMappings) {
             fetchConfig.contentType = 'application/x-www-form-urlencoded';
         }
         else if (fetchConfig.body || modelFetchRequestAction.body) {
-            fetchConfig.body =
-                !!fetchConfig.body &&
-                    (0, lodash_1.isArray)(fetchConfig.body) &&
-                    !!modelFetchRequestAction.body &&
-                    (0, lodash_1.isArray)(modelFetchRequestAction.body)
-                    ? (0, lodash_1.union)([], fetchConfig.body, modelFetchRequestAction.body)
-                    : (0, lodash_1.merge)({}, fetchConfig.body, modelFetchRequestAction.body);
+            // if the action body is an array, ensure the request body is an array
+            if (!!modelFetchRequestAction.body && (0, lodash_1.isArray)(modelFetchRequestAction.body)) {
+                fetchConfig.body = (0, lodash_1.union)([], 
+                // use the default body from the config if it is also an array
+                !!fetchConfig.body && (0, lodash_1.isArray)(fetchConfig.body) ? fetchConfig.body : [], modelFetchRequestAction.body);
+            }
+            else {
+                fetchConfig.body = (0, lodash_1.merge)({}, fetchConfig.body, modelFetchRequestAction.body);
+            }
         }
         // set "contentType" if defined, overriding the default 'application/x-www-form-urlencoded'
         // that may have been set previously

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