@okta/odyssey-react-mui 1.35.2 → 1.35.4

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

@@ -10,167 +10,139 @@ import _Button from "@mui/material/Button";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
-import { generateContrastColors } from "../../createContrastColors.js";
 import { MuiPropsContext } from "../../MuiPropsContext.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Tooltip } from "../../Tooltip.js";
-import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
 import { UI_SHELL_OVERLAY_Z_INDEX } from "../uiShellSharedConstants.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "../../icons.generated/ChevronRight.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SIDE_NAV_TOGGLE_ICON_SIZE = 24;
+export const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;
 const StyledToggleButton = styled(_Button, {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed" && prop !== "toggleContrastColors"
+  shouldForwardProp: prop => prop !== "clickAreaPadding" && prop !== "odysseyDesignTokens"
 })(({
-  isSideNavCollapsed,
-  odysseyDesignTokens,
-  toggleContrastColors
+  clickAreaPadding,
+  odysseyDesignTokens
 }) => ({
-  backgroundColor: "transparent",
-  position: "relative",
-  width: odysseyDesignTokens.Spacing6,
-  height: odysseyDesignTokens.Spacing6,
   border: 0,
+  height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,
+  left: `-${clickAreaPadding * 2}px`,
+  padding: 0,
+  position: "relative",
+  width: `calc(${SIDE_NAV_TOGGLE_ICON_SIZE}px + (${clickAreaPadding}px * 2))`,
   zIndex: UI_SHELL_OVERLAY_Z_INDEX,
+  "&&": {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    boxShadow: "none",
+    color: odysseyDesignTokens.PalettePrimaryText
+  },
   "&:focus-visible": {
-    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
     outline: "none"
   },
   "&:hover, &:focus-visible": {
-    backgroundColor: "transparent",
-    "#lineOne": {
-      animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
-      animationFillMode: "forwards",
-      "@keyframes lineOne-animate-to-collapse": {
-        "0%": {
-          transform: "translate3d(-50%, -50%, 0)"
-        },
-        "50%": {
-          transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)"
-        },
-        "100%": {
-          transform: "translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)"
-        }
-      }
-    },
-    "#lineTwo": {
-      animation: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
-      animationFillMode: "forwards",
-      "@keyframes lineTwo-animate-to-collapse": {
-        "0%": {
-          transform: "translate3d(-50%, -50%, 0)"
-        },
-        "50%": {
-          transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)"
-        },
-        "100%": {
-          transform: "translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)"
-        }
-      }
-    },
-    ...(isSideNavCollapsed && {
-      "#lineOne": {
-        animation: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
-        animationFillMode: "forwards",
-        "@keyframes lineOne-animate-to-expand": {
-          "0%": {
-            transform: "translate3d(-50%, -50%, 0)"
-          },
-          "50%": {
-            transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)"
-          },
-          "100%": {
-            transform: "translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)"
-          }
-        }
-      },
-      "#lineTwo": {
-        animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
-        animationFillMode: "forwards",
-        "@keyframes lineTwo-animate-to-expand": {
-          "0%": {
-            transform: "translate3d(-50%, -50%, 0)"
-          },
-          "50%": {
-            transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)"
-          },
-          "100%": {
-            transform: "translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)"
-          }
-        }
-      }
-    })
+    color: odysseyDesignTokens.HueNeutralWhite
   },
-  span: {
+  "&::before": {
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+    borderColor: "transparent",
+    borderRadius: "50%",
+    boxShadow: odysseyDesignTokens.ShadowScale1,
+    color: odysseyDesignTokens.PalettePrimaryText,
+    content: "''",
+    height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,
+    left: `${clickAreaPadding * 2}px`,
     position: "absolute",
-    top: "50%",
-    left: "50%",
-    width: "2px",
-    height: odysseyDesignTokens.Spacing4,
-    backgroundColor: odysseyDesignTokens.HueNeutral600,
-    transform: "translate3d(-50%, -50%, 0)",
-    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
-    ...(toggleContrastColors?.fontColor && {
-      backgroundColor: toggleContrastColors.fontColor
-    })
+    top: 0,
+    width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`
+  },
+  "&:hover::before, &:focus-visible::before": {
+    backgroundColor: odysseyDesignTokens.PalettePrimaryText
   }
 }));
+const StyledChevronRightIcon = styled(ChevronRightIcon, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
+})(({
+  isSideNavCollapsed,
+  odysseyDesignTokens
+}) => ({
+  fontSize: "125%",
+  left: isSideNavCollapsed ? undefined : "4px",
+  position: "absolute",
+  right: isSideNavCollapsed ? "4px" : undefined,
+  top: "3px",
+  transform: isSideNavCollapsed ? "rotate(0deg)" : "rotate(-180deg)",
+  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+  transitionProperty: "transform",
+  transitionTimingFunction: "ease-in-out"
+}));
+const defaultLocalButton = document.createElement("button");
 const SideNavToggleButton = ({
   ariaControls,
-  buttonRef,
+  clickAreaPadding = 0,
   id,
   isSideNavCollapsed,
   onClick,
+  onHighlight,
   tabIndex
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const {
     t
   } = useTranslation();
-  const uiShellContext = useUiShellContext();
-  const localButtonRef = useRef(null);
-  const toggleContrastColors = useMemo(() => {
-    const hasNonStandardAppBackgroundColor = uiShellContext?.appBackgroundColor && uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutralWhite && uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutral50;
-    if (hasNonStandardAppBackgroundColor) {
-      return generateContrastColors(uiShellContext.appBackgroundColor, odysseyDesignTokens);
-    }
-    return undefined;
-  }, [odysseyDesignTokens, uiShellContext]);
-  useImperativeHandle(buttonRef, () => ({
-    focus: () => {
-      localButtonRef.current?.focus();
-    }
-  }), []);
+  const buttonRef = useRef(defaultLocalButton);
+  useEffect(() => {
+    const setHighlighted = () => {
+      onHighlight?.(true);
+    };
+    const setUnhighlighted = () => {
+      onHighlight?.(false);
+    };
+    const setFocusHighlighted = () => {
+      onHighlight?.(buttonRef.current.matches(":focus-visible"));
+    };
+    buttonRef.current.addEventListener("mouseenter", setHighlighted);
+    buttonRef.current.addEventListener("mouseleave", setUnhighlighted);
+    buttonRef.current.addEventListener("focus", setFocusHighlighted, true);
+    buttonRef.current.addEventListener("blur", setFocusHighlighted, true);
+    setUnhighlighted();
+    return () => {
+      buttonRef.current.removeEventListener("mouseenter", setHighlighted);
+      buttonRef.current.removeEventListener("mouseleave", setUnhighlighted);
+      buttonRef.current.removeEventListener("focus", setFocusHighlighted, true);
+      buttonRef.current.removeEventListener("blur", setFocusHighlighted, true);
+    };
+  }, [onHighlight]);
   const toggleLabel = useMemo(() => isSideNavCollapsed ? t("sidenav.toggle.expand") : t("sidenav.toggle.collapse"), [isSideNavCollapsed, t]);
   const renderButton = useCallback(muiProps => {
-    return _jsxs(StyledToggleButton, {
+    return _jsx(StyledToggleButton, {
       ...muiProps,
       "aria-controls": ariaControls,
       "aria-expanded": !isSideNavCollapsed,
       "aria-label": toggleLabel,
+      clickAreaPadding: clickAreaPadding,
       "data-se": "sidenav-toggle-button",
       "data-sidenav-toggle": true,
       id: id,
-      isSideNavCollapsed: isSideNavCollapsed,
       odysseyDesignTokens: odysseyDesignTokens,
       onClick: onClick,
       ref: element => {
         if (element) {
-          localButtonRef.current = element;
-          muiProps?.ref?.(element);
+          buttonRef.current = element;
+          muiProps.ref?.(element);
         }
       },
       tabIndex: tabIndex,
-      toggleContrastColors: toggleContrastColors,
       variant: "floating",
-      children: [_jsx("span", {
-        id: "lineOne"
-      }), _jsx("span", {
-        id: "lineTwo"
-      })]
+      children: _jsx(StyledChevronRightIcon, {
+        isSideNavCollapsed: isSideNavCollapsed,
+        odysseyDesignTokens: odysseyDesignTokens
+      })
     });
-  }, [ariaControls, id, isSideNavCollapsed, odysseyDesignTokens, onClick, tabIndex, toggleContrastColors, toggleLabel]);
+  }, [ariaControls, clickAreaPadding, id, isSideNavCollapsed, odysseyDesignTokens, onClick, tabIndex, toggleLabel]);
   return _jsx(Tooltip, {
     ariaType: "description",
     placement: "right",

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","UI_SHELL_OVERLAY_Z_INDEX","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\";\nimport { UI_SHELL_OVERLAY_Z_INDEX } from \"../uiShellSharedConstants.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: UI_SHELL_OVERLAY_Z_INDEX,\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","useEffect","useMemo","useRef","styled","useTranslation","MuiPropsContext","useOdysseyDesignTokens","Tooltip","UI_SHELL_OVERLAY_Z_INDEX","ChevronRightIcon","jsx","_jsx","SIDE_NAV_TOGGLE_ICON_SIZE","SIDE_NAV_TOGGLE_ICON_HALF_SIZE","StyledToggleButton","_Button","shouldForwardProp","prop","clickAreaPadding","odysseyDesignTokens","border","height","left","padding","position","width","zIndex","backgroundColor","borderColor","boxShadow","color","PalettePrimaryText","outline","HueNeutralWhite","borderRadius","ShadowScale1","content","top","StyledChevronRightIcon","isSideNavCollapsed","fontSize","undefined","right","transform","transitionDuration","TransitionDurationMain","transitionProperty","transitionTimingFunction","defaultLocalButton","document","createElement","SideNavToggleButton","ariaControls","id","onClick","onHighlight","tabIndex","t","buttonRef","setHighlighted","setUnhighlighted","setFocusHighlighted","current","matches","addEventListener","removeEventListener","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  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { UI_SHELL_OVERLAY_Z_INDEX } from \"../uiShellSharedConstants.js\";\nimport { ChevronRightIcon } from \"../../icons.generated/ChevronRight.js\";\n\nexport const SIDE_NAV_TOGGLE_ICON_SIZE = 24;\nexport const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;\n\nconst StyledToggleButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    prop !== \"clickAreaPadding\" && prop !== \"odysseyDesignTokens\",\n})<{\n  clickAreaPadding: number;\n  odysseyDesignTokens: DesignTokens;\n}>(({ clickAreaPadding, odysseyDesignTokens }) => ({\n  border: 0,\n  height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n  left: `-${clickAreaPadding * 2}px`,\n  padding: 0,\n  position: \"relative\",\n  width: `calc(${SIDE_NAV_TOGGLE_ICON_SIZE}px + (${clickAreaPadding}px * 2))`,\n  zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n\n  // `&&` is a CSS specificity override. Used here to counteract MUI Button styles.\n  \"&&\": {\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    color: odysseyDesignTokens.PalettePrimaryText,\n  },\n\n  \"&:focus-visible\": {\n    outline: \"none\",\n  },\n\n  \"&:hover, &:focus-visible\": {\n    color: odysseyDesignTokens.HueNeutralWhite,\n  },\n\n  \"&::before\": {\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    borderColor: \"transparent\",\n    borderRadius: \"50%\",\n    boxShadow: odysseyDesignTokens.ShadowScale1,\n    color: odysseyDesignTokens.PalettePrimaryText,\n    content: \"''\",\n    height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n    left: `${clickAreaPadding * 2}px`,\n    position: \"absolute\",\n    top: 0,\n    width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n  },\n\n  \"&:hover::before, &:focus-visible::before\": {\n    backgroundColor: odysseyDesignTokens.PalettePrimaryText,\n  },\n}));\n\nconst StyledChevronRightIcon = styled(ChevronRightIcon, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})<{\n  isSideNavCollapsed: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ isSideNavCollapsed, odysseyDesignTokens }) => ({\n  fontSize: \"125%\",\n  left: isSideNavCollapsed ? undefined : \"4px\",\n  position: \"absolute\",\n  right: isSideNavCollapsed ? \"4px\" : undefined,\n  top: \"3px\",\n  transform: isSideNavCollapsed ? \"rotate(0deg)\" : \"rotate(-180deg)\", // Leave this as `-180deg` so it rotates over the top, not the bottom.\n  transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n  transitionProperty: \"transform\",\n  transitionTimingFunction: \"ease-in-out\",\n}));\n\nexport type SideNavToggleButtonProps = {\n  /**\n   * The `id` of the item this button controls\n   */\n  ariaControls: string;\n  /**\n   * Left padding in pixels for the click area of the button.\n   *\n   * Useful when moving the button around when trying to click it. This ensures the click area doesn't move to the right along with the button.\n   */\n  clickAreaPadding?: number;\n  /**\n   * HTML `id` attribute for the `<button>` element.\n   */\n  id?: string;\n  isSideNavCollapsed: boolean;\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * Click event handler for the `<button>` element.\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * Provides the hovered or focused state of the `<button>` element.\n   */\n  onHighlight?: (isHighlighted: boolean) => void;\n  onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n};\n\n// This allows us to mutate the value with TypeScript. A singleton is fine because it gets overridden on render.\nconst defaultLocalButton = document.createElement(\"button\");\n\nconst SideNavToggleButton = ({\n  ariaControls,\n  clickAreaPadding = 0,\n  id,\n  isSideNavCollapsed,\n  onClick,\n  onHighlight,\n  tabIndex,\n}: SideNavToggleButtonProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const buttonRef = useRef(defaultLocalButton);\n\n  useEffect(() => {\n    const setHighlighted = () => {\n      onHighlight?.(true);\n    };\n\n    const setUnhighlighted = () => {\n      onHighlight?.(false);\n    };\n\n    const setFocusHighlighted = () => {\n      onHighlight?.(buttonRef.current.matches(\":focus-visible\"));\n    };\n\n    buttonRef.current.addEventListener(\"mouseenter\", setHighlighted);\n\n    buttonRef.current.addEventListener(\"mouseleave\", setUnhighlighted);\n\n    buttonRef.current.addEventListener(\"focus\", setFocusHighlighted, true);\n\n    buttonRef.current.addEventListener(\"blur\", setFocusHighlighted, true);\n\n    setUnhighlighted();\n\n    return () => {\n      buttonRef.current.removeEventListener(\"mouseenter\", setHighlighted);\n\n      buttonRef.current.removeEventListener(\"mouseleave\", setUnhighlighted);\n\n      buttonRef.current.removeEventListener(\"focus\", setFocusHighlighted, true);\n\n      buttonRef.current.removeEventListener(\"blur\", setFocusHighlighted, true);\n    };\n  }, [onHighlight]);\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          clickAreaPadding={clickAreaPadding}\n          data-se=\"sidenav-toggle-button\"\n          data-sidenav-toggle\n          id={id}\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={onClick}\n          ref={(element: HTMLButtonElement) => {\n            if (element) {\n              buttonRef.current = element;\n              //@ts-expect-error `ref` is an optional prop, but TypeScript doesn't know this.\n              muiProps.ref?.(element);\n            }\n          }}\n          tabIndex={tabIndex}\n          variant=\"floating\"\n        >\n          <StyledChevronRightIcon\n            isSideNavCollapsed={isSideNavCollapsed}\n            odysseyDesignTokens={odysseyDesignTokens}\n          />\n        </StyledToggleButton>\n      );\n    },\n    [\n      ariaControls,\n      clickAreaPadding,\n      id,\n      isSideNavCollapsed,\n      odysseyDesignTokens,\n      onClick,\n      tabIndex,\n      toggleLabel,\n    ],\n  );\n\n  return (\n    <Tooltip ariaType=\"description\" placement=\"right\" text={toggleLabel}>\n      <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n    </Tooltip>\n  );\n};\n\nconst MemoizedSideNavToggleButton = memo(SideNavToggleButton);\nMemoizedSideNavToggleButton.displayName = \"SideNavToggleButton\";\n\nexport { MemoizedSideNavToggleButton as SideNavToggleButton };\n"],"mappings":"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","ignoreList":[]}

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

@@ -23,6 +23,7 @@ import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShel
 import { useUiShellContext } from "./UiShellProvider.js";
 import { emptySideNavItems } from "./uiShellSharedConstants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const appSwitcherDefaultAppIcons = [];
 const StyledAppContainer = styled("div", {
   shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
 })(({
@@ -101,8 +102,8 @@ const WideUiShellContent = ({
         fallback: null,
         onError: onError,
         children: _jsx(AppSwitcher, {
+          appIcons: appSwitcherDefaultAppIcons,
           isLoading: true,
-          appIcons: [],
           selectedAppName: ""
         })
       }), appSwitcherProps && _jsx(ErrorBoundary, {

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

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

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

@@ -92,7 +92,7 @@ export const useMatchAppElementToUiShellAppArea = ({
       };
     }
     return () => {};
-  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);
+  }, [appElement, appContainerElementStyles, uiShellAppAreaRef, uiShellResizableRefs]);
   return {
     parentContainerRef
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useMatchAppElementToUiShellAppArea.js","names":["useEffect","useMemo","useRef","useOdysseyDesignTokens","convertCamelCaseToKebabCase","string","replace","toLowerCase","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","parentElement","appContentReferenceRectangle","getBoundingClientRect","parentElementRectangle","style","setProperty","top","left","width","height","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","useMatchAppElementToUiShellAppArea","appElement","appElementScrollingMode","paddingMode","uiShellAppAreaRef","uiShellResizableRefs","odysseyDesignTokens","parentContainerRef","appContainerElementStyles","boxSizing","zIndex","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","resizingElements","map","resizingRef","filter","element","Boolean","observer","ResizeObserver","resizingElement","addEventListener","observe","disconnect","removeEventListener"],"sources":["../../../src/ui-shell/useMatchAppElementToUiShellAppArea.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { CSSProperties, RefObject, useEffect, useMemo, useRef } from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { UiShellContentProps } from \"./uiShellContentTypes.js\";\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  parentElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n  parentElement: HTMLElement;\n}) => {\n  const appContentReferenceRectangle =\n    appContentReferenceElement.getBoundingClientRect();\n  const parentElementRectangle = parentElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\n    \"top\",\n    `${appContentReferenceRectangle.top - parentElementRectangle.top}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"left\",\n    `${appContentReferenceRectangle.left - parentElementRectangle.left}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"width\",\n    `${appContentReferenceRectangle.width}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"height\",\n    `${appContentReferenceRectangle.height}px`,\n  );\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\nexport type UseMatchAppElementToUiShellAppAreaProps = {\n  /**\n   * Padding around the app area. \"comfortable\" is designed for wider views whereas \"compact\" is designed for narrower views.\n   */\n  paddingMode: \"comfortable\" | \"compact\" | \"none\";\n  /**\n   * Ref for the App Container in UI Shell. This should be the one inside the Shell, **not** the element we're going to align.\n   */\n  uiShellAppAreaRef: RefObject<HTMLDivElement>;\n  /**\n   * Array of refs of items that indirectly resize the app content area such as \"side nav\" and \"top nav\".\n   */\n  uiShellResizableRefs: Array<RefObject<HTMLDivElement>>;\n} & Pick<UiShellContentProps, \"appElement\" | \"appElementScrollingMode\">;\n\nexport const useMatchAppElementToUiShellAppArea = ({\n  appElement,\n  appElementScrollingMode,\n  paddingMode,\n  uiShellAppAreaRef,\n  uiShellResizableRefs,\n}: UseMatchAppElementToUiShellAppAreaProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const parentContainerRef = useRef<HTMLDivElement>(null);\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      boxSizing: \"border-box\",\n      zIndex: 1,\n      ...(paddingMode === \"comfortable\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing8,\n          }\n        : {}),\n\n      ...(paddingMode === \"compact\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing5,\n          }\n        : {}),\n\n      ...(appElementScrollingMode === \"horizontal\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n\n      ...(appElementScrollingMode === \"vertical\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [appElementScrollingMode, paddingMode, odysseyDesignTokens],\n  );\n\n  useEffect(() => {\n    // Once `appContainerRef` is rendered, we can position `appContainerElement` on top to match.\n    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n\n        animationFrameId = requestAnimationFrame(() => {\n          if (uiShellAppAreaRef.current && parentContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: uiShellAppAreaRef.current,\n              appContainerElement: appElement,\n              parentElement: parentContainerRef.current,\n            });\n          }\n        });\n      };\n\n      // These refs might change by the time we unsubscribe, so we need to keep references to the original elements.\n      const resizingElements = uiShellResizableRefs\n        .map((resizingRef) => resizingRef.current)\n        .filter((element): element is NonNullable<typeof element> =>\n          Boolean(element),\n        );\n\n      // Set up a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n\n      // document.addEventListener(\"ready\", updateStyles);\n\n      resizingElements.forEach((resizingElement) => {\n        resizingElement.addEventListener(\"transitionend\", updateStyles);\n\n        observer.observe(resizingElement);\n      });\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n\n        resizingElements.forEach((resizingElement) => {\n          resizingElement.removeEventListener(\"transitionend\", updateStyles);\n        });\n      };\n    }\n    return () => {};\n  }, [appElement, appContainerElementStyles, uiShellAppAreaRef]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAmCA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE5E,SAASC,sBAAsB,QAAQ,kCAAkC;AAGzE,OAAO,MAAMC,2BAA2B,GAAIC,MAAc,IACxDA,MAAM,CAACC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAACC,WAAW,CAAC,CAAC;AAEjD,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACtCC,gBAAgB;EAChBC,mBAAmB;EACnBC,0BAA0B;EAC1BC;AAMF,CAAC,KAAK;EACJ,MAAMC,4BAA4B,GAChCF,0BAA0B,CAACG,qBAAqB,CAAC,CAAC;EACpD,MAAMC,sBAAsB,GAAGH,aAAa,CAACE,qBAAqB,CAAC,CAAC;EAEpEJ,mBAAmB,CAACM,KAAK,CAACC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC;EAC7DP,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,KAAK,EACL,GAAGJ,4BAA4B,CAACK,GAAG,GAAGH,sBAAsB,CAACG,GAAG,IAClE,CAAC;EACDR,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,MAAM,EACN,GAAGJ,4BAA4B,CAACM,IAAI,GAAGJ,sBAAsB,CAACI,IAAI,IACpE,CAAC;EACDT,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,OAAO,EACP,GAAGJ,4BAA4B,CAACO,KAAK,IACvC,CAAC;EACDV,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnC,QAAQ,EACR,GAAGJ,4BAA4B,CAACQ,MAAM,IACxC,CAAC;EAGCC,MAAM,CAACC,OAAO,CAACd,gBAAgB,CAAC,CAMhCe,OAAO,CAAC,CAAC,CAACC,eAAe,EAAEC,gBAAgB,CAAC,KAAK;IACjDhB,mBAAmB,CAACM,KAAK,CAACC,WAAW,CACnCb,2BAA2B,CAACqB,eAAe,CAAC,EAC5CE,MAAM,CAACD,gBAAgB,CACzB,CAAC;EACH,CAAC,CAAC;AACJ,CAAC;AAiBD,OAAO,MAAME,kCAAkC,GAAGA,CAAC;EACjDC,UAAU;EACVC,uBAAuB;EACvBC,WAAW;EACXC,iBAAiB;EACjBC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAG/B,sBAAsB,CAAC,CAAC;EAEpD,MAAMgC,kBAAkB,GAAGjC,MAAM,CAAiB,IAAI,CAAC;EAEvD,MAAMkC,yBAAyB,GAAGnC,OAAO,CACvC,OAAO;IACLoC,SAAS,EAAE,YAAY;IACvBC,MAAM,EAAE,CAAC;IACT,IAAIP,WAAW,KAAK,aAAa,GAC7B;MACEQ,YAAY,EAAEL,mBAAmB,CAACM,QAAQ;MAC1CC,aAAa,EAAEP,mBAAmB,CAACQ;IACrC,CAAC,GACD,CAAC,CAAC,CAAC;IAEP,IAAIX,WAAW,KAAK,SAAS,GACzB;MACEQ,YAAY,EAAEL,mBAAmB,CAACM,QAAQ;MAC1CC,aAAa,EAAEP,mBAAmB,CAACM;IACrC,CAAC,GACD,CAAC,CAAC,CAAC;IAEP,IAAIV,uBAAuB,KAAK,YAAY,IAC5CA,uBAAuB,KAAK,MAAM,GAC9B;MACEa,SAAS,EAAE;IACb,CAAC,GACD;MACEA,SAAS,EAAE;IACb,CAAC,CAAC;IAEN,IAAIb,uBAAuB,KAAK,UAAU,IAC1CA,uBAAuB,KAAK,MAAM,GAC9B;MACEc,SAAS,EAAE;IACb,CAAC,GACD;MACEA,SAAS,EAAE;IACb,CAAC;EACP,CAAC,CAAC,EACF,CAACd,uBAAuB,EAAEC,WAAW,EAAEG,mBAAmB,CAC5D,CAAC;EAEDlC,SAAS,CAAC,MAAM;IAEd,IAAIgC,iBAAiB,CAACa,OAAO,IAAIhB,UAAU,IAAIM,kBAAkB,CAACU,OAAO,EAAE;MACzE,IAAIC,gBAAwB;MAE5B,MAAMC,YAAY,GAAGA,CAAA,KAAM;QACzBC,oBAAoB,CAACF,gBAAgB,CAAC;QAEtCA,gBAAgB,GAAGG,qBAAqB,CAAC,MAAM;UAC7C,IAAIjB,iBAAiB,CAACa,OAAO,IAAIV,kBAAkB,CAACU,OAAO,EAAE;YAC3DrC,uBAAuB,CAAC;cACtBC,gBAAgB,EAAE2B,yBAAyB;cAC3CzB,0BAA0B,EAAEqB,iBAAiB,CAACa,OAAO;cACrDnC,mBAAmB,EAAEmB,UAAU;cAC/BjB,aAAa,EAAEuB,kBAAkB,CAACU;YACpC,CAAC,CAAC;UACJ;QACF,CAAC,CAAC;MACJ,CAAC;MAGD,MAAMK,gBAAgB,GAAGjB,oBAAoB,CAC1CkB,GAAG,CAAEC,WAAW,IAAKA,WAAW,CAACP,OAAO,CAAC,CACzCQ,MAAM,CAAEC,OAAO,IACdC,OAAO,CAACD,OAAO,CACjB,CAAC;MAGH,MAAME,QAAQ,GAAG,IAAIC,cAAc,CAACV,YAAY,CAAC;MAIjDG,gBAAgB,CAAC1B,OAAO,CAAEkC,eAAe,IAAK;QAC5CA,eAAe,CAACC,gBAAgB,CAAC,eAAe,EAAEZ,YAAY,CAAC;QAE/DS,QAAQ,CAACI,OAAO,CAACF,eAAe,CAAC;MACnC,CAAC,CAAC;MAGFX,YAAY,CAAC,CAAC;MAEd,OAAO,MAAM;QACXS,QAAQ,CAACK,UAAU,CAAC,CAAC;QAErBX,gBAAgB,CAAC1B,OAAO,CAAEkC,eAAe,IAAK;UAC5CA,eAAe,CAACI,mBAAmB,CAAC,eAAe,EAAEf,YAAY,CAAC;QACpE,CAAC,CAAC;MACJ,CAAC;IACH;IACA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAAClB,UAAU,EAAEO,yBAAyB,EAAEJ,iBAAiB,CAAC,CAAC;EAE9D,OAAO;IACLG;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"useMatchAppElementToUiShellAppArea.js","names":["useEffect","useMemo","useRef","useOdysseyDesignTokens","convertCamelCaseToKebabCase","string","replace","toLowerCase","setStylesToMatchElement","additionalStyles","appContainerElement","appContentReferenceElement","parentElement","appContentReferenceRectangle","getBoundingClientRect","parentElementRectangle","style","setProperty","top","left","width","height","Object","entries","forEach","cssPropertyName","cssPropertyValue","String","useMatchAppElementToUiShellAppArea","appElement","appElementScrollingMode","paddingMode","uiShellAppAreaRef","uiShellResizableRefs","odysseyDesignTokens","parentContainerRef","appContainerElementStyles","boxSizing","zIndex","paddingBlock","Spacing5","paddingInline","Spacing8","overflowX","overflowY","current","animationFrameId","updateStyles","cancelAnimationFrame","requestAnimationFrame","resizingElements","map","resizingRef","filter","element","Boolean","observer","ResizeObserver","resizingElement","addEventListener","observe","disconnect","removeEventListener"],"sources":["../../../src/ui-shell/useMatchAppElementToUiShellAppArea.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { CSSProperties, RefObject, useEffect, useMemo, useRef } from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { UiShellContentProps } from \"./uiShellContentTypes.js\";\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  parentElement,\n}: {\n  additionalStyles: CSSProperties;\n  appContainerElement: HTMLElement;\n  appContentReferenceElement: HTMLElement;\n  parentElement: HTMLElement;\n}) => {\n  const appContentReferenceRectangle =\n    appContentReferenceElement.getBoundingClientRect();\n  const parentElementRectangle = parentElement.getBoundingClientRect();\n\n  appContainerElement.style.setProperty(\"position\", \"absolute\");\n  appContainerElement.style.setProperty(\n    \"top\",\n    `${appContentReferenceRectangle.top - parentElementRectangle.top}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"left\",\n    `${appContentReferenceRectangle.left - parentElementRectangle.left}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"width\",\n    `${appContentReferenceRectangle.width}px`,\n  );\n  appContainerElement.style.setProperty(\n    \"height\",\n    `${appContentReferenceRectangle.height}px`,\n  );\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\nexport type UseMatchAppElementToUiShellAppAreaProps = {\n  /**\n   * Padding around the app area. \"comfortable\" is designed for wider views whereas \"compact\" is designed for narrower views.\n   */\n  paddingMode: \"comfortable\" | \"compact\" | \"none\";\n  /**\n   * Ref for the App Container in UI Shell. This should be the one inside the Shell, **not** the element we're going to align.\n   */\n  uiShellAppAreaRef: RefObject<HTMLDivElement>;\n  /**\n   * Array of refs of items that indirectly resize the app content area such as \"side nav\" and \"top nav\".\n   */\n  uiShellResizableRefs: Array<RefObject<HTMLDivElement>>;\n} & Pick<UiShellContentProps, \"appElement\" | \"appElementScrollingMode\">;\n\nexport const useMatchAppElementToUiShellAppArea = ({\n  appElement,\n  appElementScrollingMode,\n  paddingMode,\n  uiShellAppAreaRef,\n  uiShellResizableRefs,\n}: UseMatchAppElementToUiShellAppAreaProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const parentContainerRef = useRef<HTMLDivElement>(null);\n\n  const appContainerElementStyles = useMemo<CSSProperties>(\n    () => ({\n      boxSizing: \"border-box\",\n      zIndex: 1,\n      ...(paddingMode === \"comfortable\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing8,\n          }\n        : {}),\n\n      ...(paddingMode === \"compact\"\n        ? {\n            paddingBlock: odysseyDesignTokens.Spacing5,\n            paddingInline: odysseyDesignTokens.Spacing5,\n          }\n        : {}),\n\n      ...(appElementScrollingMode === \"horizontal\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowX: \"auto\",\n          }\n        : {\n            overflowX: \"hidden\",\n          }),\n\n      ...(appElementScrollingMode === \"vertical\" ||\n      appElementScrollingMode === \"both\"\n        ? {\n            overflowY: \"auto\",\n          }\n        : {\n            overflowY: \"hidden\",\n          }),\n    }),\n    [appElementScrollingMode, paddingMode, odysseyDesignTokens],\n  );\n\n  useEffect(() => {\n    // Once `appContainerRef` is rendered, we can position `appContainerElement` on top to match.\n    if (uiShellAppAreaRef.current && appElement && parentContainerRef.current) {\n      let animationFrameId: number;\n\n      const updateStyles = () => {\n        cancelAnimationFrame(animationFrameId);\n\n        animationFrameId = requestAnimationFrame(() => {\n          if (uiShellAppAreaRef.current && parentContainerRef.current) {\n            setStylesToMatchElement({\n              additionalStyles: appContainerElementStyles,\n              appContentReferenceElement: uiShellAppAreaRef.current,\n              appContainerElement: appElement,\n              parentElement: parentContainerRef.current,\n            });\n          }\n        });\n      };\n\n      // These refs might change by the time we unsubscribe, so we need to keep references to the original elements.\n      const resizingElements = uiShellResizableRefs\n        .map((resizingRef) => resizingRef.current)\n        .filter((element): element is NonNullable<typeof element> =>\n          Boolean(element),\n        );\n\n      // Set up a mutation observer to sync later updates\n      const observer = new ResizeObserver(updateStyles);\n\n      // document.addEventListener(\"ready\", updateStyles);\n\n      resizingElements.forEach((resizingElement) => {\n        resizingElement.addEventListener(\"transitionend\", updateStyles);\n\n        observer.observe(resizingElement);\n      });\n\n      // Set the initial styles\n      updateStyles();\n\n      return () => {\n        observer.disconnect();\n\n        resizingElements.forEach((resizingElement) => {\n          resizingElement.removeEventListener(\"transitionend\", updateStyles);\n        });\n      };\n    }\n    return () => {};\n  }, [\n    appElement,\n    appContainerElementStyles,\n    uiShellAppAreaRef,\n    uiShellResizableRefs,\n  ]);\n\n  return {\n    parentContainerRef,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -10,30 +10,76 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useEffect, useMemo, useState } from "react";
-export const useScrollState = scrollableContentElement => {
-  const [isContentScrolled, setIsContentScrolled] = useState(false);
-  const scrollableElement = useMemo(() => scrollableContentElement, [scrollableContentElement]);
-  useEffect(() => {
-    if (scrollableElement) {
-      let requestedAnimationFrameId;
-      const updateScrollState = () => {
-        cancelAnimationFrame(requestedAnimationFrameId);
-        requestedAnimationFrameId = requestAnimationFrame(() => {
-          setIsContentScrolled(scrollableElement.scrollTop > 0);
-        });
-      };
+import { useCallback, useEffect, useRef, useState } from "react";
+export const getIsScrollHeightElement = ({
+  containerElement,
+  scrollableElement
+}) => {
+  const containerElementHeight = containerElement.getBoundingClientRect().height;
+  const scrollableElementHeight = scrollableElement.getBoundingClientRect().height;
+  return scrollableElementHeight - containerElementHeight >= 0;
+};
+export const getIsYAxisScrollContainer = element => {
+  const overflowY = window.getComputedStyle(element).overflowY;
+  return overflowY === "auto" || overflowY === "scroll";
+};
+export const getIsYAxisScrolling = element => element.scrollHeight > element.clientHeight ? getIsYAxisScrollContainer(element) : false;
+export const getNestedScrollContainers = containerElement => Array.from(containerElement.querySelectorAll("*")).filter(element => getIsYAxisScrollContainer(element)).filter(scrollableElement => getIsScrollHeightElement({
+  containerElement,
+  scrollableElement
+}));
+export const fakeDefaultContainerElement = document.createElement("div");
+export const useScrollState = containerElement => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const requestedAnimationFrameIdRef = useRef(0);
+  const scrollableElementsRef = useRef([]);
+  const updateScrollState = useCallback(() => {
+    cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {
+      setIsScrolled(scrollableElementsRef.current.reduce((isScrolled, scrollableElement) => isScrolled || scrollableElement.scrollTop > 0, false));
+    });
+  }, []);
+  const addScrollEventListeners = useCallback(() => {
+    scrollableElementsRef.current.forEach(scrollableElement => {
       scrollableElement.addEventListener("scroll", updateScrollState);
-      updateScrollState();
-      return () => {
-        scrollableElement.removeEventListener("scroll", updateScrollState);
-        cancelAnimationFrame(requestedAnimationFrameId);
-      };
+    });
+  }, [updateScrollState]);
+  const removeScrollEventListeners = useCallback(() => {
+    scrollableElementsRef.current.forEach(scrollableElement => {
+      scrollableElement.removeEventListener("scroll", updateScrollState);
+    });
+  }, [updateScrollState]);
+  const updateScrollableElements = useCallback(() => {
+    const computedContainerElement = containerElement || fakeDefaultContainerElement;
+    scrollableElementsRef.current = getNestedScrollContainers(computedContainerElement).concat(computedContainerElement);
+  }, [containerElement]);
+  const updateScrollListeners = useCallback(() => {
+    removeScrollEventListeners();
+    updateScrollableElements();
+    addScrollEventListeners();
+    updateScrollState();
+  }, [addScrollEventListeners, removeScrollEventListeners, updateScrollableElements, updateScrollState]);
+  useEffect(() => {
+    const mutationObserver = new MutationObserver(() => {
+      updateScrollListeners();
+    });
+    if (containerElement) {
+      mutationObserver.observe(containerElement, {
+        attributes: true,
+        attributeFilter: ["style"],
+        childList: true,
+        subtree: true
+      });
     }
-    return () => {};
-  }, [scrollableElement]);
+    updateScrollListeners();
+    return () => {
+      cancelAnimationFrame(requestedAnimationFrameIdRef.current);
+      removeScrollEventListeners();
+      mutationObserver.disconnect();
+    };
+  }, [containerElement, removeScrollEventListeners, updateScrollListeners]);
   return {
-    isContentScrolled
+    isContentScrolled: isScrolled
   };
 };
 //# sourceMappingURL=useScrollState.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollState.js","names":["useEffect","useMemo","useState","useScrollState","scrollableContentElement","isContentScrolled","setIsContentScrolled","scrollableElement","requestedAnimationFrameId","updateScrollState","cancelAnimationFrame","requestAnimationFrame","scrollTop","addEventListener","removeEventListener"],"sources":["../../../src/ui-shell/useScrollState.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 { useEffect, useMemo, useState } from \"react\";\n\nexport const useScrollState = <\n  ScrollableContentElement extends HTMLElement = HTMLDivElement,\n>(\n  scrollableContentElement?: ScrollableContentElement,\n) => {\n  const [isContentScrolled, setIsContentScrolled] = useState(false);\n\n  const scrollableElement = useMemo(\n    () => scrollableContentElement,\n    [scrollableContentElement],\n  );\n\n  useEffect(() => {\n    if (scrollableElement) {\n      let requestedAnimationFrameId: number;\n\n      const updateScrollState = () => {\n        cancelAnimationFrame(requestedAnimationFrameId);\n\n        requestedAnimationFrameId = requestAnimationFrame(() => {\n          setIsContentScrolled(scrollableElement.scrollTop > 0);\n        });\n      };\n\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n\n      updateScrollState();\n\n      return () => {\n        scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n\n        cancelAnimationFrame(requestedAnimationFrameId);\n      };\n    }\n\n    return () => {};\n  }, [scrollableElement]);\n\n  return {\n    isContentScrolled,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEpD,OAAO,MAAMC,cAAc,GAGzBC,wBAAmD,IAChD;EACH,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAEjE,MAAMK,iBAAiB,GAAGN,OAAO,CAC/B,MAAMG,wBAAwB,EAC9B,CAACA,wBAAwB,CAC3B,CAAC;EAEDJ,SAAS,CAAC,MAAM;IACd,IAAIO,iBAAiB,EAAE;MACrB,IAAIC,yBAAiC;MAErC,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;QAC9BC,oBAAoB,CAACF,yBAAyB,CAAC;QAE/CA,yBAAyB,GAAGG,qBAAqB,CAAC,MAAM;UACtDL,oBAAoB,CAACC,iBAAiB,CAACK,SAAS,GAAG,CAAC,CAAC;QACvD,CAAC,CAAC;MACJ,CAAC;MAEDL,iBAAiB,CAACM,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;MAE/DA,iBAAiB,CAAC,CAAC;MAEnB,OAAO,MAAM;QACXF,iBAAiB,CAACO,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QAElEC,oBAAoB,CAACF,yBAAyB,CAAC;MACjD,CAAC;IACH;IAEA,OAAO,MAAM,CAAC,CAAC;EACjB,CAAC,EAAE,CAACD,iBAAiB,CAAC,CAAC;EAEvB,OAAO;IACLF;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"useScrollState.js","names":["useCallback","useEffect","useRef","useState","getIsScrollHeightElement","containerElement","scrollableElement","containerElementHeight","getBoundingClientRect","height","scrollableElementHeight","getIsYAxisScrollContainer","element","overflowY","window","getComputedStyle","getIsYAxisScrolling","scrollHeight","clientHeight","getNestedScrollContainers","Array","from","querySelectorAll","filter","fakeDefaultContainerElement","document","createElement","useScrollState","isScrolled","setIsScrolled","requestedAnimationFrameIdRef","scrollableElementsRef","updateScrollState","cancelAnimationFrame","current","requestAnimationFrame","reduce","scrollTop","addScrollEventListeners","forEach","addEventListener","removeScrollEventListeners","removeEventListener","updateScrollableElements","computedContainerElement","concat","updateScrollListeners","mutationObserver","MutationObserver","observe","attributes","attributeFilter","childList","subtree","disconnect","isContentScrolled"],"sources":["../../../src/ui-shell/useScrollState.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 { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport const getIsScrollHeightElement = ({\n  containerElement,\n  scrollableElement,\n}: {\n  containerElement: HTMLElement;\n  scrollableElement: HTMLElement;\n}) => {\n  const containerElementHeight =\n    containerElement.getBoundingClientRect().height;\n  const scrollableElementHeight =\n    scrollableElement.getBoundingClientRect().height;\n\n  return scrollableElementHeight - containerElementHeight >= 0;\n};\n\nexport const getIsYAxisScrollContainer = (element: HTMLElement) => {\n  const overflowY = window.getComputedStyle(element).overflowY;\n\n  return overflowY === \"auto\" || overflowY === \"scroll\";\n};\n\nexport const getIsYAxisScrolling = (element: HTMLElement) =>\n  element.scrollHeight > element.clientHeight\n    ? getIsYAxisScrollContainer(element)\n    : false;\n\nexport const getNestedScrollContainers = (containerElement: HTMLElement) =>\n  Array.from(containerElement.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => getIsYAxisScrollContainer(element))\n    .filter((scrollableElement) =>\n      getIsScrollHeightElement({\n        containerElement,\n        scrollableElement,\n      }),\n    );\n\nexport const fakeDefaultContainerElement = document.createElement(\"div\");\n\nexport const useScrollState = <\n  ContainerElement extends HTMLElement = HTMLDivElement,\n>(\n  /**\n   * The element containing a scroll area.\n   */\n  containerElement: ContainerElement | null,\n) => {\n  const [isScrolled, setIsScrolled] = useState(false);\n\n  const requestedAnimationFrameIdRef = useRef(0);\n  const scrollableElementsRef = useRef<HTMLElement[]>([]);\n\n  const updateScrollState = useCallback(() => {\n    cancelAnimationFrame(requestedAnimationFrameIdRef.current);\n\n    requestedAnimationFrameIdRef.current = requestAnimationFrame(() => {\n      setIsScrolled(\n        scrollableElementsRef.current.reduce(\n          (isScrolled, scrollableElement) =>\n            isScrolled || scrollableElement.scrollTop > 0,\n          false,\n        ),\n      );\n    });\n  }, []);\n\n  const addScrollEventListeners = useCallback(() => {\n    scrollableElementsRef.current.forEach((scrollableElement) => {\n      scrollableElement.addEventListener(\"scroll\", updateScrollState);\n    });\n  }, [updateScrollState]);\n\n  const removeScrollEventListeners = useCallback(() => {\n    scrollableElementsRef.current.forEach((scrollableElement) => {\n      scrollableElement.removeEventListener(\"scroll\", updateScrollState);\n    });\n  }, [updateScrollState]);\n\n  const updateScrollableElements = useCallback(() => {\n    const computedContainerElement =\n      containerElement || fakeDefaultContainerElement;\n\n    scrollableElementsRef.current = getNestedScrollContainers(\n      computedContainerElement,\n    ).concat(computedContainerElement);\n  }, [containerElement]);\n\n  const updateScrollListeners = useCallback(() => {\n    removeScrollEventListeners();\n    updateScrollableElements();\n    addScrollEventListeners();\n    updateScrollState();\n  }, [\n    addScrollEventListeners,\n    removeScrollEventListeners,\n    updateScrollableElements,\n    updateScrollState,\n  ]);\n\n  useEffect(() => {\n    const mutationObserver = new MutationObserver(() => {\n      updateScrollListeners();\n    });\n\n    if (containerElement) {\n      mutationObserver.observe(containerElement, {\n        attributes: true,\n        attributeFilter: [\"style\"],\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    updateScrollListeners();\n\n    return () => {\n      cancelAnimationFrame(requestedAnimationFrameIdRef.current);\n      removeScrollEventListeners();\n      mutationObserver.disconnect();\n    };\n  }, [containerElement, removeScrollEventListeners, updateScrollListeners]);\n\n  return {\n    isContentScrolled: isScrolled,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEhE,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EACvCC,gBAAgB;EAChBC;AAIF,CAAC,KAAK;EACJ,MAAMC,sBAAsB,GAC1BF,gBAAgB,CAACG,qBAAqB,CAAC,CAAC,CAACC,MAAM;EACjD,MAAMC,uBAAuB,GAC3BJ,iBAAiB,CAACE,qBAAqB,CAAC,CAAC,CAACC,MAAM;EAElD,OAAOC,uBAAuB,GAAGH,sBAAsB,IAAI,CAAC;AAC9D,CAAC;AAED,OAAO,MAAMI,yBAAyB,GAAIC,OAAoB,IAAK;EACjE,MAAMC,SAAS,GAAGC,MAAM,CAACC,gBAAgB,CAACH,OAAO,CAAC,CAACC,SAAS;EAE5D,OAAOA,SAAS,KAAK,MAAM,IAAIA,SAAS,KAAK,QAAQ;AACvD,CAAC;AAED,OAAO,MAAMG,mBAAmB,GAAIJ,OAAoB,IACtDA,OAAO,CAACK,YAAY,GAAGL,OAAO,CAACM,YAAY,GACvCP,yBAAyB,CAACC,OAAO,CAAC,GAClC,KAAK;AAEX,OAAO,MAAMO,yBAAyB,GAAId,gBAA6B,IACrEe,KAAK,CAACC,IAAI,CAAChB,gBAAgB,CAACiB,gBAAgB,CAAc,GAAG,CAAC,CAAC,CAC5DC,MAAM,CAAEX,OAAO,IAAKD,yBAAyB,CAACC,OAAO,CAAC,CAAC,CACvDW,MAAM,CAAEjB,iBAAiB,IACxBF,wBAAwB,CAAC;EACvBC,gBAAgB;EAChBC;AACF,CAAC,CACH,CAAC;AAEL,OAAO,MAAMkB,2BAA2B,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;AAExE,OAAO,MAAMC,cAAc,GAMzBtB,gBAAyC,IACtC;EACH,MAAM,CAACuB,UAAU,EAAEC,aAAa,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EAEnD,MAAM2B,4BAA4B,GAAG5B,MAAM,CAAC,CAAC,CAAC;EAC9C,MAAM6B,qBAAqB,GAAG7B,MAAM,CAAgB,EAAE,CAAC;EAEvD,MAAM8B,iBAAiB,GAAGhC,WAAW,CAAC,MAAM;IAC1CiC,oBAAoB,CAACH,4BAA4B,CAACI,OAAO,CAAC;IAE1DJ,4BAA4B,CAACI,OAAO,GAAGC,qBAAqB,CAAC,MAAM;MACjEN,aAAa,CACXE,qBAAqB,CAACG,OAAO,CAACE,MAAM,CAClC,CAACR,UAAU,EAAEtB,iBAAiB,KAC5BsB,UAAU,IAAItB,iBAAiB,CAAC+B,SAAS,GAAG,CAAC,EAC/C,KACF,CACF,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,uBAAuB,GAAGtC,WAAW,CAAC,MAAM;IAChD+B,qBAAqB,CAACG,OAAO,CAACK,OAAO,CAAEjC,iBAAiB,IAAK;MAC3DA,iBAAiB,CAACkC,gBAAgB,CAAC,QAAQ,EAAER,iBAAiB,CAAC;IACjE,CAAC,CAAC;EACJ,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMS,0BAA0B,GAAGzC,WAAW,CAAC,MAAM;IACnD+B,qBAAqB,CAACG,OAAO,CAACK,OAAO,CAAEjC,iBAAiB,IAAK;MAC3DA,iBAAiB,CAACoC,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;IACpE,CAAC,CAAC;EACJ,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMW,wBAAwB,GAAG3C,WAAW,CAAC,MAAM;IACjD,MAAM4C,wBAAwB,GAC5BvC,gBAAgB,IAAImB,2BAA2B;IAEjDO,qBAAqB,CAACG,OAAO,GAAGf,yBAAyB,CACvDyB,wBACF,CAAC,CAACC,MAAM,CAACD,wBAAwB,CAAC;EACpC,CAAC,EAAE,CAACvC,gBAAgB,CAAC,CAAC;EAEtB,MAAMyC,qBAAqB,GAAG9C,WAAW,CAAC,MAAM;IAC9CyC,0BAA0B,CAAC,CAAC;IAC5BE,wBAAwB,CAAC,CAAC;IAC1BL,uBAAuB,CAAC,CAAC;IACzBN,iBAAiB,CAAC,CAAC;EACrB,CAAC,EAAE,CACDM,uBAAuB,EACvBG,0BAA0B,EAC1BE,wBAAwB,EACxBX,iBAAiB,CAClB,CAAC;EAEF/B,SAAS,CAAC,MAAM;IACd,MAAM8C,gBAAgB,GAAG,IAAIC,gBAAgB,CAAC,MAAM;MAClDF,qBAAqB,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,IAAIzC,gBAAgB,EAAE;MACpB0C,gBAAgB,CAACE,OAAO,CAAC5C,gBAAgB,EAAE;QACzC6C,UAAU,EAAE,IAAI;QAChBC,eAAe,EAAE,CAAC,OAAO,CAAC;QAC1BC,SAAS,EAAE,IAAI;QACfC,OAAO,EAAE;MACX,CAAC,CAAC;IACJ;IAEAP,qBAAqB,CAAC,CAAC;IAEvB,OAAO,MAAM;MACXb,oBAAoB,CAACH,4BAA4B,CAACI,OAAO,CAAC;MAC1DO,0BAA0B,CAAC,CAAC;MAC5BM,gBAAgB,CAACO,UAAU,CAAC,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACjD,gBAAgB,EAAEoC,0BAA0B,EAAEK,qBAAqB,CAAC,CAAC;EAEzE,OAAO;IACLS,iBAAiB,EAAE3B;EACrB,CAAC;AACH,CAAC","ignoreList":[]}