@okta/odyssey-react-mui 1.28.1 → 1.29.0

package/dist/{labs → ui-shell}/UiShell/UiShell.js

@@ -25,6 +25,7 @@ const UiShell = ({
   appBackgroundContrastMode,
   appComponent,
   appRootElement,
+  hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
   onSubscriptionCreated,
@@ -55,6 +56,7 @@ const UiShell = ({
           ...componentProps,
           appBackgroundContrastMode: appBackgroundContrastMode,
           appComponent: appComponent,
+          hasStandardAppContentPadding: hasStandardAppContentPadding,
           initialVisibleSections: initialVisibleSections,
           onError: onError,
           optionalComponents: optionalComponents

package/dist/ui-shell/UiShell/UiShell.js.map

@@ -0,0 +1 @@
+{"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","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","stylesRootElement","subscribeToPropChanges","componentProps","setComponentProps","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","MemoizedUiShell","displayName"],"sources":["../../../src/ui-shell/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    | \"hasStandardAppContentPadding\"\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  hasStandardAppContentPadding,\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            hasStandardAppContentPadding={hasStandardAppContentPadding}\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;AAsCV,MAAME,OAAO,GAAGA,CAAC;EACfC,yBAAyB;EACzBC,YAAY;EACZC,cAAc;EACdC,4BAA4B;EAC5BC,sBAAsB;EACtBC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,qBAAqB;EACrBC,kBAAkB;EAClBC,iBAAiB;EACjBC;AACY,CAAC,KAAK;EAClB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG3B,QAAQ,CAACS,qBAAqB,CAAC;EAE3EV,SAAS,CAAC,MAAM;IACd,MAAM6B,WAAW,GAAGH,sBAAsB,CAAEC,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAIjB,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFa,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXM,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACN,qBAAqB,EAAEG,sBAAsB,CAAC,CAAC;EAEnD,OACEnB,IAAA,CAACL,aAAa;IAAC4B,QAAQ,EAAEd,YAAa;IAACI,OAAO,EAAEA,OAAQ;IAAAW,QAAA,EACtDxB,IAAA,CAACH,eAAe;MACd4B,kBAAkB,EAAEP,iBAAkB;MACtCQ,iBAAiB,EAAEhB,cAAe;MAAAc,QAAA,EAElCtB,KAAA,CAACP,aAAa;QAAC4B,QAAQ,EAAEd,YAAa;QAACI,OAAO,EAAEA,OAAQ;QAAAW,QAAA,GACtDxB,IAAA,CAACJ,WAAW,IAAE,CAAC,EAEfI,IAAA,CAACF,cAAc;UAAA,GACTsB,cAAc;UAClBZ,yBAAyB,EAAEA,yBAA0B;UACrDC,YAAY,EAAEA,YAAa;UAC3BE,4BAA4B,EAAEA,4BAA6B;UAC3DC,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,GAAGnC,IAAI,CAACe,OAAO,CAAC;AACrCoB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIpB,OAAO"}

package/dist/{labs → ui-shell}/UiShell/UiShellContent.js

@@ -13,26 +13,29 @@
 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 { AppSwitcher } from "../../labs/AppSwitcher/index.js";
+import { SideNav } from "../../labs/SideNav/index.js";
+import { TopNav } from "../../labs/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" && prop !== "appBackgroundContrastMode"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "appBackgroundContrastMode" && prop !== "hasStandardAppContentPadding"
 })(({
   appBackgroundContrastMode,
+  hasStandardAppContentPadding,
   odysseyDesignTokens
 }) => ({
   gridArea: "app-content",
   overflowX: "hidden",
   overflowY: "auto",
-  paddingBlock: odysseyDesignTokens.Spacing5,
-  paddingInline: odysseyDesignTokens.Spacing8,
-  backgroundColor: appBackgroundContrastMode === "highContrast" ? odysseyDesignTokens.HueNeutralWhite : odysseyDesignTokens.HueNeutral50
+  backgroundColor: appBackgroundContrastMode === "highContrast" ? odysseyDesignTokens.HueNeutralWhite : odysseyDesignTokens.HueNeutral50,
+  ...(hasStandardAppContentPadding && {
+    paddingBlock: odysseyDesignTokens.Spacing5,
+    paddingInline: odysseyDesignTokens.Spacing8
+  })
 }));
 const StyledBannersContainer = styled("div")(() => ({
   gridArea: "banners"
@@ -68,6 +71,7 @@ export const subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
 const UiShellContent = ({
   appBackgroundContrastMode = "lowContrast",
   appComponent,
+  hasStandardAppContentPadding = true,
   initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
   onError = console.error,
   optionalComponents,
@@ -101,7 +105,7 @@ const UiShellContent = ({
         })
       })]
     }), _jsxs(StyledSideNavContainer, {
-      children: [initialVisibleSections?.includes("SideNav") && !sideNavProps && _jsx(ErrorBoundary, {
+      children: [initialVisibleSections?.includes("SideNav") && sideNavProps === undefined && _jsx(ErrorBoundary, {
         fallback: null,
         onError: onError,
         children: _jsx(SideNav, {
@@ -125,10 +129,13 @@ const UiShellContent = ({
         })
       })]
     }), _jsxs(StyledTopNavContainer, {
-      children: [initialVisibleSections?.includes("TopNav") && !topNavProps && _jsx(ErrorBoundary, {
+      children: [initialVisibleSections?.includes("TopNav") && topNavProps === undefined && _jsx(ErrorBoundary, {
         fallback: null,
         onError: onError,
-        children: _jsx(TopNav, {})
+        children: _jsx(TopNav, {
+          leftSideComponent: optionalComponents?.topNavLeftSide,
+          rightSideComponent: optionalComponents?.topNavRightSide
+        })
       }), topNavProps && _jsx(ErrorBoundary, {
         fallback: null,
         onError: onError,
@@ -140,8 +147,9 @@ const UiShellContent = ({
         })
       })]
     }), _jsx(StyledAppContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
       appBackgroundContrastMode: appBackgroundContrastMode,
+      hasStandardAppContentPadding: hasStandardAppContentPadding,
+      odysseyDesignTokens: odysseyDesignTokens,
       ref: scrollableContentRef,
       tabIndex: 0,
       children: appComponent

package/dist/ui-shell/UiShell/UiShellContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiShellContent.js","names":["styled","memo","ErrorBoundary","AppSwitcher","SideNav","TopNav","useOdysseyDesignTokens","useScrollState","jsx","_jsx","jsxs","_jsxs","emptySideNavItems","StyledAppContainer","shouldForwardProp","prop","appBackgroundContrastMode","hasStandardAppContentPadding","odysseyDesignTokens","gridArea","overflowX","overflowY","backgroundColor","HueNeutralWhite","HueNeutral50","paddingBlock","Spacing5","paddingInline","Spacing8","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","undefined","appName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","isScrolled","ref","tabIndex","MemoizedUiShellContent","displayName"],"sources":["../../../src/ui-shell/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 \"../../labs/AppSwitcher\";\nimport { SideNav, type SideNavProps } from \"../../labs/SideNav\";\nimport { TopNav, type TopNavProps } from \"../../labs/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\" &&\n    prop !== \"appBackgroundContrastMode\" &&\n    prop !== \"hasStandardAppContentPadding\",\n})<{\n  appBackgroundContrastMode: ContrastMode;\n  hasStandardAppContentPadding: UiShellContentProps[\"hasStandardAppContentPadding\"];\n  odysseyDesignTokens: DesignTokens;\n}>(\n  ({\n    appBackgroundContrastMode,\n    hasStandardAppContentPadding,\n    odysseyDesignTokens,\n  }) => ({\n    gridArea: \"app-content\",\n    overflowX: \"hidden\",\n    overflowY: \"auto\",\n    backgroundColor:\n      appBackgroundContrastMode === \"highContrast\"\n        ? odysseyDesignTokens.HueNeutralWhite\n        : odysseyDesignTokens.HueNeutral50,\n\n    ...(hasStandardAppContentPadding && {\n      paddingBlock: odysseyDesignTokens.Spacing5,\n      paddingInline: odysseyDesignTokens.Spacing8,\n    }),\n  }),\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. If `undefined` and in `initialVisibleSections`, SideNav will be initially rendered. Pass `null` to hide a previously-visible SideNav.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\"> | null;\n  /**\n   * Object that gets pass directly to the top nav component. If `undefined` and in `initialVisibleSections`, TopNav will be initially rendered. Pass `null` to hide a previously-visible TopNav.\n   */\n  topNavProps?: Omit<\n    TopNavProps,\n    \"leftSideComponent\" | \"rightSideComponent\"\n  > | null;\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   * defaults to `true`. If `false`, the content area will have no padding provided\n   */\n  hasStandardAppContentPadding?: boolean;\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  hasStandardAppContentPadding = true,\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\") &&\n            sideNavProps === undefined && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <SideNav\n                  isLoading\n                  appName=\"\"\n                  sideNavItems={emptySideNavItems}\n                />\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      <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\") &&\n            topNavProps === undefined && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <TopNav\n                  leftSideComponent={optionalComponents?.topNavLeftSide}\n                  rightSideComponent={optionalComponents?.topNavRightSide}\n                />\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        appBackgroundContrastMode={appBackgroundContrastMode}\n        hasStandardAppContentPadding={hasStandardAppContentPadding}\n        odysseyDesignTokens={odysseyDesignTokens}\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/ui-shell/UiShell/bufferLatest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bufferLatest.js","names":["createStore","bufferLatest","publish","subscribe","store","isReactAppReadyForProps","unsubscribe","setState","getState","hasState","publishWhenReady","value"],"sources":["../../../src/ui-shell/UiShell/bufferLatest.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\nimport { createStore } from \"./createStore\";\n\n/**\n * Buffers the values passed to a publisher, keeping only the latest value, until the subscriber emits.\n *\n * This is useful in restricting publishers from firing events until specific subscribers are active. Once active, the `publish` function reverts to its previous behavior.\n */\nexport const bufferLatest = <Value>({\n  publish,\n  subscribe,\n}: {\n  /**\n   * A function that publishes values to a subscriber, but not the same subscriber as the one passed to this function.\n   *\n   * Only the latest value published by this publisher is kept until the subscriber emits.\n   */\n  publish: (value: Value) => void;\n  /**\n   * A subscription that listens for emissions from a separate publisher.\n   *\n   * When that separate publisher emits, the latest value from the passed-in publish function is emitted as are all future values.\n   */\n  subscribe: (subscriber: () => void) => () => void;\n}) => {\n  const store = createStore<{\n    bufferedValue?: Value;\n    isReactAppReadyForProps: boolean;\n  }>({\n    isReactAppReadyForProps: false,\n  });\n\n  const unsubscribe = subscribe(() => {\n    unsubscribe();\n\n    store.setState(\"isReactAppReadyForProps\", true);\n    store.getState(\"bufferedValue\");\n    if (store.hasState(\"bufferedValue\")) {\n      // If we have a state, then the value in here is what we want. TypeScript expects this to possibly be `undefined` because the type we sent to `createStore` listed `bufferedValue` as optional. TypeScript doesn't seem to have any way of knowing we passed in the value at some point.\n      publish(store.getState(\"bufferedValue\")!);\n    }\n  });\n\n  const publishWhenReady: typeof publish = (value) => {\n    if (store.getState(\"isReactAppReadyForProps\")) {\n      publish(value);\n    } else {\n      store.setState(\"bufferedValue\", value);\n    }\n  };\n\n  return publishWhenReady;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAYSA,WAAW;AAOpB,OAAO,MAAMC,YAAY,GAAGA,CAAQ;EAClCC,OAAO;EACPC;AAcF,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGJ,WAAW,CAGtB;IACDK,uBAAuB,EAAE;EAC3B,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGH,SAAS,CAAC,MAAM;IAClCG,WAAW,CAAC,CAAC;IAEbF,KAAK,CAACG,QAAQ,CAAC,yBAAyB,EAAE,IAAI,CAAC;IAC/CH,KAAK,CAACI,QAAQ,CAAC,eAAe,CAAC;IAC/B,IAAIJ,KAAK,CAACK,QAAQ,CAAC,eAAe,CAAC,EAAE;MAEnCP,OAAO,CAACE,KAAK,CAACI,QAAQ,CAAC,eAAe,CAAE,CAAC;IAC3C;EACF,CAAC,CAAC;EAEF,MAAME,gBAAgC,GAAIC,KAAK,IAAK;IAClD,IAAIP,KAAK,CAACI,QAAQ,CAAC,yBAAyB,CAAC,EAAE;MAC7CN,OAAO,CAACS,KAAK,CAAC;IAChB,CAAC,MAAM;MACLP,KAAK,CAACG,QAAQ,CAAC,eAAe,EAAEI,KAAK,CAAC;IACxC;EACF,CAAC;EAED,OAAOD,gBAAgB;AACzB,CAAC"}

package/dist/ui-shell/UiShell/createMessageBus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createMessageBus.js","names":["createMessageBus","subscribers","Map","publish","message","Array","from","values","forEach","subscriber","subscribe","subscriberId","Symbol","set","delete"],"sources":["../../../src/ui-shell/UiShell/createMessageBus.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 type MessageHandler<Message> = (message: Message) => void;\n\nexport type PublishMessage<Message> = MessageHandler<Message>;\n\nexport type UnsubscribeMessageSubscription = () => void;\n\nexport type MessageSubscription<Message> = (\n  subscriber: MessageHandler<Message>,\n) => UnsubscribeMessageSubscription;\n\nexport type MessageBus<Message> = {\n  publish: PublishMessage<Message>;\n  subscribe: MessageSubscription<Message>;\n};\n\n/**\n * Create a self-contained message bus that allows you to subscribe to events published by the publisher.\n */\nexport const createMessageBus = <Message = void>(): MessageBus<Message> => {\n  const subscribers = new Map<symbol, MessageHandler<Message>>();\n\n  const publish: PublishMessage<Message> = (message) => {\n    Array.from(subscribers.values()).forEach((subscriber) => {\n      subscriber(message);\n    });\n  };\n\n  const subscribe: MessageSubscription<Message> = (subscriber) => {\n    const subscriberId = Symbol();\n    subscribers.set(subscriberId, subscriber);\n\n    return () => {\n      subscribers.delete(subscriberId);\n    };\n  };\n\n  return {\n    publish,\n    subscribe,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAoBA,OAAO,MAAMA,gBAAgB,GAAGA,CAAA,KAA2C;EACzE,MAAMC,WAAW,GAAG,IAAIC,GAAG,CAAkC,CAAC;EAE9D,MAAMC,OAAgC,GAAIC,OAAO,IAAK;IACpDC,KAAK,CAACC,IAAI,CAACL,WAAW,CAACM,MAAM,CAAC,CAAC,CAAC,CAACC,OAAO,CAAEC,UAAU,IAAK;MACvDA,UAAU,CAACL,OAAO,CAAC;IACrB,CAAC,CAAC;EACJ,CAAC;EAED,MAAMM,SAAuC,GAAID,UAAU,IAAK;IAC9D,MAAME,YAAY,GAAGC,MAAM,CAAC,CAAC;IAC7BX,WAAW,CAACY,GAAG,CAACF,YAAY,EAAEF,UAAU,CAAC;IAEzC,OAAO,MAAM;MACXR,WAAW,CAACa,MAAM,CAACH,YAAY,CAAC;IAClC,CAAC;EACH,CAAC;EAED,OAAO;IACLR,OAAO;IACPO;EACF,CAAC;AACH,CAAC"}

package/dist/ui-shell/UiShell/createStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStore.js","names":["createStore","initialState","state","hasState","name","getState","setState","value"],"sources":["../../../src/ui-shell/UiShell/createStore.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\n/**\n * Creates an internal state and gives access to those values via functions.\n *\n * It can be optionally given an initial state.\n */\nexport const createStore = <State extends object>(initialState?: State) => {\n  const state = initialState || ({} as Partial<State>);\n\n  const hasState = <Name extends keyof State>(name: Name) => name in state;\n\n  const getState = <Name extends keyof State>(name: Name) => state[name];\n\n  const setState = <Name extends keyof State>(\n    name: Name,\n    value: Required<State>[Name],\n  ) => {\n    state[name] = value;\n  };\n\n  return {\n    getState,\n    hasState,\n    setState,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAOA,OAAO,MAAMA,WAAW,GAA0BC,YAAoB,IAAK;EACzE,MAAMC,KAAK,GAAGD,YAAY,IAAK,CAAC,CAAoB;EAEpD,MAAME,QAAQ,GAA8BC,IAAU,IAAKA,IAAI,IAAIF,KAAK;EAExE,MAAMG,QAAQ,GAA8BD,IAAU,IAAKF,KAAK,CAACE,IAAI,CAAC;EAEtE,MAAME,QAAQ,GAAGA,CACfF,IAAU,EACVG,KAA4B,KACzB;IACHL,KAAK,CAACE,IAAI,CAAC,GAAGG,KAAK;EACrB,CAAC;EAED,OAAO;IACLF,QAAQ;IACRF,QAAQ;IACRG;EACF,CAAC;AACH,CAAC"}

package/dist/ui-shell/UiShell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["UiShell"],"sources":["../../../src/ui-shell/UiShell/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 \"./renderUiShell\";\nexport * from \"./useHasUiShell\";\n\nexport { UiShell, type UiShellProps } from \"./UiShell\";\nexport { type UiShellNavComponentProps } from \"./UiShellContent\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AAAA;AAAA,SAeSA,OAAO"}

package/dist/{labs → ui-shell}/UiShell/renderUiShell.js

@@ -14,9 +14,9 @@ import { ErrorBoundary } from "react-error-boundary";
 import { bufferLatest } from "./bufferLatest.js";
 import { createMessageBus } from "./createMessageBus.js";
 import { UiShell } from "./UiShell.js";
-import { renderReactInWebComponent } from "../../web-component/renderReactInWebComponent.js";
+import { renderReactInWebComponent } from "../renderReactInWebComponent.js";
+import { uiShellDataAttribute } from "./useHasUiShell.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const uiShellDataAttribute = "data-unified-ui-shell";
 export const optionalComponentSlotNames = {
   banners: "banners",
   sideNavFooter: "side-nav-footer",
@@ -26,6 +26,7 @@ export const optionalComponentSlotNames = {
 export const renderUiShell = ({
   appBackgroundContrastMode,
   appRootElement: explicitAppRootElement,
+  hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
   uiShellRootElement
@@ -59,6 +60,7 @@ export const renderUiShell = ({
         appBackgroundContrastMode: appBackgroundContrastMode,
         appComponent: appComponent,
         appRootElement: reactRootElements.appRootElement,
+        hasStandardAppContentPadding: hasStandardAppContentPadding,
         initialVisibleSections: initialVisibleSections,
         onError: onError,
         onSubscriptionCreated: publishSubscriptionCreated,

package/dist/ui-shell/UiShell/renderUiShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","renderReactInWebComponent","uiShellDataAttribute","jsx","_jsx","optionalComponentSlotNames","banners","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundContrastMode","appRootElement","explicitAppRootElement","hasStandardAppContentPadding","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/ui-shell/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 \"../renderReactInWebComponent\";\nimport { type UiShellNavComponentProps } from \"./UiShellContent\";\nimport { uiShellDataAttribute } from \"./useHasUiShell\";\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  hasStandardAppContentPadding,\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\"\n  | \"hasStandardAppContentPadding\"\n  | \"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          hasStandardAppContentPadding={hasStandardAppContentPadding}\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 → ui-shell}/UiShell/useHasUiShell.js

@@ -11,7 +11,7 @@
  */
 
 import { useEffect, useState } from "react";
-import { uiShellDataAttribute } from "./renderUiShell.js";
+export const uiShellDataAttribute = "data-unified-ui-shell";
 export const useHasUiShell = () => {
   const [hasUiShell, setHasUiShell] = useState(false);
   useEffect(() => {

package/dist/ui-shell/UiShell/useHasUiShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHasUiShell.js","names":["useEffect","useState","uiShellDataAttribute","useHasUiShell","hasUiShell","setHasUiShell","Boolean","document","querySelector"],"sources":["../../../src/ui-shell/UiShell/useHasUiShell.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\nimport { useEffect, useState } from \"react\";\n\nexport const uiShellDataAttribute = \"data-unified-ui-shell\";\n\nexport const useHasUiShell = () => {\n  const [hasUiShell, setHasUiShell] = useState(false);\n\n  useEffect(() => {\n    setHasUiShell(Boolean(document.querySelector(`[${uiShellDataAttribute}]`)));\n  }, []);\n\n  return hasUiShell;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,OAAO,MAAMC,oBAAoB,GAAG,uBAAuB;AAE3D,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACdK,aAAa,CAACC,OAAO,CAACC,QAAQ,CAACC,aAAa,CAAE,IAAGN,oBAAqB,GAAE,CAAC,CAAC,CAAC;EAC7E,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOE,UAAU;AACnB,CAAC"}

package/dist/ui-shell/UiShell/useScrollState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollState.js","names":["useEffect","useRef","useState","useScrollState","isContentScrolled","setIsContentScrolled","scrollableContentRef","current","requestedAnimationFrameId","scrollableContentElement","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener"],"sources":["../../../src/ui-shell/UiShell/useScrollState.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\nimport { useEffect, useRef, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>() => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableContentRef = useRef<ScrollableContentElement>(null);\n\n  useEffect(() => {\n    if (scrollableContentRef.current) {\n      let requestedAnimationFrameId: number;\n      const scrollableContentElement = scrollableContentRef.current;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableContentElement.scrollTop > 0);\n        });\n      };\n\n      scrollableContentElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableContentElement.removeEventListener(\n          \"scroll\",\n          updateScrollState,\n        );\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, []);\n\n  return {\n    isContentScrolled,\n    scrollableContentRef,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEnD,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAEvB;EACL,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGH,QAAQ,CAAC,KAAK,CAAC;EAEjE,MAAMI,oBAAoB,GAAGL,MAAM,CAA2B,IAAI,CAAC;EAEnED,SAAS,CAAC,MAAM;IACd,IAAIM,oBAAoB,CAACC,OAAO,EAAE;MAChC,IAAIC,yBAAiC;MACrC,MAAMC,wBAAwB,GAAGH,oBAAoB,CAACC,OAAO;MAE7D,MAAMG,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACH,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGI,qBAAqB,CAAC,MAAM;UACtDP,oBAAoB,CAACI,wBAAwB,CAACI,SAAS,GAAG,CAAC,CAAC;QAC9D,CAAC,CAAC;MACJ,CAAC;MAEDJ,wBAAwB,CAACK,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAEtEA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXD,wBAAwB,CAACM,mBAAmB,CAC1C,QAAQ,EACRL,iBACF,CAAC;QAEDC,oBAAoB,CAACH,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLJ,iBAAiB;IACjBE;EACF,CAAC;AACH,CAAC"}

package/dist/ui-shell/index.js

@@ -0,0 +1,14 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+export * from "./UiShell/index.js";
+export * from "./renderReactInWebComponent.js";
+//# sourceMappingURL=index.js.map

package/dist/ui-shell/index.js.map

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

package/dist/{web-component → ui-shell}/renderReactInWebComponent.js

@@ -8,18 +8,10 @@
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  *
  * See the License for the specific language governing permissions and limitations under the License.
- */export const createReactRootElements = () => {
-  const appRootElement = document.createElement("div");
-  const stylesRootElement = document.createElement("div");
-  appRootElement.style.setProperty("height", "inherit");
-  appRootElement.setAttribute("id", "app-root");
-  stylesRootElement.setAttribute("id", "style-root");
-  stylesRootElement.setAttribute("nonce", window.cspNonce);
-  return {
-    appRootElement,
-    stylesRootElement
-  };
-};
+ */
+
+import { createRoot } from "react-dom/client";
+import { createReactRootElements } from "../web-component/index.js";
 export const reactWebComponentElementName = "odyssey-react-web-component";
 export class ReactInWebComponentElement extends HTMLElement {
   constructor(getReactComponent) {
@@ -40,15 +32,13 @@ export class ReactInWebComponentElement extends HTMLElement {
     this.reactRootElements.stylesRootElement.appendChild(styleElement);
     shadowRoot.appendChild(this.reactRootElements.stylesRootElement);
     shadowRoot.appendChild(this.reactRootElements.appRootElement);
-    this.reactRootPromise = import("react-dom/client").then(({
-      createRoot
-    }) => createRoot(this.reactRootElements.appRootElement));
+    this.reactRoot = createRoot(this.reactRootElements.appRootElement);
   }
   connectedCallback() {
-    this.reactRootPromise.then(reactRoot => reactRoot.render(this.getReactComponent(this.reactRootElements)));
+    this.reactRoot.render(this.getReactComponent(this.reactRootElements));
   }
   disconnectedCallback() {
-    this.reactRootPromise.then(reactRoot => reactRoot.unmount());
+    this.reactRoot.unmount();
   }
 }
 if (!customElements.get(reactWebComponentElementName)) {

package/dist/ui-shell/renderReactInWebComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderReactInWebComponent.js","names":["createRoot","createReactRootElements","reactWebComponentElementName","ReactInWebComponentElement","HTMLElement","constructor","getReactComponent","reactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","reactRoot","connectedCallback","render","disconnectedCallback","unmount","customElements","get","define","renderReactInWebComponent","webComponentChildren","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../src/ui-shell/renderReactInWebComponent.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\nimport { type ReactNode } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"../web-component\";\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nexport class ReactInWebComponentElement extends HTMLElement {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRoot: Root;\n  reactRootElements: ReactRootElements;\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n\n    this.reactRoot = createRoot(this.reactRootElements.appRootElement);\n  }\n\n  connectedCallback() {\n    this.reactRoot.render(this.getReactComponent(this.reactRootElements));\n  }\n\n  disconnectedCallback() {\n    this.reactRoot.unmount();\n  }\n}\n\nif (!customElements.get(reactWebComponentElementName)) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n  /**\n   * You React app renders in the web component, but the web component needs to be rendered in the document.\n   *\n   * This is the element the web component is rendered into.\n   */\n  webComponentRootElement: HTMLElement;\n};\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  webComponentRootElement.appendChild(reactElement);\n\n  return reactElement;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,UAAU,QAAmB,kBAAkB;AAAC,SAEvDC,uBAAuB;AAIzB,OAAO,MAAMC,4BAA4B,GAAG,6BAA6B;AAMzE,OAAO,MAAMC,0BAA0B,SAASC,WAAW,CAAC;EAK1DC,WAAWA,CAACC,iBAAkD,EAAE;IAC9D,KAAK,CAAC,CAAC;IAEP,IAAI,CAACA,iBAAiB,GAAGA,iBAAiB;IAC1C,IAAI,CAACC,iBAAiB,GAAGN,uBAAuB,CAAC,CAAC;IAElD,MAAMO,YAAY,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;IACpD,MAAMC,UAAU,GAAG,IAAI,CAACC,YAAY,CAAC;MAAEC,IAAI,EAAE;IAAO,CAAC,CAAC;IAEtDL,YAAY,CAACM,SAAS,GAAI;AAC9B;AACA;AACA;AACA;AACA,KAAK;IAEDN,YAAY,CAACO,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;IAEnD,IAAI,CAACV,iBAAiB,CAACW,iBAAiB,CAACC,WAAW,CAACX,YAAY,CAAC;IAClEG,UAAU,CAACQ,WAAW,CAAC,IAAI,CAACZ,iBAAiB,CAACW,iBAAiB,CAAC;IAChEP,UAAU,CAACQ,WAAW,CAAC,IAAI,CAACZ,iBAAiB,CAACa,cAAc,CAAC;IAE7D,IAAI,CAACC,SAAS,GAAGrB,UAAU,CAAC,IAAI,CAACO,iBAAiB,CAACa,cAAc,CAAC;EACpE;EAEAE,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACD,SAAS,CAACE,MAAM,CAAC,IAAI,CAACjB,iBAAiB,CAAC,IAAI,CAACC,iBAAiB,CAAC,CAAC;EACvE;EAEAiB,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACH,SAAS,CAACI,OAAO,CAAC,CAAC;EAC1B;AACF;AAEA,IAAI,CAACC,cAAc,CAACC,GAAG,CAACzB,4BAA4B,CAAC,EAAE;EACrDwB,cAAc,CAACE,MAAM,CACnB1B,4BAA4B,EAC5BC,0BACF,CAAC;AACH;AAiCA,OAAO,MAAM0B,yBAAyB,GAAGA,CAAC;EACxCvB,iBAAiB;EACjBwB,oBAAoB;EACpBC;AAC8B,CAAC,KAAK;EACpC,MAAMC,YAAY,GAAG,IAAI7B,0BAA0B,CAACG,iBAAiB,CAAC;EAEtE,IAAIwB,oBAAoB,EAAE;IACxB,CAACG,KAAK,CAACC,OAAO,CAACJ,oBAAoB,CAAC,GAChCA,oBAAoB,GACpB,CAACA,oBAAoB,CAAC,EACxBK,OAAO,CAAEC,iBAAiB,IAAK;MAC/BJ,YAAY,CAACb,WAAW,CAACiB,iBAAiB,CAAC;IAC7C,CAAC,CAAC;EACJ;EAEAL,uBAAuB,CAACZ,WAAW,CAACa,YAAY,CAAC;EAEjD,OAAOA,YAAY;AACrB,CAAC"}

package/dist/web-component/index.js

@@ -9,6 +9,5 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-export * from "./renderReactInWebComponent.js";
 export * from "./shadow-dom.js";
 //# sourceMappingURL=index.js.map

package/dist/web-component/index.js.map

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

package/dist/web-component/shadow-dom.js

@@ -8,8 +8,18 @@
  * 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 { createReactRootElements } from "./renderReactInWebComponent.js";
+ */export const createReactRootElements = () => {
+  const appRootElement = document.createElement("div");
+  const stylesRootElement = document.createElement("div");
+  appRootElement.style.setProperty("height", "inherit");
+  appRootElement.setAttribute("id", "app-root");
+  stylesRootElement.setAttribute("id", "style-root");
+  stylesRootElement.setAttribute("nonce", window.cspNonce);
+  return {
+    appRootElement,
+    stylesRootElement
+  };
+};
 export const createShadowDomElements = containerElement => {
   const shadowRoot = containerElement.attachShadow({
     mode: "open"

package/dist/web-component/shadow-dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow-dom.js","names":["createReactRootElements","createShadowDomElements","containerElement","shadowRoot","attachShadow","mode","appRootElement","stylesRootElement","appendChild","emotionRootElement","shadowRootElement","createShadowRootElement","document","createElement","setAttribute","window","cspNonce"],"sources":["../../src/web-component/shadow-dom.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 { createReactRootElements } from \"./renderReactInWebComponent\";\n\n/**\n * @deprecated Use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component.\n */\nexport const createShadowDomElements = (containerElement: HTMLElement) => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // Container for Emotion `<style>` elements.\n  const { appRootElement, stylesRootElement } = createReactRootElements();\n\n  shadowRoot.appendChild(appRootElement);\n  shadowRoot.appendChild(stylesRootElement);\n\n  return {\n    emotionRootElement: stylesRootElement,\n    shadowRootElement: appRootElement,\n  };\n};\n\n/**\n * @deprecated Use `createShadowDomElements` instead which returns an object instead of an array. It's otherwise the same.\n * @deprecated Ideally, use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component. */\nexport const createShadowRootElement = (\n  containerElement: HTMLElement,\n): [HTMLStyleElement, HTMLDivElement] => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // the element that styles will be cached into\n  const emotionRootElement = document.createElement(\"style\");\n  emotionRootElement.setAttribute(\"id\", \"style-root\");\n  emotionRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  // the element that emotion renders html into\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n\n  shadowRoot.appendChild(emotionRootElement);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return [emotionRootElement, shadowRootElement];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAYSA,uBAAuB;AAKhC,OAAO,MAAMC,uBAAuB,GAAIC,gBAA6B,IAAK;EACxE,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAM;IAAEC,cAAc;IAAEC;EAAkB,CAAC,GAAGP,uBAAuB,CAAC,CAAC;EAEvEG,UAAU,CAACK,WAAW,CAACF,cAAc,CAAC;EACtCH,UAAU,CAACK,WAAW,CAACD,iBAAiB,CAAC;EAEzC,OAAO;IACLE,kBAAkB,EAAEF,iBAAiB;IACrCG,iBAAiB,EAAEJ;EACrB,CAAC;AACH,CAAC;AAKD,OAAO,MAAMK,uBAAuB,GAClCT,gBAA6B,IACU;EACvC,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAMI,kBAAkB,GAAGG,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC1DJ,kBAAkB,CAACK,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EACnDL,kBAAkB,CAACK,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGzD,MAAMN,iBAAiB,GAAGE,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDH,iBAAiB,CAACI,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAEnDX,UAAU,CAACK,WAAW,CAACC,kBAAkB,CAAC;EAC1CN,UAAU,CAACK,WAAW,CAACE,iBAAiB,CAAC;EAEzC,OAAO,CAACD,kBAAkB,EAAEC,iBAAiB,CAAC;AAChD,CAAC"}
+{"version":3,"file":"shadow-dom.js","names":["createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce","createShadowDomElements","containerElement","shadowRoot","attachShadow","mode","appendChild","emotionRootElement","shadowRootElement","createShadowRootElement"],"sources":["../../src/web-component/shadow-dom.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-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\n/**\n * Creates elements for a Shadow DOM that Odyssey will render into.\n * The Emotion root is for `<style>` tags and the app root is for an app to render into.\n * These are bare elements that\n */\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", \"app-root\");\n  stylesRootElement.setAttribute(\"id\", \"style-root\");\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    /**\n     * The element your React root component renders into.\n     * React has to render or portal somewhere, and this element can be used for that root element.\n     *\n     * In the case of a web component, there is no defined root element, so you have to define it yourself.\n     */\n    appRootElement,\n    /**\n     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n     *\n     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n     */\n    stylesRootElement,\n  };\n};\n\nexport type ReactRootElements = ReturnType<typeof createReactRootElements>;\n\n/**\n * @deprecated Use `renderReactInWebComponent` from `@okta/odyssey-react-mui/ui-shell` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component.\n */\nexport const createShadowDomElements = (containerElement: HTMLElement) => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // Container for Emotion `<style>` elements.\n  const { appRootElement, stylesRootElement } = createReactRootElements();\n\n  shadowRoot.appendChild(appRootElement);\n  shadowRoot.appendChild(stylesRootElement);\n\n  return {\n    emotionRootElement: stylesRootElement,\n    shadowRootElement: appRootElement,\n  };\n};\n\n/**\n * @deprecated Use `createShadowDomElements` instead which returns an object instead of an array. It's otherwise the same.\n * @deprecated Ideally, use `renderReactInWebComponent` from `@okta/odyssey-react-mui/ui-shell` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component. */\nexport const createShadowRootElement = (\n  containerElement: HTMLElement,\n): [HTMLStyleElement, HTMLDivElement] => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // the element that styles will be cached into\n  const emotionRootElement = document.createElement(\"style\");\n  emotionRootElement.setAttribute(\"id\", \"style-root\");\n  emotionRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  // the element that emotion renders html into\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n\n  shadowRoot.appendChild(emotionRootElement);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return [emotionRootElement, shadowRootElement];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAOA,OAAO,MAAMA,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACpD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGvDF,cAAc,CAACI,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAErDL,cAAc,CAACM,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;EAC7CH,iBAAiB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAClDH,iBAAiB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAExD,OAAO;IAOLR,cAAc;IAMdG;EACF,CAAC;AACH,CAAC;AAOD,OAAO,MAAMM,uBAAuB,GAAIC,gBAA6B,IAAK;EACxE,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAM;IAAEb,cAAc;IAAEG;EAAkB,CAAC,GAAGJ,uBAAuB,CAAC,CAAC;EAEvEY,UAAU,CAACG,WAAW,CAACd,cAAc,CAAC;EACtCW,UAAU,CAACG,WAAW,CAACX,iBAAiB,CAAC;EAEzC,OAAO;IACLY,kBAAkB,EAAEZ,iBAAiB;IACrCa,iBAAiB,EAAEhB;EACrB,CAAC;AACH,CAAC;AAKD,OAAO,MAAMiB,uBAAuB,GAClCP,gBAA6B,IACU;EACvC,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAME,kBAAkB,GAAGd,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC1Da,kBAAkB,CAACT,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EACnDS,kBAAkB,CAACT,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGzD,MAAMQ,iBAAiB,GAAGf,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDc,iBAAiB,CAACV,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAEnDK,UAAU,CAACG,WAAW,CAACC,kBAAkB,CAAC;EAC1CJ,UAAU,CAACG,WAAW,CAACE,iBAAiB,CAAC;EAEzC,OAAO,CAACD,kBAAkB,EAAEC,iBAAiB,CAAC;AAChD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.28.1",
+  "version": "1.29.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -19,6 +19,9 @@
       "labs": [
         "./dist/src/labs/index.d.ts"
       ],
+      "ui-shell": [
+        "./dist/src/ui-shell/index.d.ts"
+      ],
       "test-selectors": [
         "./dist/src/test-selectors/index.d.ts"
       ]
@@ -33,6 +36,10 @@
       "types": "./dist/src/labs/index.d.ts",
       "default": "./dist/labs/index.js"
     },
+    "./ui-shell": {
+      "types": "./dist/src/ui-shell/index.d.ts",
+      "default": "./dist/ui-shell/index.js"
+    },
     "./test-selectors": {
       "types": "./dist/src/test-selectors/index.d.ts",
       "default": "./dist/test-selectors/index.js"
@@ -61,7 +68,7 @@
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^7.2.0",
-    "@okta/odyssey-design-tokens": "^1.28.1",
+    "@okta/odyssey-design-tokens": "^1.29.0",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
@@ -77,5 +84,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "114892c4072f9dc963e3dab57ee7fc6e3e9acfdd"
+  "gitHead": "07c7661c010d123c8461a9873c2526a6ff41cd0d"
 }

package/src/Breadcrumbs.tsx

@@ -80,7 +80,11 @@ export const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {
   }
 
   if (breadcrumbType === "currentPage") {
-    return <Subordinate color="textPrimary">{breadcrumbContent}</Subordinate>;
+    return (
+      <Subordinate ariaCurrent="page" color="textPrimary">
+        {breadcrumbContent}
+      </Subordinate>
+    );
   }
 
   // breadcrumbType === "listItem" is the default

package/src/Buttons/MenuItem.tsx

@@ -77,6 +77,7 @@ const MenuItem = ({
 
   return (
     <MuiMenuItem
+      aria-current={isSelected}
       /* eslint-disable-next-line jsx-a11y/no-autofocus */
       autoFocus={hasInitialFocus}
       className={