@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/dist/labs/SideNav/SideNavToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavToggleButton.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","styled","useTranslation","MuiPropsContext","useOdysseyDesignTokens","Tooltip","jsx","_jsx","jsxs","_jsxs","StyledToggleButton","_Button","shouldForwardProp","prop","isSideNavCollapsed","odysseyDesignTokens","backgroundColor","position","width","Spacing6","height","border","zIndex","boxShadow","PalettePrimaryMain","outline","animation","animationFillMode","transform","span","top","left","Spacing4","HueNeutral500","transition","TransitionDurationMain","SideNavToggleButton","ariaControls","buttonRef","id","onClick","tabIndex","t","localButtonRef","focus","current","toggleLabel","renderButton","muiProps","ref","element","variant","children","ariaType","placement","text","Consumer","MemoizedSideNavToggleButton","displayName"],"sources":["../../../src/labs/SideNav/SideNavToggleButton.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FocusHandle } from \"../../inputUtils\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Tooltip } from \"../../Tooltip\";\n\nconst StyledToggleButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    isSideNavCollapsed,\n    odysseyDesignTokens,\n  }: {\n    isSideNavCollapsed: boolean;\n    odysseyDesignTokens: DesignTokens;\n  }) => ({\n    backgroundColor: \"transparent\",\n    position: \"relative\",\n    width: odysseyDesignTokens.Spacing6,\n    height: odysseyDesignTokens.Spacing6,\n    border: 0,\n    zIndex: 2,\n\n    \"&:focus-visible\": {\n      boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n      outline: \"none\",\n    },\n\n    \"&:hover, &:focus\": {\n      backgroundColor: \"transparent\",\n\n      \"#lineOne\": {\n        animation:\n          \"lineOne-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)\",\n        animationFillMode: \"forwards\",\n        \"@keyframes lineOne-animate-to-collapse\": {\n          \"0%\": {\n            transform: \"translate3d(-50%, -50%, 0)\",\n          },\n          \"50%\": {\n            transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n          },\n          \"100%\": {\n            transform: \"translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)\",\n          },\n        },\n      },\n\n      \"#lineTwo\": {\n        animation:\n          \"lineTwo-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)\",\n        animationFillMode: \"forwards\",\n        \"@keyframes lineTwo-animate-to-collapse\": {\n          \"0%\": {\n            transform: \"translate3d(-50%, -50%, 0)\",\n          },\n          \"50%\": {\n            transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n          },\n          \"100%\": {\n            transform: \"translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)\",\n          },\n        },\n      },\n\n      ...(isSideNavCollapsed && {\n        \"#lineOne\": {\n          animation:\n            \"lineOne-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)\",\n          animationFillMode: \"forwards\",\n          \"@keyframes lineOne-animate-to-expand\": {\n            \"0%\": {\n              transform: \"translate3d(-50%, -50%, 0)\",\n            },\n            \"50%\": {\n              transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n            },\n            \"100%\": {\n              transform:\n                \"translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)\",\n            },\n          },\n        },\n\n        \"#lineTwo\": {\n          animation:\n            \"lineTwo-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)\",\n          animationFillMode: \"forwards\",\n          \"@keyframes lineTwo-animate-to-expand\": {\n            \"0%\": {\n              transform: \"translate3d(-50%, -50%, 0)\",\n            },\n            \"50%\": {\n              transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n            },\n            \"100%\": {\n              transform: \"translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)\",\n            },\n          },\n        },\n      }),\n    },\n\n    span: {\n      position: \"absolute\",\n      top: \"50%\",\n      left: \"50%\",\n      width: \"2px\",\n      height: odysseyDesignTokens.Spacing4,\n      backgroundColor: odysseyDesignTokens.HueNeutral500,\n      transform: \"translate3d(-50%, -50%, 0)\",\n      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n    },\n  }),\n);\n\nexport type SideNavToggleButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The `id` of the item this button controls\n   */\n  ariaControls: string;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  isSideNavCollapsed: boolean;\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n};\n\nconst SideNavToggleButton = ({\n  ariaControls,\n  buttonRef,\n  id,\n  isSideNavCollapsed,\n  onClick,\n  tabIndex,\n}: SideNavToggleButtonProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n  useImperativeHandle(\n    buttonRef,\n    () => ({\n      focus: () => {\n        localButtonRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const toggleLabel = useMemo(\n    () =>\n      isSideNavCollapsed\n        ? t(\"sidenav.toggle.expand\")\n        : t(\"sidenav.toggle.collapse\"),\n    [isSideNavCollapsed, t],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <StyledToggleButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-expanded={!isSideNavCollapsed}\n          aria-label={toggleLabel}\n          data-sidenav-toggle={true}\n          id={id}\n          isSideNavCollapsed={isSideNavCollapsed}\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={onClick}\n          ref={(element) => {\n            if (element) {\n              (\n                localButtonRef as React.MutableRefObject<HTMLButtonElement>\n              ).current = element;\n              //@ts-expect-error ref is not an optional prop on the props context type\n              muiProps?.ref?.(element);\n            }\n          }}\n          tabIndex={tabIndex}\n          variant=\"floating\"\n        >\n          <span id=\"lineOne\" />\n          <span id=\"lineTwo\" />\n        </StyledToggleButton>\n      );\n    },\n    [\n      ariaControls,\n      id,\n      isSideNavCollapsed,\n      odysseyDesignTokens,\n      onClick,\n      tabIndex,\n      toggleLabel,\n    ],\n  );\n\n  return (\n    <Tooltip ariaType=\"description\" placement=\"right\" text={toggleLabel}>\n      <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n    </Tooltip>\n  );\n};\n\nconst MemoizedSideNavToggleButton = memo(SideNavToggleButton);\nMemoizedSideNavToggleButton.displayName = \"SideNavToggleButton\";\n\nexport { MemoizedSideNavToggleButton as SideNavToggleButton };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,SAEEA,IAAI,EACJC,WAAW,EACXC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,QACD,OAAO;AACd,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,QAAQ,eAAe;AAAC,SAGtCC,eAAe;AAAA,SAGtBC,sBAAsB;AAAA,SAEfC,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEhB,MAAMC,kBAAkB,GAAGT,MAAM,CAAAU,OAAA,EAAY;EAC3CC,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CACA,CAAC;EACCC,kBAAkB;EAClBC;AAIF,CAAC,MAAM;EACLC,eAAe,EAAE,aAAa;EAC9BC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAEH,mBAAmB,CAACI,QAAQ;EACnCC,MAAM,EAAEL,mBAAmB,CAACI,QAAQ;EACpCE,MAAM,EAAE,CAAC;EACTC,MAAM,EAAE,CAAC;EAET,iBAAiB,EAAE;IACjBC,SAAS,EAAG,mBAAkBR,mBAAmB,CAACS,kBAAmB,EAAC;IACtEC,OAAO,EAAE;EACX,CAAC;EAED,kBAAkB,EAAE;IAClBT,eAAe,EAAE,aAAa;IAE9B,UAAU,EAAE;MACVU,SAAS,EACP,8DAA8D;MAChEC,iBAAiB,EAAE,UAAU;MAC7B,wCAAwC,EAAE;QACxC,IAAI,EAAE;UACJC,SAAS,EAAE;QACb,CAAC;QACD,KAAK,EAAE;UACLA,SAAS,EAAE;QACb,CAAC;QACD,MAAM,EAAE;UACNA,SAAS,EAAE;QACb;MACF;IACF,CAAC;IAED,UAAU,EAAE;MACVF,SAAS,EACP,8DAA8D;MAChEC,iBAAiB,EAAE,UAAU;MAC7B,wCAAwC,EAAE;QACxC,IAAI,EAAE;UACJC,SAAS,EAAE;QACb,CAAC;QACD,KAAK,EAAE;UACLA,SAAS,EAAE;QACb,CAAC;QACD,MAAM,EAAE;UACNA,SAAS,EAAE;QACb;MACF;IACF,CAAC;IAED,IAAId,kBAAkB,IAAI;MACxB,UAAU,EAAE;QACVY,SAAS,EACP,4DAA4D;QAC9DC,iBAAiB,EAAE,UAAU;QAC7B,sCAAsC,EAAE;UACtC,IAAI,EAAE;YACJC,SAAS,EAAE;UACb,CAAC;UACD,KAAK,EAAE;YACLA,SAAS,EAAE;UACb,CAAC;UACD,MAAM,EAAE;YACNA,SAAS,EACP;UACJ;QACF;MACF,CAAC;MAED,UAAU,EAAE;QACVF,SAAS,EACP,4DAA4D;QAC9DC,iBAAiB,EAAE,UAAU;QAC7B,sCAAsC,EAAE;UACtC,IAAI,EAAE;YACJC,SAAS,EAAE;UACb,CAAC;UACD,KAAK,EAAE;YACLA,SAAS,EAAE;UACb,CAAC;UACD,MAAM,EAAE;YACNA,SAAS,EAAE;UACb;QACF;MACF;IACF,CAAC;EACH,CAAC;EAEDC,IAAI,EAAE;IACJZ,QAAQ,EAAE,UAAU;IACpBa,GAAG,EAAE,KAAK;IACVC,IAAI,EAAE,KAAK;IACXb,KAAK,EAAE,KAAK;IACZE,MAAM,EAAEL,mBAAmB,CAACiB,QAAQ;IACpChB,eAAe,EAAED,mBAAmB,CAACkB,aAAa;IAClDL,SAAS,EAAE,4BAA4B;IACvCM,UAAU,EAAG,aAAYnB,mBAAmB,CAACoB,sBAAuB;EACtE;AACF,CAAC,CACH,CAAC;AAwBD,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,YAAY;EACZC,SAAS;EACTC,EAAE;EACFzB,kBAAkB;EAClB0B,OAAO;EACPC;AACwB,CAAC,KAAK;EAC9B,MAAM1B,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEsC;EAAE,CAAC,GAAGxC,cAAc,CAAC,CAAC;EAE9B,MAAMyC,cAAc,GAAG3C,MAAM,CAAwC,IAAI,CAAC;EAE1EF,mBAAmB,CACjBwC,SAAS,EACT,OAAO;IACLM,KAAK,EAAEA,CAAA,KAAM;MACXD,cAAc,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;IACjC;EACF,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAME,WAAW,GAAG/C,OAAO,CACzB,MACEe,kBAAkB,GACd4B,CAAC,CAAC,uBAAuB,CAAC,GAC1BA,CAAC,CAAC,yBAAyB,CAAC,EAClC,CAAC5B,kBAAkB,EAAE4B,CAAC,CACxB,CAAC;EAED,MAAMK,YAAY,GAAGlD,WAAW,CAC7BmD,QAA6B,IAAK;IACjC,OACEvC,KAAA,CAACC,kBAAkB;MAAA,GACbsC,QAAQ;MACZ,iBAAeX,YAAa;MAC5B,iBAAe,CAACvB,kBAAmB;MACnC,cAAYgC,WAAY;MACxB,uBAAqB,IAAK;MAC1BP,EAAE,EAAEA,EAAG;MACPzB,kBAAkB,EAAEA,kBAAmB;MACvCC,mBAAmB,EAAEA,mBAAoB;MACzCyB,OAAO,EAAEA,OAAQ;MACjBS,GAAG,EAAGC,OAAO,IAAK;QAChB,IAAIA,OAAO,EAAE;UAETP,cAAc,CACdE,OAAO,GAAGK,OAAO;UAEnBF,QAAQ,EAAEC,GAAG,GAAGC,OAAO,CAAC;QAC1B;MACF,CAAE;MACFT,QAAQ,EAAEA,QAAS;MACnBU,OAAO,EAAC,UAAU;MAAAC,QAAA,GAElB7C,IAAA;QAAMgC,EAAE,EAAC;MAAS,CAAE,CAAC,EACrBhC,IAAA;QAAMgC,EAAE,EAAC;MAAS,CAAE,CAAC;IAAA,CACH,CAAC;EAEzB,CAAC,EACD,CACEF,YAAY,EACZE,EAAE,EACFzB,kBAAkB,EAClBC,mBAAmB,EACnByB,OAAO,EACPC,QAAQ,EACRK,WAAW,CAEf,CAAC;EAED,OACEvC,IAAA,CAACF,OAAO;IAACgD,QAAQ,EAAC,aAAa;IAACC,SAAS,EAAC,OAAO;IAACC,IAAI,EAAET,WAAY;IAAAM,QAAA,EAClE7C,IAAA,CAACJ,eAAe,CAACqD,QAAQ;MAAAJ,QAAA,EAAEL;IAAY,CAA2B;EAAC,CAC5D,CAAC;AAEd,CAAC;AAED,MAAMU,2BAA2B,GAAG7D,IAAI,CAACwC,mBAAmB,CAAC;AAC7DqB,2BAA2B,CAACC,WAAW,GAAG,qBAAqB;AAE/D,SAASD,2BAA2B,IAAIrB,mBAAmB"}

package/dist/labs/SideNav/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/labs/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 } from \"react\";\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport type { statusSeverityValues } from \"../../Status\";\n\nexport type SideNavProps = {\n  /**\n   * Side Nav header text that is usually reserved to show the App name\n   */\n  navHeaderText: string;\n  /**\n   *  Determines whether the side nav is collapsible\n   */\n  isCollapsible?: boolean;\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   * Nav items in the side nav\n   */\n  sideNavItems: SideNavItem[];\n  /**\n   * A CSS length string indicating the customizable expanded width of the SideNav container.\n   * (it will be smaller if isCollapsible and collapsed)\n   */\n  expandedWidth?: string;\n  /**\n   * An optional logo to display in the header. If not provided, will default to the Okta logo\n   */\n  logo?: ReactElement;\n} & (\n  | {\n      /**\n       * Footer items in the side nav\n       */\n      footerItems?: SideNavFooterItem[];\n      /**\n       * footerComponent cannot be used if footerItems are defined\n       */\n      footerComponent?: never;\n    }\n  | {\n      /**\n       * footerItems cannot be used if footerComponent is defined\n       */\n      footerItems?: never;\n      /**\n       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.\n       */\n      footerComponent?: ReactElement;\n    }\n) &\n  Pick<HtmlProps, \"testId\">;\n\nexport type SideNavItem = {\n  id: string;\n  label: string;\n  /**\n   * The icon element to display at the end of the Nav Item\n   */\n  endIcon?: ReactElement;\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 children is not expandable.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is active/selected\n   */\n  isSelected?: boolean;\n  /**\n   * Event fired when the nav item is clicked\n   */\n  onClick?(): void;\n  /**\n   * The status element to display after the label\n   */\n  severity?: (typeof statusSeverityValues)[number];\n  /**\n   * The icon element to display at the start of the Nav Item\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      /**\n       * Determines if the side nav item is a section header\n       */\n      isSectionHeader: true;\n      href?: never;\n      children?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\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      children?: never;\n      isSectionHeader?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * An array of side nav items to be displayed as children within Accordion\n       */\n      children?: SideNavItem[];\n      /**\n       * Whether the accordion (nav item with children) 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      isSectionHeader?: never;\n      href?: never;\n    }\n);\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/labs/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 } from \"react\";\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport type { statusSeverityValues } from \"../../Status\";\n\nexport type SideNavLogoProps = {\n  href?: string;\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 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   * 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 at the end of the Nav Item\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 children is not expandable.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is active/selected\n   */\n  isSelected?: boolean;\n  label: string;\n  /**\n   * Event fired when the nav item is clicked\n   */\n  onClick?(): void;\n  /**\n   * The status element to display after the label\n   */\n  severity?: (typeof statusSeverityValues)[number];\n  /**\n   * The icon element to display at the start of the Nav Item\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      children?: 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      children?: 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 children within Accordion\n       */\n      children?: Array<Omit<SideNavItem, \"startIcon\" | \"endIcon\">>;\n      endIcon?: never;\n      href?: never;\n      /**\n       * Whether the accordion (nav item with children) 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      isSectionHeader?: never;\n    }\n);\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":""}

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.Spacing6,
+  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","Spacing6","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.Spacing6,\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"}