@okta/odyssey-react-mui 1.35.0 → 1.35.4

package/dist/cjs/ui-shell/TopNav/TopNav.cjs

@@ -30,16 +30,13 @@ const StyledRightSideContainer = (0, _styled.default)("div")(() => ({
   flexShrink: 0
 }));
 const StyledTopNavContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrolled" && prop !== "topNavBackgroundColor"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "topNavBackgroundColor"
 })(({
   odysseyDesignTokens,
-  isScrolled,
   topNavBackgroundColor
 }) => ({
   alignItems: "center",
   backgroundColor: topNavBackgroundColor,
-  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,
-  clipPath: "inset(0 0 -100vh 0)",
   display: "flex",
   gap: odysseyDesignTokens.Spacing4,
   height: "100%",
@@ -56,7 +53,6 @@ const StyledTopNavContainer = (0, _styled.default)("div", {
   })
 }));
 const TopNav = ({
-  isScrolled,
   leftSideComponent,
   rightSideComponent
 }) => {
@@ -64,7 +60,6 @@ const TopNav = ({
   const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
   return (0, _jsxRuntime.jsxs)(StyledTopNavContainer, {
     odysseyDesignTokens: odysseyDesignTokens,
-    isScrolled: isScrolled,
     topNavBackgroundColor: uiShellContext?.topNavBackgroundColor,
     children: [(0, _jsxRuntime.jsx)(StyledLeftSideContainer, {
       children: leftSideComponent ?? (0, _jsxRuntime.jsx)("div", {})

package/dist/cjs/ui-shell/TopNav/TopNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TopNav.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledLeftSideContainer","styled","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrolled","topNavBackgroundColor","alignItems","backgroundColor","boxShadow","DepthMedium","undefined","clipPath","display","gap","Spacing4","height","justifyContent","maxHeight","TOP_NAV_HEIGHT","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","UI_SHELL_BASE_Z_INDEX","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","useOdysseyDesignTokens","uiShellContext","useUiShellContext","jsxs","children","jsx","MemoizedTopNav","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNav.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledLeftSideContainer = styled(\"div\")(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledRightSideContainer = styled(\"div\")(() => ({\n  flexShrink: 0,\n}));\n\nconst StyledTopNavContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isScrolled\" &&\n    prop !== \"topNavBackgroundColor\",\n})<{\n  isScrolled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isScrolled, topNavBackgroundColor }) => ({\n  alignItems: \"center\",\n  backgroundColor: topNavBackgroundColor,\n  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n  clipPath: \"inset(0 0 -100vh 0)\",\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing4,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing8,\n  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {\n    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`,\n  }),\n}));\n\nexport type TopNavProps = {\n  /**\n   * Whether or not the underlying content has been scrolled\n   */\n  isScrolled?: boolean;\n  /**\n   * React components that render into the left side of the top nav.\n   */\n  leftSideComponent?: ReactElement;\n  /**\n   * React components that render into the right side of the top nav.\n   */\n  rightSideComponent?: ReactElement;\n} & Pick<HtmlProps, \"testId\">;\n\nconst TopNav = ({\n  isScrolled,\n  leftSideComponent,\n  rightSideComponent,\n}: TopNavProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  return (\n    <StyledTopNavContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      isScrolled={isScrolled}\n      topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n    >\n      <StyledLeftSideContainer>\n        {leftSideComponent ?? <div />}\n      </StyledLeftSideContainer>\n      <StyledRightSideContainer>\n        {rightSideComponent ?? <div />}\n      </StyledRightSideContainer>\n    </StyledTopNavContainer>\n  );\n};\n\nconst MemoizedTopNav = memo(TopNav);\nMemoizedTopNav.displayName = \"TopNav\";\n\nexport { MemoizedTopNav as TopNav };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TopNav.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledLeftSideContainer","styled","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","topNavBackgroundColor","alignItems","backgroundColor","display","gap","Spacing4","height","justifyContent","maxHeight","TOP_NAV_HEIGHT","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","UI_SHELL_BASE_Z_INDEX","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","useOdysseyDesignTokens","uiShellContext","useUiShellContext","jsxs","children","jsx","MemoizedTopNav","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNav.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledLeftSideContainer = styled(\"div\")(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledRightSideContainer = styled(\"div\")(() => ({\n  flexShrink: 0,\n}));\n\nconst StyledTopNavContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"topNavBackgroundColor\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, topNavBackgroundColor }) => ({\n  alignItems: \"center\",\n  backgroundColor: topNavBackgroundColor,\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing4,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing8,\n  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {\n    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`,\n  }),\n}));\n\nexport type TopNavProps = {\n  /**\n   * Whether or not the underlying content has been scrolled\n   */\n  isScrolled?: boolean;\n  /**\n   * React components that render into the left side of the top nav.\n   */\n  leftSideComponent?: ReactElement;\n  /**\n   * React components that render into the right side of the top nav.\n   */\n  rightSideComponent?: ReactElement;\n} & Pick<HtmlProps, \"testId\">;\n\nconst TopNav = ({ leftSideComponent, rightSideComponent }: TopNavProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  return (\n    <StyledTopNavContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n    >\n      <StyledLeftSideContainer>\n        {leftSideComponent ?? <div />}\n      </StyledLeftSideContainer>\n      <StyledRightSideContainer>\n        {rightSideComponent ?? <div />}\n      </StyledRightSideContainer>\n    </StyledTopNavContainer>\n  );\n};\n\nconst MemoizedTopNav = memo(TopNav);\nMemoizedTopNav.displayName = \"TopNav\";\n\nexport { MemoizedTopNav as TopNav };\n"],"mappings":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAGA,IAAAE,2BAAA,GAAAF,OAAA;AAIA,IAAAG,gBAAA,GAAAH,OAAA;AAIA,IAAAI,uBAAA,GAAAJ,OAAA;AAGsC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AA3BtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmBA,MAAMG,uBAAuB,GAAG,IAAAC,eAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EACnDC,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAG,IAAAF,eAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EACpDG,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAG,IAAAJ,eAAM,EAAC,KAAK,EAAE;EAC1CK,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAsB,CAAC,MAAM;EACtDC,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAEF,qBAAqB;EACtCG,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEL,mBAAmB,CAACM,QAAQ;EACjCC,MAAM,EAAE,MAAM;EACdC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAEC,sCAAc;EACzBC,SAAS,EAAED,sCAAc;EACzBE,YAAY,EAAEZ,mBAAmB,CAACa,QAAQ;EAC1CC,aAAa,EAAEd,mBAAmB,CAACe,QAAQ;EAC3CC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,cAAcjB,mBAAmB,CAACkB,sBAAsB,IAAIlB,mBAAmB,CAACmB,oBAAoB,EAAE;EAClHC,MAAM,EAAEC,6CAAqB;EAE7B,IAAIpB,qBAAqB,KAAKD,mBAAmB,CAACsB,eAAe,IAAI;IACnEC,YAAY,EAAE,GAAGvB,mBAAmB,CAACwB,eAAe,IAAIxB,mBAAmB,CAACyB,eAAe,IAAIzB,mBAAmB,CAAC0B,aAAa;EAClI,CAAC;AACH,CAAC,CAAC,CAAC;AAiBH,MAAMC,MAAM,GAAGA,CAAC;EAAEC,iBAAiB;EAAEC;AAAgC,CAAC,KAAK;EACzE,MAAM7B,mBAAmB,GAAG,IAAA8B,kDAAsB,EAAC,CAAC;EACpD,MAAMC,cAAc,GAAG,IAAAC,kCAAiB,EAAC,CAAC;EAE1C,OACE,IAAA5C,WAAA,CAAA6C,IAAA,EAACpC,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,qBAAqB,EAAE8B,cAAc,EAAE9B,qBAAsB;IAAAiC,QAAA,GAE7D,IAAA9C,WAAA,CAAA+C,GAAA,EAAC3C,uBAAuB;MAAA0C,QAAA,EACrBN,iBAAiB,IAAI,IAAAxC,WAAA,CAAA+C,GAAA,WAAM;IAAC,CACN,CAAC,EAC1B,IAAA/C,WAAA,CAAA+C,GAAA,EAACxC,wBAAwB;MAAAuC,QAAA,EACtBL,kBAAkB,IAAI,IAAAzC,WAAA,CAAA+C,GAAA,WAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,MAAMC,cAAc,GAAAC,OAAA,CAAAV,MAAA,GAAG,IAAAW,WAAI,EAACX,MAAM,CAAC;AACnCS,cAAc,CAACG,WAAW,GAAG,QAAQ","ignoreList":[]}

package/dist/cjs/ui-shell/UiShell.cjs

@@ -37,6 +37,7 @@ const UiShell = ({
   appBackgroundContrastMode,
   appElement,
   appElementScrollingMode,
+  breakpointConfig,
   closeSideNavMenu,
   hasStandardAppContentPadding,
   initialVisibleSections,
@@ -52,7 +53,7 @@ const UiShell = ({
   uiShellStylesElement
 }) => {
   const [componentProps, setComponentProps] = (0, _react.useState)(defaultComponentProps);
-  const activeBreakpoint = (0, _useUiShellBreakpoints.useUiShellBreakpoints)();
+  const activeBreakpoint = (0, _useUiShellBreakpoints.useUiShellBreakpoints)(breakpointConfig);
   (0, _react.useEffect)(() => {
     const unsubscribe = subscribeToPropChanges(componentProps => {
       setComponentProps(componentProps || defaultComponentProps);
@@ -79,7 +80,7 @@ const UiShell = ({
           subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
           subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
           topNavBackgroundColor: topNavBackgroundColor,
-          children: [activeBreakpoint === "constrained" && (0, _jsxRuntime.jsx)(_NarrowUiShellContent.NarrowUiShellContent, {
+          children: [activeBreakpoint === "narrow" && (0, _jsxRuntime.jsx)(_NarrowUiShellContent.NarrowUiShellContent, {
             ...componentProps,
             appElement: appElement,
             appElementScrollingMode: appElementScrollingMode,
@@ -87,13 +88,13 @@ const UiShell = ({
             initialVisibleSections: initialVisibleSections,
             onError: onError,
             optionalComponents: optionalComponents
-          }), (activeBreakpoint === "compact" || activeBreakpoint === "comfortable") && (0, _jsxRuntime.jsx)(_WideUiShellContent.WideUiShellContent, {
+          }), (activeBreakpoint === "medium" || activeBreakpoint === "wide") && (0, _jsxRuntime.jsx)(_WideUiShellContent.WideUiShellContent, {
             ...componentProps,
             ...(componentProps.sideNavProps ? {
               sideNavProps: {
                 ...componentProps.sideNavProps,
-                isCollapsed: activeBreakpoint === "compact" || componentProps.sideNavProps?.isCollapsed,
-                isCollapsible: activeBreakpoint === "compact" || componentProps.sideNavProps?.isCollapsible
+                isCollapsed: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsed,
+                isCollapsible: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsible
               }
             } : {}),
             appElement: appElement,

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

@@ -1 +1 @@
-{"version":3,"file":"UiShell.cjs","names":["_react","require","_reactErrorBoundary","_CssBaseline","_NarrowUiShellContent","_OdysseyProvider","_UiShellProvider","_useUiShellBreakpoints","_WideUiShellContent","_jsxRuntime","defaultComponentProps","exports","sideNavProps","undefined","topNavProps","errorComponent","jsx","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","useState","activeBreakpoint","useUiShellBreakpoints","useEffect","unsubscribe","ErrorBoundary","fallback","children","OdysseyProvider","emotionRootElement","shadowRootElement","jsxs","CssBaseline","UiShellProvider","NarrowUiShellContent","WideUiShellContent","isCollapsed","isCollapsible","MemoizedUiShell","memo","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, useEffect, useState, type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { type ReactRootElements } from \"../web-component/createReactRootElements.js\";\nimport { CssBaseline } from \"../CssBaseline.js\";\nimport { NarrowUiShellContent } from \"./NarrowUiShellContent.js\";\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport { UiShellProvider, UiShellProviderProps } from \"./UiShellProvider.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport { useUiShellBreakpoints } from \"./useUiShellBreakpoints.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\nimport { MessageBus } from \"./createMessageBus.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   * 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  closeSideNavMenu,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\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();\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            subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n            subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"constrained\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n\n            {(activeBreakpoint === \"compact\" ||\n              activeBreakpoint === \"comfortable\") && (\n              <WideUiShellContent\n                {...{\n                  ...componentProps,\n                  ...(componentProps.sideNavProps\n                    ? {\n                        sideNavProps: {\n                          ...componentProps.sideNavProps,\n                          isCollapsed:\n                            activeBreakpoint === \"compact\" ||\n                            componentProps.sideNavProps?.isCollapsed,\n                          isCollapsible:\n                            activeBreakpoint === \"compact\" ||\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                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\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.cjs","names":["_react","require","_reactErrorBoundary","_CssBaseline","_NarrowUiShellContent","_OdysseyProvider","_UiShellProvider","_useUiShellBreakpoints","_WideUiShellContent","_jsxRuntime","defaultComponentProps","exports","sideNavProps","undefined","topNavProps","errorComponent","jsx","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","breakpointConfig","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","useState","activeBreakpoint","useUiShellBreakpoints","useEffect","unsubscribe","ErrorBoundary","fallback","children","OdysseyProvider","emotionRootElement","shadowRootElement","jsxs","CssBaseline","UiShellProvider","NarrowUiShellContent","WideUiShellContent","isCollapsed","isCollapsible","MemoizedUiShell","memo","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, useEffect, useState, type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { type ReactRootElements } from \"../web-component/createReactRootElements.js\";\nimport { CssBaseline } from \"../CssBaseline.js\";\nimport { NarrowUiShellContent } from \"./NarrowUiShellContent.js\";\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport { UiShellProvider, UiShellProviderProps } from \"./UiShellProvider.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport {\n  UiShellBreakpointConfig,\n  useUiShellBreakpoints,\n} from \"./useUiShellBreakpoints.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\nimport { MessageBus } from \"./createMessageBus.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  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            subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n            subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"narrow\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\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                  ...(componentProps.sideNavProps\n                    ? {\n                        sideNavProps: {\n                          ...componentProps.sideNavProps,\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                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\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/cjs/ui-shell/WideUiShellContent.cjs

@@ -8,6 +8,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
 var _reactErrorBoundary = require("react-error-boundary");
 var _index = require("./AppSwitcher/index.cjs");
+var _InnerAppContainer = require("./InnerAppContainer.cjs");
 var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
 var _index2 = require("./SideNav/index.cjs");
 var _index3 = require("./TopNav/index.cjs");
@@ -29,13 +30,16 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+const appSwitcherDefaultAppIcons = [];
 const StyledAppContainer = (0, _styled.default)("div", {
   shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
 })(({
   appBackgroundColor
 }) => ({
+  backgroundColor: appBackgroundColor,
   gridArea: "app-content",
-  backgroundColor: appBackgroundColor
+  pointerEvents: "none",
+  position: "relative"
 }));
 const StyledAppSwitcherContainer = (0, _styled.default)("div")({
   gridArea: "app-switcher"
@@ -105,8 +109,8 @@ const WideUiShellContent = ({
         fallback: null,
         onError: onError,
         children: (0, _jsxRuntime.jsx)(_index.AppSwitcher, {
+          appIcons: appSwitcherDefaultAppIcons,
           isLoading: true,
-          appIcons: [],
           selectedAppName: ""
         })
       }), appSwitcherProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
@@ -154,7 +158,6 @@ const WideUiShellContent = ({
         onError: onError,
         children: (0, _jsxRuntime.jsx)(_index3.TopNav, {
           ...topNavProps,
-          isScrolled: isContentScrolled,
           leftSideComponent: optionalComponents?.topNavLeftSide,
           rightSideComponent: optionalComponents?.topNavRightSide
         })
@@ -162,7 +165,10 @@ const WideUiShellContent = ({
     }), (0, _jsxRuntime.jsx)(StyledAppContainer, {
       appBackgroundColor: uiShellContext?.appBackgroundColor,
       tabIndex: 0,
-      ref: uiShellAppAreaRef
+      ref: uiShellAppAreaRef,
+      children: (0, _jsxRuntime.jsx)(_InnerAppContainer.InnerAppContainer, {
+        isContentScrolled: isContentScrolled
+      })
     })]
   });
 };

package/dist/cjs/ui-shell/WideUiShellContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WideUiShellContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactErrorBoundary","_index","_OdysseyDesignTokensContext","_index2","_index3","_useScrollState","_useMatchAppElementToUiShellAppArea","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledAppContainer","styled","shouldForwardProp","prop","appBackgroundColor","gridArea","backgroundColor","StyledAppSwitcherContainer","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","WideUiShellContent","appElement","appElementScrollingMode","appSwitcherProps","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","useOdysseyDesignTokens","uiShellContext","useUiShellContext","isContentScrolled","useScrollState","sideNavContainerRef","useRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","useMatchAppElementToUiShellAppArea","paddingMode","uiShellResizableRefs","jsxs","ref","children","jsx","banners","includes","ErrorBoundary","fallback","AppSwitcher","isLoading","appIcons","selectedAppName","undefined","SideNav","sideNavItems","emptySideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","TopNav","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","isScrolled","tabIndex","MemoizedWideUiShellContent","exports","memo","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 { AppSwitcher } from \"./AppSwitcher/index.js\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport { SideNav } from \"./SideNav/index.js\";\nimport { TopNav } from \"./TopNav/index.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { emptySideNavItems } from \"./uiShellSharedConstants.js\";\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  gridArea: \"app-content\",\n  backgroundColor: appBackgroundColor,\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  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 isLoading appIcons={[]} selectedAppName=\"\" />\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\") &&\n            sideNavProps === undefined && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <SideNav isLoading sideNavItems={emptySideNavItems} />\n              </ErrorBoundary>\n            )\n        }\n\n        {sideNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <SideNav\n              {...{\n                ...sideNavProps,\n                ...(sideNavProps.hasCustomFooter &&\n                optionalComponents?.sideNavFooter\n                  ? {\n                      footerComponent: optionalComponents.sideNavFooter,\n                      footerItems: undefined,\n                      hasCustomFooter: sideNavProps.hasCustomFooter,\n                    }\n                  : {\n                      footerItems: sideNavProps.footerItems,\n                      hasCustomFooter: false,\n                    }),\n              }}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledSideNavContainer>\n\n      <StyledTopNavContainer 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              isScrolled={isContentScrolled}\n              leftSideComponent={optionalComponents?.topNavLeftSide}\n              rightSideComponent={optionalComponents?.topNavRightSide}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        tabIndex={0}\n        ref={uiShellAppAreaRef}\n      />\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.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactErrorBoundary","_index","_InnerAppContainer","_OdysseyDesignTokensContext","_index2","_index3","_useScrollState","_useMatchAppElementToUiShellAppArea","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","appSwitcherDefaultAppIcons","StyledAppContainer","styled","shouldForwardProp","prop","appBackgroundColor","backgroundColor","gridArea","pointerEvents","position","StyledAppSwitcherContainer","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","WideUiShellContent","appElement","appElementScrollingMode","appSwitcherProps","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","useOdysseyDesignTokens","uiShellContext","useUiShellContext","isContentScrolled","useScrollState","sideNavContainerRef","useRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","useMatchAppElementToUiShellAppArea","paddingMode","uiShellResizableRefs","jsxs","ref","children","jsx","banners","includes","ErrorBoundary","fallback","AppSwitcher","appIcons","isLoading","selectedAppName","undefined","SideNav","sideNavItems","emptySideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","TopNav","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","InnerAppContainer","MemoizedWideUiShellContent","exports","memo","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 { AppSwitcher } from \"./AppSwitcher/index.js\";\nimport { AppSwitcherAppIconData } from \"./AppSwitcher/AppSwitcherApp.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { SideNav } from \"./SideNav/index.js\";\nimport { TopNav } from \"./TopNav/index.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport {\n  UiShellNavComponentProps,\n  UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { emptySideNavItems } from \"./uiShellSharedConstants.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  pointerEvents: \"none\",\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  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\") &&\n            sideNavProps === undefined && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <SideNav isLoading sideNavItems={emptySideNavItems} />\n              </ErrorBoundary>\n            )\n        }\n\n        {sideNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <SideNav\n              {...{\n                ...sideNavProps,\n                ...(sideNavProps.hasCustomFooter &&\n                optionalComponents?.sideNavFooter\n                  ? {\n                      footerComponent: optionalComponents.sideNavFooter,\n                      footerItems: undefined,\n                      hasCustomFooter: sideNavProps.hasCustomFooter,\n                    }\n                  : {\n                      footerItems: sideNavProps.footerItems,\n                      hasCustomFooter: false,\n                    }),\n              }}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledSideNavContainer>\n\n      <StyledTopNavContainer 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        tabIndex={0}\n        ref={uiShellAppAreaRef}\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":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,2BAAA,GAAAL,OAAA;AAIA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,eAAA,GAAAR,OAAA;AACA,IAAAS,mCAAA,GAAAT,OAAA;AAKA,IAAAU,gBAAA,GAAAV,OAAA;AACA,IAAAW,uBAAA,GAAAX,OAAA;AAAgE,IAAAY,WAAA,GAAAZ,OAAA;AAAA,SAAAD,uBAAAc,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAhChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAwBA,MAAMG,0BAA0B,GAAG,EAAqC;AAExE,MAAMC,kBAAkB,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EACvCC,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,oBAAoB,IAAIA,IAAI,KAAK;AAC9C,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAmB,CAAC,MAAM;EAC9BC,eAAe,EAAED,kBAAkB;EACnCE,QAAQ,EAAE,aAAa;EACvBC,aAAa,EAAE,MAAM;EACrBC,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,0BAA0B,GAAG,IAAAR,eAAM,EAAC,KAAK,CAAC,CAAC;EAC/CK,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMI,sBAAsB,GAAG,IAAAT,eAAM,EAAC,KAAK,CAAC,CAAC;EAC3CK,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMK,sBAAsB,GAAG,IAAAV,eAAM,EAAC,KAAK,CAAC,CAAC;EAC3CK,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMM,oBAAoB,GAAG,IAAAX,eAAM,EAAC,KAAK,EAAE;EACzCC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEU;AAAoB,CAAC,MAAM;EAC/BR,eAAe,EAAEQ,mBAAmB,CAACC,YAAY;EACjDC,OAAO,EAAE,MAAM;EACfC,OAAO,EAAE,CAAC;EACVC,iBAAiB,EAAE;AACrB;AACA;AACA;AACA,GAAG;EACDC,mBAAmB,EAAE,eAAe;EACpCC,gBAAgB,EAAE,eAAe;EACjCC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAG,IAAArB,eAAM,EAAC,KAAK,CAAC,CAAC;EAC1CK,QAAQ,EAAE;AACZ,CAAC,CAAC;AAYF,MAAMiB,kBAAkB,GAAGA,CAAC;EAC1BC,UAAU;EACVC,uBAAuB;EACvBC,gBAAgB;EAChBC,4BAA4B,GAAG,IAAI;EACnCC,sBAAsB,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAC;EAC7DC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,kBAAkB;EAClBC,YAAY;EACZC;AACuB,CAAC,KAAK;EAC7B,MAAMrB,mBAAmB,GAAG,IAAAsB,kDAAsB,EAAC,CAAC;EACpD,MAAMC,cAAc,GAAG,IAAAC,kCAAiB,EAAC,CAAC;EAE1C,MAAM;IAAEC;EAAkB,CAAC,GAAG,IAAAC,8BAAc,EAACf,UAAU,CAAC;EAExD,MAAMgB,mBAAmB,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACxD,MAAMC,kBAAkB,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EACvD,MAAME,iBAAiB,GAAG,IAAAF,aAAM,EAAiB,IAAI,CAAC;EAEtD,MAAM;IAAEG;EAAmB,CAAC,GAAG,IAAAC,sEAAkC,EAAC;IAChErB,UAAU;IACVC,uBAAuB;IACvBqB,WAAW,EAAEnB,4BAA4B,GAAG,aAAa,GAAG,MAAM;IAClEgB,iBAAiB;IACjBI,oBAAoB,EAAE,CACpBP,mBAAmB,EACnBE,kBAAkB,EAClBC,iBAAiB;EAErB,CAAC,CAAC;EAEF,OACE,IAAAhD,WAAA,CAAAqD,IAAA,EAACpC,oBAAoB;IACnBC,mBAAmB,EAAEA,mBAAoB;IACzCoC,GAAG,EAAEL,kBAAmB;IAAAM,QAAA,GAExB,IAAAvD,WAAA,CAAAwD,GAAA,EAACzC,sBAAsB;MAAAwC,QAAA,EACpBlB,kBAAkB,EAAEoB;IAAO,CACN,CAAC,EAEzB,IAAAzD,WAAA,CAAAqD,IAAA,EAACvC,0BAA0B;MAAAyC,QAAA,GAGvBtB,sBAAsB,EAAEyB,QAAQ,CAAC,aAAa,CAAC,IAC7C,CAAC3B,gBAAgB,IACf,IAAA/B,WAAA,CAAAwD,GAAA,EAAClE,mBAAA,CAAAqE,aAAa;QAACC,QAAQ,EAAE,IAAK;QAAC1B,OAAO,EAAEA,OAAQ;QAAAqB,QAAA,EAC9C,IAAAvD,WAAA,CAAAwD,GAAA,EAACjE,MAAA,CAAAsE,WAAW;UACVC,QAAQ,EAAE1D,0BAA2B;UACrC2D,SAAS;UACTC,eAAe,EAAC;QAAE,CACnB;MAAC,CACW,CAChB,EAGJjC,gBAAgB,IACf,IAAA/B,WAAA,CAAAwD,GAAA,EAAClE,mBAAA,CAAAqE,aAAa;QAACC,QAAQ,EAAE,IAAK;QAAC1B,OAAO,EAAEA,OAAQ;QAAAqB,QAAA,EAC9C,IAAAvD,WAAA,CAAAwD,GAAA,EAACjE,MAAA,CAAAsE,WAAW;UAAA,GAAK9B;QAAgB,CAAG;MAAC,CACxB,CAChB;IAAA,CACyB,CAAC,EAE7B,IAAA/B,WAAA,CAAAqD,IAAA,EAACrC,sBAAsB;MAACsC,GAAG,EAAET,mBAAoB;MAAAU,QAAA,GAG7CtB,sBAAsB,EAAEyB,QAAQ,CAAC,SAAS,CAAC,IACzCpB,YAAY,KAAK2B,SAAS,IACxB,IAAAjE,WAAA,CAAAwD,GAAA,EAAClE,mBAAA,CAAAqE,aAAa;QAACC,QAAQ,EAAE,IAAK;QAAC1B,OAAO,EAAEA,OAAQ;QAAAqB,QAAA,EAC9C,IAAAvD,WAAA,CAAAwD,GAAA,EAAC9D,OAAA,CAAAwE,OAAO;UAACH,SAAS;UAACI,YAAY,EAAEC;QAAkB,CAAE;MAAC,CACzC,CAChB,EAGJ9B,YAAY,IACX,IAAAtC,WAAA,CAAAwD,GAAA,EAAClE,mBAAA,CAAAqE,aAAa;QAACC,QAAQ,EAAE,IAAK;QAAC1B,OAAO,EAAEA,OAAQ;QAAAqB,QAAA,EAC9C,IAAAvD,WAAA,CAAAwD,GAAA,EAAC9D,OAAA,CAAAwE,OAAO;UAEJ,GAAG5B,YAAY;UACf,IAAIA,YAAY,CAAC+B,eAAe,IAChChC,kBAAkB,EAAEiC,aAAa,GAC7B;YACEC,eAAe,EAAElC,kBAAkB,CAACiC,aAAa;YACjDE,WAAW,EAAEP,SAAS;YACtBI,eAAe,EAAE/B,YAAY,CAAC+B;UAChC,CAAC,GACD;YACEG,WAAW,EAAElC,YAAY,CAACkC,WAAW;YACrCH,eAAe,EAAE;UACnB,CAAC;QAAC,CAET;MAAC,CACW,CAChB;IAAA,CACqB,CAAC,EAEzB,IAAArE,WAAA,CAAAqD,IAAA,EAAC1B,qBAAqB;MAAC2B,GAAG,EAAEP,kBAAmB;MAAAQ,QAAA,GAG3CtB,sBAAsB,EAAEyB,QAAQ,CAAC,QAAQ,CAAC,IACxCnB,WAAW,KAAK0B,SAAS,IACvB,IAAAjE,WAAA,CAAAwD,GAAA,EAAClE,mBAAA,CAAAqE,aAAa;QAACC,QAAQ,EAAE,IAAK;QAAC1B,OAAO,EAAEA,OAAQ;QAAAqB,QAAA,EAC9C,IAAAvD,WAAA,CAAAwD,GAAA,EAAC7D,OAAA,CAAA8E,MAAM;UACLC,iBAAiB,EAAErC,kBAAkB,EAAEsC,cAAe;UACtDC,kBAAkB,EAAEvC,kBAAkB,EAAEwC;QAAgB,CACzD;MAAC,CACW,CAChB,EAGJtC,WAAW,IACV,IAAAvC,WAAA,CAAAwD,GAAA,EAAClE,mBAAA,CAAAqE,aAAa;QAACC,QAAQ,EAAE,IAAK;QAAC1B,OAAO,EAAEA,OAAQ;QAAAqB,QAAA,EAC9C,IAAAvD,WAAA,CAAAwD,GAAA,EAAC7D,OAAA,CAAA8E,MAAM;UAAA,GACDlC,WAAW;UACfmC,iBAAiB,EAAErC,kBAAkB,EAAEsC,cAAe;UACtDC,kBAAkB,EAAEvC,kBAAkB,EAAEwC;QAAgB,CACzD;MAAC,CACW,CAChB;IAAA,CACoB,CAAC,EAExB,IAAA7E,WAAA,CAAAwD,GAAA,EAACnD,kBAAkB;MACjBI,kBAAkB,EAAEgC,cAAc,EAAEhC,kBAAmB;MACvDqE,QAAQ,EAAE,CAAE;MACZxB,GAAG,EAAEN,iBAAkB;MAAAO,QAAA,EAEvB,IAAAvD,WAAA,CAAAwD,GAAA,EAAChE,kBAAA,CAAAuF,iBAAiB;QAACpC,iBAAiB,EAAEA;MAAkB,CAAE;IAAC,CACzC,CAAC;EAAA,CACD,CAAC;AAE3B,CAAC;AAED,MAAMqC,0BAA0B,GAAAC,OAAA,CAAArD,kBAAA,GAAG,IAAAsD,WAAI,EAACtD,kBAAkB,CAAC;AAC3DoD,0BAA0B,CAACG,WAAW,GAAG,oBAAoB","ignoreList":[]}

package/dist/cjs/ui-shell/index.cjs

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  UiShell: true
+  UiShell: true,
+  adminAppUiShellBreakpoints: true
 };
 Object.defineProperty(exports, "UiShell", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "UiShell", {
     return _UiShell.UiShell;
   }
 });
+Object.defineProperty(exports, "adminAppUiShellBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _useUiShellBreakpoints.adminAppUiShellBreakpoints;
+  }
+});
 var _index = require("./AppSwitcher/index.cjs");
 Object.keys(_index).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,6 +31,18 @@ Object.keys(_index).forEach(function (key) {
     }
   });
 });
+var _InnerAppContainer = require("./InnerAppContainer.cjs");
+Object.keys(_InnerAppContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InnerAppContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InnerAppContainer[key];
+    }
+  });
+});
 var _NarrowUiShellContent = require("./NarrowUiShellContent.cjs");
 Object.keys(_NarrowUiShellContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -96,29 +115,30 @@ Object.keys(_useHasUiShell).forEach(function (key) {
     }
   });
 });
-var _renderReactInWebComponent = require("../web-component/renderReactInWebComponent.cjs");
-Object.keys(_renderReactInWebComponent).forEach(function (key) {
+var _WideUiShellContent = require("./WideUiShellContent.cjs");
+Object.keys(_WideUiShellContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _renderReactInWebComponent[key]) return;
+  if (key in exports && exports[key] === _WideUiShellContent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _renderReactInWebComponent[key];
+      return _WideUiShellContent[key];
     }
   });
 });
-var _WideUiShellContent = require("./WideUiShellContent.cjs");
-Object.keys(_WideUiShellContent).forEach(function (key) {
+var _renderReactInWebComponent = require("../web-component/renderReactInWebComponent.cjs");
+Object.keys(_renderReactInWebComponent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _WideUiShellContent[key]) return;
+  if (key in exports && exports[key] === _renderReactInWebComponent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _WideUiShellContent[key];
+      return _renderReactInWebComponent[key];
     }
   });
 });
 var _UiShell = require("./UiShell.cjs");
+var _useUiShellBreakpoints = require("./useUiShellBreakpoints.cjs");
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_index","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_NarrowUiShellContent","_renderUiShell","_index2","_index3","_uiShellContentTypes","_useHasUiShell","_renderReactInWebComponent","_WideUiShellContent","_UiShell"],"sources":["../../../src/ui-shell/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 \"./AppSwitcher/index.js\";\nexport * from \"./NarrowUiShellContent.js\";\nexport * from \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.js\";\nexport * from \"./uiShellContentTypes.js\";\nexport * from \"./useHasUiShell.js\";\nexport * from \"../web-component/renderReactInWebComponent.js\"; // This is located here because some teams use React v17, and this uses React v18's `ReactDOM/client` import which isn't in older versions.\nexport * from \"./WideUiShellContent.js\";\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\n"],"mappings":";;;;;;;;;;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAb,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,qBAAA,GAAAb,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAW,qBAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,qBAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,qBAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,cAAA,GAAAd,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAY,cAAA,EAAAX,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAU,cAAA,CAAAV,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,cAAA,CAAAV,GAAA;IAAA;EAAA;AAAA;AACA,IAAAW,OAAA,GAAAf,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAa,OAAA,EAAAZ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAW,OAAA,CAAAX,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,OAAA,CAAAX,GAAA;IAAA;EAAA;AAAA;AACA,IAAAY,OAAA,GAAAhB,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAc,OAAA,EAAAb,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAY,OAAA,CAAAZ,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,OAAA,CAAAZ,GAAA;IAAA;EAAA;AAAA;AACA,IAAAa,oBAAA,GAAAjB,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAe,oBAAA,EAAAd,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAa,oBAAA,CAAAb,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAK,oBAAA,CAAAb,GAAA;IAAA;EAAA;AAAA;AACA,IAAAc,cAAA,GAAAlB,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAgB,cAAA,EAAAf,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAc,cAAA,CAAAd,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAM,cAAA,CAAAd,GAAA;IAAA;EAAA;AAAA;AACA,IAAAe,0BAAA,GAAAnB,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAiB,0BAAA,EAAAhB,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAe,0BAAA,CAAAf,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAO,0BAAA,CAAAf,GAAA;IAAA;EAAA;AAAA;AACA,IAAAgB,mBAAA,GAAApB,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAkB,mBAAA,EAAAjB,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAgB,mBAAA,CAAAhB,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAQ,mBAAA,CAAAhB,GAAA;IAAA;EAAA;AAAA;AAEA,IAAAiB,QAAA,GAAArB,OAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_index","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_InnerAppContainer","_NarrowUiShellContent","_renderUiShell","_index2","_index3","_uiShellContentTypes","_useHasUiShell","_WideUiShellContent","_renderReactInWebComponent","_UiShell","_useUiShellBreakpoints"],"sources":["../../../src/ui-shell/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 \"./AppSwitcher/index.js\";\nexport * from \"./InnerAppContainer.js\";\nexport * from \"./NarrowUiShellContent.js\";\nexport * from \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.js\";\nexport * from \"./uiShellContentTypes.js\";\nexport * from \"./useHasUiShell.js\";\nexport * from \"./WideUiShellContent.js\";\n\nexport * from \"../web-component/renderReactInWebComponent.js\"; // This is located here because some teams use React v17, and this uses React v18's `ReactDOM/client` import which isn't in older versions.\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\nexport { adminAppUiShellBreakpoints } from \"./useUiShellBreakpoints.js\";\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/ui-shell/renderUiShell.cjs

@@ -35,6 +35,7 @@ const renderUiShell = ({
   appBackgroundContrastMode,
   appElement: providedAppElement,
   appElementScrollingMode,
+  breakpointConfig,
   hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
@@ -77,6 +78,7 @@ const renderUiShell = ({
       }),
       onError: onError,
       children: (0, _jsxRuntime.jsx)(_UiShell.UiShell, {
+        breakpointConfig: breakpointConfig,
         appBackgroundColor: appBackgroundColor,
         appBackgroundContrastMode: appBackgroundContrastMode,
         appElement: appElement,

package/dist/cjs/ui-shell/renderUiShell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderUiShell.cjs","names":["_reactErrorBoundary","require","_bufferLatest","_createMessageBus","_UiShell","_useHasUiShell","_renderReactInWebComponent","_jsxRuntime","optionalComponentSlotNames","exports","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","parentElement","sideNavBackgroundColor","topNavBackgroundColor","document","createElement","setAttribute","uiShellDataAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","createMessageBus","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","bufferLatest","closeRightSideMenu","subscribeToCloseRightSideMenu","closeSideNavMenu","subscribeToCloseSideNavMenu","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","renderReactInWebComponent","getReactComponent","reactRootElements","jsx","ErrorBoundary","fallback","children","UiShell","onSubscriptionCreated","optionalComponents","name","uiShellAppElement","appRootElement","uiShellStylesElement","stylesRootElement","webComponentParentElement","appendChild","setComponentProps"],"sources":["../../../src/ui-shell/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.js\";\nimport { createMessageBus } from \"./createMessageBus.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { UiShellNavComponentProps } from \"./uiShellContentTypes.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  rightSideMenu: \"right-side-menu\",\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  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement: providedAppElement,\n  appElementScrollingMode,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  parentElement,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n}: {\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 container for UI Shell and the App. They're siblings inside this element.\n   */\n  parentElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appElementScrollingMode\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n> &\n  Partial<Pick<UiShellProps, \"appElement\">>) => {\n  const appElement = providedAppElement || 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  parentElement.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 {\n    publish: closeRightSideMenu,\n    subscribe: subscribeToCloseRightSideMenu,\n  } = createMessageBus();\n\n  const { publish: closeSideNavMenu, subscribe: subscribeToCloseSideNavMenu } =\n    createMessageBus();\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 = Object.values(slottedElements);\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={<div data-error />} onError={onError}>\n        <UiShell\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appElement={appElement}\n          appElementScrollingMode={appElementScrollingMode}\n          closeSideNavMenu={closeSideNavMenu}\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, and this isn't a React component.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n          subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n          uiShellAppElement={reactRootElements.appRootElement}\n          uiShellStylesElement={reactRootElements.stylesRootElement}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentParentElement: parentElement,\n    webComponentChildren,\n  });\n\n  parentElement.appendChild(appElement);\n\n  return {\n    appElement,\n    closeRightSideMenu,\n    closeSideNavMenu,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderUiShell.cjs","names":["_reactErrorBoundary","require","_bufferLatest","_createMessageBus","_UiShell","_useHasUiShell","_renderReactInWebComponent","_jsxRuntime","optionalComponentSlotNames","exports","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","breakpointConfig","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","parentElement","sideNavBackgroundColor","topNavBackgroundColor","document","createElement","setAttribute","uiShellDataAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","createMessageBus","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","bufferLatest","closeRightSideMenu","subscribeToCloseRightSideMenu","closeSideNavMenu","subscribeToCloseSideNavMenu","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","renderReactInWebComponent","getReactComponent","reactRootElements","jsx","ErrorBoundary","fallback","children","UiShell","onSubscriptionCreated","optionalComponents","name","uiShellAppElement","appRootElement","uiShellStylesElement","stylesRootElement","webComponentParentElement","appendChild","setComponentProps"],"sources":["../../../src/ui-shell/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.js\";\nimport { createMessageBus } from \"./createMessageBus.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { UiShellNavComponentProps } from \"./uiShellContentTypes.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  rightSideMenu: \"right-side-menu\",\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  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement: providedAppElement,\n  appElementScrollingMode,\n  breakpointConfig,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  parentElement,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n}: {\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 container for UI Shell and the App. They're siblings inside this element.\n   */\n  parentElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appElementScrollingMode\"\n  | \"breakpointConfig\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n> &\n  Partial<Pick<UiShellProps, \"appElement\">>) => {\n  const appElement = providedAppElement || 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  parentElement.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 {\n    publish: closeRightSideMenu,\n    subscribe: subscribeToCloseRightSideMenu,\n  } = createMessageBus();\n\n  const { publish: closeSideNavMenu, subscribe: subscribeToCloseSideNavMenu } =\n    createMessageBus();\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 = Object.values(slottedElements);\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={<div data-error />} onError={onError}>\n        <UiShell\n          breakpointConfig={breakpointConfig}\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appElement={appElement}\n          appElementScrollingMode={appElementScrollingMode}\n          closeSideNavMenu={closeSideNavMenu}\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, and this isn't a React component.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n          subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n          uiShellAppElement={reactRootElements.appRootElement}\n          uiShellStylesElement={reactRootElements.stylesRootElement}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentParentElement: parentElement,\n    webComponentChildren,\n  });\n\n  parentElement.appendChild(appElement);\n\n  return {\n    appElement,\n    closeRightSideMenu,\n    closeSideNavMenu,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/ui-shell/useMatchAppElementToUiShellAppArea.cjs

@@ -33,7 +33,6 @@ const setStylesToMatchElement = ({
   appContainerElement.style.setProperty("left", `${appContentReferenceRectangle.left - parentElementRectangle.left}px`);
   appContainerElement.style.setProperty("width", `${appContentReferenceRectangle.width}px`);
   appContainerElement.style.setProperty("height", `${appContentReferenceRectangle.height}px`);
-  appContainerElement.style.setProperty("z-index", "1");
   Object.entries(additionalStyles).forEach(([cssPropertyName, cssPropertyValue]) => {
     appContainerElement.style.setProperty(convertCamelCaseToKebabCase(cssPropertyName), String(cssPropertyValue));
   });
@@ -49,6 +48,8 @@ const useMatchAppElementToUiShellAppArea = ({
   const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
   const parentContainerRef = (0, _react.useRef)(null);
   const appContainerElementStyles = (0, _react.useMemo)(() => ({
+    boxSizing: "border-box",
+    zIndex: 1,
     ...(paddingMode === "comfortable" ? {
       paddingBlock: odysseyDesignTokens.Spacing5,
       paddingInline: odysseyDesignTokens.Spacing8
@@ -99,7 +100,7 @@ const useMatchAppElementToUiShellAppArea = ({
       };
     }
     return () => {};
-  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);
+  }, [appElement, appContainerElementStyles, uiShellAppAreaRef, uiShellResizableRefs]);
   return {
     parentContainerRef
   };

package/dist/cjs/ui-shell/useMatchAppElementToUiShellAppArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMatchAppElementToUiShellAppArea.cjs","names":["_react","require","_OdysseyDesignTokensContext","convertCamelCaseToKebabCase","string","replace","toLowerCase","exports","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","parentElement","appContentReferenceRectangle","getBoundingClientRect","parentElementRectangle","style","setProperty","top","left","width","height","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","useMatchAppElementToUiShellAppArea","appElement","appElementScrollingMode","paddingMode","uiShellAppAreaRef","uiShellResizableRefs","odysseyDesignTokens","useOdysseyDesignTokens","parentContainerRef","useRef","appContainerElementStyles","useMemo","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","useEffect","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","resizingElements","map","resizingRef","filter","element","Boolean","observer","ResizeObserver","resizingElement","addEventListener","observe","disconnect","removeEventListener"],"sources":["../../../src/ui-shell/useMatchAppElementToUiShellAppArea.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 { CSSProperties, RefObject, useEffect, useMemo, useRef } from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { UiShellContentProps } from \"./uiShellContentTypes.js\";\n\nexport const convertCamelCaseToKebabCase = (string: string) =>\n  string.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\nexport const setStylesToMatchElement = ({\n  additionalStyles,\n  appContainerElement,\n  appContentReferenceElement,\n  parentElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n  parentElement: HTMLElement;\n}) => {\n  const appContentReferenceRectangle =\n    appContentReferenceElement.getBoundingClientRect();\n  const parentElementRectangle = parentElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\n    \"top\",\n    `${appContentReferenceRectangle.top - parentElementRectangle.top}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"left\",\n    `${appContentReferenceRectangle.left - parentElementRectangle.left}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"width\",\n    `${appContentReferenceRectangle.width}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"height\",\n    `${appContentReferenceRectangle.height}px`,\n  );\n  appContainerElement.style.setProperty(\"z-index\", \"1\");\n\n  (\n    Object.entries(additionalStyles) as Array<\n      [\n        keyof typeof additionalStyles,\n        (typeof additionalStyles)[keyof typeof additionalStyles],\n      ]\n    >\n  ).forEach(([cssPropertyName, cssPropertyValue]) => {\n    appContainerElement.style.setProperty(\n      convertCamelCaseToKebabCase(cssPropertyName),\n      String(cssPropertyValue),\n    );\n  });\n};\n\nexport type UseMatchAppElementToUiShellAppAreaProps = {\n  /**\n   * Padding around the app area. \"comfortable\" is designed for wider views whereas \"compact\" is designed for narrower views.\n   */\n  paddingMode: \"comfortable\" | \"compact\" | \"none\";\n  /**\n   * Ref for the App Container in UI Shell. This should be the one inside the Shell, **not** the element we're going to align.\n   */\n  uiShellAppAreaRef: RefObject<HTMLDivElement>;\n  /**\n   * Array of refs of items that indirectly resize the app content area such as \"side nav\" and \"top nav\".\n   */\n  uiShellResizableRefs: Array<RefObject<HTMLDivElement>>;\n} & Pick<UiShellContentProps, \"appElement\" | \"appElementScrollingMode\">;\n\nexport const useMatchAppElementToUiShellAppArea = ({\n  appElement,\n  appElementScrollingMode,\n  paddingMode,\n  uiShellAppAreaRef,\n  uiShellResizableRefs,\n}: UseMatchAppElementToUiShellAppAreaProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const parentContainerRef = useRef<HTMLDivElement>(null);\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      ...(paddingMode === \"comfortable\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing8,\n          }\n        : {}),\n      ...(paddingMode === \"compact\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing5,\n          }\n        : {}),\n      ...(appElementScrollingMode === \"horizontal\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n      ...(appElementScrollingMode === \"vertical\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [appElementScrollingMode, paddingMode, odysseyDesignTokens],\n  );\n\n  useEffect(() => {\n    // Once `appContainerRef` is rendered, we can position `appContainerElement` on top to match.\n    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n\n        animationFrameId = requestAnimationFrame(() => {\n          if (uiShellAppAreaRef.current && parentContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: uiShellAppAreaRef.current,\n              appContainerElement: appElement,\n              parentElement: parentContainerRef.current,\n            });\n          }\n        });\n      };\n\n      // These refs might change by the time we unsubscribe, so we need to keep references to the original elements.\n      const resizingElements = uiShellResizableRefs\n        .map((resizingRef) => resizingRef.current)\n        .filter((element): element is NonNullable<typeof element> =>\n          Boolean(element),\n        );\n\n      // Set up a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n\n      // document.addEventListener(\"ready\", updateStyles);\n\n      resizingElements.forEach((resizingElement) => {\n        resizingElement.addEventListener(\"transitionend\", updateStyles);\n\n        observer.observe(resizingElement);\n      });\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n\n        resizingElements.forEach((resizingElement) => {\n          resizingElement.removeEventListener(\"transitionend\", updateStyles);\n        });\n      };\n    }\n    return () => {};\n  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useMatchAppElementToUiShellAppArea.cjs","names":["_react","require","_OdysseyDesignTokensContext","convertCamelCaseToKebabCase","string","replace","toLowerCase","exports","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","parentElement","appContentReferenceRectangle","getBoundingClientRect","parentElementRectangle","style","setProperty","top","left","width","height","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","useMatchAppElementToUiShellAppArea","appElement","appElementScrollingMode","paddingMode","uiShellAppAreaRef","uiShellResizableRefs","odysseyDesignTokens","useOdysseyDesignTokens","parentContainerRef","useRef","appContainerElementStyles","useMemo","boxSizing","zIndex","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","useEffect","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","resizingElements","map","resizingRef","filter","element","Boolean","observer","ResizeObserver","resizingElement","addEventListener","observe","disconnect","removeEventListener"],"sources":["../../../src/ui-shell/useMatchAppElementToUiShellAppArea.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 { CSSProperties, RefObject, useEffect, useMemo, useRef } from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { UiShellContentProps } from \"./uiShellContentTypes.js\";\n\nexport const convertCamelCaseToKebabCase = (string: string) =>\n  string.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\nexport const setStylesToMatchElement = ({\n  additionalStyles,\n  appContainerElement,\n  appContentReferenceElement,\n  parentElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n  parentElement: HTMLElement;\n}) => {\n  const appContentReferenceRectangle =\n    appContentReferenceElement.getBoundingClientRect();\n  const parentElementRectangle = parentElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\n    \"top\",\n    `${appContentReferenceRectangle.top - parentElementRectangle.top}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"left\",\n    `${appContentReferenceRectangle.left - parentElementRectangle.left}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"width\",\n    `${appContentReferenceRectangle.width}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"height\",\n    `${appContentReferenceRectangle.height}px`,\n  );\n\n  (\n    Object.entries(additionalStyles) as Array<\n      [\n        keyof typeof additionalStyles,\n        (typeof additionalStyles)[keyof typeof additionalStyles],\n      ]\n    >\n  ).forEach(([cssPropertyName, cssPropertyValue]) => {\n    appContainerElement.style.setProperty(\n      convertCamelCaseToKebabCase(cssPropertyName),\n      String(cssPropertyValue),\n    );\n  });\n};\n\nexport type UseMatchAppElementToUiShellAppAreaProps = {\n  /**\n   * Padding around the app area. \"comfortable\" is designed for wider views whereas \"compact\" is designed for narrower views.\n   */\n  paddingMode: \"comfortable\" | \"compact\" | \"none\";\n  /**\n   * Ref for the App Container in UI Shell. This should be the one inside the Shell, **not** the element we're going to align.\n   */\n  uiShellAppAreaRef: RefObject<HTMLDivElement>;\n  /**\n   * Array of refs of items that indirectly resize the app content area such as \"side nav\" and \"top nav\".\n   */\n  uiShellResizableRefs: Array<RefObject<HTMLDivElement>>;\n} & Pick<UiShellContentProps, \"appElement\" | \"appElementScrollingMode\">;\n\nexport const useMatchAppElementToUiShellAppArea = ({\n  appElement,\n  appElementScrollingMode,\n  paddingMode,\n  uiShellAppAreaRef,\n  uiShellResizableRefs,\n}: UseMatchAppElementToUiShellAppAreaProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const parentContainerRef = useRef<HTMLDivElement>(null);\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      boxSizing: \"border-box\",\n      zIndex: 1,\n      ...(paddingMode === \"comfortable\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing8,\n          }\n        : {}),\n\n      ...(paddingMode === \"compact\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing5,\n          }\n        : {}),\n\n      ...(appElementScrollingMode === \"horizontal\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n\n      ...(appElementScrollingMode === \"vertical\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [appElementScrollingMode, paddingMode, odysseyDesignTokens],\n  );\n\n  useEffect(() => {\n    // Once `appContainerRef` is rendered, we can position `appContainerElement` on top to match.\n    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n\n        animationFrameId = requestAnimationFrame(() => {\n          if (uiShellAppAreaRef.current && parentContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: uiShellAppAreaRef.current,\n              appContainerElement: appElement,\n              parentElement: parentContainerRef.current,\n            });\n          }\n        });\n      };\n\n      // These refs might change by the time we unsubscribe, so we need to keep references to the original elements.\n      const resizingElements = uiShellResizableRefs\n        .map((resizingRef) => resizingRef.current)\n        .filter((element): element is NonNullable<typeof element> =>\n          Boolean(element),\n        );\n\n      // Set up a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n\n      // document.addEventListener(\"ready\", updateStyles);\n\n      resizingElements.forEach((resizingElement) => {\n        resizingElement.addEventListener(\"transitionend\", updateStyles);\n\n        observer.observe(resizingElement);\n      });\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n\n        resizingElements.forEach((resizingElement) => {\n          resizingElement.removeEventListener(\"transitionend\", updateStyles);\n        });\n      };\n    }\n    return () => {};\n  }, [\n    appElement,\n    appContainerElementStyles,\n    uiShellAppAreaRef,\n    uiShellResizableRefs,\n  ]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":"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","ignoreList":[]}