@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/Buttons/BaseMenuButton.tsx

@@ -1,342 +0,0 @@
-/*!
- * 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 {
-  memo,
-  type ReactElement,
-  useCallback,
-  useMemo,
-  useState,
-  ReactNode,
-} from "react";
-import {
-  Menu as MuiMenu,
-  Popover as MuiPopover,
-  PopoverOrigin,
-} from "@mui/material";
-import styled from "@emotion/styled";
-
-import { Box } from "../Box.js";
-import {
-  BaseButton,
-  buttonSizeValues,
-  buttonVariantValues,
-} from "./BaseButton.js";
-import { FieldComponentProps } from "../FieldComponentProps.js";
-import type { HtmlProps } from "../HtmlProps.js";
-import { ChevronDownIcon, MoreIcon } from "../icons.generated/index.js";
-import { MenuContext, MenuContextType } from "./MenuContext.js";
-import { NullElement } from "../NullElement.js";
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "../OdysseyDesignTokensContext.js";
-import { useUniqueId } from "../useUniqueId.js";
-
-export const menuAlignmentValues = ["left", "right"] as const;
-export const verticalDividerAlignmentValues = ["start", "end"] as const;
-
-const StyledMenuButtonContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "hasVerticalDivider" &&
-    prop !== "odysseyDesignTokens" &&
-    prop !== "verticalDividerAlignment",
-})<{
-  hasVerticalDivider: BaseMenuButtonProps["hasVerticalDivider"];
-  odysseyDesignTokens: DesignTokens;
-  verticalDividerAlignment: BaseMenuButtonProps["verticalDividerAlignment"];
-}>(({ hasVerticalDivider, odysseyDesignTokens, verticalDividerAlignment }) => ({
-  position: "relative",
-
-  ...(hasVerticalDivider && {
-    display: "inline-block",
-
-    "&:before": {
-      position: "absolute",
-      top: "50%",
-      left: 0,
-      width: 1,
-      height: odysseyDesignTokens.Spacing6,
-      backgroundColor: odysseyDesignTokens.HueNeutral300,
-      content: '""',
-      transform: "translate3d(0, -50%, 0)",
-      transition: `opacity 200ms`,
-
-      ...(verticalDividerAlignment === "end" && {
-        left: "unset",
-        right: 0,
-      }),
-    },
-
-    ":has(> button:hover)": {
-      "&:before": {
-        opacity: 0,
-      },
-    },
-
-    ":dir(rtl)": {
-      "&:before": {
-        left: "unset",
-        right: 0,
-        ...(verticalDividerAlignment === "end" && {
-          right: "unset",
-          left: 0,
-        }),
-      },
-    },
-  }),
-}));
-
-export type BaseMenuButtonProps = {
-  /**
-   * The button children for the triggering Button. Only available internal to Odyssey here in BaseMenuButton. If set, buttonLabel is ignored.
-   */
-  buttonChildren?: ReactNode;
-  /**
-   * The label on the triggering Button
-   */
-  buttonLabel?: string;
-  /**
-   * The variant of the triggering Button
-   */
-  buttonVariant?: (typeof buttonVariantValues)[number];
-  /**
-   * The end Icon on the trigggering Button
-   */
-  endIcon?: ReactElement;
-  /**
-   * Add a vertical rule to divide the button from surrounding content
-   */
-  hasVerticalDivider?: boolean;
-  /**
-   * Whether to omit the endIcon if not set (rather than use a default value for it based on overflow)
-   */
-  omitEndIcon?: boolean;
-  /**
-   * The id of the Button
-   */
-  id?: string;
-  /**
-   * If the MenuButton is an overflow menu or standard menu.
-   */
-  isOverflow?: boolean;
-  /**
-   * The horizontal alignment of the menu.
-   */
-  menuAlignment?: (typeof menuAlignmentValues)[number];
-  /**
-   * If true (the default), the menu will close when a child MenuItem is clicked.
-   * Otherwise, it will remain open.
-   */
-  shouldCloseOnSelect?: boolean;
-  /**
-   * The size of the button
-   */
-  size?: (typeof buttonSizeValues)[number];
-  /**
-   * The tooltip text for the Button if it's icon-only
-   */
-  tooltipText?: string;
-
-  /**
-   * Show vertical rule before or after the button
-   */
-  verticalDividerAlignment?: (typeof verticalDividerAlignmentValues)[number];
-};
-
-// These are split and exported separately from the above because wrappers of this (e.g. MenuButton) will
-// want to omit buttonChildren, which they cannot do from the combined union type. Instead, they should
-// omit from BaseMenuButtonProps, then union with the AdditionalBaseMenuButtonProps (as seen in MenuButton)
-export type AdditionalBaseMenuButtonProps = Pick<
-  HtmlProps,
-  "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "testId" | "translate"
-> &
-  Pick<FieldComponentProps, "isDisabled"> &
-  (
-    | { buttonLabel: string }
-    | (Required<Pick<HtmlProps, "ariaLabelledBy">> &
-        Partial<Pick<HtmlProps, "ariaLabel">> & {
-          buttonLabel?: undefined | "";
-        })
-    | (Required<Pick<HtmlProps, "ariaLabel">> &
-        Partial<Pick<HtmlProps, "ariaLabelledBy">> & {
-          buttonLabel?: undefined | "";
-        })
-  ) &
-  (
-    | {
-        /**
-         * The <MenuItem> components within the Menu.
-         */
-        children: ReactNode | NullElement;
-        /**
-         * popoverConten is disallowed if children are present
-         */
-        popoverContent?: never;
-      }
-    | {
-        /**
-         * children is disallowed if popoverContent is present
-         */
-        children?: never;
-        /**
-         * The content for the popover that is triggered on click.
-         */
-        popoverContent: ReactNode | NullElement;
-      }
-  );
-
-const BaseMenuButton = ({
-  ariaLabel,
-  ariaLabelledBy,
-  ariaDescribedBy,
-  buttonChildren,
-  buttonLabel = "",
-  buttonVariant = "secondary",
-  children,
-  popoverContent,
-  endIcon: endIconProp,
-  hasVerticalDivider = false,
-  id: idOverride,
-  isDisabled,
-  isOverflow,
-  menuAlignment = "left",
-  omitEndIcon = false,
-  shouldCloseOnSelect = true,
-  size,
-  testId,
-  tooltipText,
-  translate,
-  verticalDividerAlignment = "start",
-}: BaseMenuButtonProps & AdditionalBaseMenuButtonProps) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  const isOpen = Boolean(anchorEl);
-
-  const closeMenu = useCallback(() => {
-    setAnchorEl(null);
-  }, []);
-
-  const openMenu = useCallback<MenuContextType["openMenu"]>((event) => {
-    setAnchorEl(event.currentTarget);
-  }, []);
-
-  const uniqueId = useUniqueId(idOverride);
-
-  const menuListProps = useMemo(
-    () => ({ "aria-labelledby": `${uniqueId}-button` }),
-    [uniqueId],
-  );
-
-  const providerValue = useMemo<MenuContextType>(
-    () => ({
-      closeMenu,
-      openMenu,
-      shouldCloseOnSelect,
-    }),
-    [closeMenu, openMenu, shouldCloseOnSelect],
-  );
-
-  const endIcon = omitEndIcon ? undefined : endIconProp ? (
-    endIconProp
-  ) : isOverflow ? (
-    <MoreIcon />
-  ) : (
-    <ChevronDownIcon />
-  );
-
-  const anchorOrigin = useMemo(
-    () =>
-      ({
-        horizontal: menuAlignment,
-        vertical: "bottom",
-      }) as PopoverOrigin,
-    [menuAlignment],
-  );
-
-  const transformOrigin = useMemo(
-    () =>
-      ({
-        horizontal: menuAlignment,
-        vertical: "top",
-      }) as PopoverOrigin,
-    [menuAlignment],
-  );
-
-  return (
-    <StyledMenuButtonContainer
-      hasVerticalDivider={hasVerticalDivider}
-      odysseyDesignTokens={odysseyDesignTokens}
-      verticalDividerAlignment={verticalDividerAlignment}
-    >
-      <BaseButton
-        ariaControls={isOpen ? `${uniqueId}-menu` : undefined}
-        ariaExpanded={isOpen ? "true" : undefined}
-        ariaHasPopup="true"
-        ariaDescribedBy={ariaDescribedBy}
-        ariaLabel={ariaLabel}
-        ariaLabelledBy={ariaLabelledBy}
-        testId={testId}
-        endIcon={endIcon}
-        id={`${uniqueId}-button`}
-        isDisabled={isDisabled}
-        label={buttonLabel}
-        children={buttonChildren}
-        onClick={openMenu}
-        size={size}
-        tooltipText={tooltipText}
-        translate={translate}
-        variant={buttonVariant}
-      />
-
-      {children && (
-        <MuiMenu
-          anchorOrigin={anchorOrigin}
-          transformOrigin={transformOrigin}
-          anchorEl={anchorEl}
-          id={`${uniqueId}-menu`}
-          MenuListProps={menuListProps}
-          onClose={closeMenu}
-          open={isOpen}
-        >
-          <MenuContext.Provider value={providerValue}>
-            {children}
-          </MenuContext.Provider>
-        </MuiMenu>
-      )}
-
-      {popoverContent && (
-        <MuiPopover
-          open={isOpen}
-          anchorEl={anchorEl}
-          onClose={closeMenu}
-          anchorOrigin={anchorOrigin}
-          transformOrigin={transformOrigin}
-        >
-          <Box
-            sx={{
-              padding: odysseyDesignTokens.Spacing4,
-            }}
-          >
-            {popoverContent}
-          </Box>
-        </MuiPopover>
-      )}
-    </StyledMenuButtonContainer>
-  );
-};
-
-const MemoizedBaseMenuButton = memo(BaseMenuButton);
-MemoizedBaseMenuButton.displayName = "BaseMenuButton";
-
-export { MemoizedBaseMenuButton as BaseMenuButton };

package/src/Buttons/Button.tsx

@@ -1,30 +0,0 @@
-/*!
- * 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 { memo } from "react";
-import {
-  AdditionalBaseButtonProps,
-  BaseButton,
-  BaseButtonProps,
-} from "./BaseButton.js";
-
-export type ButtonProps = Omit<BaseButtonProps, "children"> &
-  AdditionalBaseButtonProps;
-
-const Button = (props: ButtonProps) => {
-  return <BaseButton {...props} />;
-};
-
-const MemoizedButton = memo(Button);
-MemoizedButton.displayName = "Button";
-
-export { MemoizedButton as Button };

package/src/Buttons/MenuButton.tsx

@@ -1,33 +0,0 @@
-/*!
- * 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 { memo } from "react";
-import {
-  AdditionalBaseMenuButtonProps,
-  BaseMenuButton,
-  BaseMenuButtonProps,
-} from "./BaseMenuButton.js";
-
-export type MenuButtonProps = Omit<
-  BaseMenuButtonProps,
-  "buttonChildren" | "omitEndIcon"
-> &
-  AdditionalBaseMenuButtonProps;
-
-const MenuButton = (props: MenuButtonProps) => {
-  return <BaseMenuButton {...props} />;
-};
-
-const MemoizedMenuButton = memo(MenuButton);
-MemoizedMenuButton.displayName = "MenuButton";
-
-export { MemoizedMenuButton as MenuButton };

package/src/Buttons/MenuContext.ts

@@ -1,25 +0,0 @@
-/*!
- * 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 { MouseEventHandler, createContext } from "react";
-
-export type MenuContextType = {
-  closeMenu: () => void;
-  openMenu: MouseEventHandler<HTMLElement>;
-  shouldCloseOnSelect: boolean;
-};
-
-export const MenuContext = createContext<MenuContextType>({
-  closeMenu: () => {},
-  openMenu: () => {},
-  shouldCloseOnSelect: true,
-});

package/src/Buttons/MenuItem.tsx

@@ -1,103 +0,0 @@
-/*!
- * 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 {
-  MenuItem as MuiMenuItem,
-  MenuItemProps as MuiMenuItemProps,
-} from "@mui/material";
-import { menuItemClasses } from "@mui/material/MenuItem";
-import { memo, useCallback, useContext, type ReactNode } from "react";
-
-import { MenuContext } from "./MenuContext.js";
-import type { HtmlProps } from "../HtmlProps.js";
-
-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;
-  /**
-   * If `true`, the menu item will be visually marked as disabled.
-   */
-  isDisabled?: 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";
-} & Pick<HtmlProps, "testId">;
-
-const MenuItem = ({
-  children,
-  hasInitialFocus,
-  isSelected,
-  isDisabled,
-  onClick: onClickProp,
-  testId,
-  value,
-  variant = "default",
-}: MenuItemProps) => {
-  const { closeMenu, shouldCloseOnSelect } = useContext(MenuContext);
-
-  const onClick = useCallback<NonNullable<MuiMenuItemProps["onClick"]>>(
-    (event) => {
-      onClickProp?.(event);
-      if (shouldCloseOnSelect) {
-        closeMenu();
-      }
-    },
-    [onClickProp, closeMenu, shouldCloseOnSelect],
-  );
-
-  return (
-    <MuiMenuItem
-      aria-current={isSelected}
-      /* eslint-disable-next-line jsx-a11y/no-autofocus */
-      autoFocus={hasInitialFocus}
-      className={
-        variant === "destructive"
-          ? `${menuItemClasses.root}-destructive`
-          : undefined
-      }
-      data-se={testId}
-      disabled={isDisabled}
-      onClick={onClick}
-      selected={isSelected}
-      value={value}
-      tabIndex={0}
-    >
-      {children}
-    </MuiMenuItem>
-  );
-};
-
-const MemoizedMenuItem = memo(MenuItem);
-MemoizedMenuItem.displayName = "MenuItem";
-
-export { MemoizedMenuItem as MenuItem };

package/src/Callout.tsx

@@ -1,176 +0,0 @@
-/*!
- * 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 styled from "@emotion/styled";
-import { Alert, AlertTitle, Box } from "@mui/material";
-import { memo, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-
-import type { HtmlProps } from "./HtmlProps.js";
-import { Link, LinkProps } from "./Link.js";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "./OdysseyDesignTokensContext.js";
-import { type TestSelector } from "./test-selectors/index.js";
-import { Paragraph } from "./Typography.js";
-import { useUniqueId } from "./useUniqueId.js";
-
-export const CalloutTestSelector = {
-  accessibleText: {
-    text: "description",
-    title: "label",
-  },
-  children: {
-    link: {
-      elementSelector: {
-        method: "ByRole",
-        options: {
-          linkText: "name",
-        },
-        role: "link",
-      },
-    },
-  },
-  elementSelector: {
-    method: "ByRole",
-    options: {
-      title: "name",
-    },
-    role: ["alert", "status"],
-  },
-} as const satisfies TestSelector;
-
-export const calloutRoleValues = ["status", "alert"] as const;
-export const calloutSeverityValues = [
-  "success",
-  "info",
-  "warning",
-  "error",
-] as const;
-
-export type CalloutProps = {
-  /**
-   * Used to optionally pass a text list to the component
-   */
-  children?: ReactNode;
-  /**
-   * Sets the ARIA role of the Callout
-   * ("status" for something that dynamically updates, "alert" for errors, null for something
-   * unchanging)
-   */
-  role?: (typeof calloutRoleValues)[number];
-  /**
-   * Determine the color and icon of the Callout
-   */
-  severity: (typeof calloutSeverityValues)[number];
-  /**
-   * The text content of the Callout
-   */
-  text?: string;
-  /**
-   * The title of the Callout
-   */
-  title?: string;
-} & (
-  | {
-      children?: never;
-      text: string;
-    }
-  | {
-      children: ReactNode;
-      text?: never;
-    }
-) &
-  (
-    | {
-        linkRel?: LinkProps["rel"];
-        linkTarget?: LinkProps["target"];
-        linkText: string;
-        /**
-         * If defined, the Callout will include a link to the URL
-         */
-        linkUrl: LinkProps["href"];
-      }
-    | {
-        linkRel?: never;
-        linkTarget?: never;
-        linkUrl?: never;
-        linkText?: never;
-      }
-  ) &
-  Pick<HtmlProps, "testId" | "translate">;
-
-const ContentContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  "& > * + *": {
-    marginBlockStart: odysseyDesignTokens.Spacing4,
-  },
-}));
-
-const Callout = ({
-  children,
-  linkRel,
-  linkTarget,
-  linkText,
-  linkUrl,
-  role,
-  severity,
-  testId,
-  text,
-  title,
-  translate,
-}: CalloutProps) => {
-  const { t } = useTranslation();
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const titleId = useUniqueId();
-
-  return (
-    <Alert
-      aria-label={t(`severity.${severity}`)}
-      aria-labelledby={titleId}
-      data-se={testId}
-      role={role}
-      severity={severity}
-      variant="callout"
-    >
-      {title && (
-        <AlertTitle aria-hidden id={titleId} translate={translate}>
-          {title}
-        </AlertTitle>
-      )}
-
-      <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>
-        {children && <Box component="div">{children}</Box>}
-        {text && <Paragraph>{text}</Paragraph>}
-        {linkUrl && (
-          <Box>
-            <Link
-              href={linkUrl}
-              rel={linkRel}
-              target={linkTarget}
-              variant="monochrome"
-            >
-              {linkText}
-            </Link>
-          </Box>
-        )}
-      </ContentContainer>
-    </Alert>
-  );
-};
-
-const MemoizedCallout = memo(Callout);
-MemoizedCallout.displayName = "Callout";
-
-export { MemoizedCallout as Callout };