@okta/odyssey-react-mui 1.27.1 → 1.29.0

package/src/{Button.tsx → Buttons/BaseButton.tsx}

@@ -16,21 +16,22 @@ import {
   HTMLAttributes,
   memo,
   ReactElement,
+  ReactNode,
   useCallback,
   useImperativeHandle,
   useMemo,
   useRef,
 } from "react";
 
-import { useButton } from "./ButtonContext";
-import type { HtmlProps } from "./HtmlProps";
-import { FocusHandle } from "./inputUtils";
+import { useButton } from "../Buttons";
+import type { HtmlProps } from "../HtmlProps";
+import { FocusHandle } from "../inputUtils";
 import {
   MuiPropsContext,
   MuiPropsContextType,
   useMuiProps,
-} from "./MuiPropsContext";
-import { Tooltip } from "./Tooltip";
+} from "../MuiPropsContext";
+import { Tooltip } from "../Tooltip";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -43,7 +44,7 @@ export const buttonVariantValues = [
   "floatingAction",
 ] as const;
 
-export type ButtonProps = {
+export type BaseButtonProps = {
   /**
    * The ref forwarded to the Button
    */
@@ -85,64 +86,41 @@ export type ButtonProps = {
    * The click event handler for the Button
    */
   onClick?: MuiButtonProps["onClick"];
-} & (
-  | {
-      /**
-       * The icon element to display at the end of the Button
-       */
-      endIcon?: ReactElement;
-      /**
-       * The text content of the Button
-       */
-      label: string;
-      /**
-       * The icon element to display at the start of the Button
-       */
-      startIcon?: ReactElement;
-    }
-  | {
-      /**
-       * The icon element to display at the end of the Button
-       */
-      endIcon?: ReactElement;
-      /**
-       * The text content of the Button
-       */
-      label?: string | "" | undefined;
-      /**
-       * The icon element to display at the start of the Button
-       */
-      startIcon: ReactElement;
-    }
-  | {
-      /**
-       * The icon element to display at the end of the Button
-       */
-      endIcon: ReactElement;
-      /**
-       * The text content of the Button
-       */
-      label?: never;
-      /**
-       * The icon element to display at the start of the Button
-       */
-      startIcon?: ReactElement;
-    }
-) &
-  Pick<
-    HtmlProps,
-    | "ariaControls"
-    | "ariaDescribedBy"
-    | "ariaExpanded"
-    | "ariaHasPopup"
-    | "ariaLabel"
-    | "ariaLabelledBy"
-    | "tabIndex"
-    | "testId"
-    | "translate"
-  >;
+  /**
+   * The contents of the button. Only available internal to Odyssey here in BaseButton. If set, label is ignored.
+   */
+  children?: ReactNode;
+  /**
+   * The icon element to display at the end of the Button
+   */
+  endIcon?: ReactElement;
+  /**
+   * The text content of the Button
+   */
+  label?: string;
+  /**
+   * The icon element to display at the start of the Button
+   */
+  startIcon?: ReactElement;
+};
+
+// These are split and exported separately from the above because wrappers of this (e.g. Button) will
+// want to omit children, which they cannot do from the combined union type. Instead, they should
+// omit from BaseButtonProps, then union with the AdditionalBaseButtonProps (as seen in Button)
+export type AdditionalBaseButtonProps = Pick<
+  HtmlProps,
+  | "ariaControls"
+  | "ariaDescribedBy"
+  | "ariaExpanded"
+  | "ariaHasPopup"
+  | "ariaLabel"
+  | "ariaLabelledBy"
+  | "tabIndex"
+  | "testId"
+  | "translate"
+>;
 
-const Button = ({
+const BaseButton = ({
   ariaControls,
   ariaDescribedBy,
   ariaExpanded,
@@ -156,6 +134,7 @@ const Button = ({
   isDisabled,
   isFullWidth: isFullWidthProp,
   label = "",
+  children,
   onClick,
   size = "medium",
   startIcon,
@@ -165,7 +144,7 @@ const Button = ({
   translate,
   type = "button",
   variant: variantProp,
-}: ButtonProps) => {
+}: BaseButtonProps & AdditionalBaseButtonProps) => {
   const muiProps = useMuiProps();
 
   // We're deprecating the "tertiary" variant, so map it to
@@ -225,7 +204,7 @@ const Button = ({
           type={type}
           variant={variant}
         >
-          {label}
+          {children ?? label}
         </MuiButton>
       );
     },
@@ -242,6 +221,7 @@ const Button = ({
       isDisabled,
       isFullWidth,
       label,
+      children,
       onClick,
       size,
       startIcon,
@@ -264,7 +244,7 @@ const Button = ({
   return renderButton(muiProps);
 };
 
-const MemoizedButton = memo(Button);
-MemoizedButton.displayName = "Button";
+const MemoizedBaseButton = memo(BaseButton);
+MemoizedBaseButton.displayName = "BaseButton";
 
-export { MemoizedButton as Button };
+export { MemoizedBaseButton as BaseButton };

package/src/{MenuButton.tsx → Buttons/BaseMenuButton.tsx}

@@ -18,18 +18,28 @@ import {
   useState,
   ReactNode,
 } from "react";
-import { Menu as MuiMenu, PopoverOrigin } from "@mui/material";
+import {
+  Menu as MuiMenu,
+  Popover as MuiPopover,
+  PopoverOrigin,
+} from "@mui/material";
 
-import { Button, buttonSizeValues, buttonVariantValues, useUniqueId } from "./";
-import { ChevronDownIcon, MoreIcon } from "./icons.generated";
-import { FieldComponentProps } from "./FieldComponentProps";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
+import { Box, buttonSizeValues, buttonVariantValues, useUniqueId } from "..";
+import { BaseButton } from "./BaseButton";
+import { ChevronDownIcon, MoreIcon } from "../icons.generated";
+import { FieldComponentProps } from "../FieldComponentProps";
 import { MenuContext, MenuContextType } from "./MenuContext";
-import { NullElement } from "./NullElement";
-import type { HtmlProps } from "./HtmlProps";
+import { NullElement } from "../NullElement";
+import type { HtmlProps } from "../HtmlProps";
 
 export const menuAlignmentValues = ["left", "right"] as const;
 
-export type MenuButtonProps = {
+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
    */
@@ -38,14 +48,14 @@ export type MenuButtonProps = {
    * The variant of the triggering Button
    */
   buttonVariant?: (typeof buttonVariantValues)[number];
-  /**
-   * The <MenuItem> components within the Menu.
-   */
-  children: ReactNode | NullElement;
   /**
    * The end Icon on the trigggering Button
    */
   endIcon?: ReactElement;
+  /**
+   * 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
    */
@@ -71,7 +81,12 @@ export type MenuButtonProps = {
    * The tooltip text for the Button if it's icon-only
    */
   tooltipText?: string;
-} & Pick<
+};
+
+// 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"
 > &
@@ -86,26 +101,52 @@ export type MenuButtonProps = {
         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 MenuButton = ({
+const BaseMenuButton = ({
   ariaLabel,
   ariaLabelledBy,
   ariaDescribedBy,
+  buttonChildren,
   buttonLabel = "",
   buttonVariant = "secondary",
   children,
+  popoverContent,
   shouldCloseOnSelect = true,
   endIcon: endIconProp,
   id: idOverride,
   isDisabled,
   isOverflow,
   menuAlignment = "left",
+  omitEndIcon = false,
   size,
   testId,
   tooltipText,
   translate,
-}: MenuButtonProps) => {
+}: BaseMenuButtonProps & AdditionalBaseMenuButtonProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const isOpen = Boolean(anchorEl);
@@ -134,7 +175,7 @@ const MenuButton = ({
     [closeMenu, openMenu, shouldCloseOnSelect],
   );
 
-  const endIcon = endIconProp ? (
+  const endIcon = omitEndIcon ? undefined : endIconProp ? (
     endIconProp
   ) : isOverflow ? (
     <MoreIcon />
@@ -162,7 +203,7 @@ const MenuButton = ({
 
   return (
     <div>
-      <Button
+      <BaseButton
         ariaControls={isOpen ? `${uniqueId}-menu` : undefined}
         ariaExpanded={isOpen ? "true" : undefined}
         ariaHasPopup="true"
@@ -174,6 +215,7 @@ const MenuButton = ({
         id={`${uniqueId}-button`}
         isDisabled={isDisabled}
         label={buttonLabel}
+        children={buttonChildren}
         onClick={openMenu}
         size={size}
         tooltipText={tooltipText}
@@ -181,24 +223,44 @@ const MenuButton = ({
         variant={buttonVariant}
       />
 
-      <MuiMenu
-        anchorOrigin={anchorOrigin}
-        transformOrigin={transformOrigin}
-        anchorEl={anchorEl}
-        id={`${uniqueId}-menu`}
-        MenuListProps={menuListProps}
-        onClose={closeMenu}
-        open={isOpen}
-      >
-        <MenuContext.Provider value={providerValue}>
-          {children}
-        </MenuContext.Provider>
-      </MuiMenu>
+      {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>
+      )}
     </div>
   );
 };
 
-const MemoizedMenuButton = memo(MenuButton);
-MemoizedMenuButton.displayName = "MenuButton";
+const MemoizedBaseMenuButton = memo(BaseMenuButton);
+MemoizedBaseMenuButton.displayName = "BaseMenuButton";
 
-export { MemoizedMenuButton as MenuButton };
+export { MemoizedBaseMenuButton as BaseMenuButton };

package/src/Buttons/Button.tsx

@@ -0,0 +1,30 @@
+/*!
+ * 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";
+
+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

@@ -0,0 +1,35 @@
+/*!
+ * 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";
+
+export const menuAlignmentValues = ["left", "right"] as const;
+
+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/{MenuItem.tsx → Buttons/MenuItem.tsx}

@@ -18,7 +18,7 @@ import { menuItemClasses } from "@mui/material/MenuItem";
 import { memo, useCallback, useContext, type ReactNode } from "react";
 
 import { MenuContext } from "./MenuContext";
-import type { HtmlProps } from "./HtmlProps";
+import type { HtmlProps } from "../HtmlProps";
 
 export type MenuItemProps = {
   /**
@@ -77,6 +77,7 @@ const MenuItem = ({
 
   return (
     <MuiMenuItem
+      aria-current={isSelected}
       /* eslint-disable-next-line jsx-a11y/no-autofocus */
       autoFocus={hasInitialFocus}
       className={

package/src/Buttons/index.ts

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2024-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.
+ */
+
+export {
+  buttonSizeValues,
+  buttonTypeValues,
+  buttonVariantValues,
+} from "./BaseButton";
+export * from "./Button";
+export * from "./ButtonContext";
+export { menuAlignmentValues } from "./BaseMenuButton";
+export * from "./MenuButton";
+export * from "./MenuItem";

package/src/Card.tsx

@@ -24,10 +24,8 @@ import {
 } from "@mui/material";
 import styled from "@emotion/styled";
 
-import { Button } from "./Button";
-import { ButtonContext } from "./ButtonContext";
+import { Button, ButtonContext, MenuButton, MenuButtonProps } from "./Buttons";
 import { MoreIcon } from "./icons.generated";
-import { MenuButton, MenuButtonProps } from "./MenuButton";
 import {
   DesignTokens,
   useOdysseyDesignTokens,