@unitedstatespowersquadrons/components 1.0.6 → 1.0.8

package/ActionButton.tsx

@@ -133,7 +133,7 @@ const ActionButton = (props: ActionButtonProps) => {
 
       if (!externalForm) throw new Error(`Could not find form #${formId} in the DOM.`);
 
-      externalForm.submit();
+      externalForm.requestSubmit();
     };
 
     return(

package/Toasts/Toast.tsx

@@ -1,25 +1,14 @@
 import React from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
-import { DismissFunc, ToastProps, ToastRemoveAppAction, Toast_Status } from "./types";
-import createDismissToast from "./createDismissToast";
+import { DismissFunc, ToastProps, Toast_Status } from "./types";
 import FontAwesomeIcon from "../FontAwesomeIcon";
-import { DispatchFunc } from "../types";
 
-interface BaseProps {
+interface Props {
+  dismiss: DismissFunc;
   toast: ToastProps;
 }
 
-interface DismissProps extends BaseProps {
-  dismiss?: DismissFunc;
-}
-
-interface DispatchProps extends BaseProps {
-  dispatch?: DispatchFunc<ToastRemoveAppAction>;
-}
-
-type Props = DismissProps | DispatchProps;
-
 const useStyles = createUseStyles({
   dismissed: { opacity: "0" },
   error: {
@@ -79,25 +68,10 @@ const useStyles = createUseStyles({
 const Toast = (props: Props) => {
   const classes = useStyles();
 
-  const { toast } = props;
+  const { dismiss, toast } = props;
   const { body, dismissed, id, status, timeout, title } = toast;
 
-  const dismissFunc = (): DismissFunc => {
-    let dismiss;
-
-    if ("dismiss" in props) {
-      dismiss = props.dismiss;
-    } else if ("dispatch" in props) {
-      const { dispatch } = props;
-      dismiss = createDismissToast(dispatch);
-    } else {
-      throw new Error("Invalid Toast dismiss configuration");
-    }
-
-    return dismiss;
-  };
-
-  const handleDismiss = () => dismissFunc()(id);
+  const handleDismiss = () => dismiss(id);
 
   if (timeout > 0) setTimeout(handleDismiss, 2000 + timeout);
 

package/Toasts/Toasts.tsx

@@ -2,13 +2,24 @@ import React from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
 import Toast from "./Toast";
-import { ToastProps } from "./types";
+import createDismissToast from "./createDismissToast";
+import { DismissFunc, ToastProps, ToastRemoveAppAction } from "./types";
+import { DispatchFunc } from "../types";
 
-interface Props {
-  dismiss: (id: number) => void;
+interface BaseProps {
   toasts?: ToastProps[];
 }
 
+interface DismissProps extends BaseProps {
+  dismiss?: DismissFunc;
+}
+
+interface DispatchProps extends BaseProps {
+  dispatch?: DispatchFunc<ToastRemoveAppAction>;
+}
+
+type Props = DismissProps | DispatchProps;
+
 const useStyles = createUseStyles({
   toastsContainer: {
     display: "flex",
@@ -23,12 +34,23 @@ const useStyles = createUseStyles({
 });
 
 const Toasts = (props: Props) => {
-  const { dismiss, toasts } = props;
+  const { toasts } = props;
   const classes = useStyles();
 
+  const dismissFunc = (): DismissFunc => {
+    if ("dismiss" in props) {
+      return props.dismiss;
+    } else if ("dispatch" in props) {
+      const { dispatch } = props;
+      return createDismissToast(dispatch);
+    } else {
+      throw new Error("Invalid Toast dismiss configuration");
+    }
+  };
+
   return (
     <div className={classNames("toastsContainer", classes.toastsContainer)}>
-      {toasts?.map(toast => <Toast dismiss={dismiss} toast={toast} key={toast.id} />)}
+      {toasts?.map(toast => <Toast dismiss={dismissFunc()} toast={toast} key={toast.id} />)}
     </div>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {