@okta/odyssey-react-mui 1.29.0 → 1.32.4

package/dist/esm/ui-shell/SideNav/SortableList/SortableOverlay.js

@@ -0,0 +1,32 @@
+/*!
+ * 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 { defaultDropAnimationSideEffects, DragOverlay } from "@dnd-kit/core";
+import { jsx as _jsx } from "react/jsx-runtime";
+const dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+export function SortableOverlay({
+  children
+}) {
+  return _jsx(DragOverlay, {
+    dropAnimation: dropAnimationConfig,
+    children: children
+  });
+}
+//# sourceMappingURL=SortableOverlay.js.map

package/dist/esm/ui-shell/SideNav/SortableList/SortableOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableOverlay.js","names":["defaultDropAnimationSideEffects","DragOverlay","jsx","_jsx","dropAnimationConfig","sideEffects","styles","active","opacity","SortableOverlay","children","dropAnimation"],"sources":["../../../../../src/ui-shell/SideNav/SortableList/SortableOverlay.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  defaultDropAnimationSideEffects,\n  DragOverlay,\n  DropAnimation,\n} from \"@dnd-kit/core\";\nimport type { PropsWithChildren } from \"react\";\n\nconst dropAnimationConfig: DropAnimation = {\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: {\n      active: {\n        opacity: \"0.4\",\n      },\n    },\n  }),\n};\n\nexport function SortableOverlay({ children }: PropsWithChildren<object>) {\n  return (\n    <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,+BAA+B,EAC/BC,WAAW,QAEN,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGvB,MAAMC,mBAAkC,GAAG;EACzCC,WAAW,EAAEL,+BAA+B,CAAC;IAC3CM,MAAM,EAAE;MACNC,MAAM,EAAE;QACNC,OAAO,EAAE;MACX;IACF;EACF,CAAC;AACH,CAAC;AAED,OAAO,SAASC,eAAeA,CAAC;EAAEC;AAAoC,CAAC,EAAE;EACvE,OACEP,IAAA,CAACF,WAAW;IAACU,aAAa,EAAEP,mBAAoB;IAAAM,QAAA,EAAEA;EAAQ,CAAc,CAAC;AAE7E","ignoreList":[]}

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

@@ -0,0 +1,16 @@
+/*!
+ * 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 { SideNav } from "./SideNav.js";
+export * from "./NavAccordion.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SideNav"],"sources":["../../../../src/ui-shell/SideNav/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 { SideNav } from \"./SideNav.js\";\nexport * from \"./NavAccordion.js\";\n\nexport * from \"./types.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,cAAc;AACtC,cAAc,mBAAmB;AAEjC,cAAc,YAAY","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/ui-shell/SideNav/types.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport type { ReactElement, SyntheticEvent } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport type { statusSeverityValues } from \"../../Status.js\";\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\n\ntype LogoWithLink = {\n  href: string;\n  ariaLabel: string;\n};\ntype LogoWithNoLink = {\n  href?: never;\n  ariaLabel?: never;\n};\n\nexport type SideNavLogoProps = {\n  isSameBackgroundAsMain?: boolean;\n  /**\n   * Event fired when the logo is clicked\n   */\n  onClick?: (event: SyntheticEvent) => void;\n} & (LogoWithLink | LogoWithNoLink) &\n  (\n    | {\n        /**\n         * a component to render as the logo\n         */\n        logoComponent: ReactElement;\n        imageAltText?: never;\n        imageUrl?: never;\n      }\n    | {\n        /**\n         * The src url to render in an `img` tag\n         */\n        imageUrl: string;\n        /**\n         * alt text for the img logo\n         */\n        imageAltText: string;\n        logoComponent?: never;\n      }\n    | {\n        /**\n         * The src url to render in an `img` tag\n         */\n        imageUrl?: never;\n        /**\n         * alt text for the img logo\n         */\n        imageAltText?: never;\n        logoComponent?: never;\n      }\n  );\n\nexport type SideNavProps = {\n  /**\n   * Side Nav header text that is usually reserved to show the App name\n   */\n  appName?: string;\n  /**\n   *  Determines whether the side nav is collapsible\n   */\n  isCollapsible?: boolean;\n  /**\n   *  Determines whether the side nav is collapsed\n   */\n  isCollapsed?: boolean;\n  /**\n   *  Determines whether the side nav items use compact layout\n   */\n  isCompact?: boolean;\n  /**\n   *  Before the side nav has items, it will be in a loading state.\n   */\n  isLoading?: boolean;\n  /**\n   * An optional logo component or src string for an img to display in the header. If not provided, will default to the Okta logo\n   */\n  logoProps?: SideNavLogoProps;\n  /**\n   *  Triggers when the side nav is collapsed\n   */\n  onCollapse?: () => void;\n  /**\n   *  Triggers when the side nav is expanded\n   */\n  onExpand?: () => void;\n  /**\n   *  Triggers when the item is reordered\n   */\n  onSort?: (\n    reorderedItems: SideNavItem[],\n    parentId: string,\n    activeId: UniqueIdentifier,\n    activeIndex: number,\n    overIndex: number,\n  ) => void;\n  /**\n   * Nav items in the side nav\n   */\n  sideNavItems: SideNavItem[];\n} & (\n  | {\n      /**\n       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.\n       */\n      footerComponent?: ReactElement;\n      footerItems?: never;\n      hasCustomFooter: true;\n    }\n  | {\n      footerComponent?: never;\n      /**\n       * Footer items in the side nav\n       */\n      footerItems?: SideNavFooterItem[];\n      hasCustomFooter?: false;\n    }\n) &\n  Pick<HtmlProps, \"testId\">;\n\nexport type SideNavItem = {\n  /**\n   * The number to display as a count alongside the nav item\n   */\n  count?: number;\n  /**\n   * The icon element to display after the nav item text. Only use this with images that don't have React context. Even the official Odyssey Icons use MUI which references the MUI theme in context and will error when rendered in Unified UI Shell.\n   */\n  endIcon?: ReactElement;\n  id: string;\n  /**\n   * Whether the item is disabled. When set to true the nav item is set to Disabled color,\n   * the link/item is not clickable, and item with nestedNavItems is not expandable.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is active/selected\n   */\n  isSelected?: boolean;\n  /**\n   * Whether the item is sortable within a sortable list\n   */\n  isSortable?: boolean;\n  label: string;\n  /**\n   * Event fired when the nav item is clicked\n   */\n  onClick?: (event: SyntheticEvent) => void;\n  /**\n   * The status element to display after the label\n   */\n  severity?: (typeof statusSeverityValues)[number];\n  /**\n   * The icon element to display before the nav item text. Only use this with images that don't have React context. Even the official Odyssey Icons use MUI which references the MUI theme in context and will error when rendered in Unified UI Shell.\n   */\n  startIcon?: ReactElement;\n  /**\n   * The label to display inside the status\n   */\n  statusLabel?: string;\n  /**\n   * The link target prop. e.g., \"_blank\"\n   */\n  target?: string;\n} & (\n  | {\n      nestedNavItems?: never;\n      href?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n      /**\n       * Determines if the side nav item is a section header\n       */\n      isSectionHeader: true;\n    }\n  | {\n      nestedNavItems?: never;\n      /**\n       * link added to the nav item. if it is undefined, static text will be displayed.\n       * fires onClick event when it is passed\n       */\n      href?: string;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n      isSectionHeader?: never;\n    }\n  | {\n      /**\n       * An array of side nav items to be displayed as nestedNavItems within Accordion\n       */\n      nestedNavItems: Array<Omit<SideNavItem, \"nestedNavItems\" | \"startIcon\">>;\n      href?: never;\n      /**\n       * Whether the accordion (nav item with nestedNavItems) is expanded by default\n       */\n      isDefaultExpanded?: boolean;\n      /**\n       * If true, expands the accordion, otherwise collapse it.\n       * Setting this prop enables control over the accordion.\n       */\n      isExpanded?: boolean;\n      /**\n       * If true, enables sorting for the accordion items\n       */\n      isSectionHeader?: never;\n    }\n) &\n  Pick<HtmlProps, \"translate\">;\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,72 @@
+/*!
+ * 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 { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
+import { jsx as _jsx, 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" && prop !== "topNavBackgroundColor"
+})(({
+  odysseyDesignTokens,
+  isScrolled,
+  topNavBackgroundColor
+}) => ({
+  alignItems: "center",
+  backgroundColor: topNavBackgroundColor,
+  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,
+  position: "relative",
+  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  zIndex: 100,
+  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {
+    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`
+  })
+}));
+const TopNav = ({
+  isScrolled,
+  leftSideComponent,
+  rightSideComponent
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const uiShellContext = useUiShellContext();
+  return _jsxs(StyledTopNavContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    isScrolled: isScrolled,
+    topNavBackgroundColor: uiShellContext?.topNavBackgroundColor,
+    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/esm/ui-shell/TopNav/TopNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNav.js","names":["styled","memo","useOdysseyDesignTokens","useUiShellContext","jsx","_jsx","jsxs","_jsxs","TOP_NAV_HEIGHT","StyledLeftSideContainer","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrolled","topNavBackgroundColor","alignItems","backgroundColor","boxShadow","DepthMedium","undefined","clipPath","display","gap","Spacing4","height","justifyContent","maxHeight","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","uiShellContext","children","MemoizedTopNav","displayName"],"sources":["../../../../src/ui-shell/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.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\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\" &&\n    prop !== \"isScrolled\" &&\n    prop !== \"topNavBackgroundColor\",\n})<{\n  isScrolled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isScrolled, topNavBackgroundColor }) => ({\n  alignItems: \"center\",\n  backgroundColor: topNavBackgroundColor,\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  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: 100,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {\n    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`,\n  }),\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  const uiShellContext = useUiShellContext();\n\n  return (\n    <StyledTopNavContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      isScrolled={isScrolled}\n      topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\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;AAG/C,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAEEC,iBAAiB,QACZ,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3C,OAAO,MAAMC,cAAc,GAAG,GAAG,EAAE,GAAG,EAAE,KAAK;AAE7C,MAAMC,uBAAuB,GAAGT,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACnDU,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAGX,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACpDY,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGb,MAAM,CAAC,KAAK,EAAE;EAC1Cc,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAC9BA,IAAI,KAAK,YAAY,IACrBA,IAAI,KAAK;AACb,CAAC,CAAC,CAIC,CAAC;EAAEC,mBAAmB;EAAEC,UAAU;EAAEC;AAAsB,CAAC,MAAM;EAClEC,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAEF,qBAAqB;EACtCG,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,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,cAAcrB,mBAAmB,CAACsB,sBAAsB,IAAItB,mBAAmB,CAACuB,oBAAoB,EAAE;EAClHC,MAAM,EAAE,GAAG;EAEX,IAAItB,qBAAqB,KAAKF,mBAAmB,CAACyB,eAAe,IAAI;IACnEC,YAAY,EAAE,GAAG1B,mBAAmB,CAAC2B,eAAe,IAAI3B,mBAAmB,CAAC4B,eAAe,IAAI5B,mBAAmB,CAAC6B,aAAa;EAClI,CAAC;AACH,CAAC,CAAC,CAAC;AAiBH,MAAMC,MAAM,GAAGA,CAAC;EACd7B,UAAU;EACV8B,iBAAiB;EACjBC;AACW,CAAC,KAAK;EACjB,MAAMhC,mBAAmB,GAAGd,sBAAsB,CAAC,CAAC;EACpD,MAAM+C,cAAc,GAAG9C,iBAAiB,CAAC,CAAC;EAE1C,OACEI,KAAA,CAACM,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,UAAU,EAAEA,UAAW;IACvBC,qBAAqB,EAAE+B,cAAc,EAAE/B,qBAAsB;IAAAgC,QAAA,GAE7D7C,IAAA,CAACI,uBAAuB;MAAAyC,QAAA,EACrBH,iBAAiB,IAAI1C,IAAA,UAAM;IAAC,CACN,CAAC,EAC1BA,IAAA,CAACM,wBAAwB;MAAAuC,QAAA,EACtBF,kBAAkB,IAAI3C,IAAA,UAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,MAAM8C,cAAc,GAAGlD,IAAI,CAAC6C,MAAM,CAAC;AACnCK,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIL,MAAM","ignoreList":[]}

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

@@ -0,0 +1,37 @@
+/*!
+ * 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, createElement as _createElement } from "react";
+import { TopNavListItem } from "./TopNavListItem.js";
+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/esm/ui-shell/TopNav/TopNavLinksList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavLinksList.js","names":["styled","memo","createElement","_createElement","TopNavListItem","jsx","_jsx","StyledTopNavList","alignItems","display","listStyle","listStyleType","padding","TopNavLinksList","topNavLinkItems","children","map","item","key","id","MemoizedTopNavLinksList","displayName"],"sources":["../../../../src/ui-shell/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.js\";\nimport { TopNavListItem, TopNavListItemProps } from \"./TopNavListItem.js\";\nimport { UserProfileProps } from \"../../labs/UserProfile.js\";\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,EAAAC,aAAA,IAAAC,cAAA,QAA2B,OAAO;AAG/C,SAASC,cAAc,QAA6B,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA8B1E,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,IACxBd,cAAA,CAACC,cAAc;MAAA,GAAKa,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","ignoreList":[]}

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

package/dist/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,83 @@
+/*!
+ * 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 { UiShellProvider } from "./UiShellProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const defaultComponentProps = {
+  sideNavProps: undefined,
+  topNavProps: undefined
+};
+const UiShell = ({
+  appBackgroundColor,
+  appBackgroundContrastMode,
+  appComponent,
+  appRootElement,
+  appContainerElement,
+  appContainerScrollingMode,
+  hasStandardAppContentPadding,
+  initialVisibleSections,
+  onError = console.error,
+  onSubscriptionCreated,
+  optionalComponents,
+  sideNavBackgroundColor,
+  stylesRootElement,
+  topNavBackgroundColor,
+  subscribeToPropChanges
+}) => {
+  const [componentProps, setComponentProps] = 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,
+      hasScopedCssBaseline: false,
+      children: _jsxs(ErrorBoundary, {
+        fallback: appComponent,
+        onError: onError,
+        children: [_jsx(CssBaseline, {}), _jsx(UiShellProvider, {
+          appBackgroundColor: appBackgroundColor,
+          appBackgroundContrastMode: appBackgroundContrastMode,
+          sideNavBackgroundColor: sideNavBackgroundColor,
+          topNavBackgroundColor: topNavBackgroundColor,
+          children: _jsx(UiShellContent, {
+            ...componentProps,
+            appContainerElement: appContainerElement,
+            appContainerScrollingMode: appContainerScrollingMode,
+            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","CssBaseline","OdysseyProvider","UiShellContent","UiShellProvider","jsx","_jsx","jsxs","_jsxs","defaultComponentProps","sideNavProps","undefined","topNavProps","UiShell","appBackgroundColor","appBackgroundContrastMode","appComponent","appRootElement","appContainerElement","appContainerScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","stylesRootElement","topNavBackgroundColor","subscribeToPropChanges","componentProps","setComponentProps","unsubscribe","fallback","children","emotionRootElement","shadowRootElement","hasScopedCssBaseline","MemoizedUiShell","displayName"],"sources":["../../../src/ui-shell/UiShell.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  ReactNode,\n  useEffect,\n  useState,\n  type SetStateAction,\n} from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { CssBaseline } from \"../CssBaseline.js\";\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport {\n  UiShellContent,\n  type UiShellContentProps,\n  type UiShellNavComponentProps,\n} from \"./UiShellContent.js\";\nimport { type ReactRootElements } from \"../web-component/renderReactInWebComponent.js\";\nimport { UiShellProvider } from \"./UiShellProvider.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nexport type UiShellProps = {\n  /**\n   * Notifies when subscribed to prop changes.\n   *\n   * UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.\n   */\n  onSubscriptionCreated: () => void;\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for state changes.\n   *\n   * The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.\n   */\n  subscribeToPropChanges: (\n    subscriber: (\n      componentProps: SetStateAction<UiShellNavComponentProps>,\n    ) => void,\n  ) => () => void;\n  /**\n   * Sets a custom background color for the side nav area.\n   */\n  sideNavBackgroundColor?: string;\n  /**\n   * Sets a custom background color for the top nav area.\n   */\n  topNavBackgroundColor?: string;\n  /**\n   * React app component that renders as children in the correct location of the shell. Only used as fallback for ErrorBoundary.\n   */\n  appComponent?: ReactNode;\n} & Pick<ReactRootElements, \"appRootElement\" | \"stylesRootElement\"> &\n  Pick<\n    UiShellContentProps,\n    | \"appBackgroundColor\"\n    | \"appBackgroundContrastMode\"\n    | \"appContainerElement\"\n    | \"appContainerScrollingMode\"\n    | \"hasStandardAppContentPadding\"\n    | \"initialVisibleSections\"\n    | \"onError\"\n    | \"optionalComponents\"\n  >;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appComponent,\n  appRootElement,\n  appContainerElement,\n  appContainerScrollingMode,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  stylesRootElement,\n  topNavBackgroundColor,\n  subscribeToPropChanges,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  useEffect(() => {\n    const unsubscribe = subscribeToPropChanges((componentProps) => {\n      // If for some reason nothing is passed as `componentProps`, we fallback on `defaultComponentProps` as a safety mechanism to ensure nothing breaks.\n      setComponentProps(componentProps || defaultComponentProps);\n    });\n\n    onSubscriptionCreated();\n\n    return () => {\n      unsubscribe();\n    };\n  }, [onSubscriptionCreated, subscribeToPropChanges]);\n\n  return (\n    <ErrorBoundary fallback={appComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={stylesRootElement}\n        shadowRootElement={appRootElement}\n        hasScopedCssBaseline={false}\n      >\n        <ErrorBoundary fallback={appComponent} onError={onError}>\n          <CssBaseline />\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            <UiShellContent\n              {...componentProps}\n              appContainerElement={appContainerElement}\n              appContainerScrollingMode={appContainerScrollingMode}\n              hasStandardAppContentPadding={hasStandardAppContentPadding}\n              initialVisibleSections={initialVisibleSections}\n              onError={onError}\n              optionalComponents={optionalComponents}\n            />\n          </UiShellProvider>\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,IAAI,EAEJC,SAAS,EACTC,QAAQ,QAEH,OAAO;AACd,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SACEC,cAAc,QAGT,qBAAqB;AAE5B,SAASC,eAAe,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvD,OAAO,MAAMC,qBAA+C,GAAG;EAC7DC,YAAY,EAAEC,SAAS;EACvBC,WAAW,EAAED;AACf,CAAU;AAoDV,MAAME,OAAO,GAAGA,CAAC;EACfC,kBAAkB;EAClBC,yBAAyB;EACzBC,YAAY;EACZC,cAAc;EACdC,mBAAmB;EACnBC,yBAAyB;EACzBC,4BAA4B;EAC5BC,sBAAsB;EACtBC,OAAO,GAAGC,OAAO,CAACC,KAAK;EACvBC,qBAAqB;EACrBC,kBAAkB;EAClBC,sBAAsB;EACtBC,iBAAiB;EACjBC,qBAAqB;EACrBC;AACY,CAAC,KAAK;EAClB,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGjC,QAAQ,CAACU,qBAAqB,CAAC;EAE3EX,SAAS,CAAC,MAAM;IACd,MAAMmC,WAAW,GAAGH,sBAAsB,CAAEC,cAAc,IAAK;MAE7DC,iBAAiB,CAACD,cAAc,IAAItB,qBAAqB,CAAC;IAC5D,CAAC,CAAC;IAEFgB,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXQ,WAAW,CAAC,CAAC;IACf,CAAC;EACH,CAAC,EAAE,CAACR,qBAAqB,EAAEK,sBAAsB,CAAC,CAAC;EAEnD,OACExB,IAAA,CAACN,aAAa;IAACkC,QAAQ,EAAElB,YAAa;IAACM,OAAO,EAAEA,OAAQ;IAAAa,QAAA,EACtD7B,IAAA,CAACJ,eAAe;MACdkC,kBAAkB,EAAER,iBAAkB;MACtCS,iBAAiB,EAAEpB,cAAe;MAClCqB,oBAAoB,EAAE,KAAM;MAAAH,QAAA,EAE5B3B,KAAA,CAACR,aAAa;QAACkC,QAAQ,EAAElB,YAAa;QAACM,OAAO,EAAEA,OAAQ;QAAAa,QAAA,GACtD7B,IAAA,CAACL,WAAW,IAAE,CAAC,EACfK,IAAA,CAACF,eAAe;UACdU,kBAAkB,EAAEA,kBAAmB;UACvCC,yBAAyB,EAAEA,yBAA0B;UACrDY,sBAAsB,EAAEA,sBAAuB;UAC/CE,qBAAqB,EAAEA,qBAAsB;UAAAM,QAAA,EAE7C7B,IAAA,CAACH,cAAc;YAAA,GACT4B,cAAc;YAClBb,mBAAmB,EAAEA,mBAAoB;YACzCC,yBAAyB,EAAEA,yBAA0B;YACrDC,4BAA4B,EAAEA,4BAA6B;YAC3DC,sBAAsB,EAAEA,sBAAuB;YAC/CC,OAAO,EAAEA,OAAQ;YACjBI,kBAAkB,EAAEA;UAAmB,CACxC;QAAC,CACa,CAAC;MAAA,CACL;IAAC,CACD;EAAC,CACL,CAAC;AAEpB,CAAC;AAED,MAAMa,eAAe,GAAG1C,IAAI,CAACgB,OAAO,CAAC;AACrC0B,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAI1B,OAAO","ignoreList":[]}