@okta/odyssey-react-mui 1.29.0 → 1.32.0

package/dist/cjs/ui-shell/SideNav/SideNavItemContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_SideNavItemLinkContent","_SideNavItemContentContext","_index","_UiShellProvider","_jsxRuntime","e","__esModule","default","StyledSideNavListItem","exports","styled","shouldForwardProp","prop","isSelected","odysseyDesignTokens","sideNavContrastColors","display","alignItems","backgroundColor","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","color","fontColor","TypographyColorAction","itemSelectedBackgroundColor","HueBlue50","scrollToNode","node","scrollIntoView","behavior","block","inline","getBaseNavItemContentStyles","isDisabled","width","textDecoration","TypographyColorHeading","minHeight","paddingBlock","Spacing3","paddingInlineEnd","Spacing4","cursor","itemHoverBackgroundColor","HueNeutral50","fontWeight","TypographyWeightBodyBold","TypographyColorDisabled","itemDisabledFontColor","outline","boxShadow","focusRingColor","PalettePrimaryMain","getNavItemContentStyles","contextValue","paddingInlineStart","depth","Spacing6","isCompact","Spacing1","NavItemContentContainer","StyledNavItemLink","_Link2","SideNavItemContent","count","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","onItemSelected","uiShellContext","useUiShellContext","sidenavItemContentContext","useSideNavItemContent","useMemo","useOdysseyDesignTokens","localScrollRef","useRef","useImperativeHandle","current","itemClickHandler","useCallback","event","sideNavItemContentKeyHandler","key","preventDefault","jsx","undefined","disabled","ref","children","SideNavItemLinkContent","onKeyDown","role","tabIndex","jsxs","className","ExternalLinkIcon","MemoizedSideNavItemContent","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  KeyboardEventHandler,\n  memo,\n  MouseEventHandler,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { Link as NavItemLink } from \"@mui/material\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent.js\";\nimport type { SideNavItem } from \"./types.js\";\nimport {\n  SideNavItemContentContextValue,\n  useSideNavItemContent,\n} from \"./SideNavItemContentContext.js\";\nimport { ExternalLinkIcon } from \"../../icons.generated/index.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\n\nexport const StyledSideNavListItem = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"isSelected\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"sideNavContrastColors\",\n})<{\n  sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n  odysseyDesignTokens: DesignTokens;\n  isSelected?: boolean;\n  itemSelectedBackgroundColor?: string;\n  disabled?: boolean;\n}>(({ isSelected, odysseyDesignTokens, sideNavContrastColors }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  backgroundColor: \"unset\",\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n  ...(isSelected && {\n    color: sideNavContrastColors?.fontColor\n      ? `${sideNavContrastColors.fontColor}`\n      : `${odysseyDesignTokens.TypographyColorAction}`,\n    backgroundColor:\n      sideNavContrastColors?.itemSelectedBackgroundColor ||\n      odysseyDesignTokens.HueBlue50,\n  }),\n}));\n\nconst scrollToNode = (node: HTMLElement | null) => {\n  if (node) {\n    node?.scrollIntoView({\n      behavior: \"instant\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }\n};\n\ntype ScrollIntoViewHandle = {\n  scrollIntoView: () => void;\n};\n\nexport const getBaseNavItemContentStyles = ({\n  isDisabled,\n  isSelected,\n  odysseyDesignTokens,\n  sideNavContrastColors,\n}: {\n  isSelected?: boolean;\n  isDisabled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  width: \"100%\",\n  textDecoration: \"none\",\n  // !important needed here to override more specific base link styling\n  color: sideNavContrastColors?.fontColor\n    ? `${sideNavContrastColors?.fontColor} !important`\n    : `${odysseyDesignTokens.TypographyColorHeading} !important`,\n  minHeight: \"unset\",\n  paddingBlock: odysseyDesignTokens.Spacing3,\n  paddingInlineEnd: odysseyDesignTokens.Spacing4,\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n  cursor: \"pointer\",\n\n  // When hover or focus of the drag handle, apply general hover styles\n  \"&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &\": {\n    textDecoration: \"none\",\n    backgroundColor:\n      sideNavContrastColors?.itemHoverBackgroundColor ||\n      odysseyDesignTokens.HueNeutral50,\n\n    ...(isSelected && {\n      backgroundColor:\n        sideNavContrastColors?.itemSelectedBackgroundColor ||\n        odysseyDesignTokens.HueBlue50,\n      color:\n        sideNavContrastColors?.fontColor ||\n        odysseyDesignTokens.TypographyColorAction,\n    }),\n\n    ...(isDisabled && {\n      backgroundColor: \"unset\",\n    }),\n  },\n\n  ...(isSelected && {\n    color: sideNavContrastColors?.fontColor\n      ? `${sideNavContrastColors?.fontColor} !important`\n      : `${odysseyDesignTokens.TypographyColorAction} !important`,\n    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n  }),\n\n  ...(isDisabled && {\n    cursor: \"default\",\n    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n\n    ...(sideNavContrastColors?.itemDisabledFontColor && {\n      color: `${sideNavContrastColors?.itemDisabledFontColor} !important`,\n    }),\n  }),\n\n  \"&:focus-visible\": {\n    outline: \"none\",\n    boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor || odysseyDesignTokens.PalettePrimaryMain}`,\n  },\n});\n\nexport const getNavItemContentStyles = ({\n  odysseyDesignTokens,\n  contextValue,\n}: {\n  odysseyDesignTokens: DesignTokens;\n  contextValue: SideNavItemContentContextValue;\n}) => ({\n  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,\n\n  ...(contextValue.depth === 1 && {\n    paddingInlineStart: odysseyDesignTokens.Spacing4,\n  }),\n\n  ...(contextValue.isCompact && {\n    paddingBlock: odysseyDesignTokens.Spacing1,\n  }),\n});\n\nconst NavItemContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop != \"contextValue\" &&\n    prop !== \"isDisabled\" &&\n    prop !== \"sideNavContrastColors\" &&\n    prop !== \"isSelected\",\n})<{\n  contextValue: SideNavItemContentContextValue;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n  isSelected?: boolean;\n  isDisabled?: boolean;\n}>(\n  ({\n    isDisabled,\n    isSelected,\n    contextValue,\n    odysseyDesignTokens,\n    sideNavContrastColors,\n  }) => ({\n    ...getBaseNavItemContentStyles({\n      isDisabled,\n      isSelected,\n      odysseyDesignTokens,\n      sideNavContrastColors,\n    }),\n\n    ...getNavItemContentStyles({\n      odysseyDesignTokens,\n      contextValue,\n    }),\n  }),\n);\n\nconst StyledNavItemLink = styled(NavItemLink, {\n  shouldForwardProp: (prop) =>\n    prop != \"contextValue\" &&\n    prop !== \"isDisabled\" &&\n    prop !== \"isSelected\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"sideNavContrastColors\",\n})<{\n  contextValue: SideNavItemContentContextValue;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n  isSelected?: boolean;\n  isDisabled?: boolean;\n}>(\n  ({\n    isDisabled,\n    isSelected,\n    contextValue,\n    odysseyDesignTokens,\n    sideNavContrastColors,\n  }) => ({\n    ...getBaseNavItemContentStyles({\n      isDisabled,\n      isSelected,\n      odysseyDesignTokens,\n      sideNavContrastColors,\n    }),\n\n    ...getNavItemContentStyles({\n      odysseyDesignTokens,\n      contextValue,\n    }),\n  }),\n);\n\nconst SideNavItemContent = ({\n  count,\n  id,\n  label,\n  href,\n  target,\n  startIcon,\n  severity,\n  statusLabel,\n  endIcon,\n  onClick,\n  isDisabled,\n  isSelected,\n  scrollRef,\n  onItemSelected,\n}: Pick<\n  SideNavItem,\n  | \"count\"\n  | \"id\"\n  | \"label\"\n  | \"href\"\n  | \"target\"\n  | \"startIcon\"\n  | \"severity\"\n  | \"statusLabel\"\n  | \"endIcon\"\n  | \"onClick\"\n  | \"isDisabled\"\n  | \"isSelected\"\n> & {\n  /**\n   * The ref used to scroll to this item\n   */\n  scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n  onItemSelected?: (selectedItemId: string) => void;\n}) => {\n  const uiShellContext = useUiShellContext();\n  const sidenavItemContentContext = useSideNavItemContent();\n  const contextValue = useMemo(\n    () => sidenavItemContentContext,\n    [sidenavItemContentContext],\n  );\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const localScrollRef = useRef<HTMLLIElement>(null);\n  useImperativeHandle(scrollRef, () => {\n    return {\n      scrollIntoView: () => {\n        scrollToNode(localScrollRef.current);\n      },\n    };\n  }, []);\n\n  const itemClickHandler = useCallback<\n    MouseEventHandler<HTMLDivElement | HTMLAnchorElement>\n  >(\n    (event) => {\n      onItemSelected?.(id);\n      onClick?.(event);\n    },\n    [id, onClick, onItemSelected],\n  );\n\n  const sideNavItemContentKeyHandler = useCallback<\n    KeyboardEventHandler<HTMLDivElement>\n  >(\n    (event) => {\n      if (event?.key === \"Enter\") {\n        event.preventDefault();\n        onItemSelected?.(id);\n        onClick?.(event);\n      }\n    },\n    [id, onClick, onItemSelected],\n  );\n\n  return (\n    <StyledSideNavListItem\n      aria-disabled={isDisabled}\n      aria-current={isSelected ? \"page\" : undefined}\n      disabled={isDisabled}\n      id={id}\n      isSelected={isSelected}\n      key={id}\n      odysseyDesignTokens={odysseyDesignTokens}\n      ref={localScrollRef}\n      sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n    >\n      {\n        // Use Link for nav items with links and div for disabled or non-link items\n        isDisabled ? (\n          <NavItemContentContainer\n            contextValue={contextValue}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            odysseyDesignTokens={odysseyDesignTokens}\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n          </NavItemContentContainer>\n        ) : !href ? (\n          <NavItemContentContainer\n            contextValue={contextValue}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            onClick={itemClickHandler}\n            onKeyDown={sideNavItemContentKeyHandler}\n            odysseyDesignTokens={odysseyDesignTokens}\n            role=\"button\"\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n            tabIndex={0}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n          </NavItemContentContainer>\n        ) : (\n          <StyledNavItemLink\n            contextValue={contextValue}\n            href={href}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            odysseyDesignTokens={odysseyDesignTokens}\n            onClick={itemClickHandler}\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n            target={target}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n            {target === \"_blank\" && (\n              <span className=\"Link-indicator\" role=\"presentation\">\n                <ExternalLinkIcon />\n              </span>\n            )}\n          </StyledNavItemLink>\n        )\n      }\n    </StyledSideNavListItem>\n  );\n};\n\nconst MemoizedSideNavItemContent = memo(SideNavItemContent);\nMemoizedSideNavItemContent.displayName = \"SideNavItemContent\";\n\nexport { MemoizedSideNavItemContent as SideNavItemContent };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/ui-shell/SideNav/SideNavItemContentContext.cjs

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSideNavItemContent = exports.SideNavItemContentContext = void 0;
+var _react = require("react");
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const SideNavItemContentContext = exports.SideNavItemContentContext = (0, _react.createContext)({
+  isCompact: false,
+  isSortable: false,
+  depth: 1
+});
+const useSideNavItemContent = () => (0, _react.useContext)(SideNavItemContentContext);
+exports.useSideNavItemContent = useSideNavItemContent;
+//# sourceMappingURL=SideNavItemContentContext.cjs.map

package/dist/cjs/ui-shell/SideNav/SideNavItemContentContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemContentContext.cjs","names":["_react","require","SideNavItemContentContext","exports","createContext","isCompact","isSortable","depth","useSideNavItemContent","useContext"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContentContext.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 { createContext, useContext } from \"react\";\n\nexport type SideNavItemContentContextValue = {\n  isCompact?: boolean;\n  isSortable?: boolean;\n  depth: number;\n};\n\nexport const SideNavItemContentContext =\n  createContext<SideNavItemContentContextValue>({\n    isCompact: false,\n    isSortable: false,\n    depth: 1,\n  });\n\nexport const useSideNavItemContent = () =>\n  useContext(SideNavItemContentContext);\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUO,MAAMC,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GACpC,IAAAE,oBAAa,EAAiC;EAC5CC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE,KAAK;EACjBC,KAAK,EAAE;AACT,CAAC,CAAC;AAEG,MAAMC,qBAAqB,GAAGA,CAAA,KACnC,IAAAC,iBAAU,EAACP,yBAAyB,CAAC;AAACC,OAAA,CAAAK,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/dist/cjs/ui-shell/SideNav/SideNavItemLinkContent.cjs

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavItemLinkContent = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _Box = require("../../Box.cjs");
+var _Status = require("../../Status.cjs");
+var _Badge = require("../../Badge.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const SideNavItemLabelContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isIconVisible"
+})(({
+  odysseyDesignTokens,
+  isIconVisible
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  fontSize: odysseyDesignTokens.TypographySizeBody,
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0
+}));
+const SideNavItemLinkContent = ({
+  count,
+  label,
+  startIcon,
+  endIcon,
+  severity,
+  statusLabel
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const sideNavItemContentStyles = (0, _react.useMemo)(() => ({
+    alignItems: "center",
+    display: "flex",
+    gap: odysseyDesignTokens.Spacing1,
+    marginInlineStart: odysseyDesignTokens.Spacing2
+  }), [odysseyDesignTokens]);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [startIcon && startIcon, (0, _jsxRuntime.jsxs)(SideNavItemLabelContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      isIconVisible: Boolean(startIcon),
+      children: [label, !count && severity && (0, _jsxRuntime.jsx)(_Box.Box, {
+        sx: sideNavItemContentStyles,
+        children: severity && (0, _jsxRuntime.jsx)(_Status.Status, {
+          severity: severity,
+          label: statusLabel || ""
+        })
+      }), !severity && count && (0, _jsxRuntime.jsx)(_Box.Box, {
+        sx: sideNavItemContentStyles,
+        children: count && (0, _jsxRuntime.jsx)(_Badge.Badge, {
+          badgeContent: count
+        })
+      })]
+    }), endIcon && endIcon]
+  });
+};
+const MemoizedSideNavItemLinkContent = exports.SideNavItemLinkContent = (0, _react.memo)(SideNavItemLinkContent);
+MemoizedSideNavItemLinkContent.displayName = "SideNavItemLinkContent";
+//# sourceMappingURL=SideNavItemLinkContent.cjs.map

package/dist/cjs/ui-shell/SideNav/SideNavItemLinkContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemLinkContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_Box","_Status","_Badge","_jsxRuntime","e","__esModule","default","SideNavItemLabelContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","isIconVisible","width","display","flexWrap","alignItems","fontSize","TypographySizeBody","marginInlineStart","Spacing3","SideNavItemLinkContent","count","label","startIcon","endIcon","severity","statusLabel","useOdysseyDesignTokens","sideNavItemContentStyles","useMemo","gap","Spacing1","Spacing2","jsxs","Fragment","children","Boolean","jsx","Box","sx","Status","Badge","badgeContent","MemoizedSideNavItemLinkContent","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemLinkContent.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, ReactNode, useMemo } from \"react\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Box } from \"../../Box.js\";\nimport { Status } from \"../../Status.js\";\nimport type { SideNavItem } from \"./types.js\";\nimport { Badge } from \"../../Badge.js\";\n\nconst SideNavItemLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isIconVisible: boolean;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeBody,\n  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,\n}));\n\nconst SideNavItemLinkContent = ({\n  count,\n  label,\n  startIcon,\n  endIcon,\n  severity,\n  statusLabel,\n}: Pick<\n  SideNavItem,\n  \"count\" | \"label\" | \"startIcon\" | \"endIcon\" | \"severity\" | \"statusLabel\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavItemContentStyles = useMemo(\n    () => ({\n      alignItems: \"center\",\n      display: \"flex\",\n      gap: odysseyDesignTokens.Spacing1,\n      marginInlineStart: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <>\n      {startIcon && startIcon}\n      <SideNavItemLabelContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isIconVisible={Boolean(startIcon)}\n      >\n        {label}\n        {!count && severity && (\n          <Box sx={sideNavItemContentStyles}>\n            {severity && (\n              <Status severity={severity} label={statusLabel || \"\"} />\n            )}\n          </Box>\n        )}\n        {!severity && count && (\n          <Box sx={sideNavItemContentStyles}>\n            {count && <Badge badgeContent={count} />}\n          </Box>\n        )}\n      </SideNavItemLabelContainer>\n      {endIcon && endIcon}\n    </>\n  );\n};\nconst MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);\nMemoizedSideNavItemLinkContent.displayName = \"SideNavItemLinkContent\";\n\nexport { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };\n"],"mappings":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,2BAAA,GAAAF,OAAA;AAIA,IAAAG,IAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAL,OAAA;AAAuC,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AArBvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaA,MAAMG,yBAAyB,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EAC9CC,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAc,CAAC,MAAM;EAC9CC,KAAK,EAAE,MAAM;EACbC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,QAAQ;EACpBC,QAAQ,EAAEN,mBAAmB,CAACO,kBAAkB;EAChDC,iBAAiB,EAAEP,aAAa,GAAGD,mBAAmB,CAACS,QAAQ,GAAG;AACpE,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC;AAIF,CAAC,KAAgB;EACf,MAAMhB,mBAAmB,GAAG,IAAAiB,kDAAsB,EAAC,CAAC;EAEpD,MAAMC,wBAAwB,GAAG,IAAAC,cAAO,EACtC,OAAO;IACLd,UAAU,EAAE,QAAQ;IACpBF,OAAO,EAAE,MAAM;IACfiB,GAAG,EAAEpB,mBAAmB,CAACqB,QAAQ;IACjCb,iBAAiB,EAAER,mBAAmB,CAACsB;EACzC,CAAC,CAAC,EACF,CAACtB,mBAAmB,CACtB,CAAC;EAED,OACE,IAAAR,WAAA,CAAA+B,IAAA,EAAA/B,WAAA,CAAAgC,QAAA;IAAAC,QAAA,GACGZ,SAAS,IAAIA,SAAS,EACvB,IAAArB,WAAA,CAAA+B,IAAA,EAAC3B,yBAAyB;MACxBI,mBAAmB,EAAEA,mBAAoB;MACzCC,aAAa,EAAEyB,OAAO,CAACb,SAAS,CAAE;MAAAY,QAAA,GAEjCb,KAAK,EACL,CAACD,KAAK,IAAII,QAAQ,IACjB,IAAAvB,WAAA,CAAAmC,GAAA,EAACtC,IAAA,CAAAuC,GAAG;QAACC,EAAE,EAAEX,wBAAyB;QAAAO,QAAA,EAC/BV,QAAQ,IACP,IAAAvB,WAAA,CAAAmC,GAAA,EAACrC,OAAA,CAAAwC,MAAM;UAACf,QAAQ,EAAEA,QAAS;UAACH,KAAK,EAAEI,WAAW,IAAI;QAAG,CAAE;MACxD,CACE,CACN,EACA,CAACD,QAAQ,IAAIJ,KAAK,IACjB,IAAAnB,WAAA,CAAAmC,GAAA,EAACtC,IAAA,CAAAuC,GAAG;QAACC,EAAE,EAAEX,wBAAyB;QAAAO,QAAA,EAC/Bd,KAAK,IAAI,IAAAnB,WAAA,CAAAmC,GAAA,EAACpC,MAAA,CAAAwC,KAAK;UAACC,YAAY,EAAErB;QAAM,CAAE;MAAC,CACrC,CACN;IAAA,CACwB,CAAC,EAC3BG,OAAO,IAAIA,OAAO;EAAA,CACnB,CAAC;AAEP,CAAC;AACD,MAAMmB,8BAA8B,GAAAC,OAAA,CAAAxB,sBAAA,GAAG,IAAAyB,WAAI,EAACzB,sBAAsB,CAAC;AACnEuB,8BAA8B,CAACG,WAAW,GAAG,wBAAwB","ignoreList":[]}

package/dist/cjs/ui-shell/SideNav/SideNavLogo.cjs

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavLogo = void 0;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _OktaLogo = require("./OktaLogo.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const StyledLogoContainer = (0, _styled.default)("div")(() => ({
+  display: "flex",
+  alignItems: "center",
+  height: "100%"
+}));
+const StyledLogoLink = (0, _styled.default)("a")(() => ({
+  display: "flex",
+  alignItems: "center",
+  height: "100%"
+}));
+const SideNavLogo = ({
+  imageAltText,
+  logoComponent,
+  imageUrl,
+  ...optionalProps
+}) => {
+  const logo = (0, _react.useMemo)(() => {
+    if (logoComponent) {
+      return logoComponent;
+    }
+    if (imageAltText && imageUrl) {
+      return (0, _jsxRuntime.jsx)("img", {
+        src: imageUrl,
+        alt: imageAltText
+      });
+    }
+    return (0, _jsxRuntime.jsx)(_OktaLogo.OktaLogo, {});
+  }, [imageAltText, logoComponent, imageUrl]);
+  return "href" in optionalProps && "ariaLabel" in optionalProps ? (0, _jsxRuntime.jsx)(StyledLogoLink, {
+    "aria-label": optionalProps.ariaLabel,
+    "data-se": "sidenav-header-logo",
+    href: optionalProps.href,
+    children: logo
+  }) : (0, _jsxRuntime.jsx)(StyledLogoContainer, {
+    role: "presentation",
+    children: logo
+  });
+};
+const MemoizedSideNavLogo = exports.SideNavLogo = (0, _react.memo)(SideNavLogo);
+MemoizedSideNavLogo.displayName = "SideNavLogo";
+//# sourceMappingURL=SideNavLogo.cjs.map

package/dist/cjs/ui-shell/SideNav/SideNavLogo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavLogo.cjs","names":["_react","require","_styled","_interopRequireDefault","_OktaLogo","_jsxRuntime","e","__esModule","default","StyledLogoContainer","styled","display","alignItems","height","StyledLogoLink","SideNavLogo","imageAltText","logoComponent","imageUrl","optionalProps","logo","useMemo","jsx","src","alt","OktaLogo","ariaLabel","href","children","role","MemoizedSideNavLogo","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"100%\",\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n  imageAltText,\n  logoComponent,\n  imageUrl,\n  ...optionalProps\n}: SideNavLogoProps) => {\n  const logo = useMemo(() => {\n    if (logoComponent) {\n      return logoComponent;\n    }\n\n    if (imageAltText && imageUrl) {\n      return <img src={imageUrl} alt={imageAltText} />;\n    }\n\n    return <OktaLogo />;\n  }, [imageAltText, logoComponent, imageUrl]);\n\n  return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n    <StyledLogoLink\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      href={optionalProps.href}\n    >\n      {logo}\n    </StyledLogoLink>\n  ) : (\n    <StyledLogoContainer role=\"presentation\">{logo}</StyledLogoContainer>\n  );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAH,OAAA;AAAyC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAfzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,MAAMG,mBAAmB,GAAG,IAAAC,eAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EAC/CC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAG,IAAAJ,eAAM,EAAC,GAAG,CAAC,CAAC,OAAO;EACxCC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAME,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACR,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,IAAIJ,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAID,YAAY,IAAIE,QAAQ,EAAE;MAC5B,OAAO,IAAAb,WAAA,CAAAiB,GAAA;QAAKC,GAAG,EAAEL,QAAS;QAACM,GAAG,EAAER;MAAa,CAAE,CAAC;IAClD;IAEA,OAAO,IAAAX,WAAA,CAAAiB,GAAA,EAAClB,SAAA,CAAAqB,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACT,YAAY,EAAEC,aAAa,EAAEC,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIC,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5D,IAAAd,WAAA,CAAAiB,GAAA,EAACR,cAAc;IACb,cAAYK,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAER,aAAa,CAACQ,IAAK;IAAAC,QAAA,EAExBR;EAAI,CACS,CAAC,GAEjB,IAAAf,WAAA,CAAAiB,GAAA,EAACb,mBAAmB;IAACoB,IAAI,EAAC,cAAc;IAAAD,QAAA,EAAER;EAAI,CAAsB,CACrE;AACH,CAAC;AAED,MAAMU,mBAAmB,GAAAC,OAAA,CAAAhB,WAAA,GAAG,IAAAiB,WAAI,EAACjB,WAAW,CAAC;AAC7Ce,mBAAmB,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}

package/dist/cjs/ui-shell/SideNav/SideNavToggleButton.cjs

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavToggleButton = void 0;
+var _Button2 = _interopRequireDefault(require("@mui/material/Button"));
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _reactI18next = require("react-i18next");
+var _createContrastColors = require("../../createContrastColors.cjs");
+var _MuiPropsContext = require("../../MuiPropsContext.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _Tooltip = require("../../Tooltip.cjs");
+var _UiShellProvider = require("../../ui-shell/UiShellProvider.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const StyledToggleButton = (0, _styled.default)(_Button2.default, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed" && prop !== "toggleContrastColors"
+})(({
+  isSideNavCollapsed,
+  odysseyDesignTokens,
+  toggleContrastColors
+}) => ({
+  backgroundColor: "transparent",
+  position: "relative",
+  width: odysseyDesignTokens.Spacing6,
+  height: odysseyDesignTokens.Spacing6,
+  border: 0,
+  zIndex: 2,
+  "&: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)"
+          }
+        }
+      }
+    })
+  },
+  span: {
+    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
+    })
+  }
+}));
+const SideNavToggleButton = ({
+  ariaControls,
+  buttonRef,
+  id,
+  isSideNavCollapsed,
+  onClick,
+  tabIndex
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
+  const localButtonRef = (0, _react.useRef)(null);
+  const toggleContrastColors = (0, _react.useMemo)(() => {
+    const hasNonStandardAppBackgroundColor = uiShellContext?.appBackgroundColor && uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutralWhite && uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutral50;
+    if (hasNonStandardAppBackgroundColor) {
+      return (0, _createContrastColors.generateContrastColors)(uiShellContext.appBackgroundColor, odysseyDesignTokens);
+    }
+    return undefined;
+  }, [odysseyDesignTokens, uiShellContext]);
+  (0, _react.useImperativeHandle)(buttonRef, () => ({
+    focus: () => {
+      localButtonRef.current?.focus();
+    }
+  }), []);
+  const toggleLabel = (0, _react.useMemo)(() => isSideNavCollapsed ? t("sidenav.toggle.expand") : t("sidenav.toggle.collapse"), [isSideNavCollapsed, t]);
+  const renderButton = (0, _react.useCallback)(muiProps => {
+    return (0, _jsxRuntime.jsxs)(StyledToggleButton, {
+      ...muiProps,
+      "aria-controls": ariaControls,
+      "aria-expanded": !isSideNavCollapsed,
+      "aria-label": toggleLabel,
+      "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);
+        }
+      },
+      tabIndex: tabIndex,
+      toggleContrastColors: toggleContrastColors,
+      variant: "floating",
+      children: [(0, _jsxRuntime.jsx)("span", {
+        id: "lineOne"
+      }), (0, _jsxRuntime.jsx)("span", {
+        id: "lineTwo"
+      })]
+    });
+  }, [ariaControls, id, isSideNavCollapsed, odysseyDesignTokens, onClick, tabIndex, toggleContrastColors, toggleLabel]);
+  return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+    ariaType: "description",
+    placement: "right",
+    text: toggleLabel,
+    children: (0, _jsxRuntime.jsx)(_MuiPropsContext.MuiPropsContext.Consumer, {
+      children: renderButton
+    })
+  });
+};
+const MemoizedSideNavToggleButton = exports.SideNavToggleButton = (0, _react.memo)(SideNavToggleButton);
+MemoizedSideNavToggleButton.displayName = "SideNavToggleButton";
+//# sourceMappingURL=SideNavToggleButton.cjs.map

package/dist/cjs/ui-shell/SideNav/SideNavToggleButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavToggleButton.cjs","names":["_react","require","_styled","_interopRequireDefault","_reactI18next","_createContrastColors","_MuiPropsContext","_OdysseyDesignTokensContext","_Tooltip","_UiShellProvider","_jsxRuntime","e","__esModule","default","StyledToggleButton","styled","_Button2","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","useOdysseyDesignTokens","t","useTranslation","uiShellContext","useUiShellContext","localButtonRef","useRef","useMemo","hasNonStandardAppBackgroundColor","appBackgroundColor","HueNeutralWhite","HueNeutral50","generateContrastColors","undefined","useImperativeHandle","focus","current","toggleLabel","renderButton","useCallback","muiProps","jsxs","ref","element","variant","children","jsx","Tooltip","ariaType","placement","text","MuiPropsContext","Consumer","MemoizedSideNavToggleButton","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavToggleButton.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  ContrastColors,\n  generateContrastColors,\n} from \"../../createContrastColors.js\";\nimport { FocusHandle } from \"../../inputUtils.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { useUiShellContext } from \"../../ui-shell/UiShellProvider.js\";\n\nconst StyledToggleButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isSideNavCollapsed\" &&\n    prop !== \"toggleContrastColors\",\n})<{\n  isSideNavCollapsed: boolean;\n  odysseyDesignTokens: DesignTokens;\n  toggleContrastColors?: ContrastColors;\n}>(({ isSideNavCollapsed, odysseyDesignTokens, toggleContrastColors }) => ({\n  backgroundColor: \"transparent\",\n  position: \"relative\",\n  width: odysseyDesignTokens.Spacing6,\n  height: odysseyDesignTokens.Spacing6,\n  border: 0,\n  zIndex: 2,\n\n  \"&:focus-visible\": {\n    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n    outline: \"none\",\n  },\n\n  \"&:hover, &:focus-visible\": {\n    backgroundColor: \"transparent\",\n\n    \"#lineOne\": {\n      animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n      animationFillMode: \"forwards\",\n      \"@keyframes lineOne-animate-to-collapse\": {\n        \"0%\": {\n          transform: \"translate3d(-50%, -50%, 0)\",\n        },\n        \"50%\": {\n          transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n        },\n        \"100%\": {\n          transform: \"translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)\",\n        },\n      },\n    },\n\n    \"#lineTwo\": {\n      animation: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n      animationFillMode: \"forwards\",\n      \"@keyframes lineTwo-animate-to-collapse\": {\n        \"0%\": {\n          transform: \"translate3d(-50%, -50%, 0)\",\n        },\n        \"50%\": {\n          transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n        },\n        \"100%\": {\n          transform: \"translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)\",\n        },\n      },\n    },\n\n    ...(isSideNavCollapsed && {\n      \"#lineOne\": {\n        animation: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n        animationFillMode: \"forwards\",\n        \"@keyframes lineOne-animate-to-expand\": {\n          \"0%\": {\n            transform: \"translate3d(-50%, -50%, 0)\",\n          },\n          \"50%\": {\n            transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n          },\n          \"100%\": {\n            transform: \"translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)\",\n          },\n        },\n      },\n\n      \"#lineTwo\": {\n        animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n        animationFillMode: \"forwards\",\n        \"@keyframes lineTwo-animate-to-expand\": {\n          \"0%\": {\n            transform: \"translate3d(-50%, -50%, 0)\",\n          },\n          \"50%\": {\n            transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n          },\n          \"100%\": {\n            transform: \"translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)\",\n          },\n        },\n      },\n    }),\n  },\n\n  span: {\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"2px\",\n    height: odysseyDesignTokens.Spacing4,\n    backgroundColor: odysseyDesignTokens.HueNeutral600,\n    transform: \"translate3d(-50%, -50%, 0)\",\n    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n\n    ...(toggleContrastColors?.fontColor && {\n      backgroundColor: toggleContrastColors.fontColor,\n    }),\n  },\n}));\n\nexport type SideNavToggleButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The `id` of the item this button controls\n   */\n  ariaControls: string;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  isSideNavCollapsed: boolean;\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n};\n\nconst SideNavToggleButton = ({\n  ariaControls,\n  buttonRef,\n  id,\n  isSideNavCollapsed,\n  onClick,\n  tabIndex,\n}: SideNavToggleButtonProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const uiShellContext = useUiShellContext();\n\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n  const toggleContrastColors = useMemo(() => {\n    const hasNonStandardAppBackgroundColor =\n      uiShellContext?.appBackgroundColor &&\n      uiShellContext?.appBackgroundColor !==\n        odysseyDesignTokens.HueNeutralWhite &&\n      uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutral50;\n\n    if (hasNonStandardAppBackgroundColor) {\n      return generateContrastColors(\n        uiShellContext.appBackgroundColor,\n        odysseyDesignTokens,\n      );\n    }\n\n    return undefined;\n  }, [odysseyDesignTokens, uiShellContext]);\n\n  useImperativeHandle(\n    buttonRef,\n    () => ({\n      focus: () => {\n        localButtonRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const toggleLabel = useMemo(\n    () =>\n      isSideNavCollapsed\n        ? t(\"sidenav.toggle.expand\")\n        : t(\"sidenav.toggle.collapse\"),\n    [isSideNavCollapsed, t],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <StyledToggleButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-expanded={!isSideNavCollapsed}\n          aria-label={toggleLabel}\n          data-se=\"sidenav-toggle-button\"\n          data-sidenav-toggle={true}\n          id={id}\n          isSideNavCollapsed={isSideNavCollapsed}\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={onClick}\n          ref={(element) => {\n            if (element) {\n              (\n                localButtonRef as React.MutableRefObject<HTMLButtonElement>\n              ).current = element;\n              //@ts-expect-error ref is not an optional prop on the props context type\n              muiProps?.ref?.(element);\n            }\n          }}\n          tabIndex={tabIndex}\n          toggleContrastColors={toggleContrastColors}\n          variant=\"floating\"\n        >\n          <span id=\"lineOne\" />\n          <span id=\"lineTwo\" />\n        </StyledToggleButton>\n      );\n    },\n    [\n      ariaControls,\n      id,\n      isSideNavCollapsed,\n      odysseyDesignTokens,\n      onClick,\n      tabIndex,\n      toggleContrastColors,\n      toggleLabel,\n    ],\n  );\n\n  return (\n    <Tooltip ariaType=\"description\" placement=\"right\" text={toggleLabel}>\n      <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n    </Tooltip>\n  );\n};\n\nconst MemoizedSideNavToggleButton = memo(SideNavToggleButton);\nMemoizedSideNavToggleButton.displayName = \"SideNavToggleButton\";\n\nexport { MemoizedSideNavToggleButton as SideNavToggleButton };\n"],"mappings":"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","ignoreList":[]}