@okta/odyssey-react-mui 1.27.0 → 1.28.1

package/dist/labs/TopNav/UserProfile.js

@@ -14,6 +14,7 @@ import styled from "@emotion/styled";
 import { memo } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Subordinate } from "../../Typography.js";
+import { Box } from "../../Box.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const UserProfileContainer = styled("div", {
@@ -35,12 +36,14 @@ const UserProfileIconContainer = styled("div", {
 }));
 const UserProfileInfoContainer = styled("div")(() => ({
   display: "flex",
-  flexDirection: "column"
+  flexDirection: "column",
+  textAlign: "left"
 }));
 const UserProfile = ({
   profileIcon,
   userName,
-  orgName
+  orgName,
+  userNameEndIcon
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   return _jsxs(UserProfileContainer, {
@@ -49,7 +52,17 @@ const UserProfile = ({
       odysseyDesignTokens: odysseyDesignTokens,
       children: profileIcon
     }), _jsxs(UserProfileInfoContainer, {
-      children: [_jsx(Subordinate, {
+      children: [userNameEndIcon ? _jsxs(Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "row",
+          gap: odysseyDesignTokens.Spacing2
+        },
+        children: [_jsx(Subordinate, {
+          color: "textPrimary",
+          children: userName
+        }), userNameEndIcon]
+      }) : _jsx(Subordinate, {
         color: "textPrimary",
         children: userName
       }), _jsx(Subordinate, {

package/dist/labs/TopNav/UserProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfile.js","names":["styled","memo","useOdysseyDesignTokens","Subordinate","jsx","_jsx","jsxs","_jsxs","UserProfileContainer","shouldForwardProp","prop","odysseyDesignTokens","display","alignItems","paddingInlineEnd","Spacing4","UserProfileIconContainer","Spacing2","UserProfileInfoContainer","flexDirection","UserProfile","profileIcon","userName","orgName","children","color","MemoizedUserProfile","displayName"],"sources":["../../../src/labs/TopNav/UserProfile.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 styled from \"@emotion/styled\";\nimport { memo, type ReactElement } from \"react\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Subordinate } from \"../../Typography\";\n\nconst UserProfileContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  paddingInlineEnd: odysseyDesignTokens.Spacing4,\n}));\n\nconst UserProfileIconContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  paddingInlineEnd: odysseyDesignTokens.Spacing2,\n}));\n\nconst UserProfileInfoContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n}));\n\nexport type UserProfileProps = {\n  /**\n   * Logged in user profile icon to be displayed in the top nav\n   */\n  profileIcon?: ReactElement;\n  /**\n   * Logged in user info to be displayed in the top nav\n   */\n  userName: string;\n  /**\n   * Org name of the logged in user\n   */\n  orgName: string;\n};\n\nconst UserProfile = ({ profileIcon, userName, orgName }: UserProfileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <UserProfileContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {profileIcon && (\n        <UserProfileIconContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {profileIcon}\n        </UserProfileIconContainer>\n      )}\n\n      <UserProfileInfoContainer>\n        <Subordinate color=\"textPrimary\">{userName}</Subordinate>\n        <Subordinate color=\"textSecondary\">{orgName}</Subordinate>\n      </UserProfileInfoContainer>\n    </UserProfileContainer>\n  );\n};\n\nconst MemoizedUserProfile = memo(UserProfile);\nMemoizedUserProfile.displayName = \"UserProfile\";\n\nexport { MemoizedUserProfile as UserProfile };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAAC,SAI9CC,sBAAsB;AAAA,SAEfC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpB,MAAMC,oBAAoB,GAAGR,MAAM,CAAC,KAAK,EAAE;EACzCS,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,gBAAgB,EAAEH,mBAAmB,CAACI;AACxC,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGhB,MAAM,CAAC,KAAK,EAAE;EAC7CS,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfE,gBAAgB,EAAEH,mBAAmB,CAACM;AACxC,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGlB,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDY,OAAO,EAAE,MAAM;EACfO,aAAa,EAAE;AACjB,CAAC,CAAC,CAAC;AAiBH,MAAMC,WAAW,GAAGA,CAAC;EAAEC,WAAW;EAAEC,QAAQ;EAAEC;AAA0B,CAAC,KAAK;EAC5E,MAAMZ,mBAAmB,GAAGT,sBAAsB,CAAC,CAAC;EAEpD,OACEK,KAAA,CAACC,oBAAoB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAa,QAAA,GAC5DH,WAAW,IACVhB,IAAA,CAACW,wBAAwB;MAACL,mBAAmB,EAAEA,mBAAoB;MAAAa,QAAA,EAChEH;IAAW,CACY,CAC3B,EAEDd,KAAA,CAACW,wBAAwB;MAAAM,QAAA,GACvBnB,IAAA,CAACF,WAAW;QAACsB,KAAK,EAAC,aAAa;QAAAD,QAAA,EAAEF;MAAQ,CAAc,CAAC,EACzDjB,IAAA,CAACF,WAAW;QAACsB,KAAK,EAAC,eAAe;QAAAD,QAAA,EAAED;MAAO,CAAc,CAAC;IAAA,CAClC,CAAC;EAAA,CACP,CAAC;AAE3B,CAAC;AAED,MAAMG,mBAAmB,GAAGzB,IAAI,CAACmB,WAAW,CAAC;AAC7CM,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIN,WAAW"}
+{"version":3,"file":"UserProfile.js","names":["styled","memo","useOdysseyDesignTokens","Subordinate","Box","jsx","_jsx","jsxs","_jsxs","UserProfileContainer","shouldForwardProp","prop","odysseyDesignTokens","display","alignItems","paddingInlineEnd","Spacing4","UserProfileIconContainer","Spacing2","UserProfileInfoContainer","flexDirection","textAlign","UserProfile","profileIcon","userName","orgName","userNameEndIcon","children","sx","gap","color","MemoizedUserProfile","displayName"],"sources":["../../../src/labs/TopNav/UserProfile.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 styled from \"@emotion/styled\";\nimport { memo, type ReactElement } from \"react\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Subordinate } from \"../../Typography\";\nimport { Box } from \"../../Box\";\n\nconst UserProfileContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  paddingInlineEnd: odysseyDesignTokens.Spacing4,\n}));\n\nconst UserProfileIconContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  paddingInlineEnd: odysseyDesignTokens.Spacing2,\n}));\n\nconst UserProfileInfoContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  textAlign: \"left\",\n}));\n\nexport type UserProfileProps = {\n  /**\n   * Logged in user profile icon to be displayed in the top nav\n   */\n  profileIcon?: ReactElement;\n  /**\n   * Logged in user info to be displayed in the top nav\n   */\n  userName: string;\n  /**\n   * Org name of the logged in user\n   */\n  orgName: string;\n  /**\n   * The icon element to display after the username\n   */\n  userNameEndIcon?: ReactElement;\n};\n\nconst UserProfile = ({\n  profileIcon,\n  userName,\n  orgName,\n  userNameEndIcon,\n}: UserProfileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <UserProfileContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {profileIcon && (\n        <UserProfileIconContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {profileIcon}\n        </UserProfileIconContainer>\n      )}\n\n      <UserProfileInfoContainer>\n        {userNameEndIcon ? (\n          <Box\n            sx={{\n              display: \"flex\",\n              flexDirection: \"row\",\n              gap: odysseyDesignTokens.Spacing2,\n            }}\n          >\n            <Subordinate color=\"textPrimary\">{userName}</Subordinate>\n            {userNameEndIcon}\n          </Box>\n        ) : (\n          <Subordinate color=\"textPrimary\">{userName}</Subordinate>\n        )}\n        <Subordinate color=\"textSecondary\">{orgName}</Subordinate>\n      </UserProfileInfoContainer>\n    </UserProfileContainer>\n  );\n};\n\nconst MemoizedUserProfile = memo(UserProfile);\nMemoizedUserProfile.displayName = \"UserProfile\";\n\nexport { MemoizedUserProfile as UserProfile };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAAC,SAI9CC,sBAAsB;AAAA,SAEfC,WAAW;AAAA,SACXC,GAAG;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEZ,MAAMC,oBAAoB,GAAGT,MAAM,CAAC,KAAK,EAAE;EACzCU,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,gBAAgB,EAAEH,mBAAmB,CAACI;AACxC,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGjB,MAAM,CAAC,KAAK,EAAE;EAC7CU,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfE,gBAAgB,EAAEH,mBAAmB,CAACM;AACxC,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGnB,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDa,OAAO,EAAE,MAAM;EACfO,aAAa,EAAE,QAAQ;EACvBC,SAAS,EAAE;AACb,CAAC,CAAC,CAAC;AAqBH,MAAMC,WAAW,GAAGA,CAAC;EACnBC,WAAW;EACXC,QAAQ;EACRC,OAAO;EACPC;AACgB,CAAC,KAAK;EACtB,MAAMd,mBAAmB,GAAGV,sBAAsB,CAAC,CAAC;EAEpD,OACEM,KAAA,CAACC,oBAAoB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAe,QAAA,GAC5DJ,WAAW,IACVjB,IAAA,CAACW,wBAAwB;MAACL,mBAAmB,EAAEA,mBAAoB;MAAAe,QAAA,EAChEJ;IAAW,CACY,CAC3B,EAEDf,KAAA,CAACW,wBAAwB;MAAAQ,QAAA,GACtBD,eAAe,GACdlB,KAAA,CAACJ,GAAG;QACFwB,EAAE,EAAE;UACFf,OAAO,EAAE,MAAM;UACfO,aAAa,EAAE,KAAK;UACpBS,GAAG,EAAEjB,mBAAmB,CAACM;QAC3B,CAAE;QAAAS,QAAA,GAEFrB,IAAA,CAACH,WAAW;UAAC2B,KAAK,EAAC,aAAa;UAAAH,QAAA,EAAEH;QAAQ,CAAc,CAAC,EACxDE,eAAe;MAAA,CACb,CAAC,GAENpB,IAAA,CAACH,WAAW;QAAC2B,KAAK,EAAC,aAAa;QAAAH,QAAA,EAAEH;MAAQ,CAAc,CACzD,EACDlB,IAAA,CAACH,WAAW;QAAC2B,KAAK,EAAC,eAAe;QAAAH,QAAA,EAAEF;MAAO,CAAc,CAAC;IAAA,CAClC,CAAC;EAAA,CACP,CAAC;AAE3B,CAAC;AAED,MAAMM,mBAAmB,GAAG9B,IAAI,CAACqB,WAAW,CAAC;AAC7CS,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIT,WAAW"}

package/dist/labs/TopNav/UserProfileMenuButton.js

@@ -0,0 +1,41 @@
+/*!
+ * 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.
+ */
+
+import { memo } from "react";
+import { UserProfile } from "./UserProfile.js";
+import { ChevronDownIcon } from "../../icons.generated/index.js";
+import { BaseMenuButton } from "../../Buttons/BaseMenuButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const UserProfileMenuButton = props => {
+  const {
+    profileIcon,
+    userName,
+    orgName,
+    userNameEndIcon,
+    ...menuButtonProps
+  } = props;
+  return _jsx(BaseMenuButton, {
+    ...menuButtonProps,
+    buttonVariant: "floating",
+    omitEndIcon: true,
+    buttonChildren: _jsx(UserProfile, {
+      profileIcon: profileIcon,
+      userName: userName,
+      orgName: orgName,
+      userNameEndIcon: userNameEndIcon ?? _jsx(ChevronDownIcon, {})
+    })
+  });
+};
+const MemoizedUserProfileMenuButton = memo(UserProfileMenuButton);
+MemoizedUserProfileMenuButton.displayName = "UserProfileMenuButton";
+export { MemoizedUserProfileMenuButton as UserProfileMenuButton };
+//# sourceMappingURL=UserProfileMenuButton.js.map

package/dist/labs/TopNav/UserProfileMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfileMenuButton.js","names":["memo","UserProfile","ChevronDownIcon","BaseMenuButton","jsx","_jsx","UserProfileMenuButton","props","profileIcon","userName","orgName","userNameEndIcon","menuButtonProps","buttonVariant","omitEndIcon","buttonChildren","MemoizedUserProfileMenuButton","displayName"],"sources":["../../../src/labs/TopNav/UserProfileMenuButton.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 { memo } from \"react\";\nimport { UserProfile, UserProfileProps } from \"./UserProfile\";\nimport { ChevronDownIcon } from \"../../icons.generated\";\nimport {\n  AdditionalBaseMenuButtonProps,\n  BaseMenuButton,\n  BaseMenuButtonProps,\n} from \"../../Buttons/BaseMenuButton\";\n\nexport type UserProfileMenuButtonProps = Omit<\n  BaseMenuButtonProps,\n  \"endIcon\" | \"variant\"\n> &\n  AdditionalBaseMenuButtonProps &\n  UserProfileProps;\n\nconst UserProfileMenuButton = (props: UserProfileMenuButtonProps) => {\n  const {\n    profileIcon,\n    userName,\n    orgName,\n    userNameEndIcon,\n    ...menuButtonProps\n  } = props;\n  return (\n    <BaseMenuButton\n      {...menuButtonProps}\n      buttonVariant=\"floating\"\n      omitEndIcon={true}\n      buttonChildren={\n        <UserProfile\n          profileIcon={profileIcon}\n          userName={userName}\n          orgName={orgName}\n          userNameEndIcon={userNameEndIcon ?? <ChevronDownIcon />}\n        />\n      }\n    />\n  );\n};\n\nconst MemoizedUserProfileMenuButton = memo(UserProfileMenuButton);\nMemoizedUserProfileMenuButton.displayName = \"UserProfileMenuButton\";\n\nexport { MemoizedUserProfileMenuButton as UserProfileMenuButton };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SACpBC,WAAW;AAAA,SACXC,eAAe;AAAA,SAGtBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAWhB,MAAMC,qBAAqB,GAAIC,KAAiC,IAAK;EACnE,MAAM;IACJC,WAAW;IACXC,QAAQ;IACRC,OAAO;IACPC,eAAe;IACf,GAAGC;EACL,CAAC,GAAGL,KAAK;EACT,OACEF,IAAA,CAACF,cAAc;IAAA,GACTS,eAAe;IACnBC,aAAa,EAAC,UAAU;IACxBC,WAAW,EAAE,IAAK;IAClBC,cAAc,EACZV,IAAA,CAACJ,WAAW;MACVO,WAAW,EAAEA,WAAY;MACzBC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,eAAe,EAAEA,eAAe,IAAIN,IAAA,CAACH,eAAe,IAAE;IAAE,CACzD;EACF,CACF,CAAC;AAEN,CAAC;AAED,MAAMc,6BAA6B,GAAGhB,IAAI,CAACM,qBAAqB,CAAC;AACjEU,6BAA6B,CAACC,WAAW,GAAG,uBAAuB;AAEnE,SAASD,6BAA6B,IAAIV,qBAAqB"}

package/dist/labs/TopNav/index.js

@@ -11,4 +11,5 @@
  */
 export * from "./TopNav.js";
 export * from "./UserProfile.js";
+export * from "./UserProfileMenuButton.js";
 //# sourceMappingURL=index.js.map

package/dist/labs/TopNav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/labs/TopNav/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 * from \"./TopNav\";\nexport * from \"./UserProfile\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/labs/TopNav/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 * from \"./TopNav\";\nexport * from \"./UserProfile\";\nexport * from \"./UserProfileMenuButton\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AAAA;AAAA"}

package/dist/labs/UiShell/UiShell.js

@@ -18,15 +18,14 @@ import { UiShellContent } from "./UiShellContent.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const defaultComponentProps = {
-  sideNavProps: {
-    appName: "",
-    sideNavItems: []
-  },
-  topNavProps: {}
+  sideNavProps: undefined,
+  topNavProps: undefined
 };
 const UiShell = ({
+  appBackgroundContrastMode,
   appComponent,
   appRootElement,
+  initialVisibleSections,
   onError = console.error,
   onSubscriptionCreated,
   optionalComponents,
@@ -54,7 +53,9 @@ const UiShell = ({
         onError: onError,
         children: [_jsx(CssBaseline, {}), _jsx(UiShellContent, {
           ...componentProps,
+          appBackgroundContrastMode: appBackgroundContrastMode,
           appComponent: appComponent,
+          initialVisibleSections: initialVisibleSections,
           onError: onError,
           optionalComponents: optionalComponents
         })]

package/dist/labs/UiShell/UiShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","CssBaseline","OdysseyProvider","UiShellContent","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","appName","sideNavItems","topNavProps","UiShell","appComponent","appRootElement","onError","console","error","onSubscriptionCreated","optionalComponents","stylesRootElement","subscribeToPropChanges","componentProps","setComponentProps","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","MemoizedUiShell","displayName"],"sources":["../../../src/labs/UiShell/UiShell.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 { memo, useEffect, useState, type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { CssBaseline } from \"../../CssBaseline\";\nimport { OdysseyProvider } from \"../../OdysseyProvider\";\nimport {\n  UiShellContent,\n  type UiShellContentProps,\n  type UiShellNavComponentProps,\n} from \"./UiShellContent\";\nimport { type ReactRootElements } from \"../../web-component\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: {\n    appName: \"\",\n    sideNavItems: [],\n  },\n  topNavProps: {},\n} as const;\n\nexport type UiShellProps = {\n  /**\n   * Notifies when subscribed to prop changes.\n   *\n   * UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.\n   */\n  onSubscriptionCreated: () => void;\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for state changes.\n   *\n   * The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.\n   */\n  subscribeToPropChanges: (\n    subscriber: (\n      componentProps: SetStateAction<UiShellNavComponentProps>,\n    ) => void,\n  ) => () => void;\n} & Pick<ReactRootElements, \"appRootElement\" | \"stylesRootElement\"> &\n  Pick<UiShellContentProps, \"appComponent\" | \"onError\" | \"optionalComponents\">;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShell = ({\n  appComponent,\n  appRootElement,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  stylesRootElement,\n  subscribeToPropChanges,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  useEffect(() => {\n    const unsubscribe = subscribeToPropChanges((componentProps) => {\n      // If for some reason nothing is passed as `componentProps`, we fallback on `defaultComponentProps` as a safety mechanism to ensure nothing breaks.\n      setComponentProps(componentProps || defaultComponentProps);\n    });\n\n    onSubscriptionCreated();\n\n    return () => {\n      unsubscribe();\n    };\n  }, [onSubscriptionCreated, subscribeToPropChanges]);\n\n  return (\n    <ErrorBoundary fallback={appComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={stylesRootElement}\n        shadowRootElement={appRootElement}\n      >\n        <ErrorBoundary fallback={appComponent} onError={onError}>\n          <CssBaseline />\n\n          <UiShellContent\n            {...componentProps}\n            appComponent={appComponent}\n            onError={onError}\n            optionalComponents={optionalComponents}\n          />\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,SAAS,EAAEC,QAAQ,QAA6B,OAAO;AACtE,SAASC,aAAa,QAAQ,sBAAsB;AAAC,SAE5CC,WAAW;AAAA,SACXC,eAAe;AAAA,SAEtBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMhB,OAAO,MAAMC,qBAA+C,GAAG;EAC7DC,YAAY,EAAE;IACZC,OAAO,EAAE,EAAE;IACXC,YAAY,EAAE;EAChB,CAAC;EACDC,WAAW,EAAE,CAAC;AAChB,CAAU;AA8BV,MAAMC,OAAO,GAAGA,CAAC;EACfC,YAAY;EACZC,cAAc;EACdC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,qBAAqB;EACrBC,kBAAkB;EAClBC,iBAAiB;EACjBC;AACY,CAAC,KAAK;EAClB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGzB,QAAQ,CAACS,qBAAqB,CAAC;EAE3EV,SAAS,CAAC,MAAM;IACd,MAAM2B,WAAW,GAAGH,sBAAsB,CAAEC,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAIf,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFW,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXM,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACN,qBAAqB,EAAEG,sBAAsB,CAAC,CAAC;EAEnD,OACEjB,IAAA,CAACL,aAAa;IAAC0B,QAAQ,EAAEZ,YAAa;IAACE,OAAO,EAAEA,OAAQ;IAAAW,QAAA,EACtDtB,IAAA,CAACH,eAAe;MACd0B,kBAAkB,EAAEP,iBAAkB;MACtCQ,iBAAiB,EAAEd,cAAe;MAAAY,QAAA,EAElCpB,KAAA,CAACP,aAAa;QAAC0B,QAAQ,EAAEZ,YAAa;QAACE,OAAO,EAAEA,OAAQ;QAAAW,QAAA,GACtDtB,IAAA,CAACJ,WAAW,IAAE,CAAC,EAEfI,IAAA,CAACF,cAAc;UAAA,GACToB,cAAc;UAClBT,YAAY,EAAEA,YAAa;UAC3BE,OAAO,EAAEA,OAAQ;UACjBI,kBAAkB,EAAEA;QAAmB,CACxC,CAAC;MAAA,CACW;IAAC,CACD;EAAC,CACL,CAAC;AAEpB,CAAC;AAED,MAAMU,eAAe,GAAGjC,IAAI,CAACgB,OAAO,CAAC;AACrCiB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIjB,OAAO"}
+{"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","CssBaseline","OdysseyProvider","UiShellContent","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","UiShell","appBackgroundContrastMode","appComponent","appRootElement","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","stylesRootElement","subscribeToPropChanges","componentProps","setComponentProps","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","MemoizedUiShell","displayName"],"sources":["../../../src/labs/UiShell/UiShell.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 { memo, useEffect, useState, type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { CssBaseline } from \"../../CssBaseline\";\nimport { OdysseyProvider } from \"../../OdysseyProvider\";\nimport {\n  UiShellContent,\n  type UiShellContentProps,\n  type UiShellNavComponentProps,\n} from \"./UiShellContent\";\nimport { type ReactRootElements } from \"../../web-component\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nexport type UiShellProps = {\n  /**\n   * Notifies when subscribed to prop changes.\n   *\n   * UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.\n   */\n  onSubscriptionCreated: () => void;\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for state changes.\n   *\n   * The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.\n   */\n  subscribeToPropChanges: (\n    subscriber: (\n      componentProps: SetStateAction<UiShellNavComponentProps>,\n    ) => void,\n  ) => () => void;\n} & Pick<ReactRootElements, \"appRootElement\" | \"stylesRootElement\"> &\n  Pick<\n    UiShellContentProps,\n    | \"appBackgroundContrastMode\"\n    | \"appComponent\"\n    | \"initialVisibleSections\"\n    | \"onError\"\n    | \"optionalComponents\"\n  >;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShell = ({\n  appBackgroundContrastMode,\n  appComponent,\n  appRootElement,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  stylesRootElement,\n  subscribeToPropChanges,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  useEffect(() => {\n    const unsubscribe = subscribeToPropChanges((componentProps) => {\n      // If for some reason nothing is passed as `componentProps`, we fallback on `defaultComponentProps` as a safety mechanism to ensure nothing breaks.\n      setComponentProps(componentProps || defaultComponentProps);\n    });\n\n    onSubscriptionCreated();\n\n    return () => {\n      unsubscribe();\n    };\n  }, [onSubscriptionCreated, subscribeToPropChanges]);\n\n  return (\n    <ErrorBoundary fallback={appComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={stylesRootElement}\n        shadowRootElement={appRootElement}\n      >\n        <ErrorBoundary fallback={appComponent} onError={onError}>\n          <CssBaseline />\n\n          <UiShellContent\n            {...componentProps}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            appComponent={appComponent}\n            initialVisibleSections={initialVisibleSections}\n            onError={onError}\n            optionalComponents={optionalComponents}\n          />\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,SAAS,EAAEC,QAAQ,QAA6B,OAAO;AACtE,SAASC,aAAa,QAAQ,sBAAsB;AAAC,SAE5CC,WAAW;AAAA,SACXC,eAAe;AAAA,SAEtBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMhB,OAAO,MAAMC,qBAA+C,GAAG;EAC7DC,YAAY,EAAEC,SAAS;EACvBC,WAAW,EAAED;AACf,CAAU;AAqCV,MAAME,OAAO,GAAGA,CAAC;EACfC,yBAAyB;EACzBC,YAAY;EACZC,cAAc;EACdC,sBAAsB;EACtBC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,qBAAqB;EACrBC,kBAAkB;EAClBC,iBAAiB;EACjBC;AACY,CAAC,KAAK;EAClB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG1B,QAAQ,CAACS,qBAAqB,CAAC;EAE3EV,SAAS,CAAC,MAAM;IACd,MAAM4B,WAAW,GAAGH,sBAAsB,CAAEC,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAIhB,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFY,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXM,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACN,qBAAqB,EAAEG,sBAAsB,CAAC,CAAC;EAEnD,OACElB,IAAA,CAACL,aAAa;IAAC2B,QAAQ,EAAEb,YAAa;IAACG,OAAO,EAAEA,OAAQ;IAAAW,QAAA,EACtDvB,IAAA,CAACH,eAAe;MACd2B,kBAAkB,EAAEP,iBAAkB;MACtCQ,iBAAiB,EAAEf,cAAe;MAAAa,QAAA,EAElCrB,KAAA,CAACP,aAAa;QAAC2B,QAAQ,EAAEb,YAAa;QAACG,OAAO,EAAEA,OAAQ;QAAAW,QAAA,GACtDvB,IAAA,CAACJ,WAAW,IAAE,CAAC,EAEfI,IAAA,CAACF,cAAc;UAAA,GACTqB,cAAc;UAClBX,yBAAyB,EAAEA,yBAA0B;UACrDC,YAAY,EAAEA,YAAa;UAC3BE,sBAAsB,EAAEA,sBAAuB;UAC/CC,OAAO,EAAEA,OAAQ;UACjBI,kBAAkB,EAAEA;QAAmB,CACxC,CAAC;MAAA,CACW;IAAC,CACD;EAAC,CACL,CAAC;AAEpB,CAAC;AAED,MAAMU,eAAe,GAAGlC,IAAI,CAACe,OAAO,CAAC;AACrCmB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAInB,OAAO"}

package/dist/labs/UiShell/UiShellContent.js

@@ -13,26 +13,33 @@
 import styled from "@emotion/styled";
 import { memo } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { AppSwitcher } from "../AppSwitcher/index.js";
 import { SideNav } from "../SideNav/index.js";
 import { TopNav } from "../TopNav/index.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { useScrollState } from "./useScrollState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const emptySideNavItems = [];
 const StyledAppContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "appBackgroundContrastMode"
 })(({
+  appBackgroundContrastMode,
   odysseyDesignTokens
 }) => ({
   gridArea: "app-content",
   overflowX: "hidden",
   overflowY: "auto",
   paddingBlock: odysseyDesignTokens.Spacing5,
-  paddingInline: odysseyDesignTokens.Spacing8
+  paddingInline: odysseyDesignTokens.Spacing8,
+  backgroundColor: appBackgroundContrastMode === "highContrast" ? odysseyDesignTokens.HueNeutralWhite : odysseyDesignTokens.HueNeutral50
 }));
 const StyledBannersContainer = styled("div")(() => ({
   gridArea: "banners"
 }));
+const StyledAppSwitcherContainer = styled("div")(() => ({
+  gridArea: "app-switcher"
+}));
 const StyledSideNavContainer = styled("div")(() => ({
   gridArea: "side-nav"
 }));
@@ -45,11 +52,11 @@ const StyledShellContainer = styled("div", {
   display: "grid",
   gridGap: 0,
   gridTemplateAreas: `
-    "banners banners"
-    "side-nav top-nav"
-    "side-nav app-content"
+    "banners banners banners"
+    "app-switcher side-nav top-nav"
+    "app-switcher side-nav app-content"
   `,
-  gridTemplateColumns: "auto 1fr",
+  gridTemplateColumns: "auto auto 1fr",
   gridTemplateRows: "auto auto 1fr",
   height: "100vh",
   width: "100vw"
@@ -57,10 +64,14 @@ const StyledShellContainer = styled("div", {
 const StyledTopNavContainer = styled("div")(() => ({
   gridArea: "top-nav"
 }));
+export const subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
 const UiShellContent = ({
+  appBackgroundContrastMode = "lowContrast",
   appComponent,
+  initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
   onError = console.error,
   optionalComponents,
+  appSwitcherProps,
   sideNavProps,
   topNavProps
 }) => {
@@ -73,8 +84,32 @@ const UiShellContent = ({
     odysseyDesignTokens: odysseyDesignTokens,
     children: [_jsx(StyledBannersContainer, {
       children: optionalComponents?.banners
-    }), _jsx(StyledSideNavContainer, {
-      children: sideNavProps && _jsx(ErrorBoundary, {
+    }), _jsxs(StyledAppSwitcherContainer, {
+      children: [initialVisibleSections?.includes("AppSwitcher") && !appSwitcherProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(AppSwitcher, {
+          isLoading: true,
+          appIcons: [],
+          selectedAppName: ""
+        })
+      }), appSwitcherProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(AppSwitcher, {
+          ...appSwitcherProps
+        })
+      })]
+    }), _jsxs(StyledSideNavContainer, {
+      children: [initialVisibleSections?.includes("SideNav") && !sideNavProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(SideNav, {
+          isLoading: true,
+          appName: "",
+          sideNavItems: emptySideNavItems
+        })
+      }), sideNavProps && _jsx(ErrorBoundary, {
         fallback: null,
         onError: onError,
         children: _jsx(SideNav, {
@@ -88,9 +123,13 @@ const UiShellContent = ({
             hasCustomFooter: false
           })
         })
-      })
-    }), _jsx(StyledTopNavContainer, {
-      children: _jsx(ErrorBoundary, {
+      })]
+    }), _jsxs(StyledTopNavContainer, {
+      children: [initialVisibleSections?.includes("TopNav") && !topNavProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(TopNav, {})
+      }), topNavProps && _jsx(ErrorBoundary, {
         fallback: null,
         onError: onError,
         children: _jsx(TopNav, {
@@ -99,11 +138,12 @@ const UiShellContent = ({
           leftSideComponent: optionalComponents?.topNavLeftSide,
           rightSideComponent: optionalComponents?.topNavRightSide
         })
-      })
+      })]
     }), _jsx(StyledAppContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
-      tabIndex: 0,
+      appBackgroundContrastMode: appBackgroundContrastMode,
       ref: scrollableContentRef,
+      tabIndex: 0,
       children: appComponent
     })]
   });

package/dist/labs/UiShell/UiShellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiShellContent.js","names":["styled","memo","ErrorBoundary","SideNav","TopNav","useOdysseyDesignTokens","useScrollState","jsx","_jsx","jsxs","_jsxs","StyledAppContainer","shouldForwardProp","prop","odysseyDesignTokens","gridArea","overflowX","overflowY","paddingBlock","Spacing5","paddingInline","Spacing8","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","backgroundColor","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","UiShellContent","appComponent","onError","console","error","optionalComponents","sideNavProps","topNavProps","isContentScrolled","scrollableContentRef","children","banners","fallback","hasCustomFooter","sideNavFooter","footerComponent","footerItems","undefined","isScrolled","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","ref","MemoizedUiShellContent","displayName"],"sources":["../../../src/labs/UiShell/UiShellContent.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 styled from \"@emotion/styled\";\nimport { memo, type ReactElement, type ReactNode } from \"react\";\nimport { ErrorBoundary, ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { SideNav, type SideNavProps } from \"../SideNav\";\nimport { TopNav, type TopNavProps } from \"../TopNav\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { useScrollState } from \"./useScrollState\";\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  gridArea: \"app-content\",\n  overflowX: \"hidden\",\n  overflowY: \"auto\",\n  paddingBlock: odysseyDesignTokens.Spacing5,\n  paddingInline: odysseyDesignTokens.Spacing8,\n}));\n\nconst StyledBannersContainer = styled(\"div\")(() => ({\n  gridArea: \"banners\",\n}));\n\nconst StyledSideNavContainer = styled(\"div\")(() => ({\n  gridArea: \"side-nav\",\n}));\n\nconst StyledShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners banners\"\n    \"side-nav top-nav\"\n    \"side-nav app-content\"\n  `,\n  gridTemplateColumns: \"auto 1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNavContainer = styled(\"div\")(() => ({\n  gridArea: \"top-nav\",\n}));\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the side nav component.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\">;\n  /**\n   * Object that gets pass directly to the top nav component.\n   */\n  topNavProps: Omit<TopNavProps, \"leftSideComponent\" | \"rightSideComponent\">;\n};\n\nexport type UiShellContentProps = {\n  /**\n   * React app component that renders as children in the correct location of the shell.\n   */\n  appComponent: ReactNode;\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, flagging \"p0\"s, and recovering UI Shell when errors occur.\n   */\n  onError?: ErrorBoundaryProps[\"onError\"];\n  /**\n   * Components that will render as children of various other components such as the top nav or side nav.\n   */\n  optionalComponents?: {\n    banners?: ReactElement;\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n} & UiShellNavComponentProps;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShellContent = ({\n  appComponent,\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: UiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isContentScrolled, scrollableContentRef } = useScrollState();\n\n  return (\n    <StyledShellContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledSideNavContainer>\n        {sideNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <SideNav\n              {...{\n                ...sideNavProps,\n                ...(sideNavProps.hasCustomFooter &&\n                optionalComponents?.sideNavFooter\n                  ? {\n                      footerComponent: optionalComponents.sideNavFooter,\n                      footerItems: undefined,\n                      hasCustomFooter: sideNavProps.hasCustomFooter,\n                    }\n                  : {\n                      footerItems: sideNavProps.footerItems,\n                      hasCustomFooter: false,\n                    }),\n              }}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledSideNavContainer>\n\n      <StyledTopNavContainer>\n        <ErrorBoundary fallback={null} onError={onError}>\n          <TopNav\n            {...topNavProps}\n            isScrolled={isContentScrolled}\n            leftSideComponent={optionalComponents?.topNavLeftSide}\n            rightSideComponent={optionalComponents?.topNavRightSide}\n          />\n        </ErrorBoundary>\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        tabIndex={0}\n        ref={scrollableContentRef}\n      >\n        {appComponent}\n      </StyledAppContainer>\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedUiShellContent = memo(UiShellContent);\nMemoizedUiShellContent.displayName = \"UiShellContent\";\n\nexport { MemoizedUiShellContent as UiShellContent };\n"],"mappings":"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"}
+{"version":3,"file":"UiShellContent.js","names":["styled","memo","ErrorBoundary","AppSwitcher","SideNav","TopNav","useOdysseyDesignTokens","useScrollState","jsx","_jsx","jsxs","_jsxs","emptySideNavItems","StyledAppContainer","shouldForwardProp","prop","appBackgroundContrastMode","odysseyDesignTokens","gridArea","overflowX","overflowY","paddingBlock","Spacing5","paddingInline","Spacing8","backgroundColor","HueNeutralWhite","HueNeutral50","StyledBannersContainer","StyledAppSwitcherContainer","StyledSideNavContainer","StyledShellContainer","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","subComponentNames","UiShellContent","appComponent","initialVisibleSections","onError","console","error","optionalComponents","appSwitcherProps","sideNavProps","topNavProps","isContentScrolled","scrollableContentRef","children","banners","includes","fallback","isLoading","appIcons","selectedAppName","appName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","undefined","isScrolled","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","ref","tabIndex","MemoizedUiShellContent","displayName"],"sources":["../../../src/labs/UiShell/UiShellContent.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 styled from \"@emotion/styled\";\nimport { memo, type ReactElement, type ReactNode } from \"react\";\nimport { ErrorBoundary, ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcher, type AppSwitcherProps } from \"../AppSwitcher\";\nimport { SideNav, type SideNavProps } from \"../SideNav\";\nimport { TopNav, type TopNavProps } from \"../TopNav\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { useScrollState } from \"./useScrollState\";\nimport { ContrastMode } from \"../../useContrastMode\";\n\nconst emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"appBackgroundContrastMode\",\n})<{\n  appBackgroundContrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n}>(({ appBackgroundContrastMode, odysseyDesignTokens }) => ({\n  gridArea: \"app-content\",\n  overflowX: \"hidden\",\n  overflowY: \"auto\",\n  paddingBlock: odysseyDesignTokens.Spacing5,\n  paddingInline: odysseyDesignTokens.Spacing8,\n  backgroundColor:\n    appBackgroundContrastMode === \"highContrast\"\n      ? odysseyDesignTokens.HueNeutralWhite\n      : odysseyDesignTokens.HueNeutral50,\n}));\n\nconst StyledBannersContainer = styled(\"div\")(() => ({\n  gridArea: \"banners\",\n}));\n\nconst StyledAppSwitcherContainer = styled(\"div\")(() => ({\n  gridArea: \"app-switcher\",\n}));\n\nconst StyledSideNavContainer = styled(\"div\")(() => ({\n  gridArea: \"side-nav\",\n}));\n\nconst StyledShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners banners banners\"\n    \"app-switcher side-nav top-nav\"\n    \"app-switcher side-nav app-content\"\n  `,\n  gridTemplateColumns: \"auto auto 1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNavContainer = styled(\"div\")(() => ({\n  gridArea: \"top-nav\",\n}));\n\nexport const subComponentNames = [\"TopNav\", \"SideNav\", \"AppSwitcher\"] as const;\nexport type SubComponentName = (typeof subComponentNames)[number];\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   */\n  appSwitcherProps?: AppSwitcherProps;\n  /**\n   * Object that gets pass directly to the side nav component.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\">;\n  /**\n   * Object that gets pass directly to the top nav component.\n   */\n  topNavProps?: Omit<TopNavProps, \"leftSideComponent\" | \"rightSideComponent\">;\n};\n\nexport type UiShellContentProps = {\n  /**\n   * Sets the background color for the app content area.\n   */\n  appBackgroundContrastMode?: ContrastMode;\n  /**\n   * React app component that renders as children in the correct location of the shell.\n   */\n  appComponent: ReactNode;\n  /**\n   * Which parts of the UI Shell should be visible initially? For example,\n   * if sideNavProps is undefined, should the space for the sidenav be initially visible?\n   */\n  initialVisibleSections?: SubComponentName[];\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, flagging \"p0\"s, and recovering UI Shell when errors occur.\n   */\n  onError?: ErrorBoundaryProps[\"onError\"];\n  /**\n   * Components that will render as children of various other components such as the top nav or side nav.\n   */\n  optionalComponents?: {\n    banners?: ReactElement;\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n} & UiShellNavComponentProps;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShellContent = ({\n  appBackgroundContrastMode = \"lowContrast\",\n  appComponent,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  appSwitcherProps,\n  sideNavProps,\n  topNavProps,\n}: UiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isContentScrolled, scrollableContentRef } = useScrollState();\n\n  return (\n    <StyledShellContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledAppSwitcherContainer>\n        {\n          /* If AppSwitcher should be initially visible and we have not yet received props, render AppSwitcher in the loading state */\n          initialVisibleSections?.includes(\"AppSwitcher\") &&\n            !appSwitcherProps && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <AppSwitcher isLoading appIcons={[]} selectedAppName=\"\" />\n              </ErrorBoundary>\n            )\n        }\n        {appSwitcherProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <AppSwitcher {...appSwitcherProps} />\n          </ErrorBoundary>\n        )}\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer>\n        {\n          /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n          initialVisibleSections?.includes(\"SideNav\") && !sideNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <SideNav isLoading appName=\"\" sideNavItems={emptySideNavItems} />\n            </ErrorBoundary>\n          )\n        }\n        {sideNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <SideNav\n              {...{\n                ...sideNavProps,\n                ...(sideNavProps.hasCustomFooter &&\n                optionalComponents?.sideNavFooter\n                  ? {\n                      footerComponent: optionalComponents.sideNavFooter,\n                      footerItems: undefined,\n                      hasCustomFooter: sideNavProps.hasCustomFooter,\n                    }\n                  : {\n                      footerItems: sideNavProps.footerItems,\n                      hasCustomFooter: false,\n                    }),\n              }}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledSideNavContainer>\n\n      <StyledTopNavContainer>\n        {\n          /* If TopNav should be initially visible and we have not yet received props, render Topnav with minimal inputs */\n          initialVisibleSections?.includes(\"TopNav\") && !topNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <TopNav />\n            </ErrorBoundary>\n          )\n        }\n        {topNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <TopNav\n              {...topNavProps}\n              isScrolled={isContentScrolled}\n              leftSideComponent={optionalComponents?.topNavLeftSide}\n              rightSideComponent={optionalComponents?.topNavRightSide}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        appBackgroundContrastMode={appBackgroundContrastMode}\n        ref={scrollableContentRef}\n        tabIndex={0}\n      >\n        {appComponent}\n      </StyledAppContainer>\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedUiShellContent = memo(UiShellContent);\nMemoizedUiShellContent.displayName = \"UiShellContent\";\n\nexport { MemoizedUiShellContent as UiShellContent };\n"],"mappings":"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"}

package/dist/labs/UiShell/renderUiShell.js

@@ -24,7 +24,9 @@ export const optionalComponentSlotNames = {
   topNavRightSide: "top-nav-right-side"
 };
 export const renderUiShell = ({
+  appBackgroundContrastMode,
   appRootElement: explicitAppRootElement,
+  initialVisibleSections,
   onError = console.error,
   uiShellRootElement
 }) => {
@@ -54,8 +56,10 @@ export const renderUiShell = ({
       fallback: appComponent,
       onError: onError,
       children: _jsx(UiShell, {
+        appBackgroundContrastMode: appBackgroundContrastMode,
         appComponent: appComponent,
         appRootElement: reactRootElements.appRootElement,
+        initialVisibleSections: initialVisibleSections,
         onError: onError,
         onSubscriptionCreated: publishSubscriptionCreated,
         optionalComponents: Object.fromEntries(Object.entries(optionalComponentSlotNames).map(([optionalComponentKey, slotName]) => [optionalComponentKey, _jsx("slot", {

package/dist/labs/UiShell/renderUiShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","renderReactInWebComponent","jsx","_jsx","uiShellDataAttribute","optionalComponentSlotNames","banners","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appRootElement","explicitAppRootElement","onError","console","error","uiShellRootElement","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","concat","appComponent","uiShellElement","getReactComponent","reactRootElements","fallback","children","onSubscriptionCreated","optionalComponents","name","stylesRootElement","webComponentRootElement","setComponentProps"],"sources":["../../../src/labs/UiShell/renderUiShell.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 { type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { bufferLatest } from \"./bufferLatest\";\nimport { createMessageBus } from \"./createMessageBus\";\nimport { UiShell, UiShellProps } from \"./UiShell\";\nimport { renderReactInWebComponent } from \"../../web-component/renderReactInWebComponent\";\nimport { type UiShellNavComponentProps } from \"./UiShellContent\";\n\nexport const uiShellDataAttribute = \"data-unified-ui-shell\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appRootElement: explicitAppRootElement,\n  onError = console.error,\n  uiShellRootElement,\n}: {\n  /**\n   * HTML element used as the root for a React app.\n   */\n  appRootElement?: HTMLDivElement;\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * HTML element used as the root for UI Shell.\n   */\n  uiShellRootElement: HTMLElement;\n}) => {\n  const appRootElement =\n    explicitAppRootElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  uiShellRootElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as Record<\n    keyof Required<UiShellProps>[\"optionalComponents\"],\n    HTMLDivElement\n  >;\n\n  const webComponentChildren =\n    Object.values(slottedElements).concat(appRootElement);\n\n  const appComponent = <slot />;\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={appComponent} onError={onError}>\n        <UiShell\n          appComponent={appComponent}\n          appRootElement={reactRootElements.appRootElement}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          stylesRootElement={reactRootElements.stylesRootElement}\n          subscribeToPropChanges={subscribeToPropChanges}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentRootElement: uiShellRootElement,\n    webComponentChildren,\n  });\n\n  return {\n    appRootElement,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","renderReactInWebComponent","jsx","_jsx","uiShellDataAttribute","optionalComponentSlotNames","banners","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundContrastMode","appRootElement","explicitAppRootElement","initialVisibleSections","onError","console","error","uiShellRootElement","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","concat","appComponent","uiShellElement","getReactComponent","reactRootElements","fallback","children","onSubscriptionCreated","optionalComponents","name","stylesRootElement","webComponentRootElement","setComponentProps"],"sources":["../../../src/labs/UiShell/renderUiShell.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 { type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { bufferLatest } from \"./bufferLatest\";\nimport { createMessageBus } from \"./createMessageBus\";\nimport { UiShell, UiShellProps } from \"./UiShell\";\nimport { renderReactInWebComponent } from \"../../web-component/renderReactInWebComponent\";\nimport { type UiShellNavComponentProps } from \"./UiShellContent\";\n\nexport const uiShellDataAttribute = \"data-unified-ui-shell\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appBackgroundContrastMode,\n  appRootElement: explicitAppRootElement,\n  initialVisibleSections,\n  onError = console.error,\n  uiShellRootElement,\n}: {\n  /**\n   * HTML element used as the root for a React app.\n   */\n  appRootElement?: HTMLDivElement;\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * HTML element used as the root for UI Shell.\n   */\n  uiShellRootElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  \"appBackgroundContrastMode\" | \"initialVisibleSections\"\n>) => {\n  const appRootElement =\n    explicitAppRootElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  uiShellRootElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as Record<\n    keyof Required<UiShellProps>[\"optionalComponents\"],\n    HTMLDivElement\n  >;\n\n  const webComponentChildren =\n    Object.values(slottedElements).concat(appRootElement);\n\n  const appComponent = <slot />;\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={appComponent} onError={onError}>\n        <UiShell\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appComponent={appComponent}\n          appRootElement={reactRootElements.appRootElement}\n          initialVisibleSections={initialVisibleSections}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          stylesRootElement={reactRootElements.stylesRootElement}\n          subscribeToPropChanges={subscribeToPropChanges}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentRootElement: uiShellRootElement,\n    webComponentChildren,\n  });\n\n  return {\n    appRootElement,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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"}

package/dist/labs/index.js

@@ -25,6 +25,7 @@ export * from "./OdysseyPickers/index.js";
 export * from "./PageTemplate.js";
 export * from "./PaginatedTable.js";
 export { GroupPicker } from "./GroupPicker.js";
+export * from "./AppSwitcher/index.js";
 export * from "./SideNav/NavAccordion.js";
 export * from "./SideNav/index.js";
 export * from "./TopNav/index.js";

package/dist/labs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AdapterDateFns","LocalizationProvider","GroupPicker"],"sources":["../../src/labs/index.ts"],"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\nexport { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nexport { LocalizationProvider } from \"@mui/x-date-pickers\";\nexport type { LocalizationProviderProps } from \"@mui/x-date-pickers\";\n\n// export * from \"./AdaptablePicker\";\nexport * from \"./AppTile\";\nexport * from \"./DatePicker\";\nexport * from \"./datePickerTheme\";\n\nexport * from \"./DataView\";\n\n/** @deprecated Will be removed in a future Odyssey version in lieu of the one shipping with DataTable */\nexport * from \"./DataTablePagination\";\nexport * from \"./DataFilters\";\nexport * from \"./Layout\";\nexport * from \"./materialReactTableTypes\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */\nexport * from \"./StaticTable\";\nexport * from \"./OdysseyPickers\";\nexport * from \"./PageTemplate\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */\nexport * from \"./PaginatedTable\";\n\nexport {\n  /** @deprecated Will be removed in a future Odyssey version. Use `PickerWithOptionAdornment` */\n  GroupPicker,\n  type GroupPickerOptionType,\n  type GroupPickerProps,\n} from \"./GroupPicker\";\n\nexport * from \"./SideNav/NavAccordion\";\nexport * from \"./SideNav\";\nexport * from \"./TopNav\";\nexport * from \"./UiShell\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,oCAAoC;AACnE,SAASC,oBAAoB,QAAQ,qBAAqB;AAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAwBzDC,WAAW;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["AdapterDateFns","LocalizationProvider","GroupPicker"],"sources":["../../src/labs/index.ts"],"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\nexport { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nexport { LocalizationProvider } from \"@mui/x-date-pickers\";\nexport type { LocalizationProviderProps } from \"@mui/x-date-pickers\";\n\n// export * from \"./AdaptablePicker\";\nexport * from \"./AppTile\";\nexport * from \"./DatePicker\";\nexport * from \"./datePickerTheme\";\n\nexport * from \"./DataView\";\n\n/** @deprecated Will be removed in a future Odyssey version in lieu of the one shipping with DataTable */\nexport * from \"./DataTablePagination\";\nexport * from \"./DataFilters\";\nexport * from \"./Layout\";\nexport * from \"./materialReactTableTypes\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */\nexport * from \"./StaticTable\";\nexport * from \"./OdysseyPickers\";\nexport * from \"./PageTemplate\";\n/** @deprecated Will be removed in a future Odyssey version in lieu of DataTable */\nexport * from \"./PaginatedTable\";\n\nexport {\n  /** @deprecated Will be removed in a future Odyssey version. Use `PickerWithOptionAdornment` */\n  GroupPicker,\n  type GroupPickerOptionType,\n  type GroupPickerProps,\n} from \"./GroupPicker\";\n\nexport * from \"./AppSwitcher\";\nexport * from \"./SideNav/NavAccordion\";\nexport * from \"./SideNav\";\nexport * from \"./TopNav\";\nexport * from \"./UiShell\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,oCAAoC;AACnE,SAASC,oBAAoB,QAAQ,qBAAqB;AAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAwBzDC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/src/{Button.d.ts → Buttons/BaseButton.d.ts}

@@ -10,13 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { HTMLAttributes, ReactElement } from "react";
-import type { HtmlProps } from "./HtmlProps";
-import { FocusHandle } from "./inputUtils";
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { HtmlProps } from "../HtmlProps";
+import { FocusHandle } from "../inputUtils";
 export declare const buttonSizeValues: readonly ["small", "medium", "large"];
 export declare const buttonTypeValues: readonly ["button", "submit", "reset"];
 export declare const buttonVariantValues: readonly ["primary", "secondary", "danger", "dangerSecondary", "floating", "floatingAction"];
-export type ButtonProps = {
+export type BaseButtonProps = {
     /**
      * The ref forwarded to the Button
      */
@@ -58,20 +58,10 @@ export type ButtonProps = {
      * The click event handler for the Button
      */
     onClick?: MuiButtonProps["onClick"];
-} & ({
     /**
-     * The icon element to display at the end of the Button
-     */
-    endIcon?: ReactElement;
-    /**
-     * The text content of the Button
+     * The contents of the button. Only available internal to Odyssey here in BaseButton. If set, label is ignored.
      */
-    label: string;
-    /**
-     * The icon element to display at the start of the Button
-     */
-    startIcon?: ReactElement;
-} | {
+    children?: ReactNode;
     /**
      * The icon element to display at the end of the Button
      */
@@ -79,25 +69,13 @@ export type ButtonProps = {
     /**
      * The text content of the Button
      */
-    label?: string | "" | undefined;
-    /**
-     * The icon element to display at the start of the Button
-     */
-    startIcon: ReactElement;
-} | {
-    /**
-     * The icon element to display at the end of the Button
-     */
-    endIcon: ReactElement;
-    /**
-     * The text content of the Button
-     */
-    label?: never;
+    label?: string;
     /**
      * The icon element to display at the start of the Button
      */
     startIcon?: ReactElement;
-}) & Pick<HtmlProps, "ariaControls" | "ariaDescribedBy" | "ariaExpanded" | "ariaHasPopup" | "ariaLabel" | "ariaLabelledBy" | "tabIndex" | "testId" | "translate">;
-declare const MemoizedButton: import("react").MemoExoticComponent<({ ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, buttonRef, endIcon, href, id, isDisabled, isFullWidth: isFullWidthProp, label, onClick, size, startIcon, tabIndex, testId, tooltipText, translate, type, variant: variantProp, }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
-export { MemoizedButton as Button };
-//# sourceMappingURL=Button.d.ts.map
+};
+export type AdditionalBaseButtonProps = Pick<HtmlProps, "ariaControls" | "ariaDescribedBy" | "ariaExpanded" | "ariaHasPopup" | "ariaLabel" | "ariaLabelledBy" | "tabIndex" | "testId" | "translate">;
+declare const MemoizedBaseButton: import("react").MemoExoticComponent<({ 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, }: BaseButtonProps & AdditionalBaseButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export { MemoizedBaseButton as BaseButton };
+//# sourceMappingURL=BaseButton.d.ts.map

package/dist/src/Buttons/BaseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/Buttons/BaseButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,cAAc,EAEd,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAQ5C,eAAO,MAAM,gBAAgB,uCAAwC,CAAC;AACtE,eAAO,MAAM,gBAAgB,wCAAyC,CAAC;AACvE,eAAO,MAAM,mBAAmB,8FAOtB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;IAC3D;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CAAC;AAKF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,SAAS,EACP,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,cAAc,GACd,WAAW,GACX,gBAAgB,GAChB,UAAU,GACV,QAAQ,GACR,WAAW,CACd,CAAC;AA8HF,QAAA,MAAM,kBAAkB,2TApGrB,eAAe,GAAG,yBAAyB,6CAoGH,CAAC;AAG5C,OAAO,EAAE,kBAAkB,IAAI,UAAU,EAAE,CAAC"}