@okta/odyssey-react-mui 1.32.4 → 1.34.0

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

@@ -1 +1 @@
-{"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","CssBaseline","OdysseyProvider","UiShellContent","UiShellProvider","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","UiShell","appBackgroundColor","appBackgroundContrastMode","appComponent","appRootElement","appContainerElement","appContainerScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","stylesRootElement","topNavBackgroundColor","subscribeToPropChanges","componentProps","setComponentProps","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","hasScopedCssBaseline","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 {\n  memo,\n  ReactNode,\n  useEffect,\n  useState,\n  type SetStateAction,\n} from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { CssBaseline } from \"../CssBaseline.js\";\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport {\n  UiShellContent,\n  type UiShellContentProps,\n  type UiShellNavComponentProps,\n} from \"./UiShellContent.js\";\nimport { type ReactRootElements } from \"../web-component/renderReactInWebComponent.js\";\nimport { UiShellProvider } from \"./UiShellProvider.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\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: (\n    subscriber: (\n      componentProps: SetStateAction<UiShellNavComponentProps>,\n    ) => void,\n  ) => () => void;\n  /**\n   * Sets a custom background color for the side nav area.\n   */\n  sideNavBackgroundColor?: string;\n  /**\n   * Sets a custom background color for the top nav area.\n   */\n  topNavBackgroundColor?: string;\n  /**\n   * React app component that renders as children in the correct location of the shell. Only used as fallback for ErrorBoundary.\n   */\n  appComponent?: ReactNode;\n} & Pick<ReactRootElements, \"appRootElement\" | \"stylesRootElement\"> &\n  Pick<\n    UiShellContentProps,\n    | \"appBackgroundColor\"\n    | \"appBackgroundContrastMode\"\n    | \"appContainerElement\"\n    | \"appContainerScrollingMode\"\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  appComponent,\n  appRootElement,\n  appContainerElement,\n  appContainerScrollingMode,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  stylesRootElement,\n  topNavBackgroundColor,\n  subscribeToPropChanges,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\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 (\n    <ErrorBoundary fallback={appComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={stylesRootElement}\n        shadowRootElement={appRootElement}\n        hasScopedCssBaseline={false}\n      >\n        <ErrorBoundary fallback={appComponent} onError={onError}>\n          <CssBaseline />\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            <UiShellContent\n              {...componentProps}\n              appContainerElement={appContainerElement}\n              appContainerScrollingMode={appContainerScrollingMode}\n              hasStandardAppContentPadding={hasStandardAppContentPadding}\n              initialVisibleSections={initialVisibleSections}\n              onError={onError}\n              optionalComponents={optionalComponents}\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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,IAAI,EAEJC,SAAS,EACTC,QAAQ,QAEH,OAAO;AACd,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SACEC,cAAc,QAGT,qBAAqB;AAE5B,SAASC,eAAe,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvD,OAAO,MAAMC,qBAA+C,GAAG;EAC7DC,YAAY,EAAEC,SAAS;EACvBC,WAAW,EAAED;AACf,CAAU;AAoDV,MAAME,OAAO,GAAGA,CAAC;EACfC,kBAAkB;EAClBC,yBAAyB;EACzBC,YAAY;EACZC,cAAc;EACdC,mBAAmB;EACnBC,yBAAyB;EACzBC,4BAA4B;EAC5BC,sBAAsB;EACtBC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,qBAAqB;EACrBC,kBAAkB;EAClBC,sBAAsB;EACtBC,iBAAiB;EACjBC,qBAAqB;EACrBC;AACY,CAAC,KAAK;EAClB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGjC,QAAQ,CAACU,qBAAqB,CAAC;EAE3EX,SAAS,CAAC,MAAM;IACd,MAAMmC,WAAW,GAAGH,sBAAsB,CAAEC,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAItB,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFgB,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXQ,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACR,qBAAqB,EAAEK,sBAAsB,CAAC,CAAC;EAEnD,OACExB,IAAA,CAACN,aAAa;IAACkC,QAAQ,EAAElB,YAAa;IAACM,OAAO,EAAEA,OAAQ;IAAAa,QAAA,EACtD7B,IAAA,CAACJ,eAAe;MACdkC,kBAAkB,EAAER,iBAAkB;MACtCS,iBAAiB,EAAEpB,cAAe;MAClCqB,oBAAoB,EAAE,KAAM;MAAAH,QAAA,EAE5B3B,KAAA,CAACR,aAAa;QAACkC,QAAQ,EAAElB,YAAa;QAACM,OAAO,EAAEA,OAAQ;QAAAa,QAAA,GACtD7B,IAAA,CAACL,WAAW,IAAE,CAAC,EACfK,IAAA,CAACF,eAAe;UACdU,kBAAkB,EAAEA,kBAAmB;UACvCC,yBAAyB,EAAEA,yBAA0B;UACrDY,sBAAsB,EAAEA,sBAAuB;UAC/CE,qBAAqB,EAAEA,qBAAsB;UAAAM,QAAA,EAE7C7B,IAAA,CAACH,cAAc;YAAA,GACT4B,cAAc;YAClBb,mBAAmB,EAAEA,mBAAoB;YACzCC,yBAAyB,EAAEA,yBAA0B;YACrDC,4BAA4B,EAAEA,4BAA6B;YAC3DC,sBAAsB,EAAEA,sBAAuB;YAC/CC,OAAO,EAAEA,OAAQ;YACjBI,kBAAkB,EAAEA;UAAmB,CACxC;QAAC,CACa,CAAC;MAAA,CACL;IAAC,CACD;EAAC,CACL,CAAC;AAEpB,CAAC;AAED,MAAMa,eAAe,GAAG1C,IAAI,CAACgB,OAAO,CAAC;AACrC0B,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAI1B,OAAO","ignoreList":[]}
+{"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":[]}

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

@@ -13,7 +13,10 @@
 import { createContext, memo, useContext, useMemo } from "react";
 import { generateContrastColors } from "../createContrastColors.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { createMessageBus } from "./createMessageBus.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const defaultCloseSideNavMessageBus = createMessageBus();
+export const defaultSubscribeToCloseRightSideMenu = () => () => {};
 const UiShellContext = createContext(undefined);
 export const useUiShellContext = () => {
   return useContext(UiShellContext);
@@ -21,9 +24,12 @@ export const useUiShellContext = () => {
 const UiShellProvider = ({
   appBackgroundColor,
   appBackgroundContrastMode = "lowContrast",
+  children,
+  closeSideNavMenu,
   sideNavBackgroundColor,
-  topNavBackgroundColor,
-  children
+  subscribeToCloseRightSideMenu,
+  subscribeToCloseSideNavMenu,
+  topNavBackgroundColor
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const defaultedSideNavBackgroundColor = sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;
@@ -34,10 +40,13 @@ const UiShellProvider = ({
   const appContentBackgroundColor = appBackgroundColor || defaultTopAndAppBackgroundColor;
   const memoizedContextValue = useMemo(() => ({
     appBackgroundColor: appContentBackgroundColor,
+    closeSideNavMenu: closeSideNavMenu ?? defaultCloseSideNavMessageBus.publish,
     sideNavBackgroundColor: sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,
     sideNavContrastColors,
+    subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu ?? defaultCloseSideNavMessageBus.subscribe,
+    subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu ?? defaultSubscribeToCloseRightSideMenu,
     topNavBackgroundColor: topNavColor
-  }), [appContentBackgroundColor, odysseyDesignTokens, sideNavBackgroundColor, sideNavContrastColors, topNavColor]);
+  }), [appContentBackgroundColor, odysseyDesignTokens.HueNeutralWhite, closeSideNavMenu, sideNavBackgroundColor, sideNavContrastColors, subscribeToCloseRightSideMenu, subscribeToCloseSideNavMenu, topNavColor]);
   return _jsx(UiShellContext.Provider, {
     value: memoizedContextValue,
     children: children

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

@@ -1 +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":[]}
+{"version":3,"file":"UiShellProvider.js","names":["createContext","memo","useContext","useMemo","generateContrastColors","useOdysseyDesignTokens","createMessageBus","jsx","_jsx","defaultCloseSideNavMessageBus","defaultSubscribeToCloseRightSideMenu","UiShellContext","undefined","useUiShellContext","UiShellProvider","appBackgroundColor","appBackgroundContrastMode","children","closeSideNavMenu","sideNavBackgroundColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","topNavBackgroundColor","odysseyDesignTokens","defaultedSideNavBackgroundColor","HueNeutralWhite","sideNavContrastColors","isAppBackgroundHightContrast","defaultTopAndAppBackgroundColor","HueNeutral50","topNavColor","appContentBackgroundColor","memoizedContextValue","publish","subscribe","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  ContrastColors,\n  generateContrastColors,\n} from \"../createContrastColors.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { createMessageBus, MessageBus } from \"./createMessageBus.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\n\nexport const defaultCloseSideNavMessageBus = createMessageBus();\nexport const defaultSubscribeToCloseRightSideMenu = () => () => {};\n\nexport type UiShellColors = {\n  /**\n   * Sets a custom background color for the app content area.\n   */\n  appBackgroundColor: string;\n  /**\n   * Sets a custom background color for the side nav area.\n   */\n  sideNavBackgroundColor: string;\n  sideNavContrastColors?: ContrastColors;\n  /**\n   * Sets a custom background color for the top nav area.\n   */\n  topNavBackgroundColor: string;\n};\n\nexport type UiShellContext = {\n  /**\n   * This is a callback that publishes a change to all subscribers listening for when to close the side nav.\n   */\n  closeSideNavMenu: MessageBus<void>[\"publish\"];\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 a publisher that asks us to close the side nav.\n   */\n  subscribeToCloseSideNavMenu: MessageBus<void>[\"subscribe\"];\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 a publisher that asks us to close the right-side menu.\n   */\n  subscribeToCloseRightSideMenu: MessageBus<void>[\"subscribe\"];\n} & UiShellColors;\n\nconst UiShellContext = createContext<UiShellContext | undefined>(undefined);\n\nexport const useUiShellContext = () => {\n  return useContext(UiShellContext);\n};\n\nexport type UiShellProviderProps = {\n  /**\n   * Sets either a gray or white background color for the app content area.\n   */\n  appBackgroundContrastMode?: ContrastMode;\n} & Partial<UiShellContext>;\n\nconst UiShellProvider = ({\n  appBackgroundColor,\n  appBackgroundContrastMode = \"lowContrast\",\n  children,\n  closeSideNavMenu,\n  sideNavBackgroundColor,\n  subscribeToCloseRightSideMenu,\n  subscribeToCloseSideNavMenu,\n  topNavBackgroundColor,\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      closeSideNavMenu:\n        closeSideNavMenu ?? defaultCloseSideNavMessageBus.publish,\n      sideNavBackgroundColor:\n        sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,\n      sideNavContrastColors,\n      subscribeToCloseSideNavMenu:\n        subscribeToCloseSideNavMenu ?? defaultCloseSideNavMessageBus.subscribe,\n      subscribeToCloseRightSideMenu:\n        subscribeToCloseRightSideMenu ?? defaultSubscribeToCloseRightSideMenu,\n      topNavBackgroundColor: topNavColor,\n    }),\n    [\n      appContentBackgroundColor,\n      odysseyDesignTokens.HueNeutralWhite,\n      closeSideNavMenu,\n      sideNavBackgroundColor,\n      sideNavContrastColors,\n      subscribeToCloseRightSideMenu,\n      subscribeToCloseSideNavMenu,\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,SAEEC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,gBAAgB,QAAoB,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrE,OAAO,MAAMC,6BAA6B,GAAGH,gBAAgB,CAAC,CAAC;AAC/D,OAAO,MAAMI,oCAAoC,GAAGA,CAAA,KAAM,MAAM,CAAC,CAAC;AAmClE,MAAMC,cAAc,GAAGX,aAAa,CAA6BY,SAAS,CAAC;AAE3E,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACrC,OAAOX,UAAU,CAACS,cAAc,CAAC;AACnC,CAAC;AASD,MAAMG,eAAe,GAAGA,CAAC;EACvBC,kBAAkB;EAClBC,yBAAyB,GAAG,aAAa;EACzCC,QAAQ;EACRC,gBAAgB;EAChBC,sBAAsB;EACtBC,6BAA6B;EAC7BC,2BAA2B;EAC3BC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAGlB,sBAAsB,CAAC,CAAC;EACpD,MAAMmB,+BAA+B,GACnCL,sBAAsB,IAAII,mBAAmB,CAACE,eAAe;EAE/D,MAAMC,qBAAqB,GACzBF,+BAA+B,KAAKD,mBAAmB,CAACE,eAAe,GACnErB,sBAAsB,CACpBoB,+BAA+B,EAC/BD,mBACF,CAAC,GACDX,SAAS;EAEf,MAAMe,4BAA4B,GAChCX,yBAAyB,KAAK,cAAc;EAE9C,MAAMY,+BAA+B,GAAGD,4BAA4B,GAChEJ,mBAAmB,CAACE,eAAe,GACnCF,mBAAmB,CAACM,YAAY;EAEpC,MAAMC,WAAW,GAAGR,qBAAqB,IAAIM,+BAA+B;EAE5E,MAAMG,yBAAyB,GAC7BhB,kBAAkB,IAAIa,+BAA+B;EAEvD,MAAMI,oBAAoB,GAAG7B,OAAO,CAClC,OAAO;IACLY,kBAAkB,EAAEgB,yBAAyB;IAC7Cb,gBAAgB,EACdA,gBAAgB,IAAIT,6BAA6B,CAACwB,OAAO;IAC3Dd,sBAAsB,EACpBA,sBAAsB,IAAII,mBAAmB,CAACE,eAAe;IAC/DC,qBAAqB;IACrBL,2BAA2B,EACzBA,2BAA2B,IAAIZ,6BAA6B,CAACyB,SAAS;IACxEd,6BAA6B,EAC3BA,6BAA6B,IAAIV,oCAAoC;IACvEY,qBAAqB,EAAEQ;EACzB,CAAC,CAAC,EACF,CACEC,yBAAyB,EACzBR,mBAAmB,CAACE,eAAe,EACnCP,gBAAgB,EAChBC,sBAAsB,EACtBO,qBAAqB,EACrBN,6BAA6B,EAC7BC,2BAA2B,EAC3BS,WAAW,CAEf,CAAC;EAED,OACEtB,IAAA,CAACG,cAAc,CAACwB,QAAQ;IAACC,KAAK,EAAEJ,oBAAqB;IAAAf,QAAA,EAClDA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAMoB,uBAAuB,GAAGpC,IAAI,CAACa,eAAe,CAAC;AAErD,SAASuB,uBAAuB,IAAIvB,eAAe","ignoreList":[]}

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

@@ -0,0 +1,165 @@
+/*!
+ * 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, useRef } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { AppSwitcher } from "./AppSwitcher/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { SideNav } from "./SideNav/index.js";
+import { TopNav } from "./TopNav/index.js";
+import { useScrollState } from "./useScrollState.js";
+import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShellAppArea.js";
+import { useUiShellContext } from "./UiShellProvider.js";
+import { emptySideNavItems } from "./uiShellSharedConstants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAppContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
+})(({
+  appBackgroundColor
+}) => ({
+  gridArea: "app-content",
+  backgroundColor: appBackgroundColor
+}));
+const StyledAppSwitcherContainer = styled("div")({
+  gridArea: "app-switcher"
+});
+const StyledBannersContainer = styled("div")({
+  gridArea: "banners"
+});
+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"
+});
+const WideUiShellContent = ({
+  appElement,
+  appElementScrollingMode,
+  appSwitcherProps,
+  hasStandardAppContentPadding = true,
+  initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
+  onError = console.error,
+  optionalComponents,
+  sideNavProps,
+  topNavProps
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const uiShellContext = useUiShellContext();
+  const {
+    isContentScrolled
+  } = useScrollState(appElement);
+  const sideNavContainerRef = useRef(null);
+  const topNavContainerRef = useRef(null);
+  const uiShellAppAreaRef = useRef(null);
+  const {
+    parentContainerRef
+  } = useMatchAppElementToUiShellAppArea({
+    appElement,
+    appElementScrollingMode,
+    paddingMode: hasStandardAppContentPadding ? "comfortable" : "none",
+    uiShellAppAreaRef,
+    uiShellResizableRefs: [sideNavContainerRef, topNavContainerRef, uiShellAppAreaRef]
+  });
+  return _jsxs(StyledShellContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    ref: parentContainerRef,
+    children: [_jsx(StyledBannersContainer, {
+      children: optionalComponents?.banners
+    }), _jsxs(StyledAppSwitcherContainer, {
+      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
+        })
+      })]
+    }), _jsxs(StyledSideNavContainer, {
+      ref: sideNavContainerRef,
+      children: [initialVisibleSections?.includes("SideNav") && sideNavProps === undefined && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(SideNav, {
+          isLoading: true,
+          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
+          })
+        })
+      })]
+    }), _jsxs(StyledTopNavContainer, {
+      ref: topNavContainerRef,
+      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: uiShellAppAreaRef
+    })]
+  });
+};
+const MemoizedWideUiShellContent = memo(WideUiShellContent);
+MemoizedWideUiShellContent.displayName = "WideUiShellContent";
+export { MemoizedWideUiShellContent as WideUiShellContent };
+//# sourceMappingURL=WideUiShellContent.js.map

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

@@ -0,0 +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":[]}

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

@@ -11,11 +11,13 @@
  */
 
 export * from "./AppSwitcher/index.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 { UiShell } from "./UiShell.js";
-export { UiShellContent } from "./UiShellContent.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["UiShell","UiShellContent"],"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 {\n  UiShellContent,\n  type UiShellNavComponentProps,\n} 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;AACzD,SACEC,cAAc,QAET,qBAAqB","ignoreList":[]}
+{"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":[]}

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

@@ -14,11 +14,12 @@ 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 { renderReactInWebComponent } from "../web-component/renderReactInWebComponent.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const optionalComponentSlotNames = {
   banners: "banners",
+  rightSideMenu: "right-side-menu",
   sideNavFooter: "side-nav-footer",
   topNavLeftSide: "top-nav-left-side",
   topNavRightSide: "top-nav-right-side"
@@ -26,17 +27,17 @@ export const optionalComponentSlotNames = {
 export const renderUiShell = ({
   appBackgroundColor,
   appBackgroundContrastMode,
-  appContainerScrollingMode,
-  appRootElement: explicitAppRootElement,
+  appElement: providedAppElement,
+  appElementScrollingMode,
   hasStandardAppContentPadding,
   initialVisibleSections,
   onError = console.error,
+  parentElement,
   sideNavBackgroundColor,
-  topNavBackgroundColor,
-  uiShellRootElement
+  topNavBackgroundColor
 }) => {
-  const appRootElement = explicitAppRootElement || document.createElement("div");
-  uiShellRootElement.setAttribute(uiShellDataAttribute, "");
+  const appElement = providedAppElement || document.createElement("div");
+  parentElement.setAttribute(uiShellDataAttribute, "");
   const {
     publish: publishPropChanges,
     subscribe: subscribeToPropChanges
@@ -49,26 +50,32 @@ export const renderUiShell = ({
     publish: publishPropChanges,
     subscribe: subscribeToReactAppSubscribed
   });
+  const {
+    publish: closeRightSideMenu,
+    subscribe: subscribeToCloseRightSideMenu
+  } = createMessageBus();
+  const {
+    publish: closeSideNavMenu,
+    subscribe: subscribeToCloseSideNavMenu
+  } = createMessageBus();
   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,
+      fallback: _jsx("div", {
+        "data-error": true
+      }),
       onError: onError,
       children: _jsx(UiShell, {
         appBackgroundColor: appBackgroundColor,
         appBackgroundContrastMode: appBackgroundContrastMode,
-        appComponent: appComponent,
-        appContainerElement: appContainerElement,
-        appContainerScrollingMode: appContainerScrollingMode,
-        appRootElement: reactRootElements.appRootElement,
+        appElement: appElement,
+        appElementScrollingMode: appElementScrollingMode,
+        closeSideNavMenu: closeSideNavMenu,
         hasStandardAppContentPadding: hasStandardAppContentPadding,
         initialVisibleSections: initialVisibleSections,
         onError: onError,
@@ -77,17 +84,22 @@ export const renderUiShell = ({
           name: slotName
         })])),
         sideNavBackgroundColor: sideNavBackgroundColor,
-        stylesRootElement: reactRootElements.stylesRootElement,
+        subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
+        subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
         subscribeToPropChanges: subscribeToPropChanges,
-        topNavBackgroundColor: topNavBackgroundColor
+        topNavBackgroundColor: topNavBackgroundColor,
+        uiShellAppElement: reactRootElements.appRootElement,
+        uiShellStylesElement: reactRootElements.stylesRootElement
       })
     }),
-    webComponentRootElement: uiShellRootElement,
+    webComponentParentElement: parentElement,
     webComponentChildren
   });
-  uiShellRootElement.appendChild(appContainerElement);
+  parentElement.appendChild(appElement);
   return {
-    appRootElement,
+    appElement,
+    closeRightSideMenu,
+    closeSideNavMenu,
     setComponentProps: publishAfterReactAppReadyForProps,
     slottedElements,
     uiShellElement

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

@@ -1 +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":"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","ignoreList":[]}
+{"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":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellContentTypes.js","names":["subComponentNames"],"sources":["../../../src/ui-shell/uiShellContentTypes.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactElement } from \"react\";\nimport { ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcherProps } from \"./AppSwitcher/AppSwitcher.js\";\nimport { SideNavProps } from \"./SideNav/types.js\";\nimport { TopNavProps } from \"./TopNav/TopNav.js\";\n\nexport const subComponentNames = [\"TopNav\", \"SideNav\", \"AppSwitcher\"] as const;\nexport type SubComponentName = (typeof subComponentNames)[number];\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   */\n  appSwitcherProps?: AppSwitcherProps;\n  /**\n   * Object that gets pass directly to the side nav component. If `undefined` and in `initialVisibleSections`, SideNav will be initially rendered. Pass `null` to hide a previously-visible SideNav.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\"> | null;\n  /**\n   * Object that gets pass directly to the top nav component. If `undefined` and in `initialVisibleSections`, TopNav will be initially rendered. Pass `null` to hide a previously-visible TopNav.\n   */\n  topNavProps?: Omit<\n    TopNavProps,\n    \"leftSideComponent\" | \"rightSideComponent\"\n  > | null;\n};\n\nexport type UiShellContentProps = {\n  /**\n   * **WARNING:** UI Shell will modify the styling of this element.\n   * HTML element where the app gets rendered. This typically called the React root element for your app.\n   *\n   * When passed, the app is expected to render into this element, not the Shadow DOM.\n   *\n   * UI Shell will position this element appropriately to match the content area inside the Shadow DOM.\n   *\n   * A major benefit to having this element separate from UI Shell is related to encapsulation. UI Shell has the capability of rendering inside a web component, but in doing so, the app would be subject to the styles in the web component and not the page itself.\n   * The app should either be in its own web component or use the global styles, and having this separate element allows us to accomplish that goal.\n   */\n  appElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app element area.\n   *\n   * In the case of an app wanting to control their own scrolling, use `\"none\"`.\n   *\n   * Most apps will want to use `\"vertical\"` and let UI Shell manage scrolling behavior.\n   */\n  appElementScrollingMode: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * Defaults to `true`.\n   *\n   * If `false`, the content area will have no padding provided. This is for the case where an app wants to manage this separate from UI Shell.\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Parts of UI Shell that are visible when rendered.\n   *\n   * For example, if `sideNavProps` is `undefined`, should there be a space left for side nav or should that space not exist?\n   */\n  initialVisibleSections?: SubComponentName[];\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, flagging \"p0\"s, and recovering UI Shell when errors occur.\n   */\n  onError?: ErrorBoundaryProps[\"onError\"];\n  /**\n   * Components that will render as children of various other components such as the top nav or side nav.\n   */\n  optionalComponents?: {\n    /**\n     * Spot for banners to go at the top of the page.\n     */\n    banners?: ReactElement;\n    /**\n     * In narrow view, this is the right-side menu area.\n     */\n    rightSideMenu?: ReactElement;\n    /**\n     * Footer in the side nav.\n     */\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the left-aligned half.\n     */\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    /**\n     * Top nav is divided into 2 parts. This is the right-aligned half.\n     */\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAU","ignoreList":[]}

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

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */export const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = "77px";
+export const SIDE_NAV_WIDTH = "300px";
+export const TOP_NAV_HEIGHT = `${64 / 14}rem`;
+export const UI_SHELL_BASE_Z_INDEX = 100;
+export const UI_SHELL_OVERLAY_Z_INDEX = 200;
+export const emptySideNavItems = [];
+//# sourceMappingURL=uiShellSharedConstants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"uiShellSharedConstants.js","names":["SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","UI_SHELL_OVERLAY_Z_INDEX","emptySideNavItems"],"sources":["../../../src/ui-shell/uiShellSharedConstants.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 { SideNavProps } from \"./SideNav/types.js\";\n\n// It's important to bring all our constant values together, so we can change them in one location and ensure the values are all correct relative to each other.\n// This also lends us the capability of swapping these out for a more robust solution in the future.\n\n/* The side nav collapse icon is placed absolutely from the top (Logo container + nav header height) to align it in the middle of the nav header text */\nexport const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = \"77px\";\n\nexport const SIDE_NAV_WIDTH = \"300px\";\n\nexport const TOP_NAV_HEIGHT = `${64 / 14}rem`;\n\nexport const UI_SHELL_BASE_Z_INDEX = 100;\n\nexport const UI_SHELL_OVERLAY_Z_INDEX = 200;\n\nexport const emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAQA,OAAO,MAAMA,wCAAwC,GAAG,MAAM;AAE9D,OAAO,MAAMC,cAAc,GAAG,OAAO;AAErC,OAAO,MAAMC,cAAc,GAAG,GAAG,EAAE,GAAG,EAAE,KAAK;AAE7C,OAAO,MAAMC,qBAAqB,GAAG,GAAG;AAExC,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAE3C,OAAO,MAAMC,iBAAiB,GAAG,EAAyC","ignoreList":[]}