@okta/odyssey-contribution-tooling 1.47.0

package/dist/esm/ui-shell/TopNav/TopNavListItem.js

@@ -0,0 +1,131 @@
+/*!
+ * 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, useCallback } from "react";
+import { Link } from "../../Link.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTopNavItemLabelContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  flexWrap: "wrap",
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading
+}));
+const StyledTopNavListItem = styled("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 = styled("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 = useOdysseyDesignTokens();
+  const topNavItemContentKeyHandler = useCallback(event => {
+    if (event?.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick?.(event);
+    }
+  }, [onClick]);
+  return _jsxs(StyledTopNavListItem, {
+    "aria-disabled": isDisabled,
+    id: id,
+    isDisabled: isDisabled,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [isDisabled && _jsx(StyledNavItemContentClickContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    }), !isDisabled && href && _jsx(Link, {
+      href: href,
+      onClick: onClick,
+      target: target,
+      children: _jsx(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    }), !isDisabled && !href && _jsx(StyledNavItemContentClickContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: onClick,
+      onKeyDown: topNavItemContentKeyHandler,
+      role: "button",
+      tabIndex: 0,
+      children: _jsx(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    })]
+  });
+};
+const MemoizedTopNavListItem = memo(TopNavListItem);
+MemoizedTopNavListItem.displayName = "TopNavListItem";
+export { MemoizedTopNavListItem as TopNavListItem };
+//# sourceMappingURL=TopNavListItem.js.map

package/dist/esm/ui-shell/TopNav/TopNavListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavListItem.js","names":["styled","memo","useCallback","Link","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","StyledTopNavItemLabelContainer","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","topNavItemContentKeyHandler","event","key","preventDefault","stopPropagation","children","onKeyDown","role","tabIndex","MemoizedTopNavListItem","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  KeyboardEventHandler,\n  memo,\n  MouseEventHandler,\n  useCallback,\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  isDisabled?: boolean;\n  odysseyDesignTokens: DesignTokens;\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/esm/ui-shell/TopNav/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,aAAa","ignoreList":[]}

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

@@ -0,0 +1,114 @@
+/*!
+ * 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 { memo, useEffect, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { OdysseyProvider } from "../OdysseyProvider.js";
+import { NarrowUiShellContent } from "./NarrowUiShellContent.js";
+import { UiShellProvider } from "./UiShellProvider.js";
+import { useUiShellBreakpoints } from "./useUiShellBreakpoints.js";
+import { WideUiShellContent } from "./WideUiShellContent.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const defaultComponentProps = {
+  sideNavProps: undefined,
+  topNavProps: undefined
+};
+const errorComponent = _jsx("div", {
+  "data-error": true
+});
+const UiShell = ({
+  appBackgroundColor,
+  appBackgroundContrastMode,
+  appElement,
+  appElementScrollingMode,
+  breakpointConfig,
+  closeSideNavMenu,
+  hasStandardAppContentPadding,
+  initialVisibleSections,
+  onError = console.error,
+  onSubscriptionCreated,
+  optionalComponents,
+  sideNavBackgroundColor,
+  sideNavBackgroundContrastColor,
+  subscribeToCloseRightSideMenu,
+  subscribeToCloseSideNavMenu,
+  subscribeToPropChanges,
+  topNavBackgroundColor,
+  uiShellAppElement,
+  uiShellStylesElement
+}) => {
+  const [componentProps, setComponentProps] = useState(defaultComponentProps);
+  const activeBreakpoint = useUiShellBreakpoints(breakpointConfig);
+  useEffect(() => {
+    const unsubscribe = subscribeToPropChanges(componentProps => {
+      setComponentProps(componentProps || defaultComponentProps);
+    });
+    onSubscriptionCreated();
+    return () => {
+      unsubscribe();
+    };
+  }, [onSubscriptionCreated, subscribeToPropChanges]);
+  return activeBreakpoint === "none" ? null : _jsx(ErrorBoundary, {
+    fallback: errorComponent,
+    onError: onError,
+    children: _jsx(OdysseyProvider, {
+      emotionRootElement: uiShellStylesElement,
+      hasCssBaseline: true,
+      shadowRootElement: uiShellAppElement,
+      children: _jsx(ErrorBoundary, {
+        fallback: errorComponent,
+        onError: onError,
+        children: _jsxs(UiShellProvider, {
+          appBackgroundColor: appBackgroundColor,
+          appBackgroundContrastMode: appBackgroundContrastMode,
+          closeSideNavMenu: closeSideNavMenu,
+          sideNavBackgroundColor: sideNavBackgroundColor,
+          sideNavBackgroundContrastColor: sideNavBackgroundContrastColor,
+          subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
+          subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
+          topNavBackgroundColor: topNavBackgroundColor,
+          children: [activeBreakpoint === "narrow" && _jsx(NarrowUiShellContent, {
+            ...componentProps,
+            appElement: appElement,
+            appElementScrollingMode: appElementScrollingMode,
+            hasSideNavProps: Boolean(componentProps.sideNavProps),
+            hasStandardAppContentPadding: hasStandardAppContentPadding,
+            initialVisibleSections: initialVisibleSections,
+            onError: onError,
+            optionalComponents: optionalComponents
+          }), (activeBreakpoint === "medium" || activeBreakpoint === "wide") && _jsx(WideUiShellContent, {
+            ...componentProps,
+            ...{
+              sideNavProps: {
+                ...componentProps.sideNavProps,
+                hasSessionStorageState: activeBreakpoint === "wide",
+                isCollapsed: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsed,
+                isCollapsible: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsible
+              }
+            },
+            appElement: appElement,
+            appElementScrollingMode: appElementScrollingMode,
+            hasSideNavProps: Boolean(componentProps.sideNavProps),
+            hasStandardAppContentPadding: hasStandardAppContentPadding,
+            initialVisibleSections: initialVisibleSections,
+            onError: onError,
+            optionalComponents: optionalComponents
+          })]
+        })
+      })
+    })
+  });
+};
+const MemoizedUiShell = memo(UiShell);
+MemoizedUiShell.displayName = "UiShell";
+export { MemoizedUiShell as UiShell };
+//# sourceMappingURL=UiShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","OdysseyProvider","NarrowUiShellContent","UiShellProvider","useUiShellBreakpoints","WideUiShellContent","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","errorComponent","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","breakpointConfig","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","sideNavBackgroundContrastColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","activeBreakpoint","unsubscribe","fallback","children","emotionRootElement","hasCssBaseline","shadowRootElement","hasSideNavProps","Boolean","hasSessionStorageState","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, type SetStateAction, useEffect, useState } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport { MessageBus } from \"../tools/createMessageBus.js\";\nimport { type ReactRootElements } from \"../web-component/createReactRootElements.js\";\nimport { NarrowUiShellContent } from \"./NarrowUiShellContent.js\";\nimport {\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellProvider, UiShellProviderProps } from \"./UiShellProvider.js\";\nimport {\n  UiShellBreakpointConfig,\n  useUiShellBreakpoints,\n} from \"./useUiShellBreakpoints.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nconst errorComponent = <div data-error />;\n\nexport type UiShellProps = {\n  /**\n   * Customized breakpoints for UI Shell.\n   *\n   * The defaults are set for you. Pass these only if your app doesn't work properly with the defaults (like Admin).\n   */\n  breakpointConfig?: UiShellBreakpointConfig;\n  /**\n   * Notifies when subscribed to prop changes.\n   *\n   * UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.\n   */\n  onSubscriptionCreated: () => void;\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for state changes.\n   *\n   * The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.\n   */\n  subscribeToPropChanges: MessageBus<\n    SetStateAction<UiShellNavComponentProps>\n  >[\"subscribe\"];\n  /**\n   * Element inside UI Shell's React root component renders into. If using a web component, this is going to exist inside it.\n   */\n  uiShellAppElement: ReactRootElements[\"appRootElement\"];\n  /**\n   * Typically, this is your `<head>` element. If using a web component, you need to create one yourself as Shadow DOM's don't have a `<head>`.\n   */\n  uiShellStylesElement: ReactRootElements[\"stylesRootElement\"];\n} & UiShellProviderProps &\n  Pick<\n    UiShellContentProps,\n    | \"appElement\"\n    | \"appElementScrollingMode\"\n    | \"hasStandardAppContentPadding\"\n    | \"initialVisibleSections\"\n    | \"onError\"\n    | \"optionalComponents\"\n  >;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement,\n  appElementScrollingMode,\n  breakpointConfig,\n  closeSideNavMenu,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  sideNavBackgroundContrastColor,\n  subscribeToCloseRightSideMenu,\n  subscribeToCloseSideNavMenu,\n  subscribeToPropChanges,\n  topNavBackgroundColor,\n  uiShellAppElement,\n  uiShellStylesElement,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  const activeBreakpoint = useUiShellBreakpoints(breakpointConfig);\n\n  useEffect(() => {\n    const unsubscribe = subscribeToPropChanges((componentProps) => {\n      // If for some reason nothing is passed as `componentProps`, we fallback on `defaultComponentProps` as a safety mechanism to ensure nothing breaks.\n      setComponentProps(componentProps || defaultComponentProps);\n    });\n\n    onSubscriptionCreated();\n\n    return () => {\n      unsubscribe();\n    };\n  }, [onSubscriptionCreated, subscribeToPropChanges]);\n\n  return activeBreakpoint === \"none\" ? null : (\n    <ErrorBoundary fallback={errorComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={uiShellStylesElement}\n        hasCssBaseline\n        shadowRootElement={uiShellAppElement}\n      >\n        <ErrorBoundary fallback={errorComponent} onError={onError}>\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            closeSideNavMenu={closeSideNavMenu}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            sideNavBackgroundContrastColor={sideNavBackgroundContrastColor}\n            subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n            subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"narrow\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasSideNavProps={Boolean(componentProps.sideNavProps)}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n\n            {(activeBreakpoint === \"medium\" || activeBreakpoint === \"wide\") && (\n              <WideUiShellContent\n                {...{\n                  ...componentProps,\n                  ...{\n                    sideNavProps: {\n                      ...componentProps.sideNavProps,\n                      hasSessionStorageState: activeBreakpoint === \"wide\",\n                      isCollapsed:\n                        activeBreakpoint === \"medium\" ||\n                        componentProps.sideNavProps?.isCollapsed,\n                      isCollapsible:\n                        activeBreakpoint === \"medium\" ||\n                        componentProps.sideNavProps?.isCollapsible,\n                      // We have to use `as` because sideNavProps expects you to have `sideNavItems` defined even though it had to be passed in `...componentProps.sideNavProps`.\n                    } as typeof componentProps.sideNavProps,\n                  },\n                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasSideNavProps={Boolean(componentProps.sideNavProps)}\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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAuBC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACtE,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,eAAe,QAAQ,uBAAuB;AAGvD,SAASC,oBAAoB,QAAQ,2BAA2B;AAKhE,SAASC,eAAe,QAA8B,sBAAsB;AAC5E,SAEEC,qBAAqB,QAChB,4BAA4B;AACnC,SAASC,kBAAkB,QAAQ,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE7D,OAAO,MAAMC,qBAA+C,GAAG;EAC7DC,YAAY,EAAEC,SAAS;EACvBC,WAAW,EAAED;AACf,CAAU;AAEV,MAAME,cAAc,GAAGP,IAAA;EAAK;AAAU,CAAE,CAAC;AAkDzC,MAAMQ,OAAO,GAAGA,CAAC;EACfC,kBAAkB;EAClBC,yBAAyB;EACzBC,UAAU;EACVC,uBAAuB;EACvBC,gBAAgB;EAChBC,gBAAgB;EAChBC,4BAA4B;EAC5BC,sBAAsB;EACtBC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,qBAAqB;EACrBC,kBAAkB;EAClBC,sBAAsB;EACtBC,8BAA8B;EAC9BC,6BAA6B;EAC7BC,2BAA2B;EAC3BC,sBAAsB;EACtBC,qBAAqB;EACrBC,iBAAiB;EACjBC;AACY,CAAC,KAAK;EAClB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGvC,QAAQ,CAACW,qBAAqB,CAAC;EAE3E,MAAM6B,gBAAgB,GAAGnC,qBAAqB,CAACgB,gBAAgB,CAAC;EAEhEtB,SAAS,CAAC,MAAM;IACd,MAAM0C,WAAW,GAAGP,sBAAsB,CAAEI,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAI3B,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFiB,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXa,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACb,qBAAqB,EAAEM,sBAAsB,CAAC,CAAC;EAEnD,OAAOM,gBAAgB,KAAK,MAAM,GAAG,IAAI,GACvChC,IAAA,CAACP,aAAa;IAACyC,QAAQ,EAAE3B,cAAe;IAACU,OAAO,EAAEA,OAAQ;IAAAkB,QAAA,EACxDnC,IAAA,CAACN,eAAe;MACd0C,kBAAkB,EAAEP,oBAAqB;MACzCQ,cAAc;MACdC,iBAAiB,EAAEV,iBAAkB;MAAAO,QAAA,EAErCnC,IAAA,CAACP,aAAa;QAACyC,QAAQ,EAAE3B,cAAe;QAACU,OAAO,EAAEA,OAAQ;QAAAkB,QAAA,EACxDjC,KAAA,CAACN,eAAe;UACda,kBAAkB,EAAEA,kBAAmB;UACvCC,yBAAyB,EAAEA,yBAA0B;UACrDI,gBAAgB,EAAEA,gBAAiB;UACnCQ,sBAAsB,EAAEA,sBAAuB;UAC/CC,8BAA8B,EAAEA,8BAA+B;UAC/DC,6BAA6B,EAAEA,6BAA8B;UAC7DC,2BAA2B,EAAEA,2BAA4B;UACzDE,qBAAqB,EAAEA,qBAAsB;UAAAQ,QAAA,GAE5CH,gBAAgB,KAAK,QAAQ,IAC5BhC,IAAA,CAACL,oBAAoB;YAAA,GACfmC,cAAc;YAClBnB,UAAU,EAAEA,UAAW;YACvBC,uBAAuB,EAAEA,uBAAwB;YACjD2B,eAAe,EAAEC,OAAO,CAACV,cAAc,CAAC1B,YAAY,CAAE;YACtDW,4BAA4B,EAAEA,4BAA6B;YAC3DC,sBAAsB,EAAEA,sBAAuB;YAC/CC,OAAO,EAAEA,OAAQ;YACjBI,kBAAkB,EAAEA;UAAmB,CACxC,CACF,EAEA,CAACW,gBAAgB,KAAK,QAAQ,IAAIA,gBAAgB,KAAK,MAAM,KAC5DhC,IAAA,CAACF,kBAAkB;YAEf,GAAGgC,cAAc;YACjB,GAAG;cACD1B,YAAY,EAAE;gBACZ,GAAG0B,cAAc,CAAC1B,YAAY;gBAC9BqC,sBAAsB,EAAET,gBAAgB,KAAK,MAAM;gBACnDU,WAAW,EACTV,gBAAgB,KAAK,QAAQ,IAC7BF,cAAc,CAAC1B,YAAY,EAAEsC,WAAW;gBAC1CC,aAAa,EACXX,gBAAgB,KAAK,QAAQ,IAC7BF,cAAc,CAAC1B,YAAY,EAAEuC;cAEjC;YACF,CAAC;YAEHhC,UAAU,EAAEA,UAAW;YACvBC,uBAAuB,EAAEA,uBAAwB;YACjD2B,eAAe,EAAEC,OAAO,CAACV,cAAc,CAAC1B,YAAY,CAAE;YACtDW,4BAA4B,EAAEA,4BAA6B;YAC3DC,sBAAsB,EAAEA,sBAAuB;YAC/CC,OAAO,EAAEA,OAAQ;YACjBI,kBAAkB,EAAEA;UAAmB,CACxC,CACF;QAAA,CACc;MAAC,CACL;IAAC,CACD;EAAC,CACL,CAChB;AACH,CAAC;AAED,MAAMuB,eAAe,GAAGtD,IAAI,CAACkB,OAAO,CAAC;AACrCoC,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIpC,OAAO","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiShellProvider.js","names":["createContext","memo","useContext","useMemo","generateContrastColors","useOdysseyDesignTokens","createMessageBus","jsx","_jsx","defaultCloseSideNavMessageBus","defaultSubscribeToCloseRightSideMenu","UiShellContext","undefined","useUiShellContext","UiShellProvider","appBackgroundColor","appBackgroundContrastMode","children","closeSideNavMenu","sideNavBackgroundColor","sideNavBackgroundContrastColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","topNavBackgroundColor","odysseyDesignTokens","defaultedSideNavBackgroundColor","HueNeutralWhite","sideNavContrastColors","backgroundColor","backgroundContrastColor","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\";\n\nimport {\n  ContrastColors,\n  generateContrastColors,\n} from \"../createContrastColors.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { createMessageBus, MessageBus } from \"../tools/createMessageBus.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\n\nexport const defaultCloseSideNavMessageBus = createMessageBus();\nexport const defaultSubscribeToCloseRightSideMenu = () => () => {};\n\nexport type UiShellColors = {\n  /**\n   * Custom background color for the app content area.\n   */\n  appBackgroundColor: string;\n  /**\n   * Custom background color for the side nav area.\n   */\n  sideNavBackgroundColor: string;\n  /**\n   * Custom color for fonts and other contrasted colors in the side nav area. Other contrast colors are derived from this one.\n   *\n   * If not passed, it gets computed from Odyssey.\n   */\n  sideNavBackgroundContrastColor?: string;\n  sideNavContrastColors?: ContrastColors;\n  /**\n   * 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 right-side menu.\n   */\n  subscribeToCloseRightSideMenu: 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 side nav.\n   */\n  subscribeToCloseSideNavMenu: 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  sideNavBackgroundContrastColor,\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          backgroundColor:\n            sideNavBackgroundColor || defaultedSideNavBackgroundColor,\n          backgroundContrastColor: sideNavBackgroundContrastColor,\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;AAEd,SAEEC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,gBAAgB,QAAoB,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG5E,OAAO,MAAMC,6BAA6B,GAAGH,gBAAgB,CAAC,CAAC;AAC/D,OAAO,MAAMI,oCAAoC,GAAGA,CAAA,KAAM,MAAM,CAAC,CAAC;AAyClE,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,8BAA8B;EAC9BC,6BAA6B;EAC7BC,2BAA2B;EAC3BC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAGnB,sBAAsB,CAAC,CAAC;EACpD,MAAMoB,+BAA+B,GACnCN,sBAAsB,IAAIK,mBAAmB,CAACE,eAAe;EAE/D,MAAMC,qBAAqB,GACzBF,+BAA+B,KAAKD,mBAAmB,CAACE,eAAe,GACnEtB,sBAAsB,CAAC;IACrBwB,eAAe,EACbT,sBAAsB,IAAIM,+BAA+B;IAC3DI,uBAAuB,EAAET,8BAA8B;IACvDI;EACF,CAAC,CAAC,GACFZ,SAAS;EAEf,MAAMkB,4BAA4B,GAChCd,yBAAyB,KAAK,cAAc;EAE9C,MAAMe,+BAA+B,GAAGD,4BAA4B,GAChEN,mBAAmB,CAACE,eAAe,GACnCF,mBAAmB,CAACQ,YAAY;EAEpC,MAAMC,WAAW,GAAGV,qBAAqB,IAAIQ,+BAA+B;EAE5E,MAAMG,yBAAyB,GAC7BnB,kBAAkB,IAAIgB,+BAA+B;EAEvD,MAAMI,oBAAoB,GAAGhC,OAAO,CAClC,OAAO;IACLY,kBAAkB,EAAEmB,yBAAyB;IAC7ChB,gBAAgB,EACdA,gBAAgB,IAAIT,6BAA6B,CAAC2B,OAAO;IAC3DjB,sBAAsB,EACpBA,sBAAsB,IAAIK,mBAAmB,CAACE,eAAe;IAC/DC,qBAAqB;IACrBL,2BAA2B,EACzBA,2BAA2B,IAAIb,6BAA6B,CAAC4B,SAAS;IACxEhB,6BAA6B,EAC3BA,6BAA6B,IAAIX,oCAAoC;IACvEa,qBAAqB,EAAEU;EACzB,CAAC,CAAC,EACF,CACEC,yBAAyB,EACzBV,mBAAmB,CAACE,eAAe,EACnCR,gBAAgB,EAChBC,sBAAsB,EACtBQ,qBAAqB,EACrBN,6BAA6B,EAC7BC,2BAA2B,EAC3BW,WAAW,CAEf,CAAC;EAED,OACEzB,IAAA,CAACG,cAAc,CAAC2B,QAAQ;IAACC,KAAK,EAAEJ,oBAAqB;IAAAlB,QAAA,EAClDA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAMuB,uBAAuB,GAAGvC,IAAI,CAACa,eAAe,CAAC;AAErD,SAAS0B,uBAAuB,IAAI1B,eAAe","ignoreList":[]}

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

@@ -0,0 +1,172 @@
+/*!
+ * 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 { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { AppSwitcher } from "./AppSwitcher/index.js";
+import { InnerAppContainer } from "./InnerAppContainer.js";
+import { SideNav } from "./SideNav/index.js";
+import { TopNav } from "./TopNav/index.js";
+import { TURN_OFF_APP_SWITCHER } from "./uiShellContentTypes.js";
+import { useUiShellContext } from "./UiShellProvider.js";
+import { emptySideNavItems } from "./uiShellSharedConstants.js";
+import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShellAppArea.js";
+import { useScrollState } from "./useScrollState.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const appSwitcherDefaultAppIcons = [];
+const StyledAppContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
+})(({
+  appBackgroundColor
+}) => ({
+  backgroundColor: appBackgroundColor,
+  gridArea: "app-content",
+  position: "relative"
+}));
+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,
+  hasSideNavProps,
+  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, {
+          appIcons: appSwitcherDefaultAppIcons,
+          isLoading: true,
+          selectedAppName: ""
+        })
+      }), appSwitcherProps && appSwitcherProps !== TURN_OFF_APP_SWITCHER && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(AppSwitcher, {
+          ...appSwitcherProps
+        })
+      })]
+    }), _jsxs(StyledSideNavContainer, {
+      ref: sideNavContainerRef,
+      children: [initialVisibleSections?.includes("SideNav") && !hasSideNavProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(SideNav, {
+          isLoading: true,
+          sideNavItems: emptySideNavItems
+        })
+      }), hasSideNavProps && 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,
+          leftSideComponent: optionalComponents?.topNavLeftSide,
+          rightSideComponent: optionalComponents?.topNavRightSide
+        })
+      })]
+    }), _jsx(StyledAppContainer, {
+      appBackgroundColor: uiShellContext?.appBackgroundColor,
+      ref: uiShellAppAreaRef,
+      tabIndex: 0,
+      children: _jsx(InnerAppContainer, {
+        isContentScrolled: isContentScrolled
+      })
+    })]
+  });
+};
+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","useOdysseyDesignTokens","AppSwitcher","InnerAppContainer","SideNav","TopNav","TURN_OFF_APP_SWITCHER","useUiShellContext","emptySideNavItems","useMatchAppElementToUiShellAppArea","useScrollState","jsx","_jsx","jsxs","_jsxs","appSwitcherDefaultAppIcons","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","gridArea","position","StyledAppSwitcherContainer","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","WideUiShellContent","appElement","appElementScrollingMode","appSwitcherProps","hasStandardAppContentPadding","hasSideNavProps","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","uiShellContext","isContentScrolled","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","parentContainerRef","paddingMode","uiShellResizableRefs","ref","children","banners","includes","fallback","appIcons","isLoading","selectedAppName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","undefined","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","MemoizedWideUiShellContent","displayName"],"sources":["../../../src/ui-shell/WideUiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { AppSwitcherAppIconData } from \"./AppSwitcher/AppSwitcherApp.js\";\nimport { AppSwitcher } from \"./AppSwitcher/index.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport { SideNav } from \"./SideNav/index.js\";\nimport { TopNav } from \"./TopNav/index.js\";\nimport {\n  TURN_OFF_APP_SWITCHER,\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { emptySideNavItems } from \"./uiShellSharedConstants.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { useScrollState } from \"./useScrollState.js\";\n\nconst appSwitcherDefaultAppIcons = [] satisfies AppSwitcherAppIconData[];\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  backgroundColor: appBackgroundColor,\n  gridArea: \"app-content\",\n  position: \"relative\",\n}));\n\nconst StyledAppSwitcherContainer = styled(\"div\")({\n  gridArea: \"app-switcher\",\n});\n\nconst StyledBannersContainer = styled(\"div\")({\n  gridArea: \"banners\",\n});\n\nconst StyledSideNavContainer = styled(\"div\")({\n  gridArea: \"side-nav\",\n});\n\nconst StyledShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners banners banners\"\n    \"app-switcher side-nav top-nav\"\n    \"app-switcher side-nav app-content\"\n  `,\n  gridTemplateColumns: \"auto auto 1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNavContainer = styled(\"div\")({\n  gridArea: \"top-nav\",\n});\n\nexport type WideUiShellContentProps = UiShellNavComponentProps &\n  UiShellContentProps;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst WideUiShellContent = ({\n  appElement,\n  appElementScrollingMode,\n  appSwitcherProps,\n  hasStandardAppContentPadding = true,\n  hasSideNavProps,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: WideUiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  const { isContentScrolled } = useScrollState(appElement);\n\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellAppAreaRef = useRef<HTMLDivElement>(null);\n\n  const { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n    appElement,\n    appElementScrollingMode,\n    paddingMode: hasStandardAppContentPadding ? \"comfortable\" : \"none\",\n    uiShellAppAreaRef,\n    uiShellResizableRefs: [\n      sideNavContainerRef,\n      topNavContainerRef,\n      uiShellAppAreaRef,\n    ],\n  });\n\n  return (\n    <StyledShellContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      ref={parentContainerRef}\n    >\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledAppSwitcherContainer>\n        {\n          /* If AppSwitcher should be initially visible and we have not yet received props, render AppSwitcher in the loading state */\n          initialVisibleSections?.includes(\"AppSwitcher\") &&\n            !appSwitcherProps && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <AppSwitcher\n                  appIcons={appSwitcherDefaultAppIcons}\n                  isLoading\n                  selectedAppName=\"\"\n                />\n              </ErrorBoundary>\n            )\n        }\n\n        {appSwitcherProps && appSwitcherProps !== TURN_OFF_APP_SWITCHER && (\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\") && !hasSideNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <SideNav isLoading sideNavItems={emptySideNavItems} />\n            </ErrorBoundary>\n          )\n        }\n\n        {hasSideNavProps && sideNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <SideNav\n              {...{\n                ...sideNavProps,\n                ...(sideNavProps.hasCustomFooter &&\n                optionalComponents?.sideNavFooter\n                  ? {\n                      footerComponent: optionalComponents.sideNavFooter,\n                      footerItems: undefined,\n                      hasCustomFooter: sideNavProps.hasCustomFooter,\n                    }\n                  : {\n                      footerItems: sideNavProps.footerItems,\n                      hasCustomFooter: false,\n                    }),\n              }}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledSideNavContainer>\n\n      <StyledTopNavContainer ref={topNavContainerRef}>\n        {\n          /* If TopNav should be initially visible and we have not yet received props, render Topnav with minimal inputs */\n          initialVisibleSections?.includes(\"TopNav\") &&\n            topNavProps === undefined && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <TopNav\n                  leftSideComponent={optionalComponents?.topNavLeftSide}\n                  rightSideComponent={optionalComponents?.topNavRightSide}\n                />\n              </ErrorBoundary>\n            )\n        }\n\n        {topNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <TopNav\n              {...topNavProps}\n              leftSideComponent={optionalComponents?.topNavLeftSide}\n              rightSideComponent={optionalComponents?.topNavRightSide}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        ref={uiShellAppAreaRef}\n        tabIndex={0}\n      >\n        <InnerAppContainer isContentScrolled={isContentScrolled} />\n      </StyledAppContainer>\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedWideUiShellContent = memo(WideUiShellContent);\nMemoizedWideUiShellContent.displayName = \"WideUiShellContent\";\n\nexport { MemoizedWideUiShellContent as WideUiShellContent };\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["UiShell","adminAppUiShellBreakpoints","useUiShellBreakpoints"],"sources":["../../../src/ui-shell/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport * from \"./AppSwitcher/index.js\";\nexport * from \"./InnerAppContainer.js\";\nexport * from \"./NarrowUiShellContent.js\";\nexport * from \"./renderUiShell.js\";\nexport * from \"./SideNav/index.js\";\nexport * from \"./TopNav/index.js\";\nexport * from \"./uiShellContentTypes.js\";\nexport * from \"./useHasUiShell.js\";\nexport * from \"./WideUiShellContent.js\";\n\nexport * from \"../web-component/renderReactInWebComponent.js\"; // This is located here because some teams use React v17, and this uses React v18's `ReactDOM/client` import which isn't in older versions.\n\nexport { UiShell, type UiShellProps } from \"./UiShell.js\";\nexport {\n  adminAppUiShellBreakpoints,\n  useUiShellBreakpoints,\n} from \"./useUiShellBreakpoints.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,0BAA0B;AACxC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AAEvC,cAAc,+CAA+C;AAE7D,SAASA,OAAO,QAA2B,cAAc;AACzD,SACEC,0BAA0B,EAC1BC,qBAAqB,QAChB,4BAA4B","ignoreList":[]}