@okta/odyssey-react-mui 1.27.0 → 1.28.1

package/dist/web-component/renderReactInWebComponent.js

@@ -8,10 +8,7 @@
  * 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 { createRoot } from "react-dom/client";
-export const createReactRootElements = () => {
+ */export const createReactRootElements = () => {
   const appRootElement = document.createElement("div");
   const stylesRootElement = document.createElement("div");
   appRootElement.style.setProperty("height", "inherit");
@@ -43,13 +40,15 @@ export class ReactInWebComponentElement extends HTMLElement {
     this.reactRootElements.stylesRootElement.appendChild(styleElement);
     shadowRoot.appendChild(this.reactRootElements.stylesRootElement);
     shadowRoot.appendChild(this.reactRootElements.appRootElement);
-    this.reactRoot = createRoot(this.reactRootElements.appRootElement);
+    this.reactRootPromise = import("react-dom/client").then(({
+      createRoot
+    }) => createRoot(this.reactRootElements.appRootElement));
   }
   connectedCallback() {
-    this.reactRoot.render(this.getReactComponent(this.reactRootElements));
+    this.reactRootPromise.then(reactRoot => reactRoot.render(this.getReactComponent(this.reactRootElements)));
   }
   disconnectedCallback() {
-    this.reactRoot.unmount();
+    this.reactRootPromise.then(reactRoot => reactRoot.unmount());
   }
 }
 if (!customElements.get(reactWebComponentElementName)) {

package/dist/web-component/renderReactInWebComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderReactInWebComponent.js","names":["createRoot","createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce","reactWebComponentElementName","ReactInWebComponentElement","HTMLElement","constructor","getReactComponent","reactRootElements","styleElement","shadowRoot","attachShadow","mode","innerHTML","appendChild","reactRoot","connectedCallback","render","disconnectedCallback","unmount","customElements","get","define","renderReactInWebComponent","webComponentChildren","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type ReactNode } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\n\n/**\n * Creates elements for a Shadow DOM that Odyssey will render into.\n * The Emotion root is for `<style>` tags and the app root is for an app to render into.\n * These are bare elements that\n */\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", \"app-root\");\n  stylesRootElement.setAttribute(\"id\", \"style-root\");\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    /**\n     * The element your React root component renders into.\n     * React has to render or portal somewhere, and this element can be used for that root element.\n     *\n     * In the case of a web component, there is no defined root element, so you have to define it yourself.\n     */\n    appRootElement,\n    /**\n     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n     *\n     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n     */\n    stylesRootElement,\n  };\n};\n\nexport type ReactRootElements = ReturnType<typeof createReactRootElements>;\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nexport class ReactInWebComponentElement extends HTMLElement {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRoot: Root;\n  reactRootElements: ReactRootElements;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    this.reactRoot = createRoot(this.reactRootElements.appRootElement);\n  }\n\n  connectedCallback() {\n    this.reactRoot.render(this.getReactComponent(this.reactRootElements));\n  }\n\n  disconnectedCallback() {\n    this.reactRoot.unmount();\n  }\n}\n\nif (!customElements.get(reactWebComponentElementName)) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n  /**\n   * You React app renders in the web component, but the web component needs to be rendered in the document.\n   *\n   * This is the element the web component is rendered into.\n   */\n  webComponentRootElement: HTMLElement;\n};\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  webComponentRootElement.appendChild(reactElement);\n\n  return reactElement;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,UAAU,QAAmB,kBAAkB;AAOxD,OAAO,MAAMC,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACpD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGvDF,cAAc,CAACI,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAErDL,cAAc,CAACM,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;EAC7CH,iBAAiB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAClDH,iBAAiB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAExD,OAAO;IAOLR,cAAc;IAMdG;EACF,CAAC;AACH,CAAC;AAID,OAAO,MAAMM,4BAA4B,GAAG,6BAA6B;AAMzE,OAAO,MAAMC,0BAA0B,SAASC,WAAW,CAAC;EAK1DC,WAAWA,CAACC,iBAAkD,EAAE;IAC9D,KAAK,CAAC,CAAC;IAEP,IAAI,CAACA,iBAAiB,GAAGA,iBAAiB;IAC1C,IAAI,CAACC,iBAAiB,GAAGf,uBAAuB,CAAC,CAAC;IAElD,MAAMgB,YAAY,GAAGd,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;IACpD,MAAMc,UAAU,GAAG,IAAI,CAACC,YAAY,CAAC;MAAEC,IAAI,EAAE;IAAO,CAAC,CAAC;IAEtDH,YAAY,CAACI,SAAS,GAAI;AAC9B;AACA;AACA;AACA;AACA,KAAK;IAEDJ,YAAY,CAACT,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;IAEnD,IAAI,CAACM,iBAAiB,CAACX,iBAAiB,CAACiB,WAAW,CAACL,YAAY,CAAC;IAClEC,UAAU,CAACI,WAAW,CAAC,IAAI,CAACN,iBAAiB,CAACX,iBAAiB,CAAC;IAChEa,UAAU,CAACI,WAAW,CAAC,IAAI,CAACN,iBAAiB,CAACd,cAAc,CAAC;IAE7D,IAAI,CAACqB,SAAS,GAAGvB,UAAU,CAAC,IAAI,CAACgB,iBAAiB,CAACd,cAAc,CAAC;EACpE;EAEAsB,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACD,SAAS,CAACE,MAAM,CAAC,IAAI,CAACV,iBAAiB,CAAC,IAAI,CAACC,iBAAiB,CAAC,CAAC;EACvE;EAEAU,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACH,SAAS,CAACI,OAAO,CAAC,CAAC;EAC1B;AACF;AAEA,IAAI,CAACC,cAAc,CAACC,GAAG,CAAClB,4BAA4B,CAAC,EAAE;EACrDiB,cAAc,CAACE,MAAM,CACnBnB,4BAA4B,EAC5BC,0BACF,CAAC;AACH;AAiCA,OAAO,MAAMmB,yBAAyB,GAAGA,CAAC;EACxChB,iBAAiB;EACjBiB,oBAAoB;EACpBC;AAC8B,CAAC,KAAK;EACpC,MAAMC,YAAY,GAAG,IAAItB,0BAA0B,CAACG,iBAAiB,CAAC;EAEtE,IAAIiB,oBAAoB,EAAE;IACxB,CAACG,KAAK,CAACC,OAAO,CAACJ,oBAAoB,CAAC,GAChCA,oBAAoB,GACpB,CAACA,oBAAoB,CAAC,EACxBK,OAAO,CAAEC,iBAAiB,IAAK;MAC/BJ,YAAY,CAACZ,WAAW,CAACgB,iBAAiB,CAAC;IAC7C,CAAC,CAAC;EACJ;EAEAL,uBAAuB,CAACX,WAAW,CAACY,YAAY,CAAC;EAEjD,OAAOA,YAAY;AACrB,CAAC"}
+{"version":3,"file":"renderReactInWebComponent.js","names":["createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce","reactWebComponentElementName","ReactInWebComponentElement","HTMLElement","constructor","getReactComponent","reactRootElements","styleElement","shadowRoot","attachShadow","mode","innerHTML","appendChild","reactRootPromise","then","createRoot","connectedCallback","reactRoot","render","disconnectedCallback","unmount","customElements","get","define","renderReactInWebComponent","webComponentChildren","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\n\n/**\n * Creates elements for a Shadow DOM that Odyssey will render into.\n * The Emotion root is for `<style>` tags and the app root is for an app to render into.\n * These are bare elements that\n */\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", \"app-root\");\n  stylesRootElement.setAttribute(\"id\", \"style-root\");\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    /**\n     * The element your React root component renders into.\n     * React has to render or portal somewhere, and this element can be used for that root element.\n     *\n     * In the case of a web component, there is no defined root element, so you have to define it yourself.\n     */\n    appRootElement,\n    /**\n     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n     *\n     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n     */\n    stylesRootElement,\n  };\n};\n\nexport type ReactRootElements = ReturnType<typeof createReactRootElements>;\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nexport class ReactInWebComponentElement extends HTMLElement {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRootElements: ReactRootElements;\n  reactRootPromise: Promise<Root>;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n    this.reactRootPromise = import(\"react-dom/client\").then(({ createRoot }) =>\n      createRoot(this.reactRootElements.appRootElement),\n    );\n  }\n\n  connectedCallback() {\n    this.reactRootPromise.then((reactRoot) =>\n      reactRoot.render(this.getReactComponent(this.reactRootElements)),\n    );\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());\n  }\n}\n\nif (!customElements.get(reactWebComponentElementName)) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n  /**\n   * You React app renders in the web component, but the web component needs to be rendered in the document.\n   *\n   * This is the element the web component is rendered into.\n   */\n  webComponentRootElement: HTMLElement;\n};\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  webComponentRootElement.appendChild(reactElement);\n\n  return reactElement;\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.27.0",
+  "version": "1.28.1",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -61,7 +61,7 @@
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^7.2.0",
-    "@okta/odyssey-design-tokens": "^1.27.0",
+    "@okta/odyssey-design-tokens": "^1.28.1",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
@@ -77,5 +77,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "929b26fa0b7821e97b67b218cbcfd23e75b3ea1e"
+  "gitHead": "114892c4072f9dc963e3dab57ee7fc6e3e9acfdd"
 }

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 = {
   /**

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,

package/src/DataTable/DataTable.tsx

@@ -51,7 +51,6 @@ import {
 } from "./DataTableRowActions";
 import { useRowReordering } from "./useRowReordering";
 import { DataTableSettings } from "./DataTableSettings";
-import { MenuButton, MenuButtonProps } from "../MenuButton";
 import { Box } from "../Box";
 import { DataTableRowSelectionState, DataTableRowData } from ".";
 import {
@@ -61,7 +60,7 @@ import {
 import { useScrollIndication } from "./useScrollIndication";
 import styled from "@emotion/styled";
 import { EmptyState } from "../EmptyState";
-import { Button } from "../Button";
+import { Button, MenuButton, MenuButtonProps } from "../Buttons";
 import { Callout } from "../Callout";
 
 export type DataTableColumn<T extends DataTableRowData> = MRT_ColumnDef<T> & {

package/src/DataTable/DataTableRowActions.tsx

@@ -12,10 +12,8 @@
 
 import { MRT_Row, MRT_RowData } from "material-react-table";
 import { Fragment, ReactElement, memo, useCallback } from "react";
-import { Button } from "../Button";
-import { MenuItem } from "../MenuItem";
+import { Button, MenuButton, MenuButtonProps, MenuItem } from "../Buttons";
 import { Box as MuiBox } from "@mui/material";
-import { MenuButton, MenuButtonProps } from "../MenuButton";
 import {
   ArrowBottomIcon,
   ArrowDownIcon,

package/src/DataTable/DataTableSettings.tsx

@@ -12,8 +12,7 @@
 
 import { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
 import { Checkbox as MuiCheckbox } from "@mui/material";
-import { MenuButton } from "../MenuButton";
-import { MenuItem } from "../MenuItem";
+import { MenuButton, MenuItem } from "../Buttons";
 import { ListIcon, ShowIcon } from "../icons.generated";
 import { densityValues } from "./constants";
 import { DataTableProps } from "./DataTable";

package/src/Dialog.tsx

@@ -18,7 +18,7 @@ import {
   DialogContentText,
   DialogActions,
 } from "@mui/material";
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { CloseIcon } from "./icons.generated";
 import {
   cloneElement,

package/src/Drawer.tsx

@@ -24,7 +24,7 @@ import { Drawer as MuiDrawer } from "@mui/material";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { CloseIcon } from "./icons.generated";
 import {
   DesignTokens,