@okta/odyssey-contribution-tooling 1.48.0 → 1.49.0

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

@@ -0,0 +1,290 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNavItemContentStyles = exports.getBaseNavItemContentStyles = exports.StyledSideNavListItem = exports.SideNavItemContent = void 0;
+var _Link2 = _interopRequireDefault(require("@mui/material/Link"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _index = require("../../icons.generated/index.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _UiShellProvider = require("../../ui-shell/UiShellProvider.cjs");
+var _SideNavItemContentContext = require("./SideNavItemContentContext.cjs");
+var _SideNavItemLinkContent = require("./SideNavItemLinkContent.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 StyledSideNavListItem = exports.StyledSideNavListItem = (0, _styled.default)("li", {
+  shouldForwardProp: prop => prop !== "isSelected" && prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors"
+})(({
+  isSelected,
+  odysseyDesignTokens,
+  sideNavContrastColors
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: "unset",
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+  ...(isSelected && {
+    color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors.fontColor}` : `${odysseyDesignTokens.TypographyColorAction}`,
+    backgroundColor: sideNavContrastColors?.itemSelectedBackgroundColor || odysseyDesignTokens.HueBlue50
+  })
+}));
+const scrollToNode = node => {
+  if (node) {
+    node?.scrollIntoView({
+      behavior: "instant",
+      block: "center",
+      inline: "nearest"
+    });
+  }
+};
+const getBaseNavItemContentStyles = ({
+  isDisabled,
+  isSelected,
+  odysseyDesignTokens,
+  sideNavContrastColors,
+  isActiveDropTarget
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  textDecoration: "none",
+  color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors?.fontColor} !important` : `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  minHeight: "unset",
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInlineEnd: odysseyDesignTokens.Spacing4,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+  cursor: "pointer",
+  ...(isActiveDropTarget && {
+    backgroundColor: sideNavContrastColors?.itemHoverBackgroundColor || odysseyDesignTokens.HueNeutral50
+  }),
+  "&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &": {
+    textDecoration: "none",
+    backgroundColor: sideNavContrastColors?.itemHoverBackgroundColor || odysseyDesignTokens.HueNeutral50,
+    ...(isSelected && {
+      backgroundColor: sideNavContrastColors?.itemSelectedBackgroundColor || odysseyDesignTokens.HueBlue50,
+      color: sideNavContrastColors?.fontColor || odysseyDesignTokens.TypographyColorAction
+    }),
+    ...(isDisabled && {
+      backgroundColor: "unset"
+    })
+  },
+  ...(isSelected && {
+    color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors?.fontColor} !important` : `${odysseyDesignTokens.TypographyColorAction} !important`,
+    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold
+  }),
+  ...(isDisabled && {
+    cursor: "default",
+    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
+    ...(sideNavContrastColors?.itemDisabledFontColor && {
+      color: `${sideNavContrastColors?.itemDisabledFontColor} !important`
+    })
+  }),
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor || odysseyDesignTokens.PalettePrimaryMain}`
+  }
+});
+exports.getBaseNavItemContentStyles = getBaseNavItemContentStyles;
+const getNavItemContentStyles = ({
+  odysseyDesignTokens,
+  contextValue,
+  paddingInlineStart = odysseyDesignTokens.Spacing6
+}) => ({
+  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${paddingInlineStart})`,
+  ...(contextValue.depth === 1 && {
+    paddingInlineStart: odysseyDesignTokens.Spacing4
+  }),
+  ...(contextValue.isCompact && {
+    paddingBlock: odysseyDesignTokens.Spacing1
+  })
+});
+exports.getNavItemContentStyles = getNavItemContentStyles;
+const NavItemContentContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop != "contextValue" && prop !== "isDisabled" && prop !== "sideNavContrastColors" && prop !== "isSelected" && prop !== "isActiveDropTarget"
+})(({
+  isDisabled,
+  isSelected,
+  contextValue,
+  odysseyDesignTokens,
+  sideNavContrastColors,
+  isActiveDropTarget
+}) => ({
+  ...getBaseNavItemContentStyles({
+    isDisabled,
+    isSelected,
+    odysseyDesignTokens,
+    sideNavContrastColors,
+    isActiveDropTarget
+  }),
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue,
+    paddingInlineStart: contextValue.absolutePaddingStart
+  })
+}));
+const StyledNavItemLink = (0, _styled.default)(_Link2.default, {
+  shouldForwardProp: prop => prop != "contextValue" && prop !== "isDisabled" && prop !== "isSelected" && prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors" && prop !== "isActiveDropTarget"
+})(({
+  isDisabled,
+  isSelected,
+  contextValue,
+  odysseyDesignTokens,
+  sideNavContrastColors,
+  isActiveDropTarget
+}) => ({
+  ...getBaseNavItemContentStyles({
+    isDisabled,
+    isSelected,
+    odysseyDesignTokens,
+    sideNavContrastColors,
+    isActiveDropTarget
+  }),
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue,
+    paddingInlineStart: contextValue.absolutePaddingStart
+  })
+}));
+const SideNavItemContent = ({
+  count,
+  id,
+  label,
+  href,
+  target,
+  startIcon,
+  severity,
+  statusLabel,
+  endIcon,
+  onClick,
+  isDisabled,
+  isSelected,
+  scrollRef,
+  onItemSelected,
+  translate
+}) => {
+  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
+  const sidenavItemContentContext = (0, _SideNavItemContentContext.useSideNavItemContent)();
+  const contextValue = (0, _react.useMemo)(() => sidenavItemContentContext, [sidenavItemContentContext]);
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const [isActiveDropTarget, setIsActiveDropTarget] = (0, _react.useState)(false);
+  const localScrollRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(scrollRef, () => {
+    return {
+      scrollIntoView: () => {
+        scrollToNode(localScrollRef.current);
+      }
+    };
+  }, []);
+  const itemClickHandler = (0, _react.useCallback)(event => {
+    onItemSelected?.(id);
+    onClick?.(event);
+  }, [id, onClick, onItemSelected]);
+  const sideNavItemContentKeyHandler = (0, _react.useCallback)(event => {
+    if (event?.key === "Enter") {
+      event.preventDefault();
+      onItemSelected?.(id);
+      onClick?.(event);
+    }
+  }, [id, onClick, onItemSelected]);
+  return (0, _jsxRuntime.jsx)(StyledSideNavListItem, {
+    "aria-current": isSelected ? "page" : undefined,
+    "aria-disabled": isDisabled,
+    disabled: isDisabled,
+    id: id,
+    isSelected: isSelected,
+    odysseyDesignTokens: odysseyDesignTokens,
+    onDragLeave: () => {
+      setIsActiveDropTarget(false);
+    },
+    onDragOver: () => {
+      setIsActiveDropTarget(true);
+    },
+    onDrop: () => {
+      setIsActiveDropTarget(false);
+    },
+    ref: localScrollRef,
+    sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+    children: isDisabled ? (0, _jsxRuntime.jsx)(NavItemContentContainer, {
+      contextValue: contextValue,
+      "data-se": "tb--sidenav-text-container",
+      isActiveDropTarget: false,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      odysseyDesignTokens: odysseyDesignTokens,
+      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+      children: (0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
+        count: count,
+        endIcon: endIcon,
+        label: label,
+        severity: severity,
+        startIcon: startIcon,
+        statusLabel: statusLabel,
+        translate: translate
+      })
+    }) : !href ? (0, _jsxRuntime.jsx)(NavItemContentContainer, {
+      contextValue: contextValue,
+      "data-se": "tb--sidenav-text-container",
+      isActiveDropTarget: isActiveDropTarget,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: itemClickHandler,
+      onKeyDown: sideNavItemContentKeyHandler,
+      role: "button",
+      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+      tabIndex: 0,
+      children: (0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
+        count: count,
+        endIcon: endIcon,
+        label: label,
+        severity: severity,
+        startIcon: startIcon,
+        statusLabel: statusLabel,
+        translate: translate
+      })
+    }) : (0, _jsxRuntime.jsxs)(StyledNavItemLink, {
+      contextValue: contextValue,
+      "data-se": "tb--sidenav-text-container",
+      href: href,
+      isActiveDropTarget: isActiveDropTarget,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: itemClickHandler,
+      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+      target: target,
+      children: [(0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
+        count: count,
+        endIcon: endIcon,
+        label: label,
+        severity: severity,
+        startIcon: startIcon,
+        statusLabel: statusLabel,
+        translate: translate
+      }), target === "_blank" && (0, _jsxRuntime.jsx)("span", {
+        className: "Link-indicator",
+        role: "presentation",
+        children: (0, _jsxRuntime.jsx)(_index.ExternalLinkIcon, {})
+      })]
+    })
+  }, id);
+};
+const MemoizedSideNavItemContent = exports.SideNavItemContent = (0, _react.memo)(SideNavItemContent);
+MemoizedSideNavItemContent.displayName = "SideNavItemContent";
+//# sourceMappingURL=SideNavItemContent.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_index","_OdysseyDesignTokensContext","_UiShellProvider","_SideNavItemContentContext","_SideNavItemLinkContent","_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","isActiveDropTarget","width","textDecoration","TypographyColorHeading","minHeight","paddingBlock","Spacing3","paddingInlineEnd","Spacing4","cursor","itemHoverBackgroundColor","HueNeutral50","fontWeight","TypographyWeightBodyBold","TypographyColorDisabled","itemDisabledFontColor","outline","boxShadow","focusRingColor","PalettePrimaryMain","getNavItemContentStyles","contextValue","paddingInlineStart","Spacing6","depth","isCompact","Spacing1","NavItemContentContainer","absolutePaddingStart","StyledNavItemLink","_Link2","SideNavItemContent","count","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","onItemSelected","translate","uiShellContext","useUiShellContext","sidenavItemContentContext","useSideNavItemContent","useMemo","useOdysseyDesignTokens","setIsActiveDropTarget","useState","localScrollRef","useRef","useImperativeHandle","current","itemClickHandler","useCallback","event","sideNavItemContentKeyHandler","key","preventDefault","jsx","undefined","disabled","onDragLeave","onDragOver","onDrop","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 { Link as NavItemLink } from \"@mui/material\";\nimport {\n  KeyboardEventHandler,\n  memo,\n  MouseEventHandler,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { SideNavItem } from \"./types.js\";\n\nimport { ExternalLinkIcon } from \"../../icons.generated/index.js\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  SideNavItemContentContextValue,\n  useSideNavItemContent,\n} from \"./SideNavItemContentContext.js\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent.js\";\n\nexport const StyledSideNavListItem = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"isSelected\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"sideNavContrastColors\",\n})<{\n  disabled?: boolean;\n  isSelected?: boolean;\n  itemSelectedBackgroundColor?: string;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\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  isActiveDropTarget,\n}: {\n  isActiveDropTarget: boolean;\n  isDisabled?: boolean;\n  isSelected?: 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  ...(isActiveDropTarget && {\n    backgroundColor:\n      sideNavContrastColors?.itemHoverBackgroundColor ||\n      odysseyDesignTokens.HueNeutral50,\n  }),\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  paddingInlineStart = odysseyDesignTokens.Spacing6,\n}: {\n  contextValue: SideNavItemContentContextValue;\n  odysseyDesignTokens: DesignTokens;\n  paddingInlineStart?: string;\n}) => ({\n  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${paddingInlineStart})`,\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    prop !== \"isActiveDropTarget\",\n})<{\n  contextValue: SideNavItemContentContextValue;\n  isActiveDropTarget: boolean;\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(\n  ({\n    isDisabled,\n    isSelected,\n    contextValue,\n    odysseyDesignTokens,\n    sideNavContrastColors,\n    isActiveDropTarget,\n  }) => ({\n    ...getBaseNavItemContentStyles({\n      isDisabled,\n      isSelected,\n      odysseyDesignTokens,\n      sideNavContrastColors,\n      isActiveDropTarget,\n    }),\n\n    ...getNavItemContentStyles({\n      odysseyDesignTokens,\n      contextValue,\n      paddingInlineStart: contextValue.absolutePaddingStart,\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    prop !== \"isActiveDropTarget\",\n})<{\n  contextValue: SideNavItemContentContextValue;\n  isActiveDropTarget: boolean;\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(\n  ({\n    isDisabled,\n    isSelected,\n    contextValue,\n    odysseyDesignTokens,\n    sideNavContrastColors,\n    isActiveDropTarget,\n  }) => ({\n    ...getBaseNavItemContentStyles({\n      isDisabled,\n      isSelected,\n      odysseyDesignTokens,\n      sideNavContrastColors,\n      isActiveDropTarget,\n    }),\n\n    ...getNavItemContentStyles({\n      odysseyDesignTokens,\n      contextValue,\n      paddingInlineStart: contextValue.absolutePaddingStart,\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  translate,\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  | \"translate\"\n> & {\n  onItemSelected?: (selectedItemId: string) => void;\n  /**\n   * The ref used to scroll to this item\n   */\n  scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n}) => {\n  const uiShellContext = useUiShellContext();\n  const sidenavItemContentContext = useSideNavItemContent();\n  const contextValue = useMemo(\n    () => sidenavItemContentContext,\n    [sidenavItemContentContext],\n  );\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const [isActiveDropTarget, setIsActiveDropTarget] = useState(false);\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-current={isSelected ? \"page\" : undefined}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      id={id}\n      isSelected={isSelected}\n      key={id}\n      odysseyDesignTokens={odysseyDesignTokens}\n      onDragLeave={() => {\n        setIsActiveDropTarget(false);\n      }}\n      onDragOver={() => {\n        setIsActiveDropTarget(true);\n      }}\n      onDrop={() => {\n        setIsActiveDropTarget(false);\n      }}\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            data-se=\"tb--sidenav-text-container\"\n            isActiveDropTarget={false}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            odysseyDesignTokens={odysseyDesignTokens}\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              endIcon={endIcon}\n              label={label}\n              severity={severity}\n              startIcon={startIcon}\n              statusLabel={statusLabel}\n              translate={translate}\n            />\n          </NavItemContentContainer>\n        ) : !href ? (\n          <NavItemContentContainer\n            contextValue={contextValue}\n            data-se=\"tb--sidenav-text-container\"\n            isActiveDropTarget={isActiveDropTarget}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            odysseyDesignTokens={odysseyDesignTokens}\n            onClick={itemClickHandler}\n            onKeyDown={sideNavItemContentKeyHandler}\n            role=\"button\"\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n            tabIndex={0}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              endIcon={endIcon}\n              label={label}\n              severity={severity}\n              startIcon={startIcon}\n              statusLabel={statusLabel}\n              translate={translate}\n            />\n          </NavItemContentContainer>\n        ) : (\n          <StyledNavItemLink\n            contextValue={contextValue}\n            data-se=\"tb--sidenav-text-container\"\n            href={href}\n            isActiveDropTarget={isActiveDropTarget}\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              endIcon={endIcon}\n              label={label}\n              severity={severity}\n              startIcon={startIcon}\n              statusLabel={statusLabel}\n              translate={translate}\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  absolutePaddingStart?: string;\n  depth: number;\n  isCompact?: boolean;\n  isSortable?: boolean;\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;;AAWO,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,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavItemLinkContent = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _Badge = require("../../Badge.cjs");
+var _Box = require("../../Box.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _Status = require("../../Status.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%",
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
+  alignItems: "center",
+  display: "flex",
+  fontSize: odysseyDesignTokens.TypographySizeBody,
+  overflowWrap: "anywhere"
+}));
+const SideNavItemLinkContent = ({
+  count,
+  label,
+  startIcon,
+  endIcon,
+  severity,
+  statusLabel,
+  translate
+}) => {
+  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, {
+      isIconVisible: Boolean(startIcon),
+      odysseyDesignTokens: odysseyDesignTokens,
+      translate: translate,
+      children: [label, !count && severity && (0, _jsxRuntime.jsx)(_Box.Box, {
+        sx: sideNavItemContentStyles,
+        children: severity && (0, _jsxRuntime.jsx)(_Status.Status, {
+          label: statusLabel || "",
+          severity: severity
+        })
+      }), !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","_Badge","_Box","_OdysseyDesignTokensContext","_Status","_jsxRuntime","e","__esModule","default","SideNavItemLabelContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","isIconVisible","width","marginInlineStart","Spacing3","alignItems","display","fontSize","TypographySizeBody","overflowWrap","SideNavItemLinkContent","count","label","startIcon","endIcon","severity","statusLabel","translate","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\";\n\nimport type { SideNavItem } from \"./types.js\";\n\nimport { Badge } from \"../../Badge.js\";\nimport { Box } from \"../../Box.js\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Status } from \"../../Status.js\";\n\nconst SideNavItemLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n  isIconVisible: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,\n  alignItems: \"center\",\n  display: \"flex\",\n  fontSize: odysseyDesignTokens.TypographySizeBody,\n  overflowWrap: \"anywhere\", // New way to do `wordBreak: \"break-word\"`. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word\n}));\n\nconst SideNavItemLinkContent = ({\n  count,\n  label,\n  startIcon,\n  endIcon,\n  severity,\n  statusLabel,\n  translate,\n}: Pick<\n  SideNavItem,\n  | \"count\"\n  | \"label\"\n  | \"startIcon\"\n  | \"endIcon\"\n  | \"severity\"\n  | \"statusLabel\"\n  | \"translate\"\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        isIconVisible={Boolean(startIcon)}\n        odysseyDesignTokens={odysseyDesignTokens}\n        translate={translate}\n      >\n        {label}\n        {!count && severity && (\n          <Box sx={sideNavItemContentStyles}>\n            {severity && (\n              <Status label={statusLabel || \"\"} severity={severity} />\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":"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","ignoreList":[]}

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavLogo = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+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", {
+  shouldForwardProp: prop => prop !== "isLogoInteractive"
+})(({
+  isLogoInteractive
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  height: "100%",
+  ...(isLogoInteractive && {
+    cursor: "pointer"
+  })
+}));
+const StyledLogoLink = (0, _styled.default)("a")(() => ({
+  alignItems: "center",
+  display: "flex",
+  height: "100%"
+}));
+const SideNavLogo = ({
+  imageAltText,
+  imageUrl,
+  logoComponent,
+  ...optionalProps
+}) => {
+  const logo = (0, _react.useMemo)(() => {
+    if (logoComponent) {
+      return logoComponent;
+    }
+    if (imageAltText && imageUrl) {
+      return (0, _jsxRuntime.jsx)("img", {
+        alt: imageAltText,
+        src: imageUrl
+      });
+    }
+    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,
+    onClick: optionalProps.onClick,
+    children: logo
+  }) : (0, _jsxRuntime.jsx)(StyledLogoContainer, {
+    "aria-label": optionalProps.ariaLabel,
+    "data-se": "sidenav-header-logo",
+    isLogoInteractive: Boolean(optionalProps.onClick) || optionalProps.href,
+    onClick: optionalProps.onClick,
+    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":["_styled","_interopRequireDefault","require","_react","_OktaLogo","_jsxRuntime","e","__esModule","default","StyledLogoContainer","styled","shouldForwardProp","prop","isLogoInteractive","alignItems","display","height","cursor","StyledLogoLink","SideNavLogo","imageAltText","imageUrl","logoComponent","optionalProps","logo","useMemo","jsx","alt","src","OktaLogo","ariaLabel","href","onClick","children","Boolean","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 styled from \"@emotion/styled\";\nimport { memo, useMemo } from \"react\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"isLogoInteractive\",\n})<{\n  isLogoInteractive?: boolean;\n}>(({ isLogoInteractive }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  height: \"100%\",\n\n  ...(isLogoInteractive && {\n    cursor: \"pointer\",\n  }),\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n  imageAltText,\n  imageUrl,\n  logoComponent,\n  ...optionalProps\n}: SideNavLogoProps) => {\n  const logo = useMemo(() => {\n    if (logoComponent) {\n      return logoComponent;\n    }\n\n    if (imageAltText && imageUrl) {\n      return <img alt={imageAltText} src={imageUrl} />;\n    }\n\n    return <OktaLogo />;\n  }, [imageAltText, logoComponent, imageUrl]);\n\n  return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n    <StyledLogoLink\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      href={optionalProps.href}\n      onClick={optionalProps.onClick}\n    >\n      {logo}\n    </StyledLogoLink>\n  ) : (\n    <StyledLogoContainer\n      aria-label={optionalProps.ariaLabel}\n      data-se=\"sidenav-header-logo\"\n      isLogoInteractive={Boolean(optionalProps.onClick) || optionalProps.href}\n      onClick={optionalProps.onClick}\n      role=\"presentation\"\n    >\n      {logo}\n    </StyledLogoContainer>\n  );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AAAyC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,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,EAAE;EACxCC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAkB,CAAC,MAAM;EAC7BC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,MAAM;EAEd,IAAIH,iBAAiB,IAAI;IACvBI,MAAM,EAAE;EACV,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAG,IAAAR,eAAM,EAAC,GAAG,CAAC,CAAC,OAAO;EACxCI,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMG,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,QAAQ;EACRC,aAAa;EACb,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,IAAIH,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAIF,YAAY,IAAIC,QAAQ,EAAE;MAC5B,OAAO,IAAAhB,WAAA,CAAAqB,GAAA;QAAKC,GAAG,EAAEP,YAAa;QAACQ,GAAG,EAAEP;MAAS,CAAE,CAAC;IAClD;IAEA,OAAO,IAAAhB,WAAA,CAAAqB,GAAA,EAACtB,SAAA,CAAAyB,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACT,YAAY,EAAEE,aAAa,EAAED,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIE,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5D,IAAAlB,WAAA,CAAAqB,GAAA,EAACR,cAAc;IACb,cAAYK,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAER,aAAa,CAACQ,IAAK;IACzBC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAAAC,QAAA,EAE9BT;EAAI,CACS,CAAC,GAEjB,IAAAnB,WAAA,CAAAqB,GAAA,EAACjB,mBAAmB;IAClB,cAAYc,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BjB,iBAAiB,EAAEqB,OAAO,CAACX,aAAa,CAACS,OAAO,CAAC,IAAIT,aAAa,CAACQ,IAAK;IACxEC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAC/BG,IAAI,EAAC,cAAc;IAAAF,QAAA,EAElBT;EAAI,CACc,CACtB;AACH,CAAC;AAED,MAAMY,mBAAmB,GAAAC,OAAA,CAAAlB,WAAA,GAAG,IAAAmB,WAAI,EAACnB,WAAW,CAAC;AAC7CiB,mBAAmB,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavSortableList = void 0;
+var _react = require("react");
+var _SortableList = require("./SortableList/SortableList.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * Copyright (c) 2023-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 SideNavSortableList = ({
+  items,
+  onChange,
+  parentId,
+  processSideNavItems,
+  depth = 1
+}) => {
+  const processedItems = (0, _react.useMemo)(() => processSideNavItems(items, depth), [processSideNavItems, items, depth]);
+  const sortableItems = (0, _react.useMemo)(() => processedItems.map(item => item.sortableItem), [processedItems]);
+  const renderItem = (0, _react.useCallback)(sortableItem => (0, _jsxRuntime.jsx)(_SortableList.SortableList.Item, {
+    id: sortableItem.id,
+    isDisabled: sortableItem.isDisabled,
+    isSelected: sortableItem.isSelected,
+    isSortable: sortableItem.isSortable,
+    children: sortableItem.navItem
+  }), []);
+  return (0, _jsxRuntime.jsx)(_SortableList.SortableList, {
+    items: sortableItems,
+    onChange: onChange,
+    parentId: parentId,
+    renderItem: renderItem
+  });
+};
+const MemoizedSideNavSortableList = exports.SideNavSortableList = (0, _react.memo)(SideNavSortableList);
+MemoizedSideNavSortableList.displayName = "SideNavSortableList";
+//# sourceMappingURL=SideNavSortableList.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavSortableList.cjs","names":["_react","require","_SortableList","_jsxRuntime","SideNavSortableList","items","onChange","parentId","processSideNavItems","depth","processedItems","useMemo","sortableItems","map","item","sortableItem","renderItem","useCallback","jsx","SortableList","Item","id","isDisabled","isSelected","isSortable","children","navItem","MemoizedSideNavSortableList","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavSortableList.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\nimport { memo, useCallback, useMemo } from \"react\";\n\nimport type { SideNavItem } from \"./types.js\";\n\nimport { BaseItem, SortableList } from \"./SortableList/SortableList.js\";\n\nexport type SideNavSortableListProps = {\n  /**\n   * The depth level for nested items\n   */\n  depth?: number;\n  /**\n   * The nav items to render as sortable list\n   */\n  items: SideNavItem[];\n  /**\n   * Callback when items are reordered\n   */\n  onChange: (\n    parentId: string,\n    activeId: UniqueIdentifier,\n    activeIndex: number,\n    overIndex: number,\n  ) => void;\n  /**\n   * The parent ID for the sortable list\n   */\n  parentId: string;\n  /**\n   * Function to process nav items into sortable items\n   */\n  processSideNavItems: (\n    items: SideNavItem[],\n    depth?: number,\n  ) => (SideNavItem & { sortableItem: BaseItem })[];\n};\n\nconst SideNavSortableList = ({\n  items,\n  onChange,\n  parentId,\n  processSideNavItems,\n  depth = 1,\n}: SideNavSortableListProps) => {\n  const processedItems = useMemo(\n    () => processSideNavItems(items, depth),\n    [processSideNavItems, items, depth],\n  );\n\n  const sortableItems = useMemo(\n    () => processedItems.map((item) => item.sortableItem),\n    [processedItems],\n  );\n\n  const renderItem = useCallback(\n    (sortableItem: BaseItem) => (\n      <SortableList.Item\n        id={sortableItem.id}\n        isDisabled={sortableItem.isDisabled}\n        isSelected={sortableItem.isSelected}\n        isSortable={sortableItem.isSortable}\n      >\n        {sortableItem.navItem}\n      </SortableList.Item>\n    ),\n    [],\n  );\n\n  return (\n    <SortableList\n      items={sortableItems}\n      onChange={onChange}\n      parentId={parentId}\n      renderItem={renderItem}\n    />\n  );\n};\n\nconst MemoizedSideNavSortableList = memo(SideNavSortableList);\nMemoizedSideNavSortableList.displayName = \"SideNavSortableList\";\n\nexport { MemoizedSideNavSortableList as SideNavSortableList };\n"],"mappings":";;;;;;AAaA,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,aAAA,GAAAD,OAAA;AAAwE,IAAAE,WAAA,GAAAF,OAAA;AAjBxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAwCA,MAAMG,mBAAmB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,mBAAmB;EACnBC,KAAK,GAAG;AACgB,CAAC,KAAK;EAC9B,MAAMC,cAAc,GAAG,IAAAC,cAAO,EAC5B,MAAMH,mBAAmB,CAACH,KAAK,EAAEI,KAAK,CAAC,EACvC,CAACD,mBAAmB,EAAEH,KAAK,EAAEI,KAAK,CACpC,CAAC;EAED,MAAMG,aAAa,GAAG,IAAAD,cAAO,EAC3B,MAAMD,cAAc,CAACG,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,YAAY,CAAC,EACrD,CAACL,cAAc,CACjB,CAAC;EAED,MAAMM,UAAU,GAAG,IAAAC,kBAAW,EAC3BF,YAAsB,IACrB,IAAAZ,WAAA,CAAAe,GAAA,EAAChB,aAAA,CAAAiB,YAAY,CAACC,IAAI;IAChBC,EAAE,EAAEN,YAAY,CAACM,EAAG;IACpBC,UAAU,EAAEP,YAAY,CAACO,UAAW;IACpCC,UAAU,EAAER,YAAY,CAACQ,UAAW;IACpCC,UAAU,EAAET,YAAY,CAACS,UAAW;IAAAC,QAAA,EAEnCV,YAAY,CAACW;EAAO,CACJ,CACpB,EACD,EACF,CAAC;EAED,OACE,IAAAvB,WAAA,CAAAe,GAAA,EAAChB,aAAA,CAAAiB,YAAY;IACXd,KAAK,EAAEO,aAAc;IACrBN,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBS,UAAU,EAAEA;EAAW,CACxB,CAAC;AAEN,CAAC;AAED,MAAMW,2BAA2B,GAAAC,OAAA,CAAAxB,mBAAA,GAAG,IAAAyB,WAAI,EAACzB,mBAAmB,CAAC;AAC7DuB,2BAA2B,CAACG,WAAW,GAAG,qBAAqB","ignoreList":[]}