@okta/odyssey-react-mui 0.22.0 → 0.23.0

package/src/Link.tsx

@@ -12,17 +12,25 @@
 
 import { forwardRef, ReactElement } from "react";
 
-import { Link as MuiLink, SvgIcon } from "@mui/material";
-import type { LinkProps as MuiLinkProps } from "@mui/material";
+import {
+  Link as MuiLink,
+  LinkProps as MuiLinkProps,
+  SvgIcon,
+} from "@mui/material";
 
-export interface LinkProps extends MuiLinkProps {
+export type LinkProps = {
+  children: React.ReactNode;
+  href: string;
   icon?: ReactElement;
-}
+  rel?: string;
+  target?: "_self" | "_blank" | "_parent" | "_top" | string;
+  variant?: MuiLinkProps["variant"];
+};
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { icon, children, target } = props;
+  const { icon, children, target, variant } = props;
   return (
-    <MuiLink {...props} ref={ref}>
+    <MuiLink ref={ref} variant={variant} target={target}>
       {icon && <span className="Link-icon">{icon}</span>}
       {children}
       {target === "_blank" && (

package/src/MenuButton.tsx

@@ -22,7 +22,7 @@ import {
 } from "./";
 import { memo, MouseEvent, ReactElement, useMemo, useState } from "react";
 
-export interface MenuButtonProps {
+export type MenuButtonProps = {
   /**
    * The <MenuItem> components within the Menu.
    */
@@ -41,13 +41,18 @@ export interface MenuButtonProps {
    * The variant of the triggering Button
    */
   buttonVariant?: ButtonProps["variant"];
-}
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+};
 
 const MenuButton = ({
   buttonLabel = "",
   children,
   buttonEndIcon = <ChevronDownIcon />,
   buttonVariant = "secondary",
+  id: idOverride,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -61,7 +66,7 @@ const MenuButton = ({
     setAnchorEl(null);
   };
 
-  const uniqueId = useUniqueId();
+  const uniqueId = useUniqueId(idOverride);
 
   const menuListProps = useMemo(
     () => ({ "aria-labelledby": `${uniqueId}-button` }),

package/src/MuiPropsChild.tsx

@@ -0,0 +1,41 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { forwardRef, memo, ReactNode, useMemo } from "react";
+
+import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
+
+export type MuiPropsChildProps = {
+  children: ReactNode;
+};
+
+const MuiPropsChild = forwardRef<HTMLElement, MuiPropsChildProps>(
+  ({ children, ...muiProps }, ref) => {
+    const providerValue = useMemo<MuiPropsContextType>(
+      () => ({
+        ...muiProps,
+        ref,
+      }),
+      [muiProps, ref]
+    );
+
+    return (
+      <MuiPropsContext.Provider value={providerValue}>
+        {children}
+      </MuiPropsContext.Provider>
+    );
+  }
+);
+
+const MemoizedMuiPropsChild = memo(MuiPropsChild);
+
+export { MemoizedMuiPropsChild as MuiPropsChild };

package/src/MuiPropsContext.ts

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createContext } from "react";
+
+export type MuiPropsContextType = Record<string, unknown>;
+
+export const MuiPropsContext = createContext<MuiPropsContextType>({});

package/src/PasswordField.tsx

@@ -24,10 +24,6 @@ import { EyeIcon, EyeOffIcon, IconButton } from "./";
 import { Field } from "./Field";
 
 export type PasswordFieldProps = {
-  /**
-   * If `true`, the component will receive focus automatically.
-   */
-  autoFocus?: boolean;
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
@@ -38,6 +34,10 @@ export type PasswordFieldProps = {
    * If `error` is not undefined, the `input` will indicate an error.
    */
   errorMessage?: string;
+  /**
+   * If `true`, the component will receive focus automatically.
+   */
+  hasInitialFocus?: boolean;
   /**
    * The helper text content.
    */
@@ -51,13 +51,13 @@ export type PasswordFieldProps = {
    */
   isDisabled?: boolean;
   /**
-   * It prevents the user from changing the value of the field
+   * If `true`, the `input` element is not required.
    */
-  isReadOnly?: boolean;
+  isOptional?: boolean;
   /**
-   * If `true`, the `input` element is required.
+   * It prevents the user from changing the value of the field
    */
-  isRequired?: boolean;
+  isReadOnly?: boolean;
   /**
    * The label for the `input` element.
    */
@@ -88,11 +88,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
   (
     {
       autoCompleteType,
-      autoFocus,
       errorMessage,
+      hasInitialFocus,
       hint,
       id: idOverride,
       isDisabled = false,
+      isOptional = false,
       isReadOnly,
       label,
       onChange,
@@ -117,7 +118,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
-          autoFocus={autoFocus}
+          autoFocus={hasInitialFocus}
           endAdornment={
             <InputAdornment position="end">
               <IconButton
@@ -130,25 +131,28 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
             </InputAdornment>
           }
           id={id}
+          name={id}
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
           placeholder={placeholder}
           readOnly={isReadOnly}
           ref={ref}
+          required={!isOptional}
           type={inputType}
           value={value}
         />
       ),
       [
         autoCompleteType,
-        autoFocus,
+        hasInitialFocus,
         togglePasswordVisibility,
         inputType,
         onChange,
         onFocus,
         onBlur,
         placeholder,
+        isOptional,
         isReadOnly,
         ref,
         value,
@@ -158,10 +162,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
     return (
       <Field
         errorMessage={errorMessage}
+        fieldType="single"
         hasVisibleLabel
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
+        isOptional={isOptional}
         label={label}
         renderFieldComponent={renderFieldComponent}
       />

package/src/RadioGroup.tsx

@@ -11,19 +11,12 @@
  */
 
 import { RadioGroup as MuiRadioGroup } from "@mui/material";
-import { ChangeEventHandler, memo, ReactElement, useMemo } from "react";
+import { ChangeEventHandler, memo, ReactElement, useCallback } from "react";
 
-import {
-  FormControl,
-  FormLabel,
-  FormHelperText,
-  Radio,
-  ScreenReaderText,
-  useUniqueId,
-  RadioProps,
-} from ".";
+import { Radio, RadioProps } from "./Radio";
+import { Field } from "./Field";
 
-export interface RadioGroupProps {
+export type RadioGroupProps = {
   /**
    * The <Radio> components within the group. Must include two or more.
    */
@@ -40,6 +33,10 @@ export interface RadioGroupProps {
    * Optional hint text
    */
   hint?: string;
+  /**
+   * The id of the `input` element. This will also be the input's `name` field.
+   */
+  id?: string;
   /**
    * Disables the whole radio group
    */
@@ -48,10 +45,6 @@ export interface RadioGroupProps {
    * The text label for the radio group
    */
   label: string;
-  /**
-   * The name of the radio group, which only needs to be changed if there are multiple radio groups on the same screen
-   */
-  name?: string;
   /**
    * Listen for changes in the browser that change `value`.
    */
@@ -60,54 +53,46 @@ export interface RadioGroupProps {
    * The `value` on the selected radio button.
    */
   value?: RadioProps["value"];
-}
+};
 
 const RadioGroup = ({
   children,
   defaultValue,
   errorMessage,
   hint,
+  id: idOverride,
   isDisabled,
   label,
-  name,
   onChange,
+  value,
 }: RadioGroupProps) => {
-  const ariaDescribedBy = useMemo(
-    () =>
-      errorMessage || hint
-        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]
-            .filter(Boolean)
-            .join(" ")
-        : undefined,
-    [errorMessage, hint, name]
-  );
-
-  const uniqueName = useUniqueId(name);
-
-  return (
-    <FormControl
-      component="fieldset"
-      disabled={isDisabled}
-      error={Boolean(errorMessage)}
-    >
-      <FormLabel component="legend">{label}</FormLabel>
-      {hint && (
-        <FormHelperText id={`${uniqueName}-hint`}>{hint}</FormHelperText>
-      )}
+  const renderFieldComponent = useCallback(
+    ({ ariaDescribedBy, id }) => (
       <MuiRadioGroup
         aria-describedby={ariaDescribedBy}
         defaultValue={defaultValue}
-        name={uniqueName}
+        id={id}
+        name={id}
         onChange={onChange}
+        value={value}
       >
         {children}
       </MuiRadioGroup>
-      {errorMessage && (
-        <FormHelperText id={`${uniqueName}-error`} error>
-          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}
-        </FormHelperText>
-      )}
-    </FormControl>
+    ),
+    [children, defaultValue, onChange, value]
+  );
+
+  return (
+    <Field
+      errorMessage={errorMessage}
+      fieldType="group"
+      hasVisibleLabel={false}
+      hint={hint}
+      id={idOverride}
+      isDisabled={isDisabled}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
   );
 };
 

package/src/SearchField.tsx

@@ -24,16 +24,16 @@ import { SearchIcon } from "./";
 import { Field } from "./Field";
 
 export type SearchFieldProps = {
-  /**
-   * If `true`, the component will receive focus automatically.
-   */
-  autoFocus?: boolean;
   /**
    * 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?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /**
+   * If `true`, the component will receive focus automatically.
+   */
+  hasInitialFocus?: boolean;
   /**
    * The id of the `input` element.
    */
@@ -72,7 +72,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
     {
       autoCompleteType,
-      autoFocus,
+      hasInitialFocus,
       id: idOverride,
       isDisabled = false,
       label,
@@ -90,8 +90,9 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
-          autoFocus={autoFocus}
+          autoFocus={hasInitialFocus}
           id={id}
+          name={id}
           onChange={onChange}
           onFocus={onFocus}
           onBlur={onBlur}
@@ -108,7 +109,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       ),
       [
         autoCompleteType,
-        autoFocus,
+        hasInitialFocus,
         onChange,
         onFocus,
         onBlur,
@@ -120,10 +121,11 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
 
     return (
       <Field
+        fieldType="single"
         hasVisibleLabel={false}
         id={idOverride}
         isDisabled={isDisabled}
-        isRequired={false}
+        isOptional={true}
         label={label}
         renderFieldComponent={renderFieldComponent}
       />

package/src/Status.tsx

@@ -12,7 +12,7 @@
 
 import { Chip } from "./";
 
-export interface StatusProps {
+export type StatusProps = {
   /**
    * Determine the color and icon of the alert
    */
@@ -22,7 +22,7 @@ export interface StatusProps {
    * The text content of the status
    */
   label: string;
-}
+};
 
 export const Status = ({ severity, label }: StatusProps) => (
   <Chip label={label} color={severity} variant="status" />

package/src/TextField.tsx

@@ -10,24 +10,21 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputBase } from "@mui/material";
+import { InputAdornment, InputBase } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
   forwardRef,
   InputHTMLAttributes,
   memo,
-  ReactNode,
+  ReactElement,
   useCallback,
 } from "react";
 
 import { Field } from "./Field";
+import { Icon } from "./Icon";
 
 export type TextFieldProps = {
-  /**
-   * If `true`, the component will receive focus automatically.
-   */
-  autoFocus?: boolean;
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
@@ -37,11 +34,15 @@ export type TextFieldProps = {
   /**
    * End `InputAdornment` for this component.
    */
-  endAdornment?: ReactNode;
+  endAdornment?: string | ReactElement<typeof Icon>;
   /**
    * If `error` is not undefined, the `input` will indicate an error.
    */
   errorMessage?: string;
+  /**
+   * If `true`, the component will receive focus automatically.
+   */
+  hasInitialFocus?: boolean;
   /**
    * The helper text content.
    */
@@ -59,13 +60,13 @@ export type TextFieldProps = {
    */
   isMultiline?: boolean;
   /**
-   * It prevents the user from changing the value of the field
+   * If `true`, the `input` element is not required.
    */
-  isReadOnly?: boolean;
+  isOptional?: boolean;
   /**
-   * If `true`, the `input` element is required.
+   * It prevents the user from changing the value of the field
    */
-  isRequired?: boolean;
+  isReadOnly?: boolean;
   /**
    * The label for the `input` element.
    */
@@ -83,7 +84,7 @@ export type TextFieldProps = {
    */
   onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   /**
-   * The label for the `input` element if the it's not optional
+   * The label for the `input` element if it's optional
    */
   optionalLabel?: string;
   /**
@@ -93,7 +94,7 @@ export type TextFieldProps = {
   /**
    * Start `InputAdornment` for this component.
    */
-  startAdornment?: ReactNode;
+  startAdornment?: string | ReactElement<typeof Icon>;
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    */
@@ -108,20 +109,20 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
       autoCompleteType,
-      autoFocus,
+      hasInitialFocus,
       endAdornment,
       errorMessage,
       hint,
       id: idOverride,
       isDisabled = false,
       isMultiline = false,
+      isOptional = false,
       isReadOnly,
-      isRequired = true,
       label,
       onBlur,
       onChange,
       onFocus,
-      optionalLabel,
+      optionalLabel = "Optional",
       placeholder,
       startAdornment,
       type = "text",
@@ -135,24 +136,33 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
-          autoFocus={autoFocus}
-          endAdornment={endAdornment}
+          autoFocus={hasInitialFocus}
+          endAdornment={
+            endAdornment && (
+              <InputAdornment position="end">{endAdornment}</InputAdornment>
+            )
+          }
           id={id}
           multiline={isMultiline}
+          name={id}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
           placeholder={placeholder}
           readOnly={isReadOnly}
           ref={ref}
-          startAdornment={startAdornment}
+          startAdornment={
+            startAdornment && (
+              <InputAdornment position="start">{startAdornment}</InputAdornment>
+            )
+          }
           type={type}
           value={value}
         />
       ),
       [
         autoCompleteType,
-        autoFocus,
+        hasInitialFocus,
         endAdornment,
         isMultiline,
         onChange,
@@ -170,11 +180,12 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     return (
       <Field
         errorMessage={errorMessage}
+        fieldType="single"
         hasVisibleLabel
         hint={hint}
         id={idOverride}
         isDisabled={isDisabled}
-        isRequired={isRequired}
+        isOptional={isOptional}
         label={label}
         optionalLabel={optionalLabel}
         renderFieldComponent={renderFieldComponent}