@okta/odyssey-react-mui 1.27.1 → 1.28.1

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.28.0](https://github.com/okta/odyssey/compare/v1.27.1...v1.28.0) (2024-11-25)
+
+### Features
+
+- adds app switcher lab component ([#2416](https://github.com/okta/odyssey/issues/2416)) ([1b48073](https://github.com/okta/odyssey/commit/1b480738d1c91823f496aa0ff41d678edb76f655))
+- better first-render options for UiShell ([#2422](https://github.com/okta/odyssey/issues/2422)) ([c49b233](https://github.com/okta/odyssey/commit/c49b23360dafa1fdcaab696f1c6bd8fdae63891e))
+- new popoverContent feature for MenuButton, plus UserProfileMenuButton ([#2414](https://github.com/okta/odyssey/issues/2414)) ([5647ec9](https://github.com/okta/odyssey/commit/5647ec91826662195ed09eb81e0d05d3ce6057a1))
+
+### Bug Fixes
+
+- bug in SideNav when sideNavItems comes delayed ([#2419](https://github.com/okta/odyssey/issues/2419)) ([bce2083](https://github.com/okta/odyssey/commit/bce20836db6763b013178a9c4d8784cec6eb5e93))
+- the UiShell should not have gray background or padding in app area ([#2428](https://github.com/okta/odyssey/issues/2428)) ([973e0f5](https://github.com/okta/odyssey/commit/973e0f53c64fc7f21c03f2776871b26338a0676c))
+
 ## [1.27.1](https://github.com/okta/odyssey/compare/v1.27.0...v1.27.1) (2024-11-18)
 
 ### Bug Fixes

package/dist/{Button.js → Buttons/BaseButton.js}

@@ -11,14 +11,14 @@ import _Button from "@mui/material/Button";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
-import { useButton } from "./ButtonContext.js";
-import { MuiPropsContext, useMuiProps } from "./MuiPropsContext.js";
-import { Tooltip } from "./Tooltip.js";
+import { useButton } from "../Buttons/index.js";
+import { MuiPropsContext, useMuiProps } from "../MuiPropsContext.js";
+import { Tooltip } from "../Tooltip.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const buttonSizeValues = ["small", "medium", "large"];
 export const buttonTypeValues = ["button", "submit", "reset"];
 export const buttonVariantValues = ["primary", "secondary", "danger", "dangerSecondary", "floating", "floatingAction"];
-const Button = ({
+const BaseButton = ({
   ariaControls,
   ariaDescribedBy,
   ariaExpanded,
@@ -32,6 +32,7 @@ const Button = ({
   isDisabled,
   isFullWidth: isFullWidthProp,
   label = "",
+  children,
   onClick,
   size = "medium",
   startIcon,
@@ -80,9 +81,9 @@ const Button = ({
       translate: translate,
       type: type,
       variant: variant,
-      children: label
+      children: children ?? label
     });
-  }, [ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, endIcon, href, id, isDisabled, isFullWidth, label, onClick, size, startIcon, tabIndex, testId, translate, type, variant]);
+  }, [ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, endIcon, href, id, isDisabled, isFullWidth, label, children, onClick, size, startIcon, tabIndex, testId, translate, type, variant]);
   if (tooltipText) {
     return _jsx(Tooltip, {
       ariaType: "description",
@@ -95,7 +96,7 @@ const Button = ({
   }
   return renderButton(muiProps);
 };
-const MemoizedButton = memo(Button);
-MemoizedButton.displayName = "Button";
-export { MemoizedButton as Button };
-//# sourceMappingURL=Button.js.map
+const MemoizedBaseButton = memo(BaseButton);
+MemoizedBaseButton.displayName = "BaseButton";
+export { MemoizedBaseButton as BaseButton };
+//# sourceMappingURL=BaseButton.js.map

package/dist/Buttons/BaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","useButton","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","buttonSizeValues","buttonTypeValues","buttonVariantValues","BaseButton","ariaControls","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaLabel","ariaLabelledBy","buttonRef","endIcon","href","id","isDisabled","isFullWidth","isFullWidthProp","label","children","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","variantProp","muiProps","localButtonRef","buttonContext","focus","current","renderButton","_Button","disabled","fullWidth","ref","element","ariaType","placement","text","Consumer","MemoizedBaseButton","displayName"],"sources":["../../src/Buttons/BaseButton.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useButton } from \"../Buttons\";\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { FocusHandle } from \"../inputUtils\";\nimport {\n  MuiPropsContext,\n  MuiPropsContextType,\n  useMuiProps,\n} from \"../MuiPropsContext\";\nimport { Tooltip } from \"../Tooltip\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"danger\",\n  \"dangerSecondary\",\n  \"floating\",\n  \"floatingAction\",\n] as const;\n\nexport type BaseButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * Optional href to render the button as a link\n   */\n  href?: string;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number] | \"tertiary\";\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The contents of the button. Only available internal to Odyssey here in BaseButton. If set, label is ignored.\n   */\n  children?: ReactNode;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n};\n\n// These are split and exported separately from the above because wrappers of this (e.g. Button) will\n// want to omit children, which they cannot do from the combined union type. Instead, they should\n// omit from BaseButtonProps, then union with the AdditionalBaseButtonProps (as seen in Button)\nexport type AdditionalBaseButtonProps = Pick<\n  HtmlProps,\n  | \"ariaControls\"\n  | \"ariaDescribedBy\"\n  | \"ariaExpanded\"\n  | \"ariaHasPopup\"\n  | \"ariaLabel\"\n  | \"ariaLabelledBy\"\n  | \"tabIndex\"\n  | \"testId\"\n  | \"translate\"\n>;\n\nconst BaseButton = ({\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaHasPopup,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  href,\n  id,\n  isDisabled,\n  isFullWidth: isFullWidthProp,\n  label = \"\",\n  children,\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant: variantProp,\n}: BaseButtonProps & AdditionalBaseButtonProps) => {\n  const muiProps = useMuiProps();\n\n  // We're deprecating the \"tertiary\" variant, so map it to\n  // \"secondary\" in lieu of making a breaking change\n  const variant = variantProp === \"tertiary\" ? \"secondary\" : variantProp;\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n  const buttonContext = useButton();\n  const isFullWidth = useMemo(\n    () =>\n      buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,\n    [buttonContext, isFullWidthProp],\n  );\n\n  useImperativeHandle(\n    buttonRef,\n    () => ({\n      focus: () => {\n        localButtonRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={ariaExpanded}\n          aria-haspopup={ariaHasPopup}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={isFullWidth}\n          href={href}\n          id={id}\n          onClick={onClick}\n          ref={(element) => {\n            if (element) {\n              (\n                localButtonRef as React.MutableRefObject<\n                  HTMLButtonElement | HTMLAnchorElement\n                >\n              ).current = element;\n              //@ts-expect-error ref is not an optional prop on the props context type\n              muiProps?.ref?.(element);\n            }\n          }}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {children ?? label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaControls,\n      ariaDescribedBy,\n      ariaExpanded,\n      ariaHasPopup,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      href,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      children,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ],\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedBaseButton = memo(BaseButton);\nMemoizedBaseButton.displayName = \"BaseButton\";\n\nexport { MemoizedBaseButton as BaseButton };\n"],"mappings":"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"}

package/dist/{MenuButton.js → Buttons/BaseMenuButton.js}

@@ -1,3 +1,4 @@
+import _Popover from "@mui/material/Popover";
 import _Menu from "@mui/material/Menu";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
@@ -12,30 +13,36 @@ import _Menu from "@mui/material/Menu";
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Button, useUniqueId } from "./index.js";
-import { ChevronDownIcon, MoreIcon } from "./icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Box, useUniqueId } from "../index.js";
+import { BaseButton } from "./BaseButton.js";
+import { ChevronDownIcon, MoreIcon } from "../icons.generated/index.js";
 import { MenuContext } from "./MenuContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const menuAlignmentValues = ["left", "right"];
-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
 }) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const [anchorEl, setAnchorEl] = useState(null);
   const isOpen = Boolean(anchorEl);
   const closeMenu = useCallback(() => {
@@ -53,7 +60,7 @@ const MenuButton = ({
     openMenu,
     shouldCloseOnSelect
   }), [closeMenu, openMenu, shouldCloseOnSelect]);
-  const endIcon = endIconProp ? endIconProp : isOverflow ? _jsx(MoreIcon, {}) : _jsx(ChevronDownIcon, {});
+  const endIcon = omitEndIcon ? undefined : endIconProp ? endIconProp : isOverflow ? _jsx(MoreIcon, {}) : _jsx(ChevronDownIcon, {});
   const anchorOrigin = useMemo(() => ({
     horizontal: menuAlignment,
     vertical: "bottom"
@@ -63,7 +70,7 @@ const MenuButton = ({
     vertical: "top"
   }), [menuAlignment]);
   return _jsxs("div", {
-    children: [_jsx(Button, {
+    children: [_jsx(BaseButton, {
       ariaControls: isOpen ? `${uniqueId}-menu` : undefined,
       ariaExpanded: isOpen ? "true" : undefined,
       ariaHasPopup: "true",
@@ -75,12 +82,13 @@ const MenuButton = ({
       id: `${uniqueId}-button`,
       isDisabled: isDisabled,
       label: buttonLabel,
+      children: buttonChildren,
       onClick: openMenu,
       size: size,
       tooltipText: tooltipText,
       translate: translate,
       variant: buttonVariant
-    }), _jsx(_Menu, {
+    }), children && _jsx(_Menu, {
       anchorOrigin: anchorOrigin,
       transformOrigin: transformOrigin,
       anchorEl: anchorEl,
@@ -92,10 +100,22 @@ const MenuButton = ({
         value: providerValue,
         children: children
       })
+    }), popoverContent && _jsx(_Popover, {
+      open: isOpen,
+      anchorEl: anchorEl,
+      onClose: closeMenu,
+      anchorOrigin: anchorOrigin,
+      transformOrigin: transformOrigin,
+      children: _jsx(Box, {
+        sx: {
+          padding: odysseyDesignTokens.Spacing4
+        },
+        children: popoverContent
+      })
     })]
   });
 };
-const MemoizedMenuButton = memo(MenuButton);
-MemoizedMenuButton.displayName = "MenuButton";
-export { MemoizedMenuButton as MenuButton };
-//# sourceMappingURL=MenuButton.js.map
+const MemoizedBaseMenuButton = memo(BaseMenuButton);
+MemoizedBaseMenuButton.displayName = "BaseMenuButton";
+export { MemoizedBaseMenuButton as BaseMenuButton };
+//# sourceMappingURL=BaseMenuButton.js.map

package/dist/Buttons/BaseMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseMenuButton.js","names":["memo","useCallback","useMemo","useState","useOdysseyDesignTokens","Box","useUniqueId","BaseButton","ChevronDownIcon","MoreIcon","MenuContext","jsx","_jsx","jsxs","_jsxs","menuAlignmentValues","BaseMenuButton","ariaLabel","ariaLabelledBy","ariaDescribedBy","buttonChildren","buttonLabel","buttonVariant","children","popoverContent","shouldCloseOnSelect","endIcon","endIconProp","id","idOverride","isDisabled","isOverflow","menuAlignment","omitEndIcon","size","testId","tooltipText","translate","odysseyDesignTokens","anchorEl","setAnchorEl","isOpen","Boolean","closeMenu","openMenu","event","currentTarget","uniqueId","menuListProps","providerValue","undefined","anchorOrigin","horizontal","vertical","transformOrigin","ariaControls","ariaExpanded","ariaHasPopup","label","onClick","variant","_Menu","MenuListProps","onClose","open","Provider","value","_Popover","sx","padding","Spacing4","MemoizedBaseMenuButton","displayName"],"sources":["../../src/Buttons/BaseMenuButton.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 {\n  memo,\n  type ReactElement,\n  useCallback,\n  useMemo,\n  useState,\n  ReactNode,\n} from \"react\";\nimport {\n  Menu as MuiMenu,\n  Popover as MuiPopover,\n  PopoverOrigin,\n} from \"@mui/material\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\nimport { Box, buttonSizeValues, buttonVariantValues, useUniqueId } from \"..\";\nimport { BaseButton } from \"./BaseButton\";\nimport { ChevronDownIcon, MoreIcon } from \"../icons.generated\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { MenuContext, MenuContextType } from \"./MenuContext\";\nimport { NullElement } from \"../NullElement\";\nimport type { HtmlProps } from \"../HtmlProps\";\n\nexport const menuAlignmentValues = [\"left\", \"right\"] as const;\n\nexport type BaseMenuButtonProps = {\n  /**\n   * The button children for the triggering Button. Only available internal to Odyssey here in BaseMenuButton. If set, buttonLabel is ignored.\n   */\n  buttonChildren?: ReactNode;\n  /**\n   * The label on the triggering Button\n   */\n  buttonLabel?: string;\n  /**\n   * The variant of the triggering Button\n   */\n  buttonVariant?: (typeof buttonVariantValues)[number];\n  /**\n   * The end Icon on the trigggering Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * Whether to omit the endIcon if not set (rather than use a default value for it based on overflow)\n   */\n  omitEndIcon?: boolean;\n  /**\n   * The id of the Button\n   */\n  id?: string;\n  /**\n   * If the MenuButton is an overflow menu or standard menu.\n   */\n  isOverflow?: boolean;\n  /**\n   * The horizontal alignment of the menu.\n   */\n  menuAlignment?: (typeof menuAlignmentValues)[number];\n  /**\n   * If true (the default), the menu will close when a child MenuItem is clicked.\n   * Otherwise, it will remain open.\n   */\n  shouldCloseOnSelect?: boolean;\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n};\n\n// These are split and exported separately from the above because wrappers of this (e.g. MenuButton) will\n// want to omit buttonChildren, which they cannot do from the combined union type. Instead, they should\n// omit from BaseMenuButtonProps, then union with the AdditionalBaseMenuButtonProps (as seen in MenuButton)\nexport type AdditionalBaseMenuButtonProps = Pick<\n  HtmlProps,\n  \"ariaDescribedBy\" | \"ariaLabel\" | \"ariaLabelledBy\" | \"testId\" | \"translate\"\n> &\n  Pick<FieldComponentProps, \"isDisabled\"> &\n  (\n    | { buttonLabel: string }\n    | (Required<Pick<HtmlProps, \"ariaLabelledBy\">> &\n        Partial<Pick<HtmlProps, \"ariaLabel\">> & {\n          buttonLabel?: undefined | \"\";\n        })\n    | (Required<Pick<HtmlProps, \"ariaLabel\">> &\n        Partial<Pick<HtmlProps, \"ariaLabelledBy\">> & {\n          buttonLabel?: undefined | \"\";\n        })\n  ) &\n  (\n    | {\n        /**\n         * The <MenuItem> components within the Menu.\n         */\n        children: ReactNode | NullElement;\n        /**\n         * popoverConten is disallowed if children are present\n         */\n        popoverContent?: never;\n      }\n    | {\n        /**\n         * children is disallowed if popoverContent is present\n         */\n        children?: never;\n        /**\n         * The content for the popover that is triggered on click.\n         */\n        popoverContent: ReactNode | NullElement;\n      }\n  );\n\nconst BaseMenuButton = ({\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  buttonChildren,\n  buttonLabel = \"\",\n  buttonVariant = \"secondary\",\n  children,\n  popoverContent,\n  shouldCloseOnSelect = true,\n  endIcon: endIconProp,\n  id: idOverride,\n  isDisabled,\n  isOverflow,\n  menuAlignment = \"left\",\n  omitEndIcon = false,\n  size,\n  testId,\n  tooltipText,\n  translate,\n}: BaseMenuButtonProps & AdditionalBaseMenuButtonProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const isOpen = Boolean(anchorEl);\n\n  const closeMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  const openMenu = useCallback<MenuContextType[\"openMenu\"]>((event) => {\n    setAnchorEl(event.currentTarget);\n  }, []);\n\n  const uniqueId = useUniqueId(idOverride);\n\n  const menuListProps = useMemo(\n    () => ({ \"aria-labelledby\": `${uniqueId}-button` }),\n    [uniqueId],\n  );\n\n  const providerValue = useMemo<MenuContextType>(\n    () => ({\n      closeMenu,\n      openMenu,\n      shouldCloseOnSelect,\n    }),\n    [closeMenu, openMenu, shouldCloseOnSelect],\n  );\n\n  const endIcon = omitEndIcon ? undefined : endIconProp ? (\n    endIconProp\n  ) : isOverflow ? (\n    <MoreIcon />\n  ) : (\n    <ChevronDownIcon />\n  );\n\n  const anchorOrigin = useMemo(\n    () =>\n      ({\n        horizontal: menuAlignment,\n        vertical: \"bottom\",\n      }) as PopoverOrigin,\n    [menuAlignment],\n  );\n\n  const transformOrigin = useMemo(\n    () =>\n      ({\n        horizontal: menuAlignment,\n        vertical: \"top\",\n      }) as PopoverOrigin,\n    [menuAlignment],\n  );\n\n  return (\n    <div>\n      <BaseButton\n        ariaControls={isOpen ? `${uniqueId}-menu` : undefined}\n        ariaExpanded={isOpen ? \"true\" : undefined}\n        ariaHasPopup=\"true\"\n        ariaDescribedBy={ariaDescribedBy}\n        ariaLabel={ariaLabel}\n        ariaLabelledBy={ariaLabelledBy}\n        testId={testId}\n        endIcon={endIcon}\n        id={`${uniqueId}-button`}\n        isDisabled={isDisabled}\n        label={buttonLabel}\n        children={buttonChildren}\n        onClick={openMenu}\n        size={size}\n        tooltipText={tooltipText}\n        translate={translate}\n        variant={buttonVariant}\n      />\n\n      {children && (\n        <MuiMenu\n          anchorOrigin={anchorOrigin}\n          transformOrigin={transformOrigin}\n          anchorEl={anchorEl}\n          id={`${uniqueId}-menu`}\n          MenuListProps={menuListProps}\n          onClose={closeMenu}\n          open={isOpen}\n        >\n          <MenuContext.Provider value={providerValue}>\n            {children}\n          </MenuContext.Provider>\n        </MuiMenu>\n      )}\n\n      {popoverContent && (\n        <MuiPopover\n          open={isOpen}\n          anchorEl={anchorEl}\n          onClose={closeMenu}\n          anchorOrigin={anchorOrigin}\n          transformOrigin={transformOrigin}\n        >\n          <Box\n            sx={{\n              padding: odysseyDesignTokens.Spacing4,\n            }}\n          >\n            {popoverContent}\n          </Box>\n        </MuiPopover>\n      )}\n    </div>\n  );\n};\n\nconst MemoizedBaseMenuButton = memo(BaseMenuButton);\nMemoizedBaseMenuButton.displayName = \"BaseMenuButton\";\n\nexport { MemoizedBaseMenuButton as BaseMenuButton };\n"],"mappings":"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"}

package/dist/Buttons/Button.js

@@ -0,0 +1,24 @@
+/*!
+ * 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 { BaseButton } from "./BaseButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Button = props => {
+  return _jsx(BaseButton, {
+    ...props
+  });
+};
+const MemoizedButton = memo(Button);
+MemoizedButton.displayName = "Button";
+export { MemoizedButton as Button };
+//# sourceMappingURL=Button.js.map

package/dist/Buttons/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["memo","BaseButton","jsx","_jsx","Button","props","MemoizedButton","displayName"],"sources":["../../src/Buttons/Button.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 { memo } from \"react\";\nimport {\n  AdditionalBaseButtonProps,\n  BaseButton,\n  BaseButtonProps,\n} from \"./BaseButton\";\n\nexport type ButtonProps = Omit<BaseButtonProps, \"children\"> &\n  AdditionalBaseButtonProps;\n\nconst Button = (props: ButtonProps) => {\n  return <BaseButton {...props} />;\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAG3BC,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAOZ,MAAMC,MAAM,GAAIC,KAAkB,IAAK;EACrC,OAAOF,IAAA,CAACF,UAAU;IAAA,GAAKI;EAAK,CAAG,CAAC;AAClC,CAAC;AAED,MAAMC,cAAc,GAAGN,IAAI,CAACI,MAAM,CAAC;AACnCE,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIF,MAAM"}

package/dist/Buttons/ButtonContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonContext.js","names":["createContext","useContext","ButtonContext","isFullWidth","useButton"],"sources":["../../src/Buttons/ButtonContext.tsx"],"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 { createContext, useContext } from \"react\";\n\nexport type ButtonContextValue = {\n  isFullWidth: boolean;\n};\n\nexport const ButtonContext = createContext<ButtonContextValue>({\n  isFullWidth: false,\n});\n\nexport const useButton = () => useContext(ButtonContext);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAMjD,OAAO,MAAMC,aAAa,GAAGF,aAAa,CAAqB;EAC7DG,WAAW,EAAE;AACf,CAAC,CAAC;AAEF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAMH,UAAU,CAACC,aAAa,CAAC"}

package/dist/Buttons/MenuButton.js

@@ -0,0 +1,25 @@
+/*!
+ * 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 { BaseMenuButton } from "./BaseMenuButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const menuAlignmentValues = ["left", "right"];
+const MenuButton = props => {
+  return _jsx(BaseMenuButton, {
+    ...props
+  });
+};
+const MemoizedMenuButton = memo(MenuButton);
+MemoizedMenuButton.displayName = "MenuButton";
+export { MemoizedMenuButton as MenuButton };
+//# sourceMappingURL=MenuButton.js.map

package/dist/Buttons/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","names":["memo","BaseMenuButton","jsx","_jsx","menuAlignmentValues","MenuButton","props","MemoizedMenuButton","displayName"],"sources":["../../src/Buttons/MenuButton.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 { memo } from \"react\";\nimport {\n  AdditionalBaseMenuButtonProps,\n  BaseMenuButton,\n  BaseMenuButtonProps,\n} from \"./BaseMenuButton\";\n\nexport const menuAlignmentValues = [\"left\", \"right\"] as const;\n\nexport type MenuButtonProps = Omit<\n  BaseMenuButtonProps,\n  \"buttonChildren\" | \"omitEndIcon\"\n> &\n  AdditionalBaseMenuButtonProps;\n\nconst MenuButton = (props: MenuButtonProps) => {\n  return <BaseMenuButton {...props} />;\n};\n\nconst MemoizedMenuButton = memo(MenuButton);\nMemoizedMenuButton.displayName = \"MenuButton\";\n\nexport { MemoizedMenuButton as MenuButton };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAG3BC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIhB,OAAO,MAAMC,mBAAmB,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU;AAQ7D,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EAC7C,OAAOH,IAAA,CAACF,cAAc;IAAA,GAAKK;EAAK,CAAG,CAAC;AACtC,CAAC;AAED,MAAMC,kBAAkB,GAAGP,IAAI,CAACK,UAAU,CAAC;AAC3CE,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIF,UAAU"}

package/dist/Buttons/MenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContext.js","names":["createContext","MenuContext","closeMenu","openMenu","shouldCloseOnSelect"],"sources":["../../src/Buttons/MenuContext.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 { MouseEventHandler, createContext } from \"react\";\n\nexport type MenuContextType = {\n  closeMenu: () => void;\n  openMenu: MouseEventHandler<HTMLElement>;\n  shouldCloseOnSelect: boolean;\n};\n\nexport const MenuContext = createContext<MenuContextType>({\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  closeMenu: () => {},\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  openMenu: () => {},\n  shouldCloseOnSelect: true,\n});\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAA4BA,aAAa,QAAQ,OAAO;AAQxD,OAAO,MAAMC,WAAW,GAAGD,aAAa,CAAkB;EAExDE,SAAS,EAAEA,CAAA,KAAM,CAAC,CAAC;EAEnBC,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAC;EAClBC,mBAAmB,EAAE;AACvB,CAAC,CAAC"}

package/dist/Buttons/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","names":["menuItemClasses","memo","useCallback","useContext","MenuContext","jsx","_jsx","MenuItem","children","hasInitialFocus","isSelected","isDisabled","onClick","onClickProp","testId","value","variant","closeMenu","shouldCloseOnSelect","event","_MenuItem","autoFocus","className","root","undefined","disabled","selected","tabIndex","MemoizedMenuItem","displayName"],"sources":["../../src/Buttons/MenuItem.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 {\n  MenuItem as MuiMenuItem,\n  MenuItemProps as MuiMenuItemProps,\n} from \"@mui/material\";\nimport { menuItemClasses } from \"@mui/material/MenuItem\";\nimport { memo, useCallback, useContext, type ReactNode } from \"react\";\n\nimport { MenuContext } from \"./MenuContext\";\nimport type { HtmlProps } from \"../HtmlProps\";\n\nexport type MenuItemProps = {\n  /**\n   * The content of the menu item.\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the menu item will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the menu item will be visually marked as selected.\n   */\n  isSelected?: boolean;\n  /**\n   * If `true`, the menu item will be visually marked as disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback fired when the menu item is clicked.\n   */\n  onClick?: MuiMenuItemProps[\"onClick\"];\n  /**\n   * The value associated with the menu item.\n   */\n  value?: string;\n  /**\n   * The variant of the menu item.\n   * - \"default\": The default variant.\n   * - \"destructive\": A variant indicating a destructive action.\n   */\n  variant?: \"default\" | \"destructive\";\n} & Pick<HtmlProps, \"testId\">;\n\nconst MenuItem = ({\n  children,\n  hasInitialFocus,\n  isSelected,\n  isDisabled,\n  onClick: onClickProp,\n  testId,\n  value,\n  variant = \"default\",\n}: MenuItemProps) => {\n  const { closeMenu, shouldCloseOnSelect } = useContext(MenuContext);\n\n  const onClick = useCallback<NonNullable<MuiMenuItemProps[\"onClick\"]>>(\n    (event) => {\n      onClickProp?.(event);\n      if (shouldCloseOnSelect) {\n        closeMenu();\n      }\n    },\n    [onClickProp, closeMenu, shouldCloseOnSelect],\n  );\n\n  return (\n    <MuiMenuItem\n      /* eslint-disable-next-line jsx-a11y/no-autofocus */\n      autoFocus={hasInitialFocus}\n      className={\n        variant === \"destructive\"\n          ? `${menuItemClasses.root}-destructive`\n          : undefined\n      }\n      data-se={testId}\n      disabled={isDisabled}\n      onClick={onClick}\n      selected={isSelected}\n      value={value}\n      tabIndex={0}\n    >\n      {children}\n    </MuiMenuItem>\n  );\n};\n\nconst MemoizedMenuItem = memo(MenuItem);\nMemoizedMenuItem.displayName = \"MenuItem\";\n\nexport { MemoizedMenuItem as MenuItem };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,eAAe,QAAQ,wBAAwB;AACxD,SAASC,IAAI,EAAEC,WAAW,EAAEC,UAAU,QAAwB,OAAO;AAAC,SAE7DC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoCpB,MAAMC,QAAQ,GAAGA,CAAC;EAChBC,QAAQ;EACRC,eAAe;EACfC,UAAU;EACVC,UAAU;EACVC,OAAO,EAAEC,WAAW;EACpBC,MAAM;EACNC,KAAK;EACLC,OAAO,GAAG;AACG,CAAC,KAAK;EACnB,MAAM;IAAEC,SAAS;IAAEC;EAAoB,CAAC,GAAGf,UAAU,CAACC,WAAW,CAAC;EAElE,MAAMQ,OAAO,GAAGV,WAAW,CACxBiB,KAAK,IAAK;IACTN,WAAW,GAAGM,KAAK,CAAC;IACpB,IAAID,mBAAmB,EAAE;MACvBD,SAAS,CAAC,CAAC;IACb;EACF,CAAC,EACD,CAACJ,WAAW,EAAEI,SAAS,EAAEC,mBAAmB,CAC9C,CAAC;EAED,OACEZ,IAAA,CAAAc,SAAA;IAEEC,SAAS,EAAEZ,eAAgB;IAC3Ba,SAAS,EACPN,OAAO,KAAK,aAAa,GACpB,GAAEhB,eAAe,CAACuB,IAAK,cAAa,GACrCC,SACL;IACD,WAASV,MAAO;IAChBW,QAAQ,EAAEd,UAAW;IACrBC,OAAO,EAAEA,OAAQ;IACjBc,QAAQ,EAAEhB,UAAW;IACrBK,KAAK,EAAEA,KAAM;IACbY,QAAQ,EAAE,CAAE;IAAAnB,QAAA,EAEXA;EAAQ,CACE,CAAC;AAElB,CAAC;AAED,MAAMoB,gBAAgB,GAAG3B,IAAI,CAACM,QAAQ,CAAC;AACvCqB,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAIrB,QAAQ"}

package/dist/Buttons/index.js

@@ -0,0 +1,18 @@
+/*!
+ * 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.js";
+export * from "./Button.js";
+export * from "./ButtonContext.js";
+export { menuAlignmentValues } from "./BaseMenuButton.js";
+export * from "./MenuButton.js";
+export * from "./MenuItem.js";
+//# sourceMappingURL=index.js.map

package/dist/Buttons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["buttonSizeValues","buttonTypeValues","buttonVariantValues","menuAlignmentValues"],"sources":["../../src/Buttons/index.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\nexport {\n  buttonSizeValues,\n  buttonTypeValues,\n  buttonVariantValues,\n} from \"./BaseButton\";\nexport * from \"./Button\";\nexport * from \"./ButtonContext\";\nexport { menuAlignmentValues } from \"./BaseMenuButton\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAaEA,gBAAgB,EAChBC,gBAAgB,EAChBC,mBAAmB;AAAA;AAAA;AAAA,SAIZC,mBAAmB;AAAA;AAAA"}

package/dist/Card.js

@@ -15,9 +15,8 @@ import _CardActions from "@mui/material/CardActions";
 
 import { memo, useMemo, useEffect } from "react";
 import styled from "@emotion/styled";
-import { ButtonContext } from "./ButtonContext.js";
+import { ButtonContext, MenuButton } from "./Buttons/index.js";
 import { MoreIcon } from "./icons.generated/index.js";
-import { MenuButton } from "./MenuButton.js";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { Heading5, Paragraph, Support } from "./Typography.js";
 import { Box } from "./Box.js";

package/dist/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["memo","useMemo","useEffect","styled","ButtonContext","MoreIcon","MenuButton","useOdysseyDesignTokens","Heading5","Paragraph","Support","Box","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_HEIGHT","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","hasMenuButtonChildren","display","alignItems","maxHeight","height","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","CardContentContainer","buttonProviderValue","isFullWidth","Card","button","description","image","menuButtonChildren","onClick","overline","title","cardContent","children","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedCard","displayName","Tile","props","console","warn","MemoizedTile"],"sources":["../src/Card.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 {\n  MouseEventHandler,\n  ReactElement,\n  memo,\n  useMemo,\n  useEffect,\n} from \"react\";\nimport {\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \"./Button\";\nimport { ButtonContext } from \"./ButtonContext\";\nimport { MoreIcon } from \"./icons.generated\";\nimport { MenuButton, MenuButtonProps } from \"./MenuButton\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Support } from \"./Typography\";\nimport { Box } from \"./Box\";\n\nexport const CARD_IMAGE_HEIGHT = \"64px\";\n\nexport type CardProps = {\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  title?: string;\n} & (\n  | {\n      onClick: MouseEventHandler;\n      button?: never;\n      menuButtonChildren?: never;\n    }\n  | {\n      onClick?: never;\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasMenuButtonChildren\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: CARD_IMAGE_HEIGHT,\n  height: CARD_IMAGE_HEIGHT,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardContentContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n}));\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst Card = ({\n  button,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: CardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const cardContent = useMemo(\n    () => (\n      <CardContentContainer>\n        <Box>\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n            >\n              {image}\n            </ImageContainer>\n          )}\n\n          {overline && <Support component=\"div\">{overline}</Support>}\n          {title && <Heading5 component=\"div\">{title}</Heading5>}\n          {description && (\n            <Paragraph color=\"textSecondary\">{description}</Paragraph>\n          )}\n\n          {button && (\n            <MuiCardActions>\n              <ButtonContext.Provider value={buttonProviderValue}>\n                {button}\n              </ButtonContext.Provider>\n            </MuiCardActions>\n          )}\n        </Box>\n      </CardContentContainer>\n    ),\n    [\n      button,\n      description,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      odysseyDesignTokens,\n    ],\n  );\n\n  return (\n    <MuiCard className={onClick ? \"isClickable\" : \"\"}>\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel=\"Card menu\"\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText=\"Actions\"\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedCard = memo(Card);\nMemoizedCard.displayName = \"Card\";\n\n/**\n * @deprecated The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\n */\nconst Tile = (props: CardProps) => {\n  useEffect(() => {\n    console.warn(\n      \"Warning: The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\",\n    );\n  }, []);\n\n  return <MemoizedCard {...props} />;\n};\n\nconst MemoizedTile = memo(Tile);\nMemoizedTile.displayName = \"Tile\";\n\nexport { MemoizedCard as Card, MemoizedTile as Tile };\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["memo","useMemo","useEffect","styled","ButtonContext","MenuButton","MoreIcon","useOdysseyDesignTokens","Heading5","Paragraph","Support","Box","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_HEIGHT","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","hasMenuButtonChildren","display","alignItems","maxHeight","height","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","CardContentContainer","buttonProviderValue","isFullWidth","Card","button","description","image","menuButtonChildren","onClick","overline","title","cardContent","children","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","endIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedCard","displayName","Tile","props","console","warn","MemoizedTile"],"sources":["../src/Card.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 {\n  MouseEventHandler,\n  ReactElement,\n  memo,\n  useMemo,\n  useEffect,\n} from \"react\";\nimport {\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { Button, ButtonContext, MenuButton, MenuButtonProps } from \"./Buttons\";\nimport { MoreIcon } from \"./icons.generated\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Support } from \"./Typography\";\nimport { Box } from \"./Box\";\n\nexport const CARD_IMAGE_HEIGHT = \"64px\";\n\nexport type CardProps = {\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  title?: string;\n} & (\n  | {\n      onClick: MouseEventHandler;\n      button?: never;\n      menuButtonChildren?: never;\n    }\n  | {\n      onClick?: never;\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasMenuButtonChildren\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: CARD_IMAGE_HEIGHT,\n  height: CARD_IMAGE_HEIGHT,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardContentContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n}));\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst Card = ({\n  button,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: CardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const cardContent = useMemo(\n    () => (\n      <CardContentContainer>\n        <Box>\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n            >\n              {image}\n            </ImageContainer>\n          )}\n\n          {overline && <Support component=\"div\">{overline}</Support>}\n          {title && <Heading5 component=\"div\">{title}</Heading5>}\n          {description && (\n            <Paragraph color=\"textSecondary\">{description}</Paragraph>\n          )}\n\n          {button && (\n            <MuiCardActions>\n              <ButtonContext.Provider value={buttonProviderValue}>\n                {button}\n              </ButtonContext.Provider>\n            </MuiCardActions>\n          )}\n        </Box>\n      </CardContentContainer>\n    ),\n    [\n      button,\n      description,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      odysseyDesignTokens,\n    ],\n  );\n\n  return (\n    <MuiCard className={onClick ? \"isClickable\" : \"\"}>\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel=\"Card menu\"\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText=\"Actions\"\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedCard = memo(Card);\nMemoizedCard.displayName = \"Card\";\n\n/**\n * @deprecated The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\n */\nconst Tile = (props: CardProps) => {\n  useEffect(() => {\n    console.warn(\n      \"Warning: The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\",\n    );\n  }, []);\n\n  return <MemoizedCard {...props} />;\n};\n\nconst MemoizedTile = memo(Tile);\nMemoizedTile.displayName = \"Tile\";\n\nexport { MemoizedCard as Card, MemoizedTile as Tile };\n"],"mappings":"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"}

package/dist/DataTable/DataTable.js

@@ -20,13 +20,12 @@ import { DataFilters } from "../labs/DataFilters.js";
 import { DataTableRowActions } from "./DataTableRowActions.js";
 import { useRowReordering } from "./useRowReordering.js";
 import { DataTableSettings } from "./DataTableSettings.js";
-import { MenuButton } from "../MenuButton.js";
 import { Box } from "../Box.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { useScrollIndication } from "./useScrollIndication.js";
 import styled from "@emotion/styled";
 import { EmptyState } from "../EmptyState.js";
-import { Button } from "../Button.js";
+import { Button, MenuButton } from "../Buttons/index.js";
 import { Callout } from "../Callout.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";