fix: remove unused forwardRef from Icon and Toast

okta · May 24, 2023 · bdfd1b1 · bdfd1b1
1 parent 68b957b
commit bdfd1b1
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 74 deletions.
diff --git a/packages/odyssey-react-mui/src/Icon.tsx b/packages/odyssey-react-mui/src/Icon.tsx
@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { forwardRef } from "react";
 import { iconDictionary } from "./iconDictionary";
 
 export type IconProps = {
@@ -38,20 +37,18 @@ export type IconProps = {
  * This component includes all icon data as static imports. Favor individual
  * icon component imports where possible to keep your bundle size smaller.
  */
-export const Icon = forwardRef<SVGSVGElement, IconProps>(
-  ({ ariaLabelledby, label, name, size }) => {
-    if (!(name in iconDictionary)) return null;
+export const Icon = ({ ariaLabelledby, label, name, size }: IconProps) => {
+  if (!(name in iconDictionary)) return null;
 
-    const NamedIcon = iconDictionary[name];
+  const NamedIcon = iconDictionary[name];
 
-    return (
-      <NamedIcon
-        aria-labelledby={ariaLabelledby}
-        fontSize={size}
-        titleAccess={label}
-      />
-    );
-  }
-);
+  return (
+    <NamedIcon
+      aria-labelledby={ariaLabelledby}
+      fontSize={size}
+      titleAccess={label}
+    />
+  );
+};
 
 Icon.displayName = "Icon";
diff --git a/packages/odyssey-react-mui/src/Toast.tsx b/packages/odyssey-react-mui/src/Toast.tsx
@@ -11,7 +11,7 @@
  */
 
 import { AlertColor } from "@mui/material";
-import { useEffect, memo, forwardRef, useState, useCallback } from "react";
+import { useEffect, memo, useState, useCallback } from "react";
 import {
   Alert,
   AlertTitle,
@@ -70,71 +70,69 @@ export type ToastProps = {
 
 const ClickAwayListenerProps = { onClickAway: () => false };
 
-const Toast = forwardRef(
-  ({
-    autoHideDuration = 6000,
-    isDismissable,
-    linkText,
-    linkUrl,
-    isVisible: isVisibleProp,
-    onHide: onHideProp,
-    role,
-    severity,
-    text,
-  }: ToastProps) => {
-    const { t } = useTranslation();
+const Toast = ({
+  autoHideDuration = 6000,
+  isDismissable,
+  linkText,
+  linkUrl,
+  isVisible: isVisibleProp,
+  onHide: onHideProp,
+  role,
+  severity,
+  text,
+}: ToastProps) => {
+  const { t } = useTranslation();
 
-    const [isVisible, setIsVisible] = useState(isVisibleProp);
+  const [isVisible, setIsVisible] = useState(isVisibleProp);
 
-    useEffect(() => {
-      setIsVisible(isVisibleProp);
-    }, [isVisibleProp]);
+  useEffect(() => {
+    setIsVisible(isVisibleProp);
+  }, [isVisibleProp]);
 
-    const onHide = useCallback(() => {
-      setIsVisible(false);
-      onHideProp?.();
-    }, [onHideProp]);
+  const onHide = useCallback(() => {
+    setIsVisible(false);
+    onHideProp?.();
+  }, [onHideProp]);
 
-    return (
-      <Snackbar
-        open={isVisible}
-        autoHideDuration={
-          isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration
+  return (
+    <Snackbar
+      open={isVisible}
+      autoHideDuration={
+        isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration
+      }
+      onClose={onHide}
+      className="Toast"
+      ClickAwayListenerProps={ClickAwayListenerProps}
+    >
+      <Alert
+        action={
+          isDismissable === true && (
+            <Button
+              aria-label={t("toast.close.text")}
+              onClick={onHide}
+              size="small"
+              startIcon={<CloseIcon />}
+              variant="floating"
+            />
+          )
         }
-        onClose={onHide}
-        className="Toast"
-        ClickAwayListenerProps={ClickAwayListenerProps}
+        role={role}
+        severity={severity}
+        variant="toast"
       >
-        <Alert
-          action={
-            isDismissable === true && (
-              <Button
-                aria-label={t("toast.close.text")}
-                onClick={onHide}
-                size="small"
-                startIcon={<CloseIcon />}
-                variant="floating"
-              />
-            )
-          }
-          role={role}
-          severity={severity}
-          variant="toast"
-        >
-          <AlertTitle>
-            <span style={visuallyHidden}>{severity}:</span>
-            {text}
-          </AlertTitle>
-          {linkUrl && (
-            <Link href={linkUrl} variant="monochrome">
-              {linkText}
-            </Link>
-          )}
-        </Alert>
-      </Snackbar>
-    );
-  }
-);
+        <AlertTitle>
+          <span style={visuallyHidden}>{severity}:</span>
+          {text}
+        </AlertTitle>
+        {linkUrl && (
+          <Link href={linkUrl} variant="monochrome">
+            {linkText}
+          </Link>
+        )}
+      </Alert>
+    </Snackbar>
+  );
+};
 
 const MemoizedToast = memo(Toast);
 MemoizedToast.displayName = "Toast";