@okta/odyssey-react-mui 1.40.0 → 1.41.1

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

@@ -79,7 +79,7 @@ const StyledChevronRightIcon = styled(ChevronRightIcon, {
   transitionProperty: "transform",
   transitionTimingFunction: "ease-in-out"
 }));
-const defaultLocalButton = document.createElement("button");
+const defaultLocalButton = typeof window === "undefined" ? null : document.createElement("button");
 const SideNavToggleButton = ({
   ariaControls,
   clickAreaPadding = 0,
@@ -102,18 +102,18 @@ const SideNavToggleButton = ({
       onHighlight?.(false);
     };
     const setFocusHighlighted = () => {
-      onHighlight?.(buttonRef.current.matches(":focus-visible"));
+      onHighlight?.(Boolean(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);
+    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);
+      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]);

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

@@ -1 +1 @@
-{"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":[]}
+{"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","window","document","createElement","SideNavToggleButton","ariaControls","id","onClick","onHighlight","tabIndex","t","buttonRef","setHighlighted","setUnhighlighted","setFocusHighlighted","Boolean","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 =\n  typeof window === \"undefined\" ? null : 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?.(Boolean(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(\n        \"focus\",\n        setFocusHighlighted,\n        true,\n      );\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/renderUiShell.js

@@ -95,8 +95,8 @@ export const renderUiShell = ({
         uiShellStylesElement: reactRootElements.stylesRootElement
       })
     }),
-    webComponentParentElement: parentElement,
-    webComponentChildren
+    webComponentChildren,
+    webComponentParentElement: parentElement
   });
   const unsubscribeFromUnifiedUiShellRendered = subscribeToReactAppSubscribed(() => {
     unsubscribeFromUnifiedUiShellRendered();

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

@@ -1 +1 @@
-{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","uiShellDataAttribute","renderReactInWebComponent","jsx","_jsx","optionalComponentSlotNames","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","breakpointConfig","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onRender","parentElement","sideNavBackgroundColor","topNavBackgroundColor","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","closeRightSideMenu","subscribeToCloseRightSideMenu","closeSideNavMenu","subscribeToCloseSideNavMenu","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","getReactComponent","reactRootElements","fallback","children","onSubscriptionCreated","optionalComponents","name","uiShellAppElement","appRootElement","uiShellStylesElement","stylesRootElement","webComponentParentElement","unsubscribeFromUnifiedUiShellRendered","setComponentProps","appendChild"],"sources":["../../../src/ui-shell/renderUiShell.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 { type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { bufferLatest } from \"./bufferLatest.js\";\nimport { createMessageBus, PublishMessage } from \"./createMessageBus.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { UiShellNavComponentProps } from \"./uiShellContentTypes.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  rightSideMenu: \"right-side-menu\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\nexport type SlottedElements = Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  HTMLDivElement\n>;\n\nexport type RenderedUiShell = {\n  closeRightSideMenu: PublishMessage<void>;\n  closeSideNavMenu: PublishMessage<void>;\n  setComponentProps: ReturnType<\n    typeof bufferLatest<SetStateAction<UiShellNavComponentProps>>\n  >;\n  slottedElements: SlottedElements;\n  uiShellElement: ReturnType<typeof renderReactInWebComponent>;\n} & Partial<Pick<UiShellProps, \"appElement\">>;\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement: providedAppElement,\n  appElementScrollingMode,\n  breakpointConfig,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onRender,\n  parentElement,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n}: {\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * Notify once when React has rendered UI Shell the first time.\n   */\n  onRender?: (renderedUiShell: RenderedUiShell) => void;\n  /**\n   * HTML element used as the container for UI Shell and the App. They're siblings inside this element.\n   */\n  parentElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appElementScrollingMode\"\n  | \"breakpointConfig\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n> &\n  Partial<Pick<UiShellProps, \"appElement\">>) => {\n  const appElement = providedAppElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  parentElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const {\n    publish: closeRightSideMenu,\n    subscribe: subscribeToCloseRightSideMenu,\n  } = createMessageBus();\n\n  const { publish: closeSideNavMenu, subscribe: subscribeToCloseSideNavMenu } =\n    createMessageBus();\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as SlottedElements;\n\n  const webComponentChildren = Object.values(slottedElements);\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={<div data-error />} onError={onError}>\n        <UiShell\n          breakpointConfig={breakpointConfig}\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appElement={appElement}\n          appElementScrollingMode={appElementScrollingMode}\n          closeSideNavMenu={closeSideNavMenu}\n          hasStandardAppContentPadding={hasStandardAppContentPadding}\n          initialVisibleSections={initialVisibleSections}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once, and this isn't a React component.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n          subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n          uiShellAppElement={reactRootElements.appRootElement}\n          uiShellStylesElement={reactRootElements.stylesRootElement}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentParentElement: parentElement,\n    webComponentChildren,\n  });\n\n  const unsubscribeFromUnifiedUiShellRendered = subscribeToReactAppSubscribed(\n    () => {\n      unsubscribeFromUnifiedUiShellRendered();\n\n      onRender?.({\n        appElement,\n        closeRightSideMenu,\n        closeSideNavMenu,\n        setComponentProps: publishAfterReactAppReadyForProps,\n        slottedElements,\n        uiShellElement,\n      });\n    },\n  );\n\n  parentElement.appendChild(appElement);\n\n  return {\n    appElement,\n    closeRightSideMenu,\n    closeSideNavMenu,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderUiShell.js","names":["ErrorBoundary","bufferLatest","createMessageBus","UiShell","uiShellDataAttribute","renderReactInWebComponent","jsx","_jsx","optionalComponentSlotNames","banners","rightSideMenu","sideNavFooter","topNavLeftSide","topNavRightSide","renderUiShell","appBackgroundColor","appBackgroundContrastMode","appElement","providedAppElement","appElementScrollingMode","breakpointConfig","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onRender","parentElement","sideNavBackgroundColor","topNavBackgroundColor","document","createElement","setAttribute","publish","publishPropChanges","subscribe","subscribeToPropChanges","publishSubscriptionCreated","subscribeToReactAppSubscribed","publishAfterReactAppReadyForProps","closeRightSideMenu","subscribeToCloseRightSideMenu","closeSideNavMenu","subscribeToCloseSideNavMenu","slottedElements","Object","fromEntries","entries","map","optionalComponentKey","slotName","element","webComponentChildren","values","uiShellElement","getReactComponent","reactRootElements","fallback","children","onSubscriptionCreated","optionalComponents","name","uiShellAppElement","appRootElement","uiShellStylesElement","stylesRootElement","webComponentParentElement","unsubscribeFromUnifiedUiShellRendered","setComponentProps","appendChild"],"sources":["../../../src/ui-shell/renderUiShell.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 { type SetStateAction } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { bufferLatest } from \"./bufferLatest.js\";\nimport { createMessageBus, PublishMessage } from \"./createMessageBus.js\";\nimport { UiShell, UiShellProps } from \"./UiShell.js\";\nimport { UiShellNavComponentProps } from \"./uiShellContentTypes.js\";\nimport { uiShellDataAttribute } from \"./useHasUiShell.js\";\nimport { renderReactInWebComponent } from \"../web-component/renderReactInWebComponent.js\";\n\nexport const optionalComponentSlotNames: Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  string\n> = {\n  banners: \"banners\",\n  rightSideMenu: \"right-side-menu\",\n  sideNavFooter: \"side-nav-footer\",\n  topNavLeftSide: \"top-nav-left-side\",\n  topNavRightSide: \"top-nav-right-side\",\n};\n\nexport type SlottedElements = Record<\n  keyof Required<UiShellProps>[\"optionalComponents\"],\n  HTMLDivElement\n>;\n\nexport type RenderedUiShell = {\n  closeRightSideMenu: PublishMessage<void>;\n  closeSideNavMenu: PublishMessage<void>;\n  setComponentProps: ReturnType<\n    typeof bufferLatest<SetStateAction<UiShellNavComponentProps>>\n  >;\n  slottedElements: SlottedElements;\n  uiShellElement: ReturnType<typeof renderReactInWebComponent>;\n} & Partial<Pick<UiShellProps, \"appElement\">>;\n\n/**\n * This function renders UI Shell in a web component.\n * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.\n *\n * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.\n *\n * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.\n * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**\n */\nexport const renderUiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement: providedAppElement,\n  appElementScrollingMode,\n  breakpointConfig,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onRender,\n  parentElement,\n  sideNavBackgroundColor,\n  topNavBackgroundColor,\n}: {\n  /**\n   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.\n   */\n  onError?: () => void;\n  /**\n   * Notify once when React has rendered UI Shell the first time.\n   */\n  onRender?: (renderedUiShell: RenderedUiShell) => void;\n  /**\n   * HTML element used as the container for UI Shell and the App. They're siblings inside this element.\n   */\n  parentElement: HTMLElement;\n} & Pick<\n  UiShellProps,\n  | \"appBackgroundColor\"\n  | \"appBackgroundContrastMode\"\n  | \"appElementScrollingMode\"\n  | \"breakpointConfig\"\n  | \"hasStandardAppContentPadding\"\n  | \"initialVisibleSections\"\n  | \"sideNavBackgroundColor\"\n  | \"topNavBackgroundColor\"\n> &\n  Partial<Pick<UiShellProps, \"appElement\">>) => {\n  const appElement = providedAppElement || document.createElement(\"div\");\n\n  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.\n  parentElement.setAttribute(uiShellDataAttribute, \"\");\n\n  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =\n    createMessageBus<SetStateAction<UiShellNavComponentProps>>();\n\n  const {\n    publish: publishSubscriptionCreated,\n    subscribe: subscribeToReactAppSubscribed,\n  } = createMessageBus();\n\n  const publishAfterReactAppReadyForProps = bufferLatest({\n    publish: publishPropChanges,\n    subscribe: subscribeToReactAppSubscribed,\n  });\n\n  const {\n    publish: closeRightSideMenu,\n    subscribe: subscribeToCloseRightSideMenu,\n  } = createMessageBus();\n\n  const { publish: closeSideNavMenu, subscribe: subscribeToCloseSideNavMenu } =\n    createMessageBus();\n\n  const slottedElements = Object.fromEntries(\n    Object.entries(optionalComponentSlotNames).map(\n      ([optionalComponentKey, slotName]) => {\n        const element = document.createElement(\"div\");\n\n        element.setAttribute(\"slot\", slotName);\n\n        return [optionalComponentKey, element];\n      },\n    ),\n  ) as SlottedElements;\n\n  const webComponentChildren = Object.values(slottedElements);\n\n  const uiShellElement = renderReactInWebComponent({\n    getReactComponent: (reactRootElements) => (\n      <ErrorBoundary fallback={<div data-error />} onError={onError}>\n        <UiShell\n          breakpointConfig={breakpointConfig}\n          appBackgroundColor={appBackgroundColor}\n          appBackgroundContrastMode={appBackgroundContrastMode}\n          appElement={appElement}\n          appElementScrollingMode={appElementScrollingMode}\n          closeSideNavMenu={closeSideNavMenu}\n          hasStandardAppContentPadding={hasStandardAppContentPadding}\n          initialVisibleSections={initialVisibleSections}\n          onError={onError}\n          onSubscriptionCreated={publishSubscriptionCreated}\n          // `optionalComponents` doesn't need to be memoized because gets passed in once, and this isn't a React component.\n          optionalComponents={Object.fromEntries(\n            Object.entries(optionalComponentSlotNames).map(\n              ([optionalComponentKey, slotName]) => [\n                optionalComponentKey,\n                <slot name={slotName} />,\n              ],\n            ),\n          )}\n          sideNavBackgroundColor={sideNavBackgroundColor}\n          subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n          subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n          subscribeToPropChanges={subscribeToPropChanges}\n          topNavBackgroundColor={topNavBackgroundColor}\n          uiShellAppElement={reactRootElements.appRootElement}\n          uiShellStylesElement={reactRootElements.stylesRootElement}\n        />\n      </ErrorBoundary>\n    ),\n    webComponentChildren,\n    webComponentParentElement: parentElement,\n  });\n\n  const unsubscribeFromUnifiedUiShellRendered = subscribeToReactAppSubscribed(\n    () => {\n      unsubscribeFromUnifiedUiShellRendered();\n\n      onRender?.({\n        appElement,\n        closeRightSideMenu,\n        closeSideNavMenu,\n        setComponentProps: publishAfterReactAppReadyForProps,\n        slottedElements,\n        uiShellElement,\n      });\n    },\n  );\n\n  parentElement.appendChild(appElement);\n\n  return {\n    appElement,\n    closeRightSideMenu,\n    closeSideNavMenu,\n    setComponentProps: publishAfterReactAppReadyForProps,\n    slottedElements,\n    uiShellElement,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -28,7 +28,7 @@ export const getNestedScrollContainers = containerElement => Array.from(containe
   containerElement,
   element
 })).filter(scrollHeightElement => getIsYAxisScrollContainer(scrollHeightElement));
-export const fakeDefaultContainerElement = document.createElement("div");
+export const fakeDefaultContainerElement = typeof window === "undefined" ? null : document.createElement("div");
 export const useScrollState = containerElement => {
   const [isScrolled, setIsScrolled] = useState(false);
   const requestedAnimationFrameIdRef = useRef(0);
@@ -51,7 +51,9 @@ export const useScrollState = containerElement => {
   }, [updateScrollState]);
   const updateScrollableElements = useCallback(() => {
     const computedContainerElement = containerElement || fakeDefaultContainerElement;
-    scrollableElementsRef.current = getNestedScrollContainers(computedContainerElement).concat(computedContainerElement);
+    if (computedContainerElement) {
+      scrollableElementsRef.current = getNestedScrollContainers(computedContainerElement).concat(computedContainerElement);
+    }
   }, [containerElement]);
   const updateScrollListeners = useCallback(() => {
     removeScrollEventListeners();

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollState.js","names":["useCallback","useEffect","useRef","useState","getIsScrollHeightElement","containerElement","element","containerElementHeight","getBoundingClientRect","height","elementHeight","getIsYAxisScrollContainer","overflowY","window","getComputedStyle","getIsYAxisScrolling","scrollHeight","clientHeight","getNestedScrollContainers","Array","from","querySelectorAll","filter","scrollHeightElement","fakeDefaultContainerElement","document","createElement","useScrollState","isScrolled","setIsScrolled","requestedAnimationFrameIdRef","scrollableElementsRef","updateScrollState","cancelAnimationFrame","current","requestAnimationFrame","reduce","scrollableElement","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  element,\n}: {\n  containerElement: HTMLElement;\n  element: HTMLElement;\n}) => {\n  const containerElementHeight =\n    containerElement.getBoundingClientRect().height;\n  const elementHeight = element.getBoundingClientRect().height;\n\n  return elementHeight - 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) =>\n      getIsScrollHeightElement({\n        containerElement,\n        element,\n      }),\n    )\n    .filter((scrollHeightElement) =>\n      getIsYAxisScrollContainer(scrollHeightElement),\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":"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","ignoreList":[]}
+{"version":3,"file":"useScrollState.js","names":["useCallback","useEffect","useRef","useState","getIsScrollHeightElement","containerElement","element","containerElementHeight","getBoundingClientRect","height","elementHeight","getIsYAxisScrollContainer","overflowY","window","getComputedStyle","getIsYAxisScrolling","scrollHeight","clientHeight","getNestedScrollContainers","Array","from","querySelectorAll","filter","scrollHeightElement","fakeDefaultContainerElement","document","createElement","useScrollState","isScrolled","setIsScrolled","requestedAnimationFrameIdRef","scrollableElementsRef","updateScrollState","cancelAnimationFrame","current","requestAnimationFrame","reduce","scrollableElement","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  element,\n}: {\n  containerElement: HTMLElement;\n  element: HTMLElement;\n}) => {\n  const containerElementHeight =\n    containerElement.getBoundingClientRect().height;\n  const elementHeight = element.getBoundingClientRect().height;\n\n  return elementHeight - 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) =>\n      getIsScrollHeightElement({\n        containerElement,\n        element,\n      }),\n    )\n    .filter((scrollHeightElement) =>\n      getIsYAxisScrollContainer(scrollHeightElement),\n    );\n\nexport const fakeDefaultContainerElement =\n  typeof window === \"undefined\" ? null : 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    if (computedContainerElement) {\n      scrollableElementsRef.current = getNestedScrollContainers(\n        computedContainerElement,\n      ).concat(computedContainerElement);\n    }\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":"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","ignoreList":[]}

package/dist/esm/useAutocomplete.js

@@ -47,9 +47,9 @@ export const useAutocomplete = ({
     return value === undefined ? defaultValue : undefined;
   }, [defaultValue, hasMultipleChoices, value]);
   const valueProps = useInputValues({
+    controlState: controlledStateRef.current,
     defaultValue: defaultValueProp,
-    value: value,
-    controlState: controlledStateRef.current
+    value
   });
   const inputValueProp = useMemo(() => {
     if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {

package/dist/esm/useAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAutocomplete.js","names":["useCallback","useMemo","useRef","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","useAutocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hint","HintLinkComponent","inputValue","isFullWidth","isOptional","isVirtualized","isVirtualizedProp","label","name","nameOverride","testId","value","controlledStateRef","controlledValue","uncontrolledValue","isVirtualizedRef","Boolean","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","id","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required"],"sources":["../../src/useAutocomplete.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 { useCallback, useMemo, useRef } from \"react\";\nimport {\n  InputBase,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\n\nimport { AutocompleteProps } from \"./Autocomplete.js\";\nimport { Field } from \"./Field.js\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils.js\";\n\nexport type UseAutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = Pick<\n  AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  | \"ariaDescribedBy\"\n  | \"defaultValue\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hasMultipleChoices\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"inputValue\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isVirtualized\"\n  | \"label\"\n  | \"name\"\n  | \"testId\"\n  | \"value\"\n>;\n\nexport const useAutocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  hint,\n  HintLinkComponent,\n  inputValue,\n  isFullWidth,\n  isOptional,\n  isVirtualized: isVirtualizedProp,\n  label,\n  name: nameOverride,\n  testId,\n  value,\n}: UseAutocompleteProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const isVirtualizedRef = useRef(Boolean(isVirtualizedProp));\n\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor exists on `InputLabelProps`, but not the type.\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n        id={InputLabelProps.htmlFor}\n        isFullWidth={isFullWidth}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isFullWidth,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n\n  return {\n    inputValueProp,\n    isVirtualizedRef,\n    renderInput,\n    valueProps,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useAutocomplete.js","names":["useCallback","useMemo","useRef","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","useAutocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hint","HintLinkComponent","inputValue","isFullWidth","isOptional","isVirtualized","isVirtualizedProp","label","name","nameOverride","testId","value","controlledStateRef","controlledValue","uncontrolledValue","isVirtualizedRef","Boolean","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","id","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required"],"sources":["../../src/useAutocomplete.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 { useCallback, useMemo, useRef } from \"react\";\nimport {\n  InputBase,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\n\nimport { AutocompleteProps } from \"./Autocomplete.js\";\nimport { Field } from \"./Field.js\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils.js\";\n\nexport type UseAutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = Pick<\n  AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  | \"ariaDescribedBy\"\n  | \"defaultValue\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hasMultipleChoices\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"inputValue\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isVirtualized\"\n  | \"label\"\n  | \"name\"\n  | \"testId\"\n  | \"value\"\n>;\n\nexport const useAutocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  hint,\n  HintLinkComponent,\n  inputValue,\n  isFullWidth,\n  isOptional,\n  isVirtualized: isVirtualizedProp,\n  label,\n  name: nameOverride,\n  testId,\n  value,\n}: UseAutocompleteProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const isVirtualizedRef = useRef(Boolean(isVirtualizedProp));\n\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    controlState: controlledStateRef.current,\n    defaultValue: defaultValueProp,\n    value,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor exists on `InputLabelProps`, but not the type.\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n        id={InputLabelProps.htmlFor}\n        isFullWidth={isFullWidth}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isFullWidth,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n\n  return {\n    inputValueProp,\n    isVirtualizedRef,\n    renderInput,\n    valueProps,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/web-component/odysseyWebComponentVersion.generated.js

@@ -8,5 +8,5 @@
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  *
  * See the License for the specific language governing permissions and limitations under the License.
- */export default "2-0-0";
+ */export default "1-41-1";
 //# sourceMappingURL=odysseyWebComponentVersion.generated.js.map

package/dist/esm/web-component/odysseyWebComponentVersion.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"odysseyWebComponentVersion.generated.js","names":[],"sources":["../../../src/web-component/odysseyWebComponentVersion.generated.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\n/**\n * DO NOT UPDATE THIS FILE MANUALLY\n * This file is managed by scripts/updateWebComponentVersion.ts and any changes made will be overwritten\n * This script only needs to be run during release, and shouldn't be used during local development.\n */\nexport default \"2-0-0\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAOA,eAAe,OAAO","ignoreList":[]}
+{"version":3,"file":"odysseyWebComponentVersion.generated.js","names":[],"sources":["../../../src/web-component/odysseyWebComponentVersion.generated.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\n/**\n * DO NOT UPDATE THIS FILE MANUALLY\n * This file is managed by scripts/updateWebComponentVersion.ts and any changes made will be overwritten\n * This script only needs to be run during release, and shouldn't be used during local development.\n */\n\nexport default \"1-41-1\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAQA,eAAe,QAAQ","ignoreList":[]}

package/dist/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Jul 2025 14:33:29 GMT
+ * Generated on Wed, 23 Jul 2025 16:19:33 GMT
  */
 
 module.exports = {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Jul 2025 14:33:29 GMT
+ * Generated on Wed, 23 Jul 2025 16:19:33 GMT
  */
 
 export const BorderColorControl : string;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Jul 2025 14:33:29 GMT
+ * Generated on Wed, 23 Jul 2025 16:19:33 GMT
  */
 
 export const BorderColorControl = "#8d8d8d";

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 09 Jul 2025 14:33:29 GMT
+ * Generated on Wed, 23 Jul 2025 16:19:33 GMT
  */
 
 $border-color-control: #8d8d8d !default;