dce-reactkit 3.9.4-beta-prompt.1 → 3.9.4-beta-prompt.2

package/dist/esm/types/components/AppWrapper.d.ts

@@ -58,9 +58,9 @@ export declare const confirm: (title: string, text: string, opts?: {
  * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
  * @returns Promise that resolves with the input string or null if canceled
  */
-export declare const prompt: (title: string, text: string, currentInputFieldText: string, opts?: {
-    placeholder?: string | undefined;
+export declare const prompt: (title: string, text: string, opts?: {
     defaultText?: string | undefined;
+    placeholder?: string | undefined;
     confirmButtonText?: string | undefined;
     confirmButtonVariant?: Variant | undefined;
     cancelButtonText?: string | undefined;

package/dist/index.d.ts

@@ -77,9 +77,9 @@ declare const confirm: (title: string, text: string, opts?: {
  * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
  * @returns Promise that resolves with the input string or null if canceled
  */
-declare const prompt: (title: string, text: string, currentInputFieldText: string, opts?: {
-    placeholder?: string | undefined;
+declare const prompt: (title: string, text: string, opts?: {
     defaultText?: string | undefined;
+    placeholder?: string | undefined;
     confirmButtonText?: string | undefined;
     confirmButtonVariant?: Variant | undefined;
     cancelButtonText?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.9.4-beta-prompt.1",
+  "version": "3.9.4-beta-prompt.2",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AppWrapper.tsx

@@ -285,10 +285,9 @@ let onPromptClosed: (result: string | null) => void;
 export const prompt = async (
   title: string,
   text: string,
-  currentInputFieldText: string,
   opts?: {
-    placeholder?: string,
     defaultText?: string,
+    placeholder?: string,
     confirmButtonText?: string,
     confirmButtonVariant?: Variant,
     cancelButtonText?: string,
@@ -352,7 +351,7 @@ export const prompt = async (
     setPromptInfo({
       title,
       text,
-      currentInputFieldText,
+      currentInputFieldText: (opts?.defaultText ?? ''),
       opts: (opts ?? {}),
     });
   });
@@ -719,10 +718,11 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         onTopOfOtherModals
         dontAllowBackdropExit
       >
-        <div className="d-flex flex-column align-items-center">
+        <div className="p-3">
           <p>{promptInfo.text}</p>
           <input
             type="text"
+            className="form-control mb-2"
             placeholder={promptInfo.opts.placeholder}
             value={promptInfo.currentInputFieldText}
             onChange={(e) => {
@@ -733,14 +733,14 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
             }}
           />
           {minNumCharsValidationError && (
-            <div className="text-danger bg-danger bg-opacity-25 p-2 m-1 rounded">
-              {minNumCharsValidationError}
-            </div>
+          <div className="text-danger fw-bold mt-2">
+            {minNumCharsValidationError}
+          </div>
           )}
           {customValidationError && (
-            <div className="text-danger bg-danger bg-opacity-25 p-2 m-1 rounded">
-              {customValidationError}
-            </div>
+          <div className="text-danger fw-bold mt-2">
+            {customValidationError}
+          </div>
           )}
         </div>
       </ModalForWrapper>