@okta/odyssey-react-mui 1.13.11 → 1.14.2

package/src/Tabs.tsx

@@ -26,10 +26,10 @@ import {
 } from "@mui/lab";
 import { Tab as MuiTab } from "@mui/material";
 
-import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 import { Badge, BadgeProps } from "./Badge";
-import { HtmlProps } from "./HtmlProps";
 import { Box } from "./Box";
+import { HtmlProps } from "./HtmlProps";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 
 export type TabItemProps = {
   /**
@@ -55,13 +55,9 @@ export type TabItemProps = {
 } & {
   notificationCount?: BadgeProps["badgeContent"];
   notificationCountMax?: BadgeProps["badgeContentMax"];
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 export type TabsProps = {
-  /**
-   * The ARIA label for the full Tabs group
-   */
-  ariaLabel?: string;
   /**
    * @deprecated please use the `value` prop instead
    * When `value` is provided, `initialValue` isn't used.
@@ -123,7 +119,7 @@ const Tabs = ({
   tabs,
   value,
   onChange: onChangeProp,
-}: TabsProps) => {
+}: TabsProps & Pick<HtmlProps, "ariaLabel">) => {
   const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
 
   const onChange = useCallback<NonNullable<MuiTabListProps["onChange"]>>(
@@ -131,7 +127,7 @@ const Tabs = ({
       setTabState(value);
       onChangeProp?.(event, value);
     },
-    [onChangeProp]
+    [onChangeProp],
   );
 
   useEffect(() => {
@@ -141,7 +137,7 @@ const Tabs = ({
   }, [value]);
 
   const renderTab = useCallback(
-    (tab, index) => {
+    (tab: TabItemProps, index: number) => {
       const {
         testId,
         isDisabled,
@@ -172,7 +168,7 @@ const Tabs = ({
         />
       );
     },
-    [tabState]
+    [tabState],
   );
 
   return (

package/src/Tag.tsx

@@ -13,7 +13,7 @@
 import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
 import { TagListContext } from "./TagListContext";
-import { MuiPropsContext } from "./MuiPropsContext";
+import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
 import { HtmlProps } from "./HtmlProps";
 
 export type TagProps = {
@@ -31,7 +31,7 @@ export type TagProps = {
    * Callback fired when the remove button of the Tag is clicked
    */
   onRemove?: MuiChipProps["onDelete"];
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const Tag = ({
   icon,
@@ -45,7 +45,7 @@ const Tag = ({
   const { chipElementType } = useContext(TagListContext);
 
   const renderTag = useCallback(
-    (muiProps) => (
+    (muiProps: MuiPropsContextType) => (
       <MuiChip
         {...muiProps}
         aria-disabled={isDisabled}
@@ -69,7 +69,7 @@ const Tag = ({
       onRemove,
       testId,
       translate,
-    ]
+    ],
   );
 
   return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;

package/src/TagList.tsx

@@ -21,7 +21,7 @@ export type TagListProps = {
    * The Tag or array of Tags within the TagList
    */
   children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId">;
 
 const TagList = ({ children, testId }: TagListProps) => {
   const providerValue = useMemo<{
@@ -30,7 +30,7 @@ const TagList = ({ children, testId }: TagListProps) => {
     () => ({
       chipElementType: "li",
     }),
-    []
+    [],
   );
 
   return (

package/src/TextField.tsx

@@ -23,7 +23,10 @@ import {
 } from "react";
 import { InputAdornment, InputBase } from "@mui/material";
 
-import { FieldComponentProps } from "./FieldComponentProps";
+import {
+  FieldComponentProps,
+  FieldComponentRenderProps,
+} from "./FieldComponentProps";
 import { Field } from "./Field";
 import { HtmlProps } from "./HtmlProps";
 import { FocusHandle, useInputValues, getControlState } from "./inputUtils";
@@ -101,7 +104,12 @@ export type TextFieldProps = {
    */
   value?: string;
 } & FieldComponentProps &
-  HtmlProps;
+  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
+
+type FieldRenderProps = Partial<
+  Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
+> &
+  Pick<FieldComponentRenderProps, "id" | "labelElementId">;
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
@@ -135,13 +143,13 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       type = "text",
       value: value,
     },
-    ref
+    ref,
   ) => {
     const controlledStateRef = useRef(
       getControlState({
         controlledValue: value,
         uncontrolledValue: defaultValue,
-      })
+      }),
     );
     const inputValues = useInputValues({
       defaultValue,
@@ -159,7 +167,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           },
         };
       },
-      []
+      [],
     );
 
     const onChange = useCallback<
@@ -168,11 +176,16 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       (event) => {
         onChangeProp?.(event);
       },
-      [onChangeProp]
+      [onChangeProp],
     );
 
     const renderFieldComponent = useCallback(
-      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
+      ({
+        ariaDescribedBy,
+        errorMessageElementId,
+        id,
+        labelElementId,
+      }: FieldRenderProps) => (
         <InputBase
           {...inputValues}
           aria-describedby={ariaDescribedBy}
@@ -233,7 +246,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         testId,
         translate,
         type,
-      ]
+      ],
     );
 
     return (
@@ -253,7 +266,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         renderFieldComponent={renderFieldComponent}
       />
     );
-  }
+  },
 );
 
 const MemoizedTextField = memo(TextField);

package/src/Tile.tsx

@@ -10,82 +10,111 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactElement, memo, useMemo } from "react";
+import { MouseEventHandler, ReactElement, memo, useMemo } from "react";
 
-import { NullElement } from "./NullElement";
 import {
   Card as MuiCard,
   CardActions as MuiCardActions,
   CardActionArea as MuiCardActionArea,
 } from "@mui/material";
+import styled from "@emotion/styled";
+
 import { Button } from "./Button";
 import { ButtonContext } from "./ButtonContext";
-import { Heading5, Paragraph, Support } from "./Typography";
 import { MoreIcon } from "./icons.generated";
-import { HtmlProps } from "./HtmlProps";
-import styled from "@emotion/styled";
+import { MenuButton, MenuButtonProps } from "./MenuButton";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
-import { MenuButton } from "./MenuButton";
+import { Heading5, Paragraph, Support } from "./Typography";
+
+export const TILE_IMAGE_HEIGHT = "64px";
 
 export type TileProps = {
+  /**
+   * The body text of the tile. The consumer is responsible for truncating this string.
+   */
   description?: string;
-  image?: ReactElement | NullElement; // Icon or image
-  menuItems?: ReactElement;
+  /**
+   * An optional image or icon at the top of the tile, preferably as an <img> or <svg> element.
+   */
+  image?: ReactElement; // Icon or image
+  /**
+   * The "eyebrow" text above the tile title.
+   */
   overline?: string;
+  /**
+   * The heading of the tile.
+   */
   title?: string;
 } & ( // You can't have actions and onClick at the same time
   | {
-      onClick: () => void;
+      /**
+       * The event handler for when the user clicks the tile.
+       */
+      onClick: MouseEventHandler;
       button?: never;
-      menuItems?: never;
+      menuButtonChildren?: never;
     }
   | {
       onClick?: never;
-      button?: ReactElement<typeof Button> | NullElement;
-      menuItems?: ReactElement;
+      /**
+       * The main action button for the tile. Not valid if the tile itself is clickable.
+       */
+      button?: ReactElement<typeof Button>;
+      /**
+       * Menu items to be rendered in the tile's optional menu button. If this prop is undefined, the
+       * menu button will not be shown. Not valid if the tile itself is clickable.
+       */
+      menuButtonChildren?: MenuButtonProps["children"];
     }
-) &
-  HtmlProps;
+);
 
-const ImageContainer = styled.div<{
+const ImageContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren",
+})<{
   odysseyDesignTokens: DesignTokens;
-  hasMenuItems: boolean;
+  hasMenuButtonChildren: boolean;
 }>`
   display: flex;
   align-items: flex-start;
-  max-height: 64px;
-  margin-block-end: ${(props) => props.odysseyDesignTokens.Spacing5};
-  padding-right: ${(props) =>
-    props.hasMenuItems ? props.odysseyDesignTokens.Spacing5 : 0};
+  max-height: ${TILE_IMAGE_HEIGHT};
+  margin-block-end: ${({ odysseyDesignTokens }) =>
+    odysseyDesignTokens.Spacing5};
+  padding-right: ${({ odysseyDesignTokens, hasMenuButtonChildren }) =>
+    hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0};
 `;
 
-const MenuButtonContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>`
+const MenuButtonContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>`
   position: absolute;
-  right: ${(props) => props.odysseyDesignTokens.Spacing3};
-  top: ${(props) => props.odysseyDesignTokens.Spacing3};
+  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing3};
+  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing3};
 `;
 
+const buttonProviderValue = { isFullWidth: true };
+
 const Tile = ({
   button,
   description,
   image,
-  menuItems,
+  menuButtonChildren,
   onClick,
   overline,
   title,
 }: TileProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  const cardContent = useMemo(() => {
-    return (
+  const cardContent = useMemo(
+    () => (
       <>
         {image && (
           <ImageContainer
             odysseyDesignTokens={odysseyDesignTokens}
-            hasMenuItems={Boolean(menuItems)}
+            hasMenuButtonChildren={Boolean(menuButtonChildren)}
           >
             {image}
           </ImageContainer>
@@ -99,32 +128,33 @@ const Tile = ({
 
         {button && (
           <MuiCardActions>
-            <ButtonContext.Provider value={{ isFullWidth: true }}>
+            <ButtonContext.Provider value={buttonProviderValue}>
               {button}
             </ButtonContext.Provider>
           </MuiCardActions>
         )}
       </>
-    );
-  }, [
-    button,
-    description,
-    image,
-    menuItems,
-    overline,
-    title,
-    odysseyDesignTokens,
-  ]);
+    ),
+    [
+      button,
+      description,
+      image,
+      menuButtonChildren,
+      overline,
+      title,
+      odysseyDesignTokens,
+    ],
+  );
 
   return (
     <MuiCard className={onClick ? "isClickable" : ""}>
-      {onClick && (
+      {onClick ? (
         <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
+      ) : (
+        cardContent
       )}
 
-      {!onClick && cardContent}
-
-      {menuItems && (
+      {menuButtonChildren && (
         <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>
           <MenuButton
             endIcon={<MoreIcon />}
@@ -132,8 +162,9 @@ const Tile = ({
             buttonVariant="floating"
             menuAlignment="right"
             size="small"
+            tooltipText="Actions"
           >
-            {menuItems}
+            {menuButtonChildren}
           </MenuButton>
         </MenuButtonContainer>
       )}

package/src/Toast.tsx

@@ -70,7 +70,7 @@ export type ToastProps = {
    * The text content of the Toast
    */
   text: string;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const ClickAwayListenerProps = { onClickAway: () => false };
 

package/src/Tooltip.tsx

@@ -34,7 +34,7 @@ export type TooltipProps = {
    * The text to display in the Tooltip
    */
   text: string;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const Tooltip = ({
   ariaType,

package/src/Typography.tsx

@@ -10,10 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Typography as MuiTypography,
-  TypographyProps as MuiTypographyProps,
-} from "@mui/material";
 import {
   ElementType,
   ReactNode,
@@ -22,6 +18,11 @@ import {
   useRef,
   useImperativeHandle,
 } from "react";
+import {
+  Typography as MuiTypography,
+  TypographyProps as MuiTypographyProps,
+} from "@mui/material";
+
 import { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
 
@@ -62,18 +63,6 @@ export const typographyColorValues = [
 ] as const;
 
 export type TypographyProps = {
-  /**
-   * The ID of the element that describes the component.
-   */
-  ariaDescribedBy?: string;
-  /**
-   * The ARIA label for the component.
-   */
-  ariaLabel?: string;
-  /**
-   * The ID of the element that labels the component.
-   */
-  ariaLabelledBy?: string;
   /**
    * The text content of the component.
    */
@@ -94,7 +83,10 @@ export type TypographyProps = {
    * The variant of Typography to render.
    */
   variant?: keyof typeof typographyVariantMapping;
-} & HtmlProps;
+} & Pick<
+  HtmlProps,
+  "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "testId" | "translate"
+>;
 
 const Typography = ({
   ariaDescribedBy,
@@ -131,7 +123,7 @@ const Typography = ({
         },
       };
     },
-    []
+    [],
   );
 
   return (
@@ -171,7 +163,7 @@ const Heading1 = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="h1"
   />
@@ -197,7 +189,7 @@ const Heading2 = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="h2"
   />
@@ -223,7 +215,7 @@ const Heading3 = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="h3"
   />
@@ -249,7 +241,7 @@ const Heading4 = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="h4"
   />
@@ -275,7 +267,7 @@ const Heading5 = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="h5"
   />
@@ -301,7 +293,7 @@ const Heading6 = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="h6"
   />
@@ -327,7 +319,7 @@ const Paragraph = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="body"
   />
@@ -353,7 +345,7 @@ const Subordinate = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="subordinate"
   />
@@ -379,7 +371,7 @@ const Support = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="support"
   />
@@ -405,7 +397,7 @@ const Legend = ({
     children={children}
     color={color}
     component={component}
-    data-se={testId}
+    testId={testId}
     translate={translate}
     variant="legend"
   />

package/src/createShadowRootElement.ts

@@ -11,7 +11,7 @@
  */
 
 export const createShadowRootElement = (
-  containerElement: HTMLElement
+  containerElement: HTMLElement,
 ): [HTMLStyleElement, HTMLDivElement] => {
   const shadowRoot = containerElement.attachShadow({ mode: "open" });
 

package/src/getTypedObjectKeys.ts

@@ -11,5 +11,5 @@
  */
 
 export const getTypedObjectKeys: <ObjectType>(
-  object: ObjectType
+  object: ObjectType,
 ) => Array<keyof ObjectType> = Object.keys;

package/src/icons.generated/AddCircle.tsx

@@ -37,7 +37,7 @@ export const AddCircleIcon = forwardRef<SVGSVGElement, AddCircleIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 AddCircleIcon.displayName = "AddCircleIcon";

package/src/icons.generated/Apps.tsx

@@ -37,7 +37,7 @@ export const AppsIcon = forwardRef<SVGSVGElement, AppsIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 AppsIcon.displayName = "AppsIcon";

package/src/icons.generated/ArrowBottom.tsx

@@ -37,7 +37,7 @@ export const ArrowBottomIcon = forwardRef<SVGSVGElement, ArrowBottomIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 ArrowBottomIcon.displayName = "ArrowBottomIcon";

package/src/icons.generated/ArrowDown.tsx

@@ -37,7 +37,7 @@ export const ArrowDownIcon = forwardRef<SVGSVGElement, ArrowDownIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 ArrowDownIcon.displayName = "ArrowDownIcon";

package/src/icons.generated/ArrowLeft.tsx

@@ -37,7 +37,7 @@ export const ArrowLeftIcon = forwardRef<SVGSVGElement, ArrowLeftIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 ArrowLeftIcon.displayName = "ArrowLeftIcon";

package/src/icons.generated/ArrowRight.tsx

@@ -37,7 +37,7 @@ export const ArrowRightIcon = forwardRef<SVGSVGElement, ArrowRightIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 ArrowRightIcon.displayName = "ArrowRightIcon";

package/src/icons.generated/ArrowTop.tsx

@@ -37,7 +37,7 @@ export const ArrowTopIcon = forwardRef<SVGSVGElement, ArrowTopIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 ArrowTopIcon.displayName = "ArrowTopIcon";

package/src/icons.generated/ArrowUp.tsx

@@ -37,7 +37,7 @@ export const ArrowUpIcon = forwardRef<SVGSVGElement, ArrowUpIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 ArrowUpIcon.displayName = "ArrowUpIcon";

package/src/icons.generated/Calendar.tsx

@@ -37,7 +37,7 @@ export const CalendarIcon = forwardRef<SVGSVGElement, CalendarIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 CalendarIcon.displayName = "CalendarIcon";

package/src/icons.generated/Call.tsx

@@ -37,7 +37,7 @@ export const CallIcon = forwardRef<SVGSVGElement, CallIconProps>(
         </>
       </SvgIcon>
     );
-  }
+  },
 );
 
 CallIcon.displayName = "CallIcon";