quarkly · Maks1mS · Apr 6, 2022
diff --git a/preview/docs/Breadcrumbs.md b/preview/docs/Breadcrumbs.md
@@ -10,25 +10,24 @@ Breadcrumb navigation provides a list of links to all previous (parent) pages th
 
 **Attention!**
 
--   `Home • index` is the root page by default.
 -   This component should be on a nested page.
 -   Navigation will only work on the published site.
 
 ## 🧩 Components and Props
 
 ### In the interface
 
-| Prop name | Default | Example |
-| :-------- | :-----: | :-----: |
-| Root page |   `-`   | `index` |
-| Separator |   `/`   |   `-`   |
+| Prop name | Default |  Example   |
+| :-------- | :-----: | :--------: |
+| Root page |   `-`   | `/foo/bar` |
+| Separator |   `/`   |    `-`     |
 
 ### In the code (for developers)
 
-| Prop name | Name in the code |   Type   | Default | Example |
-| :-------- | :--------------: | :------: | :-----: | :-----: |
-| Root page |     `rootId`     | `string` |   `-`   | `index` |
-| Separator |   `separator`    | `string` |   `/`   |   `-`   |
+| Prop name | Name in the code |   Type   | Default |  Example   |
+| :-------- | :--------------: | :------: | :-----: | :--------: |
+| Root page |    `rootPath`    | `string` |   `-`   | `/foo/bar` |
+| Separator |   `separator`    | `string` |   `/`   |    `-`     |
 
 ## 🗄 GitHub
 

diff --git a/preview/docs/Menu.md b/preview/docs/Menu.md
@@ -10,19 +10,19 @@ Add the component to the page and change the value of the `Maximum nesting` prop
 
 ### In the interface
 
-| Prop name                |  Default  |     Example      |
-| :----------------------- | :-------: | :--------------: |
-| Maximum nesting          |    `1`    |       `5`        |
-| Root page                |  `root`   | `Your page name` |
-| Mark parent active items | `Checked` |   `Unchecked`    |
+| Prop name                |  Default   |   Example   |
+| :----------------------- | :--------: | :---------: |
+| Maximum nesting          |    `1`     |     `5`     |
+| Root page                | `rootPath` |   `/foo`    |
+| Mark parent active items | `Checked`  | `Unchecked` |
 
 ### In the code (for developers)
 
-| Prop name                |   Name in the code   |   Type    | Default |     Example      |
-| :----------------------- | :------------------: | :-------: | :-----: | :--------------: |
-| Maximum nesting          |       `depth`        | `string`  |   `1`   |       `5`        |
-| Root page                |       `rootId`       | `string`  | `root`  | `Your page name` |
-| Mark parent active items | `exact-active-match` | `boolean` | `true`  |     `false`      |
+| Prop name                |   Name in the code   |   Type    | Default | Example |
+| :----------------------- | :------------------: | :-------: | :-----: | :-----: |
+| Maximum nesting          |       `depth`        | `string`  |   `1`   |   `5`   |
+| Root page                |      `rootPath`      | `string`  | `root`  | `/foo`  |
+| Mark parent active items | `exact-active-match` | `boolean` | `true`  | `false` |
 
 ## 🗄 GitHub
 

diff --git a/preview/docs/MenuWithGroups.md b/preview/docs/MenuWithGroups.md
@@ -17,15 +17,15 @@ The `Root page ID` prop allows you to specify the page for which the menu will b
 | Prop name                   |               Default                |       Example       |
 | :-------------------------- | :----------------------------------: | :-----------------: |
 | Maximum nesting             |                 `10`                 |         `5`         |
-| Root page                   |                 `-`                  |       `index`       |
+| Root page                   |                 `-`                  |       `/foo`        |
 | Groups condition by default | `Expand before the active menu item` | `Expand all groups` |
 
 ### In the code (for developers)
 
 | Prop name                   | Name in the code |   Type   |    Default     |   Example   |
 | :-------------------------- | :--------------: | :------: | :------------: | :---------: |
 | Maximum nesting             |     `depth`      | `string` |      `10`      |     `5`     |
-| Root page                   |      `root`      | `string` |      `-`       |   `index`   |
+| Root page                   |      `root`      | `string` |      `-`       |   `/foo`    |
 | Groups condition by default |    `tabState`    |  `enum`  | `expandActive` | `expandAll` |
 
 #### The 'Groups condition by default' property values

diff --git a/preview/docs/ru/Breadcrumbs.md b/preview/docs/ru/Breadcrumbs.md
@@ -11,25 +11,24 @@
 
 **Внимание**:
 
--   `Home • index` является корневой страницей по умолчанию.
 -   Этот компонент должен быть на вложенной странице.
 -   Переход по ссылкам будет работать только на опубикованном сайте.
 
 ## 🧩 Компоненты и свойства
 
 ### В интерфейсе
 
-| Названия свойств  | По умолчанию | Пример  |
-| :---------------- | :----------: | :-----: |
-| Корневая страница |     `-`      | `index` |
-| Разделитель       |     `/`      |   `-`   |
+| Названия свойств  | По умолчанию |   Пример   |
+| :---------------- | :----------: | :--------: |
+| Корневая страница |     `-`      | `/foo/bar` |
+| Разделитель       |     `/`      |    `-`     |
 
 ### В коде (для разработчиков)
 
-| Названия свойств  | Название в коде |   Тип    | По умолчанию | Пример  |
-| :---------------- | :-------------: | :------: | :----------: | :-----: |
-| Корневая страница |    `rootId`     | `string` |     `-`      | `index` |
-| Разделитель       |   `separator`   | `string` |     `/`      |   `-`   |
+| Названия свойств  | Название в коде |   Тип    | По умолчанию |   Пример   |
+| :---------------- | :-------------: | :------: | :----------: | :--------: |
+| Корневая страница |   `rootPath`    | `string` |     `-`      | `/foo/bar` |
+| Разделитель       |   `separator`   | `string` |     `/`      |    `-`     |
 
 ## 🗄 GitHub
 

diff --git a/preview/docs/ru/Menu.md b/preview/docs/ru/Menu.md
@@ -10,19 +10,19 @@
 
 ### В интерфейсе
 
-| Названия свойств                      | По умолчанию |          Пример           |
-| :------------------------------------ | :----------: | :-----------------------: |
-| Максимальная вложенность              |     `1`      |            `5`            |
-| Корневая страница                     |    `root`    | `Название вашей страницы` |
-| Выделять родительские активные пункты |  `Отмечен`   |       `Не отмечен`        |
+| Названия свойств                      | По умолчанию |    Пример    |
+| :------------------------------------ | :----------: | :----------: |
+| Максимальная вложенность              |     `1`      |     `5`      |
+| Корневая страница                     |     `-`      |    `/foo`    |
+| Выделять родительские активные пункты |  `Отмечен`   | `Не отмечен` |
 
 ### В коде (для разработчиков)
 
-| Названия свойств                      |   Название в коде    |    Тип    | По умолчанию |          Пример           |
-| :------------------------------------ | :------------------: | :-------: | :----------: | :-----------------------: |
-| Максимальная вложенность              |       `depth`        | `string`  |     `1`      |            `5`            |
-| Корневая страница                     |       `rootId`       | `string`  |    `root`    | `Название вашей страницы` |
-| Выделять родительские активные пункты | `exact-active-match` | `boolean` |    `true`    |          `false`          |
+| Названия свойств                      |   Название в коде    |    Тип    | По умолчанию | Пример  |
+| :------------------------------------ | :------------------: | :-------: | :----------: | :-----: |
+| Максимальная вложенность              |       `depth`        | `string`  |     `1`      |   `5`   |
+| Корневая страница                     |      `rootPath`      | `string`  |     `-`      | `/foo`  |
+| Выделять родительские активные пункты | `exact-active-match` | `boolean` |    `true`    | `false` |
 
 ## 🗄 GitHub
 

diff --git a/preview/docs/ru/MenuWithGroups.md b/preview/docs/ru/MenuWithGroups.md
@@ -19,15 +19,15 @@ ID текущей страницы можно скопировать из адр
 | Названия свойств             |           По умолчанию            |        Пример         |
 | :--------------------------- | :-------------------------------: | :-------------------: |
 | Максимальная вложенность     |               `10`                |          `5`          |
-| Корневая страница            |                `-`                |        `index`        |
+| Корневая страница            |                `-`                |        `/foo`         |
 | Состояние групп по умолчанию | `Раскрыть перед активным пунктом` | `Раскрыть все группы` |
 
 ### В коде (для разработчиков)
 
 | Названия свойств             | Название в коде |   Тип    |  По умолчанию  |   Пример    |
 | :--------------------------- | :-------------: | :------: | :------------: | :---------: |
 | Максимальная вложенность     |     `depth`     | `string` |      `10`      |     `5`     |
-| Корневая страница            |     `root`      | `string` |      `-`       |   `index`   |
+| Корневая страница            |   `rootPath`    | `string` |      `-`       |   `/foo`    |
 | Состояние групп по умолчанию |   `tabState`    |  `enum`  | `expandActive` | `expandAll` |
 
 #### Значения свойства 'Состояние групп по умолчанию'

diff --git a/src/Breadcrumbs/Breadcrumbs.js b/src/Breadcrumbs/Breadcrumbs.js
@@ -6,17 +6,17 @@ import { getItems } from './utils';
 
 const isBrowser = typeof window !== 'undefined';
 
-const Breadcrumbs = ({ separator, rootId, ...props }) => {
+const Breadcrumbs = ({ separator, rootPath, ...props }) => {
     const { override, rest } = useOverrides(props, overrides);
 
     const items = useMemo(
         () =>
             getItems({
-                rootId,
+                rootPath,
                 separator,
                 override,
             }),
-        [rootId, separator, override]
+        [rootPath, separator, override]
     );
 
     return (

diff --git a/src/Breadcrumbs/props/propsDefault.js b/src/Breadcrumbs/props/propsDefault.js
@@ -1,4 +1,3 @@
 export default {
-    rootId: 'root',
     separator: '/',
 };
diff --git a/src/Breadcrumbs/props/propsInfo.js b/src/Breadcrumbs/props/propsInfo.js
@@ -1,5 +1,5 @@
 export default {
-    rootId: {
+    rootPath: {
         title: {
             en: 'Root page',
             ru: 'Корневая страница',

diff --git a/src/Breadcrumbs/utils/getItems.js b/src/Breadcrumbs/utils/getItems.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { Link, Text } from '@quarkly/widgets';
 import getLinks from './getLinks';
 
-const getItems = ({ rootId, separator, override }) => {
-    const { links, url } = getLinks({ rootId });
+const getItems = ({ rootPath, separator, override }) => {
+    const { links, url } = getLinks(rootPath);
 
     return links.map((link, i) => {
         if (i !== links.length - 1) {

diff --git a/src/Breadcrumbs/utils/getLinks.js b/src/Breadcrumbs/utils/getLinks.js
@@ -1,8 +1,8 @@
-import { getAPI } from '../../utils';
+import { getAPI, getPagesIdsByPath } from '../../utils';
 
 const isBrowser = typeof window !== 'undefined';
 
-const getLinks = ({ rootId }) => {
+const getLinks = (path) => {
     const { pages, mode } = getAPI();
 
     if (!isBrowser || !pages)
@@ -11,7 +11,12 @@ const getLinks = ({ rootId }) => {
             url: [],
         };
 
-    const rootPage = pages[rootId];
+    const ids = getPagesIdsByPath(path);
+    const lastId = ids.pop();
+
+    if (!lastId) return { links: [], url: [] };
+
+    const rootPage = pages[lastId];
 
     const names = Object.values(pages).reduce(
         (prev, curr) => ({

diff --git a/src/Menu.js b/src/Menu.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import atomize from '@quarkly/atomize';
 import { useRouteMatch } from 'react-router-dom';
 import { useMatch } from '@reach/router';
 import { Link } from '@quarkly/widgets';
 import { useOverrides } from '@quarkly/components';
+import { getPagesIdsByPath, getAPI } from './utils';
 
 const overrides = {
     item: {
@@ -41,15 +42,6 @@ const overrides = {
 
 const Ul = atomize.ul();
 const Li = atomize.li();
-const getAPI = () => {
-    if (typeof window !== 'undefined') {
-        return window.QAPI || {};
-    }
-    if (typeof global !== 'undefined') {
-        return global.QAPI || {};
-    }
-    return {};
-};
 
 const Item = ({
     id,
@@ -128,27 +120,15 @@ const Wrapper = ({
     );
 };
 
-const getParent = (pages, pageId) => {
-    if (!pageId || !pages[pageId]) return null;
-
-    return Object.values(pages).find(({ children = [] }) => {
-        return children && Array.isArray(children) && children.includes(pageId);
-    });
-};
-
-const Menu = ({ rootId, depth, 'exact-active-match': exact, ...props }) => {
+const Menu = ({ rootPath, depth, 'exact-active-match': exact, ...props }) => {
     const { override, rest } = useOverrides(props, overrides, defaultProps);
     const pages = getAPI().pages || {};
-    let path = [];
 
-    if (rootId !== 'root') {
-        let parent = pages[rootId];
+    const [rootId, path] = useMemo(() => {
+        const p = rootPath ? getPagesIdsByPath(rootPath) : [];
 
-        while (parent && parent.id !== 'root') {
-            path = [parent.pageUrl, ...path];
-            parent = getParent(pages, parent?.id);
-        }
-    }
+        return [p[p.length - 1] ?? 'root', p.map((id) => pages[id]?.pageUrl)];
+    }, [rootPath, pages]);
 
     return (
         <Wrapper
@@ -177,7 +157,7 @@ const propInfo = {
         category: 'Main',
         weight: 1,
     },
-    rootId: {
+    rootPath: {
         title: {
             en: 'Root page',
             ru: 'Корневая страница',
@@ -199,7 +179,6 @@ const propInfo = {
 
 const defaultProps = {
     depth: 1,
-    rootId: 'root',
     'exact-active-match': true,
 };
 

diff --git a/src/MenuWithGroups.js b/src/MenuWithGroups.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 
 import atomize from '@quarkly/atomize';
 import { useOverrides } from '@quarkly/components';
@@ -7,6 +7,7 @@ import { MdKeyboardArrowDown } from 'react-icons/md';
 
 import { useRouteMatch } from 'react-router-dom';
 import { useMatch } from '@reach/router';
+import { getPagesIdsByPath, getAPI } from './utils';
 
 const overrides = {
     List: {
@@ -60,25 +61,6 @@ const overrides = {
     },
 };
 
-const getAPI = () => {
-    if (typeof window !== 'undefined') {
-        return window.QAPI || {};
-    }
-    if (typeof global !== 'undefined') {
-        return global.QAPI || {};
-    }
-    return {};
-};
-
-const getParent = (pages, pageId) => {
-    if (!pageId || !pages[pageId]) return null;
-
-    return Object.values(pages).find(
-        ({ children = [] }) =>
-            children && Array.isArray(children) && children.includes(pageId)
-    );
-};
-
 const Ul = atomize.ul();
 const Li = atomize.li();
 
@@ -288,20 +270,15 @@ const List = ({
     );
 };
 
-const MenuWithGroups = ({ depth, rootId, expand, tabState, ...props }) => {
+const MenuWithGroups = ({ depth, rootPath, expand, tabState, ...props }) => {
     const { override, rest } = useOverrides(props, overrides, defaultProps);
     const pages = getAPI().pages || {};
 
-    let path = [];
+    const [rootId, path] = useMemo(() => {
+        const p = rootPath ? getPagesIdsByPath(rootPath) : [];
 
-    if (rootId !== 'root') {
-        let parent = pages[rootId];
-
-        while (parent && parent.id !== 'root') {
-            path = [parent.pageUrl, ...path];
-            parent = getParent(pages, parent?.id);
-        }
-    }
+        return [p[p.length - 1] ?? 'root', p.map((id) => pages[id]?.pageUrl)];
+    }, [rootPath, pages]);
 
     return (
         <List
@@ -333,7 +310,7 @@ const propInfo = {
         category: 'Main',
         weight: 1,
     },
-    rootId: {
+    rootPath: {
         title: {
             en: 'Root page',
             ru: 'Корневая страница',
@@ -383,7 +360,6 @@ const propInfo = {
 };
 
 const defaultProps = {
-    rootId: 'root',
     depth: 10,
     tabState: 'expandActive',
 };