@okta/odyssey-react-mui 1.25.0 → 1.27.0

package/dist/labs/TopNav/TopNav.js

@@ -0,0 +1,65 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo } from "react";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const TOP_NAV_HEIGHT = `${64 / 14}rem`;
+const StyledLeftSideContainer = styled("div")(() => ({
+  flexGrow: 1
+}));
+const StyledRightSideContainer = styled("div")(() => ({
+  flexShrink: 0
+}));
+const StyledTopNavContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrolled"
+})(({
+  odysseyDesignTokens,
+  isScrolled
+}) => ({
+  alignItems: "center",
+  backgroundColor: odysseyDesignTokens.HueNeutral50,
+  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,
+  clipPath: "inset(0 0 -100vh 0)",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing4,
+  height: "100%",
+  justifyContent: "space-between",
+  maxHeight: TOP_NAV_HEIGHT,
+  minHeight: TOP_NAV_HEIGHT,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing8,
+  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  zIndex: 1
+}));
+const TopNav = ({
+  isScrolled,
+  leftSideComponent,
+  rightSideComponent
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(StyledTopNavContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    isScrolled: isScrolled,
+    children: [_jsx(StyledLeftSideContainer, {
+      children: leftSideComponent ?? _jsx("div", {})
+    }), _jsx(StyledRightSideContainer, {
+      children: rightSideComponent ?? _jsx("div", {})
+    })]
+  });
+};
+const MemoizedTopNav = memo(TopNav);
+MemoizedTopNav.displayName = "TopNav";
+export { MemoizedTopNav as TopNav };
+//# sourceMappingURL=TopNav.js.map

package/dist/labs/TopNav/TopNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNav.js","names":["styled","memo","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","TOP_NAV_HEIGHT","StyledLeftSideContainer","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrolled","alignItems","backgroundColor","HueNeutral50","boxShadow","DepthMedium","undefined","clipPath","display","gap","Spacing4","height","justifyContent","maxHeight","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","transition","TransitionDurationMain","TransitionTimingMain","zIndex","TopNav","leftSideComponent","rightSideComponent","children","MemoizedTopNav","displayName"],"sources":["../../../src/labs/TopNav/TopNav.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\n\nexport const TOP_NAV_HEIGHT = `${64 / 14}rem`;\n\nconst StyledLeftSideContainer = styled(\"div\")(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledRightSideContainer = styled(\"div\")(() => ({\n  flexShrink: 0,\n}));\n\nconst StyledTopNavContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isScrolled\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isScrolled?: boolean;\n}>(({ odysseyDesignTokens, isScrolled }) => ({\n  alignItems: \"center\",\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n  clipPath: \"inset(0 0 -100vh 0)\",\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing4,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing8,\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: 1,\n}));\n\nexport type TopNavProps = {\n  /**\n   * Whether or not the underlying content has been scrolled\n   */\n  isScrolled?: boolean;\n  /**\n   * React components that render into the left side of the top nav.\n   */\n  leftSideComponent?: ReactElement;\n  /**\n   * React components that render into the right side of the top nav.\n   */\n  rightSideComponent?: ReactElement;\n} & Pick<HtmlProps, \"testId\">;\n\nconst TopNav = ({\n  isScrolled,\n  leftSideComponent,\n  rightSideComponent,\n}: TopNavProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <StyledTopNavContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      isScrolled={isScrolled}\n    >\n      <StyledLeftSideContainer>\n        {leftSideComponent ?? <div />}\n      </StyledLeftSideContainer>\n      <StyledRightSideContainer>\n        {rightSideComponent ?? <div />}\n      </StyledRightSideContainer>\n    </StyledTopNavContainer>\n  );\n};\n\nconst MemoizedTopNav = memo(TopNav);\nMemoizedTopNav.displayName = \"TopNav\";\n\nexport { MemoizedTopNav as TopNav };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAAC,SAK9CC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGxB,OAAO,MAAMC,cAAc,GAAI,GAAE,EAAE,GAAG,EAAG,KAAI;AAE7C,MAAMC,uBAAuB,GAAGR,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACnDS,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGV,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDW,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGZ,MAAM,CAAC,KAAK,EAAE;EAC1Ca,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAW,CAAC,MAAM;EAC3CC,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAEH,mBAAmB,CAACI,YAAY;EACjDC,SAAS,EAAEJ,UAAU,GAAGD,mBAAmB,CAACM,WAAW,GAAGC,SAAS;EACnEC,QAAQ,EAAE,qBAAqB;EAC/BC,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEV,mBAAmB,CAACW,QAAQ;EACjCC,MAAM,EAAE,MAAM;EACdC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAEtB,cAAc;EACzBuB,SAAS,EAAEvB,cAAc;EACzBwB,YAAY,EAAEhB,mBAAmB,CAACiB,QAAQ;EAC1CC,aAAa,EAAElB,mBAAmB,CAACmB,QAAQ;EAC3CC,UAAU,EAAG,cAAapB,mBAAmB,CAACqB,sBAAuB,IAAGrB,mBAAmB,CAACsB,oBAAqB,EAAC;EAClHC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAiBH,MAAMC,MAAM,GAAGA,CAAC;EACdvB,UAAU;EACVwB,iBAAiB;EACjBC;AACW,CAAC,KAAK;EACjB,MAAM1B,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EAEpD,OACEI,KAAA,CAACM,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,UAAU,EAAEA,UAAW;IAAA0B,QAAA,GAEvBtC,IAAA,CAACI,uBAAuB;MAAAkC,QAAA,EACrBF,iBAAiB,IAAIpC,IAAA,UAAM;IAAC,CACN,CAAC,EAC1BA,IAAA,CAACM,wBAAwB;MAAAgC,QAAA,EACtBD,kBAAkB,IAAIrC,IAAA,UAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,MAAMuC,cAAc,GAAG1C,IAAI,CAACsC,MAAM,CAAC;AACnCI,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIJ,MAAM"}

package/dist/labs/TopNav/TopNavLinksList.js

@@ -0,0 +1,38 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo } from "react";
+import { TopNavListItem } from "./TopNavListItem.js";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledTopNavList = styled("ul")(() => ({
+  alignItems: "center",
+  display: "flex",
+  listStyle: "none",
+  listStyleType: "none",
+  padding: 0
+}));
+const TopNavLinksList = ({
+  topNavLinkItems
+}) => _jsx("nav", {
+  children: _jsx(StyledTopNavList, {
+    children: topNavLinkItems.map(item => _createElement(TopNavListItem, {
+      ...item,
+      key: item.id
+    }))
+  })
+});
+const MemoizedTopNavLinksList = memo(TopNavLinksList);
+MemoizedTopNavLinksList.displayName = "TopNavLinksList";
+export { MemoizedTopNavLinksList as TopNavLinksList };
+//# sourceMappingURL=TopNavLinksList.js.map

package/dist/labs/TopNav/TopNavLinksList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavLinksList.js","names":["styled","memo","TopNavListItem","createElement","_createElement","jsx","_jsx","StyledTopNavList","alignItems","display","listStyle","listStyleType","padding","TopNavLinksList","topNavLinkItems","children","map","item","key","id","MemoizedTopNavLinksList","displayName"],"sources":["../../../src/labs/TopNav/TopNavLinksList.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport { TopNavListItem, TopNavListItemProps } from \"./TopNavListItem\";\nimport { UserProfileProps } from \"./UserProfile\";\n\nexport type TopNavLinksListProps = {\n  /**\n   * Pass in an additional component like `Button` that will be displayed after the nav link items\n   */\n  additionalNavItem?: ReactElement;\n  /**\n   * URL to the help page.\n   */\n  helpPageHref?: string;\n  /**\n   *  Pass in a SearchField component with the variant=\"filled\" prop set\n   */\n  searchField?: ReactElement;\n  /**\n   * URL to settings page.\n   */\n  settingsPageHref?: string;\n  /**\n   * Nav links in the top nav\n   */\n  topNavLinkItems: TopNavListItemProps[];\n  /**\n   * Displays user account info\n   */\n  userProfile?: UserProfileProps;\n} & Pick<HtmlProps, \"testId\">;\n\nconst StyledTopNavList = styled(\"ul\")(() => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  listStyle: \"none\",\n  listStyleType: \"none\",\n  padding: 0,\n}));\n\nconst TopNavLinksList = ({ topNavLinkItems }: TopNavLinksListProps) => (\n  <nav>\n    <StyledTopNavList>\n      {topNavLinkItems.map((item) => (\n        <TopNavListItem {...item} key={item.id} />\n      ))}\n    </StyledTopNavList>\n  </nav>\n);\n\nconst MemoizedTopNavLinksList = memo(TopNavLinksList);\nMemoizedTopNavLinksList.displayName = \"TopNavLinksList\";\n\nexport { MemoizedTopNavLinksList as TopNavLinksList };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAAC,SAGvCC,cAAc;AAAA,SAAAC,aAAA,IAAAC,cAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA8BvB,MAAMC,gBAAgB,GAAGP,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO;EAC3CQ,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,MAAM;EACjBC,aAAa,EAAE,MAAM;EACrBC,OAAO,EAAE;AACX,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAAsC,CAAC,KAChER,IAAA;EAAAS,QAAA,EACET,IAAA,CAACC,gBAAgB;IAAAQ,QAAA,EACdD,eAAe,CAACE,GAAG,CAAEC,IAAI,IACxBb,cAAA,CAACF,cAAc;MAAA,GAAKe,IAAI;MAAEC,GAAG,EAAED,IAAI,CAACE;IAAG,CAAE,CAC1C;EAAC,CACc;AAAC,CAChB,CACN;AAED,MAAMC,uBAAuB,GAAGnB,IAAI,CAACY,eAAe,CAAC;AACrDO,uBAAuB,CAACC,WAAW,GAAG,iBAAiB;AAEvD,SAASD,uBAAuB,IAAIP,eAAe"}

package/dist/labs/TopNav/TopNavListItem.js

@@ -0,0 +1,132 @@
+/*!
+ * 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 } from "react/jsx-runtime";
+import { 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/labs/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/labs/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\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\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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"}

package/dist/labs/TopNav/UserProfile.js

@@ -0,0 +1,65 @@
+/*!
+ * 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 } from "react";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Subordinate } from "../../Typography.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const UserProfileContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  paddingInlineEnd: odysseyDesignTokens.Spacing4
+}));
+const UserProfileIconContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  paddingInlineEnd: odysseyDesignTokens.Spacing2
+}));
+const UserProfileInfoContainer = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+const UserProfile = ({
+  profileIcon,
+  userName,
+  orgName
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(UserProfileContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [profileIcon && _jsx(UserProfileIconContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: profileIcon
+    }), _jsxs(UserProfileInfoContainer, {
+      children: [_jsx(Subordinate, {
+        color: "textPrimary",
+        children: userName
+      }), _jsx(Subordinate, {
+        color: "textSecondary",
+        children: orgName
+      })]
+    })]
+  });
+};
+const MemoizedUserProfile = memo(UserProfile);
+MemoizedUserProfile.displayName = "UserProfile";
+export { MemoizedUserProfile as UserProfile };
+//# sourceMappingURL=UserProfile.js.map

package/dist/labs/TopNav/UserProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfile.js","names":["styled","memo","useOdysseyDesignTokens","Subordinate","jsx","_jsx","jsxs","_jsxs","UserProfileContainer","shouldForwardProp","prop","odysseyDesignTokens","display","alignItems","paddingInlineEnd","Spacing4","UserProfileIconContainer","Spacing2","UserProfileInfoContainer","flexDirection","UserProfile","profileIcon","userName","orgName","children","color","MemoizedUserProfile","displayName"],"sources":["../../../src/labs/TopNav/UserProfile.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, type ReactElement } from \"react\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Subordinate } from \"../../Typography\";\n\nconst UserProfileContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  paddingInlineEnd: odysseyDesignTokens.Spacing4,\n}));\n\nconst UserProfileIconContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  paddingInlineEnd: odysseyDesignTokens.Spacing2,\n}));\n\nconst UserProfileInfoContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n}));\n\nexport type UserProfileProps = {\n  /**\n   * Logged in user profile icon to be displayed in the top nav\n   */\n  profileIcon?: ReactElement;\n  /**\n   * Logged in user info to be displayed in the top nav\n   */\n  userName: string;\n  /**\n   * Org name of the logged in user\n   */\n  orgName: string;\n};\n\nconst UserProfile = ({ profileIcon, userName, orgName }: UserProfileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <UserProfileContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {profileIcon && (\n        <UserProfileIconContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {profileIcon}\n        </UserProfileIconContainer>\n      )}\n\n      <UserProfileInfoContainer>\n        <Subordinate color=\"textPrimary\">{userName}</Subordinate>\n        <Subordinate color=\"textSecondary\">{orgName}</Subordinate>\n      </UserProfileInfoContainer>\n    </UserProfileContainer>\n  );\n};\n\nconst MemoizedUserProfile = memo(UserProfile);\nMemoizedUserProfile.displayName = \"UserProfile\";\n\nexport { MemoizedUserProfile as UserProfile };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2B,OAAO;AAAC,SAI9CC,sBAAsB;AAAA,SAEfC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpB,MAAMC,oBAAoB,GAAGR,MAAM,CAAC,KAAK,EAAE;EACzCS,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,gBAAgB,EAAEH,mBAAmB,CAACI;AACxC,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGhB,MAAM,CAAC,KAAK,EAAE;EAC7CS,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfE,gBAAgB,EAAEH,mBAAmB,CAACM;AACxC,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGlB,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDY,OAAO,EAAE,MAAM;EACfO,aAAa,EAAE;AACjB,CAAC,CAAC,CAAC;AAiBH,MAAMC,WAAW,GAAGA,CAAC;EAAEC,WAAW;EAAEC,QAAQ;EAAEC;AAA0B,CAAC,KAAK;EAC5E,MAAMZ,mBAAmB,GAAGT,sBAAsB,CAAC,CAAC;EAEpD,OACEK,KAAA,CAACC,oBAAoB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAa,QAAA,GAC5DH,WAAW,IACVhB,IAAA,CAACW,wBAAwB;MAACL,mBAAmB,EAAEA,mBAAoB;MAAAa,QAAA,EAChEH;IAAW,CACY,CAC3B,EAEDd,KAAA,CAACW,wBAAwB;MAAAM,QAAA,GACvBnB,IAAA,CAACF,WAAW;QAACsB,KAAK,EAAC,aAAa;QAAAD,QAAA,EAAEF;MAAQ,CAAc,CAAC,EACzDjB,IAAA,CAACF,WAAW;QAACsB,KAAK,EAAC,eAAe;QAAAD,QAAA,EAAED;MAAO,CAAc,CAAC;IAAA,CAClC,CAAC;EAAA,CACP,CAAC;AAE3B,CAAC;AAED,MAAMG,mBAAmB,GAAGzB,IAAI,CAACmB,WAAW,CAAC;AAC7CM,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIN,WAAW"}

package/dist/labs/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";
+export * from "./UserProfile.js";
+//# sourceMappingURL=index.js.map

package/dist/labs/TopNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/labs/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\";\nexport * from \"./UserProfile\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AAAA"}

package/dist/labs/UiShell/UiShell.js

@@ -0,0 +1,68 @@
+/*!
+ * 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 { CssBaseline } from "../../CssBaseline.js";
+import { OdysseyProvider } from "../../OdysseyProvider.js";
+import { UiShellContent } from "./UiShellContent.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const defaultComponentProps = {
+  sideNavProps: {
+    appName: "",
+    sideNavItems: []
+  },
+  topNavProps: {}
+};
+const UiShell = ({
+  appComponent,
+  appRootElement,
+  onError = console.error,
+  onSubscriptionCreated,
+  optionalComponents,
+  stylesRootElement,
+  subscribeToPropChanges
+}) => {
+  const [componentProps, setComponentProps] = useState(defaultComponentProps);
+  useEffect(() => {
+    const unsubscribe = subscribeToPropChanges(componentProps => {
+      setComponentProps(componentProps || defaultComponentProps);
+    });
+    onSubscriptionCreated();
+    return () => {
+      unsubscribe();
+    };
+  }, [onSubscriptionCreated, subscribeToPropChanges]);
+  return _jsx(ErrorBoundary, {
+    fallback: appComponent,
+    onError: onError,
+    children: _jsx(OdysseyProvider, {
+      emotionRootElement: stylesRootElement,
+      shadowRootElement: appRootElement,
+      children: _jsxs(ErrorBoundary, {
+        fallback: appComponent,
+        onError: onError,
+        children: [_jsx(CssBaseline, {}), _jsx(UiShellContent, {
+          ...componentProps,
+          appComponent: appComponent,
+          onError: onError,
+          optionalComponents: optionalComponents
+        })]
+      })
+    })
+  });
+};
+const MemoizedUiShell = memo(UiShell);
+MemoizedUiShell.displayName = "UiShell";
+export { MemoizedUiShell as UiShell };
+//# sourceMappingURL=UiShell.js.map

package/dist/labs/UiShell/UiShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiShell.js","names":["memo","useEffect","useState","ErrorBoundary","CssBaseline","OdysseyProvider","UiShellContent","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","appName","sideNavItems","topNavProps","UiShell","appComponent","appRootElement","onError","console","error","onSubscriptionCreated","optionalComponents","stylesRootElement","subscribeToPropChanges","componentProps","setComponentProps","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","MemoizedUiShell","displayName"],"sources":["../../../src/labs/UiShell/UiShell.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useEffect, useState, type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { CssBaseline } from \"../../CssBaseline\";\nimport { OdysseyProvider } from \"../../OdysseyProvider\";\nimport {\n  UiShellContent,\n  type UiShellContentProps,\n  type UiShellNavComponentProps,\n} from \"./UiShellContent\";\nimport { type ReactRootElements } from \"../../web-component\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: {\n    appName: \"\",\n    sideNavItems: [],\n  },\n  topNavProps: {},\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} & Pick<ReactRootElements, \"appRootElement\" | \"stylesRootElement\"> &\n  Pick<UiShellContentProps, \"appComponent\" | \"onError\" | \"optionalComponents\">;\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  appComponent,\n  appRootElement,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  stylesRootElement,\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      >\n        <ErrorBoundary fallback={appComponent} onError={onError}>\n          <CssBaseline />\n\n          <UiShellContent\n            {...componentProps}\n            appComponent={appComponent}\n            onError={onError}\n            optionalComponents={optionalComponents}\n          />\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,EAAEC,SAAS,EAAEC,QAAQ,QAA6B,OAAO;AACtE,SAASC,aAAa,QAAQ,sBAAsB;AAAC,SAE5CC,WAAW;AAAA,SACXC,eAAe;AAAA,SAEtBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMhB,OAAO,MAAMC,qBAA+C,GAAG;EAC7DC,YAAY,EAAE;IACZC,OAAO,EAAE,EAAE;IACXC,YAAY,EAAE;EAChB,CAAC;EACDC,WAAW,EAAE,CAAC;AAChB,CAAU;AA8BV,MAAMC,OAAO,GAAGA,CAAC;EACfC,YAAY;EACZC,cAAc;EACdC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,qBAAqB;EACrBC,kBAAkB;EAClBC,iBAAiB;EACjBC;AACY,CAAC,KAAK;EAClB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGzB,QAAQ,CAACS,qBAAqB,CAAC;EAE3EV,SAAS,CAAC,MAAM;IACd,MAAM2B,WAAW,GAAGH,sBAAsB,CAAEC,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAIf,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFW,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXM,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACN,qBAAqB,EAAEG,sBAAsB,CAAC,CAAC;EAEnD,OACEjB,IAAA,CAACL,aAAa;IAAC0B,QAAQ,EAAEZ,YAAa;IAACE,OAAO,EAAEA,OAAQ;IAAAW,QAAA,EACtDtB,IAAA,CAACH,eAAe;MACd0B,kBAAkB,EAAEP,iBAAkB;MACtCQ,iBAAiB,EAAEd,cAAe;MAAAY,QAAA,EAElCpB,KAAA,CAACP,aAAa;QAAC0B,QAAQ,EAAEZ,YAAa;QAACE,OAAO,EAAEA,OAAQ;QAAAW,QAAA,GACtDtB,IAAA,CAACJ,WAAW,IAAE,CAAC,EAEfI,IAAA,CAACF,cAAc;UAAA,GACToB,cAAc;UAClBT,YAAY,EAAEA,YAAa;UAC3BE,OAAO,EAAEA,OAAQ;UACjBI,kBAAkB,EAAEA;QAAmB,CACxC,CAAC;MAAA,CACW;IAAC,CACD;EAAC,CACL,CAAC;AAEpB,CAAC;AAED,MAAMU,eAAe,GAAGjC,IAAI,CAACgB,OAAO,CAAC;AACrCiB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIjB,OAAO"}

package/dist/labs/UiShell/UiShellContent.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 styled from "@emotion/styled";
+import { memo } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { SideNav } from "../SideNav/index.js";
+import { TopNav } from "../TopNav/index.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { useScrollState } from "./useScrollState.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAppContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  gridArea: "app-content",
+  overflowX: "hidden",
+  overflowY: "auto",
+  paddingBlock: odysseyDesignTokens.Spacing5,
+  paddingInline: odysseyDesignTokens.Spacing8
+}));
+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"
+    "side-nav top-nav"
+    "side-nav app-content"
+  `,
+  gridTemplateColumns: "auto 1fr",
+  gridTemplateRows: "auto auto 1fr",
+  height: "100vh",
+  width: "100vw"
+}));
+const StyledTopNavContainer = styled("div")(() => ({
+  gridArea: "top-nav"
+}));
+const UiShellContent = ({
+  appComponent,
+  onError = console.error,
+  optionalComponents,
+  sideNavProps,
+  topNavProps
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    isContentScrolled,
+    scrollableContentRef
+  } = useScrollState();
+  return _jsxs(StyledShellContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [_jsx(StyledBannersContainer, {
+      children: optionalComponents?.banners
+    }), _jsx(StyledSideNavContainer, {
+      children: sideNavProps && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(SideNav, {
+          ...sideNavProps,
+          ...(sideNavProps.hasCustomFooter && optionalComponents?.sideNavFooter ? {
+            footerComponent: optionalComponents.sideNavFooter,
+            footerItems: undefined,
+            hasCustomFooter: sideNavProps.hasCustomFooter
+          } : {
+            footerItems: sideNavProps.footerItems,
+            hasCustomFooter: false
+          })
+        })
+      })
+    }), _jsx(StyledTopNavContainer, {
+      children: _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsx(TopNav, {
+          ...topNavProps,
+          isScrolled: isContentScrolled,
+          leftSideComponent: optionalComponents?.topNavLeftSide,
+          rightSideComponent: optionalComponents?.topNavRightSide
+        })
+      })
+    }), _jsx(StyledAppContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      tabIndex: 0,
+      ref: scrollableContentRef,
+      children: appComponent
+    })]
+  });
+};
+const MemoizedUiShellContent = memo(UiShellContent);
+MemoizedUiShellContent.displayName = "UiShellContent";
+export { MemoizedUiShellContent as UiShellContent };
+//# sourceMappingURL=UiShellContent.js.map

package/dist/labs/UiShell/UiShellContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiShellContent.js","names":["styled","memo","ErrorBoundary","SideNav","TopNav","useOdysseyDesignTokens","useScrollState","jsx","_jsx","jsxs","_jsxs","StyledAppContainer","shouldForwardProp","prop","odysseyDesignTokens","gridArea","overflowX","overflowY","paddingBlock","Spacing5","paddingInline","Spacing8","StyledBannersContainer","StyledSideNavContainer","StyledShellContainer","backgroundColor","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledTopNavContainer","UiShellContent","appComponent","onError","console","error","optionalComponents","sideNavProps","topNavProps","isContentScrolled","scrollableContentRef","children","banners","fallback","hasCustomFooter","sideNavFooter","footerComponent","footerItems","undefined","isScrolled","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","tabIndex","ref","MemoizedUiShellContent","displayName"],"sources":["../../../src/labs/UiShell/UiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, type ReactElement, type ReactNode } from \"react\";\nimport { ErrorBoundary, ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { SideNav, type SideNavProps } from \"../SideNav\";\nimport { TopNav, type TopNavProps } from \"../TopNav\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { useScrollState } from \"./useScrollState\";\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  gridArea: \"app-content\",\n  overflowX: \"hidden\",\n  overflowY: \"auto\",\n  paddingBlock: odysseyDesignTokens.Spacing5,\n  paddingInline: odysseyDesignTokens.Spacing8,\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\"\n    \"side-nav top-nav\"\n    \"side-nav app-content\"\n  `,\n  gridTemplateColumns: \"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 UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the side nav component.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\">;\n  /**\n   * Object that gets pass directly to the top nav component.\n   */\n  topNavProps: Omit<TopNavProps, \"leftSideComponent\" | \"rightSideComponent\">;\n};\n\nexport type UiShellContentProps = {\n  /**\n   * React app component that renders as children in the correct location of the shell.\n   */\n  appComponent: ReactNode;\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\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  appComponent,\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: UiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isContentScrolled, scrollableContentRef } = useScrollState();\n\n  return (\n    <StyledShellContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledSideNavContainer>\n        {sideNavProps && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <SideNav\n              {...{\n                ...sideNavProps,\n                ...(sideNavProps.hasCustomFooter &&\n                optionalComponents?.sideNavFooter\n                  ? {\n                      footerComponent: optionalComponents.sideNavFooter,\n                      footerItems: undefined,\n                      hasCustomFooter: sideNavProps.hasCustomFooter,\n                    }\n                  : {\n                      footerItems: sideNavProps.footerItems,\n                      hasCustomFooter: false,\n                    }),\n              }}\n            />\n          </ErrorBoundary>\n        )}\n      </StyledSideNavContainer>\n\n      <StyledTopNavContainer>\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      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        tabIndex={0}\n        ref={scrollableContentRef}\n      >\n        {appComponent}\n      </StyledAppContainer>\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedUiShellContent = memo(UiShellContent);\nMemoizedUiShellContent.displayName = \"UiShellContent\";\n\nexport { MemoizedUiShellContent as UiShellContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAA2C,OAAO;AAC/D,SAASC,aAAa,QAA4B,sBAAsB;AAAC,SAEhEC,OAAO;AAAA,SACPC,MAAM;AAAA,SAEbC,sBAAsB;AAAA,SAGfC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEvB,MAAMC,kBAAkB,GAAGX,MAAM,CAAC,KAAK,EAAE;EACvCY,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,QAAQ,EAAE,aAAa;EACvBC,SAAS,EAAE,QAAQ;EACnBC,SAAS,EAAE,MAAM;EACjBC,YAAY,EAAEJ,mBAAmB,CAACK,QAAQ;EAC1CC,aAAa,EAAEN,mBAAmB,CAACO;AACrC,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAGtB,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EAClDe,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMQ,sBAAsB,GAAGvB,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EAClDe,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMS,oBAAoB,GAAGxB,MAAM,CAAC,KAAK,EAAE;EACzCY,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BW,eAAe,EAAEX,mBAAmB,CAACY,YAAY;EACjDC,OAAO,EAAE,MAAM;EACfC,OAAO,EAAE,CAAC;EACVC,iBAAiB,EAAG;AACtB;AACA;AACA;AACA,GAAG;EACDC,mBAAmB,EAAE,UAAU;EAC/BC,gBAAgB,EAAE,eAAe;EACjCC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGlC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACjDe,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAwCH,MAAMoB,cAAc,GAAGA,CAAC;EACtBC,YAAY;EACZC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,kBAAkB;EAClBC,YAAY;EACZC;AACmB,CAAC,KAAK;EACzB,MAAM5B,mBAAmB,GAAGT,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEsC,iBAAiB;IAAEC;EAAqB,CAAC,GAAGtC,cAAc,CAAC,CAAC;EAEpE,OACEI,KAAA,CAACc,oBAAoB;IAACV,mBAAmB,EAAEA,mBAAoB;IAAA+B,QAAA,GAC7DrC,IAAA,CAACc,sBAAsB;MAAAuB,QAAA,EACpBL,kBAAkB,EAAEM;IAAO,CACN,CAAC,EAEzBtC,IAAA,CAACe,sBAAsB;MAAAsB,QAAA,EACpBJ,YAAY,IACXjC,IAAA,CAACN,aAAa;QAAC6C,QAAQ,EAAE,IAAK;QAACV,OAAO,EAAEA,OAAQ;QAAAQ,QAAA,EAC9CrC,IAAA,CAACL,OAAO;UAEJ,GAAGsC,YAAY;UACf,IAAIA,YAAY,CAACO,eAAe,IAChCR,kBAAkB,EAAES,aAAa,GAC7B;YACEC,eAAe,EAAEV,kBAAkB,CAACS,aAAa;YACjDE,WAAW,EAAEC,SAAS;YACtBJ,eAAe,EAAEP,YAAY,CAACO;UAChC,CAAC,GACD;YACEG,WAAW,EAAEV,YAAY,CAACU,WAAW;YACrCH,eAAe,EAAE;UACnB,CAAC;QAAC,CAET;MAAC,CACW;IAChB,CACqB,CAAC,EAEzBxC,IAAA,CAAC0B,qBAAqB;MAAAW,QAAA,EACpBrC,IAAA,CAACN,aAAa;QAAC6C,QAAQ,EAAE,IAAK;QAACV,OAAO,EAAEA,OAAQ;QAAAQ,QAAA,EAC9CrC,IAAA,CAACJ,MAAM;UAAA,GACDsC,WAAW;UACfW,UAAU,EAAEV,iBAAkB;UAC9BW,iBAAiB,EAAEd,kBAAkB,EAAEe,cAAe;UACtDC,kBAAkB,EAAEhB,kBAAkB,EAAEiB;QAAgB,CACzD;MAAC,CACW;IAAC,CACK,CAAC,EAExBjD,IAAA,CAACG,kBAAkB;MACjBG,mBAAmB,EAAEA,mBAAoB;MACzC4C,QAAQ,EAAE,CAAE;MACZC,GAAG,EAAEf,oBAAqB;MAAAC,QAAA,EAEzBT;IAAY,CACK,CAAC;EAAA,CACD,CAAC;AAE3B,CAAC;AAED,MAAMwB,sBAAsB,GAAG3D,IAAI,CAACkC,cAAc,CAAC;AACnDyB,sBAAsB,CAACC,WAAW,GAAG,gBAAgB;AAErD,SAASD,sBAAsB,IAAIzB,cAAc"}

package/dist/labs/UiShell/bufferLatest.js

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