@okta/odyssey-react-mui 1.35.2 → 1.36.0

package/dist/esm/ui-shell/SideNav/useIsSideNavCollapsedSessionStorage.js

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

package/dist/esm/ui-shell/SideNav/useIsSideNavCollapsedSessionStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsSideNavCollapsedSessionStorage.js","names":["useSessionStorageState","sessionStorageKey","useIsSideNavCollapsedSessionStorage","isSideNavInitiallyCollapsed","initialState","key"],"sources":["../../../../src/ui-shell/SideNav/useIsSideNavCollapsedSessionStorage.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 { useSessionStorageState } from \"../../useSessionStorageState.js\";\n\nexport const sessionStorageKey = \"__uiShell-sideNav-isCollapsed\";\n\nexport const useIsSideNavCollapsedSessionStorage = (\n  isSideNavInitiallyCollapsed: boolean,\n) =>\n  useSessionStorageState({\n    initialState: isSideNavInitiallyCollapsed,\n    key: sessionStorageKey,\n  });\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,sBAAsB,QAAQ,iCAAiC;AAExE,OAAO,MAAMC,iBAAiB,GAAG,+BAA+B;AAEhE,OAAO,MAAMC,mCAAmC,GAC9CC,2BAAoC,IAEpCH,sBAAsB,CAAC;EACrBI,YAAY,EAAED,2BAA2B;EACzCE,GAAG,EAAEJ;AACP,CAAC,CAAC","ignoreList":[]}

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

@@ -23,6 +23,7 @@ import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShel
 import { useUiShellContext } from "./UiShellProvider.js";
 import { emptySideNavItems } from "./uiShellSharedConstants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const appSwitcherDefaultAppIcons = [];
 const StyledAppContainer = styled("div", {
   shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
 })(({
@@ -101,8 +102,8 @@ const WideUiShellContent = ({
         fallback: null,
         onError: onError,
         children: _jsx(AppSwitcher, {
+          appIcons: appSwitcherDefaultAppIcons,
           isLoading: true,
-          appIcons: [],
           selectedAppName: ""
         })
       }), appSwitcherProps && _jsx(ErrorBoundary, {

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

@@ -1 +1 @@
-{"version":3,"file":"WideUiShellContent.js","names":["styled","memo","useRef","ErrorBoundary","AppSwitcher","InnerAppContainer","useOdysseyDesignTokens","SideNav","TopNav","useScrollState","useMatchAppElementToUiShellAppArea","useUiShellContext","emptySideNavItems","jsx","_jsx","jsxs","_jsxs","StyledAppContainer","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","uiShellContext","isContentScrolled","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","paddingMode","uiShellResizableRefs","ref","children","banners","includes","fallback","isLoading","appIcons","selectedAppName","undefined","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","MemoizedWideUiShellContent","displayName"],"sources":["../../../src/ui-shell/WideUiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { AppSwitcher } from \"./AppSwitcher/index.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 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 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              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":"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","ignoreList":[]}
+{"version":3,"file":"WideUiShellContent.js","names":["styled","memo","useRef","ErrorBoundary","AppSwitcher","InnerAppContainer","useOdysseyDesignTokens","SideNav","TopNav","useScrollState","useMatchAppElementToUiShellAppArea","useUiShellContext","emptySideNavItems","jsx","_jsx","jsxs","_jsxs","appSwitcherDefaultAppIcons","StyledAppContainer","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","uiShellContext","isContentScrolled","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","paddingMode","uiShellResizableRefs","ref","children","banners","includes","fallback","appIcons","isLoading","selectedAppName","undefined","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","MemoizedWideUiShellContent","displayName"],"sources":["../../../src/ui-shell/WideUiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { 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":"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","ignoreList":[]}

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

@@ -21,5 +21,5 @@ export * from "./useHasUiShell.js";
 export * from "./WideUiShellContent.js";
 export * from "../web-component/renderReactInWebComponent.js";
 export { UiShell } from "./UiShell.js";
-export { adminAppUiShellBreakpoints } from "./useUiShellBreakpoints.js";
+export { adminAppUiShellBreakpoints, useUiShellBreakpoints } from "./useUiShellBreakpoints.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["UiShell","adminAppUiShellBreakpoints"],"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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AAEvC,cAAc,+CAA+C;AAE7D,SAASA,OAAO,QAA2B,cAAc;AACzD,SAASC,0BAA0B,QAAQ,4BAA4B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["UiShell","adminAppUiShellBreakpoints","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 {\n  adminAppUiShellBreakpoints,\n  useUiShellBreakpoints,\n} from \"./useUiShellBreakpoints.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AAEvC,cAAc,+CAA+C;AAE7D,SAASA,OAAO,QAA2B,cAAc;AACzD,SACEC,0BAA0B,EAC1BC,qBAAqB,QAChB,4BAA4B","ignoreList":[]}

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

@@ -92,7 +92,7 @@ export const useMatchAppElementToUiShellAppArea = ({
       };
     }
     return () => {};
-  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);
+  }, [appElement, appContainerElementStyles, uiShellAppAreaRef, uiShellResizableRefs]);
   return {
     parentContainerRef
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useMatchAppElementToUiShellAppArea.js","names":["useEffect","useMemo","useRef","useOdysseyDesignTokens","convertCamelCaseToKebabCase","string","replace","toLowerCase","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","parentContainerRef","appContainerElementStyles","boxSizing","zIndex","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","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  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useMatchAppElementToUiShellAppArea.js","names":["useEffect","useMemo","useRef","useOdysseyDesignTokens","convertCamelCaseToKebabCase","string","replace","toLowerCase","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","parentContainerRef","appContainerElementStyles","boxSizing","zIndex","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","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":[]}

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

@@ -10,30 +10,76 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useEffect, useMemo, useState } from "react";
-export const useScrollState = scrollableContentElement => {
-  const [isContentScrolled, setIsContentScrolled] = useState(false);
-  const scrollableElement = useMemo(() => scrollableContentElement, [scrollableContentElement]);
-  useEffect(() => {
-    if (scrollableElement) {
-      let requestedAnimationFrameId;
-      const updateScrollState = () => {
-        cancelAnimationFrame(requestedAnimationFrameId);
-        requestedAnimationFrameId = requestAnimationFrame(() => {
-          setIsContentScrolled(scrollableElement.scrollTop > 0);
-        });
-      };
+import { useCallback, useEffect, useRef, useState } from "react";
+export const getIsScrollHeightElement = ({
+  containerElement,
+  scrollableElement
+}) => {
+  const containerElementHeight = containerElement.getBoundingClientRect().height;
+  const scrollableElementHeight = scrollableElement.getBoundingClientRect().height;
+  return scrollableElementHeight - containerElementHeight >= 0;
+};
+export const getIsYAxisScrollContainer = element => {
+  const overflowY = window.getComputedStyle(element).overflowY;
+  return overflowY === "auto" || overflowY === "scroll";
+};
+export const getIsYAxisScrolling = element => element.scrollHeight > element.clientHeight ? getIsYAxisScrollContainer(element) : false;
+export const getNestedScrollContainers = containerElement => Array.from(containerElement.querySelectorAll("*")).filter(element => getIsYAxisScrollContainer(element)).filter(scrollableElement => getIsScrollHeightElement({
+  containerElement,
+  scrollableElement
+}));
+export const fakeDefaultContainerElement = document.createElement("div");
+export const useScrollState = containerElement => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const requestedAnimationFrameIdRef = useRef(0);
+  const scrollableElementsRef = useRef([]);
+  const updateScrollState = useCallback(() => {
+    cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {
+      setIsScrolled(scrollableElementsRef.current.reduce((isScrolled, scrollableElement) => isScrolled || scrollableElement.scrollTop > 0, false));
+    });
+  }, []);
+  const addScrollEventListeners = useCallback(() => {
+    scrollableElementsRef.current.forEach(scrollableElement => {
       scrollableElement.addEventListener("scroll", updateScrollState);
-      updateScrollState();
-      return () => {
-        scrollableElement.removeEventListener("scroll", updateScrollState);
-        cancelAnimationFrame(requestedAnimationFrameId);
-      };
+    });
+  }, [updateScrollState]);
+  const removeScrollEventListeners = useCallback(() => {
+    scrollableElementsRef.current.forEach(scrollableElement => {
+      scrollableElement.removeEventListener("scroll", updateScrollState);
+    });
+  }, [updateScrollState]);
+  const updateScrollableElements = useCallback(() => {
+    const computedContainerElement = containerElement || fakeDefaultContainerElement;
+    scrollableElementsRef.current = getNestedScrollContainers(computedContainerElement).concat(computedContainerElement);
+  }, [containerElement]);
+  const updateScrollListeners = useCallback(() => {
+    removeScrollEventListeners();
+    updateScrollableElements();
+    addScrollEventListeners();
+    updateScrollState();
+  }, [addScrollEventListeners, removeScrollEventListeners, updateScrollableElements, updateScrollState]);
+  useEffect(() => {
+    const mutationObserver = new MutationObserver(() => {
+      updateScrollListeners();
+    });
+    if (containerElement) {
+      mutationObserver.observe(containerElement, {
+        attributes: true,
+        attributeFilter: ["style"],
+        childList: true,
+        subtree: true
+      });
     }
-    return () => {};
-  }, [scrollableElement]);
+    updateScrollListeners();
+    return () => {
+      cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+      removeScrollEventListeners();
+      mutationObserver.disconnect();
+    };
+  }, [containerElement, removeScrollEventListeners, updateScrollListeners]);
   return {
-    isContentScrolled
+    isContentScrolled: isScrolled
   };
 };
 //# sourceMappingURL=useScrollState.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollState.js","names":["useEffect","useMemo","useState","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","scrollableElement","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener"],"sources":["../../../src/ui-shell/useScrollState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useMemo, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement,\n    [scrollableContentElement],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEpD,OAAO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEjE,MAAMK,iBAAiB,GAAGN,OAAO,CAC/B,MAAMG,wBAAwB,EAC9B,CAACA,wBAAwB,CAC3B,CAAC;EAEDJ,SAAS,CAAC,MAAM;IACd,IAAIO,iBAAiB,EAAE;MACrB,IAAIC,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDL,oBAAoB,CAACC,iBAAiB,CAACK,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDL,iBAAiB,CAACM,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXF,iBAAiB,CAACO,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACD,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLF;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"useScrollState.js","names":["useCallback","useEffect","useRef","useState","getIsScrollHeightElement","containerElement","scrollableElement","containerElementHeight","getBoundingClientRect","height","scrollableElementHeight","getIsYAxisScrollContainer","element","overflowY","window","getComputedStyle","getIsYAxisScrolling","scrollHeight","clientHeight","getNestedScrollContainers","Array","from","querySelectorAll","filter","fakeDefaultContainerElement","document","createElement","useScrollState","isScrolled","setIsScrolled","requestedAnimationFrameIdRef","scrollableElementsRef","updateScrollState","cancelAnimationFrame","current","requestAnimationFrame","reduce","scrollTop","addScrollEventListeners","forEach","addEventListener","removeScrollEventListeners","removeEventListener","updateScrollableElements","computedContainerElement","concat","updateScrollListeners","mutationObserver","MutationObserver","observe","attributes","attributeFilter","childList","subtree","disconnect","isContentScrolled"],"sources":["../../../src/ui-shell/useScrollState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport const getIsScrollHeightElement = ({\n  containerElement,\n  scrollableElement,\n}: {\n  containerElement: HTMLElement;\n  scrollableElement: HTMLElement;\n}) => {\n  const containerElementHeight =\n    containerElement.getBoundingClientRect().height;\n  const scrollableElementHeight =\n    scrollableElement.getBoundingClientRect().height;\n\n  return scrollableElementHeight - containerElementHeight >= 0;\n};\n\nexport const getIsYAxisScrollContainer = (element: HTMLElement) => {\n  const overflowY = window.getComputedStyle(element).overflowY;\n\n  return overflowY === \"auto\" || overflowY === \"scroll\";\n};\n\nexport const getIsYAxisScrolling = (element: HTMLElement) =>\n  element.scrollHeight > element.clientHeight\n    ? getIsYAxisScrollContainer(element)\n    : false;\n\nexport const getNestedScrollContainers = (containerElement: HTMLElement) =>\n  Array.from(containerElement.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => getIsYAxisScrollContainer(element))\n    .filter((scrollableElement) =>\n      getIsScrollHeightElement({\n        containerElement,\n        scrollableElement,\n      }),\n    );\n\nexport const fakeDefaultContainerElement = document.createElement(\"div\");\n\nexport const useScrollState = <\n  ContainerElement extends HTMLElement = HTMLDivElement,\n>(\n  /**\n   * The element containing a scroll area.\n   */\n  containerElement: ContainerElement | null,\n) => {\n  const [isScrolled, setIsScrolled] = useState(false);\n\n  const requestedAnimationFrameIdRef = useRef(0);\n  const scrollableElementsRef = useRef<HTMLElement[]>([]);\n\n  const updateScrollState = useCallback(() => {\n    cancelAnimationFrame(requestedAnimationFrameIdRef.current);\n\n    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {\n      setIsScrolled(\n        scrollableElementsRef.current.reduce(\n          (isScrolled, scrollableElement) =>\n            isScrolled || scrollableElement.scrollTop > 0,\n          false,\n        ),\n      );\n    });\n  }, []);\n\n  const addScrollEventListeners = useCallback(() => {\n    scrollableElementsRef.current.forEach((scrollableElement) => {\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n    });\n  }, [updateScrollState]);\n\n  const removeScrollEventListeners = useCallback(() => {\n    scrollableElementsRef.current.forEach((scrollableElement) => {\n      scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n    });\n  }, [updateScrollState]);\n\n  const updateScrollableElements = useCallback(() => {\n    const computedContainerElement =\n      containerElement || fakeDefaultContainerElement;\n\n    scrollableElementsRef.current = getNestedScrollContainers(\n      computedContainerElement,\n    ).concat(computedContainerElement);\n  }, [containerElement]);\n\n  const updateScrollListeners = useCallback(() => {\n    removeScrollEventListeners();\n    updateScrollableElements();\n    addScrollEventListeners();\n    updateScrollState();\n  }, [\n    addScrollEventListeners,\n    removeScrollEventListeners,\n    updateScrollableElements,\n    updateScrollState,\n  ]);\n\n  useEffect(() => {\n    const mutationObserver = new MutationObserver(() => {\n      updateScrollListeners();\n    });\n\n    if (containerElement) {\n      mutationObserver.observe(containerElement, {\n        attributes: true,\n        attributeFilter: [\"style\"],\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    updateScrollListeners();\n\n    return () => {\n      cancelAnimationFrame(requestedAnimationFrameIdRef.current);\n      removeScrollEventListeners();\n      mutationObserver.disconnect();\n    };\n  }, [containerElement, removeScrollEventListeners, updateScrollListeners]);\n\n  return {\n    isContentScrolled: isScrolled,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/useMountLifecycleEffect.js

@@ -0,0 +1,29 @@
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useRef } from "react";
+export const useMountLifecycleEffect = ({
+  onMount,
+  onUpdate
+}) => {
+  const hasSetSessionStorageRef = useRef(false);
+  const onMountRef = useRef(onMount);
+  useEffect(() => {
+    if (hasSetSessionStorageRef.current) {
+      onUpdate?.();
+    } else {
+      hasSetSessionStorageRef.current = true;
+      onMountRef.current?.();
+    }
+  }, [onUpdate]);
+};
+//# sourceMappingURL=useMountLifecycleEffect.js.map

package/dist/esm/useMountLifecycleEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMountLifecycleEffect.js","names":["useEffect","useRef","useMountLifecycleEffect","onMount","onUpdate","hasSetSessionStorageRef","onMountRef","current"],"sources":["../../src/useMountLifecycleEffect.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 { useEffect, useRef } from \"react\";\n\nexport const useMountLifecycleEffect = ({\n  onMount,\n  onUpdate,\n}: {\n  onMount?: () => void;\n  onUpdate?: () => void;\n}) => {\n  const hasSetSessionStorageRef = useRef(false);\n  const onMountRef = useRef(onMount);\n\n  useEffect(() => {\n    if (hasSetSessionStorageRef.current) {\n      onUpdate?.();\n    } else {\n      hasSetSessionStorageRef.current = true;\n      onMountRef.current?.();\n    }\n  }, [onUpdate]);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEzC,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACtCC,OAAO;EACPC;AAIF,CAAC,KAAK;EACJ,MAAMC,uBAAuB,GAAGJ,MAAM,CAAC,KAAK,CAAC;EAC7C,MAAMK,UAAU,GAAGL,MAAM,CAACE,OAAO,CAAC;EAElCH,SAAS,CAAC,MAAM;IACd,IAAIK,uBAAuB,CAACE,OAAO,EAAE;MACnCH,QAAQ,GAAG,CAAC;IACd,CAAC,MAAM;MACLC,uBAAuB,CAACE,OAAO,GAAG,IAAI;MACtCD,UAAU,CAACC,OAAO,GAAG,CAAC;IACxB;EACF,CAAC,EAAE,CAACH,QAAQ,CAAC,CAAC;AAChB,CAAC","ignoreList":[]}

package/dist/esm/useSessionStorageState.js

@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMountLifecycleEffect } from "./useMountLifecycleEffect.js";
+export const getSessionStorageValue = key => {
+  const sessionStorageValue = window.sessionStorage.getItem(key);
+  try {
+    if (typeof sessionStorageValue === "string") {
+      return JSON.parse(sessionStorageValue);
+    }
+    return null;
+  } catch {
+    if (typeof sessionStorageValue === "string") {
+      return sessionStorageValue;
+    }
+    return null;
+  }
+};
+export const useSessionStorageState = ({
+  initialState,
+  key
+}) => {
+  if (!key) {
+    throw new Error("You must pass a value for `key`.");
+  }
+  const sessionState = useMemo(() => getSessionStorageValue(key), [key]);
+  const setSessionState = useCallback(value => {
+    const sessionStorageState = typeof value === "undefined" ? "" : JSON.stringify(value);
+    window.sessionStorage.setItem(key, sessionStorageState);
+  }, [key]);
+  const [localState, setLocalState] = useState(() => sessionState ?? initialState);
+  useEffect(() => {
+    setSessionState(localState);
+  }, [localState, setSessionState]);
+  const onUpdate = useCallback(() => {
+    setLocalState(sessionState ?? initialState);
+  }, [initialState, sessionState]);
+  useMountLifecycleEffect({
+    onUpdate
+  });
+  return {
+    sessionState: localState,
+    setSessionState: setLocalState
+  };
+};
+//# sourceMappingURL=useSessionStorageState.js.map

package/dist/esm/useSessionStorageState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSessionStorageState.js","names":["useCallback","useEffect","useMemo","useState","useMountLifecycleEffect","getSessionStorageValue","key","sessionStorageValue","window","sessionStorage","getItem","JSON","parse","useSessionStorageState","initialState","Error","sessionState","setSessionState","value","sessionStorageState","stringify","setItem","localState","setLocalState","onUpdate"],"sources":["../../src/useSessionStorageState.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 { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useMountLifecycleEffect } from \"./useMountLifecycleEffect.js\";\n\nexport const getSessionStorageValue = <Value>(key: string): Value | null => {\n  const sessionStorageValue = window.sessionStorage.getItem(key);\n\n  try {\n    if (typeof sessionStorageValue === \"string\") {\n      return JSON.parse(sessionStorageValue) as Value;\n    }\n\n    return null;\n  } catch {\n    if (typeof sessionStorageValue === \"string\") {\n      return sessionStorageValue as Value;\n    }\n\n    return null;\n  }\n};\n\nexport const useSessionStorageState = <Value>({\n  initialState,\n  key,\n}: {\n  initialState: Value;\n  key: string;\n}) => {\n  if (!key) {\n    throw new Error(\"You must pass a value for `key`.\");\n  }\n\n  const sessionState = useMemo(() => getSessionStorageValue<Value>(key), [key]);\n\n  const setSessionState = useCallback(\n    (value: Value) => {\n      const sessionStorageState =\n        typeof value === \"undefined\" ? \"\" : JSON.stringify(value);\n\n      window.sessionStorage.setItem(key, sessionStorageState);\n    },\n    [key],\n  );\n\n  const [localState, setLocalState] = useState<Value>(\n    () => sessionState ?? initialState,\n  );\n\n  // This keeps session storage's state based on local state.\n  useEffect(() => {\n    setSessionState(localState);\n  }, [localState, setSessionState]);\n\n  // This updates when `key` is updated.\n  const onUpdate = useCallback(() => {\n    setLocalState(sessionState ?? initialState);\n  }, [initialState, sessionState]);\n\n  useMountLifecycleEffect({\n    onUpdate,\n  });\n\n  return {\n    sessionState: localState,\n    setSessionState: setLocalState,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACjE,SAASC,uBAAuB,QAAQ,8BAA8B;AAEtE,OAAO,MAAMC,sBAAsB,GAAWC,GAAW,IAAmB;EAC1E,MAAMC,mBAAmB,GAAGC,MAAM,CAACC,cAAc,CAACC,OAAO,CAACJ,GAAG,CAAC;EAE9D,IAAI;IACF,IAAI,OAAOC,mBAAmB,KAAK,QAAQ,EAAE;MAC3C,OAAOI,IAAI,CAACC,KAAK,CAACL,mBAAmB,CAAC;IACxC;IAEA,OAAO,IAAI;EACb,CAAC,CAAC,MAAM;IACN,IAAI,OAAOA,mBAAmB,KAAK,QAAQ,EAAE;MAC3C,OAAOA,mBAAmB;IAC5B;IAEA,OAAO,IAAI;EACb;AACF,CAAC;AAED,OAAO,MAAMM,sBAAsB,GAAGA,CAAQ;EAC5CC,YAAY;EACZR;AAIF,CAAC,KAAK;EACJ,IAAI,CAACA,GAAG,EAAE;IACR,MAAM,IAAIS,KAAK,CAAC,kCAAkC,CAAC;EACrD;EAEA,MAAMC,YAAY,GAAGd,OAAO,CAAC,MAAMG,sBAAsB,CAAQC,GAAG,CAAC,EAAE,CAACA,GAAG,CAAC,CAAC;EAE7E,MAAMW,eAAe,GAAGjB,WAAW,CAChCkB,KAAY,IAAK;IAChB,MAAMC,mBAAmB,GACvB,OAAOD,KAAK,KAAK,WAAW,GAAG,EAAE,GAAGP,IAAI,CAACS,SAAS,CAACF,KAAK,CAAC;IAE3DV,MAAM,CAACC,cAAc,CAACY,OAAO,CAACf,GAAG,EAAEa,mBAAmB,CAAC;EACzD,CAAC,EACD,CAACb,GAAG,CACN,CAAC;EAED,MAAM,CAACgB,UAAU,EAAEC,aAAa,CAAC,GAAGpB,QAAQ,CAC1C,MAAMa,YAAY,IAAIF,YACxB,CAAC;EAGDb,SAAS,CAAC,MAAM;IACdgB,eAAe,CAACK,UAAU,CAAC;EAC7B,CAAC,EAAE,CAACA,UAAU,EAAEL,eAAe,CAAC,CAAC;EAGjC,MAAMO,QAAQ,GAAGxB,WAAW,CAAC,MAAM;IACjCuB,aAAa,CAACP,YAAY,IAAIF,YAAY,CAAC;EAC7C,CAAC,EAAE,CAACA,YAAY,EAAEE,YAAY,CAAC,CAAC;EAEhCZ,uBAAuB,CAAC;IACtBoB;EACF,CAAC,CAAC;EAEF,OAAO;IACLR,YAAY,EAAEM,UAAU;IACxBL,eAAe,EAAEM;EACnB,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -10,12 +10,14 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+export const appRootElementId = "app-root";
+export const stylesRootElementId = "style-root";
 export const createReactRootElements = () => {
   const appRootElement = document.createElement("div");
   const stylesRootElement = document.createElement("div");
   appRootElement.style.setProperty("height", "inherit");
-  appRootElement.setAttribute("id", "app-root");
-  stylesRootElement.setAttribute("id", "style-root");
+  appRootElement.setAttribute("id", appRootElementId);
+  stylesRootElement.setAttribute("id", stylesRootElementId);
   stylesRootElement.setAttribute("nonce", window.cspNonce);
   return {
     appRootElement,

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

@@ -1 +1 @@
-{"version":3,"file":"createReactRootElements.js","names":["createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce"],"sources":["../../../src/web-component/createReactRootElements.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport type ReactRootElements = {\n  /**\n   * The element your root React component renders into.\n   * React has to render or portal somewhere, and this element can be used for that root element.\n   */\n  appRootElement: HTMLDivElement;\n  /**\n   * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n   *\n   * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n   */\n  stylesRootElement: HTMLDivElement | HTMLHeadElement;\n};\n\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", \"app-root\");\n  stylesRootElement.setAttribute(\"id\", \"style-root\");\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    appRootElement,\n    stylesRootElement,\n  } satisfies ReactRootElements;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA,OAAO,MAAMA,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACpD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGvDF,cAAc,CAACI,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAErDL,cAAc,CAACM,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;EAC7CH,iBAAiB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAClDH,iBAAiB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAExD,OAAO;IACLR,cAAc;IACdG;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"createReactRootElements.js","names":["appRootElementId","stylesRootElementId","createReactRootElements","appRootElement","document","createElement","stylesRootElement","style","setProperty","setAttribute","window","cspNonce"],"sources":["../../../src/web-component/createReactRootElements.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport type ReactRootElements = {\n  /**\n   * The element your root React component renders into.\n   * React has to render or portal somewhere, and this element can be used for that root element.\n   */\n  appRootElement: HTMLDivElement;\n  /**\n   * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.\n   *\n   * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.\n   */\n  stylesRootElement: HTMLDivElement | HTMLHeadElement;\n};\n\nexport const appRootElementId = \"app-root\";\nexport const stylesRootElementId = \"style-root\";\n\nexport const createReactRootElements = () => {\n  const appRootElement = document.createElement(\"div\");\n  const stylesRootElement = document.createElement(\"div\");\n\n  // This `div` may cause layout issues unless it inherits the parent's height.\n  appRootElement.style.setProperty(\"height\", \"inherit\");\n\n  appRootElement.setAttribute(\"id\", appRootElementId);\n  stylesRootElement.setAttribute(\"id\", stylesRootElementId);\n  stylesRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  return {\n    appRootElement,\n    stylesRootElement,\n  } satisfies ReactRootElements;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA,OAAO,MAAMA,gBAAgB,GAAG,UAAU;AAC1C,OAAO,MAAMC,mBAAmB,GAAG,YAAY;AAE/C,OAAO,MAAMC,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACpD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGvDF,cAAc,CAACI,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAErDL,cAAc,CAACM,YAAY,CAAC,IAAI,EAAET,gBAAgB,CAAC;EACnDM,iBAAiB,CAACG,YAAY,CAAC,IAAI,EAAER,mBAAmB,CAAC;EACzDK,iBAAiB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAExD,OAAO;IACLR,cAAc;IACdG;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 19:00:00 GMT
+ * Generated on Thu, 24 Apr 2025 19:05:52 GMT
  */
 
 module.exports = {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 19:00:00 GMT
+ * Generated on Thu, 24 Apr 2025 19:05:52 GMT
  */
 
 export const BorderColorControl = "#8d8d8d";

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 19:00:00 GMT
+ * Generated on Thu, 24 Apr 2025 19:05:52 GMT
  */
 
 $border-color-control: #8d8d8d !default;