@okta/odyssey-react-mui 0.24.0 → 1.0.0

package/src/Form.tsx

@@ -12,33 +12,59 @@
 
 import { memo, ReactElement } from "react";
 
-import { Box, Typography } from "./";
+import { Box } from "@mui/material";
 import { Button } from "./Button";
-import { Infobox } from "./Infobox";
+import { Callout } from "./Callout";
+import { Heading4, Support } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
 
+export const formEncodingTypeValues = [
+  "application/x-www-form-urlencoded",
+  "application/json",
+  "multipart/form-data",
+  "text/plain",
+] as const;
+export const formAutoCompleteTypeValues = ["on", "off"] as const;
+export const formMethodValues = ["post", "get", "dialog"] as const;
+
 export type FormProps = {
   /**
-   * The title of the Form
+   * A Callout indicating a Form-wide error or status update.
    */
-  title?: string;
+  alert?: ReactElement<typeof Callout>;
   /**
-   * A supplementary description
+   * Indicates whether input elements can by default have their values automatically completed by the browser.
+   * `autocomplete` attributes on form elements override it on <form>
    */
-  description?: string;
+  autoCompleteType?: (typeof formAutoCompleteTypeValues)[number];
   /**
    * The Field or FieldSet components within the Form
    */
   children: ReactElement | Array<ReactElement>;
   /**
-   * An Infobox indicating a Form-wide error or status update.
+   * A supplementary description
    */
-  alert?: ReactElement<typeof Infobox>;
+  description?: string;
   /**
-   * Indicates whether input elements can by default have their values automatically completed by the browser.
-   * `autocomplete` attributes on form elements override it on <form>
+   * If the value of the method attribute is post, enctype is the MIME type of the form submission.
+   * This value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.
+   */
+  encodingType?: (typeof formEncodingTypeValues)[number];
+  /**
+   * The Field or FieldGroup components within the Form
+   */
+  formActions?:
+    | ReactElement<typeof Button>
+    | Array<ReactElement<typeof Button>>;
+  /**
+   * Defines a unique identifier (ID) which must be unique in the whole document.
+   */
+  id?: string;
+  /**
+   * The HTTP method to submit the form with.
+   * This value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.
    */
-  hasAutoComplete?: "on" | "off" | undefined;
+  method?: (typeof formMethodValues)[number];
   /**
    * The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.
    */
@@ -49,44 +75,24 @@ export type FormProps = {
    * it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.
    */
   noValidate?: boolean;
-  /**
-   * If the value of the method attribute is post, enctype is the MIME type of the form submission.
-   * This value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.
-   */
-  encodingType?:
-    | "application/x-www-form-urlencoded"
-    | "multipart/form-data"
-    | "text/plain"
-    | undefined;
-  /**
-   * The HTTP method to submit the form with.
-   * This value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.
-   */
-  method?: "post" | "get" | "dialog" | undefined;
   /**
    * Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe).
    * This value can be overridden by a formtarget attribute on a <button>, <input type="submit">, or <input type="image"> element.
    */
-  target?: "post" | "get" | "dialog" | undefined;
+  target?: string;
   /**
-   * The Field or FieldGroup components within the Form
-   */
-  formActions?:
-    | ReactElement<typeof Button>
-    | Array<ReactElement<typeof Button>>;
-  /**
-   * Defines a unique identifier (ID) which must be unique in the whole document.
+   * The title of the Form
    */
-  id?: string;
+  title?: string;
 };
 
 const Form = ({
   alert,
+  autoCompleteType,
   children,
   description,
   encodingType,
   formActions,
-  hasAutoComplete,
   id: idOverride,
   method,
   name,
@@ -99,7 +105,7 @@ const Form = ({
   return (
     <Box
       component="form"
-      autoComplete={hasAutoComplete}
+      autoComplete={autoCompleteType}
       name={name}
       encType={encodingType}
       method={method}
@@ -112,14 +118,17 @@ const Form = ({
         padding: (theme) => theme.spacing(0),
       }}
     >
-      {title && (
-        <Typography variant="h4" component="h1">
-          {title}
-        </Typography>
-      )}
-      {description && <Typography paragraph>{description}</Typography>}
-      {alert}
-      {children}
+      <Box
+        component="div"
+        sx={{
+          marginBlockEnd: (theme) => theme.spacing(4),
+        }}
+      >
+        {title && <Heading4 component="h1">{title}</Heading4>}
+        {description && <Support>{description}</Support>}
+        {alert}
+      </Box>
+      <Box component="div">{children}</Box>
       {formActions && (
         <Box
           component="div"
@@ -127,6 +136,7 @@ const Form = ({
             display: "flex",
             justifyContent: "flex-start",
             gap: (theme) => theme.spacing(1),
+            marginBlockStart: (theme) => theme.spacing(7),
           }}
         >
           {formActions}

package/src/Link.tsx

@@ -10,41 +10,61 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { forwardRef, ReactElement } from "react";
+import { memo, ReactElement } from "react";
+import { ExternalLinkIcon } from "./icons.generated";
 
-import {
-  Link as MuiLink,
-  LinkProps as MuiLinkProps,
-  SvgIcon,
-} from "@mui/material";
+import { Link as MuiLink } from "@mui/material";
+
+export const linkVariantValues = ["default", "monochrome"] as const;
 
 export type LinkProps = {
+  /**
+   * The content within the Link
+   */
   children: React.ReactNode;
+  /**
+   * The Link destination
+   */
   href: string;
+  /**
+   * An optional Icon component at the start of the Link
+   */
   icon?: ReactElement;
+  /**
+   * The HTML `rel` attribute for the Link
+   */
   rel?: string;
-  target?: "_self" | "_blank" | "_parent" | "_top" | string;
-  variant?: MuiLinkProps["variant"];
+  /**
+   * The HTML `target` attribute for the Link
+   */
+  target?:
+    | "_self"
+    | "_blank"
+    | "_parent"
+    | "_top"
+    | (string & NonNullable<unknown>);
+  /**
+   * The visual presentation of the Link (default or monochrome)
+   */
+  variant?: (typeof linkVariantValues)[number];
 };
 
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { icon, children, target, variant, href, rel } = props;
-  return (
-    <MuiLink ref={ref} variant={variant} target={target} href={href} rel={rel}>
-      {icon && <span className="Link-icon">{icon}</span>}
-      {children}
-      {target === "_blank" && (
-        <span className="Link-indicator" role="presentation">
-          <SvgIcon viewBox="0 0 16 16">
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M13.2929 2H7.99998V1H14.5C14.7761 1 15 1.22386 15 1.5V8H14V2.70711L6.35353 10.3536L5.64642 9.64645L13.2929 2ZM1.5 4H1V4.5V14.5V15H1.5H11.5H12V14.5V8H11V14H2V5H8V4H1.5Z"
-              fill="currentColor"
-            />
-          </SvgIcon>
-        </span>
-      )}
-    </MuiLink>
-  );
-});
+const Link = ({ children, href, icon, target, rel, variant }: LinkProps) => (
+  <MuiLink href={href} rel={rel} target={target} variant={variant}>
+    {icon && <span className="Link-icon">{icon}</span>}
+
+    {children}
+
+    {target === "_blank" && (
+      <span className="Link-indicator" role="presentation">
+        <ExternalLinkIcon />
+      </span>
+    )}
+  </MuiLink>
+);
+
+const MemoizedLink = memo(Link);
+
+MemoizedLink.displayName = "Link";
+
+export { MemoizedLink as Link };

package/src/MenuButton.tsx

@@ -10,29 +10,27 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Button,
-  ButtonProps,
-  ChevronDownIcon,
-  Divider,
-  ListSubheader,
-  Menu,
-  MenuItem,
-  useUniqueId,
-} from "./";
-import { memo, MouseEvent, ReactElement, useMemo, useState } from "react";
+import { Button, buttonVariantValues, MenuItem, useUniqueId } from "./";
+import { Divider, ListSubheader, Menu } from "@mui/material";
+import { ChevronDownIcon } from "./icons.generated";
+import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
+
+import { MenuContext, MenuContextType } from "./MenuContext";
+import { NullElement } from "./NullElement";
 
 export type MenuButtonProps = {
   /**
-   * The <MenuItem> components within the Menu.
+   * The ARIA label for the Button
    */
-  children: Array<
-    ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
-  >;
+  ariaLabel?: string;
   /**
-   * The end Icon on the trigggering Button
+   * The ID of the element that labels the Button
+   */
+  ariaLabelledBy?: string;
+  /**
+   * The ID of the element that describes the Button
    */
-  buttonEndIcon?: ReactElement;
+  ariaDescribedBy?: string;
   /**
    * The label on the triggering Button
    */
@@ -40,31 +38,67 @@ export type MenuButtonProps = {
   /**
    * The variant of the triggering Button
    */
-  buttonVariant?: ButtonProps["variant"];
+  buttonVariant?: (typeof buttonVariantValues)[number];
+  /**
+   * The <MenuItem> components within the Menu.
+   */
+  children: Array<
+    ReactElement<
+      typeof MenuItem | typeof Divider | typeof ListSubheader | NullElement
+    >
+  >;
+  /**
+   * The end Icon on the trigggering Button
+   */
+  endIcon?: ReactElement;
   /**
-   * The id of the `input` element.
+   * The id of the Button
    */
   id?: string;
-};
+  /**
+   * The tooltip text for the Button if it's icon-only
+   */
+  tooltipText?: string;
+} & (
+  | {
+      ariaLabel?: string;
+      ariaLabelledBy?: string;
+      buttonLabel: string;
+    }
+  | {
+      ariaLabel: string;
+      ariaLabelledBy?: string;
+      buttonLabel?: undefined | "";
+    }
+  | {
+      ariaLabel?: string;
+      ariaLabelledBy: string;
+      buttonLabel?: undefined | "";
+    }
+);
 
 const MenuButton = ({
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
   buttonLabel = "",
-  children,
-  buttonEndIcon = <ChevronDownIcon />,
   buttonVariant = "secondary",
+  children,
+  endIcon = <ChevronDownIcon />,
   id: idOverride,
+  tooltipText,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
-  const open = Boolean(anchorEl);
+  const isOpen = Boolean(anchorEl);
 
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
+  const closeMenu = useCallback<MenuContextType["closeMenu"]>(() => {
     setAnchorEl(null);
-  };
+  }, []);
+
+  const openMenu = useCallback<MenuContextType["openMenu"]>((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
 
   const uniqueId = useUniqueId(idOverride);
 
@@ -73,31 +107,47 @@ const MenuButton = ({
     [uniqueId]
   );
 
+  const providerValue = useMemo<MenuContextType>(
+    () => ({
+      closeMenu,
+      openMenu,
+    }),
+    [closeMenu, openMenu]
+  );
+
   return (
     <div>
       <Button
-        endIcon={buttonEndIcon}
-        id={`${uniqueId}-button`}
-        aria-controls={open ? `${uniqueId}-menu` : undefined}
+        aria-controls={isOpen ? `${uniqueId}-menu` : undefined}
+        aria-expanded={isOpen ? "true" : undefined}
         aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
-        onClick={handleClick}
-        text={buttonLabel}
+        ariaDescribedBy={ariaDescribedBy}
+        ariaLabel={ariaLabel}
+        ariaLabelledBy={ariaLabelledBy}
+        endIcon={endIcon}
+        id={`${uniqueId}-button`}
+        label={buttonLabel}
+        onClick={openMenu}
+        tooltipText={tooltipText}
         variant={buttonVariant}
       />
+
       <Menu
-        id={`${uniqueId}-menu`}
         anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
+        id={`${uniqueId}-menu`}
         MenuListProps={menuListProps}
+        onClose={closeMenu}
+        open={isOpen}
       >
-        {children}
+        <MenuContext.Provider value={providerValue}>
+          {children}
+        </MenuContext.Provider>
       </Menu>
     </div>
   );
 };
 
 const MemoizedMenuButton = memo(MenuButton);
+MemoizedMenuButton.displayName = "MenuButton";
 
 export { MemoizedMenuButton as MenuButton };

package/src/{theme/OdysseyTheme.ts → MenuContext.ts}

@@ -10,16 +10,16 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Theme } from "@mui/material/styles";
-import { Temp } from "./temp";
+import { createContext, MouseEventHandler } from "react";
 
-declare module "@mui/material/styles" {
-  interface ThemeOptions {
-    temp?: Temp;
-  }
-}
+export type MenuContextType = {
+  closeMenu: () => void;
+  openMenu: MouseEventHandler<HTMLElement>;
+};
 
-export interface OdysseyTheme extends Theme {
-  /** @deprecated `temp` is only for testing. It will be removed in a future version of Odyssey. */
-  temp?: Temp;
-}
+export const MenuContext = createContext<MenuContextType>({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  closeMenu: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  openMenu: () => {},
+});

package/src/MenuItem.tsx

@@ -10,39 +10,83 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, forwardRef } from "react";
-import { MenuItem as MuiMenuItem } from "@mui/material";
+import {
+  MenuItem as MuiMenuItem,
+  MenuItemProps as MuiMenuItemProps,
+} from "@mui/material";
 import { menuItemClasses } from "@mui/material/MenuItem";
-import type { MenuItemProps as MuiMenuItemProps } from "@mui/material";
-
-export interface MenuItemProps
-  extends Omit<
-    MuiMenuItemProps,
-    | "component"
-    | "dense"
-    | "disableGutters"
-    | "divider"
-    | "focusVisibleClassName"
-  > {
+import { memo, useCallback, useContext, type ReactNode } from "react";
+
+import { MenuContext } from "./MenuContext";
+
+export type MenuItemProps = {
+  /**
+   * The content of the menu item.
+   */
+  children: ReactNode;
+  /**
+   * If `true`, the menu item will receive focus automatically.
+   */
+  hasInitialFocus?: boolean;
+  /**
+   * If `true`, the menu item will be visually marked as selected.
+   */
+  isSelected?: boolean;
   /**
-   * Toggles whether or not the MenuItem represents a destructive action.
+   * If `true`, the menu item will be visually marked as destructive.
    */
   isDestructive?: boolean;
-}
+  /**
+   * Callback fired when the menu item is clicked.
+   */
+  onClick?: MuiMenuItemProps["onClick"];
+  /**
+   * The value associated with the menu item.
+   */
+  value?: string;
+  /**
+   * The variant of the menu item.
+   * - "default": The default variant.
+   * - "destructive": A variant indicating a destructive action.
+   */
+  variant?: "default" | "destructive";
+};
+
+const MenuItem = ({
+  children,
+  hasInitialFocus,
+  isSelected,
+  onClick: onClickProp,
+  value,
+  variant = "default",
+}: MenuItemProps) => {
+  const { closeMenu } = useContext(MenuContext);
+
+  const onClick = useCallback<NonNullable<MuiMenuItemProps["onClick"]>>(
+    (event) => {
+      onClickProp?.(event);
+      closeMenu();
+    },
+    [onClickProp, closeMenu]
+  );
 
-const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
-  ({ isDestructive, ...props }, ref) => (
+  return (
     <MuiMenuItem
-      {...props}
-      ref={ref}
+      /* eslint-disable-next-line jsx-a11y/no-autofocus */
+      autoFocus={hasInitialFocus}
+      selected={isSelected}
+      value={value}
+      onClick={onClick}
       className={
-        isDestructive ? `${menuItemClasses.root}-destructive` : undefined
+        variant === "destructive"
+          ? `${menuItemClasses.root}-destructive`
+          : undefined
       }
     >
-      {props.children}
+      {children}
     </MuiMenuItem>
-  )
-);
+  );
+};
 
 const MemoizedMenuItem = memo(MenuItem);
 MemoizedMenuItem.displayName = "MenuItem";

package/src/MuiPropsChild.tsx

@@ -37,5 +37,6 @@ const MuiPropsChild = forwardRef<HTMLElement, MuiPropsChildProps>(
 );
 
 const MemoizedMuiPropsChild = memo(MuiPropsChild);
+MemoizedMuiPropsChild.displayName = "MuiPropsChild";
 
 export { MemoizedMuiPropsChild as MuiPropsChild };

package/src/MuiPropsContext.ts

@@ -10,8 +10,10 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 
 export type MuiPropsContextType = Record<string, unknown>;
 
 export const MuiPropsContext = createContext<MuiPropsContextType>({});
+
+export const useMuiProps = () => useContext(MuiPropsContext);

package/src/NativeSelect.tsx

@@ -22,18 +22,57 @@ export type NativeSelectOption = {
 };
 
 export type NativeSelectProps = {
+  /**
+   * The options or optgroup elements within the NativeSelect
+   */
   children?: ReactElement<"option"> | ReactElement<"optgroup">;
+  /**
+   * The default value of the NativeSelect. Only applicable if `value` is not provided
+   */
   defaultValue?: string;
+  /**
+   * The error message for the NativeSelect
+   */
   errorMessage?: string;
+  /**
+   * The hint text for the NativeSelect
+   */
   hint?: string;
+  /**
+   * The id attribute of the NativeSelect
+   */
   id?: string;
+  /**
+   * If `true`, the NativeSelect is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * If `true`, the NativeSelect allows multiple selections
+   */
   isMultiSelect?: boolean;
+  /**
+   * If `true`, the NativeSelect is optional
+   */
   isOptional?: boolean;
+  /**
+   * The label text for the NativeSelect
+   */
   label: string;
+  /**
+   * Callback fired when the NativeSelect loses focus
+   */
   onBlur?: MuiSelectProps["onBlur"];
+  /**
+   * Callback fired when the value of the NativeSelect changes
+   */
   onChange?: MuiSelectProps["onChange"];
+  /**
+   * Callback fired when the NativeSelect gains focus
+   */
   onFocus?: MuiSelectProps["onFocus"];
+  /**
+   * The value or values selected in the NativeSelect
+   */
   value?: string | string[];
 };
 

package/{dist/theme/temp.js → src/NullElement.tsx}

@@ -10,7 +10,4 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export const temp = {
-  borderWidth: "24px"
-};
-//# sourceMappingURL=temp.js.map
+export type NullElement = false | null | undefined;

package/src/OdysseyCacheProvider.test.tsx

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