@okta/odyssey-react-mui 0.21.4 → 0.23.0

package/src/FieldHint.tsx

@@ -0,0 +1,28 @@
+/*!
+ * 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 { memo } from "react";
+
+import { FormHelperText } from "./";
+
+export type FieldHintProps = {
+  id?: string;
+  text: string;
+};
+
+const FieldHint = ({ id, text }: FieldHintProps) => {
+  return <FormHelperText id={id}>{text}</FormHelperText>;
+};
+
+const MemoizedFieldHint = memo(FieldHint);
+
+export { MemoizedFieldHint as FieldHint };

package/src/FieldLabel.tsx

@@ -0,0 +1,57 @@
+/*!
+ * 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 { InputLabel as MuiInputLabel } from "@mui/material";
+import { memo, useMemo } from "react";
+
+import { ScreenReaderText } from "./ScreenReaderText";
+import { Typography } from ".";
+
+export type FieldLabelProps = {
+  hasVisibleLabel: boolean;
+  id: string;
+  inputId: string;
+  isOptional: boolean;
+  optionalText?: string;
+  text: string;
+};
+
+const FieldLabel = ({
+  hasVisibleLabel,
+  id,
+  inputId,
+  isOptional,
+  optionalText,
+  text,
+}: FieldLabelProps) => {
+  const inputLabel = useMemo(
+    () => (
+      <MuiInputLabel htmlFor={inputId} id={id}>
+        {text}
+        {isOptional && (
+          <Typography variant="subtitle1">{optionalText}</Typography>
+        )}
+      </MuiInputLabel>
+    ),
+    [id, inputId, isOptional, optionalText, text]
+  );
+
+  return hasVisibleLabel ? (
+    inputLabel
+  ) : (
+    <ScreenReaderText>{inputLabel}</ScreenReaderText>
+  );
+};
+
+const MemoizedFieldLabel = memo(FieldLabel);
+
+export { MemoizedFieldLabel as FieldLabel };

package/src/Icon.test.tsx

@@ -18,7 +18,7 @@ const name = "check";
 
 describe("Icon", () => {
   it("renders an icon based on name prop", () => {
-    render(<Icon name={name} titleAccess={title} />);
+    render(<Icon name={name} label={title} size="medium" />);
 
     const svgElement = screen.getByRole("img");
     expect(svgElement).toBeVisible();

package/src/Icon.tsx

@@ -11,15 +11,26 @@
  */
 
 import { forwardRef } from "react";
-import type { SvgIconNoChildrenProps } from "./iconDictionary/types";
 import { iconDictionary } from "./iconDictionary";
 
-export interface IconProps extends SvgIconNoChildrenProps {
-  /**
-   * Name of the icon to render
+export type IconProps = {
+  /*
+   ** The element whose text describes the icon, if it exists
+   */
+  ariaLabelledby?: string;
+  /*
+   ** Text that describes the icon
+   */
+  label: string;
+  /*
+   ** Name of the icon to render
    */
   name: keyof typeof iconDictionary;
-}
+  /*
+   ** The size of the icon
+   */
+  size: "small" | "medium" | "large";
+};
 
 /**
  * A system of icons which establishes a visual language
@@ -28,12 +39,18 @@ export interface IconProps extends SvgIconNoChildrenProps {
  * icon component imports where possible to keep your bundle size smaller.
  */
 export const Icon = forwardRef<SVGSVGElement, IconProps>(
-  ({ name, titleAccess, ...rest }, ref) => {
+  ({ ariaLabelledby, label, name, size }) => {
     if (!(name in iconDictionary)) return null;
 
     const NamedIcon = iconDictionary[name];
 
-    return <NamedIcon titleAccess={titleAccess} ref={ref} {...rest} />;
+    return (
+      <NamedIcon
+        aria-labelledby={ariaLabelledby}
+        fontSize={size}
+        titleAccess={label}
+      />
+    );
   }
 );
 

package/src/Infobox.tsx

@@ -14,28 +14,28 @@ import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
 import { Alert, AlertTitle, ScreenReaderText } from ".";
 
-export interface InfoboxProps {
+export type InfoboxProps = {
   /**
    * The contents of the alert
    */
   children: ReactNode;
-  /**
-   * Determine the color and icon of the alert
-   */
-  severity: AlertColor;
   /**
    * Sets the ARIA role of the alert
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
   role?: "status" | "alert";
+  /**
+   * Determine the color and icon of the alert
+   */
+  severity: AlertColor;
   /**
    * The title of the alert
    */
   title?: string;
-}
+};
 
-const Infobox = ({ children, severity, role, title }: InfoboxProps) => (
+const Infobox = ({ children, role, severity, title }: InfoboxProps) => (
   <Alert role={role} severity={severity} variant="infobox">
     <ScreenReaderText>{severity}: </ScreenReaderText>
     {title && <AlertTitle>{title}</AlertTitle>}

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` }),
@@ -77,10 +82,9 @@ const MenuButton = ({
         aria-haspopup="true"
         aria-expanded={open ? "true" : undefined}
         onClick={handleClick}
+        text={buttonLabel}
         variant={buttonVariant}
-      >
-        {buttonLabel}
-      </Button>
+      />
       <Menu
         id={`${uniqueId}-menu`}
         anchorEl={anchorEl}

package/src/MenuItem.tsx

@@ -45,6 +45,5 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
 );
 
 const MemoizedMenuItem = memo(MenuItem);
-MemoizedMenuItem.displayName = "MenuItem";
 
 export { MemoizedMenuItem as MenuItem };

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/OdysseyCacheProvider.test.tsx

@@ -29,7 +29,7 @@ describe("OdysseyCacheProvider", () => {
   it("themes a Button", () => {
     render(
       <OdysseyCacheProvider>
-        <Button>text</Button>
+        <Button text="text" />
       </OdysseyCacheProvider>
     );
 

package/src/PasswordField.tsx

@@ -0,0 +1,180 @@
+/*!
+ * Copyright (c) 2022-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 { InputAdornment, InputBase } from "@mui/material";
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  memo,
+  useCallback,
+  useState,
+} from "react";
+
+import { EyeIcon, EyeOffIcon, IconButton } from "./";
+import { Field } from "./Field";
+
+export type PasswordFieldProps = {
+  /**
+   * 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?: "current-password" | "new-password";
+  /**
+   * 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.
+   */
+  hint?: string;
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+  /**
+   * If `true`, the component is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * If `true`, the `input` element is not required.
+   */
+  isOptional?: boolean;
+  /**
+   * It prevents the user from changing the value of the field
+   */
+  isReadOnly?: boolean;
+  /**
+   * The label for the `input` element.
+   */
+  label: string;
+  /**
+   * Callback fired when the `input` element loses focus.
+   */
+  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /**
+   * Callback fired when the value is changed.
+   */
+  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+  /**
+   * Callback fired when the `input` element get focus.
+   */
+  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder?: string;
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value?: string;
+};
+
+const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
+  (
+    {
+      autoCompleteType,
+      errorMessage,
+      hasInitialFocus,
+      hint,
+      id: idOverride,
+      isDisabled = false,
+      isOptional = false,
+      isReadOnly,
+      label,
+      onChange,
+      onFocus,
+      onBlur,
+      placeholder,
+      value,
+    },
+    ref
+  ) => {
+    const [inputType, setInputType] = useState("password");
+
+    const togglePasswordVisibility = useCallback(() => {
+      setInputType((inputType) =>
+        inputType === "password" ? "text" : "password"
+      );
+    }, []);
+
+    const renderFieldComponent = useCallback(
+      ({ ariaDescribedBy, id }) => (
+        <InputBase
+          aria-describedby={ariaDescribedBy}
+          autoComplete={autoCompleteType}
+          /* eslint-disable-next-line jsx-a11y/no-autofocus */
+          autoFocus={hasInitialFocus}
+          endAdornment={
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                edge="end"
+                onClick={togglePasswordVisibility}
+              >
+                {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
+              </IconButton>
+            </InputAdornment>
+          }
+          id={id}
+          name={id}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          readOnly={isReadOnly}
+          ref={ref}
+          required={!isOptional}
+          type={inputType}
+          value={value}
+        />
+      ),
+      [
+        autoCompleteType,
+        hasInitialFocus,
+        togglePasswordVisibility,
+        inputType,
+        onChange,
+        onFocus,
+        onBlur,
+        placeholder,
+        isOptional,
+        isReadOnly,
+        ref,
+        value,
+      ]
+    );
+
+    return (
+      <Field
+        errorMessage={errorMessage}
+        fieldType="single"
+        hasVisibleLabel
+        hint={hint}
+        id={idOverride}
+        isDisabled={isDisabled}
+        isOptional={isOptional}
+        label={label}
+        renderFieldComponent={renderFieldComponent}
+      />
+    );
+  }
+);
+
+const MemoizedPasswordField = memo(PasswordField);
+
+export { MemoizedPasswordField as PasswordField };

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}
+    />
   );
 };