feat: updated Radio and fixed types on TextField and Banner

okta · Jan 30, 2023 · 9cfa050 · 9cfa050
1 parent 25eb5d1
commit 9cfa050
Show file tree

Hide file tree

Showing 10 changed files with 233 additions and 246 deletions.
diff --git a/packages/odyssey-react-mui/src/Banner.tsx b/packages/odyssey-react-mui/src/Banner.tsx
@@ -11,6 +11,7 @@
  */
 
 import { AlertColor, AlertProps } from "@mui/material";
+import { memo } from "react";
 import { Alert, Link } from "./";
 
 export interface BannerProps {
@@ -23,7 +24,7 @@ export interface BannerProps {
    * ("status" for something that dynamically updates, null for something
    * unchanging)
    */
-  role?: "status" | undefined;
+  role?: "status";
   /**
    * The text content of the alert
    */
@@ -45,7 +46,7 @@ export interface BannerProps {
   linkText?: string;
 }
 
-export const Banner = ({
+const Banner = ({
   onClose,
   severity = "info",
   role,
@@ -62,3 +63,7 @@ export const Banner = ({
     )}
   </Alert>
 );
+
+const MemoizedBanner = memo(Banner);
+
+export { MemoizedBanner as Banner };
diff --git a/packages/odyssey-react-mui/src/Radio.tsx b/packages/odyssey-react-mui/src/Radio.tsx
@@ -12,12 +12,17 @@
 
 import { FormControlLabel } from "./";
 import { Radio as MuiRadio } from "@mui/material";
+import { memo } from "react";
 
-export interface RadioProps {
+export type RadioProps = {
   label: string;
   value: string;
-}
+};
 
-export const Radio = ({ label, value }: RadioProps) => (
+const Radio = ({ label, value }: RadioProps) => (
   <FormControlLabel control={<MuiRadio />} label={label} value={value} />
 );
+
+const MemoizedRadio = memo(Radio);
+
+export { MemoizedRadio as Radio };
diff --git a/packages/odyssey-react-mui/src/RadioGroup.tsx b/packages/odyssey-react-mui/src/RadioGroup.tsx
@@ -19,7 +19,7 @@ import {
   useUniqueId,
 } from "./";
 import { RadioGroup as MuiRadioGroup } from "@mui/material";
-import { ReactElement, useMemo } from "react";
+import { memo, ReactElement, useMemo } from "react";
 
 export interface RadioGroupProps {
   /**
@@ -33,7 +33,7 @@ export interface RadioGroupProps {
   /**
    * The error text for an invalid group
    */
-  error?: string;
+  errorMessage?: string;
   /**
    * Optional hint text
    */
@@ -42,10 +42,6 @@ export interface RadioGroupProps {
    * Disables the whole radio group
    */
   isDisabled?: boolean;
-  /**
-   * Declares the group invalid
-   */
-  isInvalid?: boolean;
   /**
    * The text label for the radio group
    */
@@ -57,46 +53,53 @@ export interface RadioGroupProps {
   name?: string;
 }
 
-export const RadioGroup = ({
+const RadioGroup = ({
   children,
   defaultValue,
-  error,
+  errorMessage,
   hint,
   isDisabled,
-  isInvalid,
   label,
   name,
 }: RadioGroupProps) => {
   const ariaDescribedBy = useMemo(
     () =>
-      error || hint
-        ? [hint && `${name}-hint`, error && `${name}-error`]
+      errorMessage || hint
+        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]
             .filter(Boolean)
             .join(" ")
         : undefined,
-    [error, hint, name]
+    [errorMessage, hint, name]
   );
 
   const uniqueName = useUniqueId(name);
 
   return (
-    <FormControl component="fieldset" disabled={isDisabled} error={isInvalid}>
+    <FormControl
+      component="fieldset"
+      disabled={isDisabled}
+      error={Boolean(errorMessage)}
+    >
       <FormLabel component="legend">{label}</FormLabel>
       {hint && (
         <FormHelperText id={`${uniqueName}-hint`}>{hint}</FormHelperText>
       )}
       <MuiRadioGroup
         aria-describedby={ariaDescribedBy}
         defaultValue={defaultValue}
-        name={`${uniqueName}-group`}
+        name={uniqueName}
       >
         {children}
       </MuiRadioGroup>
-      {error && (
+      {errorMessage && (
         <FormHelperText id={`${uniqueName}-error`} error>
-          <span style={visuallyHidden}>Error:</span> {error}
+          <span style={visuallyHidden}>Error:</span> {errorMessage}
         </FormHelperText>
       )}
     </FormControl>
   );
 };
+
+const MemoizedRadioGroup = memo(RadioGroup);
+
+export { MemoizedRadioGroup as RadioGroup };
diff --git a/packages/odyssey-react-mui/src/TextField.tsx b/packages/odyssey-react-mui/src/TextField.tsx
@@ -14,6 +14,8 @@ import {
   ChangeEventHandler,
   FocusEventHandler,
   forwardRef,
+  InputHTMLAttributes,
+  memo,
   ReactNode,
   useCallback,
   useEffect,
@@ -35,13 +37,13 @@ import {
   useUniqueId,
 } from "./";
 
-export interface TextFieldProps {
+export type TextFieldProps = {
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
-  autoCompleteType?: string;
+  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
   /**
    * If `true`, the component is disabled.
    */
@@ -106,111 +108,113 @@ export interface TextFieldProps {
    * The value of the `input` element, required for a controlled component.
    */
   value?: unknown;
-}
+};
 
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  (props, ref) => {
-    const {
-      autoCompleteType,
-      isDisabled = false,
-      endAdornment,
-      errorMessage,
-      hint,
-      id: idOverride,
-      label,
-      isMultiline = false,
-      onChange,
-      onFocus,
-      optionalLabel,
-      placeholder,
-      isReadOnly,
-      isRequired = true,
-      startAdornment,
-      type = "text",
-      value,
-    } = props;
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
+  const {
+    autoCompleteType,
+    isDisabled = false,
+    endAdornment,
+    errorMessage,
+    hint,
+    id: idOverride,
+    label,
+    isMultiline = false,
+    onChange,
+    onFocus,
+    optionalLabel,
+    placeholder,
+    isReadOnly,
+    isRequired = true,
+    startAdornment,
+    type = "text",
+    value,
+  } = props;
 
-    const [inputType, setInputType] = useState(type);
+  const [inputType, setInputType] = useState(type);
 
-    useEffect(() => {
-      setInputType(type);
-    }, [type]);
+  useEffect(() => {
+    setInputType(type);
+  }, [type]);
 
-    const togglePasswordVisibility = useCallback(() => {
-      setInputType((currentType) =>
-        currentType === "password" ? "text" : "password"
-      );
-    }, []);
-
-    const id = useUniqueId(idOverride);
-    const hintId = hint ? `${id}-hint` : undefined;
-    const errorId = errorMessage ? `${id}-error` : undefined;
-    const labelId = label ? `${id}-label` : undefined;
-
-    const inputProps = useMemo(
-      () =>
-        errorId || hintId
-          ? {
-              "aria-describedby":
-                errorId && hintId ? `${hintId} ${errorId}` : errorId || hintId,
-            }
-          : undefined,
-      [errorId, hintId]
+  const togglePasswordVisibility = useCallback(() => {
+    setInputType((currentType) =>
+      currentType === "password" ? "text" : "password"
     );
+  }, []);
 
-    return (
-      <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
-        <InputLabel htmlFor={id} id={labelId}>
-          {label}
-          {!isRequired && (
-            <Typography variant="subtitle1">{optionalLabel}</Typography>
-          )}
-        </InputLabel>
-        {hint && <FormHelperText id={hintId}>{hint}</FormHelperText>}
-        <InputBase
-          autoComplete={autoCompleteType}
-          endAdornment={
-            inputType === "password" ? (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="toggle password visibility"
-                  edge="end"
-                  onClick={togglePasswordVisibility}
-                >
-                  {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
-                </IconButton>
-              </InputAdornment>
-            ) : (
-              endAdornment
-            )
-          }
-          id={id}
-          inputProps={inputProps}
-          multiline={isMultiline}
-          onChange={onChange}
-          onFocus={onFocus}
-          placeholder={placeholder}
-          readOnly={isReadOnly}
-          ref={ref}
-          startAdornment={
-            inputType === "search" ? (
-              <InputAdornment position="start">
-                <SearchIcon />
-              </InputAdornment>
-            ) : (
-              startAdornment
-            )
+  const id = useUniqueId(idOverride);
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = errorMessage ? `${id}-error` : undefined;
+  const labelId = label ? `${id}-label` : undefined;
+
+  const inputProps = useMemo(
+    () =>
+      errorId || hintId
+        ? {
+            "aria-describedby":
+              errorId && hintId ? `${hintId} ${errorId}` : errorId || hintId,
           }
-          type={inputType}
-          value={value}
-        />
-        {errorMessage && (
-          <FormHelperText error id={errorId}>
-            <span style={visuallyHidden}>Error:</span>
-            {errorMessage}
-          </FormHelperText>
+        : undefined,
+    [errorId, hintId]
+  );
+
+  return (
+    <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
+      <InputLabel htmlFor={id} id={labelId}>
+        {label}
+        {!isRequired && (
+          <Typography variant="subtitle1">{optionalLabel}</Typography>
         )}
-      </FormControl>
-    );
-  }
-);
+      </InputLabel>
+      {hint && <FormHelperText id={hintId}>{hint}</FormHelperText>}
+      <InputBase
+        autoComplete={autoCompleteType}
+        endAdornment={
+          inputType === "password" ? (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                edge="end"
+                onClick={togglePasswordVisibility}
+              >
+                {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
+              </IconButton>
+            </InputAdornment>
+          ) : (
+            endAdornment
+          )
+        }
+        id={id}
+        inputProps={inputProps}
+        multiline={isMultiline}
+        onChange={onChange}
+        onFocus={onFocus}
+        placeholder={placeholder}
+        readOnly={isReadOnly}
+        ref={ref}
+        startAdornment={
+          inputType === "search" ? (
+            <InputAdornment position="start">
+              <SearchIcon />
+            </InputAdornment>
+          ) : (
+            startAdornment
+          )
+        }
+        type={inputType}
+        value={value}
+      />
+      {errorMessage && (
+        <FormHelperText error id={errorId}>
+          <span style={visuallyHidden}>Error:</span>
+          {errorMessage}
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+});
+
+const MemoizedTextField = memo(TextField);
+
+export { MemoizedTextField as TextField };