@okta/odyssey-react-mui 1.6.19 → 1.6.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.6.19",
+  "version": "1.6.21",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,10 +51,10 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.6.19",
+    "@okta/odyssey-design-tokens": "1.6.21",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
-    "material-react-table": "^1.14.0",
+    "material-react-table": "^2.0.2",
     "react-i18next": "^12.2.2",
     "ts-node": "^10.9.1",
     "word-wrap": "~1.2.5"
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "8a5e1cf86a04424f2cba1d27ae94e41ed95e7968"
+  "gitHead": "861d33eb34adc8249600d31cb1d8a8edff728e06"
 }

package/src/Button.tsx

@@ -164,13 +164,13 @@ const Button = ({
 
   return (
     <>
-      {tooltipText && (
+      {tooltipText && !isDisabled && (
         <Tooltip ariaType="description" placement="top" text={tooltipText}>
           <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
         </Tooltip>
       )}
 
-      {!tooltipText && renderButton(muiProps)}
+      {(isDisabled || !tooltipText) && renderButton(muiProps)}
     </>
   );
 };

package/src/CssBaseline.tsx

@@ -10,6 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { CssBaseline as MuiCssBaseline } from "@mui/material";
+import {
+  CssBaseline as MuiCssBaseline,
+  CssBaselineProps as MuiCssBaselineProps,
+} from "@mui/material";
 
-export const CssBaseline = () => <MuiCssBaseline />;
+export const CssBaseline = (props: MuiCssBaselineProps) => (
+  <MuiCssBaseline {...props} />
+);

package/src/MenuButton.tsx

@@ -17,7 +17,12 @@ import {
   MenuItem,
   useUniqueId,
 } from "./";
-import { Divider, ListSubheader, Menu } from "@mui/material";
+import {
+  Divider,
+  ListSubheader,
+  Menu as MuiMenu,
+  PopoverOrigin,
+} from "@mui/material";
 import { ChevronDownIcon, MoreIcon } from "./icons.generated";
 import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
 
@@ -25,6 +30,8 @@ import { MenuContext, MenuContextType } from "./MenuContext";
 import { NullElement } from "./NullElement";
 import type { SeleniumProps } from "./SeleniumProps";
 
+export const menuAlignmentValues = ["left", "right"] as const;
+
 export type MenuButtonProps = {
   /**
    * The ARIA label for the Button
@@ -49,10 +56,13 @@ export type MenuButtonProps = {
   /**
    * The <MenuItem> components within the Menu.
    */
-  children: Array<
+  children:
     | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
-    | NullElement
-  >;
+    | Array<
+        | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
+        | NullElement
+      >
+    | NullElement;
   /**
    * The end Icon on the trigggering Button
    */
@@ -65,6 +75,15 @@ export type MenuButtonProps = {
    * If the MenuButton is an overflow menu or standard menu.
    */
   isOverflow?: boolean;
+  /**
+   * The horizontal alignment of the menu.
+   */
+  menuAlignment?: (typeof menuAlignmentValues)[number];
+  /**
+   * If true (the default), the menu will close when a child MenuItem is clicked.
+   * Otherwise, it will remain open.
+   */
+  shouldCloseOnSelect?: boolean;
   /**
    * The size of the button
    */
@@ -99,9 +118,11 @@ const MenuButton = ({
   buttonLabel = "",
   buttonVariant = "secondary",
   children,
+  shouldCloseOnSelect = true,
   endIcon: endIconProp,
   id: idOverride,
   isOverflow,
+  menuAlignment = "left",
   size,
   testId,
   tooltipText,
@@ -110,7 +131,7 @@ const MenuButton = ({
 
   const isOpen = Boolean(anchorEl);
 
-  const closeMenu = useCallback<MenuContextType["closeMenu"]>(() => {
+  const closeMenu = useCallback(() => {
     setAnchorEl(null);
   }, []);
 
@@ -129,8 +150,9 @@ const MenuButton = ({
     () => ({
       closeMenu,
       openMenu,
+      shouldCloseOnSelect,
     }),
-    [closeMenu, openMenu]
+    [closeMenu, openMenu, shouldCloseOnSelect]
   );
 
   const endIcon = endIconProp ? (
@@ -141,6 +163,24 @@ const MenuButton = ({
     <ChevronDownIcon />
   );
 
+  const anchorOrigin = useMemo(
+    () =>
+      ({
+        horizontal: menuAlignment,
+        vertical: "bottom",
+      } as PopoverOrigin),
+    [menuAlignment]
+  );
+
+  const transformOrigin = useMemo(
+    () =>
+      ({
+        horizontal: menuAlignment,
+        vertical: "top",
+      } as PopoverOrigin),
+    [menuAlignment]
+  );
+
   return (
     <div>
       <Button
@@ -160,7 +200,9 @@ const MenuButton = ({
         variant={buttonVariant}
       />
 
-      <Menu
+      <MuiMenu
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
         anchorEl={anchorEl}
         id={`${uniqueId}-menu`}
         MenuListProps={menuListProps}
@@ -170,7 +212,7 @@ const MenuButton = ({
         <MenuContext.Provider value={providerValue}>
           {children}
         </MenuContext.Provider>
-      </Menu>
+      </MuiMenu>
     </div>
   );
 };

package/src/MenuContext.ts

@@ -15,6 +15,7 @@ import { createContext, MouseEventHandler } from "react";
 export type MenuContextType = {
   closeMenu: () => void;
   openMenu: MouseEventHandler<HTMLElement>;
+  shouldCloseOnSelect: boolean;
 };
 
 export const MenuContext = createContext<MenuContextType>({
@@ -22,4 +23,5 @@ export const MenuContext = createContext<MenuContextType>({
   closeMenu: () => {},
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   openMenu: () => {},
+  shouldCloseOnSelect: true,
 });

package/src/MenuItem.tsx

@@ -63,14 +63,16 @@ const MenuItem = ({
   value,
   variant = "default",
 }: MenuItemProps) => {
-  const { closeMenu } = useContext(MenuContext);
+  const { closeMenu, shouldCloseOnSelect } = useContext(MenuContext);
 
   const onClick = useCallback<NonNullable<MuiMenuItemProps["onClick"]>>(
     (event) => {
       onClickProp?.(event);
-      closeMenu();
+      if (shouldCloseOnSelect) {
+        closeMenu();
+      }
     },
-    [onClickProp, closeMenu]
+    [onClickProp, closeMenu, shouldCloseOnSelect]
   );
 
   return (

package/src/SearchField.tsx

@@ -37,6 +37,14 @@ export type SearchFieldProps = {
    * If `true`, the component will receive focus automatically.
    */
   hasInitialFocus?: boolean;
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+  /**
+   * If `true`, the component is disabled.
+   */
+  isDisabled?: boolean;
   /**
    * This label won't show up visually, but it's required for accessibility.
    */

package/src/icons.generated/ArrowBottom.tsx

@@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+import { forwardRef } from "react";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
+
+export type ArrowBottomIconProps = SvgIconNoChildrenProps;
+
+export const ArrowBottomIcon = forwardRef<SVGSVGElement, ArrowBottomIconProps>(
+  (props, ref) => {
+    return (
+      <SvgIcon
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        ref={ref}
+        {...props}
+      >
+        <>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18 20.0008L6 20.0008L6 22.0008L18 22.0008L18 20.0008ZM17.7071 13.7079L13.0607 18.3544C12.4749 18.9402 11.5251 18.9402 10.9393 18.3544L6.2929 13.7079L7.70711 12.2937L11 15.5866L11 5.0008L13 5.0008L13 15.5866L16.2929 12.2937L17.7071 13.7079Z"
+            fill="currentColor"
+          />
+        </>
+      </SvgIcon>
+    );
+  }
+);
+
+ArrowBottomIcon.displayName = "ArrowBottomIcon";

package/src/icons.generated/ArrowTop.tsx

@@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+import { forwardRef } from "react";
+import { SvgIcon, type SvgIconNoChildrenProps } from "../SvgIcon";
+
+export type ArrowTopIconProps = SvgIconNoChildrenProps;
+
+export const ArrowTopIcon = forwardRef<SVGSVGElement, ArrowTopIconProps>(
+  (props, ref) => {
+    return (
+      <SvgIcon
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        ref={ref}
+        {...props}
+      >
+        <>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6 4.00073H18V2.00073H6V4.00073ZM6.29289 10.2936L10.9393 5.64713C11.5251 5.06135 12.4749 5.06135 13.0607 5.64713L17.7071 10.2936L16.2929 11.7078L13 8.4149V19.0007H11V8.4149L7.7071 11.7078L6.29289 10.2936Z"
+            fill="currentColor"
+          />
+        </>
+      </SvgIcon>
+    );
+  }
+);
+
+ArrowTopIcon.displayName = "ArrowTopIcon";

package/src/icons.generated/index.ts

@@ -15,11 +15,13 @@
 export * from "./Add";
 export * from "./AddCircle";
 export * from "./Apps";
+export * from "./ArrowBottom";
 export * from "./ArrowDown";
 export * from "./ArrowLeft";
 export * from "./ArrowLowerLeft";
 export * from "./ArrowLowerRight";
 export * from "./ArrowRight";
+export * from "./ArrowTop";
 export * from "./ArrowUnsorted";
 export * from "./ArrowUp";
 export * from "./ArrowUpperLeft";