@okta/odyssey-react-mui 1.32.0 → 1.32.4

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavLogo.js","names":["memo","useMemo","styled","OktaLogo","jsx","_jsx","StyledLogoContainer","display","alignItems","height","StyledLogoLink","SideNavLogo","imageAltText","logoComponent","imageUrl","optionalProps","logo","src","alt","ariaLabel","href","children","role","MemoizedSideNavLogo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.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, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"100%\",\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n  imageAltText,\n  logoComponent,\n  imageUrl,\n  ...optionalProps\n}: SideNavLogoProps) => {\n  const logo = useMemo(() => {\n    if (logoComponent) {\n      return logoComponent;\n    }\n\n    if (imageAltText && imageUrl) {\n      return <img src={imageUrl} alt={imageAltText} />;\n    }\n\n    return <OktaLogo />;\n  }, [imageAltText, logoComponent, imageUrl]);\n\n  return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n    <StyledLogoLink\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      href={optionalProps.href}\n    >\n      {logo}\n    </StyledLogoLink>\n  ) : (\n    <StyledLogoContainer role=\"presentation\">{logo}</StyledLogoContainer>\n  );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AACrC,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAASC,QAAQ,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC,MAAMC,mBAAmB,GAAGJ,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EAC/CK,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAGR,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO;EACxCK,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAME,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACR,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAGf,OAAO,CAAC,MAAM;IACzB,IAAIY,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAID,YAAY,IAAIE,QAAQ,EAAE;MAC5B,OAAOT,IAAA;QAAKY,GAAG,EAAEH,QAAS;QAACI,GAAG,EAAEN;MAAa,CAAE,CAAC;IAClD;IAEA,OAAOP,IAAA,CAACF,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACS,YAAY,EAAEC,aAAa,EAAEC,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIC,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5DV,IAAA,CAACK,cAAc;IACb,cAAYK,aAAa,CAACI,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAEL,aAAa,CAACK,IAAK;IAAAC,QAAA,EAExBL;EAAI,CACS,CAAC,GAEjBX,IAAA,CAACC,mBAAmB;IAACgB,IAAI,EAAC,cAAc;IAAAD,QAAA,EAAEL;EAAI,CAAsB,CACrE;AACH,CAAC;AAED,MAAMO,mBAAmB,GAAGvB,IAAI,CAACW,WAAW,CAAC;AAC7CY,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIZ,WAAW","ignoreList":[]}
+{"version":3,"file":"SideNavLogo.js","names":["memo","useMemo","styled","OktaLogo","jsx","_jsx","StyledLogoContainer","shouldForwardProp","prop","isLogoInteractive","display","alignItems","height","cursor","StyledLogoLink","SideNavLogo","imageAltText","logoComponent","imageUrl","optionalProps","logo","src","alt","ariaLabel","href","onClick","children","role","Boolean","MemoizedSideNavLogo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.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, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"isLogoInteractive\",\n})<{\n  isLogoInteractive?: boolean;\n}>(({ isLogoInteractive }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"100%\",\n  ...(isLogoInteractive && {\n    cursor: \"pointer\",\n  }),\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n  imageAltText,\n  logoComponent,\n  imageUrl,\n  ...optionalProps\n}: SideNavLogoProps) => {\n  const logo = useMemo(() => {\n    if (logoComponent) {\n      return logoComponent;\n    }\n\n    if (imageAltText && imageUrl) {\n      return <img src={imageUrl} alt={imageAltText} />;\n    }\n\n    return <OktaLogo />;\n  }, [imageAltText, logoComponent, imageUrl]);\n\n  return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n    <StyledLogoLink\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      href={optionalProps.href}\n      onClick={optionalProps.onClick}\n    >\n      {logo}\n    </StyledLogoLink>\n  ) : (\n    <StyledLogoContainer\n      role=\"presentation\"\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      onClick={optionalProps.onClick}\n      isLogoInteractive={Boolean(optionalProps.onClick) || optionalProps.href}\n    >\n      {logo}\n    </StyledLogoContainer>\n  );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AACrC,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAASC,QAAQ,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC,MAAMC,mBAAmB,GAAGJ,MAAM,CAAC,KAAK,EAAE;EACxCK,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAkB,CAAC,MAAM;EAC7BC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE,MAAM;EACd,IAAIH,iBAAiB,IAAI;IACvBI,MAAM,EAAE;EACV,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAGZ,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO;EACxCQ,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMG,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACR,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAGnB,OAAO,CAAC,MAAM;IACzB,IAAIgB,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAID,YAAY,IAAIE,QAAQ,EAAE;MAC5B,OAAOb,IAAA;QAAKgB,GAAG,EAAEH,QAAS;QAACI,GAAG,EAAEN;MAAa,CAAE,CAAC;IAClD;IAEA,OAAOX,IAAA,CAACF,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACa,YAAY,EAAEC,aAAa,EAAEC,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIC,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5Dd,IAAA,CAACS,cAAc;IACb,cAAYK,aAAa,CAACI,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAEL,aAAa,CAACK,IAAK;IACzBC,OAAO,EAAEN,aAAa,CAACM,OAAQ;IAAAC,QAAA,EAE9BN;EAAI,CACS,CAAC,GAEjBf,IAAA,CAACC,mBAAmB;IAClBqB,IAAI,EAAC,cAAc;IACnB,cAAYR,aAAa,CAACI,SAAU;IACpC,WAAQ,qBAAqB;IAC7BE,OAAO,EAAEN,aAAa,CAACM,OAAQ;IAC/BhB,iBAAiB,EAAEmB,OAAO,CAACT,aAAa,CAACM,OAAO,CAAC,IAAIN,aAAa,CAACK,IAAK;IAAAE,QAAA,EAEvEN;EAAI,CACc,CACtB;AACH,CAAC;AAED,MAAMS,mBAAmB,GAAG7B,IAAI,CAACe,WAAW,CAAC;AAC7Cc,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAId,WAAW","ignoreList":[]}

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

@@ -31,7 +31,7 @@ const StyledToggleButton = styled(_Button, {
   width: odysseyDesignTokens.Spacing6,
   height: odysseyDesignTokens.Spacing6,
   border: 0,
-  zIndex: 2,
+  zIndex: 200,
   "&:focus-visible": {
     boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
     outline: "none"

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavToggleButton.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","styled","useTranslation","generateContrastColors","MuiPropsContext","useOdysseyDesignTokens","Tooltip","useUiShellContext","jsx","_jsx","jsxs","_jsxs","StyledToggleButton","_Button","shouldForwardProp","prop","isSideNavCollapsed","odysseyDesignTokens","toggleContrastColors","backgroundColor","position","width","Spacing6","height","border","zIndex","boxShadow","PalettePrimaryMain","outline","animation","TransitionDurationMain","animationFillMode","transform","span","top","left","Spacing4","HueNeutral600","transition","fontColor","SideNavToggleButton","ariaControls","buttonRef","id","onClick","tabIndex","t","uiShellContext","localButtonRef","hasNonStandardAppBackgroundColor","appBackgroundColor","HueNeutralWhite","HueNeutral50","undefined","focus","current","toggleLabel","renderButton","muiProps","ref","element","variant","children","ariaType","placement","text","Consumer","MemoizedSideNavToggleButton","displayName"],"sources":["../../../../src/ui-shell/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 {\n  ContrastColors,\n  generateContrastColors,\n} from \"../../createContrastColors.js\";\nimport { FocusHandle } from \"../../inputUtils.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { useUiShellContext } from \"../../ui-shell/UiShellProvider.js\";\n\nconst StyledToggleButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isSideNavCollapsed\" &&\n    prop !== \"toggleContrastColors\",\n})<{\n  isSideNavCollapsed: boolean;\n  odysseyDesignTokens: DesignTokens;\n  toggleContrastColors?: ContrastColors;\n}>(({ isSideNavCollapsed, odysseyDesignTokens, toggleContrastColors }) => ({\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-visible\": {\n    backgroundColor: \"transparent\",\n\n    \"#lineOne\": {\n      animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} 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: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} 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: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} 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: \"translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)\",\n          },\n        },\n      },\n\n      \"#lineTwo\": {\n        animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} 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.HueNeutral600,\n    transform: \"translate3d(-50%, -50%, 0)\",\n    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n\n    ...(toggleContrastColors?.fontColor && {\n      backgroundColor: toggleContrastColors.fontColor,\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  const uiShellContext = useUiShellContext();\n\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n  const toggleContrastColors = useMemo(() => {\n    const hasNonStandardAppBackgroundColor =\n      uiShellContext?.appBackgroundColor &&\n      uiShellContext?.appBackgroundColor !==\n        odysseyDesignTokens.HueNeutralWhite &&\n      uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutral50;\n\n    if (hasNonStandardAppBackgroundColor) {\n      return generateContrastColors(\n        uiShellContext.appBackgroundColor,\n        odysseyDesignTokens,\n      );\n    }\n\n    return undefined;\n  }, [odysseyDesignTokens, uiShellContext]);\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-se=\"sidenav-toggle-button\"\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          toggleContrastColors={toggleContrastColors}\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      toggleContrastColors,\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":"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","ignoreList":[]}
+{"version":3,"file":"SideNavToggleButton.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","styled","useTranslation","generateContrastColors","MuiPropsContext","useOdysseyDesignTokens","Tooltip","useUiShellContext","jsx","_jsx","jsxs","_jsxs","StyledToggleButton","_Button","shouldForwardProp","prop","isSideNavCollapsed","odysseyDesignTokens","toggleContrastColors","backgroundColor","position","width","Spacing6","height","border","zIndex","boxShadow","PalettePrimaryMain","outline","animation","TransitionDurationMain","animationFillMode","transform","span","top","left","Spacing4","HueNeutral600","transition","fontColor","SideNavToggleButton","ariaControls","buttonRef","id","onClick","tabIndex","t","uiShellContext","localButtonRef","hasNonStandardAppBackgroundColor","appBackgroundColor","HueNeutralWhite","HueNeutral50","undefined","focus","current","toggleLabel","renderButton","muiProps","ref","element","variant","children","ariaType","placement","text","Consumer","MemoizedSideNavToggleButton","displayName"],"sources":["../../../../src/ui-shell/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 {\n  ContrastColors,\n  generateContrastColors,\n} from \"../../createContrastColors.js\";\nimport { FocusHandle } from \"../../inputUtils.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { useUiShellContext } from \"../../ui-shell/UiShellProvider.js\";\n\nconst StyledToggleButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isSideNavCollapsed\" &&\n    prop !== \"toggleContrastColors\",\n})<{\n  isSideNavCollapsed: boolean;\n  odysseyDesignTokens: DesignTokens;\n  toggleContrastColors?: ContrastColors;\n}>(({ isSideNavCollapsed, odysseyDesignTokens, toggleContrastColors }) => ({\n  backgroundColor: \"transparent\",\n  position: \"relative\",\n  width: odysseyDesignTokens.Spacing6,\n  height: odysseyDesignTokens.Spacing6,\n  border: 0,\n  zIndex: 200,\n\n  \"&:focus-visible\": {\n    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n    outline: \"none\",\n  },\n\n  \"&:hover, &:focus-visible\": {\n    backgroundColor: \"transparent\",\n\n    \"#lineOne\": {\n      animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} 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: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} 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: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} 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: \"translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)\",\n          },\n        },\n      },\n\n      \"#lineTwo\": {\n        animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} 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.HueNeutral600,\n    transform: \"translate3d(-50%, -50%, 0)\",\n    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n\n    ...(toggleContrastColors?.fontColor && {\n      backgroundColor: toggleContrastColors.fontColor,\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  const uiShellContext = useUiShellContext();\n\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n  const toggleContrastColors = useMemo(() => {\n    const hasNonStandardAppBackgroundColor =\n      uiShellContext?.appBackgroundColor &&\n      uiShellContext?.appBackgroundColor !==\n        odysseyDesignTokens.HueNeutralWhite &&\n      uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutral50;\n\n    if (hasNonStandardAppBackgroundColor) {\n      return generateContrastColors(\n        uiShellContext.appBackgroundColor,\n        odysseyDesignTokens,\n      );\n    }\n\n    return undefined;\n  }, [odysseyDesignTokens, uiShellContext]);\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-se=\"sidenav-toggle-button\"\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          toggleContrastColors={toggleContrastColors}\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      toggleContrastColors,\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":"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","ignoreList":[]}

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

@@ -1 +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 = { isSameBackgroundAsMain?: boolean } & (\n  | LogoWithLink\n  | LogoWithNoLink\n) &\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\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":"","ignoreList":[]}
+{"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/UiShellContent.js

@@ -26,22 +26,22 @@ const fullHeightStyles = {
 };
 const emptySideNavItems = [];
 const StyledAppContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+  shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
 })(({
   appBackgroundColor
 }) => ({
   gridArea: "app-content",
   backgroundColor: appBackgroundColor
 }));
-const StyledBannersContainer = styled("div")(() => ({
+const StyledBannersContainer = styled("div")({
   gridArea: "banners"
-}));
-const StyledAppSwitcherContainer = styled("div")(() => ({
+});
+const StyledAppSwitcherContainer = styled("div")({
   gridArea: "app-switcher"
-}));
-const StyledSideNavContainer = styled("div")(() => ({
+});
+const StyledSideNavContainer = styled("div")({
   gridArea: "side-nav"
-}));
+});
 const StyledShellContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
@@ -60,20 +60,25 @@ const StyledShellContainer = styled("div", {
   height: "100vh",
   width: "100vw"
 }));
-const StyledTopNavContainer = styled("div")(() => ({
+const StyledTopNavContainer = styled("div")({
   gridArea: "top-nav"
-}));
+});
 export const subComponentNames = ["TopNav", "SideNav", "AppSwitcher"];
-const setStylesToMatchElement = (elementToStyle, elementToReference, additionalStyles) => {
-  const boundingRect = elementToReference.getBoundingClientRect();
-  elementToStyle.style.setProperty("position", "absolute");
-  elementToStyle.style.setProperty("top", `${boundingRect.y}px`);
-  elementToStyle.style.setProperty("left", `${boundingRect.x}px`);
-  elementToStyle.style.setProperty("width", `${boundingRect.width}px`);
-  elementToStyle.style.setProperty("height", `${boundingRect.height}px`);
-  for (const key in additionalStyles) {
-    elementToStyle.style.setProperty(key, additionalStyles[key]);
-  }
+export const convertCamelCaseToKebabCase = string => string.replace(/([A-Z])/g, "-$1").toLowerCase();
+export const setStylesToMatchElement = ({
+  additionalStyles,
+  appContainerElement,
+  appContentReferenceElement
+}) => {
+  const boundingRect = appContentReferenceElement.getBoundingClientRect();
+  appContainerElement.style.setProperty("position", "absolute");
+  appContainerElement.style.setProperty("top", `${boundingRect.y}px`);
+  appContainerElement.style.setProperty("left", `${boundingRect.x}px`);
+  appContainerElement.style.setProperty("width", `${boundingRect.width}px`);
+  appContainerElement.style.setProperty("height", `${boundingRect.height}px`);
+  Object.entries(additionalStyles).forEach(([cssPropertyName, cssPropertyValue]) => {
+    appContainerElement.style.setProperty(convertCamelCaseToKebabCase(cssPropertyName), String(cssPropertyValue));
+  });
 };
 const UiShellContent = ({
   appContainerElement,
@@ -94,20 +99,20 @@ const UiShellContent = ({
   const sideNavContainerRef = useRef(null);
   const topNavContainerRef = useRef(null);
   const uiShellContext = useUiShellContext();
-  const paddingStyles = useMemo(() => ({
+  const appContainerElementStyles = useMemo(() => ({
     ...(hasStandardAppContentPadding ? {
-      "padding-block": odysseyDesignTokens.Spacing5 ?? null,
-      "padding-inline": odysseyDesignTokens.Spacing8 ?? null
+      paddingBlock: odysseyDesignTokens.Spacing5 ?? null,
+      paddingInline: odysseyDesignTokens.Spacing8 ?? null
     } : {}),
     ...(appContainerScrollingMode === "horizontal" || appContainerScrollingMode === "both" ? {
-      "overflow-x": "auto"
+      overflowX: "auto"
     } : {
-      "overflow-x": "hidden"
+      overflowX: "hidden"
     }),
     ...(appContainerScrollingMode === "vertical" || appContainerScrollingMode === "both" ? {
-      "overflow-y": "auto"
+      overflowY: "auto"
     } : {
-      "overflow-y": "hidden"
+      overflowY: "hidden"
     })
   }), [hasStandardAppContentPadding, appContainerScrollingMode, odysseyDesignTokens]);
   useEffect(() => {
@@ -117,23 +122,32 @@ const UiShellContent = ({
         cancelAnimationFrame(animationFrameId);
         animationFrameId = requestAnimationFrame(() => {
           if (appContainerRef.current) {
-            setStylesToMatchElement(appContainerElement, appContainerRef.current, paddingStyles);
+            setStylesToMatchElement({
+              additionalStyles: appContainerElementStyles,
+              appContentReferenceElement: appContainerRef.current,
+              appContainerElement
+            });
           }
         });
       };
+      const sideNavElement = sideNavContainerRef.current;
+      sideNavElement?.addEventListener("transitionend", updateStyles);
       const observer = new ResizeObserver(updateStyles);
       observer.observe(appContainerRef.current);
-      if (sideNavContainerRef.current) {
-        observer.observe(sideNavContainerRef.current);
+      if (sideNavElement) {
+        observer.observe(sideNavElement);
       }
       if (topNavContainerRef.current) {
         observer.observe(topNavContainerRef.current);
       }
       updateStyles();
-      return () => observer.disconnect();
+      return () => {
+        observer.disconnect();
+        sideNavElement?.removeEventListener("transitionend", updateStyles);
+      };
     }
     return () => {};
-  }, [appContainerRef, appContainerElement, paddingStyles]);
+  }, [appContainerElement, appContainerElementStyles, appContainerRef]);
   return _jsxs(StyledShellContainer, {
     odysseyDesignTokens: odysseyDesignTokens,
     children: [_jsx(StyledBannersContainer, {

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

@@ -1 +1 @@
-{"version":3,"file":"UiShellContent.js","names":["styled","memo","useEffect","useMemo","useRef","ErrorBoundary","AppSwitcher","SideNav","TopNav","useOdysseyDesignTokens","useScrollState","useUiShellContext","jsx","_jsx","jsxs","_jsxs","fullHeightStyles","height","emptySideNavItems","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","gridArea","backgroundColor","StyledBannersContainer","StyledAppSwitcherContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","width","StyledTopNavContainer","subComponentNames","setStylesToMatchElement","elementToStyle","elementToReference","additionalStyles","boundingRect","getBoundingClientRect","style","setProperty","y","x","key","UiShellContent","appContainerElement","hasStandardAppContentPadding","appContainerScrollingMode","initialVisibleSections","onError","console","error","optionalComponents","appSwitcherProps","sideNavProps","topNavProps","isContentScrolled","scrollableContentRef","appContainerRef","sideNavContainerRef","topNavContainerRef","uiShellContext","paddingStyles","Spacing5","Spacing8","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","observer","ResizeObserver","observe","disconnect","children","banners","_ScopedCssBaseline","sx","includes","fallback","isLoading","appIcons","selectedAppName","ref","undefined","appName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","isScrolled","tabIndex","MemoizedUiShellContent","displayName"],"sources":["../../../src/ui-shell/UiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo, useEffect, useMemo, useRef, type ReactElement } from \"react\";\nimport { ErrorBoundary, ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcher, type AppSwitcherProps } from \"./AppSwitcher/index.js\";\nimport { SideNav, type SideNavProps } from \"./SideNav/index.js\";\nimport { TopNav, type TopNavProps } from \"./TopNav/index.js\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nconst fullHeightStyles = { height: \"100%\" };\n\nconst emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  gridArea: \"app-content\",\n  backgroundColor: appBackgroundColor,\n}));\n\nconst StyledBannersContainer = styled(\"div\")(() => ({\n  gridArea: \"banners\",\n}));\n\nconst StyledAppSwitcherContainer = styled(\"div\")(() => ({\n  gridArea: \"app-switcher\",\n}));\n\nconst StyledSideNavContainer = styled(\"div\")(() => ({\n  gridArea: \"side-nav\",\n}));\n\nconst StyledShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners banners banners\"\n    \"app-switcher side-nav top-nav\"\n    \"app-switcher side-nav app-content\"\n  `,\n  gridTemplateColumns: \"auto auto 1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNavContainer = styled(\"div\")(() => ({\n  gridArea: \"top-nav\",\n}));\n\nexport const subComponentNames = [\"TopNav\", \"SideNav\", \"AppSwitcher\"] as const;\nexport type SubComponentName = (typeof subComponentNames)[number];\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   */\n  appSwitcherProps?: AppSwitcherProps;\n  /**\n   * Object that gets pass directly to the side nav component. If `undefined` and in `initialVisibleSections`, SideNav will be initially rendered. Pass `null` to hide a previously-visible SideNav.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\"> | null;\n  /**\n   * Object that gets pass directly to the top nav component. If `undefined` and in `initialVisibleSections`, TopNav will be initially rendered. Pass `null` to hide a previously-visible TopNav.\n   */\n  topNavProps?: Omit<\n    TopNavProps,\n    \"leftSideComponent\" | \"rightSideComponent\"\n  > | null;\n};\n\nexport type UiShellContentProps = {\n  /**\n   * Sets a custom background color for the app content area.\n   */\n  appBackgroundColor?: string;\n  /**\n   * Sets either a gray or white background color for the app content area.\n   */\n  appBackgroundContrastMode?: ContrastMode;\n  /**\n   * The element within which the app will be rendered. This will be positioned appropriately while being kept out of the shadow DOM.\n   */\n  appContainerElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app content area. Defaults to \"vertical\".\n   */\n  appContainerScrollingMode?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * defaults to `true`. If `false`, the content area will have no padding provided\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Which parts of the UI Shell should be visible initially? For example,\n   * if sideNavProps is undefined, should the space for the sidenav be initially visible?\n   */\n  initialVisibleSections?: SubComponentName[];\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, flagging \"p0\"s, and recovering UI Shell when errors occur.\n   */\n  onError?: ErrorBoundaryProps[\"onError\"];\n  /**\n   * Components that will render as children of various other components such as the top nav or side nav.\n   */\n  optionalComponents?: {\n    banners?: ReactElement;\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n} & UiShellNavComponentProps;\n\nconst setStylesToMatchElement = (\n  elementToStyle: HTMLElement,\n  elementToReference: HTMLElement,\n  additionalStyles: Record<string, string | null>,\n) => {\n  const boundingRect = elementToReference.getBoundingClientRect();\n  elementToStyle.style.setProperty(\"position\", \"absolute\");\n  elementToStyle.style.setProperty(\"top\", `${boundingRect.y}px`);\n  elementToStyle.style.setProperty(\"left\", `${boundingRect.x}px`);\n  elementToStyle.style.setProperty(\"width\", `${boundingRect.width}px`);\n  elementToStyle.style.setProperty(\"height\", `${boundingRect.height}px`);\n  for (const key in additionalStyles) {\n    elementToStyle.style.setProperty(key, additionalStyles[key]);\n  }\n};\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShellContent = ({\n  appContainerElement,\n  hasStandardAppContentPadding = true,\n  appContainerScrollingMode = \"vertical\",\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  appSwitcherProps,\n  sideNavProps,\n  topNavProps,\n}: UiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isContentScrolled, scrollableContentRef: appContainerRef } =\n    useScrollState(appContainerElement);\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellContext = useUiShellContext();\n\n  const paddingStyles = useMemo<Record<string, string | null>>(\n    () => ({\n      ...(hasStandardAppContentPadding\n        ? {\n            \"padding-block\": odysseyDesignTokens.Spacing5 ?? null,\n            \"padding-inline\": odysseyDesignTokens.Spacing8 ?? null,\n          }\n        : {}),\n      ...(appContainerScrollingMode === \"horizontal\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            \"overflow-x\": \"auto\",\n          }\n        : {\n            \"overflow-x\": \"hidden\",\n          }),\n      ...(appContainerScrollingMode === \"vertical\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            \"overflow-y\": \"auto\",\n          }\n        : {\n            \"overflow-y\": \"hidden\",\n          }),\n    }),\n    [\n      hasStandardAppContentPadding,\n      appContainerScrollingMode,\n      odysseyDesignTokens,\n    ],\n  );\n\n  useEffect(() => {\n    // Once appContainerRef is rendered, we can position appContainerElement on top\n    if (appContainerRef.current && appContainerElement) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n        animationFrameId = requestAnimationFrame(() => {\n          if (appContainerRef.current) {\n            setStylesToMatchElement(\n              appContainerElement,\n              appContainerRef.current,\n              paddingStyles,\n            );\n          }\n        });\n      };\n\n      // Setup a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n      observer.observe(appContainerRef.current);\n\n      if (sideNavContainerRef.current) {\n        observer.observe(sideNavContainerRef.current);\n      }\n\n      if (topNavContainerRef.current) {\n        observer.observe(topNavContainerRef.current);\n      }\n\n      // Set the initial style\n      updateStyles();\n      return () => observer.disconnect();\n    }\n    return () => {};\n  }, [appContainerRef, appContainerElement, paddingStyles]);\n\n  return (\n    <StyledShellContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledAppSwitcherContainer>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If AppSwitcher should be initially visible and we have not yet received props, render AppSwitcher in the loading state */\n            initialVisibleSections?.includes(\"AppSwitcher\") &&\n              !appSwitcherProps && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <AppSwitcher isLoading appIcons={[]} selectedAppName=\"\" />\n                </ErrorBoundary>\n              )\n          }\n          {appSwitcherProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <AppSwitcher {...appSwitcherProps} />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer ref={sideNavContainerRef}>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n            initialVisibleSections?.includes(\"SideNav\") &&\n              sideNavProps === undefined && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <SideNav\n                    isLoading\n                    appName=\"\"\n                    sideNavItems={emptySideNavItems}\n                  />\n                </ErrorBoundary>\n              )\n          }\n          {sideNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <SideNav\n                {...{\n                  ...sideNavProps,\n                  ...(sideNavProps.hasCustomFooter &&\n                  optionalComponents?.sideNavFooter\n                    ? {\n                        footerComponent: optionalComponents.sideNavFooter,\n                        footerItems: undefined,\n                        hasCustomFooter: sideNavProps.hasCustomFooter,\n                      }\n                    : {\n                        footerItems: sideNavProps.footerItems,\n                        hasCustomFooter: false,\n                      }),\n                }}\n              />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledSideNavContainer>\n      <StyledTopNavContainer ref={topNavContainerRef}>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If TopNav should be initially visible and we have not yet received props, render Topnav with minimal inputs */\n            initialVisibleSections?.includes(\"TopNav\") &&\n              topNavProps === undefined && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <TopNav\n                    leftSideComponent={optionalComponents?.topNavLeftSide}\n                    rightSideComponent={optionalComponents?.topNavRightSide}\n                  />\n                </ErrorBoundary>\n              )\n          }\n          {topNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <TopNav\n                {...topNavProps}\n                isScrolled={isContentScrolled}\n                leftSideComponent={optionalComponents?.topNavLeftSide}\n                rightSideComponent={optionalComponents?.topNavRightSide}\n              />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        tabIndex={0}\n        ref={appContainerRef}\n      />\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedUiShellContent = memo(UiShellContent);\nMemoizedUiShellContent.displayName = \"UiShellContent\";\n\nexport { MemoizedUiShellContent as UiShellContent };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"UiShellContent.js","names":["styled","memo","useEffect","useMemo","useRef","ErrorBoundary","AppSwitcher","SideNav","TopNav","useOdysseyDesignTokens","useScrollState","useUiShellContext","jsx","_jsx","jsxs","_jsxs","fullHeightStyles","height","emptySideNavItems","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","gridArea","backgroundColor","StyledBannersContainer","StyledAppSwitcherContainer","StyledSideNavContainer","StyledShellContainer","odysseyDesignTokens","HueNeutral50","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","width","StyledTopNavContainer","subComponentNames","convertCamelCaseToKebabCase","string","replace","toLowerCase","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","boundingRect","getBoundingClientRect","style","setProperty","y","x","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","UiShellContent","hasStandardAppContentPadding","appContainerScrollingMode","initialVisibleSections","onError","console","error","optionalComponents","appSwitcherProps","sideNavProps","topNavProps","isContentScrolled","scrollableContentRef","appContainerRef","sideNavContainerRef","topNavContainerRef","uiShellContext","appContainerElementStyles","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","sideNavElement","addEventListener","observer","ResizeObserver","observe","disconnect","removeEventListener","children","banners","_ScopedCssBaseline","sx","includes","fallback","isLoading","appIcons","selectedAppName","ref","undefined","appName","sideNavItems","hasCustomFooter","sideNavFooter","footerComponent","footerItems","leftSideComponent","topNavLeftSide","rightSideComponent","topNavRightSide","isScrolled","tabIndex","MemoizedUiShellContent","displayName"],"sources":["../../../src/ui-shell/UiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  CSSProperties,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactElement,\n} from \"react\";\nimport { ErrorBoundary, ErrorBoundaryProps } from \"react-error-boundary\";\n\nimport { AppSwitcher, type AppSwitcherProps } from \"./AppSwitcher/index.js\";\nimport { SideNav, type SideNavProps } from \"./SideNav/index.js\";\nimport { TopNav, type TopNavProps } from \"./TopNav/index.js\";\nimport {\n  useOdysseyDesignTokens,\n  type DesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nconst fullHeightStyles = { height: \"100%\" };\n\nconst emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  gridArea: \"app-content\",\n  backgroundColor: appBackgroundColor,\n}));\n\nconst StyledBannersContainer = styled(\"div\")({\n  gridArea: \"banners\",\n});\n\nconst StyledAppSwitcherContainer = styled(\"div\")({\n  gridArea: \"app-switcher\",\n});\n\nconst StyledSideNavContainer = styled(\"div\")({\n  gridArea: \"side-nav\",\n});\n\nconst StyledShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners banners banners\"\n    \"app-switcher side-nav top-nav\"\n    \"app-switcher side-nav app-content\"\n  `,\n  gridTemplateColumns: \"auto auto 1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNavContainer = styled(\"div\")({\n  gridArea: \"top-nav\",\n});\n\nexport const subComponentNames = [\"TopNav\", \"SideNav\", \"AppSwitcher\"] as const;\nexport type SubComponentName = (typeof subComponentNames)[number];\n\nexport type UiShellNavComponentProps = {\n  /**\n   * Object that gets pass directly to the app switcher component.\n   */\n  appSwitcherProps?: AppSwitcherProps;\n  /**\n   * Object that gets pass directly to the side nav component. If `undefined` and in `initialVisibleSections`, SideNav will be initially rendered. Pass `null` to hide a previously-visible SideNav.\n   */\n  sideNavProps?: Omit<SideNavProps, \"footerComponent\"> | null;\n  /**\n   * Object that gets pass directly to the top nav component. If `undefined` and in `initialVisibleSections`, TopNav will be initially rendered. Pass `null` to hide a previously-visible TopNav.\n   */\n  topNavProps?: Omit<\n    TopNavProps,\n    \"leftSideComponent\" | \"rightSideComponent\"\n  > | null;\n};\n\nexport type UiShellContentProps = {\n  /**\n   * Sets a custom background color for the app content area.\n   */\n  appBackgroundColor?: string;\n  /**\n   * Sets either a gray or white background color for the app content area.\n   */\n  appBackgroundContrastMode?: ContrastMode;\n  /**\n   * When passed, the app is expected to render into this element, not the Shadow DOM. UI Shell will position this element appropriately as if it was rendered in the app content area of the Shadow DOM.\n   */\n  appContainerElement: HTMLDivElement;\n  /**\n   * Controls the scrolling behavior of the app content area. Defaults to \"vertical\".\n   */\n  appContainerScrollingMode?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\n  /**\n   * defaults to `true`. If `false`, the content area will have no padding provided\n   */\n  hasStandardAppContentPadding?: boolean;\n  /**\n   * Which parts of the UI Shell should be visible initially? For example,\n   * if sideNavProps is undefined, should the space for the sidenav be initially visible?\n   */\n  initialVisibleSections?: SubComponentName[];\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, flagging \"p0\"s, and recovering UI Shell when errors occur.\n   */\n  onError?: ErrorBoundaryProps[\"onError\"];\n  /**\n   * Components that will render as children of various other components such as the top nav or side nav.\n   */\n  optionalComponents?: {\n    banners?: ReactElement;\n    sideNavFooter?: SideNavProps[\"footerComponent\"];\n    topNavLeftSide?: TopNavProps[\"leftSideComponent\"];\n    topNavRightSide?: TopNavProps[\"rightSideComponent\"];\n  };\n} & UiShellNavComponentProps;\n\nexport const convertCamelCaseToKebabCase = (string: string) =>\n  string.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\nexport const setStylesToMatchElement = ({\n  additionalStyles,\n  appContainerElement,\n  appContentReferenceElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n}) => {\n  const boundingRect = appContentReferenceElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\"top\", `${boundingRect.y}px`);\n  appContainerElement.style.setProperty(\"left\", `${boundingRect.x}px`);\n  appContainerElement.style.setProperty(\"width\", `${boundingRect.width}px`);\n  appContainerElement.style.setProperty(\"height\", `${boundingRect.height}px`);\n\n  (\n    Object.entries(additionalStyles) as Array<\n      [\n        keyof typeof additionalStyles,\n        (typeof additionalStyles)[keyof typeof additionalStyles],\n      ]\n    >\n  ).forEach(([cssPropertyName, cssPropertyValue]) => {\n    appContainerElement.style.setProperty(\n      convertCamelCaseToKebabCase(cssPropertyName),\n      String(cssPropertyValue),\n    );\n  });\n};\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShellContent = ({\n  appContainerElement,\n  hasStandardAppContentPadding = true,\n  appContainerScrollingMode = \"vertical\",\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  appSwitcherProps,\n  sideNavProps,\n  topNavProps,\n}: UiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isContentScrolled, scrollableContentRef: appContainerRef } =\n    useScrollState(appContainerElement);\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellContext = useUiShellContext();\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      ...(hasStandardAppContentPadding\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5 ?? null,\n            paddingInline: odysseyDesignTokens.Spacing8 ?? null,\n          }\n        : {}),\n      ...(appContainerScrollingMode === \"horizontal\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n      ...(appContainerScrollingMode === \"vertical\" ||\n      appContainerScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [\n      hasStandardAppContentPadding,\n      appContainerScrollingMode,\n      odysseyDesignTokens,\n    ],\n  );\n\n  useEffect(() => {\n    // Once appContainerRef is rendered, we can position appContainerElement on top\n    if (appContainerRef.current && appContainerElement) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n        animationFrameId = requestAnimationFrame(() => {\n          if (appContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: appContainerRef.current,\n              appContainerElement,\n            });\n          }\n        });\n      };\n\n      // This element might have changed from `.current`, so it's important to keep track of the old one when we attach event listeners.\n      const sideNavElement = sideNavContainerRef.current;\n\n      sideNavElement?.addEventListener(\"transitionend\", updateStyles);\n\n      // Setup a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n      observer.observe(appContainerRef.current);\n\n      if (sideNavElement) {\n        observer.observe(sideNavElement);\n      }\n\n      if (topNavContainerRef.current) {\n        observer.observe(topNavContainerRef.current);\n      }\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n        sideNavElement?.removeEventListener(\"transitionend\", updateStyles);\n      };\n    }\n    return () => {};\n  }, [appContainerElement, appContainerElementStyles, appContainerRef]);\n\n  return (\n    <StyledShellContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <StyledBannersContainer>\n        {optionalComponents?.banners}\n      </StyledBannersContainer>\n\n      <StyledAppSwitcherContainer>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If AppSwitcher should be initially visible and we have not yet received props, render AppSwitcher in the loading state */\n            initialVisibleSections?.includes(\"AppSwitcher\") &&\n              !appSwitcherProps && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <AppSwitcher isLoading appIcons={[]} selectedAppName=\"\" />\n                </ErrorBoundary>\n              )\n          }\n          {appSwitcherProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <AppSwitcher {...appSwitcherProps} />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledAppSwitcherContainer>\n\n      <StyledSideNavContainer ref={sideNavContainerRef}>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n            initialVisibleSections?.includes(\"SideNav\") &&\n              sideNavProps === undefined && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <SideNav\n                    isLoading\n                    appName=\"\"\n                    sideNavItems={emptySideNavItems}\n                  />\n                </ErrorBoundary>\n              )\n          }\n          {sideNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <SideNav\n                {...{\n                  ...sideNavProps,\n                  ...(sideNavProps.hasCustomFooter &&\n                  optionalComponents?.sideNavFooter\n                    ? {\n                        footerComponent: optionalComponents.sideNavFooter,\n                        footerItems: undefined,\n                        hasCustomFooter: sideNavProps.hasCustomFooter,\n                      }\n                    : {\n                        footerItems: sideNavProps.footerItems,\n                        hasCustomFooter: false,\n                      }),\n                }}\n              />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledSideNavContainer>\n      <StyledTopNavContainer ref={topNavContainerRef}>\n        <ScopedCssBaseline sx={fullHeightStyles}>\n          {\n            /* If TopNav should be initially visible and we have not yet received props, render Topnav with minimal inputs */\n            initialVisibleSections?.includes(\"TopNav\") &&\n              topNavProps === undefined && (\n                <ErrorBoundary fallback={null} onError={onError}>\n                  <TopNav\n                    leftSideComponent={optionalComponents?.topNavLeftSide}\n                    rightSideComponent={optionalComponents?.topNavRightSide}\n                  />\n                </ErrorBoundary>\n              )\n          }\n          {topNavProps && (\n            <ErrorBoundary fallback={null} onError={onError}>\n              <TopNav\n                {...topNavProps}\n                isScrolled={isContentScrolled}\n                leftSideComponent={optionalComponents?.topNavLeftSide}\n                rightSideComponent={optionalComponents?.topNavRightSide}\n              />\n            </ErrorBoundary>\n          )}\n        </ScopedCssBaseline>\n      </StyledTopNavContainer>\n\n      <StyledAppContainer\n        appBackgroundColor={uiShellContext?.appBackgroundColor}\n        tabIndex={0}\n        ref={appContainerRef}\n      />\n    </StyledShellContainer>\n  );\n};\n\nconst MemoizedUiShellContent = memo(UiShellContent);\nMemoizedUiShellContent.displayName = \"UiShellContent\";\n\nexport { MemoizedUiShellContent as UiShellContent };\n"],"mappings":"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","ignoreList":[]}

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

@@ -17,4 +17,5 @@ export * from "./TopNav/index.js";
 export * from "./useHasUiShell.js";
 export * from "../web-component/renderReactInWebComponent.js";
 export { UiShell } from "./UiShell.js";
+export { UiShellContent } from "./UiShellContent.js";
 //# sourceMappingURL=index.js.map

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

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

package/dist/esm/useContrastMode.js

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { createContext, useContext, useRef, useLayoutEffect, useState, useCallback } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import * as Tokens from "@okta/odyssey-design-tokens";
 import { hexToRgb } from "./hexToRgb.js";
 export const ContrastModeContext = createContext({
@@ -56,7 +56,7 @@ export const useContrastMode = ({
       setContrastMode(newBgColor === Tokens.HueNeutral50 ? "highContrast" : "lowContrast");
     }
   }, [explicitContrastMode]);
-  useLayoutEffect(() => {
+  useEffect(() => {
     const observer = new MutationObserver(updateBackgroundColor);
     observer.observe(document.querySelector("html"), {
       attributes: true,

package/dist/esm/useContrastMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"useContrastMode.js","names":["createContext","useContext","useRef","useLayoutEffect","useState","useCallback","Tokens","hexToRgb","ContrastModeContext","contrastMode","defaultContrast","useContrastModeContext","hueNeutral50Rgb","HueNeutral50","asFormattedString","isTransparentColor","color","normalizeRgbaToRgb","rgba","replace","getElementComputedBackgroundColor","element","window","getComputedStyle","backgroundColor","normalizeBackgroundColor","bgColor","test","normalizedColor","defaultParentBackgroundColor","getBackgroundColor","parentElement","useContrastMode","explicitContrastMode","contrastContainerRef","existingContrastMode","parentBackgroundColor","setParentBackgroundColor","setContrastMode","updateBackgroundColor","newBgColor","current","observer","MutationObserver","observe","document","querySelector","attributes","attributeFilter","head","childList","subtree","onTransitionEnd","event","propertyName","addEventListener","removeEventListener","disconnect"],"sources":["../../src/useContrastMode.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createContext,\n  useContext,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useCallback,\n} from \"react\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\n\nimport { hexToRgb } from \"./hexToRgb.js\";\n\nexport type ContrastMode = \"lowContrast\" | \"highContrast\";\nexport type ContrastModeContextType = {\n  contrastMode: ContrastMode;\n};\n\nexport const ContrastModeContext = createContext<ContrastModeContextType>({\n  contrastMode: \"lowContrast\",\n});\n\nexport const defaultContrast = \"lowContrast\";\n\nexport const useContrastModeContext = () => useContext(ContrastModeContext);\n\nexport const hueNeutral50Rgb = hexToRgb(Tokens.HueNeutral50).asFormattedString;\n\nexport const isTransparentColor = (color: string) =>\n  color === \"rgba(0, 0, 0, 0)\" || color === \"transparent\";\n\nexport const normalizeRgbaToRgb = (rgba: string) =>\n  rgba.replace(/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/, \"rgb($1, $2, $3)\");\n\nexport const getElementComputedBackgroundColor = (\n  element: HTMLElement,\n): string => window.getComputedStyle(element).backgroundColor;\n\nexport const normalizeBackgroundColor = (bgColor: string): string => {\n  if (/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/.test(bgColor)) {\n    const normalizedColor = normalizeRgbaToRgb(bgColor);\n    return normalizedColor === hueNeutral50Rgb\n      ? Tokens.HueNeutral50\n      : normalizedColor;\n  }\n\n  return bgColor === hueNeutral50Rgb ? Tokens.HueNeutral50 : bgColor;\n};\n\nexport const defaultParentBackgroundColor = \"#ffffff\";\n\n/**\n * Determines the effective background color of an element.\n *\n * @param element - The HTML element to check.\n * @returns The effective background color. Returns  defaultParentBackgroundColor if no non-transparent background is found.\n *\n * Note:\n * - Low contrast mode is used for white background (defaultParentBackgroundColor or HueNeutralWhite).\n * - High contrast mode is used for gray background (#f4f4f4 or HueNeutral50).\n */\nexport const getBackgroundColor = (element: HTMLElement | null): string => {\n  while (element) {\n    const bgColor = getElementComputedBackgroundColor(element);\n    if (!isTransparentColor(bgColor)) {\n      return normalizeBackgroundColor(bgColor);\n    }\n    element = element.parentElement;\n  }\n  return defaultParentBackgroundColor; // Default to white/low contrast if no background color is found\n};\n\ntype UseContrastModeProps = {\n  contrastMode?: ContrastMode;\n};\n\nexport const useContrastMode = ({\n  contrastMode: explicitContrastMode,\n}: UseContrastModeProps) => {\n  const contrastContainerRef = useRef<HTMLDivElement>(null);\n  const { contrastMode: existingContrastMode } = useContrastModeContext();\n\n  const [parentBackgroundColor, setParentBackgroundColor] = useState(\n    defaultParentBackgroundColor,\n  );\n  const [contrastMode, setContrastMode] = useState<ContrastMode>(\n    () => explicitContrastMode || existingContrastMode,\n  );\n\n  const updateBackgroundColor = useCallback(() => {\n    const newBgColor = getBackgroundColor(contrastContainerRef.current);\n    setParentBackgroundColor(newBgColor);\n\n    if (!explicitContrastMode) {\n      setContrastMode(\n        newBgColor === Tokens.HueNeutral50 ? \"highContrast\" : \"lowContrast\",\n      );\n    }\n  }, [explicitContrastMode]);\n\n  useLayoutEffect(() => {\n    const observer = new MutationObserver(updateBackgroundColor);\n    observer.observe(document.querySelector(\"html\") as HTMLHtmlElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"style\"],\n    });\n    observer.observe(document.head, {\n      childList: true,\n      subtree: true,\n    });\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"background-color\") {\n        updateBackgroundColor();\n      }\n    };\n\n    document.addEventListener(\"transitionend\", onTransitionEnd);\n    updateBackgroundColor();\n\n    return () => {\n      document.removeEventListener(\"transitionend\", onTransitionEnd);\n      observer.disconnect();\n    };\n  }, [updateBackgroundColor]);\n\n  return {\n    contrastContainerRef,\n    contrastMode,\n    parentBackgroundColor,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useContrastMode.js","names":["createContext","useCallback","useContext","useEffect","useRef","useState","Tokens","hexToRgb","ContrastModeContext","contrastMode","defaultContrast","useContrastModeContext","hueNeutral50Rgb","HueNeutral50","asFormattedString","isTransparentColor","color","normalizeRgbaToRgb","rgba","replace","getElementComputedBackgroundColor","element","window","getComputedStyle","backgroundColor","normalizeBackgroundColor","bgColor","test","normalizedColor","defaultParentBackgroundColor","getBackgroundColor","parentElement","useContrastMode","explicitContrastMode","contrastContainerRef","existingContrastMode","parentBackgroundColor","setParentBackgroundColor","setContrastMode","updateBackgroundColor","newBgColor","current","observer","MutationObserver","observe","document","querySelector","attributes","attributeFilter","head","childList","subtree","onTransitionEnd","event","propertyName","addEventListener","removeEventListener","disconnect"],"sources":["../../src/useContrastMode.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\n\nimport { hexToRgb } from \"./hexToRgb.js\";\n\nexport type ContrastMode = \"lowContrast\" | \"highContrast\";\nexport type ContrastModeContextType = {\n  contrastMode: ContrastMode;\n};\n\nexport const ContrastModeContext = createContext<ContrastModeContextType>({\n  contrastMode: \"lowContrast\",\n});\n\nexport const defaultContrast = \"lowContrast\";\n\nexport const useContrastModeContext = () => useContext(ContrastModeContext);\n\nexport const hueNeutral50Rgb = hexToRgb(Tokens.HueNeutral50).asFormattedString;\n\nexport const isTransparentColor = (color: string) =>\n  color === \"rgba(0, 0, 0, 0)\" || color === \"transparent\";\n\nexport const normalizeRgbaToRgb = (rgba: string) =>\n  rgba.replace(/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/, \"rgb($1, $2, $3)\");\n\nexport const getElementComputedBackgroundColor = (\n  element: HTMLElement,\n): string => window.getComputedStyle(element).backgroundColor;\n\nexport const normalizeBackgroundColor = (bgColor: string): string => {\n  if (/rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)/.test(bgColor)) {\n    const normalizedColor = normalizeRgbaToRgb(bgColor);\n    return normalizedColor === hueNeutral50Rgb\n      ? Tokens.HueNeutral50\n      : normalizedColor;\n  }\n\n  return bgColor === hueNeutral50Rgb ? Tokens.HueNeutral50 : bgColor;\n};\n\nexport const defaultParentBackgroundColor = \"#ffffff\";\n\n/**\n * Determines the effective background color of an element.\n *\n * @param element - The HTML element to check.\n * @returns The effective background color. Returns  defaultParentBackgroundColor if no non-transparent background is found.\n *\n * Note:\n * - Low contrast mode is used for white background (defaultParentBackgroundColor or HueNeutralWhite).\n * - High contrast mode is used for gray background (#f4f4f4 or HueNeutral50).\n */\nexport const getBackgroundColor = (element: HTMLElement | null): string => {\n  while (element) {\n    const bgColor = getElementComputedBackgroundColor(element);\n    if (!isTransparentColor(bgColor)) {\n      return normalizeBackgroundColor(bgColor);\n    }\n    element = element.parentElement;\n  }\n  return defaultParentBackgroundColor; // Default to white/low contrast if no background color is found\n};\n\ntype UseContrastModeProps = {\n  contrastMode?: ContrastMode;\n};\n\nexport const useContrastMode = ({\n  contrastMode: explicitContrastMode,\n}: UseContrastModeProps) => {\n  const contrastContainerRef = useRef<HTMLDivElement>(null);\n  const { contrastMode: existingContrastMode } = useContrastModeContext();\n\n  const [parentBackgroundColor, setParentBackgroundColor] = useState(\n    defaultParentBackgroundColor,\n  );\n  const [contrastMode, setContrastMode] = useState<ContrastMode>(\n    () => explicitContrastMode || existingContrastMode,\n  );\n\n  const updateBackgroundColor = useCallback(() => {\n    const newBgColor = getBackgroundColor(contrastContainerRef.current);\n    setParentBackgroundColor(newBgColor);\n\n    if (!explicitContrastMode) {\n      setContrastMode(\n        newBgColor === Tokens.HueNeutral50 ? \"highContrast\" : \"lowContrast\",\n      );\n    }\n  }, [explicitContrastMode]);\n\n  useEffect(() => {\n    const observer = new MutationObserver(updateBackgroundColor);\n    observer.observe(document.querySelector(\"html\") as HTMLHtmlElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"style\"],\n    });\n    observer.observe(document.head, {\n      childList: true,\n      subtree: true,\n    });\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.propertyName === \"background-color\") {\n        updateBackgroundColor();\n      }\n    };\n\n    document.addEventListener(\"transitionend\", onTransitionEnd);\n    updateBackgroundColor();\n\n    return () => {\n      document.removeEventListener(\"transitionend\", onTransitionEnd);\n      observer.disconnect();\n    };\n  }, [updateBackgroundColor]);\n\n  return {\n    contrastContainerRef,\n    contrastMode,\n    parentBackgroundColor,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 05 Feb 2025 20:20:12 GMT
+ * Generated on Mon, 10 Feb 2025 21:53:20 GMT
  */
 
 module.exports = {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 05 Feb 2025 20:20:12 GMT
+ * Generated on Mon, 10 Feb 2025 21:53:20 GMT
  */
 
 export const BorderColorControl = "#8d8d8d";

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 05 Feb 2025 20:20:12 GMT
+ * Generated on Mon, 10 Feb 2025 21:53:21 GMT
  */
 
 $border-color-control: #8d8d8d !default;