@okta/odyssey-react-mui 1.29.0 → 1.32.4

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

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavListItem = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _Link = require("../../Link.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const StyledTopNavItemLabelContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  flexWrap: "wrap",
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading
+}));
+const StyledTopNavListItem = (0, _styled.default)("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isDisabled"
+})(({
+  odysseyDesignTokens,
+  isDisabled
+}) => ({
+  alignItems: "center",
+  color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
+  cursor: isDisabled ? "default" : "pointer",
+  display: "flex",
+  pointerEvents: isDisabled ? "none" : "auto",
+  a: {
+    alignItems: "center",
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    display: "flex",
+    paddingBlock: odysseyDesignTokens.Spacing2,
+    paddingInline: odysseyDesignTokens.Spacing4,
+    "&:hover": {
+      backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+      textDecoration: "none"
+    },
+    "&:focus-visible": {
+      backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+      borderRadius: 0,
+      outlineOffset: 0,
+      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain
+    }
+  },
+  "div[role='button']:hover": {
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit"
+  }
+}));
+const StyledNavItemContentClickContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing4,
+  width: "100%",
+  "&:focus-visible": {
+    backgroundColor: odysseyDesignTokens.HueNeutral50,
+    borderRadius: 0,
+    outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
+    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    textDecoration: "none"
+  }
+}));
+const TopNavListItem = ({
+  href,
+  id,
+  isDisabled,
+  label,
+  onClick,
+  target
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const topNavItemContentKeyHandler = (0, _react.useCallback)(event => {
+    if (event?.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick?.(event);
+    }
+  }, [onClick]);
+  return (0, _jsxRuntime.jsxs)(StyledTopNavListItem, {
+    "aria-disabled": isDisabled,
+    id: id,
+    isDisabled: isDisabled,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [isDisabled && (0, _jsxRuntime.jsx)(StyledNavItemContentClickContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    }), !isDisabled && href && (0, _jsxRuntime.jsx)(_Link.Link, {
+      href: href,
+      onClick: onClick,
+      target: target,
+      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    }), !isDisabled && !href && (0, _jsxRuntime.jsx)(StyledNavItemContentClickContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: onClick,
+      onKeyDown: topNavItemContentKeyHandler,
+      role: "button",
+      tabIndex: 0,
+      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    })]
+  });
+};
+const MemoizedTopNavListItem = exports.TopNavListItem = (0, _react.memo)(TopNavListItem);
+MemoizedTopNavListItem.displayName = "TopNavListItem";
+//# sourceMappingURL=TopNavListItem.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavListItem.cjs","names":["_styled","_interopRequireDefault","require","_react","_Link","_OdysseyDesignTokensContext","_jsxRuntime","e","__esModule","default","StyledTopNavItemLabelContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","alignItems","display","flexWrap","fontSize","TypographyScale0","fontWeight","TypographyWeightHeading","StyledTopNavListItem","isDisabled","color","TypographyColorDisabled","TypographyColorHeading","cursor","pointerEvents","a","paddingBlock","Spacing2","paddingInline","Spacing4","backgroundColor","HueNeutral50","textDecoration","borderRadius","outlineOffset","outlineWidth","FocusOutlineWidthMain","StyledNavItemContentClickContainer","width","outlineColor","FocusOutlineColorPrimary","outlineStyle","FocusOutlineStyle","TopNavListItem","href","id","label","onClick","target","useOdysseyDesignTokens","topNavItemContentKeyHandler","useCallback","event","key","preventDefault","stopPropagation","jsxs","children","jsx","Link","onKeyDown","role","tabIndex","MemoizedTopNavListItem","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNavListItem.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 {\n  memo,\n  useCallback,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\n\nimport { Link } from \"../../Link.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\n\nconst StyledTopNavItemLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  fontSize: odysseyDesignTokens.TypographyScale0,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeading,\n}));\n\nconst StyledTopNavListItem = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isDisabled\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isDisabled?: boolean;\n}>(({ odysseyDesignTokens, isDisabled }) => ({\n  alignItems: \"center\",\n  color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,\n  cursor: isDisabled ? \"default\" : \"pointer\",\n  display: \"flex\",\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n\n  a: {\n    alignItems: \"center\",\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n    display: \"flex\",\n    paddingBlock: odysseyDesignTokens.Spacing2,\n    paddingInline: odysseyDesignTokens.Spacing4,\n\n    \"&:hover\": {\n      backgroundColor: !isDisabled\n        ? odysseyDesignTokens.HueNeutral50\n        : \"inherit\",\n      textDecoration: \"none\",\n    },\n\n    \"&:focus-visible\": {\n      backgroundColor: !isDisabled\n        ? odysseyDesignTokens.HueNeutral50\n        : \"inherit\",\n      borderRadius: 0,\n      outlineOffset: 0,\n      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,\n    },\n  },\n\n  \"div[role='button']:hover\": {\n    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : \"inherit\",\n  },\n}));\n\nconst StyledNavItemContentClickContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing4,\n  width: \"100%\",\n\n  \"&:focus-visible\": {\n    backgroundColor: odysseyDesignTokens.HueNeutral50,\n    borderRadius: 0,\n    outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n    outlineStyle: odysseyDesignTokens.FocusOutlineStyle,\n    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,\n    textDecoration: \"none\",\n  },\n}));\n\nexport type TopNavListItemProps = {\n  /**\n   * Without a hyperlink reference, `onClick` functionality will not function.\n   * If `undefined`, static text will be displayed.\n   */\n  href?: string;\n  /**\n   * HTML `id` attribute.\n   */\n  id: string;\n  /**\n   * Determines whether the link item is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Display text for the link.\n   */\n  label: string;\n  /**\n   * Handles both mouse and keyboard interactions.\n   */\n  onClick?: MouseEventHandler<HTMLAnchorElement> &\n    MouseEventHandler<HTMLDivElement> &\n    KeyboardEventHandler<HTMLDivElement>;\n  /**\n   * Where to display the linked URL.\n   */\n  target?: string;\n};\n\nconst TopNavListItem = ({\n  href,\n  id,\n  isDisabled,\n  label,\n  onClick,\n  target,\n}: TopNavListItemProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const topNavItemContentKeyHandler = useCallback<\n    KeyboardEventHandler<HTMLDivElement>\n  >(\n    (event) => {\n      if (event?.key === \"Enter\") {\n        event.preventDefault();\n        event.stopPropagation();\n        onClick?.(event);\n      }\n    },\n    [onClick],\n  );\n\n  return (\n    <StyledTopNavListItem\n      aria-disabled={isDisabled}\n      id={id}\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {\n        // Use Link for nav items with links and div for disabled or non-link items\n        isDisabled && (\n          <StyledNavItemContentClickContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <StyledTopNavItemLabelContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              {label}\n            </StyledTopNavItemLabelContainer>\n          </StyledNavItemContentClickContainer>\n        )\n      }\n\n      {!isDisabled && href && (\n        <Link href={href} onClick={onClick} target={target}>\n          <StyledTopNavItemLabelContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {label}\n          </StyledTopNavItemLabelContainer>\n        </Link>\n      )}\n\n      {!isDisabled && !href && (\n        <StyledNavItemContentClickContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={onClick}\n          onKeyDown={topNavItemContentKeyHandler}\n          role=\"button\"\n          tabIndex={0}\n        >\n          <StyledTopNavItemLabelContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {label}\n          </StyledTopNavItemLabelContainer>\n        </StyledNavItemContentClickContainer>\n      )}\n    </StyledTopNavListItem>\n  );\n};\n\nconst MemoizedTopNavListItem = memo(TopNavListItem);\nMemoizedTopNavListItem.displayName = \"TopNavListItem\";\n\nexport { MemoizedTopNavListItem as TopNavListItem };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TopNav = require("./TopNav.cjs");
+Object.keys(_TopNav).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopNav[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TopNav[key];
+    }
+  });
+});
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["_TopNav","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/ui-shell/TopNav/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 \"./TopNav.js\";\n"],"mappings":";;;;;AAYA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

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

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultComponentProps = exports.UiShell = void 0;
+var _react = require("react");
+var _reactErrorBoundary = require("react-error-boundary");
+var _CssBaseline = require("../CssBaseline.cjs");
+var _OdysseyProvider = require("../OdysseyProvider.cjs");
+var _UiShellContent = require("./UiShellContent.cjs");
+var _UiShellProvider = require("./UiShellProvider.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * 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.
+ */
+
+const defaultComponentProps = exports.defaultComponentProps = {
+  sideNavProps: undefined,
+  topNavProps: undefined
+};
+const UiShell = ({
+  appBackgroundColor,
+  appBackgroundContrastMode,
+  appComponent,
+  appRootElement,
+  appContainerElement,
+  appContainerScrollingMode,
+  hasStandardAppContentPadding,
+  initialVisibleSections,
+  onError = console.error,
+  onSubscriptionCreated,
+  optionalComponents,
+  sideNavBackgroundColor,
+  stylesRootElement,
+  topNavBackgroundColor,
+  subscribeToPropChanges
+}) => {
+  const [componentProps, setComponentProps] = (0, _react.useState)(defaultComponentProps);
+  (0, _react.useEffect)(() => {
+    const unsubscribe = subscribeToPropChanges(componentProps => {
+      setComponentProps(componentProps || defaultComponentProps);
+    });
+    onSubscriptionCreated();
+    return () => {
+      unsubscribe();
+    };
+  }, [onSubscriptionCreated, subscribeToPropChanges]);
+  return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+    fallback: appComponent,
+    onError: onError,
+    children: (0, _jsxRuntime.jsx)(_OdysseyProvider.OdysseyProvider, {
+      emotionRootElement: stylesRootElement,
+      shadowRootElement: appRootElement,
+      hasScopedCssBaseline: false,
+      children: (0, _jsxRuntime.jsxs)(_reactErrorBoundary.ErrorBoundary, {
+        fallback: appComponent,
+        onError: onError,
+        children: [(0, _jsxRuntime.jsx)(_CssBaseline.CssBaseline, {}), (0, _jsxRuntime.jsx)(_UiShellProvider.UiShellProvider, {
+          appBackgroundColor: appBackgroundColor,
+          appBackgroundContrastMode: appBackgroundContrastMode,
+          sideNavBackgroundColor: sideNavBackgroundColor,
+          topNavBackgroundColor: topNavBackgroundColor,
+          children: (0, _jsxRuntime.jsx)(_UiShellContent.UiShellContent, {
+            ...componentProps,
+            appContainerElement: appContainerElement,
+            appContainerScrollingMode: appContainerScrollingMode,
+            hasStandardAppContentPadding: hasStandardAppContentPadding,
+            initialVisibleSections: initialVisibleSections,
+            onError: onError,
+            optionalComponents: optionalComponents
+          })
+        })]
+      })
+    })
+  });
+};
+const MemoizedUiShell = exports.UiShell = (0, _react.memo)(UiShell);
+MemoizedUiShell.displayName = "UiShell";
+//# sourceMappingURL=UiShell.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiShell.cjs","names":["_react","require","_reactErrorBoundary","_CssBaseline","_OdysseyProvider","_UiShellContent","_UiShellProvider","_jsxRuntime","defaultComponentProps","exports","sideNavProps","undefined","topNavProps","UiShell","appBackgroundColor","appBackgroundContrastMode","appComponent","appRootElement","appContainerElement","appContainerScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","stylesRootElement","topNavBackgroundColor","subscribeToPropChanges","componentProps","setComponentProps","useState","useEffect","unsubscribe","jsx","ErrorBoundary","fallback","children","OdysseyProvider","emotionRootElement","shadowRootElement","hasScopedCssBaseline","jsxs","CssBaseline","UiShellProvider","UiShellContent","MemoizedUiShell","memo","displayName"],"sources":["../../../src/ui-shell/UiShell.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\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":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAOA,IAAAC,mBAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AAMA,IAAAK,gBAAA,GAAAL,OAAA;AAAuD,IAAAM,WAAA,GAAAN,OAAA;AA7BvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAqBO,MAAMO,qBAA+C,GAAAC,OAAA,CAAAD,qBAAA,GAAG;EAC7DE,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,GAAG,IAAAC,eAAQ,EAACzB,qBAAqB,CAAC;EAE3E,IAAA0B,gBAAS,EAAC,MAAM;IACd,MAAMC,WAAW,GAAGL,sBAAsB,CAAEC,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAIvB,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFiB,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXU,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACV,qBAAqB,EAAEK,sBAAsB,CAAC,CAAC;EAEnD,OACE,IAAAvB,WAAA,CAAA6B,GAAA,EAAClC,mBAAA,CAAAmC,aAAa;IAACC,QAAQ,EAAEtB,YAAa;IAACM,OAAO,EAAEA,OAAQ;IAAAiB,QAAA,EACtD,IAAAhC,WAAA,CAAA6B,GAAA,EAAChC,gBAAA,CAAAoC,eAAe;MACdC,kBAAkB,EAAEb,iBAAkB;MACtCc,iBAAiB,EAAEzB,cAAe;MAClC0B,oBAAoB,EAAE,KAAM;MAAAJ,QAAA,EAE5B,IAAAhC,WAAA,CAAAqC,IAAA,EAAC1C,mBAAA,CAAAmC,aAAa;QAACC,QAAQ,EAAEtB,YAAa;QAACM,OAAO,EAAEA,OAAQ;QAAAiB,QAAA,GACtD,IAAAhC,WAAA,CAAA6B,GAAA,EAACjC,YAAA,CAAA0C,WAAW,IAAE,CAAC,EACf,IAAAtC,WAAA,CAAA6B,GAAA,EAAC9B,gBAAA,CAAAwC,eAAe;UACdhC,kBAAkB,EAAEA,kBAAmB;UACvCC,yBAAyB,EAAEA,yBAA0B;UACrDY,sBAAsB,EAAEA,sBAAuB;UAC/CE,qBAAqB,EAAEA,qBAAsB;UAAAU,QAAA,EAE7C,IAAAhC,WAAA,CAAA6B,GAAA,EAAC/B,eAAA,CAAA0C,cAAc;YAAA,GACThB,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,MAAMsB,eAAe,GAAAvC,OAAA,CAAAI,OAAA,GAAG,IAAAoC,WAAI,EAACpC,OAAO,CAAC;AACrCmC,eAAe,CAACE,WAAW,GAAG,SAAS","ignoreList":[]}

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

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subComponentNames = exports.setStylesToMatchElement = exports.convertCamelCaseToKebabCase = exports.UiShellContent = void 0;
+var _ScopedCssBaseline2 = _interopRequireDefault(require("@mui/material/ScopedCssBaseline"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _reactErrorBoundary = require("react-error-boundary");
+var _index = require("./AppSwitcher/index.cjs");
+var _index2 = require("./SideNav/index.cjs");
+var _index3 = require("./TopNav/index.cjs");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+var _useScrollState = require("./useScrollState.cjs");
+var _UiShellProvider = require("./UiShellProvider.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const fullHeightStyles = {
+  height: "100%"
+};
+const emptySideNavItems = [];
+const StyledAppContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
+})(({
+  appBackgroundColor
+}) => ({
+  gridArea: "app-content",
+  backgroundColor: appBackgroundColor
+}));
+const StyledBannersContainer = (0, _styled.default)("div")({
+  gridArea: "banners"
+});
+const StyledAppSwitcherContainer = (0, _styled.default)("div")({
+  gridArea: "app-switcher"
+});
+const StyledSideNavContainer = (0, _styled.default)("div")({
+  gridArea: "side-nav"
+});
+const StyledShellContainer = (0, _styled.default)("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 = (0, _styled.default)("div")({
+  gridArea: "top-nav"
+});
+const subComponentNames = exports.subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
+const convertCamelCaseToKebabCase = string => string.replace(/([A-Z])/g, "-$1").toLowerCase();
+exports.convertCamelCaseToKebabCase = convertCamelCaseToKebabCase;
+const setStylesToMatchElement = ({
+  additionalStyles,
+  appContainerElement,
+  appContentReferenceElement
+}) => {
+  const boundingRect = appContentReferenceElement.getBoundingClientRect();
+  appContainerElement.style.setProperty("position", "absolute");
+  appContainerElement.style.setProperty("top", `${boundingRect.y}px`);
+  appContainerElement.style.setProperty("left", `${boundingRect.x}px`);
+  appContainerElement.style.setProperty("width", `${boundingRect.width}px`);
+  appContainerElement.style.setProperty("height", `${boundingRect.height}px`);
+  Object.entries(additionalStyles).forEach(([cssPropertyName, cssPropertyValue]) => {
+    appContainerElement.style.setProperty(convertCamelCaseToKebabCase(cssPropertyName), String(cssPropertyValue));
+  });
+};
+exports.setStylesToMatchElement = setStylesToMatchElement;
+const UiShellContent = ({
+  appContainerElement,
+  hasStandardAppContentPadding = true,
+  appContainerScrollingMode = "vertical",
+  initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
+  onError = console.error,
+  optionalComponents,
+  appSwitcherProps,
+  sideNavProps,
+  topNavProps
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    isContentScrolled,
+    scrollableContentRef: appContainerRef
+  } = (0, _useScrollState.useScrollState)(appContainerElement);
+  const sideNavContainerRef = (0, _react.useRef)(null);
+  const topNavContainerRef = (0, _react.useRef)(null);
+  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
+  const appContainerElementStyles = (0, _react.useMemo)(() => ({
+    ...(hasStandardAppContentPadding ? {
+      paddingBlock: odysseyDesignTokens.Spacing5 ?? null,
+      paddingInline: odysseyDesignTokens.Spacing8 ?? null
+    } : {}),
+    ...(appContainerScrollingMode === "horizontal" || appContainerScrollingMode === "both" ? {
+      overflowX: "auto"
+    } : {
+      overflowX: "hidden"
+    }),
+    ...(appContainerScrollingMode === "vertical" || appContainerScrollingMode === "both" ? {
+      overflowY: "auto"
+    } : {
+      overflowY: "hidden"
+    })
+  }), [hasStandardAppContentPadding, appContainerScrollingMode, odysseyDesignTokens]);
+  (0, _react.useEffect)(() => {
+    if (appContainerRef.current && appContainerElement) {
+      let animationFrameId;
+      const updateStyles = () => {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = requestAnimationFrame(() => {
+          if (appContainerRef.current) {
+            setStylesToMatchElement({
+              additionalStyles: appContainerElementStyles,
+              appContentReferenceElement: appContainerRef.current,
+              appContainerElement
+            });
+          }
+        });
+      };
+      const sideNavElement = sideNavContainerRef.current;
+      sideNavElement?.addEventListener("transitionend", updateStyles);
+      const observer = new ResizeObserver(updateStyles);
+      observer.observe(appContainerRef.current);
+      if (sideNavElement) {
+        observer.observe(sideNavElement);
+      }
+      if (topNavContainerRef.current) {
+        observer.observe(topNavContainerRef.current);
+      }
+      updateStyles();
+      return () => {
+        observer.disconnect();
+        sideNavElement?.removeEventListener("transitionend", updateStyles);
+      };
+    }
+    return () => {};
+  }, [appContainerElement, appContainerElementStyles, appContainerRef]);
+  return (0, _jsxRuntime.jsxs)(StyledShellContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [(0, _jsxRuntime.jsx)(StyledBannersContainer, {
+      children: optionalComponents?.banners
+    }), (0, _jsxRuntime.jsx)(StyledAppSwitcherContainer, {
+      children: (0, _jsxRuntime.jsxs)(_ScopedCssBaseline2.default, {
+        sx: fullHeightStyles,
+        children: [initialVisibleSections?.includes("AppSwitcher") && !appSwitcherProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: (0, _jsxRuntime.jsx)(_index.AppSwitcher, {
+            isLoading: true,
+            appIcons: [],
+            selectedAppName: ""
+          })
+        }), appSwitcherProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: (0, _jsxRuntime.jsx)(_index.AppSwitcher, {
+            ...appSwitcherProps
+          })
+        })]
+      })
+    }), (0, _jsxRuntime.jsx)(StyledSideNavContainer, {
+      ref: sideNavContainerRef,
+      children: (0, _jsxRuntime.jsxs)(_ScopedCssBaseline2.default, {
+        sx: fullHeightStyles,
+        children: [initialVisibleSections?.includes("SideNav") && sideNavProps === undefined && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: (0, _jsxRuntime.jsx)(_index2.SideNav, {
+            isLoading: true,
+            appName: "",
+            sideNavItems: emptySideNavItems
+          })
+        }), sideNavProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: (0, _jsxRuntime.jsx)(_index2.SideNav, {
+            ...sideNavProps,
+            ...(sideNavProps.hasCustomFooter && optionalComponents?.sideNavFooter ? {
+              footerComponent: optionalComponents.sideNavFooter,
+              footerItems: undefined,
+              hasCustomFooter: sideNavProps.hasCustomFooter
+            } : {
+              footerItems: sideNavProps.footerItems,
+              hasCustomFooter: false
+            })
+          })
+        })]
+      })
+    }), (0, _jsxRuntime.jsx)(StyledTopNavContainer, {
+      ref: topNavContainerRef,
+      children: (0, _jsxRuntime.jsxs)(_ScopedCssBaseline2.default, {
+        sx: fullHeightStyles,
+        children: [initialVisibleSections?.includes("TopNav") && topNavProps === undefined && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: (0, _jsxRuntime.jsx)(_index3.TopNav, {
+            leftSideComponent: optionalComponents?.topNavLeftSide,
+            rightSideComponent: optionalComponents?.topNavRightSide
+          })
+        }), topNavProps && (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+          fallback: null,
+          onError: onError,
+          children: (0, _jsxRuntime.jsx)(_index3.TopNav, {
+            ...topNavProps,
+            isScrolled: isContentScrolled,
+            leftSideComponent: optionalComponents?.topNavLeftSide,
+            rightSideComponent: optionalComponents?.topNavRightSide
+          })
+        })]
+      })
+    }), (0, _jsxRuntime.jsx)(StyledAppContainer, {
+      appBackgroundColor: uiShellContext?.appBackgroundColor,
+      tabIndex: 0,
+      ref: appContainerRef
+    })]
+  });
+};
+const MemoizedUiShellContent = exports.UiShellContent = (0, _react.memo)(UiShellContent);
+MemoizedUiShellContent.displayName = "UiShellContent";
+//# sourceMappingURL=UiShellContent.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiShellContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactErrorBoundary","_index","_index2","_index3","_OdysseyDesignTokensContext","_useScrollState","_UiShellProvider","_jsxRuntime","e","__esModule","default","fullHeightStyles","height","emptySideNavItems","StyledAppContainer","styled","shouldForwardProp","prop","appBackgroundColor","gridArea","backgroundColor","StyledBannersContainer","StyledAppSwitcherContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","width","StyledTopNavContainer","subComponentNames","exports","convertCamelCaseToKebabCase","string","replace","toLowerCase","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","boundingRect","getBoundingClientRect","style","setProperty","y","x","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","UiShellContent","hasStandardAppContentPadding","appContainerScrollingMode","initialVisibleSections","onError","console","error","optionalComponents","appSwitcherProps","sideNavProps","topNavProps","useOdysseyDesignTokens","isContentScrolled","scrollableContentRef","appContainerRef","useScrollState","sideNavContainerRef","useRef","topNavContainerRef","uiShellContext","useUiShellContext","appContainerElementStyles","useMemo","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","useEffect","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","sideNavElement","addEventListener","observer","ResizeObserver","observe","disconnect","removeEventListener","jsxs","children","jsx","banners","_ScopedCssBaseline2","sx","includes","ErrorBoundary","fallback","AppSwitcher","isLoading","appIcons","selectedAppName","ref","undefined","SideNav","appName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","TopNav","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","isScrolled","tabIndex","MemoizedUiShellContent","memo","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 {\n  CSSProperties,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactElement,\n} 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) =>\n    prop !== \"appBackgroundColor\" && 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   * When passed, the app is expected to render into this element, not the Shadow DOM. UI Shell will position this element appropriately as if it was rendered in the app content area 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\nexport const convertCamelCaseToKebabCase = (string: string) =>\n  string.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\nexport const setStylesToMatchElement = ({\n  additionalStyles,\n  appContainerElement,\n  appContentReferenceElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n}) => {\n  const boundingRect = appContentReferenceElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\"top\", `${boundingRect.y}px`);\n  appContainerElement.style.setProperty(\"left\", `${boundingRect.x}px`);\n  appContainerElement.style.setProperty(\"width\", `${boundingRect.width}px`);\n  appContainerElement.style.setProperty(\"height\", `${boundingRect.height}px`);\n\n  (\n    Object.entries(additionalStyles) as Array<\n      [\n        keyof typeof additionalStyles,\n        (typeof additionalStyles)[keyof typeof additionalStyles],\n      ]\n    >\n  ).forEach(([cssPropertyName, cssPropertyValue]) => {\n    appContainerElement.style.setProperty(\n      convertCamelCaseToKebabCase(cssPropertyName),\n      String(cssPropertyValue),\n    );\n  });\n};\n\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 appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      ...(hasStandardAppContentPadding\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5 ?? null,\n            paddingInline: odysseyDesignTokens.Spacing8 ?? null,\n          }\n        : {}),\n      ...(appContainerScrollingMode === \"horizontal\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n      ...(appContainerScrollingMode === \"vertical\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"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              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: appContainerRef.current,\n              appContainerElement,\n            });\n          }\n        });\n      };\n\n      // This element might have changed from `.current`, so it's important to keep track of the old one when we attach event listeners.\n      const sideNavElement = sideNavContainerRef.current;\n\n      sideNavElement?.addEventListener(\"transitionend\", updateStyles);\n\n      // Setup a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n      observer.observe(appContainerRef.current);\n\n      if (sideNavElement) {\n        observer.observe(sideNavElement);\n      }\n\n      if (topNavContainerRef.current) {\n        observer.observe(topNavContainerRef.current);\n      }\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n        sideNavElement?.removeEventListener(\"transitionend\", updateStyles);\n      };\n    }\n    return () => {};\n  }, [appContainerElement, appContainerElementStyles, appContainerRef]);\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/cjs/ui-shell/UiShellProvider.cjs

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUiShellContext = exports.UiShellProvider = void 0;
+var _react = require("react");
+var _createContrastColors = require("../createContrastColors.cjs");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * 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.
+ */
+
+const UiShellContext = (0, _react.createContext)(undefined);
+const useUiShellContext = () => {
+  return (0, _react.useContext)(UiShellContext);
+};
+exports.useUiShellContext = useUiShellContext;
+const UiShellProvider = ({
+  appBackgroundColor,
+  appBackgroundContrastMode = "lowContrast",
+  sideNavBackgroundColor,
+  topNavBackgroundColor,
+  children
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const defaultedSideNavBackgroundColor = sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;
+  const sideNavContrastColors = defaultedSideNavBackgroundColor !== odysseyDesignTokens.HueNeutralWhite ? (0, _createContrastColors.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 = (0, _react.useMemo)(() => ({
+    appBackgroundColor: appContentBackgroundColor,
+    sideNavBackgroundColor: sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,
+    sideNavContrastColors,
+    topNavBackgroundColor: topNavColor
+  }), [appContentBackgroundColor, odysseyDesignTokens, sideNavBackgroundColor, sideNavContrastColors, topNavColor]);
+  return (0, _jsxRuntime.jsx)(UiShellContext.Provider, {
+    value: memoizedContextValue,
+    children: children
+  });
+};
+const MemoizedUiShellProvider = exports.UiShellProvider = (0, _react.memo)(UiShellProvider);
+//# sourceMappingURL=UiShellProvider.cjs.map