@okta/odyssey-react-mui 1.14.2 → 1.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "^1.14.2",
+    "@okta/odyssey-design-tokens": "^1.14.3",
     "date-fns": "^2.30.0",
     "i18next": "^23.8.2",
     "material-react-table": "^2.11.3",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "0966a06e6eda85e0d9bae6a67988e08509feb82d"
+  "gitHead": "8ffc832fce91c68f4b6396e06051859a8c2dd0a1"
 }

package/src/IconWithTooltip.tsx

@@ -0,0 +1,90 @@
+/*!
+ * 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, ReactNode } from "react";
+import styled from "@emotion/styled";
+import { Tooltip as MuiTooltip } from "@mui/material";
+import type { TooltipProps as MuiTooltipProps } from "@mui/material";
+
+import { HtmlProps } from "./HtmlProps";
+import { InformationCircleIcon } from "./icons.generated";
+import { useMuiProps } from "./MuiPropsContext";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
+
+const IconContainer = styled.span<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "inline-flex",
+  transitionProperty: "border-color, box-shadow, outline",
+  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+  border: "1px solid transparent",
+
+  "&:focus, &:focus-visible": {
+    borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,
+    outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,
+    outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,
+  },
+
+  svg: {
+    display: "flex",
+  },
+}));
+
+export type IconWithTooltipProps = {
+  /**
+   * The icon to render. Defaults to `InformationCircleIcon`
+   */
+  IconComponent?: ReactNode;
+  /**
+   * The placement of the Tooltip
+   */
+  placement?: MuiTooltipProps["placement"];
+  /**
+   * The text to display in the Tooltip
+   */
+  tooltipText: string;
+} & Pick<HtmlProps, "testId" | "translate">;
+
+const IconWithTooltip = ({
+  IconComponent = <InformationCircleIcon />,
+  placement = "right",
+  testId,
+  tooltipText,
+  translate,
+}: IconWithTooltipProps) => {
+  const muiProps = useMuiProps();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <MuiTooltip
+      data-se={testId}
+      describeChild
+      placement={placement}
+      tabIndex={0}
+      title={tooltipText}
+      translate={translate}
+    >
+      <IconContainer odysseyDesignTokens={odysseyDesignTokens} {...muiProps}>
+        {IconComponent}
+      </IconContainer>
+    </MuiTooltip>
+  );
+};
+
+const MemoizedIconWithTooltip = memo(IconWithTooltip);
+MemoizedIconWithTooltip.displayName = "IconWithTooltip";
+
+export { MemoizedIconWithTooltip as IconWithTooltip };

package/src/index.ts

@@ -74,6 +74,7 @@ export * from "./Fieldset";
 export * from "./FieldComponentProps";
 export * from "./Form";
 export * from "./HintLink";
+export * from "./IconWithTooltip";
 export * from "./Link";
 export * from "./MenuButton";
 export * from "./MenuItem";