@okta/odyssey-react-mui 1.28.1 → 1.32.0

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

@@ -0,0 +1,220 @@
+import _ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { AppSwitcher } from "./AppSwitcher/index.js";
+import { SideNav } from "./SideNav/index.js";
+import { TopNav } from "./TopNav/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { useScrollState } from "./useScrollState.js";
+import { useUiShellContext } from "./UiShellProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const fullHeightStyles = {
+  height: "100%"
+};
+const emptySideNavItems = [];
+const StyledAppContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  appBackgroundColor
+}) => ({
+  gridArea: "app-content",
+  backgroundColor: appBackgroundColor
+}));
+const StyledBannersContainer = styled("div")(() => ({
+  gridArea: "banners"
+}));
+const StyledAppSwitcherContainer = styled("div")(() => ({
+  gridArea: "app-switcher"
+}));
+const StyledSideNavContainer = styled("div")(() => ({
+  gridArea: "side-nav"
+}));
+const StyledShellContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  backgroundColor: odysseyDesignTokens.HueNeutral50,
+  display: "grid",
+  gridGap: 0,
+  gridTemplateAreas: `
+    "banners banners banners"
+    "app-switcher side-nav top-nav"
+    "app-switcher side-nav app-content"
+  `,
+  gridTemplateColumns: "auto auto 1fr",
+  gridTemplateRows: "auto auto 1fr",
+  height: "100vh",
+  width: "100vw"
+}));
+const StyledTopNavContainer = styled("div")(() => ({
+  gridArea: "top-nav"
+}));
+export const subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
+const setStylesToMatchElement = (elementToStyle, elementToReference, additionalStyles) => {
+  const boundingRect = elementToReference.getBoundingClientRect();
+  elementToStyle.style.setProperty("position", "absolute");
+  elementToStyle.style.setProperty("top", `${boundingRect.y}px`);
+  elementToStyle.style.setProperty("left", `${boundingRect.x}px`);
+  elementToStyle.style.setProperty("width", `${boundingRect.width}px`);
+  elementToStyle.style.setProperty("height", `${boundingRect.height}px`);
+  for (const key in additionalStyles) {
+    elementToStyle.style.setProperty(key, additionalStyles[key]);
+  }
+};
+const UiShellContent = ({
+  appContainerElement,
+  hasStandardAppContentPadding = true,
+  appContainerScrollingMode = "vertical",
+  initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
+  onError = console.error,
+  optionalComponents,
+  appSwitcherProps,
+  sideNavProps,
+  topNavProps
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    isContentScrolled,
+    scrollableContentRef: appContainerRef
+  } = useScrollState(appContainerElement);
+  const sideNavContainerRef = useRef(null);
+  const topNavContainerRef = useRef(null);
+  const uiShellContext = useUiShellContext();
+  const paddingStyles = useMemo(() => ({
+    ...(hasStandardAppContentPadding ? {
+      "padding-block": odysseyDesignTokens.Spacing5 ?? null,
+      "padding-inline": odysseyDesignTokens.Spacing8 ?? null
+    } : {}),
+    ...(appContainerScrollingMode === "horizontal" || appContainerScrollingMode === "both" ? {
+      "overflow-x": "auto"
+    } : {
+      "overflow-x": "hidden"
+    }),
+    ...(appContainerScrollingMode === "vertical" || appContainerScrollingMode === "both" ? {
+      "overflow-y": "auto"
+    } : {
+      "overflow-y": "hidden"
+    })
+  }), [hasStandardAppContentPadding, appContainerScrollingMode, odysseyDesignTokens]);
+  useEffect(() => {
+    if (appContainerRef.current && appContainerElement) {
+      let animationFrameId;
+      const updateStyles = () => {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = requestAnimationFrame(() => {
+          if (appContainerRef.current) {
+            setStylesToMatchElement(appContainerElement, appContainerRef.current, paddingStyles);
+          }
+        });
+      };
+      const observer = new ResizeObserver(updateStyles);
+      observer.observe(appContainerRef.current);
+      if (sideNavContainerRef.current) {
+        observer.observe(sideNavContainerRef.current);
+      }
+      if (topNavContainerRef.current) {
+        observer.observe(topNavContainerRef.current);
+      }
+      updateStyles();
+      return () => observer.disconnect();
+    }
+    return () => {};
+  }, [appContainerRef, appContainerElement, paddingStyles]);
+  return _jsxs(StyledShellContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [_jsx(StyledBannersContainer, {
+      children: optionalComponents?.banners
+    }), _jsx(StyledAppSwitcherContainer, {
+      children: _jsxs(_ScopedCssBaseline, {
+        sx: fullHeightStyles,
+        children: [initialVisibleSections?.includes("AppSwitcher") && !appSwitcherProps && _jsx(ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: _jsx(AppSwitcher, {
+            isLoading: true,
+            appIcons: [],
+            selectedAppName: ""
+          })
+        }), appSwitcherProps && _jsx(ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: _jsx(AppSwitcher, {
+            ...appSwitcherProps
+          })
+        })]
+      })
+    }), _jsx(StyledSideNavContainer, {
+      ref: sideNavContainerRef,
+      children: _jsxs(_ScopedCssBaseline, {
+        sx: fullHeightStyles,
+        children: [initialVisibleSections?.includes("SideNav") && sideNavProps === undefined && _jsx(ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: _jsx(SideNav, {
+            isLoading: true,
+            appName: "",
+            sideNavItems: emptySideNavItems
+          })
+        }), sideNavProps && _jsx(ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: _jsx(SideNav, {
+            ...sideNavProps,
+            ...(sideNavProps.hasCustomFooter && optionalComponents?.sideNavFooter ? {
+              footerComponent: optionalComponents.sideNavFooter,
+              footerItems: undefined,
+              hasCustomFooter: sideNavProps.hasCustomFooter
+            } : {
+              footerItems: sideNavProps.footerItems,
+              hasCustomFooter: false
+            })
+          })
+        })]
+      })
+    }), _jsx(StyledTopNavContainer, {
+      ref: topNavContainerRef,
+      children: _jsxs(_ScopedCssBaseline, {
+        sx: fullHeightStyles,
+        children: [initialVisibleSections?.includes("TopNav") && topNavProps === undefined && _jsx(ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: _jsx(TopNav, {
+            leftSideComponent: optionalComponents?.topNavLeftSide,
+            rightSideComponent: optionalComponents?.topNavRightSide
+          })
+        }), topNavProps && _jsx(ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: _jsx(TopNav, {
+            ...topNavProps,
+            isScrolled: isContentScrolled,
+            leftSideComponent: optionalComponents?.topNavLeftSide,
+            rightSideComponent: optionalComponents?.topNavRightSide
+          })
+        })]
+      })
+    }), _jsx(StyledAppContainer, {
+      appBackgroundColor: uiShellContext?.appBackgroundColor,
+      tabIndex: 0,
+      ref: appContainerRef
+    })]
+  });
+};
+const MemoizedUiShellContent = memo(UiShellContent);
+MemoizedUiShellContent.displayName = "UiShellContent";
+export { MemoizedUiShellContent as UiShellContent };
+//# sourceMappingURL=UiShellContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiShellContent.js","names":["styled","memo","useEffect","useMemo","useRef","ErrorBoundary","AppSwitcher","SideNav","TopNav","useOdysseyDesignTokens","useScrollState","useUiShellContext","jsx","_jsx","jsxs","_jsxs","fullHeightStyles","height","emptySideNavItems","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","gridArea","backgroundColor","StyledBannersContainer","StyledAppSwitcherContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","width","StyledTopNavContainer","subComponentNames","setStylesToMatchElement","elementToStyle","elementToReference","additionalStyles","boundingRect","getBoundingClientRect","style","setProperty","y","x","key","UiShellContent","appContainerElement","hasStandardAppContentPadding","appContainerScrollingMode","initialVisibleSections","onError","console","error","optionalComponents","appSwitcherProps","sideNavProps","topNavProps","isContentScrolled","scrollableContentRef","appContainerRef","sideNavContainerRef","topNavContainerRef","uiShellContext","paddingStyles","Spacing5","Spacing8","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","observer","ResizeObserver","observe","disconnect","children","banners","_ScopedCssBaseline","sx","includes","fallback","isLoading","appIcons","selectedAppName","ref","undefined","appName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","isScrolled","tabIndex","MemoizedUiShellContent","displayName"],"sources":["../../../src/ui-shell/UiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, useEffect, useMemo, useRef, type ReactElement } from \"react\";\nimport { ErrorBoundary, ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcher, type AppSwitcherProps } from \"./AppSwitcher/index.js\";\nimport { SideNav, type SideNavProps } from \"./SideNav/index.js\";\nimport { TopNav, type TopNavProps } from \"./TopNav/index.js\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nconst fullHeightStyles = { height: \"100%\" };\n\nconst emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  gridArea: \"app-content\",\n  backgroundColor: appBackgroundColor,\n}));\n\nconst StyledBannersContainer = styled(\"div\")(() => ({\n  gridArea: \"banners\",\n}));\n\nconst StyledAppSwitcherContainer = styled(\"div\")(() => ({\n  gridArea: \"app-switcher\",\n}));\n\nconst StyledSideNavContainer = styled(\"div\")(() => ({\n  gridArea: \"side-nav\",\n}));\n\nconst StyledShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners banners banners\"\n    \"app-switcher side-nav top-nav\"\n    \"app-switcher side-nav app-content\"\n  `,\n  gridTemplateColumns: \"auto auto 1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNavContainer = styled(\"div\")(() => ({\n  gridArea: \"top-nav\",\n}));\n\nexport const subComponentNames = [\"TopNav\", \"SideNav\", \"AppSwitcher\"] as const;\nexport type SubComponentName = (typeof subComponentNames)[number];\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   */\n  appSwitcherProps?: AppSwitcherProps;\n  /**\n   * Object that gets pass directly to the side nav component. If `undefined` and in `initialVisibleSections`, SideNav will be initially rendered. Pass `null` to hide a previously-visible SideNav.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\"> | null;\n  /**\n   * Object that gets pass directly to the top nav component. If `undefined` and in `initialVisibleSections`, TopNav will be initially rendered. Pass `null` to hide a previously-visible TopNav.\n   */\n  topNavProps?: Omit<\n    TopNavProps,\n    \"leftSideComponent\" | \"rightSideComponent\"\n  > | null;\n};\n\nexport type UiShellContentProps = {\n  /**\n   * Sets a custom background color for the app content area.\n   */\n  appBackgroundColor?: string;\n  /**\n   * Sets either a gray or white background color for the app content area.\n   */\n  appBackgroundContrastMode?: ContrastMode;\n  /**\n   * The element within which the app will be rendered. This will be positioned appropriately while being kept out of the shadow DOM.\n   */\n  appContainerElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app content area. Defaults to \"vertical\".\n   */\n  appContainerScrollingMode?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * defaults to `true`. If `false`, the content area will have no padding provided\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Which parts of the UI Shell should be visible initially? For example,\n   * if sideNavProps is undefined, should the space for the sidenav be initially visible?\n   */\n  initialVisibleSections?: SubComponentName[];\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, flagging \"p0\"s, and recovering UI Shell when errors occur.\n   */\n  onError?: ErrorBoundaryProps[\"onError\"];\n  /**\n   * Components that will render as children of various other components such as the top nav or side nav.\n   */\n  optionalComponents?: {\n    banners?: ReactElement;\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n} & UiShellNavComponentProps;\n\nconst setStylesToMatchElement = (\n  elementToStyle: HTMLElement,\n  elementToReference: HTMLElement,\n  additionalStyles: Record<string, string | null>,\n) => {\n  const boundingRect = elementToReference.getBoundingClientRect();\n  elementToStyle.style.setProperty(\"position\", \"absolute\");\n  elementToStyle.style.setProperty(\"top\", `${boundingRect.y}px`);\n  elementToStyle.style.setProperty(\"left\", `${boundingRect.x}px`);\n  elementToStyle.style.setProperty(\"width\", `${boundingRect.width}px`);\n  elementToStyle.style.setProperty(\"height\", `${boundingRect.height}px`);\n  for (const key in additionalStyles) {\n    elementToStyle.style.setProperty(key, additionalStyles[key]);\n  }\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 UiShellContent = ({\n  appContainerElement,\n  hasStandardAppContentPadding = true,\n  appContainerScrollingMode = \"vertical\",\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  appSwitcherProps,\n  sideNavProps,\n  topNavProps,\n}: UiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isContentScrolled, scrollableContentRef: appContainerRef } =\n    useScrollState(appContainerElement);\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellContext = useUiShellContext();\n\n  const paddingStyles = useMemo<Record<string, string | null>>(\n    () => ({\n      ...(hasStandardAppContentPadding\n        ? {\n            \"padding-block\": odysseyDesignTokens.Spacing5 ?? null,\n            \"padding-inline\": odysseyDesignTokens.Spacing8 ?? null,\n          }\n        : {}),\n      ...(appContainerScrollingMode === \"horizontal\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            \"overflow-x\": \"auto\",\n          }\n        : {\n            \"overflow-x\": \"hidden\",\n          }),\n      ...(appContainerScrollingMode === \"vertical\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            \"overflow-y\": \"auto\",\n          }\n        : {\n            \"overflow-y\": \"hidden\",\n          }),\n    }),\n    [\n      hasStandardAppContentPadding,\n      appContainerScrollingMode,\n      odysseyDesignTokens,\n    ],\n  );\n\n  useEffect(() => {\n    // Once appContainerRef is rendered, we can position appContainerElement on top\n    if (appContainerRef.current && appContainerElement) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n        animationFrameId = requestAnimationFrame(() => {\n          if (appContainerRef.current) {\n            setStylesToMatchElement(\n              appContainerElement,\n              appContainerRef.current,\n              paddingStyles,\n            );\n          }\n        });\n      };\n\n      // Setup a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n      observer.observe(appContainerRef.current);\n\n      if (sideNavContainerRef.current) {\n        observer.observe(sideNavContainerRef.current);\n      }\n\n      if (topNavContainerRef.current) {\n        observer.observe(topNavContainerRef.current);\n      }\n\n      // Set the initial style\n      updateStyles();\n      return () => observer.disconnect();\n    }\n    return () => {};\n  }, [appContainerRef, appContainerElement, paddingStyles]);\n\n  return (\n    <StyledShellContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledAppSwitcherContainer>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If AppSwitcher should be initially visible and we have not yet received props, render AppSwitcher in the loading state */\n            initialVisibleSections?.includes(\"AppSwitcher\") &&\n              !appSwitcherProps && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <AppSwitcher isLoading appIcons={[]} selectedAppName=\"\" />\n                </ErrorBoundary>\n              )\n          }\n          {appSwitcherProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <AppSwitcher {...appSwitcherProps} />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer ref={sideNavContainerRef}>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n            initialVisibleSections?.includes(\"SideNav\") &&\n              sideNavProps === undefined && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <SideNav\n                    isLoading\n                    appName=\"\"\n                    sideNavItems={emptySideNavItems}\n                  />\n                </ErrorBoundary>\n              )\n          }\n          {sideNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <SideNav\n                {...{\n                  ...sideNavProps,\n                  ...(sideNavProps.hasCustomFooter &&\n                  optionalComponents?.sideNavFooter\n                    ? {\n                        footerComponent: optionalComponents.sideNavFooter,\n                        footerItems: undefined,\n                        hasCustomFooter: sideNavProps.hasCustomFooter,\n                      }\n                    : {\n                        footerItems: sideNavProps.footerItems,\n                        hasCustomFooter: false,\n                      }),\n                }}\n              />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledSideNavContainer>\n      <StyledTopNavContainer ref={topNavContainerRef}>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If TopNav should be initially visible and we have not yet received props, render Topnav with minimal inputs */\n            initialVisibleSections?.includes(\"TopNav\") &&\n              topNavProps === undefined && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <TopNav\n                    leftSideComponent={optionalComponents?.topNavLeftSide}\n                    rightSideComponent={optionalComponents?.topNavRightSide}\n                  />\n                </ErrorBoundary>\n              )\n          }\n          {topNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <TopNav\n                {...topNavProps}\n                isScrolled={isContentScrolled}\n                leftSideComponent={optionalComponents?.topNavLeftSide}\n                rightSideComponent={optionalComponents?.topNavRightSide}\n              />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        tabIndex={0}\n        ref={appContainerRef}\n      />\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedUiShellContent = memo(UiShellContent);\nMemoizedUiShellContent.displayName = \"UiShellContent\";\n\nexport { MemoizedUiShellContent as UiShellContent };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,48 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createContext, memo, useContext, useMemo } from "react";
+import { generateContrastColors } from "../createContrastColors.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const UiShellContext = createContext(undefined);
+export const useUiShellContext = () => {
+  return useContext(UiShellContext);
+};
+const UiShellProvider = ({
+  appBackgroundColor,
+  appBackgroundContrastMode = "lowContrast",
+  sideNavBackgroundColor,
+  topNavBackgroundColor,
+  children
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const defaultedSideNavBackgroundColor = sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;
+  const sideNavContrastColors = defaultedSideNavBackgroundColor !== odysseyDesignTokens.HueNeutralWhite ? generateContrastColors(defaultedSideNavBackgroundColor, odysseyDesignTokens) : undefined;
+  const isAppBackgroundHightContrast = appBackgroundContrastMode === "highContrast";
+  const defaultTopAndAppBackgroundColor = isAppBackgroundHightContrast ? odysseyDesignTokens.HueNeutralWhite : odysseyDesignTokens.HueNeutral50;
+  const topNavColor = topNavBackgroundColor || defaultTopAndAppBackgroundColor;
+  const appContentBackgroundColor = appBackgroundColor || defaultTopAndAppBackgroundColor;
+  const memoizedContextValue = useMemo(() => ({
+    appBackgroundColor: appContentBackgroundColor,
+    sideNavBackgroundColor: sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,
+    sideNavContrastColors,
+    topNavBackgroundColor: topNavColor
+  }), [appContentBackgroundColor, odysseyDesignTokens, sideNavBackgroundColor, sideNavContrastColors, topNavColor]);
+  return _jsx(UiShellContext.Provider, {
+    value: memoizedContextValue,
+    children: children
+  });
+};
+const MemoizedUiShellProvider = memo(UiShellProvider);
+export { MemoizedUiShellProvider as UiShellProvider };
+//# sourceMappingURL=UiShellProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiShellProvider.js","names":["createContext","memo","useContext","useMemo","generateContrastColors","useOdysseyDesignTokens","jsx","_jsx","UiShellContext","undefined","useUiShellContext","UiShellProvider","appBackgroundColor","appBackgroundContrastMode","sideNavBackgroundColor","topNavBackgroundColor","children","odysseyDesignTokens","defaultedSideNavBackgroundColor","HueNeutralWhite","sideNavContrastColors","isAppBackgroundHightContrast","defaultTopAndAppBackgroundColor","HueNeutral50","topNavColor","appContentBackgroundColor","memoizedContextValue","Provider","value","MemoizedUiShellProvider"],"sources":["../../../src/ui-shell/UiShellProvider.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 {\n  createContext,\n  memo,\n  PropsWithChildren,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  generateContrastColors,\n  ContrastColors,\n} from \"../createContrastColors.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\n\nexport type UiShellColors = {\n  appBackgroundColor: string;\n  sideNavBackgroundColor: string;\n  sideNavContrastColors?: ContrastColors | undefined;\n  topNavBackgroundColor: string;\n};\n\nconst UiShellContext = createContext<UiShellColors | undefined>(undefined);\n\nexport const useUiShellContext = () => {\n  return useContext(UiShellContext);\n};\n\nexport type UiShellProviderProps = {\n  appBackgroundColor?: string;\n  sideNavBackgroundColor?: string;\n  topNavBackgroundColor?: string;\n  appBackgroundContrastMode?: string;\n};\n\nconst UiShellProvider = ({\n  appBackgroundColor,\n  appBackgroundContrastMode = \"lowContrast\",\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n  children,\n}: PropsWithChildren<UiShellProviderProps>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const defaultedSideNavBackgroundColor =\n    sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;\n\n  const sideNavContrastColors =\n    defaultedSideNavBackgroundColor !== odysseyDesignTokens.HueNeutralWhite\n      ? generateContrastColors(\n          defaultedSideNavBackgroundColor,\n          odysseyDesignTokens,\n        )\n      : undefined;\n\n  const isAppBackgroundHightContrast =\n    appBackgroundContrastMode === \"highContrast\";\n\n  const defaultTopAndAppBackgroundColor = isAppBackgroundHightContrast\n    ? odysseyDesignTokens.HueNeutralWhite\n    : odysseyDesignTokens.HueNeutral50;\n\n  const topNavColor = topNavBackgroundColor || defaultTopAndAppBackgroundColor;\n\n  const appContentBackgroundColor =\n    appBackgroundColor || defaultTopAndAppBackgroundColor;\n\n  const memoizedContextValue = useMemo(\n    () => ({\n      appBackgroundColor: appContentBackgroundColor,\n      sideNavBackgroundColor:\n        sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,\n      sideNavContrastColors,\n      topNavBackgroundColor: topNavColor,\n    }),\n    [\n      appContentBackgroundColor,\n      odysseyDesignTokens,\n      sideNavBackgroundColor,\n      sideNavContrastColors,\n      topNavColor,\n    ],\n  );\n\n  return (\n    <UiShellContext.Provider value={memoizedContextValue}>\n      {children}\n    </UiShellContext.Provider>\n  );\n};\n\nconst MemoizedUiShellProvider = memo(UiShellProvider);\n\nexport { MemoizedUiShellProvider as UiShellProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,aAAa,EACbC,IAAI,EAEJC,UAAU,EACVC,OAAO,QACF,OAAO;AACd,SACEC,sBAAsB,QAEjB,4BAA4B;AACnC,SAASC,sBAAsB,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS1E,MAAMC,cAAc,GAAGR,aAAa,CAA4BS,SAAS,CAAC;AAE1E,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACrC,OAAOR,UAAU,CAACM,cAAc,CAAC;AACnC,CAAC;AASD,MAAMG,eAAe,GAAGA,CAAC;EACvBC,kBAAkB;EAClBC,yBAAyB,GAAG,aAAa;EACzCC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EACpD,MAAMa,+BAA+B,GACnCJ,sBAAsB,IAAIG,mBAAmB,CAACE,eAAe;EAE/D,MAAMC,qBAAqB,GACzBF,+BAA+B,KAAKD,mBAAmB,CAACE,eAAe,GACnEf,sBAAsB,CACpBc,+BAA+B,EAC/BD,mBACF,CAAC,GACDR,SAAS;EAEf,MAAMY,4BAA4B,GAChCR,yBAAyB,KAAK,cAAc;EAE9C,MAAMS,+BAA+B,GAAGD,4BAA4B,GAChEJ,mBAAmB,CAACE,eAAe,GACnCF,mBAAmB,CAACM,YAAY;EAEpC,MAAMC,WAAW,GAAGT,qBAAqB,IAAIO,+BAA+B;EAE5E,MAAMG,yBAAyB,GAC7Bb,kBAAkB,IAAIU,+BAA+B;EAEvD,MAAMI,oBAAoB,GAAGvB,OAAO,CAClC,OAAO;IACLS,kBAAkB,EAAEa,yBAAyB;IAC7CX,sBAAsB,EACpBA,sBAAsB,IAAIG,mBAAmB,CAACE,eAAe;IAC/DC,qBAAqB;IACrBL,qBAAqB,EAAES;EACzB,CAAC,CAAC,EACF,CACEC,yBAAyB,EACzBR,mBAAmB,EACnBH,sBAAsB,EACtBM,qBAAqB,EACrBI,WAAW,CAEf,CAAC;EAED,OACEjB,IAAA,CAACC,cAAc,CAACmB,QAAQ;IAACC,KAAK,EAAEF,oBAAqB;IAAAV,QAAA,EAClDA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAMa,uBAAuB,GAAG5B,IAAI,CAACU,eAAe,CAAC;AAErD,SAASkB,uBAAuB,IAAIlB,eAAe","ignoreList":[]}

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

@@ -0,0 +1,38 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createStore } from "./createStore.js";
+export const bufferLatest = ({
+  publish,
+  subscribe
+}) => {
+  const store = createStore({
+    isReactAppReadyForProps: false
+  });
+  const unsubscribe = subscribe(() => {
+    unsubscribe();
+    store.setState("isReactAppReadyForProps", true);
+    store.getState("bufferedValue");
+    if (store.hasState("bufferedValue")) {
+      publish(store.getState("bufferedValue"));
+    }
+  });
+  const publishWhenReady = value => {
+    if (store.getState("isReactAppReadyForProps")) {
+      publish(value);
+    } else {
+      store.setState("bufferedValue", value);
+    }
+  };
+  return publishWhenReady;
+};
+//# sourceMappingURL=bufferLatest.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bufferLatest.js","names":["createStore","bufferLatest","publish","subscribe","store","isReactAppReadyForProps","unsubscribe","setState","getState","hasState","publishWhenReady","value"],"sources":["../../../src/ui-shell/bufferLatest.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { createStore } from \"./createStore.js\";\n\n/**\n * Buffers the values passed to a publisher, keeping only the latest value, until the subscriber emits.\n *\n * This is useful in restricting publishers from firing events until specific subscribers are active. Once active, the `publish` function reverts to its previous behavior.\n */\nexport const bufferLatest = <Value>({\n  publish,\n  subscribe,\n}: {\n  /**\n   * A function that publishes values to a subscriber, but not the same subscriber as the one passed to this function.\n   *\n   * Only the latest value published by this publisher is kept until the subscriber emits.\n   */\n  publish: (value: Value) => void;\n  /**\n   * A subscription that listens for emissions from a separate publisher.\n   *\n   * When that separate publisher emits, the latest value from the passed-in publish function is emitted as are all future values.\n   */\n  subscribe: (subscriber: () => void) => () => void;\n}) => {\n  const store = createStore<{\n    bufferedValue?: Value;\n    isReactAppReadyForProps: boolean;\n  }>({\n    isReactAppReadyForProps: false,\n  });\n\n  const unsubscribe = subscribe(() => {\n    unsubscribe();\n\n    store.setState(\"isReactAppReadyForProps\", true);\n    store.getState(\"bufferedValue\");\n    if (store.hasState(\"bufferedValue\")) {\n      // If we have a state, then the value in here is what we want. TypeScript expects this to possibly be `undefined` because the type we sent to `createStore` listed `bufferedValue` as optional. TypeScript doesn't seem to have any way of knowing we passed in the value at some point.\n      publish(store.getState(\"bufferedValue\")!);\n    }\n  });\n\n  const publishWhenReady: typeof publish = (value) => {\n    if (store.getState(\"isReactAppReadyForProps\")) {\n      publish(value);\n    } else {\n      store.setState(\"bufferedValue\", value);\n    }\n  };\n\n  return publishWhenReady;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,QAAQ,kBAAkB;AAO9C,OAAO,MAAMC,YAAY,GAAGA,CAAQ;EAClCC,OAAO;EACPC;AAcF,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGJ,WAAW,CAGtB;IACDK,uBAAuB,EAAE;EAC3B,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGH,SAAS,CAAC,MAAM;IAClCG,WAAW,CAAC,CAAC;IAEbF,KAAK,CAACG,QAAQ,CAAC,yBAAyB,EAAE,IAAI,CAAC;IAC/CH,KAAK,CAACI,QAAQ,CAAC,eAAe,CAAC;IAC/B,IAAIJ,KAAK,CAACK,QAAQ,CAAC,eAAe,CAAC,EAAE;MAEnCP,OAAO,CAACE,KAAK,CAACI,QAAQ,CAAC,eAAe,CAAE,CAAC;IAC3C;EACF,CAAC,CAAC;EAEF,MAAME,gBAAgC,GAAIC,KAAK,IAAK;IAClD,IAAIP,KAAK,CAACI,QAAQ,CAAC,yBAAyB,CAAC,EAAE;MAC7CN,OAAO,CAACS,KAAK,CAAC;IAChB,CAAC,MAAM;MACLP,KAAK,CAACG,QAAQ,CAAC,eAAe,EAAEI,KAAK,CAAC;IACxC;EACF,CAAC;EAED,OAAOD,gBAAgB;AACzB,CAAC","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"createMessageBus.js","names":["createMessageBus","subscribers","Map","publish","message","Array","from","values","forEach","subscriber","subscribe","subscriberId","Symbol","set","delete"],"sources":["../../../src/ui-shell/createMessageBus.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport type MessageHandler<Message> = (message: Message) => void;\n\nexport type PublishMessage<Message> = MessageHandler<Message>;\n\nexport type UnsubscribeMessageSubscription = () => void;\n\nexport type MessageSubscription<Message> = (\n  subscriber: MessageHandler<Message>,\n) => UnsubscribeMessageSubscription;\n\nexport type MessageBus<Message> = {\n  publish: PublishMessage<Message>;\n  subscribe: MessageSubscription<Message>;\n};\n\n/**\n * Create a self-contained message bus that allows you to subscribe to events published by the publisher.\n */\nexport const createMessageBus = <Message = void>(): MessageBus<Message> => {\n  const subscribers = new Map<symbol, MessageHandler<Message>>();\n\n  const publish: PublishMessage<Message> = (message) => {\n    Array.from(subscribers.values()).forEach((subscriber) => {\n      subscriber(message);\n    });\n  };\n\n  const subscribe: MessageSubscription<Message> = (subscriber) => {\n    const subscriberId = Symbol();\n    subscribers.set(subscriberId, subscriber);\n\n    return () => {\n      subscribers.delete(subscriberId);\n    };\n  };\n\n  return {\n    publish,\n    subscribe,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAoBA,OAAO,MAAMA,gBAAgB,GAAGA,CAAA,KAA2C;EACzE,MAAMC,WAAW,GAAG,IAAIC,GAAG,CAAkC,CAAC;EAE9D,MAAMC,OAAgC,GAAIC,OAAO,IAAK;IACpDC,KAAK,CAACC,IAAI,CAACL,WAAW,CAACM,MAAM,CAAC,CAAC,CAAC,CAACC,OAAO,CAAEC,UAAU,IAAK;MACvDA,UAAU,CAACL,OAAO,CAAC;IACrB,CAAC,CAAC;EACJ,CAAC;EAED,MAAMM,SAAuC,GAAID,UAAU,IAAK;IAC9D,MAAME,YAAY,GAAGC,MAAM,CAAC,CAAC;IAC7BX,WAAW,CAACY,GAAG,CAACF,YAAY,EAAEF,UAAU,CAAC;IAEzC,OAAO,MAAM;MACXR,WAAW,CAACa,MAAM,CAACH,YAAY,CAAC;IAClC,CAAC;EACH,CAAC;EAED,OAAO;IACLR,OAAO;IACPO;EACF,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"createStore.js","names":["createStore","initialState","state","hasState","name","getState","setState","value"],"sources":["../../../src/ui-shell/createStore.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\n/**\n * Creates an internal state and gives access to those values via functions.\n *\n * It can be optionally given an initial state.\n */\nexport const createStore = <State extends object>(initialState?: State) => {\n  const state = initialState || ({} as Partial<State>);\n\n  const hasState = <Name extends keyof State>(name: Name) => name in state;\n\n  const getState = <Name extends keyof State>(name: Name) => state[name];\n\n  const setState = <Name extends keyof State>(\n    name: Name,\n    value: Required<State>[Name],\n  ) => {\n    state[name] = value;\n  };\n\n  return {\n    getState,\n    hasState,\n    setState,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAOA,OAAO,MAAMA,WAAW,GAA0BC,YAAoB,IAAK;EACzE,MAAMC,KAAK,GAAGD,YAAY,IAAK,CAAC,CAAoB;EAEpD,MAAME,QAAQ,GAA8BC,IAAU,IAAKA,IAAI,IAAIF,KAAK;EAExE,MAAMG,QAAQ,GAA8BD,IAAU,IAAKF,KAAK,CAACE,IAAI,CAAC;EAEtE,MAAME,QAAQ,GAAGA,CACfF,IAAU,EACVG,KAA4B,KACzB;IACHL,KAAK,CAACE,IAAI,CAAC,GAAGG,KAAK;EACrB,CAAC;EAED,OAAO;IACLF,QAAQ;IACRF,QAAQ;IACRG;EACF,CAAC;AACH,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +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 \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.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.\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\nexport { type UiShellNavComponentProps } from \"./UiShellContent.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,wBAAwB;AACtC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,oBAAoB;AAClC,cAAc,+CAA+C;AAE7D,SAASA,OAAO,QAA2B,cAAc","ignoreList":[]}

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

@@ -0,0 +1,96 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { ErrorBoundary } from "react-error-boundary";
+import { bufferLatest } from "./bufferLatest.js";
+import { createMessageBus } from "./createMessageBus.js";
+import { UiShell } from "./UiShell.js";
+import { renderReactInWebComponent } from "../web-component/renderReactInWebComponent.js";
+import { uiShellDataAttribute } from "./useHasUiShell.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const optionalComponentSlotNames = {
+  banners: "banners",
+  sideNavFooter: "side-nav-footer",
+  topNavLeftSide: "top-nav-left-side",
+  topNavRightSide: "top-nav-right-side"
+};
+export const renderUiShell = ({
+  appBackgroundColor,
+  appBackgroundContrastMode,
+  appContainerScrollingMode,
+  appRootElement: explicitAppRootElement,
+  hasStandardAppContentPadding,
+  initialVisibleSections,
+  onError = console.error,
+  sideNavBackgroundColor,
+  topNavBackgroundColor,
+  uiShellRootElement
+}) => {
+  const appRootElement = explicitAppRootElement || document.createElement("div");
+  uiShellRootElement.setAttribute(uiShellDataAttribute, "");
+  const {
+    publish: publishPropChanges,
+    subscribe: subscribeToPropChanges
+  } = createMessageBus();
+  const {
+    publish: publishSubscriptionCreated,
+    subscribe: subscribeToReactAppSubscribed
+  } = createMessageBus();
+  const publishAfterReactAppReadyForProps = bufferLatest({
+    publish: publishPropChanges,
+    subscribe: subscribeToReactAppSubscribed
+  });
+  const slottedElements = Object.fromEntries(Object.entries(optionalComponentSlotNames).map(([optionalComponentKey, slotName]) => {
+    const element = document.createElement("div");
+    element.setAttribute("slot", slotName);
+    return [optionalComponentKey, element];
+  }));
+  const appContainerElement = document.createElement("div");
+  appContainerElement.appendChild(appRootElement);
+  const webComponentChildren = Object.values(slottedElements);
+  const appComponent = _jsx("slot", {});
+  const uiShellElement = renderReactInWebComponent({
+    getReactComponent: reactRootElements => _jsx(ErrorBoundary, {
+      fallback: appComponent,
+      onError: onError,
+      children: _jsx(UiShell, {
+        appBackgroundColor: appBackgroundColor,
+        appBackgroundContrastMode: appBackgroundContrastMode,
+        appComponent: appComponent,
+        appContainerElement: appContainerElement,
+        appContainerScrollingMode: appContainerScrollingMode,
+        appRootElement: reactRootElements.appRootElement,
+        hasStandardAppContentPadding: hasStandardAppContentPadding,
+        initialVisibleSections: initialVisibleSections,
+        onError: onError,
+        onSubscriptionCreated: publishSubscriptionCreated,
+        optionalComponents: Object.fromEntries(Object.entries(optionalComponentSlotNames).map(([optionalComponentKey, slotName]) => [optionalComponentKey, _jsx("slot", {
+          name: slotName
+        })])),
+        sideNavBackgroundColor: sideNavBackgroundColor,
+        stylesRootElement: reactRootElements.stylesRootElement,
+        subscribeToPropChanges: subscribeToPropChanges,
+        topNavBackgroundColor: topNavBackgroundColor
+      })
+    }),
+    webComponentRootElement: uiShellRootElement,
+    webComponentChildren
+  });
+  uiShellRootElement.appendChild(appContainerElement);
+  return {
+    appRootElement,
+    setComponentProps: publishAfterReactAppReadyForProps,
+    slottedElements,
+    uiShellElement
+  };
+};
+//# sourceMappingURL=renderUiShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","renderReactInWebComponent","uiShellDataAttribute","jsx","_jsx","optionalComponentSlotNames","banners","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appContainerScrollingMode","appRootElement","explicitAppRootElement","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","sideNavBackgroundColor","topNavBackgroundColor","uiShellRootElement","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","appContainerElement","appendChild","webComponentChildren","values","appComponent","uiShellElement","getReactComponent","reactRootElements","fallback","children","onSubscriptionCreated","optionalComponents","name","stylesRootElement","webComponentRootElement","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 { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\nimport { type UiShellNavComponentProps } from \"./UiShellContent.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appContainerScrollingMode,\n  appRootElement: explicitAppRootElement,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n  uiShellRootElement,\n}: {\n  /**\n   * HTML element used as the root for a React app.\n   */\n  appRootElement?: HTMLDivElement;\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * HTML element used as the root for UI Shell.\n   */\n  uiShellRootElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appContainerScrollingMode\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n>) => {\n  const appRootElement =\n    explicitAppRootElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  uiShellRootElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as Record<\n    keyof Required<UiShellProps>[\"optionalComponents\"],\n    HTMLDivElement\n  >;\n\n  const appContainerElement = document.createElement(\"div\");\n  appContainerElement.appendChild(appRootElement);\n\n  const webComponentChildren = Object.values(slottedElements);\n\n  const appComponent = <slot />;\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={appComponent} onError={onError}>\n        <UiShell\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appComponent={appComponent}\n          appContainerElement={appContainerElement}\n          appContainerScrollingMode={appContainerScrollingMode}\n          appRootElement={reactRootElements.appRootElement}\n          hasStandardAppContentPadding={hasStandardAppContentPadding}\n          initialVisibleSections={initialVisibleSections}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          stylesRootElement={reactRootElements.stylesRootElement}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentRootElement: uiShellRootElement,\n    webComponentChildren,\n  });\n  uiShellRootElement.appendChild(appContainerElement);\n\n  return {\n    appRootElement,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,OAAO,QAAsB,cAAc;AACpD,SAASC,yBAAyB,QAAQ,+CAA+C;AAEzF,SAASC,oBAAoB,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1D,OAAO,MAAMC,0BAGZ,GAAG;EACFC,OAAO,EAAE,SAAS;EAClBC,aAAa,EAAE,iBAAiB;EAChCC,cAAc,EAAE,mBAAmB;EACnCC,eAAe,EAAE;AACnB,CAAC;AAWD,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,kBAAkB;EAClBC,yBAAyB;EACzBC,yBAAyB;EACzBC,cAAc,EAAEC,sBAAsB;EACtCC,4BAA4B;EAC5BC,sBAAsB;EACtBC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,sBAAsB;EACtBC,qBAAqB;EACrBC;AAuBF,CAAC,KAAK;EACJ,MAAMT,cAAc,GAClBC,sBAAsB,IAAIS,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAGzDF,kBAAkB,CAACG,YAAY,CAACxB,oBAAoB,EAAE,EAAE,CAAC;EAEzD,MAAM;IAAEyB,OAAO,EAAEC,kBAAkB;IAAEC,SAAS,EAAEC;EAAuB,CAAC,GACtE/B,gBAAgB,CAA2C,CAAC;EAE9D,MAAM;IACJ4B,OAAO,EAAEI,0BAA0B;IACnCF,SAAS,EAAEG;EACb,CAAC,GAAGjC,gBAAgB,CAAC,CAAC;EAEtB,MAAMkC,iCAAiC,GAAGnC,YAAY,CAAC;IACrD6B,OAAO,EAAEC,kBAAkB;IAC3BC,SAAS,EAAEG;EACb,CAAC,CAAC;EAEF,MAAME,eAAe,GAAGC,MAAM,CAACC,WAAW,CACxCD,MAAM,CAACE,OAAO,CAAChC,0BAA0B,CAAC,CAACiC,GAAG,CAC5C,CAAC,CAACC,oBAAoB,EAAEC,QAAQ,CAAC,KAAK;IACpC,MAAMC,OAAO,GAAGjB,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAE7CgB,OAAO,CAACf,YAAY,CAAC,MAAM,EAAEc,QAAQ,CAAC;IAEtC,OAAO,CAACD,oBAAoB,EAAEE,OAAO,CAAC;EACxC,CACF,CACF,CAGC;EAED,MAAMC,mBAAmB,GAAGlB,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACzDiB,mBAAmB,CAACC,WAAW,CAAC7B,cAAc,CAAC;EAE/C,MAAM8B,oBAAoB,GAAGT,MAAM,CAACU,MAAM,CAACX,eAAe,CAAC;EAE3D,MAAMY,YAAY,GAAG1C,IAAA,WAAO,CAAC;EAE7B,MAAM2C,cAAc,GAAG9C,yBAAyB,CAAC;IAC/C+C,iBAAiB,EAAGC,iBAAiB,IACnC7C,IAAA,CAACP,aAAa;MAACqD,QAAQ,EAAEJ,YAAa;MAAC5B,OAAO,EAAEA,OAAQ;MAAAiC,QAAA,EACtD/C,IAAA,CAACJ,OAAO;QACNW,kBAAkB,EAAEA,kBAAmB;QACvCC,yBAAyB,EAAEA,yBAA0B;QACrDkC,YAAY,EAAEA,YAAa;QAC3BJ,mBAAmB,EAAEA,mBAAoB;QACzC7B,yBAAyB,EAAEA,yBAA0B;QACrDC,cAAc,EAAEmC,iBAAiB,CAACnC,cAAe;QACjDE,4BAA4B,EAAEA,4BAA6B;QAC3DC,sBAAsB,EAAEA,sBAAuB;QAC/CC,OAAO,EAAEA,OAAQ;QACjBkC,qBAAqB,EAAErB,0BAA2B;QAElDsB,kBAAkB,EAAElB,MAAM,CAACC,WAAW,CACpCD,MAAM,CAACE,OAAO,CAAChC,0BAA0B,CAAC,CAACiC,GAAG,CAC5C,CAAC,CAACC,oBAAoB,EAAEC,QAAQ,CAAC,KAAK,CACpCD,oBAAoB,EACpBnC,IAAA;UAAMkD,IAAI,EAAEd;QAAS,CAAE,CAAC,CAE5B,CACF,CAAE;QACFnB,sBAAsB,EAAEA,sBAAuB;QAC/CkC,iBAAiB,EAAEN,iBAAiB,CAACM,iBAAkB;QACvDzB,sBAAsB,EAAEA,sBAAuB;QAC/CR,qBAAqB,EAAEA;MAAsB,CAC9C;IAAC,CACW,CAChB;IACDkC,uBAAuB,EAAEjC,kBAAkB;IAC3CqB;EACF,CAAC,CAAC;EACFrB,kBAAkB,CAACoB,WAAW,CAACD,mBAAmB,CAAC;EAEnD,OAAO;IACL5B,cAAc;IACd2C,iBAAiB,EAAExB,iCAAiC;IACpDC,eAAe;IACfa;EACF,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useState } from "react";
+export const uiShellDataAttribute = "data-unified-ui-shell";
+export const useHasUiShell = () => {
+  const [hasUiShell, setHasUiShell] = useState(false);
+  useEffect(() => {
+    setHasUiShell(Boolean(document.querySelector(`[${uiShellDataAttribute}]`)));
+  }, []);
+  return hasUiShell;
+};
+//# sourceMappingURL=useHasUiShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHasUiShell.js","names":["useEffect","useState","uiShellDataAttribute","useHasUiShell","hasUiShell","setHasUiShell","Boolean","document","querySelector"],"sources":["../../../src/ui-shell/useHasUiShell.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useState } from \"react\";\n\nexport const uiShellDataAttribute = \"data-unified-ui-shell\";\n\nexport const useHasUiShell = () => {\n  const [hasUiShell, setHasUiShell] = useState(false);\n\n  useEffect(() => {\n    setHasUiShell(Boolean(document.querySelector(`[${uiShellDataAttribute}]`)));\n  }, []);\n\n  return hasUiShell;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,OAAO,MAAMC,oBAAoB,GAAG,uBAAuB;AAE3D,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEnDD,SAAS,CAAC,MAAM;IACdK,aAAa,CAACC,OAAO,CAACC,QAAQ,CAACC,aAAa,CAAC,IAAIN,oBAAoB,GAAG,CAAC,CAAC,CAAC;EAC7E,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOE,UAAU;AACnB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+export const useScrollState = scrollableContentElement => {
+  const [isContentScrolled, setIsContentScrolled] = useState(false);
+  const scrollableContentRef = useRef(null);
+  const scrollableElement = useMemo(() => scrollableContentElement ?? scrollableContentRef.current, [scrollableContentElement, scrollableContentRef.current]);
+  useEffect(() => {
+    if (scrollableElement) {
+      let requestedAnimationFrameId;
+      const updateScrollState = () => {
+        cancelAnimationFrame(requestedAnimationFrameId);
+        requestedAnimationFrameId = requestAnimationFrame(() => {
+          setIsContentScrolled(scrollableElement.scrollTop > 0);
+        });
+      };
+      scrollableElement.addEventListener("scroll", updateScrollState);
+      updateScrollState();
+      return () => {
+        scrollableElement.removeEventListener("scroll", updateScrollState);
+        cancelAnimationFrame(requestedAnimationFrameId);
+      };
+    }
+    return () => {};
+  }, [scrollableElement]);
+  return {
+    isContentScrolled,
+    scrollableContentRef
+  };
+};
+//# sourceMappingURL=useScrollState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollState.js","names":["useEffect","useMemo","useRef","useState","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","scrollableContentRef","scrollableElement","current","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener"],"sources":["../../../src/ui-shell/useScrollState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableContentRef = useRef<ScrollableContentElement>(null);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement ?? scrollableContentRef.current,\n    [scrollableContentElement, scrollableContentRef.current],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n    scrollableContentRef,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAE5D,OAAO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEjE,MAAMK,oBAAoB,GAAGN,MAAM,CAA2B,IAAI,CAAC;EAEnE,MAAMO,iBAAiB,GAAGR,OAAO,CAC/B,MAAMI,wBAAwB,IAAIG,oBAAoB,CAACE,OAAO,EAC9D,CAACL,wBAAwB,EAAEG,oBAAoB,CAACE,OAAO,CACzD,CAAC;EAEDV,SAAS,CAAC,MAAM;IACd,IAAIS,iBAAiB,EAAE;MACrB,IAAIE,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDP,oBAAoB,CAACE,iBAAiB,CAACM,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDN,iBAAiB,CAACO,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXH,iBAAiB,CAACQ,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACF,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLH,iBAAiB;IACjBE;EACF,CAAC;AACH,CAAC","ignoreList":[]}