@okta/odyssey-react-mui 1.45.0 → 1.47.0

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

@@ -9,7 +9,7 @@ var _sortable = require("@dnd-kit/sortable");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
 var _reactErrorBoundary = require("react-error-boundary");
-var _reactI18next = require("react-i18next");
+var _i18n = require("../../i18n.generated/i18n.cjs");
 var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
 var _OdysseyThemeProvider = require("../../OdysseyThemeProvider.cjs");
 var _Typography = require("../../Typography.cjs");
@@ -22,8 +22,8 @@ var _SideNavFooterContent = require("./SideNavFooterContent.cjs");
 var _SideNavHeader = require("./SideNavHeader.cjs");
 var _SideNavItemContent = require("./SideNavItemContent.cjs");
 var _SideNavItemContentContext = require("./SideNavItemContentContext.cjs");
+var _SideNavSortableList = require("./SideNavSortableList.cjs");
 var _SideNavToggleButton = require("./SideNavToggleButton.cjs");
-var _SortableList = require("./SortableList/SortableList.cjs");
 var _useIsSideNavCollapsedSessionStorage = require("./useIsSideNavCollapsedSessionStorage.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -41,6 +41,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED = exports.SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED = 12;
 const SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED = exports.SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED = 2;
+const flattenNestedItems = items => {
+  return items.flatMap(item => {
+    if (item.nestedNavItems) {
+      return [item, ...flattenNestedItems(item.nestedNavItems)];
+    }
+    return item;
+  });
+};
 const StyledCollapsibleContent = (0, _styled.default)("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
 })(({
@@ -280,6 +288,7 @@ const SideNav = ({
   isLoading,
   isObtrusive,
   logoProps,
+  leavesPaddingStart,
   onCollapse,
   onExpand,
   onSort,
@@ -300,7 +309,7 @@ const SideNav = ({
   const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
   const {
     t
-  } = (0, _reactI18next.useTranslation)();
+  } = (0, _i18n.useTranslation)();
   const scrollableContentRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
   const intersectionObserverRef = (0, _react.useRef)(null);
@@ -376,7 +385,7 @@ const SideNav = ({
   }, [sideNavItemsList]);
   const scrollIntoViewRef = (0, _react.useRef)(null);
   const firstSideNavItemIdWithIsSelected = (0, _react.useMemo)(() => {
-    const flattenedItems = sideNavItemsList.flatMap(sideNavItem => sideNavItem.nestedNavItems ? [sideNavItem, ...sideNavItem.nestedNavItems] : sideNavItem);
+    const flattenedItems = flattenNestedItems(sideNavItemsList);
     const firstItemWithIsSelected = flattenedItems.find(sideNavItem => sideNavItem.isSelected);
     return firstItemWithIsSelected?.id;
   }, [sideNavItemsList]);
@@ -386,29 +395,23 @@ const SideNav = ({
     }
   }, [firstSideNavItemIdWithIsSelected]);
   const getRefIfThisIsFirstNodeWithIsSelected = (0, _react.useCallback)(itemId => itemId === firstSideNavItemIdWithIsSelected ? scrollIntoViewRef : undefined, [firstSideNavItemIdWithIsSelected]);
-  const sideNavItemContentProviderValue = (0, _react.useMemo)(() => ({
-    isCompact,
-    depth: 1
-  }), [isCompact]);
   const setSelectedItem = (0, _react.useCallback)(selectedItemId => {
-    const updatedSideNavItems = sideNavItemsList.map(item => {
-      if (item.id === selectedItemId) {
-        item.isSelected = true;
-      } else if (item.isSelected) {
-        delete item.isSelected;
-      }
-      return item.nestedNavItems ? {
-        ...item,
-        nestedNavItems: item.nestedNavItems.map(childItem => {
-          if (childItem.id === selectedItemId) {
-            childItem.isSelected = true;
-          } else if (childItem.isSelected) {
-            delete childItem.isSelected;
-          }
-          return childItem;
-        })
-      } : item;
-    });
+    const updateNestedSelection = items => {
+      return items.map(item => {
+        if (item.nestedNavItems) {
+          return {
+            ...item,
+            isSelected: item.id === selectedItemId,
+            nestedNavItems: updateNestedSelection(item.nestedNavItems)
+          };
+        }
+        return {
+          ...item,
+          isSelected: item.id === selectedItemId
+        };
+      });
+    };
+    const updatedSideNavItems = updateNestedSelection(sideNavItemsList);
     updateSideNavItemsList(updatedSideNavItems);
     if (isCollapsed || isObtrusive) {
       if (isCollapsible) {
@@ -418,30 +421,117 @@ const SideNav = ({
       }
     }
   }, [isCollapsed, isCollapsible, isObtrusive, onCollapse, sideNavItemsList, uiShellContext]);
-  const processedSideNavItems = (0, _react.useMemo)(() => {
-    return sideNavItemsList?.map(item => ({
-      ...item,
-      childNavItems: item.nestedNavItems?.map(childProps => ({
-        id: childProps.id,
-        isSelected: childProps.isSelected,
-        isDisabled: childProps.isDisabled,
-        isSortable: childProps.isSortable,
-        navItem: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
-          value: {
-            ...sideNavItemContentProviderValue,
-            depth: 2,
-            isSortable: item.isSortable
-          },
+  const createAccordionContextValue = (0, _react.useCallback)(depth => ({
+    depth
+  }), []);
+  const createLeafItemContextValue = (0, _react.useCallback)((depth, isSortable) => ({
+    isCompact,
+    depth,
+    isSortable,
+    absolutePaddingStart: leavesPaddingStart
+  }), [isCompact, leavesPaddingStart]);
+  const renderSideNavItem = (item, depth = 1) => {
+    const {
+      href,
+      id,
+      isDefaultExpanded,
+      isDisabled,
+      isExpanded,
+      isSectionHeader,
+      label,
+      startIcon,
+      nestedNavItems,
+      isSortable,
+      translate
+    } = item;
+    if (isSectionHeader) {
+      return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+        fallback: blankElement,
+        children: (0, _jsxRuntime.jsx)(StyledSectionHeaderContainer, {
+          contrastFontColor: uiShellContext?.sideNavContrastColors?.fontColor,
+          id: id,
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: (0, _jsxRuntime.jsx)(_Typography.Overline, {
+            component: "h3",
+            children: label
+          })
+        })
+      }, id);
+    } else if (nestedNavItems && nestedNavItems.length > 0) {
+      const nestedChildren = (0, _jsxRuntime.jsx)(StyledSideNavListContainer, {
+        role: "presentation",
+        children: isSortable ? (0, _jsxRuntime.jsx)(_SideNavSortableList.SideNavSortableList, {
+          depth: depth + 1,
+          items: nestedNavItems,
+          onChange: setSortedItems,
+          parentId: item.id,
+          processSideNavItems: processSideNavItems
+        }) : processSideNavItems(nestedNavItems, depth + 1).map(item => item.sortableItem.navItem)
+      });
+      return href ? (0, _jsxRuntime.jsxs)(_reactErrorBoundary.ErrorBoundary, {
+        fallback: blankElement,
+        children: [(0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
+          ...item,
+          href: href,
+          onItemSelected: setSelectedItem,
+          scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
+          startIcon: item.startIcon
+        }), (0, _jsxRuntime.jsx)(_SideNavItemContent.StyledSideNavListItem, {
+          "aria-disabled": isDisabled,
+          disabled: isDisabled,
+          id: `${id}-items`,
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: nestedChildren
+        })]
+      }, id) : (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+        fallback: blankElement,
+        children: (0, _jsxRuntime.jsx)(_SideNavItemContent.StyledSideNavListItem, {
+          "aria-disabled": isDisabled,
+          disabled: isDisabled,
+          id: id,
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
+            value: createAccordionContextValue(depth),
+            children: (0, _jsxRuntime.jsx)(_NavAccordion.NavAccordion, {
+              isCompact: isCompact,
+              isDefaultExpanded: isDefaultExpanded,
+              isDisabled: isDisabled,
+              isExpanded: isExpanded,
+              label: label,
+              startIcon: startIcon,
+              children: nestedChildren
+            })
+          }, id)
+        })
+      }, id);
+    } else {
+      return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+        fallback: blankElement,
+        children: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
+          value: createLeafItemContextValue(depth, isSortable),
           children: (0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
-            ...childProps,
+            ...item,
             onItemSelected: setSelectedItem,
-            scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id),
-            translate: childProps.translate
+            scrollRef: getRefIfThisIsFirstNodeWithIsSelected(id),
+            startIcon: startIcon,
+            translate: translate
           })
-        }, childProps.id)
-      }))
+        }, id)
+      }, id);
+    }
+  };
+  const processSideNavItems = (items, depth = 1) => {
+    return items?.map(item => ({
+      ...item,
+      sortableItem: {
+        id: item.id,
+        isSelected: item.isSelected,
+        isDisabled: item.isDisabled,
+        isSortable: item.isSortable,
+        navItem: renderSideNavItem(item, depth)
+      }
     }));
-  }, [getRefIfThisIsFirstNodeWithIsSelected, setSelectedItem, sideNavItemContentProviderValue, sideNavItemsList]);
+  };
   const sideNavExpandClickHandler = (0, _react.useCallback)(() => {
     setIsSideNavCollapsed(isSideNavCollapsed => {
       if (isSideNavCollapsed) {
@@ -527,96 +617,7 @@ const SideNav = ({
             children: [(0, _jsxRuntime.jsx)(StyledSideNavListContainer, {
               ref: scrollableContentRef,
               role: "none",
-              children: isLoading ? Array(6).fill(null).map((_, index) => (0, _jsxRuntime.jsx)(LoadingItem, {}, index)) : processedSideNavItems?.map(item => {
-                const {
-                  childNavItems,
-                  href,
-                  id,
-                  isDefaultExpanded,
-                  isDisabled,
-                  isExpanded,
-                  isSectionHeader,
-                  isSortable,
-                  label,
-                  startIcon
-                } = item;
-                if (isSectionHeader) {
-                  return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-                    fallback: blankElement,
-                    children: (0, _jsxRuntime.jsx)(StyledSectionHeaderContainer, {
-                      contrastFontColor: uiShellContext?.sideNavContrastColors?.fontColor,
-                      id: id,
-                      odysseyDesignTokens: odysseyDesignTokens,
-                      children: (0, _jsxRuntime.jsx)(_Typography.Overline, {
-                        component: "h3",
-                        children: label
-                      })
-                    })
-                  }, id);
-                } else if (childNavItems) {
-                  const nestedChildren = (0, _jsxRuntime.jsx)(StyledSideNavListContainer, {
-                    role: "presentation",
-                    children: isSortable ? (0, _jsxRuntime.jsx)(_SortableList.SortableList, {
-                      items: childNavItems,
-                      onChange: setSortedItems,
-                      parentId: item.id,
-                      renderItem: sortableItem => (0, _jsxRuntime.jsx)(_SortableList.SortableList.Item, {
-                        id: sortableItem.id,
-                        isDisabled: sortableItem.isDisabled,
-                        isSelected: sortableItem.isSelected,
-                        isSortable: sortableItem.isSortable,
-                        children: sortableItem.navItem
-                      })
-                    }) : childNavItems.map(item => item.navItem)
-                  });
-                  return href ? (0, _jsxRuntime.jsxs)(_reactErrorBoundary.ErrorBoundary, {
-                    fallback: blankElement,
-                    children: [(0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
-                      ...item,
-                      href: href,
-                      onItemSelected: setSelectedItem,
-                      scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
-                      startIcon: item.startIcon
-                    }), (0, _jsxRuntime.jsx)(_SideNavItemContent.StyledSideNavListItem, {
-                      "aria-disabled": isDisabled,
-                      disabled: isDisabled,
-                      id: `${id}-items`,
-                      odysseyDesignTokens: odysseyDesignTokens,
-                      children: nestedChildren
-                    })]
-                  }, id) : (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-                    fallback: blankElement,
-                    children: (0, _jsxRuntime.jsx)(_SideNavItemContent.StyledSideNavListItem, {
-                      "aria-disabled": isDisabled,
-                      disabled: isDisabled,
-                      id: id,
-                      odysseyDesignTokens: odysseyDesignTokens,
-                      children: (0, _jsxRuntime.jsx)(_NavAccordion.NavAccordion, {
-                        isCompact: isCompact,
-                        isDefaultExpanded: isDefaultExpanded,
-                        isDisabled: isDisabled,
-                        isExpanded: isExpanded,
-                        label: label,
-                        startIcon: startIcon,
-                        children: nestedChildren
-                      })
-                    })
-                  }, id);
-                } else {
-                  return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-                    fallback: blankElement,
-                    children: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
-                      value: sideNavItemContentProviderValue,
-                      children: (0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
-                        ...item,
-                        onItemSelected: setSelectedItem,
-                        scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
-                        startIcon: item.startIcon
-                      })
-                    })
-                  }, item.id);
-                }
-              })
+              children: isLoading ? Array(6).fill(null).map((_, index) => (0, _jsxRuntime.jsx)(LoadingItem, {}, index)) : processSideNavItems(sideNavItemsList).map(item => item.sortableItem.navItem)
             }), !isLoading && footerItems && !hasCustomFooter && (0, _jsxRuntime.jsx)(StyledSideNavFooter, {
               odysseyDesignTokens: odysseyDesignTokens,
               sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,