npm - @okta/odyssey-react-mui - Versions diffs - 1.35.0 → 1.35.4 - Mend

@okta/odyssey-react-mui 1.35.0 → 1.35.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/dist/esm/ui-shell/TopNav/TopNav.js CHANGED Viewed

@@ -23,16 +23,13 @@ const StyledRightSideContainer = styled("div")(() => ({
   flexShrink: 0
 }));
 const StyledTopNavContainer = styled("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%",
@@ -49,7 +46,6 @@ const StyledTopNavContainer = styled("div", {
   })
 }));
 const TopNav = ({
-  isScrolled,
   leftSideComponent,
   rightSideComponent
 }) => {
@@ -57,7 +53,6 @@ const TopNav = ({
   const uiShellContext = useUiShellContext();
   return _jsxs(StyledTopNavContainer, {
     odysseyDesignTokens: odysseyDesignTokens,
-    isScrolled: isScrolled,
     topNavBackgroundColor: uiShellContext?.topNavBackgroundColor,
     children: [_jsx(StyledLeftSideContainer, {
       children: leftSideComponent ?? _jsx("div", {})

package/dist/esm/ui-shell/TopNav/TopNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TopNav.js","names":["styled","memo","useOdysseyDesignTokens","useUiShellContext","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","jsx","_jsx","jsxs","_jsxs","StyledLeftSideContainer","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","~~isScrolled","~~topNavBackgroundColor","alignItems","backgroundColor","~~boxShadow","DepthMedium","undefined","clipPath","~~display","gap","Spacing4","height","justifyContent","maxHeight","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","uiShellContext","children","MemoizedTopNav","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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAG/C,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAEEC,iBAAiB,QACZ,mCAAmC;AAC1C,SACEC,cAAc,EACdC,qBAAqB,QAChB,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtC,MAAMC,uBAAuB,GAAGV,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACnDW,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGZ,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDa,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGd,MAAM,CAAC,KAAK,EAAE;EAC1Ce,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,~~IAC9BA~~,IAAI,KAAK~~,YAAY,IACrBA,IAAI,KAAK~~;~~AACb~~,CAAC,CAAC,~~CAIC~~,CAAC;EAAEC,mBAAmB;EAAEC~~,UAAU~~;~~EAAEC;~~AAAsB,CAAC,MAAM;~~EAClEC~~,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAEF,qBAAqB;EACtCG,~~SAAS,EAAEJ,UAAU,GAAGD,mBAAmB,CAACM,WAAW,GAAGC,SAAS;EACnEC,QAAQ,EAAE,qBAAqB;EAC/BC,~~OAAO,EAAE,MAAM;EACfC,GAAG,~~EAAEV~~,mBAAmB,~~CAACW~~,QAAQ;EACjCC,MAAM,EAAE,MAAM;EACdC,cAAc,EAAE,eAAe;EAC/BC,SAAS,~~EAAE3B~~,cAAc;~~EACzB4B~~,SAAS,~~EAAE5B~~,cAAc;~~EACzB6B~~,YAAY,~~EAAEhB~~,mBAAmB,~~CAACiB~~,QAAQ;EAC1CC,aAAa,~~EAAElB~~,mBAAmB,~~CAACmB~~,QAAQ;EAC3CC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,~~cAAcrB~~,mBAAmB,~~CAACsB~~,sBAAsB,~~IAAItB~~,mBAAmB,~~CAACuB~~,oBAAoB,EAAE;EAClHC,MAAM,~~EAAEpC~~,qBAAqB;EAE7B,~~IAAIc~~,qBAAqB,~~KAAKF~~,mBAAmB,~~CAACyB~~,eAAe,IAAI;IACnEC,YAAY,EAAE,~~GAAG1B~~,mBAAmB,~~CAAC2B~~,eAAe,~~IAAI3B~~,mBAAmB,~~CAAC4B~~,eAAe,~~IAAI5B~~,mBAAmB,~~CAAC6B~~,aAAa;EAClI,CAAC;AACH,CAAC,CAAC,CAAC;AAiBH,MAAMC,MAAM,GAAGA,CAAC;~~EACd7B~~,~~UAAU;EACV8B,~~iBAAiB;~~EACjBC~~;~~AACW~~,CAAC,KAAK;~~EACjB~~,~~MAAMhC~~,mBAAmB,GAAGf,sBAAsB,CAAC,CAAC;EACpD,~~MAAMgD~~,cAAc,~~GAAG/C~~,iBAAiB,CAAC,CAAC;EAE1C,OACEM,KAAA,CAACK,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,~~UAAU,EAAEA,UAAW;IACvBC,~~qBAAqB,~~EAAE+B~~,cAAc,~~EAAE/B~~,qBAAsB;~~IAAAgC~~,QAAA,~~GAE7D5C~~,IAAA,CAACG,uBAAuB;~~MAAAyC~~,QAAA,EACrBH,iBAAiB,~~IAAIzC~~,IAAA,UAAM;IAAC,CACN,CAAC,EAC1BA,IAAA,CAACK,wBAAwB;~~MAAAuC~~,QAAA,EACtBF,kBAAkB,~~IAAI1C~~,IAAA,UAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,~~MAAM6C~~,cAAc,~~GAAGnD~~,IAAI,~~CAAC8C~~,MAAM,CAAC;AACnCK,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIL,MAAM","ignoreList":[]}
1	+ {"version":3,"file":"TopNav.js","names":["styled","memo","useOdysseyDesignTokens","useUiShellContext","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","jsx","_jsx","jsxs","_jsxs","StyledLeftSideContainer","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","topNavBackgroundColor","alignItems","backgroundColor","display","gap","Spacing4","height","justifyContent","maxHeight","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","uiShellContext","children","MemoizedTopNav","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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAG/C,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAEEC,iBAAiB,QACZ,mCAAmC;AAC1C,SACEC,cAAc,EACdC,qBAAqB,QAChB,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtC,MAAMC,uBAAuB,GAAGV,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACnDW,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGZ,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDa,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGd,MAAM,CAAC,KAAK,EAAE;EAC1Ce,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,EAAEtB,cAAc;EACzBuB,SAAS,EAAEvB,cAAc;EACzBwB,YAAY,EAAEX,mBAAmB,CAACY,QAAQ;EAC1CC,aAAa,EAAEb,mBAAmB,CAACc,QAAQ;EAC3CC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,cAAchB,mBAAmB,CAACiB,sBAAsB,IAAIjB,mBAAmB,CAACkB,oBAAoB,EAAE;EAClHC,MAAM,EAAE/B,qBAAqB;EAE7B,IAAIa,qBAAqB,KAAKD,mBAAmB,CAACoB,eAAe,IAAI;IACnEC,YAAY,EAAE,GAAGrB,mBAAmB,CAACsB,eAAe,IAAItB,mBAAmB,CAACuB,eAAe,IAAIvB,mBAAmB,CAACwB,aAAa;EAClI,CAAC;AACH,CAAC,CAAC,CAAC;AAiBH,MAAMC,MAAM,GAAGA,CAAC;EAAEC,iBAAiB;EAAEC;AAAgC,CAAC,KAAK;EACzE,MAAM3B,mBAAmB,GAAGf,sBAAsB,CAAC,CAAC;EACpD,MAAM2C,cAAc,GAAG1C,iBAAiB,CAAC,CAAC;EAE1C,OACEM,KAAA,CAACK,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,qBAAqB,EAAE2B,cAAc,EAAE3B,qBAAsB;IAAA4B,QAAA,GAE7DvC,IAAA,CAACG,uBAAuB;MAAAoC,QAAA,EACrBH,iBAAiB,IAAIpC,IAAA,UAAM;IAAC,CACN,CAAC,EAC1BA,IAAA,CAACK,wBAAwB;MAAAkC,QAAA,EACtBF,kBAAkB,IAAIrC,IAAA,UAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,MAAMwC,cAAc,GAAG9C,IAAI,CAACyC,MAAM,CAAC;AACnCK,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIL,MAAM","ignoreList":[]}

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

@@ -31,6 +31,7 @@ const UiShell = ({
   appBackgroundContrastMode,
   appElement,
   appElementScrollingMode,
+  breakpointConfig,
   closeSideNavMenu,
   hasStandardAppContentPadding,
   initialVisibleSections,
@@ -46,7 +47,7 @@ const UiShell = ({
   uiShellStylesElement
 }) => {
   const [componentProps, setComponentProps] = useState(defaultComponentProps);
-  const activeBreakpoint = useUiShellBreakpoints();
+  const activeBreakpoint = useUiShellBreakpoints(breakpointConfig);
   useEffect(() => {
     const unsubscribe = subscribeToPropChanges(componentProps => {
       setComponentProps(componentProps || defaultComponentProps);
@@ -73,7 +74,7 @@ const UiShell = ({
           subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
           subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
           topNavBackgroundColor: topNavBackgroundColor,
-          children: [activeBreakpoint === "constrained" && _jsx(NarrowUiShellContent, {
+          children: [activeBreakpoint === "narrow" && _jsx(NarrowUiShellContent, {
             ...componentProps,
             appElement: appElement,
             appElementScrollingMode: appElementScrollingMode,
@@ -81,13 +82,13 @@ const UiShell = ({
             initialVisibleSections: initialVisibleSections,
             onError: onError,
             optionalComponents: optionalComponents
-          }), (activeBreakpoint === "compact" || activeBreakpoint === "comfortable") && _jsx(WideUiShellContent, {
+          }), (activeBreakpoint === "medium" || activeBreakpoint === "wide") && _jsx(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/esm/ui-shell/UiShell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","CssBaseline","NarrowUiShellContent","OdysseyProvider","UiShellProvider","useUiShellBreakpoints","WideUiShellContent","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","errorComponent","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","activeBreakpoint","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","isCollapsed","isCollapsible","MemoizedUiShell","displayName"],"sources":["../../../src/ui-shell/UiShell.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n /\n\nimport { memo, 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":[]}
1	+ {"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","CssBaseline","NarrowUiShellContent","OdysseyProvider","UiShellProvider","useUiShellBreakpoints","WideUiShellContent","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","errorComponent","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","breakpointConfig","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","activeBreakpoint","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","isCollapsed","isCollapsible","MemoizedUiShell","displayName"],"sources":["../../../src/ui-shell/UiShell.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n /\n\nimport { memo, 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/esm/ui-shell/WideUiShellContent.js CHANGED Viewed

@@ -14,6 +14,7 @@ import styled from "@emotion/styled";
 import { memo, useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { AppSwitcher } from "./AppSwitcher/index.js";
+import { InnerAppContainer } from "./InnerAppContainer.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
 import { SideNav } from "./SideNav/index.js";
 import { TopNav } from "./TopNav/index.js";
@@ -22,13 +23,16 @@ 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"
 })(({
   appBackgroundColor
 }) => ({
+  backgroundColor: appBackgroundColor,
   gridArea: "app-content",
-  backgroundColor: appBackgroundColor
+  pointerEvents: "none",
+  position: "relative"
 }));
 const StyledAppSwitcherContainer = styled("div")({
   gridArea: "app-switcher"
@@ -98,8 +102,8 @@ const WideUiShellContent = ({
         fallback: null,
         onError: onError,
         children: _jsx(AppSwitcher, {
+          appIcons: appSwitcherDefaultAppIcons,
           isLoading: true,
-          appIcons: [],
           selectedAppName: ""
         })
       }), appSwitcherProps && _jsx(ErrorBoundary, {
@@ -147,7 +151,6 @@ const WideUiShellContent = ({
         onError: onError,
         children: _jsx(TopNav, {
           ...topNavProps,
-          isScrolled: isContentScrolled,
           leftSideComponent: optionalComponents?.topNavLeftSide,
           rightSideComponent: optionalComponents?.topNavRightSide
         })
@@ -155,7 +158,10 @@ const WideUiShellContent = ({
     }), _jsx(StyledAppContainer, {
       appBackgroundColor: uiShellContext?.appBackgroundColor,
       tabIndex: 0,
-      ref: uiShellAppAreaRef
+      ref: uiShellAppAreaRef,
+      children: _jsx(InnerAppContainer, {
+        isContentScrolled: isContentScrolled
+      })
     })]
   });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"WideUiShellContent.js","names":["styled","memo","useRef","ErrorBoundary","AppSwitcher","useOdysseyDesignTokens","SideNav","TopNav","useScrollState","useMatchAppElementToUiShellAppArea","useUiShellContext","emptySideNavItems","jsx","_jsx","jsxs","_jsxs","StyledAppContainer","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","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","isScrolled","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 {\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":[]}
1	+ {"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 CHANGED Viewed

@@ -11,13 +11,15 @@
  */
 export * from "./AppSwitcher/index.js";
+export * from "./InnerAppContainer.js";
 export * from "./NarrowUiShellContent.js";
 export * from "./renderUiShell.js";
 export * from "./SideNav/index.js";
 export * from "./TopNav/index.js";
 export * from "./uiShellContentTypes.js";
 export * from "./useHasUiShell.js";
-export * from "../web-component/renderReactInWebComponent.js";
 export * from "./WideUiShellContent.js";
+export * from "../web-component/renderReactInWebComponent.js";
 export { UiShell } from "./UiShell.js";
+export { adminAppUiShellBreakpoints } from "./useUiShellBreakpoints.js";
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,wBAAwB;AACtC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB;AAClC,cAAc,+CAA+C;~~AAC7D~~,~~cAAc,yBAAyB;AAEvC,~~SAASA,OAAO,QAA2B,cAAc","ignoreList":[]}
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":[]}

package/dist/esm/ui-shell/renderUiShell.js CHANGED Viewed

@@ -29,6 +29,7 @@ export const renderUiShell = ({
   appBackgroundContrastMode,
   appElement: providedAppElement,
   appElementScrollingMode,
+  breakpointConfig,
   hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
@@ -71,6 +72,7 @@ export const renderUiShell = ({
       }),
       onError: onError,
       children: _jsx(UiShell, {
+        breakpointConfig: breakpointConfig,
         appBackgroundColor: appBackgroundColor,
         appBackgroundContrastMode: appBackgroundContrastMode,
         appElement: appElement,

package/dist/esm/ui-shell/renderUiShell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","uiShellDataAttribute","renderReactInWebComponent","jsx","_jsx","optionalComponentSlotNames","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","parentElement","sideNavBackgroundColor","topNavBackgroundColor","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","closeRightSideMenu","subscribeToCloseRightSideMenu","closeSideNavMenu","subscribeToCloseSideNavMenu","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","getReactComponent","reactRootElements","fallback","children","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":[]}
1	+ {"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","uiShellDataAttribute","renderReactInWebComponent","jsx","_jsx","optionalComponentSlotNames","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","breakpointConfig","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","parentElement","sideNavBackgroundColor","topNavBackgroundColor","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","closeRightSideMenu","subscribeToCloseRightSideMenu","closeSideNavMenu","subscribeToCloseSideNavMenu","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","getReactComponent","reactRootElements","fallback","children","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/esm/ui-shell/useMatchAppElementToUiShellAppArea.js CHANGED Viewed

@@ -26,7 +26,6 @@ export 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));
   });
@@ -41,6 +40,8 @@ export const useMatchAppElementToUiShellAppArea = ({
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const parentContainerRef = useRef(null);
   const appContainerElementStyles = useMemo(() => ({
+    boxSizing: "border-box",
+    zIndex: 1,
     ...(paddingMode === "comfortable" ? {
       paddingBlock: odysseyDesignTokens.Spacing5,
       paddingInline: odysseyDesignTokens.Spacing8
@@ -91,7 +92,7 @@ export const useMatchAppElementToUiShellAppArea = ({
       };
     }
     return () => {};
-  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);
+  }, [appElement, appContainerElementStyles, uiShellAppAreaRef, uiShellResizableRefs]);
   return {
     parentContainerRef
   };

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

	@@ -1 +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","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 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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAmCA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE5E,SAASC,sBAAsB,QAAQ,kCAAkC;AAGzE,OAAO,MAAMC,2BAA2B,GAAIC,MAAc,IACxDA,MAAM,CAACC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAACC,WAAW,CAAC,CAAC;AAEjD,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACtCC,gBAAgB;EAChBC,mBAAmB;EACnBC,0BAA0B;EAC1BC;AAMF,CAAC,KAAK;EACJ,MAAMC,4BAA4B,GAChCF,0BAA0B,CAACG,qBAAqB,CAAC,CAAC;EACpD,MAAMC,sBAAsB,GAAGH,aAAa,CAACE,qBAAqB,CAAC,CAAC;EAEpEJ,mBAAmB,CAACM,KAAK,CAACC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC;EAC7DP,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,KAAK,EACL,GAAGJ,4BAA4B,CAACK,GAAG,GAAGH,sBAAsB,CAACG,GAAG,IAClE,CAAC;EACDR,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,MAAM,EACN,GAAGJ,4BAA4B,CAACM,IAAI,GAAGJ,sBAAsB,CAACI,IAAI,IACpE,CAAC;EACDT,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,OAAO,EACP,GAAGJ,4BAA4B,CAACO,KAAK,IACvC,CAAC;EACDV,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,QAAQ,EACR,GAAGJ,4BAA4B,CAACQ,MAAM,IACxC,CAAC;EACDX,mBAAmB,CAACM,KAAK,CAACC,WAAW,CAAC,SAAS,EAAE,GAAG,CAAC;EAGnDK,MAAM,CAACC,OAAO,CAACd,gBAAgB,CAAC,CAMhCe,OAAO,CAAC,CAAC,CAACC,eAAe,EAAEC,gBAAgB,CAAC,KAAK;IACjDhB,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnCb,2BAA2B,CAACqB,eAAe,CAAC,EAC5CE,MAAM,CAACD,gBAAgB,CACzB,CAAC;EACH,CAAC,CAAC;AACJ,CAAC;AAiBD,OAAO,MAAME,kCAAkC,GAAGA,CAAC;EACjDC,UAAU;EACVC,uBAAuB;EACvBC,WAAW;EACXC,iBAAiB;EACjBC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAG/B,sBAAsB,CAAC,CAAC;EAEpD,MAAMgC,kBAAkB,GAAGjC,MAAM,CAAiB,IAAI,CAAC;EAEvD,MAAMkC,yBAAyB,GAAGnC,OAAO,CACvC,OAAO;IACL,IAAI8B,WAAW,KAAK,aAAa,GAC7B;MACEM,YAAY,EAAEH,mBAAmB,CAACI,QAAQ;MAC1CC,aAAa,EAAEL,mBAAmB,CAACM;IACrC,CAAC,GACD,CAAC,CAAC,CAAC;IACP,IAAIT,WAAW,KAAK,SAAS,GACzB;MACEM,YAAY,EAAEH,mBAAmB,CAACI,QAAQ;MAC1CC,aAAa,EAAEL,mBAAmB,CAACI;IACrC,CAAC,GACD,CAAC,CAAC,CAAC;IACP,IAAIR,uBAAuB,KAAK,YAAY,IAC5CA,uBAAuB,KAAK,MAAM,GAC9B;MACEW,SAAS,EAAE;IACb,CAAC,GACD;MACEA,SAAS,EAAE;IACb,CAAC,CAAC;IACN,IAAIX,uBAAuB,KAAK,UAAU,IAC1CA,uBAAuB,KAAK,MAAM,GAC9B;MACEY,SAAS,EAAE;IACb,CAAC,GACD;MACEA,SAAS,EAAE;IACb,CAAC;EACP,CAAC,CAAC,EACF,CAACZ,uBAAuB,EAAEC,WAAW,EAAEG,mBAAmB,CAC5D,CAAC;EAEDlC,SAAS,CAAC,MAAM;IAEd,IAAIgC,iBAAiB,CAACW,OAAO,IAAId,UAAU,IAAIM,kBAAkB,CAACQ,OAAO,EAAE;MACzE,IAAIC,gBAAwB;MAE5B,MAAMC,YAAY,GAAGA,CAAA,KAAM;QACzBC,oBAAoB,CAACF,gBAAgB,CAAC;QAEtCA,gBAAgB,GAAGG,qBAAqB,CAAC,MAAM;UAC7C,IAAIf,iBAAiB,CAACW,OAAO,IAAIR,kBAAkB,CAACQ,OAAO,EAAE;YAC3DnC,uBAAuB,CAAC;cACtBC,gBAAgB,EAAE2B,yBAAyB;cAC3CzB,0BAA0B,EAAEqB,iBAAiB,CAACW,OAAO;cACrDjC,mBAAmB,EAAEmB,UAAU;cAC/BjB,aAAa,EAAEuB,kBAAkB,CAACQ;YACpC,CAAC,CAAC;UACJ;QACF,CAAC,CAAC;MACJ,CAAC;MAGD,MAAMK,gBAAgB,GAAGf,oBAAoB,CAC1CgB,GAAG,CAAEC,WAAW,IAAKA,WAAW,CAACP,OAAO,CAAC,CACzCQ,MAAM,CAAEC,OAAO,IACdC,OAAO,CAACD,OAAO,CACjB,CAAC;MAGH,MAAME,QAAQ,GAAG,IAAIC,cAAc,CAACV,YAAY,CAAC;MAIjDG,gBAAgB,CAACxB,OAAO,CAAEgC,eAAe,IAAK;QAC5CA,eAAe,CAACC,gBAAgB,CAAC,eAAe,EAAEZ,YAAY,CAAC;QAE/DS,QAAQ,CAACI,OAAO,CAACF,eAAe,CAAC;MACnC,CAAC,CAAC;MAGFX,YAAY,CAAC,CAAC;MAEd,OAAO,MAAM;QACXS,QAAQ,CAACK,UAAU,CAAC,CAAC;QAErBX,gBAAgB,CAACxB,OAAO,CAAEgC,eAAe,IAAK;UAC5CA,eAAe,CAACI,mBAAmB,CAAC,eAAe,EAAEf,YAAY,CAAC;QACpE,CAAC,CAAC;MACJ,CAAC;IACH;IACA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAAChB,UAAU,EAAEO,yBAAyB,EAAEJ,iBAAiB,CAAC,CAAC;EAE9D,OAAO;IACLG;EACF,CAAC;AACH,CAAC","ignoreList":[]}
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 }, [\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 CHANGED Viewed

@@ -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