@okta/odyssey-react-mui 1.45.0 → 1.47.0

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

@@ -12,7 +12,6 @@
 
 import { memo, useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { CssBaseline } from "../CssBaseline.js";
 import { OdysseyProvider } from "../OdysseyProvider.js";
 import { NarrowUiShellContent } from "./NarrowUiShellContent.js";
 import { UiShellProvider } from "./UiShellProvider.js";
@@ -63,11 +62,12 @@ const UiShell = ({
     onError: onError,
     children: _jsx(OdysseyProvider, {
       emotionRootElement: uiShellStylesElement,
+      hasCssBaseline: true,
       shadowRootElement: uiShellAppElement,
-      children: _jsxs(ErrorBoundary, {
+      children: _jsx(ErrorBoundary, {
         fallback: errorComponent,
         onError: onError,
-        children: [_jsx(CssBaseline, {}), _jsxs(UiShellProvider, {
+        children: _jsxs(UiShellProvider, {
           appBackgroundColor: appBackgroundColor,
           appBackgroundContrastMode: appBackgroundContrastMode,
           closeSideNavMenu: closeSideNavMenu,
@@ -103,7 +103,7 @@ const UiShell = ({
             onError: onError,
             optionalComponents: optionalComponents
           })]
-        })]
+        })
       })
     })
   });

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

@@ -1 +1 @@
-{"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","CssBaseline","OdysseyProvider","NarrowUiShellContent","UiShellProvider","useUiShellBreakpoints","WideUiShellContent","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","errorComponent","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","breakpointConfig","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","sideNavBackgroundContrastColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","activeBreakpoint","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","hasSideNavProps","Boolean","hasSessionStorageState","isCollapsed","isCollapsible","MemoizedUiShell","displayName"],"sources":["../../../src/ui-shell/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, type SetStateAction, useEffect, useState } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { CssBaseline } from \"../CssBaseline.js\";\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport { MessageBus } from \"../tools/createMessageBus.js\";\nimport { type ReactRootElements } from \"../web-component/createReactRootElements.js\";\nimport { NarrowUiShellContent } from \"./NarrowUiShellContent.js\";\nimport {\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellProvider, UiShellProviderProps } from \"./UiShellProvider.js\";\nimport {\n  UiShellBreakpointConfig,\n  useUiShellBreakpoints,\n} from \"./useUiShellBreakpoints.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nconst errorComponent = <div data-error />;\n\nexport type UiShellProps = {\n  /**\n   * Customized breakpoints for UI Shell.\n   *\n   * The defaults are set for you. Pass these only if your app doesn't work properly with the defaults (like Admin).\n   */\n  breakpointConfig?: UiShellBreakpointConfig;\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: MessageBus<\n    SetStateAction<UiShellNavComponentProps>\n  >[\"subscribe\"];\n  /**\n   * Element inside UI Shell's React root component renders into. If using a web component, this is going to exist inside it.\n   */\n  uiShellAppElement: ReactRootElements[\"appRootElement\"];\n  /**\n   * Typically, this is your `<head>` element. If using a web component, you need to create one yourself as Shadow DOM's don't have a `<head>`.\n   */\n  uiShellStylesElement: ReactRootElements[\"stylesRootElement\"];\n} & UiShellProviderProps &\n  Pick<\n    UiShellContentProps,\n    | \"appElement\"\n    | \"appElementScrollingMode\"\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  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement,\n  appElementScrollingMode,\n  breakpointConfig,\n  closeSideNavMenu,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  sideNavBackgroundContrastColor,\n  subscribeToCloseRightSideMenu,\n  subscribeToCloseSideNavMenu,\n  subscribeToPropChanges,\n  topNavBackgroundColor,\n  uiShellAppElement,\n  uiShellStylesElement,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  const activeBreakpoint = useUiShellBreakpoints(breakpointConfig);\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 activeBreakpoint === \"none\" ? null : (\n    <ErrorBoundary fallback={errorComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={uiShellStylesElement}\n        shadowRootElement={uiShellAppElement}\n      >\n        <ErrorBoundary fallback={errorComponent} onError={onError}>\n          <CssBaseline />\n\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            closeSideNavMenu={closeSideNavMenu}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            sideNavBackgroundContrastColor={sideNavBackgroundContrastColor}\n            subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n            subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"narrow\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasSideNavProps={Boolean(componentProps.sideNavProps)}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n\n            {(activeBreakpoint === \"medium\" || activeBreakpoint === \"wide\") && (\n              <WideUiShellContent\n                {...{\n                  ...componentProps,\n                  ...{\n                    sideNavProps: {\n                      ...componentProps.sideNavProps,\n                      hasSessionStorageState: activeBreakpoint === \"wide\",\n                      isCollapsed:\n                        activeBreakpoint === \"medium\" ||\n                        componentProps.sideNavProps?.isCollapsed,\n                      isCollapsible:\n                        activeBreakpoint === \"medium\" ||\n                        componentProps.sideNavProps?.isCollapsible,\n                      // We have to use `as` because sideNavProps expects you to have `sideNavItems` defined even though it had to be passed in `...componentProps.sideNavProps`.\n                    } as typeof componentProps.sideNavProps,\n                  },\n                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasSideNavProps={Boolean(componentProps.sideNavProps)}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n          </UiShellProvider>\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","OdysseyProvider","NarrowUiShellContent","UiShellProvider","useUiShellBreakpoints","WideUiShellContent","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","errorComponent","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","breakpointConfig","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","sideNavBackgroundContrastColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","activeBreakpoint","unsubscribe","fallback","children","emotionRootElement","hasCssBaseline","shadowRootElement","hasSideNavProps","Boolean","hasSessionStorageState","isCollapsed","isCollapsible","MemoizedUiShell","displayName"],"sources":["../../../src/ui-shell/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, type SetStateAction, useEffect, useState } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport { MessageBus } from \"../tools/createMessageBus.js\";\nimport { type ReactRootElements } from \"../web-component/createReactRootElements.js\";\nimport { NarrowUiShellContent } from \"./NarrowUiShellContent.js\";\nimport {\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellProvider, UiShellProviderProps } from \"./UiShellProvider.js\";\nimport {\n  UiShellBreakpointConfig,\n  useUiShellBreakpoints,\n} from \"./useUiShellBreakpoints.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nconst errorComponent = <div data-error />;\n\nexport type UiShellProps = {\n  /**\n   * Customized breakpoints for UI Shell.\n   *\n   * The defaults are set for you. Pass these only if your app doesn't work properly with the defaults (like Admin).\n   */\n  breakpointConfig?: UiShellBreakpointConfig;\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: MessageBus<\n    SetStateAction<UiShellNavComponentProps>\n  >[\"subscribe\"];\n  /**\n   * Element inside UI Shell's React root component renders into. If using a web component, this is going to exist inside it.\n   */\n  uiShellAppElement: ReactRootElements[\"appRootElement\"];\n  /**\n   * Typically, this is your `<head>` element. If using a web component, you need to create one yourself as Shadow DOM's don't have a `<head>`.\n   */\n  uiShellStylesElement: ReactRootElements[\"stylesRootElement\"];\n} & UiShellProviderProps &\n  Pick<\n    UiShellContentProps,\n    | \"appElement\"\n    | \"appElementScrollingMode\"\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  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement,\n  appElementScrollingMode,\n  breakpointConfig,\n  closeSideNavMenu,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  sideNavBackgroundContrastColor,\n  subscribeToCloseRightSideMenu,\n  subscribeToCloseSideNavMenu,\n  subscribeToPropChanges,\n  topNavBackgroundColor,\n  uiShellAppElement,\n  uiShellStylesElement,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  const activeBreakpoint = useUiShellBreakpoints(breakpointConfig);\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 activeBreakpoint === \"none\" ? null : (\n    <ErrorBoundary fallback={errorComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={uiShellStylesElement}\n        hasCssBaseline\n        shadowRootElement={uiShellAppElement}\n      >\n        <ErrorBoundary fallback={errorComponent} onError={onError}>\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            closeSideNavMenu={closeSideNavMenu}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            sideNavBackgroundContrastColor={sideNavBackgroundContrastColor}\n            subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n            subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"narrow\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasSideNavProps={Boolean(componentProps.sideNavProps)}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n\n            {(activeBreakpoint === \"medium\" || activeBreakpoint === \"wide\") && (\n              <WideUiShellContent\n                {...{\n                  ...componentProps,\n                  ...{\n                    sideNavProps: {\n                      ...componentProps.sideNavProps,\n                      hasSessionStorageState: activeBreakpoint === \"wide\",\n                      isCollapsed:\n                        activeBreakpoint === \"medium\" ||\n                        componentProps.sideNavProps?.isCollapsed,\n                      isCollapsible:\n                        activeBreakpoint === \"medium\" ||\n                        componentProps.sideNavProps?.isCollapsible,\n                      // We have to use `as` because sideNavProps expects you to have `sideNavItems` defined even though it had to be passed in `...componentProps.sideNavProps`.\n                    } as typeof componentProps.sideNavProps,\n                  },\n                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasSideNavProps={Boolean(componentProps.sideNavProps)}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n          </UiShellProvider>\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/WideUiShellContent.js

@@ -18,6 +18,7 @@ import { AppSwitcher } from "./AppSwitcher/index.js";
 import { InnerAppContainer } from "./InnerAppContainer.js";
 import { SideNav } from "./SideNav/index.js";
 import { TopNav } from "./TopNav/index.js";
+import { TURN_OFF_APP_SWITCHER } from "./uiShellContentTypes.js";
 import { useUiShellContext } from "./UiShellProvider.js";
 import { emptySideNavItems } from "./uiShellSharedConstants.js";
 import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShellAppArea.js";
@@ -106,7 +107,7 @@ const WideUiShellContent = ({
           isLoading: true,
           selectedAppName: ""
         })
-      }), appSwitcherProps && _jsx(ErrorBoundary, {
+      }), appSwitcherProps && appSwitcherProps !== TURN_OFF_APP_SWITCHER && _jsx(ErrorBoundary, {
         fallback: null,
         onError: onError,
         children: _jsx(AppSwitcher, {

package/dist/esm/ui-shell/WideUiShellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WideUiShellContent.js","names":["styled","memo","useRef","ErrorBoundary","useOdysseyDesignTokens","AppSwitcher","InnerAppContainer","SideNav","TopNav","useUiShellContext","emptySideNavItems","useMatchAppElementToUiShellAppArea","useScrollState","jsx","_jsx","jsxs","_jsxs","appSwitcherDefaultAppIcons","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","gridArea","position","StyledAppSwitcherContainer","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","WideUiShellContent","appElement","appElementScrollingMode","appSwitcherProps","hasStandardAppContentPadding","hasSideNavProps","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","uiShellContext","isContentScrolled","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","paddingMode","uiShellResizableRefs","ref","children","banners","includes","fallback","appIcons","isLoading","selectedAppName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","undefined","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","MemoizedWideUiShellContent","displayName"],"sources":["../../../src/ui-shell/WideUiShellContent.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, useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { AppSwitcherAppIconData } from \"./AppSwitcher/AppSwitcherApp.js\";\nimport { AppSwitcher } from \"./AppSwitcher/index.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport { SideNav } from \"./SideNav/index.js\";\nimport { TopNav } from \"./TopNav/index.js\";\nimport {\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { emptySideNavItems } from \"./uiShellSharedConstants.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { useScrollState } from \"./useScrollState.js\";\n\nconst appSwitcherDefaultAppIcons = [] satisfies AppSwitcherAppIconData[];\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  backgroundColor: appBackgroundColor,\n  gridArea: \"app-content\",\n  position: \"relative\",\n}));\n\nconst StyledAppSwitcherContainer = styled(\"div\")({\n  gridArea: \"app-switcher\",\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 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 type WideUiShellContentProps = UiShellNavComponentProps &\n  UiShellContentProps;\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 WideUiShellContent = ({\n  appElement,\n  appElementScrollingMode,\n  appSwitcherProps,\n  hasStandardAppContentPadding = true,\n  hasSideNavProps,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: WideUiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  const { isContentScrolled } = useScrollState(appElement);\n\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellAppAreaRef = useRef<HTMLDivElement>(null);\n\n  const { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n    appElement,\n    appElementScrollingMode,\n    paddingMode: hasStandardAppContentPadding ? \"comfortable\" : \"none\",\n    uiShellAppAreaRef,\n    uiShellResizableRefs: [\n      sideNavContainerRef,\n      topNavContainerRef,\n      uiShellAppAreaRef,\n    ],\n  });\n\n  return (\n    <StyledShellContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      ref={parentContainerRef}\n    >\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\n                  appIcons={appSwitcherDefaultAppIcons}\n                  isLoading\n                  selectedAppName=\"\"\n                />\n              </ErrorBoundary>\n            )\n        }\n\n        {appSwitcherProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <AppSwitcher {...appSwitcherProps} />\n          </ErrorBoundary>\n        )}\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer ref={sideNavContainerRef}>\n        {\n          /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n          initialVisibleSections?.includes(\"SideNav\") && !hasSideNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <SideNav isLoading sideNavItems={emptySideNavItems} />\n            </ErrorBoundary>\n          )\n        }\n\n        {hasSideNavProps && 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 ref={topNavContainerRef}>\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\n        {topNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <TopNav\n              {...topNavProps}\n              leftSideComponent={optionalComponents?.topNavLeftSide}\n              rightSideComponent={optionalComponents?.topNavRightSide}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        ref={uiShellAppAreaRef}\n        tabIndex={0}\n      >\n        <InnerAppContainer isContentScrolled={isContentScrolled} />\n      </StyledAppContainer>\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedWideUiShellContent = memo(WideUiShellContent);\nMemoizedWideUiShellContent.displayName = \"WideUiShellContent\";\n\nexport { MemoizedWideUiShellContent as WideUiShellContent };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"WideUiShellContent.js","names":["styled","memo","useRef","ErrorBoundary","useOdysseyDesignTokens","AppSwitcher","InnerAppContainer","SideNav","TopNav","TURN_OFF_APP_SWITCHER","useUiShellContext","emptySideNavItems","useMatchAppElementToUiShellAppArea","useScrollState","jsx","_jsx","jsxs","_jsxs","appSwitcherDefaultAppIcons","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","gridArea","position","StyledAppSwitcherContainer","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","WideUiShellContent","appElement","appElementScrollingMode","appSwitcherProps","hasStandardAppContentPadding","hasSideNavProps","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","uiShellContext","isContentScrolled","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","paddingMode","uiShellResizableRefs","ref","children","banners","includes","fallback","appIcons","isLoading","selectedAppName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","undefined","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","MemoizedWideUiShellContent","displayName"],"sources":["../../../src/ui-shell/WideUiShellContent.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, useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { AppSwitcherAppIconData } from \"./AppSwitcher/AppSwitcherApp.js\";\nimport { AppSwitcher } from \"./AppSwitcher/index.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport { SideNav } from \"./SideNav/index.js\";\nimport { TopNav } from \"./TopNav/index.js\";\nimport {\n  TURN_OFF_APP_SWITCHER,\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { emptySideNavItems } from \"./uiShellSharedConstants.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { useScrollState } from \"./useScrollState.js\";\n\nconst appSwitcherDefaultAppIcons = [] satisfies AppSwitcherAppIconData[];\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  backgroundColor: appBackgroundColor,\n  gridArea: \"app-content\",\n  position: \"relative\",\n}));\n\nconst StyledAppSwitcherContainer = styled(\"div\")({\n  gridArea: \"app-switcher\",\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 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 type WideUiShellContentProps = UiShellNavComponentProps &\n  UiShellContentProps;\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 WideUiShellContent = ({\n  appElement,\n  appElementScrollingMode,\n  appSwitcherProps,\n  hasStandardAppContentPadding = true,\n  hasSideNavProps,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: WideUiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  const { isContentScrolled } = useScrollState(appElement);\n\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellAppAreaRef = useRef<HTMLDivElement>(null);\n\n  const { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n    appElement,\n    appElementScrollingMode,\n    paddingMode: hasStandardAppContentPadding ? \"comfortable\" : \"none\",\n    uiShellAppAreaRef,\n    uiShellResizableRefs: [\n      sideNavContainerRef,\n      topNavContainerRef,\n      uiShellAppAreaRef,\n    ],\n  });\n\n  return (\n    <StyledShellContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      ref={parentContainerRef}\n    >\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\n                  appIcons={appSwitcherDefaultAppIcons}\n                  isLoading\n                  selectedAppName=\"\"\n                />\n              </ErrorBoundary>\n            )\n        }\n\n        {appSwitcherProps && appSwitcherProps !== TURN_OFF_APP_SWITCHER && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <AppSwitcher {...appSwitcherProps} />\n          </ErrorBoundary>\n        )}\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer ref={sideNavContainerRef}>\n        {\n          /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n          initialVisibleSections?.includes(\"SideNav\") && !hasSideNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <SideNav isLoading sideNavItems={emptySideNavItems} />\n            </ErrorBoundary>\n          )\n        }\n\n        {hasSideNavProps && 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 ref={topNavContainerRef}>\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\n        {topNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <TopNav\n              {...topNavProps}\n              leftSideComponent={optionalComponents?.topNavLeftSide}\n              rightSideComponent={optionalComponents?.topNavRightSide}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        ref={uiShellAppAreaRef}\n        tabIndex={0}\n      >\n        <InnerAppContainer isContentScrolled={isContentScrolled} />\n      </StyledAppContainer>\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedWideUiShellContent = memo(WideUiShellContent);\nMemoizedWideUiShellContent.displayName = \"WideUiShellContent\";\n\nexport { MemoizedWideUiShellContent as WideUiShellContent };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/uiShellContentTypes.js

@@ -11,4 +11,5 @@
  */
 
 export const subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
+export const TURN_OFF_APP_SWITCHER = Symbol("Turn off AppSwitcher in the event of an error.");
 //# sourceMappingURL=uiShellContentTypes.js.map

package/dist/esm/ui-shell/uiShellContentTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"uiShellContentTypes.js","names":["subComponentNames"],"sources":["../../../src/ui-shell/uiShellContentTypes.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { ReactElement } from \"react\";\nimport { ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcherProps } from \"./AppSwitcher/AppSwitcher.js\";\nimport { SideNavProps } from \"./SideNav/types.js\";\nimport { TopNavProps } from \"./TopNav/TopNav.js\";\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   * **WARNING:** UI Shell will modify the styling of this element.\n   * HTML element where the app gets rendered. This typically called the React root element for your app.\n   *\n   * When passed, the app is expected to render into this element, not the Shadow DOM.\n   *\n   * UI Shell will position this element appropriately to match the content area inside the Shadow DOM.\n   *\n   * A major benefit to having this element separate from UI Shell is related to encapsulation. UI Shell has the capability of rendering inside a web component, but in doing so, the app would be subject to the styles in the web component and not the page itself.\n   * The app should either be in its own web component or use the global styles, and having this separate element allows us to accomplish that goal.\n   */\n  appElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app element area.\n   *\n   * In the case of an app wanting to control their own scrolling, use `\"none\"`.\n   *\n   * Most apps will want to use `\"vertical\"` and let UI Shell manage scrolling behavior.\n   */\n  appElementScrollingMode: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * Says if `sideNavProps` has been passed in. This is important for rendering as we will override `sideNavProps` internally, but we need to know if they were passed in for showing the loading state.\n   */\n  hasSideNavProps: boolean;\n  /**\n   * Defaults to `true`.\n   *\n   * If `false`, the content area will have no padding provided. This is for the case where an app wants to manage this separate from UI Shell.\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Parts of UI Shell that are visible when rendered.\n   *\n   * For example, if `sideNavProps` is `undefined`, should there be a space left for side nav or should that space not exist?\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    /**\n     * Spot for banners to go at the top of the page.\n     */\n    banners?: ReactElement;\n    /**\n     * In narrow view, this is the right-side menu area.\n     */\n    rightSideMenu?: ReactElement;\n    /**\n     * Footer in the side nav.\n     */\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the left-aligned half.\n     */\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the right-aligned half.\n     */\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAU","ignoreList":[]}
+{"version":3,"file":"uiShellContentTypes.js","names":["subComponentNames","TURN_OFF_APP_SWITCHER","Symbol"],"sources":["../../../src/ui-shell/uiShellContentTypes.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { ReactElement } from \"react\";\nimport { ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcherProps } from \"./AppSwitcher/AppSwitcher.js\";\nimport { SideNavProps } from \"./SideNav/types.js\";\nimport { TopNavProps } from \"./TopNav/TopNav.js\";\n\nexport const subComponentNames = [\"TopNav\", \"SideNav\", \"AppSwitcher\"] as const;\nexport type SubComponentName = (typeof subComponentNames)[number];\n\nexport const TURN_OFF_APP_SWITCHER = Symbol(\n  \"Turn off AppSwitcher in the event of an error.\",\n);\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   *\n   * In this special case, a value of `TURN_OFF_APP_SWITCHER` tells the `appSwitcher` to not appear. This can occur if there's an error loading the items. In that case, we don't want it to appear.\n   */\n  appSwitcherProps?: AppSwitcherProps | typeof TURN_OFF_APP_SWITCHER;\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   * **WARNING:** UI Shell will modify the styling of this element.\n   * HTML element where the app gets rendered. This typically called the React root element for your app.\n   *\n   * When passed, the app is expected to render into this element, not the Shadow DOM.\n   *\n   * UI Shell will position this element appropriately to match the content area inside the Shadow DOM.\n   *\n   * A major benefit to having this element separate from UI Shell is related to encapsulation. UI Shell has the capability of rendering inside a web component, but in doing so, the app would be subject to the styles in the web component and not the page itself.\n   * The app should either be in its own web component or use the global styles, and having this separate element allows us to accomplish that goal.\n   */\n  appElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app element area.\n   *\n   * In the case of an app wanting to control their own scrolling, use `\"none\"`.\n   *\n   * Most apps will want to use `\"vertical\"` and let UI Shell manage scrolling behavior.\n   */\n  appElementScrollingMode: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * Says if `sideNavProps` has been passed in. This is important for rendering as we will override `sideNavProps` internally, but we need to know if they were passed in for showing the loading state.\n   */\n  hasSideNavProps: boolean;\n  /**\n   * Defaults to `true`.\n   *\n   * If `false`, the content area will have no padding provided. This is for the case where an app wants to manage this separate from UI Shell.\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Parts of UI Shell that are visible when rendered.\n   *\n   * For example, if `sideNavProps` is `undefined`, should there be a space left for side nav or should that space not exist?\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    /**\n     * Spot for banners to go at the top of the page.\n     */\n    banners?: ReactElement;\n    /**\n     * In narrow view, this is the right-side menu area.\n     */\n    rightSideMenu?: ReactElement;\n    /**\n     * Footer in the side nav.\n     */\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the left-aligned half.\n     */\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the right-aligned half.\n     */\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAU;AAG9E,OAAO,MAAMC,qBAAqB,GAAGC,MAAM,CACzC,gDACF,CAAC","ignoreList":[]}

package/dist/esm/{shadow-dom/shadow-dom.js → web-component/createShadowDomElements.js}

@@ -10,8 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { createReactRootElements } from "../web-component/createReactRootElements.js";
-export const createShadowDomElements = containerElement => {
+import { createReactRootElements } from "./createReactRootElements.js";
+import { removeGlobalStylesFromShadowDom } from "./removeGlobalStylesFromShadowDom.js";
+export const createShadowDomElements = (containerElement, nonce = window.cspNonce) => {
   const shadowRoot = containerElement.attachShadow({
     mode: "open"
   });
@@ -21,6 +22,10 @@ export const createShadowDomElements = containerElement => {
   } = createReactRootElements();
   shadowRoot.appendChild(appRootElement);
   shadowRoot.appendChild(stylesRootElement);
+  removeGlobalStylesFromShadowDom({
+    nonce,
+    stylesRootElement
+  });
   return {
     emotionRootElement: stylesRootElement,
     shadowRootElement: appRootElement
@@ -39,4 +44,4 @@ export const createShadowRootElement = containerElement => {
   shadowRoot.appendChild(shadowRootElement);
   return [emotionRootElement, shadowRootElement];
 };
-//# sourceMappingURL=shadow-dom.js.map
+//# sourceMappingURL=createShadowDomElements.js.map

package/dist/esm/web-component/createShadowDomElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createShadowDomElements.js","names":["createReactRootElements","removeGlobalStylesFromShadowDom","createShadowDomElements","containerElement","nonce","window","cspNonce","shadowRoot","attachShadow","mode","appRootElement","stylesRootElement","appendChild","emotionRootElement","shadowRootElement","createShadowRootElement","document","createElement","setAttribute"],"sources":["../../../src/web-component/createShadowDomElements.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 \"./createReactRootElements.js\";\nimport { removeGlobalStylesFromShadowDom } from \"./removeGlobalStylesFromShadowDom.js\";\n\n/**\n * This function is necessary only 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 *\n * In most cases, you'll want to use `renderReactInWebComponent` from `@okta/odyssey-react-mui/web-component` instead.\n */\nexport const createShadowDomElements = (\n  containerElement: HTMLElement,\n  nonce: string = window.cspNonce,\n) => {\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  removeGlobalStylesFromShadowDom({\n    nonce,\n    stylesRootElement,\n  });\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/web-component` 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;;AAEA,SAASA,uBAAuB,QAAQ,8BAA8B;AACtE,SAASC,+BAA+B,QAAQ,sCAAsC;AAOtF,OAAO,MAAMC,uBAAuB,GAAGA,CACrCC,gBAA6B,EAC7BC,KAAa,GAAGC,MAAM,CAACC,QAAQ,KAC5B;EACH,MAAMC,UAAU,GAAGJ,gBAAgB,CAACK,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAM;IAAEC,cAAc;IAAEC;EAAkB,CAAC,GAAGX,uBAAuB,CAAC,CAAC;EAEvEO,UAAU,CAACK,WAAW,CAACF,cAAc,CAAC;EACtCH,UAAU,CAACK,WAAW,CAACD,iBAAiB,CAAC;EAEzCV,+BAA+B,CAAC;IAC9BG,KAAK;IACLO;EACF,CAAC,CAAC;EAEF,OAAO;IACLE,kBAAkB,EAAEF,iBAAiB;IACrCG,iBAAiB,EAAEJ;EACrB,CAAC;AACH,CAAC;AAKD,OAAO,MAAMK,uBAAuB,GAClCZ,gBAA6B,IACU;EACvC,MAAMI,UAAU,GAAGJ,gBAAgB,CAACK,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,EAAEb,MAAM,CAACC,QAAQ,CAAC;EAGzD,MAAMQ,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","ignoreList":[]}

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

@@ -10,5 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+export * from "./createReactRootElements.js";
+export * from "./createShadowDomElements.js";
+export * from "./removeGlobalStylesFromShadowDom.js";
 export * from "./renderReactInWebComponent.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/web-component/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,gCAAgC","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/web-component/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 \"./createReactRootElements.js\";\nexport * from \"./createShadowDomElements.js\";\nexport * from \"./removeGlobalStylesFromShadowDom.js\";\nexport * from \"./renderReactInWebComponent.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,8BAA8B;AAC5C,cAAc,8BAA8B;AAC5C,cAAc,sCAAsC;AACpD,cAAc,gCAAgC","ignoreList":[]}

package/dist/esm/web-component/odysseyWebComponentVersion.generated.js

@@ -8,5 +8,5 @@
  * 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 default "1-45-0";
+ */export default "1-47-0";
 //# sourceMappingURL=odysseyWebComponentVersion.generated.js.map

package/dist/esm/web-component/odysseyWebComponentVersion.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"odysseyWebComponentVersion.generated.js","names":[],"sources":["../../../src/web-component/odysseyWebComponentVersion.generated.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 * DO NOT UPDATE THIS FILE MANUALLY\n * This file is managed by scripts/updateWebComponentVersion.ts and any changes made will be overwritten\n * This script only needs to be run during release, and shouldn't be used during local development.\n */\n\nexport default \"1-45-0\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAQA,eAAe,QAAQ","ignoreList":[]}
+{"version":3,"file":"odysseyWebComponentVersion.generated.js","names":[],"sources":["../../../src/web-component/odysseyWebComponentVersion.generated.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 * DO NOT UPDATE THIS FILE MANUALLY\n * This file is managed by scripts/updateWebComponentVersion.ts and any changes made will be overwritten\n * This script only needs to be run during release, and shouldn't be used during local development.\n */\n\nexport default \"1-47-0\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAQA,eAAe,QAAQ","ignoreList":[]}

package/dist/esm/web-component/removeGlobalStylesFromShadowDom.js

@@ -0,0 +1,28 @@
+/*!
+ * Copyright (c) 2025-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 const shadowDomHostStyles = `
+  :host {
+    all: initial;
+    contain: content;
+  }
+`;
+export const removeGlobalStylesFromShadowDom = ({
+  nonce,
+  stylesRootElement
+}) => {
+  const styleHostElement = document.createElement("style");
+  styleHostElement.setAttribute("nonce", nonce);
+  styleHostElement.innerHTML = shadowDomHostStyles;
+  stylesRootElement.appendChild(styleHostElement);
+};
+//# sourceMappingURL=removeGlobalStylesFromShadowDom.js.map

package/dist/esm/web-component/removeGlobalStylesFromShadowDom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"removeGlobalStylesFromShadowDom.js","names":["shadowDomHostStyles","removeGlobalStylesFromShadowDom","nonce","stylesRootElement","styleHostElement","document","createElement","setAttribute","innerHTML","appendChild"],"sources":["../../../src/web-component/removeGlobalStylesFromShadowDom.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { ReactRootElements } from \"./createReactRootElements.js\";\n\nexport const shadowDomHostStyles = `\n  :host {\n    all: initial;\n    contain: content;\n  }\n`;\n\nexport const removeGlobalStylesFromShadowDom = ({\n  nonce,\n  stylesRootElement,\n}: {\n  nonce: string;\n  stylesRootElement: ReactRootElements[\"stylesRootElement\"];\n}) => {\n  const styleHostElement = document.createElement(\"style\");\n\n  styleHostElement.setAttribute(\"nonce\", nonce);\n\n  styleHostElement.innerHTML = shadowDomHostStyles;\n\n  stylesRootElement.appendChild(styleHostElement);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAO,MAAMA,mBAAmB,GAAG;AACnC;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGA,CAAC;EAC9CC,KAAK;EACLC;AAIF,CAAC,KAAK;EACJ,MAAMC,gBAAgB,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAExDF,gBAAgB,CAACG,YAAY,CAAC,OAAO,EAAEL,KAAK,CAAC;EAE7CE,gBAAgB,CAACI,SAAS,GAAGR,mBAAmB;EAEhDG,iBAAiB,CAACM,WAAW,CAACL,gBAAgB,CAAC;AACjD,CAAC","ignoreList":[]}

package/dist/esm/web-component/renderReactInWebComponent.js

@@ -12,6 +12,7 @@
 
 import { createReactRootElements } from "./createReactRootElements.js";
 import version from "./odysseyWebComponentVersion.generated.js";
+import { removeGlobalStylesFromShadowDom } from "./removeGlobalStylesFromShadowDom.js";
 export const webComponentDataAttributeName = "data-odyssey-react-web-component";
 export const versionedWebComponentName = `odyssey-react-web-component-${version}`.toLowerCase();
 const SsrFriendlyHtmlElementClass = "HTMLElement" in globalThis ? HTMLElement : class {};
@@ -32,15 +33,10 @@ export class WebComponentClass extends SsrFriendlyHtmlElementClass {
     });
     shadowRoot.appendChild(stylesRootElement);
     shadowRoot.appendChild(appRootElement);
-    const styleHostElement = document.createElement("style");
-    styleHostElement.setAttribute("nonce", window.cspNonce);
-    styleHostElement.innerHTML = `
-      :host {
-        all: initial;
-        contain: content;
-      }
-    `;
-    stylesRootElement.appendChild(styleHostElement);
+    removeGlobalStylesFromShadowDom({
+      nonce: window.cspNonce,
+      stylesRootElement
+    });
   }
   setGetReactComponent(getReactComponent) {
     this.reactRootPromise = this.reactRootPromise.then(reactRoot => {

package/dist/esm/web-component/renderReactInWebComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderReactInWebComponent.js","names":["createReactRootElements","version","webComponentDataAttributeName","versionedWebComponentName","toLowerCase","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","WebComponentClass","getReactComponent","reactRootElements","elementName","localName","reactRootPromise","Promise","resolve","constructor","appRootElement","stylesRootElement","shadowRoot","attachShadow","mode","appendChild","styleHostElement","document","createElement","setAttribute","window","cspNonce","innerHTML","setGetReactComponent","then","reactRoot","render","connectedCallback","Error","createRoot","disconnectedCallback","unmount","getReactWebComponent","webComponentName","customElements","get","define","element","renderReactInWebComponent","webComponentChildren","webComponentParentElement","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/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 { Root } from \"react-dom/client\";\n\nimport { type ReactNode } from \"react\";\n\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"./createReactRootElements.js\";\nimport version from \"./odysseyWebComponentVersion.generated.js\";\n\ninterface GetReactWebComponentOptions {\n  getReactComponent: (reactRootElements: ReactRootElements) => ReactNode;\n  webComponentName?: string;\n}\n\n// Used by selenium when selecting for odyssey web components regardless of their name.\nexport const webComponentDataAttributeName = \"data-odyssey-react-web-component\";\n\n// Unique name to avoid multiple versions of odyssey overwriting each other's implementations\nexport const versionedWebComponentName =\n  `odyssey-react-web-component-${version}`.toLowerCase();\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class WebComponentClass extends SsrFriendlyHtmlElementClass {\n  #getReactComponent: GetReactComponentInWebComponent | null = null;\n  readonly #reactRootElements: ReactRootElements;\n  public readonly elementName: string = this.localName;\n  // public for testing\n  public reactRootPromise: Promise<Root | null> = Promise.resolve(null);\n\n  constructor() {\n    super();\n\n    this.#reactRootElements = createReactRootElements();\n    const { appRootElement, stylesRootElement } = this.#reactRootElements;\n\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n    shadowRoot.appendChild(stylesRootElement);\n    shadowRoot.appendChild(appRootElement);\n\n    const styleHostElement = document.createElement(\"style\");\n    styleHostElement.setAttribute(\"nonce\", window.cspNonce);\n    styleHostElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n    stylesRootElement.appendChild(styleHostElement);\n  }\n\n  /**\n   * Provides the function used to initialize react content that is specific to this instance\n   * of the web component, which is used later in the connectedCallback.\n   *\n   * Always set immediately after creation via document.createElement\n   */\n  setGetReactComponent(getReactComponent: GetReactComponentInWebComponent) {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      this.#getReactComponent = getReactComponent;\n      if (reactRoot) {\n        // connectedCallback has already been fired. Need to mount this content to the existing root\n        reactRoot.render(this.#getReactComponent(this.#reactRootElements));\n      } else {\n        // Nothing to do. Content will be mounted when connectedCallback is called\n      }\n\n      return reactRoot;\n    });\n  }\n\n  connectedCallback() {\n    this.reactRootPromise = this.reactRootPromise\n      .then((reactRoot) => {\n        if (reactRoot) {\n          // Shouldn't ever happen. connected and disconnected should never be called out of order\n          throw new Error(\n            `connectedCallback fired when reactRoot is already mounted.`,\n          );\n        }\n\n        // Ensure react root is available before mounting\n        // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n        return import(\"react-dom/client\").then(({ createRoot }) =>\n          createRoot(this.#reactRootElements.appRootElement),\n        );\n      })\n      .then((reactRoot) => {\n        if (!this.#getReactComponent) {\n          // getReactComponent hasn't been set yet. Content will be mounted once it's set.\n        } else {\n          reactRoot.render(this.#getReactComponent(this.#reactRootElements));\n        }\n        return reactRoot;\n      });\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      if (!reactRoot) {\n        // Shouldn't ever happen\n        throw new Error(\n          `disconnectedCallback fired when reactRoot is already unmounted.`,\n        );\n      }\n\n      reactRoot.unmount();\n      // Set root to null. We don't want to attempt to render to a root that's already been unmounted.\n      return null;\n    });\n  }\n}\n\n/**\n * Returns a constructed web component which manages it's own shadow dom and react dom roots\n * A custom name can be specified, otherwise a default is provided\n */\nexport const getReactWebComponent = ({\n  webComponentName = versionedWebComponentName,\n  getReactComponent,\n}: GetReactWebComponentOptions) => {\n  // This name hasn't been defined yet. Add a definition for it before constructing one.\n  if (!customElements.get(webComponentName)) {\n    customElements.define(webComponentName, WebComponentClass);\n  }\n\n  const element = document.createElement(webComponentName) as InstanceType<\n    typeof WebComponentClass\n  >;\n  // Set selenium attribute so this can be selected\n  element.setAttribute(webComponentDataAttributeName, \"\");\n  // function used for creating react content\n  element.setGetReactComponent(getReactComponent);\n  return element;\n};\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\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   * Optional name given to this web component.\n   * Defaults to a 'odyssey-react-wc-' plus the current odyssey version\n   */\n  webComponentName?: string;\n} & (\n  | {\n      /**\n       * The 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      webComponentParentElement: HTMLElement;\n      webComponentRootElement?: never;\n    }\n  | {\n      webComponentParentElement?: HTMLElement;\n      /**\n       * @deprecated Use `webComponentParentElement` instead.\n       */\n      webComponentRootElement: HTMLElement;\n    }\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  webComponentName,\n  getReactComponent,\n  webComponentChildren,\n  webComponentParentElement,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = getReactWebComponent({\n    getReactComponent,\n    webComponentName,\n  });\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  if (webComponentParentElement) {\n    webComponentParentElement.appendChild(reactElement);\n  }\n  // Remove this condition when `webComponentRootElement` is no longer a prop.\n  else if (webComponentRootElement) {\n    webComponentRootElement.appendChild(reactElement);\n  }\n\n  return reactElement;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderReactInWebComponent.js","names":["createReactRootElements","version","removeGlobalStylesFromShadowDom","webComponentDataAttributeName","versionedWebComponentName","toLowerCase","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","WebComponentClass","getReactComponent","reactRootElements","elementName","localName","reactRootPromise","Promise","resolve","constructor","appRootElement","stylesRootElement","shadowRoot","attachShadow","mode","appendChild","nonce","window","cspNonce","setGetReactComponent","then","reactRoot","render","connectedCallback","Error","createRoot","disconnectedCallback","unmount","getReactWebComponent","webComponentName","customElements","get","define","element","document","createElement","setAttribute","renderReactInWebComponent","webComponentChildren","webComponentParentElement","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/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 { Root } from \"react-dom/client\";\n\nimport { type ReactNode } from \"react\";\n\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"./createReactRootElements.js\";\nimport version from \"./odysseyWebComponentVersion.generated.js\";\nimport { removeGlobalStylesFromShadowDom } from \"./removeGlobalStylesFromShadowDom.js\";\n\ninterface GetReactWebComponentOptions {\n  getReactComponent: (reactRootElements: ReactRootElements) => ReactNode;\n  webComponentName?: string;\n}\n\n// Used by selenium when selecting for odyssey web components regardless of their name.\nexport const webComponentDataAttributeName = \"data-odyssey-react-web-component\";\n\n// Unique name to avoid multiple versions of odyssey overwriting each other's implementations\nexport const versionedWebComponentName =\n  `odyssey-react-web-component-${version}`.toLowerCase();\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class WebComponentClass extends SsrFriendlyHtmlElementClass {\n  #getReactComponent: GetReactComponentInWebComponent | null = null;\n  readonly #reactRootElements: ReactRootElements;\n  public readonly elementName: string = this.localName;\n  // public for testing\n  public reactRootPromise: Promise<Root | null> = Promise.resolve(null);\n\n  constructor() {\n    super();\n\n    this.#reactRootElements = createReactRootElements();\n    const { appRootElement, stylesRootElement } = this.#reactRootElements;\n\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n    shadowRoot.appendChild(stylesRootElement);\n    shadowRoot.appendChild(appRootElement);\n\n    removeGlobalStylesFromShadowDom({\n      nonce: window.cspNonce,\n      stylesRootElement,\n    });\n  }\n\n  /**\n   * Provides the function used to initialize react content that is specific to this instance\n   * of the web component, which is used later in the connectedCallback.\n   *\n   * Always set immediately after creation via document.createElement\n   */\n  setGetReactComponent(getReactComponent: GetReactComponentInWebComponent) {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      this.#getReactComponent = getReactComponent;\n      if (reactRoot) {\n        // connectedCallback has already been fired. Need to mount this content to the existing root\n        reactRoot.render(this.#getReactComponent(this.#reactRootElements));\n      } else {\n        // Nothing to do. Content will be mounted when connectedCallback is called\n      }\n\n      return reactRoot;\n    });\n  }\n\n  connectedCallback() {\n    this.reactRootPromise = this.reactRootPromise\n      .then((reactRoot) => {\n        if (reactRoot) {\n          // Shouldn't ever happen. connected and disconnected should never be called out of order\n          throw new Error(\n            `connectedCallback fired when reactRoot is already mounted.`,\n          );\n        }\n\n        // Ensure react root is available before mounting\n        // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani\n        return import(\"react-dom/client\").then(({ createRoot }) =>\n          createRoot(this.#reactRootElements.appRootElement),\n        );\n      })\n      .then((reactRoot) => {\n        if (!this.#getReactComponent) {\n          // getReactComponent hasn't been set yet. Content will be mounted once it's set.\n        } else {\n          reactRoot.render(this.#getReactComponent(this.#reactRootElements));\n        }\n        return reactRoot;\n      });\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      if (!reactRoot) {\n        // Shouldn't ever happen\n        throw new Error(\n          `disconnectedCallback fired when reactRoot is already unmounted.`,\n        );\n      }\n\n      reactRoot.unmount();\n      // Set root to null. We don't want to attempt to render to a root that's already been unmounted.\n      return null;\n    });\n  }\n}\n\n/**\n * Returns a constructed web component which manages it's own shadow dom and react dom roots\n * A custom name can be specified, otherwise a default is provided\n */\nexport const getReactWebComponent = ({\n  webComponentName = versionedWebComponentName,\n  getReactComponent,\n}: GetReactWebComponentOptions) => {\n  // This name hasn't been defined yet. Add a definition for it before constructing one.\n  if (!customElements.get(webComponentName)) {\n    customElements.define(webComponentName, WebComponentClass);\n  }\n\n  const element = document.createElement(webComponentName) as InstanceType<\n    typeof WebComponentClass\n  >;\n  // Set selenium attribute so this can be selected\n  element.setAttribute(webComponentDataAttributeName, \"\");\n  // function used for creating react content\n  element.setGetReactComponent(getReactComponent);\n  return element;\n};\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\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   * Optional name given to this web component.\n   * Defaults to a 'odyssey-react-wc-' plus the current odyssey version\n   */\n  webComponentName?: string;\n} & (\n  | {\n      /**\n       * The 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      webComponentParentElement: HTMLElement;\n      webComponentRootElement?: never;\n    }\n  | {\n      webComponentParentElement?: never;\n      /**\n       * @deprecated Use `webComponentParentElement` instead.\n       */\n      webComponentRootElement: HTMLElement;\n    }\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  webComponentName,\n  getReactComponent,\n  webComponentChildren,\n  webComponentParentElement,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = getReactWebComponent({\n    getReactComponent,\n    webComponentName,\n  });\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  if (webComponentParentElement) {\n    webComponentParentElement.appendChild(reactElement);\n  }\n  // Remove this condition when `webComponentRootElement` is no longer a prop.\n  else if (webComponentRootElement) {\n    webComponentRootElement.appendChild(reactElement);\n  }\n\n  return reactElement;\n};\n"],"mappings":"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","ignoreList":[]}