@okta/odyssey-react-mui 1.9.16 → 1.9.17

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.17](https://github.com/okta/odyssey/compare/v1.9.16...v1.9.17) (2024-01-11)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.9.16](https://github.com/okta/odyssey/compare/v1.9.15...v1.9.16) (2024-01-08)
 
 ### Bug Fixes

package/dist/Callout.js

@@ -16,6 +16,8 @@ import _AlertTitle from "@mui/material/AlertTitle";
 import { memo } from "react";
 import { ScreenReaderText } from "./ScreenReaderText.js";
 import { useTranslation } from "react-i18next";
+import { Link } from "./Link.js";
+import { Paragraph } from "./Typography.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const calloutRoleValues = ["status", "alert"];
@@ -23,9 +25,12 @@ export const calloutSeverityValues = ["success", "info", "warning", "error"];
 const Callout = _ref => {
   let {
     children,
+    linkText,
+    linkUrl,
     role,
     severity,
     testId,
+    text,
     title,
     translate
   } = _ref;
@@ -43,9 +48,15 @@ const Callout = _ref => {
     }), title && _jsx(_AlertTitle, {
       translate: translate,
       children: title
-    }), _jsx(_Box, {
+    }), children && _jsx(_Box, {
       component: "div",
       children: children
+    }), text && _jsx(Paragraph, {
+      children: text
+    }), linkUrl && _jsx(Link, {
+      href: linkUrl,
+      variant: "monochrome",
+      children: linkText
     })]
   });
 };

package/dist/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","names":["memo","ScreenReaderText","useTranslation","jsx","_jsx","jsxs","_jsxs","calloutRoleValues","calloutSeverityValues","Callout","_ref","children","role","severity","testId","title","translate","t","_Alert","variant","_AlertTitle","_Box","component","MemoizedCallout","displayName"],"sources":["../src/Callout.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, ReactNode } from \"react\";\nimport { Alert, AlertTitle, Box } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { AllowedProps } from \"./AllowedProps\";\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * The contents of the Callout\n   */\n  children: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & AllowedProps;\n\nconst Callout = ({\n  children,\n  role,\n  severity,\n  testId,\n  title,\n  translate,\n}: CalloutProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert data-se={testId} role={role} severity={severity} variant=\"callout\">\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}\n      </ScreenReaderText>\n      {title && <AlertTitle translate={translate}>{title}</AlertTitle>}\n      <Box component=\"div\">{children}</Box>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAE/BC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAI/C,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAuBV,MAAMC,OAAO,GAAGC,IAAA,IAOI;EAAA,IAPH;IACfC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,MAAM;IACNC,KAAK;IACLC;EACY,CAAC,GAAAN,IAAA;EACb,MAAM;IAAEO;EAAE,CAAC,GAAGf,cAAc,CAAC,CAAC;EAE9B,OACEI,KAAA,CAAAY,MAAA;IAAO,WAASJ,MAAO;IAACF,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACM,OAAO,EAAC,SAAS;IAAAR,QAAA,GACvEP,IAAA,CAACH,gBAAgB;MAACe,SAAS,EAAEA,SAAU;MAAAL,QAAA,EACpCM,CAAC,CAAE,YAAWJ,QAAS,EAAC;IAAC,CACV,CAAC,EAClBE,KAAK,IAAIX,IAAA,CAAAgB,WAAA;MAAYJ,SAAS,EAAEA,SAAU;MAAAL,QAAA,EAAEI;IAAK,CAAa,CAAC,EAChEX,IAAA,CAAAiB,IAAA;MAAKC,SAAS,EAAC,KAAK;MAAAX,QAAA,EAAEA;IAAQ,CAAM,CAAC;EAAA,CAChC,CAAC;AAEZ,CAAC;AAED,MAAMY,eAAe,GAAGvB,IAAI,CAACS,OAAO,CAAC;AACrCc,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAId,OAAO"}
+{"version":3,"file":"Callout.js","names":["memo","ScreenReaderText","useTranslation","Link","Paragraph","jsx","_jsx","jsxs","_jsxs","calloutRoleValues","calloutSeverityValues","Callout","_ref","children","linkText","linkUrl","role","severity","testId","text","title","translate","t","_Alert","variant","_AlertTitle","_Box","component","href","MemoizedCallout","displayName"],"sources":["../src/Callout.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, ReactNode } from \"react\";\nimport { Alert, AlertTitle, Box } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { Link } from \"./Link\";\nimport { Paragraph } from \"./Typography\";\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * The contents of the Callout\n   */\n  children?: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The text content of the Callout\n   */\n  text?: string;\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & (\n  | {\n      text: string;\n      children?: never;\n    }\n  | {\n      text?: never;\n      children: ReactNode;\n    }\n) &\n  (\n    | {\n        /**\n         * If linkUrl is not undefined, this is the text of the link.\n         * If left blank, it defaults to \"Learn more\".\n         * Note that linkText does nothing if linkUrl is not defined\n         */\n        linkUrl: string;\n        /**\n         * If defined, the Toast will include a link to the URL\n         */\n        linkText: string;\n      }\n    | {\n        linkUrl?: never;\n        linkText?: never;\n      }\n  ) &\n  AllowedProps;\n\nconst Callout = ({\n  children,\n  linkText,\n  linkUrl,\n  role,\n  severity,\n  testId,\n  text,\n  title,\n  translate,\n}: CalloutProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert data-se={testId} role={role} severity={severity} variant=\"callout\">\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}\n      </ScreenReaderText>\n      {title && <AlertTitle translate={translate}>{title}</AlertTitle>}\n      {children && <Box component=\"div\">{children}</Box>}\n      {text && <Paragraph>{text}</Paragraph>}\n      {linkUrl && (\n        <Link href={linkUrl} variant=\"monochrome\">\n          {linkText}\n        </Link>\n      )}\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAE/BC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAGtCC,IAAI;AAAA,SACJC,SAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElB,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAuDV,MAAMC,OAAO,GAAGC,IAAA,IAUI;EAAA,IAVH;IACfC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,QAAQ;IACRC,MAAM;IACNC,IAAI;IACJC,KAAK;IACLC;EACY,CAAC,GAAAT,IAAA;EACb,MAAM;IAAEU;EAAE,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAE9B,OACEM,KAAA,CAAAe,MAAA;IAAO,WAASL,MAAO;IAACF,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAC,SAAS;IAAAX,QAAA,GACvEP,IAAA,CAACL,gBAAgB;MAACoB,SAAS,EAAEA,SAAU;MAAAR,QAAA,EACpCS,CAAC,CAAE,YAAWL,QAAS,EAAC;IAAC,CACV,CAAC,EAClBG,KAAK,IAAId,IAAA,CAAAmB,WAAA;MAAYJ,SAAS,EAAEA,SAAU;MAAAR,QAAA,EAAEO;IAAK,CAAa,CAAC,EAC/DP,QAAQ,IAAIP,IAAA,CAAAoB,IAAA;MAAKC,SAAS,EAAC,KAAK;MAAAd,QAAA,EAAEA;IAAQ,CAAM,CAAC,EACjDM,IAAI,IAAIb,IAAA,CAACF,SAAS;MAAAS,QAAA,EAAEM;IAAI,CAAY,CAAC,EACrCJ,OAAO,IACNT,IAAA,CAACH,IAAI;MAACyB,IAAI,EAAEb,OAAQ;MAACS,OAAO,EAAC,YAAY;MAAAX,QAAA,EACtCC;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMe,eAAe,GAAG7B,IAAI,CAACW,OAAO,CAAC;AACrCkB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIlB,OAAO"}

package/dist/src/Callout.d.ts

@@ -17,7 +17,7 @@ export type CalloutProps = {
     /**
      * The contents of the Callout
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Sets the ARIA role of the Callout
      * ("status" for something that dynamically updates, "alert" for errors, null for something
@@ -28,11 +28,35 @@ export type CalloutProps = {
      * Determine the color and icon of the Callout
      */
     severity: (typeof calloutSeverityValues)[number];
+    /**
+     * The text content of the Callout
+     */
+    text?: string;
     /**
      * The title of the Callout
      */
     title?: string;
-} & AllowedProps;
-declare const MemoizedCallout: import("react").MemoExoticComponent<({ children, role, severity, testId, title, translate, }: CalloutProps) => JSX.Element>;
+} & ({
+    text: string;
+    children?: never;
+} | {
+    text?: never;
+    children: ReactNode;
+}) & ({
+    /**
+     * If linkUrl is not undefined, this is the text of the link.
+     * If left blank, it defaults to "Learn more".
+     * Note that linkText does nothing if linkUrl is not defined
+     */
+    linkUrl: string;
+    /**
+     * If defined, the Toast will include a link to the URL
+     */
+    linkText: string;
+} | {
+    linkUrl?: never;
+    linkText?: never;
+}) & AllowedProps;
+declare const MemoizedCallout: import("react").MemoExoticComponent<({ children, linkText, linkUrl, role, severity, testId, text, title, translate, }: CalloutProps) => JSX.Element>;
 export { MemoizedCallout as Callout };
 //# sourceMappingURL=Callout.d.ts.map

package/dist/src/Callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../src/Callout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,eAAO,MAAM,iBAAiB,8BAA+B,CAAC;AAC9D,eAAO,MAAM,qBAAqB,kDAKxB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C;;OAEG;IACH,QAAQ,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,YAAY,CAAC;AAuBjB,QAAA,MAAM,eAAe,gGAdlB,YAAY,iBAcsB,CAAC;AAGtC,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../src/Callout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,eAAO,MAAM,iBAAiB,8BAA+B,CAAC;AAC9D,eAAO,MAAM,qBAAqB,kDAKxB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C;;OAEG;IACH,QAAQ,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,CACA;IACE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,CACJ,GACC,CACI;IACE;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACJ,GACD,YAAY,CAAC;AAgCf,QAAA,MAAM,eAAe,yHApBlB,YAAY,iBAoBsB,CAAC;AAGtC,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,CAAC"}

package/dist/src/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAoC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;mBAIN,YAAY;;MAEzB,YAAY,CAAC,YAAY,CAomF5B,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;mBAIN,YAAY;;MAEzB,YAAY,CAAC,YAAY,CAmoF5B,CAAC"}

package/dist/theme/components.js

@@ -21,6 +21,7 @@ import { formLabelClasses } from "@mui/material/FormLabel";
 import { formGroupClasses } from "@mui/material/FormGroup";
 import { inputAdornmentClasses } from "@mui/material/InputAdornment";
 import { inputBaseClasses } from "@mui/material/InputBase";
+import { linkClasses } from "@mui/material/Link";
 import { listItemIconClasses } from "@mui/material/ListItemIcon";
 import { listItemTextClasses } from "@mui/material/ListItemText";
 import { menuItemClasses } from "@mui/material/MenuItem";
@@ -179,6 +180,10 @@ export const components = _ref => {
               }),
               ...(ownerState.variant === "banner" && {
                 marginBlockEnd: 0
+              }),
+              ...(ownerState.variant === "callout" && {
+                fontSize: odysseyTokens.TypographySizeHeading5,
+                lineHeight: odysseyTokens.TypographyLineHeightHeading5
               })
             },
             ...(ownerState.variant === "banner" && {
@@ -192,6 +197,7 @@ export const components = _ref => {
             }),
             ...(ownerState.variant === "callout" && {
               borderRadius: odysseyTokens.BorderRadiusMain,
+              padding: odysseyTokens.Spacing5,
               "&:not(:last-child)": {
                 marginBottom: odysseyTokens.Spacing6
               }
@@ -200,7 +206,10 @@ export const components = _ref => {
               maxWidth: odysseyTokens.TypographyLineLengthMax,
               borderRadius: odysseyTokens.BorderRadiusOuter,
               position: "relative",
-              alignItems: "center",
+              paddingInlineStart: odysseyTokens.Spacing5,
+              paddingInlineEnd: odysseyTokens.Spacing4,
+              paddingBlock: odysseyTokens.Spacing3,
+              alignItems: "flex-start",
               backdropFilter: "blur(10px)"
             })
           };
@@ -220,8 +229,16 @@ export const components = _ref => {
             }),
             ...(ownerState.variant === "toast" && {
               padding: 0,
-              marginInlineStart: 0,
-              marginInlineEnd: 0
+              marginInline: 0,
+              marginBlock: 1,
+              [`& .${buttonClasses.root}`]: {
+                "&:hover, &:focus": {
+                  backgroundColor: odysseyTokens.PaletteNeutralDark.concat("11")
+                },
+                "&:active": {
+                  backgroundColor: odysseyTokens.PaletteNeutralDark.concat("22")
+                }
+              }
             })
           };
         },
@@ -244,7 +261,13 @@ export const components = _ref => {
               color: odysseyTokens.PaletteSuccessMain
             }),
             ...(ownerState.severity === "warning" && {
-              color: odysseyTokens.PaletteWarningDark
+              color: odysseyTokens.HueYellow400
+            }),
+            ...(ownerState.variant === "toast" && {
+              marginBlock: odysseyTokens.Spacing2
+            }),
+            ...(ownerState.variant === "callout" && {
+              marginBlock: 1.5
             }),
             [`& .${svgIconClasses.root}`]: {
               alignSelf: "center",
@@ -265,8 +288,13 @@ export const components = _ref => {
               gap: odysseyTokens.Spacing4
             }),
             ...(ownerState.variant === "toast" && {
-              flexGrow: 1
-            })
+              flexGrow: 1,
+              marginBlock: odysseyTokens.Spacing2
+            }),
+            [`& .${linkClasses.root}`]: {
+              display: "inline-block",
+              marginTop: odysseyTokens.Spacing5
+            }
           };
         }
       }