@gravity-ui/navigation 6.0.0-beta.1 → 6.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/build/cjs/components/AsideHeader/AsideHeader.css +1 -1
  2. package/build/cjs/components/AsideHeader/AsideHeader.module.scss.js +1 -1
  3. package/build/cjs/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.js +52 -16
  4. package/build/cjs/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.js.map +1 -1
  5. package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.d.ts +20 -0
  6. package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js +56 -0
  7. package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js.map +1 -0
  8. package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesSortable.d.ts +7 -0
  9. package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesSortable.js +26 -0
  10. package/build/cjs/components/AsideHeader/components/AllPagesPanel/allPagesSortable.js.map +1 -0
  11. package/build/cjs/components/AsideHeader/components/AllPagesPanel/constants.d.ts +1 -1
  12. package/build/cjs/components/AsideHeader/components/AllPagesPanel/constants.js +3 -3
  13. package/build/cjs/components/AsideHeader/components/AllPagesPanel/constants.js.map +1 -1
  14. package/build/cjs/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.d.ts +10 -1
  15. package/build/cjs/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.js +28 -6
  16. package/build/cjs/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.js.map +1 -1
  17. package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.css +1 -1
  18. package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.d.ts +4 -0
  19. package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js +89 -30
  20. package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js.map +1 -1
  21. package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss.js +1 -1
  22. package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js +14 -15
  23. package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js.map +1 -1
  24. package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.types.d.ts +8 -0
  25. package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.d.ts +2 -1
  26. package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.js.map +1 -1
  27. package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.d.ts +2 -1
  28. package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js +2 -1
  29. package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js.map +1 -1
  30. package/build/cjs/components/AsideHeader/components/CompositeBar/constants.d.ts +2 -0
  31. package/build/cjs/components/AsideHeader/components/CompositeBar/constants.js +3 -0
  32. package/build/cjs/components/AsideHeader/components/CompositeBar/constants.js.map +1 -1
  33. package/build/cjs/components/AsideHeader/components/CompositeBar/grouping.d.ts +27 -8
  34. package/build/cjs/components/AsideHeader/components/CompositeBar/grouping.js +53 -24
  35. package/build/cjs/components/AsideHeader/components/CompositeBar/grouping.js.map +1 -1
  36. package/build/cjs/components/AsideHeader/components/CompositeBar/utils.d.ts +11 -10
  37. package/build/cjs/components/AsideHeader/components/CompositeBar/utils.js +114 -48
  38. package/build/cjs/components/AsideHeader/components/CompositeBar/utils.js.map +1 -1
  39. package/build/cjs/components/AsideHeader/components/FirstPanel.js +4 -3
  40. package/build/cjs/components/AsideHeader/components/FirstPanel.js.map +1 -1
  41. package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.css +1 -1
  42. package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.css +1 -1
  43. package/build/cjs/components/AsideHeader/components/PageLayout/PageLayoutAside.css +1 -1
  44. package/build/cjs/components/AsideHeader/types.d.ts +26 -0
  45. package/build/cjs/components/AsideHeader/types.js +4 -0
  46. package/build/cjs/components/AsideHeader/types.js.map +1 -1
  47. package/build/esm/components/AsideHeader/AsideHeader.css +1 -1
  48. package/build/esm/components/AsideHeader/AsideHeader.module.scss.js +1 -1
  49. package/build/esm/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.js +50 -14
  50. package/build/esm/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.js.map +1 -1
  51. package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.d.ts +20 -0
  52. package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js +50 -0
  53. package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js.map +1 -0
  54. package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesSortable.d.ts +7 -0
  55. package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesSortable.js +23 -0
  56. package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesSortable.js.map +1 -0
  57. package/build/esm/components/AsideHeader/components/AllPagesPanel/constants.d.ts +1 -1
  58. package/build/esm/components/AsideHeader/components/AllPagesPanel/constants.js +1 -1
  59. package/build/esm/components/AsideHeader/components/AllPagesPanel/constants.js.map +1 -1
  60. package/build/esm/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.d.ts +10 -1
  61. package/build/esm/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.js +28 -6
  62. package/build/esm/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.js.map +1 -1
  63. package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.css +1 -1
  64. package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.d.ts +4 -0
  65. package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.js +92 -33
  66. package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.js.map +1 -1
  67. package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss.js +1 -1
  68. package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.js +15 -16
  69. package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.js.map +1 -1
  70. package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.types.d.ts +8 -0
  71. package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.d.ts +2 -1
  72. package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.js.map +1 -1
  73. package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.d.ts +2 -1
  74. package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js +2 -1
  75. package/build/esm/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js.map +1 -1
  76. package/build/esm/components/AsideHeader/components/CompositeBar/constants.d.ts +2 -0
  77. package/build/esm/components/AsideHeader/components/CompositeBar/constants.js +3 -1
  78. package/build/esm/components/AsideHeader/components/CompositeBar/constants.js.map +1 -1
  79. package/build/esm/components/AsideHeader/components/CompositeBar/grouping.d.ts +27 -8
  80. package/build/esm/components/AsideHeader/components/CompositeBar/grouping.js +52 -23
  81. package/build/esm/components/AsideHeader/components/CompositeBar/grouping.js.map +1 -1
  82. package/build/esm/components/AsideHeader/components/CompositeBar/utils.d.ts +11 -10
  83. package/build/esm/components/AsideHeader/components/CompositeBar/utils.js +105 -41
  84. package/build/esm/components/AsideHeader/components/CompositeBar/utils.js.map +1 -1
  85. package/build/esm/components/AsideHeader/components/FirstPanel.js +4 -3
  86. package/build/esm/components/AsideHeader/components/FirstPanel.js.map +1 -1
  87. package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.css +1 -1
  88. package/build/esm/components/AsideHeader/components/PageLayout/PageLayout.css +1 -1
  89. package/build/esm/components/AsideHeader/components/PageLayout/PageLayoutAside.css +1 -1
  90. package/build/esm/components/AsideHeader/types.d.ts +26 -0
  91. package/build/esm/components/AsideHeader/types.js +3 -1
  92. package/build/esm/components/AsideHeader/types.js.map +1 -1
  93. package/package.json +1 -1
@@ -1,11 +1,33 @@
1
1
  import { useMemo } from 'react';
2
- import { ALL_PAGES_ID } from './constants.js';
2
+ import { ALL_PAGES_ID } from '../../types.js';
3
+ import { getAllPagesEditModeFlatItems } from './allPagesEditDisplay.js';
3
4
  import i18n from './i18n/index.js';
4
5
 
5
- const useGroupedMenuItems = (asideHeaderItems) => {
6
+ /**
7
+ * Group menu items by category for the All pages panel.
8
+ *
9
+ * @param asideHeaderItems — items from context (includes synthetic All pages row).
10
+ * @param editMode — when true, applies edit-mode row selection (headers when `menuGroups` is set).
11
+ * @param menuGroups — when provided with edit mode, inserts one CompositeBar-style header per group.
12
+ * @returns Items grouped by `category` key for rendering sections.
13
+ */
14
+ const useGroupedMenuItems = (asideHeaderItems, editMode, menuGroups, onMenuGroupsChanged) => {
6
15
  const allPagesMenuItems = useMemo(() => {
7
- const filteredItems = asideHeaderItems.filter(({ id, type }) => type !== 'divider' && id !== ALL_PAGES_ID);
8
- filteredItems.sort(({ type: typeA }, { type: typeB }) => {
16
+ const base = asideHeaderItems.filter(({ id, type }) => type !== 'divider' && id !== ALL_PAGES_ID);
17
+ const groupHeaderPins = Boolean(onMenuGroupsChanged);
18
+ let flatForGrouping;
19
+ if (!editMode) {
20
+ flatForGrouping = base;
21
+ }
22
+ else if (menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length) {
23
+ flatForGrouping = getAllPagesEditModeFlatItems(base, menuGroups, {
24
+ enableGroupHeaderPins: groupHeaderPins,
25
+ });
26
+ }
27
+ else {
28
+ flatForGrouping = base.filter((item) => !item.groupId);
29
+ }
30
+ flatForGrouping.sort(({ type: typeA }, { type: typeB }) => {
9
31
  if (typeA === 'action') {
10
32
  return 1;
11
33
  }
@@ -14,7 +36,7 @@ const useGroupedMenuItems = (asideHeaderItems) => {
14
36
  }
15
37
  return 0;
16
38
  });
17
- const groupedItems = filteredItems.reduce((acc, asideHeaderItem) => {
39
+ const groupedItems = flatForGrouping.reduce((acc, asideHeaderItem) => {
18
40
  const category = asideHeaderItem.category || i18n('all-panel.menu.category.allOther');
19
41
  if (!acc[category]) {
20
42
  acc[category] = [];
@@ -23,7 +45,7 @@ const useGroupedMenuItems = (asideHeaderItems) => {
23
45
  return acc;
24
46
  }, {});
25
47
  return groupedItems;
26
- }, [asideHeaderItems]);
48
+ }, [asideHeaderItems, editMode, menuGroups, onMenuGroupsChanged]);
27
49
  return allPagesMenuItems;
28
50
  };
29
51
 
@@ -1 +1 @@
1
- {"version":3,"file":"useGroupedMenuItems.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport {AsideHeaderItem} from '../../types';\n\nimport {ALL_PAGES_ID} from './constants';\nimport i18n from './i18n';\n\nexport const useGroupedMenuItems = (asideHeaderItems: AsideHeaderItem[]) => {\n const allPagesMenuItems = useMemo(() => {\n const filteredItems = asideHeaderItems.filter(\n ({id, type}) => type !== 'divider' && id !== ALL_PAGES_ID,\n );\n filteredItems.sort(({type: typeA}, {type: typeB}) => {\n if (typeA === 'action') {\n return 1;\n }\n if (typeB === 'action') {\n return -1;\n }\n return 0;\n });\n const groupedItems = filteredItems.reduce(\n (acc, asideHeaderItem) => {\n const category =\n asideHeaderItem.category || i18n('all-panel.menu.category.allOther');\n if (!acc[category]) {\n acc[category] = [];\n }\n acc[category].push(asideHeaderItem);\n return acc;\n },\n {} as {[key: string]: AsideHeaderItem[]},\n );\n return groupedItems;\n }, [asideHeaderItems]);\n\n return allPagesMenuItems;\n};\n"],"names":[],"mappings":";;;;AAOa,MAAA,mBAAmB,GAAG,CAAC,gBAAmC,KAAI;AACvE,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CACzC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,KAAK,IAAI,KAAK,SAAS,IAAI,EAAE,KAAK,YAAY,CAC5D;AACD,QAAA,aAAa,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC,KAAI;AAChD,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACpB,gBAAA,OAAO,CAAC;;AAEZ,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;gBACpB,OAAO,EAAE;;AAEb,YAAA,OAAO,CAAC;AACZ,SAAC,CAAC;QACF,MAAM,YAAY,GAAG,aAAa,CAAC,MAAM,CACrC,CAAC,GAAG,EAAE,eAAe,KAAI;YACrB,MAAM,QAAQ,GACV,eAAe,CAAC,QAAQ,IAAI,IAAI,CAAC,kCAAkC,CAAC;AACxE,YAAA,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AAChB,gBAAA,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;YAEtB,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;AACnC,YAAA,OAAO,GAAG;SACb,EACD,EAAwC,CAC3C;AACD,QAAA,OAAO,YAAY;AACvB,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAEtB,IAAA,OAAO,iBAAiB;AAC5B;;;;"}
1
+ {"version":3,"file":"useGroupedMenuItems.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport type {MenuGroup} from '../../../types';\nimport {ALL_PAGES_ID, AsideHeaderItem} from '../../types';\n\nimport {getAllPagesEditModeFlatItems} from './allPagesEditDisplay';\nimport i18n from './i18n';\n\n/**\n * Group menu items by category for the All pages panel.\n *\n * @param asideHeaderItems — items from context (includes synthetic All pages row).\n * @param editMode — when true, applies edit-mode row selection (headers when `menuGroups` is set).\n * @param menuGroups — when provided with edit mode, inserts one CompositeBar-style header per group.\n * @returns Items grouped by `category` key for rendering sections.\n */\nexport const useGroupedMenuItems = (\n asideHeaderItems: AsideHeaderItem[],\n editMode?: boolean,\n menuGroups?: MenuGroup[],\n onMenuGroupsChanged?: (menuGroups: MenuGroup[]) => void,\n) => {\n const allPagesMenuItems = useMemo(() => {\n const base = asideHeaderItems.filter(\n ({id, type}) => type !== 'divider' && id !== ALL_PAGES_ID,\n );\n\n const groupHeaderPins = Boolean(onMenuGroupsChanged);\n\n let flatForGrouping: AsideHeaderItem[];\n\n if (!editMode) {\n flatForGrouping = base;\n } else if (menuGroups?.length) {\n flatForGrouping = getAllPagesEditModeFlatItems(base, menuGroups, {\n enableGroupHeaderPins: groupHeaderPins,\n });\n } else {\n flatForGrouping = base.filter((item) => !item.groupId);\n }\n\n flatForGrouping.sort(({type: typeA}, {type: typeB}) => {\n if (typeA === 'action') {\n return 1;\n }\n if (typeB === 'action') {\n return -1;\n }\n return 0;\n });\n const groupedItems = flatForGrouping.reduce(\n (acc, asideHeaderItem) => {\n const category =\n asideHeaderItem.category || i18n('all-panel.menu.category.allOther');\n if (!acc[category]) {\n acc[category] = [];\n }\n acc[category].push(asideHeaderItem);\n return acc;\n },\n {} as {[key: string]: AsideHeaderItem[]},\n );\n return groupedItems;\n }, [asideHeaderItems, editMode, menuGroups, onMenuGroupsChanged]);\n\n return allPagesMenuItems;\n};\n"],"names":[],"mappings":";;;;;AAQA;;;;;;;AAOG;AACI,MAAM,mBAAmB,GAAG,CAC/B,gBAAmC,EACnC,QAAkB,EAClB,UAAwB,EACxB,mBAAuD,KACvD;AACA,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAChC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,KAAK,IAAI,KAAK,SAAS,IAAI,EAAE,KAAK,YAAY,CAC5D;AAED,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,mBAAmB,CAAC;AAEpD,QAAA,IAAI,eAAkC;QAEtC,IAAI,CAAC,QAAQ,EAAE;YACX,eAAe,GAAG,IAAI;;aACnB,IAAI,UAAU,aAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,MAAM,EAAE;AAC3B,YAAA,eAAe,GAAG,4BAA4B,CAAC,IAAI,EAAE,UAAU,EAAE;AAC7D,gBAAA,qBAAqB,EAAE,eAAe;AACzC,aAAA,CAAC;;aACC;AACH,YAAA,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;;AAG1D,QAAA,eAAe,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC,KAAI;AAClD,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACpB,gBAAA,OAAO,CAAC;;AAEZ,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;gBACpB,OAAO,EAAE;;AAEb,YAAA,OAAO,CAAC;AACZ,SAAC,CAAC;QACF,MAAM,YAAY,GAAG,eAAe,CAAC,MAAM,CACvC,CAAC,GAAG,EAAE,eAAe,KAAI;YACrB,MAAM,QAAQ,GACV,eAAe,CAAC,QAAQ,IAAI,IAAI,CAAC,kCAAkC,CAAC;AACxE,YAAA,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AAChB,gBAAA,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;YAEtB,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;AACnC,YAAA,OAAO,GAAG;SACb,EACD,EAAwC,CAC3C;AACD,QAAA,OAAO,YAAY;KACtB,EAAE,CAAC,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC;AAEjE,IAAA,OAAO,iBAAiB;AAC5B;;;;"}
@@ -1 +1 @@
1
- .CompositeBar-module__gn-composite-bar___WoCDY{flex:1 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}
1
+ .CompositeBar-module__gn-composite-bar___WoCDY{flex:1 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}.CompositeBar-module__gn-composite-bar__menu-group___3hCzS{display:flex;flex-direction:column;width:100%}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21[class]{box-sizing:border-box;flex:0 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-[class]{padding-inline-start:var(--g-spacing-3);position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH[class]{background-color:transparent;overflow:visible;position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb{box-sizing:content-box;display:flex;pointer-events:none;position:relative;width:16px}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb:before{background:var(--gn-aside-header-menu-group-tree-line-color,#c1c3c7);bottom:0;content:"";height:100%;inset-inline-start:calc(50% - .5px);pointer-events:none;position:absolute;top:0;width:1px}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX:before{background:var(--gn-aside-header-menu-group-tree-line-active-color,var(--g-color-base-brand));z-index:1}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH:last-child .CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb:before{display:none}.CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7{fill:none;stroke:var(--gn-aside-header-menu-group-tree-line-color,#c1c3c7);display:block;flex-shrink:0;height:40px;max-width:16px;min-width:16px;position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf{stroke:var(--gn-aside-header-menu-group-tree-line-active-color,var(--g-color-base-brand))}.CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe{height:100%;min-width:0;width:100%}
@@ -4,6 +4,7 @@ import { AsideHeaderItem, AsideHeaderMenuOverflow } from '../../types';
4
4
  type CompositeBarProps = {
5
5
  type: 'menu' | 'subheader';
6
6
  items: AsideHeaderItem[];
7
+ className?: string;
7
8
  menuGroups?: MenuGroup[];
8
9
  onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
9
10
  menuMoreTitle?: string;
@@ -15,6 +16,9 @@ type CompositeBarProps = {
15
16
  * @see AsideHeaderMenuOverflow
16
17
  */
17
18
  menuOverflow?: AsideHeaderMenuOverflow;
19
+ collapsedMenuGroupIds?: Record<string, boolean>;
20
+ defaultCollapsedMenuGroupIds?: Record<string, boolean>;
21
+ onToggleMenuGroupCollapsed?: (groupId: string) => void;
18
22
  };
19
23
  export declare const CompositeBar: FC<CompositeBarProps>;
20
24
  export {};
@@ -1,17 +1,19 @@
1
1
  import './CompositeBar.css';
2
- import React__default, { useMemo, useRef, useCallback } from 'react';
2
+ import React__default, { useMemo, useState, useCallback, useRef } from 'react';
3
3
  import { List } from '@gravity-ui/uikit';
4
4
  import AutoSizer from 'react-virtualized-auto-sizer';
5
5
  import { createBlock } from '../../../utils/cn.js';
6
6
  import { Item } from './Item/Item.js';
7
7
  import { ScrollableWithScrollbar } from './ScrollableWithScrollbar/ScrollableWithScrollbar.js';
8
8
  import { COLLAPSE_ITEM_ID } from './constants.js';
9
- import { getGroupedItems, isGroupHeaderItem } from './grouping.js';
10
- import { getReorderedItems, getItemsMinHeight, getAutosizeListItems, getSelectedItemIndex, getItemHeight, getItemsHeight, getMoreButtonItem } from './utils.js';
9
+ import { buildCompositeBarRows } from './grouping.js';
10
+ import { getReorderedCompositeBarRows, getCompositeBarRowsMinHeight, getAutosizeCompositeBarRows, getItemHeight, makeGroupHeaderAsideItem, getItemsHeight, getSelectedCompositeBarRowIndex, getSelectedItemIndex, getMoreButtonItem } from './utils.js';
11
11
  import styles from './CompositeBar.module.scss.js';
12
12
 
13
13
  const b = createBlock('composite-bar', styles);
14
- const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, compact, compositeId, menuItemClassName, }) => {
14
+ /** Row L-connector: vertical segment + rounded hook. viewBox matches `variables.$item-height`. */
15
+ const MENU_GROUP_NESTED_TREE_CONNECTOR_PATH = 'M8.03125 0V10.07935C8.03125 15.558375 11.5846 20 15.9678 20';
16
+ const CompositeBarView = ({ type, rows, onItemClick, onMoreClick, collapseItems, compact, compositeId, menuItemClassName, inlineGroupChildren, isGroupCollapsed, onToggleGroupCollapsed, }) => {
15
17
  const ref = useRef(null);
16
18
  const onMouseLeave = useCallback(() => {
17
19
  var _a;
@@ -20,61 +22,118 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
20
22
  }
21
23
  }, [compact]);
22
24
  const onItemClickByIndex = useCallback((orginalItemClick) => (item, collapsed, event) => {
23
- // Handle clicks on the "more" button (collapse item)
24
25
  if (item.id === COLLAPSE_ITEM_ID && collapsed) {
25
26
  onMoreClick === null || onMoreClick === undefined ? undefined : onMoreClick();
26
27
  }
27
28
  else {
28
- onItemClick === null || onItemClick === undefined ? undefined : onItemClick(Object.assign(Object.assign({}, item), {
29
- // For collapsed popup items, preserve the item's own onItemClick
30
- // since orginalItemClick belongs to the collapse button, not the item
31
- onItemClick: collapsed ? item.onItemClick : orginalItemClick }), collapsed, event);
29
+ onItemClick === null || onItemClick === undefined ? undefined : onItemClick(Object.assign(Object.assign({}, item), { onItemClick: collapsed ? item.onItemClick : orginalItemClick }), collapsed, event);
32
30
  }
33
31
  }, [onItemClick, onMoreClick]);
34
- return (React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: getItemHeight, itemsHeight: getItemsHeight, itemClassName: b('root-menu-item', menuItemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => {
35
- let menuPopupItems;
36
- let menuPopupTitle;
37
- if (item.id === COLLAPSE_ITEM_ID) {
38
- menuPopupItems = collapseItems;
32
+ const onSyntheticHeaderItemClick = useMemo(() => onItemClickByIndex(undefined), [onItemClickByIndex]);
33
+ const itemHeight = useCallback((row) => {
34
+ if (row.kind === 'item') {
35
+ return getItemHeight(row.item);
36
+ }
37
+ const headerH = getItemHeight(makeGroupHeaderAsideItem(row.group));
38
+ if (!inlineGroupChildren || isGroupCollapsed(row.group.id)) {
39
+ return headerH;
40
+ }
41
+ return headerH + getItemsHeight(row.items);
42
+ }, [inlineGroupChildren, isGroupCollapsed]);
43
+ const itemsHeight = useCallback((listRows) => listRows.reduce((sum, row) => sum + itemHeight(row), 0), [itemHeight]);
44
+ return (React__default.createElement(List, { id: compositeId, ref: ref, items: rows, selectedItemIndex: type === 'menu' ? getSelectedCompositeBarRowIndex(rows) : undefined, itemHeight: itemHeight, itemsHeight: itemsHeight, itemClassName: b('root-menu-item', menuItemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (row) => {
45
+ if (row.kind === 'item') {
46
+ const item = row.item;
47
+ let menuPopupItems;
48
+ let menuPopupTitle;
49
+ if (item.id === COLLAPSE_ITEM_ID) {
50
+ menuPopupItems = collapseItems;
51
+ }
52
+ else {
53
+ menuPopupItems = item.compositeBarMenuPopupItems;
54
+ menuPopupTitle = item.compositeBarMenuPopupTitle;
55
+ }
56
+ return (React__default.createElement(Item, Object.assign({}, item, { compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: menuPopupItems, menuPopupTitle: menuPopupTitle, onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(item.onItemClick) })));
39
57
  }
40
- else if (isGroupHeaderItem(item)) {
41
- menuPopupItems = item.groupChildren;
42
- menuPopupTitle = item.groupPopupTitle;
58
+ const headerItem = makeGroupHeaderAsideItem(row.group);
59
+ const groupIsCollapsed = isGroupCollapsed(row.group.id);
60
+ if (!inlineGroupChildren) {
61
+ return (React__default.createElement(Item, Object.assign({}, headerItem, { compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: row.items, menuPopupTitle: row.group.popupTitle, className: b('menu-group-header'), onMouseLeave: onMouseLeave, onItemClick: onSyntheticHeaderItemClick })));
43
62
  }
44
- return (React__default.createElement(Item, Object.assign({}, item, { compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: menuPopupItems, menuPopupTitle: menuPopupTitle, onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(item.onItemClick) })));
63
+ const selectedItemIndex = getSelectedItemIndex(row.items);
64
+ return (React__default.createElement("div", { className: b('menu-group', {
65
+ expanded: !groupIsCollapsed,
66
+ collapsed: groupIsCollapsed,
67
+ }) },
68
+ React__default.createElement(Item, Object.assign({}, headerItem, { compact: compact, popupItemClassName: menuItemClassName, className: b('menu-group-header'), groupHeaderExpanded: !groupIsCollapsed, onMouseLeave: onMouseLeave, onItemClick: (item, isItemCollapsed, event) => {
69
+ onToggleGroupCollapsed(row.group.id);
70
+ onSyntheticHeaderItemClick(item, isItemCollapsed, event);
71
+ } })),
72
+ !groupIsCollapsed && (React__default.createElement(List, { items: row.items, selectedItemIndex: selectedItemIndex, itemHeight: getItemHeight, itemsHeight: getItemsHeight, itemClassName: b('menu-group-nested-list-item'), virtualized: false, filterable: false, sortable: false, renderItem: (nestedItem, _isActive, groupItemIndex) => {
73
+ const spineActive = selectedItemIndex !== undefined &&
74
+ groupItemIndex < selectedItemIndex;
75
+ return (React__default.createElement("div", { className: b('menu-group-nested-row-inner') },
76
+ React__default.createElement(Item, Object.assign({}, nestedItem, { className: [
77
+ nestedItem.className,
78
+ b('menu-group-nested-item'),
79
+ ]
80
+ .filter(Boolean)
81
+ .join(' '), compact: compact, menuGroupNestedTreeConnector: React__default.createElement("span", { className: b('menu-group-nested-connector', { 'spine-active': spineActive }), "aria-hidden": true },
82
+ React__default.createElement("svg", { className: b('menu-group-nested-tree-svg', {
83
+ active: selectedItemIndex ===
84
+ groupItemIndex,
85
+ }), viewBox: "0 0 16 40", xmlns: "http://www.w3.org/2000/svg" },
86
+ React__default.createElement("path", { d: MENU_GROUP_NESTED_TREE_CONNECTOR_PATH, fill: "none", strokeLinecap: "butt", strokeWidth: "1.3", vectorEffect: "non-scaling-stroke" }))), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(nestedItem.onItemClick) }))));
87
+ } }))));
45
88
  } }));
46
89
  };
47
- const CompositeBar = ({ type, items, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, menuOverflow = 'collapse', }) => {
48
- const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);
49
- // Respect `afterMoreButton` ordering for DOM stability when items are rendered
50
- // inside a scroll container (no collapse button to anchor them against).
51
- const scrollableItems = useMemo(() => getReorderedItems(groupedItems), [groupedItems]);
52
- if (groupedItems.length === 0) {
90
+ const CompositeBar = ({ type, className, items, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, menuOverflow = 'collapse', collapsedMenuGroupIds: collapsedMenuGroupIdsProp, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, }) => {
91
+ const rows = useMemo(() => buildCompositeBarRows(items, menuGroups), [items, menuGroups]);
92
+ const isCollapsedControlled = collapsedMenuGroupIdsProp !== undefined;
93
+ const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(() => defaultCollapsedMenuGroupIds !== null && defaultCollapsedMenuGroupIds !== undefined ? defaultCollapsedMenuGroupIds : {});
94
+ const collapsedMap = isCollapsedControlled ? collapsedMenuGroupIdsProp : uncontrolledCollapsed;
95
+ const onToggleGroupCollapsed = useCallback((groupId) => {
96
+ onToggleMenuGroupCollapsed === null || onToggleMenuGroupCollapsed === undefined ? undefined : onToggleMenuGroupCollapsed(groupId);
97
+ if (!isCollapsedControlled) {
98
+ setUncontrolledCollapsed((prev) => (Object.assign(Object.assign({}, prev), { [groupId]: !prev[groupId] })));
99
+ }
100
+ }, [isCollapsedControlled, onToggleMenuGroupCollapsed]);
101
+ const isGroupCollapsed = useCallback((groupId) => Boolean(collapsedMap[groupId]), [collapsedMap]);
102
+ const inlineGroupChildren = !compact && menuOverflow === 'scroll' && type === 'menu' && Boolean(menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length);
103
+ const scrollableRows = useMemo(() => getReorderedCompositeBarRows(rows), [rows]);
104
+ const scrollRecalcKey = useMemo(() => {
105
+ var _a;
106
+ return `${items.length}:${(_a = menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length) !== null && _a !== undefined ? _a : 0}:${JSON.stringify(Object.keys(collapsedMap)
107
+ .sort()
108
+ .reduce((acc, k) => {
109
+ acc[k] = Boolean(collapsedMap[k]);
110
+ return acc;
111
+ }, {}))}`;
112
+ }, [items.length, menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length, collapsedMap]);
113
+ if (rows.length === 0) {
53
114
  return null;
54
115
  }
55
116
  let node;
56
117
  if (type === 'menu') {
57
- // `scroll` mode is intentionally disabled in `compact` mode — there the
58
- // classic "More" popup gives a better UX for icon-only items.
59
118
  if (menuOverflow === 'scroll' && !compact) {
60
- node = (React__default.createElement(ScrollableWithScrollbar, { recalcDeps: [scrollableItems] },
61
- React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: scrollableItems, onItemClick: onItemClick, menuItemClassName: menuItemClassName })));
119
+ node = (React__default.createElement(ScrollableWithScrollbar, { className: className, recalcDeps: [scrollRecalcKey] },
120
+ React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, rows: scrollableRows, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, inlineGroupChildren: inlineGroupChildren, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed })));
62
121
  }
63
122
  else {
64
- const minHeight = getItemsMinHeight(groupedItems);
123
+ const minHeight = getCompositeBarRowsMinHeight(rows);
65
124
  const collapseItem = getMoreButtonItem(menuMoreTitle);
66
- node = (React__default.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, groupedItems.length !== 0 && (React__default.createElement(AutoSizer, null, (size) => {
125
+ node = (React__default.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, rows.length !== 0 && (React__default.createElement(AutoSizer, null, (size) => {
67
126
  const width = Number.isNaN(size.width) ? 0 : size.width;
68
127
  const height = Number.isNaN(size.height) ? 0 : size.height;
69
- const { listItems, collapseItems } = getAutosizeListItems(groupedItems, height, collapseItem);
128
+ const { listRows, collapseItems } = getAutosizeCompositeBarRows(rows, height, collapseItem);
70
129
  return (React__default.createElement("div", { style: { width, height } },
71
- React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, collapseItems: collapseItems })));
130
+ React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, rows: listRows, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, collapseItems: collapseItems, inlineGroupChildren: false, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed })));
72
131
  }))));
73
132
  }
74
133
  }
75
134
  else {
76
135
  node = (React__default.createElement("div", { className: b({ subheader: true }) },
77
- React__default.createElement(CompositeBarView, { type: "subheader", menuItemClassName: menuItemClassName, compact: compact, items: groupedItems, onItemClick: onItemClick })));
136
+ React__default.createElement(CompositeBarView, { type: "subheader", menuItemClassName: menuItemClassName, compact: compact, rows: rows, onItemClick: onItemClick, inlineGroupChildren: false, isGroupCollapsed: isGroupCollapsed, onToggleGroupCollapsed: onToggleGroupCollapsed })));
78
137
  }
79
138
  return node;
80
139
  };
@@ -1 +1 @@
1
- {"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useCallback, useMemo, useRef} from 'react';\n\nimport {List} from '@gravity-ui/uikit';\nimport AutoSizer, {Size} from 'react-virtualized-auto-sizer';\n\nimport {MenuGroup} from '../../../types';\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem, AsideHeaderMenuOverflow} from '../../types';\n\nimport {Item} from './Item/Item';\nimport {ItemProps} from './Item/Item.types';\nimport {ScrollableWithScrollbar} from './ScrollableWithScrollbar';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {getGroupedItems, isGroupHeaderItem} from './grouping';\nimport {\n getAutosizeListItems,\n getItemHeight,\n getItemsHeight,\n getItemsMinHeight,\n getMoreButtonItem,\n getReorderedItems,\n getSelectedItemIndex,\n} from './utils';\n\nimport styles from './CompositeBar.module.scss';\n\nconst b = createBlock('composite-bar', styles);\n\ntype CompositeBarProps = {\n type: 'menu' | 'subheader';\n items: AsideHeaderItem[];\n menuGroups?: MenuGroup[];\n onItemClick?: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n menuMoreTitle?: string;\n onMoreClick?: () => void;\n compact: boolean;\n compositeId?: string;\n menuItemClassName?: string;\n /**\n * @see AsideHeaderMenuOverflow\n */\n menuOverflow?: AsideHeaderMenuOverflow;\n};\n\ntype CompositeBarViewProps = Omit<CompositeBarProps, 'menuOverflow'> & {\n collapseItems?: AsideHeaderItem[];\n};\n\nconst CompositeBarView: FC<CompositeBarViewProps> = ({\n type,\n items,\n onItemClick,\n onMoreClick,\n collapseItems,\n compact,\n compositeId,\n menuItemClassName,\n}) => {\n const ref = useRef<List<AsideHeaderItem>>(null);\n\n const onMouseLeave = useCallback(() => {\n if (compact && document.hasFocus()) {\n ref.current?.activateItem(undefined as unknown as number);\n }\n }, [compact]);\n\n const onItemClickByIndex = useCallback(\n (orginalItemClick: AsideHeaderItem['onItemClick']): ItemProps['onItemClick'] =>\n (item, collapsed, event) => {\n // Handle clicks on the \"more\" button (collapse item)\n if (item.id === COLLAPSE_ITEM_ID && collapsed) {\n onMoreClick?.();\n } else {\n onItemClick?.(\n {\n ...item,\n // For collapsed popup items, preserve the item's own onItemClick\n // since orginalItemClick belongs to the collapse button, not the item\n onItemClick: collapsed ? item.onItemClick : orginalItemClick,\n },\n collapsed,\n event,\n );\n }\n },\n [onItemClick, onMoreClick],\n );\n\n return (\n <List<AsideHeaderItem>\n id={compositeId}\n ref={ref}\n items={items}\n selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}\n itemHeight={getItemHeight}\n itemsHeight={getItemsHeight}\n itemClassName={b('root-menu-item', menuItemClassName)}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(item) => {\n let menuPopupItems: AsideHeaderItem[] | undefined;\n let menuPopupTitle: string | undefined;\n\n if (item.id === COLLAPSE_ITEM_ID) {\n menuPopupItems = collapseItems;\n } else if (isGroupHeaderItem(item)) {\n menuPopupItems = item.groupChildren;\n menuPopupTitle = item.groupPopupTitle;\n }\n\n return (\n <Item\n {...item}\n compact={compact}\n popupItemClassName={menuItemClassName}\n menuPopupItems={menuPopupItems}\n menuPopupTitle={menuPopupTitle}\n onMouseLeave={onMouseLeave}\n onItemClick={onItemClickByIndex(item.onItemClick)}\n />\n );\n }}\n />\n );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n type,\n items,\n menuGroups,\n menuMoreTitle,\n onItemClick,\n onMoreClick,\n compact,\n compositeId,\n menuItemClassName,\n menuOverflow = 'collapse',\n}) => {\n const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);\n\n // Respect `afterMoreButton` ordering for DOM stability when items are rendered\n // inside a scroll container (no collapse button to anchor them against).\n const scrollableItems = useMemo(() => getReorderedItems(groupedItems), [groupedItems]);\n\n if (groupedItems.length === 0) {\n return null;\n }\n let node: ReactNode;\n\n if (type === 'menu') {\n // `scroll` mode is intentionally disabled in `compact` mode — there the\n // classic \"More\" popup gives a better UX for icon-only items.\n if (menuOverflow === 'scroll' && !compact) {\n node = (\n <ScrollableWithScrollbar recalcDeps={[scrollableItems]}>\n <CompositeBarView\n compositeId={compositeId}\n type=\"menu\"\n compact={compact}\n items={scrollableItems}\n onItemClick={onItemClick}\n menuItemClassName={menuItemClassName}\n />\n </ScrollableWithScrollbar>\n );\n } else {\n const minHeight = getItemsMinHeight(groupedItems);\n const collapseItem = getMoreButtonItem(menuMoreTitle);\n node = (\n <div className={b({autosizer: true})} style={{minHeight}}>\n {groupedItems.length !== 0 && (\n <AutoSizer>\n {(size: Size) => {\n const width = Number.isNaN(size.width) ? 0 : size.width;\n const height = Number.isNaN(size.height) ? 0 : size.height;\n\n const {listItems, collapseItems} = getAutosizeListItems(\n groupedItems,\n height,\n collapseItem,\n );\n return (\n <div style={{width, height}}>\n <CompositeBarView\n compositeId={compositeId}\n type=\"menu\"\n compact={compact}\n items={listItems}\n onItemClick={onItemClick}\n onMoreClick={onMoreClick}\n menuItemClassName={menuItemClassName}\n collapseItems={collapseItems}\n />\n </div>\n );\n }}\n </AutoSizer>\n )}\n </div>\n );\n }\n } else {\n node = (\n <div className={b({subheader: true})}>\n <CompositeBarView\n type=\"subheader\"\n menuItemClassName={menuItemClassName}\n compact={compact}\n items={groupedItems}\n onItemClick={onItemClick}\n />\n </div>\n );\n }\n return node;\n};\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useCallback, useMemo, useRef, useState} from 'react';\n\nimport {List} from '@gravity-ui/uikit';\nimport AutoSizer, {Size} from 'react-virtualized-auto-sizer';\n\nimport {MenuGroup} from '../../../types';\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem, AsideHeaderMenuOverflow} from '../../types';\n\nimport {Item} from './Item/Item';\nimport {ItemProps} from './Item/Item.types';\nimport {ScrollableWithScrollbar} from './ScrollableWithScrollbar';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {buildCompositeBarRows} from './grouping';\nimport type {CompositeBarRow} from './grouping';\nimport {\n getAutosizeCompositeBarRows,\n getCompositeBarRowsMinHeight,\n getItemHeight,\n getItemsHeight,\n getMoreButtonItem,\n getReorderedCompositeBarRows,\n getSelectedCompositeBarRowIndex,\n getSelectedItemIndex,\n makeGroupHeaderAsideItem,\n} from './utils';\n\nimport styles from './CompositeBar.module.scss';\n\nconst b = createBlock('composite-bar', styles);\n\n/** Row L-connector: vertical segment + rounded hook. viewBox matches `variables.$item-height`. */\nconst MENU_GROUP_NESTED_TREE_CONNECTOR_PATH =\n 'M8.03125 0V10.07935C8.03125 15.558375 11.5846 20 15.9678 20';\n\ntype CompositeBarProps = {\n type: 'menu' | 'subheader';\n items: AsideHeaderItem[];\n className?: string;\n menuGroups?: MenuGroup[];\n onItemClick?: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n menuMoreTitle?: string;\n onMoreClick?: () => void;\n compact: boolean;\n compositeId?: string;\n menuItemClassName?: string;\n /**\n * @see AsideHeaderMenuOverflow\n */\n menuOverflow?: AsideHeaderMenuOverflow;\n collapsedMenuGroupIds?: Record<string, boolean>;\n defaultCollapsedMenuGroupIds?: Record<string, boolean>;\n onToggleMenuGroupCollapsed?: (groupId: string) => void;\n};\n\ntype CompositeBarViewProps = {\n type: 'menu' | 'subheader';\n compositeId?: string;\n compact: boolean;\n menuItemClassName?: string;\n rows: CompositeBarRow[];\n onItemClick?: CompositeBarProps['onItemClick'];\n onMoreClick?: () => void;\n collapseItems?: AsideHeaderItem[];\n /** Nested group list + tree connectors (expanded menu + scroll overflow only). */\n inlineGroupChildren: boolean;\n isGroupCollapsed: (groupId: string) => boolean;\n onToggleGroupCollapsed: (groupId: string) => void;\n};\n\nconst CompositeBarView: FC<CompositeBarViewProps> = ({\n type,\n rows,\n onItemClick,\n onMoreClick,\n collapseItems,\n compact,\n compositeId,\n menuItemClassName,\n inlineGroupChildren,\n isGroupCollapsed,\n onToggleGroupCollapsed,\n}) => {\n const ref = useRef<List<CompositeBarRow>>(null);\n\n const onMouseLeave = useCallback(() => {\n if (compact && document.hasFocus()) {\n ref.current?.activateItem(undefined as unknown as number);\n }\n }, [compact]);\n\n const onItemClickByIndex = useCallback(\n (orginalItemClick: AsideHeaderItem['onItemClick']): ItemProps['onItemClick'] =>\n (item, collapsed, event) => {\n if (item.id === COLLAPSE_ITEM_ID && collapsed) {\n onMoreClick?.();\n } else {\n onItemClick?.(\n {\n ...item,\n onItemClick: collapsed ? item.onItemClick : orginalItemClick,\n },\n collapsed,\n event,\n );\n }\n },\n [onItemClick, onMoreClick],\n );\n\n const onSyntheticHeaderItemClick = useMemo(\n () => onItemClickByIndex(undefined) as NonNullable<ItemProps['onItemClick']>,\n [onItemClickByIndex],\n );\n\n const itemHeight = useCallback(\n (row: CompositeBarRow) => {\n if (row.kind === 'item') {\n return getItemHeight(row.item);\n }\n const headerH = getItemHeight(makeGroupHeaderAsideItem(row.group));\n if (!inlineGroupChildren || isGroupCollapsed(row.group.id)) {\n return headerH;\n }\n return headerH + getItemsHeight(row.items);\n },\n [inlineGroupChildren, isGroupCollapsed],\n );\n\n const itemsHeight = useCallback(\n (listRows: CompositeBarRow[]) => listRows.reduce((sum, row) => sum + itemHeight(row), 0),\n [itemHeight],\n );\n\n return (\n <List<CompositeBarRow>\n id={compositeId}\n ref={ref}\n items={rows}\n selectedItemIndex={type === 'menu' ? getSelectedCompositeBarRowIndex(rows) : undefined}\n itemHeight={itemHeight}\n itemsHeight={itemsHeight}\n itemClassName={b('root-menu-item', menuItemClassName)}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(row) => {\n if (row.kind === 'item') {\n const item = row.item;\n let menuPopupItems: AsideHeaderItem[] | undefined;\n let menuPopupTitle: string | undefined;\n\n if (item.id === COLLAPSE_ITEM_ID) {\n menuPopupItems = collapseItems;\n } else {\n menuPopupItems = item.compositeBarMenuPopupItems;\n menuPopupTitle = item.compositeBarMenuPopupTitle;\n }\n\n return (\n <Item\n {...item}\n compact={compact}\n popupItemClassName={menuItemClassName}\n menuPopupItems={menuPopupItems}\n menuPopupTitle={menuPopupTitle}\n onMouseLeave={onMouseLeave}\n onItemClick={onItemClickByIndex(item.onItemClick)}\n />\n );\n }\n\n const headerItem = makeGroupHeaderAsideItem(row.group);\n const groupIsCollapsed = isGroupCollapsed(row.group.id);\n\n if (!inlineGroupChildren) {\n return (\n <Item\n {...headerItem}\n compact={compact}\n popupItemClassName={menuItemClassName}\n menuPopupItems={row.items}\n menuPopupTitle={row.group.popupTitle}\n className={b('menu-group-header')}\n onMouseLeave={onMouseLeave}\n onItemClick={onSyntheticHeaderItemClick}\n />\n );\n }\n\n const selectedItemIndex = getSelectedItemIndex(row.items);\n\n return (\n <div\n className={b('menu-group', {\n expanded: !groupIsCollapsed,\n collapsed: groupIsCollapsed,\n })}\n >\n <Item\n {...headerItem}\n compact={compact}\n popupItemClassName={menuItemClassName}\n className={b('menu-group-header')}\n groupHeaderExpanded={!groupIsCollapsed}\n onMouseLeave={onMouseLeave}\n onItemClick={(item, isItemCollapsed, event) => {\n onToggleGroupCollapsed(row.group.id);\n onSyntheticHeaderItemClick(item, isItemCollapsed, event);\n }}\n />\n {!groupIsCollapsed && (\n <List<AsideHeaderItem>\n items={row.items}\n selectedItemIndex={selectedItemIndex}\n itemHeight={getItemHeight}\n itemsHeight={getItemsHeight}\n itemClassName={b('menu-group-nested-list-item')}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(nestedItem, _isActive, groupItemIndex) => {\n const spineActive =\n selectedItemIndex !== undefined &&\n groupItemIndex < selectedItemIndex;\n\n return (\n <div className={b('menu-group-nested-row-inner')}>\n <Item\n {...nestedItem}\n className={[\n nestedItem.className,\n b('menu-group-nested-item'),\n ]\n .filter(Boolean)\n .join(' ')}\n compact={compact}\n menuGroupNestedTreeConnector={\n <span\n className={b(\n 'menu-group-nested-connector',\n {'spine-active': spineActive},\n )}\n aria-hidden\n >\n <svg\n className={b(\n 'menu-group-nested-tree-svg',\n {\n active:\n selectedItemIndex ===\n groupItemIndex,\n },\n )}\n viewBox=\"0 0 16 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d={\n MENU_GROUP_NESTED_TREE_CONNECTOR_PATH\n }\n fill=\"none\"\n strokeLinecap=\"butt\"\n strokeWidth=\"1.3\"\n vectorEffect=\"non-scaling-stroke\"\n />\n </svg>\n </span>\n }\n onMouseLeave={onMouseLeave}\n onItemClick={onItemClickByIndex(\n nestedItem.onItemClick,\n )}\n />\n </div>\n );\n }}\n />\n )}\n </div>\n );\n }}\n />\n );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n type,\n className,\n items,\n menuGroups,\n menuMoreTitle,\n onItemClick,\n onMoreClick,\n compact,\n compositeId,\n menuItemClassName,\n menuOverflow = 'collapse',\n collapsedMenuGroupIds: collapsedMenuGroupIdsProp,\n defaultCollapsedMenuGroupIds,\n onToggleMenuGroupCollapsed,\n}) => {\n const rows = useMemo(() => buildCompositeBarRows(items, menuGroups), [items, menuGroups]);\n\n const isCollapsedControlled = collapsedMenuGroupIdsProp !== undefined;\n const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState<Record<string, boolean>>(\n () => defaultCollapsedMenuGroupIds ?? {},\n );\n\n const collapsedMap = isCollapsedControlled ? collapsedMenuGroupIdsProp : uncontrolledCollapsed;\n\n const onToggleGroupCollapsed = useCallback(\n (groupId: string) => {\n onToggleMenuGroupCollapsed?.(groupId);\n if (!isCollapsedControlled) {\n setUncontrolledCollapsed((prev) => ({...prev, [groupId]: !prev[groupId]}));\n }\n },\n [isCollapsedControlled, onToggleMenuGroupCollapsed],\n );\n\n const isGroupCollapsed = useCallback(\n (groupId: string) => Boolean(collapsedMap[groupId]),\n [collapsedMap],\n );\n\n const inlineGroupChildren =\n !compact && menuOverflow === 'scroll' && type === 'menu' && Boolean(menuGroups?.length);\n\n const scrollableRows = useMemo(() => getReorderedCompositeBarRows(rows), [rows]);\n\n const scrollRecalcKey = useMemo(\n () =>\n `${items.length}:${menuGroups?.length ?? 0}:${JSON.stringify(\n Object.keys(collapsedMap)\n .sort()\n .reduce<Record<string, boolean>>((acc, k) => {\n acc[k] = Boolean(collapsedMap[k]);\n return acc;\n }, {}),\n )}`,\n [items.length, menuGroups?.length, collapsedMap],\n );\n\n if (rows.length === 0) {\n return null;\n }\n\n let node: ReactNode;\n\n if (type === 'menu') {\n if (menuOverflow === 'scroll' && !compact) {\n node = (\n <ScrollableWithScrollbar className={className} recalcDeps={[scrollRecalcKey]}>\n <CompositeBarView\n compositeId={compositeId}\n type=\"menu\"\n compact={compact}\n rows={scrollableRows}\n onItemClick={onItemClick}\n onMoreClick={onMoreClick}\n menuItemClassName={menuItemClassName}\n inlineGroupChildren={inlineGroupChildren}\n isGroupCollapsed={isGroupCollapsed}\n onToggleGroupCollapsed={onToggleGroupCollapsed}\n />\n </ScrollableWithScrollbar>\n );\n } else {\n const minHeight = getCompositeBarRowsMinHeight(rows);\n const collapseItem = getMoreButtonItem(menuMoreTitle);\n node = (\n <div className={b({autosizer: true})} style={{minHeight}}>\n {rows.length !== 0 && (\n <AutoSizer>\n {(size: Size) => {\n const width = Number.isNaN(size.width) ? 0 : size.width;\n const height = Number.isNaN(size.height) ? 0 : size.height;\n\n const {listRows, collapseItems} = getAutosizeCompositeBarRows(\n rows,\n height,\n collapseItem,\n );\n return (\n <div style={{width, height}}>\n <CompositeBarView\n compositeId={compositeId}\n type=\"menu\"\n compact={compact}\n rows={listRows}\n onItemClick={onItemClick}\n onMoreClick={onMoreClick}\n menuItemClassName={menuItemClassName}\n collapseItems={collapseItems}\n inlineGroupChildren={false}\n isGroupCollapsed={isGroupCollapsed}\n onToggleGroupCollapsed={onToggleGroupCollapsed}\n />\n </div>\n );\n }}\n </AutoSizer>\n )}\n </div>\n );\n }\n } else {\n node = (\n <div className={b({subheader: true})}>\n <CompositeBarView\n type=\"subheader\"\n menuItemClassName={menuItemClassName}\n compact={compact}\n rows={rows}\n onItemClick={onItemClick}\n inlineGroupChildren={false}\n isGroupCollapsed={isGroupCollapsed}\n onToggleGroupCollapsed={onToggleGroupCollapsed}\n />\n </div>\n );\n }\n return node;\n};\n"],"names":["React"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var styles = {"gn-composite-bar":"CompositeBar-module__gn-composite-bar___WoCDY","gnCompositeBar":"CompositeBar-module__gn-composite-bar___WoCDY","gn-composite-bar__root-menu-item":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gnCompositeBarRootMenuItem":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF"};
1
+ var styles = {"gn-composite-bar":"CompositeBar-module__gn-composite-bar___WoCDY","gnCompositeBar":"CompositeBar-module__gn-composite-bar___WoCDY","gn-composite-bar__root-menu-item":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gnCompositeBarRootMenuItem":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gn-composite-bar__menu-group":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gnCompositeBarMenuGroup":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gn-composite-bar__menu-group-header":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gnCompositeBarMenuGroupHeader":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gn-composite-bar__menu-group-nested-item":"CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-","gnCompositeBarMenuGroupNestedItem":"CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-","gn-composite-bar__menu-group-nested-list-item":"CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH","gnCompositeBarMenuGroupNestedListItem":"CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH","gn-composite-bar__menu-group-nested-connector":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb","gnCompositeBarMenuGroupNestedConnector":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb","gn-composite-bar__menu-group-nested-connector_spine-active":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX","gnCompositeBarMenuGroupNestedConnectorSpineActive":"CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX","gn-composite-bar__menu-group-nested-tree-svg":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7","gnCompositeBarMenuGroupNestedTreeSvg":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7","gn-composite-bar__menu-group-nested-tree-svg_active":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf","gnCompositeBarMenuGroupNestedTreeSvgActive":"CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf","gn-composite-bar__menu-group-nested-row-inner":"CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe","gnCompositeBarMenuGroupNestedRowInner":"CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe"};
2
2
 
3
3
  export { styles as default };
4
4
  //# sourceMappingURL=CompositeBar.module.scss.js.map
@@ -1,12 +1,11 @@
1
1
  import './Item.css';
2
2
  import React__default from 'react';
3
- import { ChevronRight } from '@gravity-ui/icons';
3
+ import { ChevronUp, ChevronDown, ChevronRight } from '@gravity-ui/icons';
4
4
  import { Icon, Popup } from '@gravity-ui/uikit';
5
5
  import { ASIDE_HEADER_ICON_SIZE } from '../../../../constants.js';
6
6
  import { createBlock } from '../../../../utils/cn.js';
7
7
  import { HighlightedItem } from '../HighlightedItem/HighlightedItem.js';
8
8
  import { ITEM_TYPE_REGULAR, COLLAPSE_ITEM_ID } from '../constants.js';
9
- import { isGroupHeaderItem } from '../grouping.js';
10
9
  import { ItemPopup } from './ItemPopup.js';
11
10
  import { ItemPopupNestContext } from './ItemPopupNestContext.js';
12
11
  import { renderItemTitle } from './renderItemTitle.js';
@@ -18,7 +17,7 @@ const defaultPopupOffset = { mainAxis: 14 };
18
17
  const CHEVRON_SIZE = 16;
19
18
  const CHEVRON_SIZE_COMPACT = 10;
20
19
  const Item = (props) => {
21
- const { className, popupItemClassName, menuPopupItems, menuPopupTitle, compact, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, hideIcon = false, stopClickPropagation = false, } = props;
20
+ const { className, popupItemClassName, menuPopupItems, menuPopupTitle, groupHeaderExpanded, compact, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, hideIcon = false, stopClickPropagation = false, menuGroupNestedTreeConnector, } = props;
22
21
  const [compactNavPopoverOpen, setCompactNavPopoverOpen] = React__default.useState(false);
23
22
  const ref = React__default.useRef(null);
24
23
  const anchorRef = (anchoreRefProp === null || anchoreRefProp === undefined ? undefined : anchoreRefProp.current) ? anchoreRefProp : ref;
@@ -29,13 +28,9 @@ const Item = (props) => {
29
28
  const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;
30
29
  const iconQa = props.iconQa;
31
30
  const collapsedItem = props.id === COLLAPSE_ITEM_ID;
32
- const isGroupHeader = isGroupHeaderItem(props);
33
- let resolvedMenuPopupItems = menuPopupItems;
34
- let resolvedMenuPopupTitle = menuPopupTitle;
35
- if (isGroupHeader) {
36
- resolvedMenuPopupItems = menuPopupItems !== null && menuPopupItems !== undefined ? menuPopupItems : props.groupChildren;
37
- resolvedMenuPopupTitle = menuPopupTitle !== null && menuPopupTitle !== undefined ? menuPopupTitle : props.groupPopupTitle;
38
- }
31
+ const inlineGroupHeader = groupHeaderExpanded !== undefined;
32
+ const resolvedMenuPopupItems = menuPopupItems !== null && menuPopupItems !== undefined ? menuPopupItems : props.compositeBarMenuPopupItems;
33
+ const resolvedMenuPopupTitle = menuPopupTitle !== null && menuPopupTitle !== undefined ? menuPopupTitle : props.compositeBarMenuPopupTitle;
39
34
  const handleOpenChangePopup = React__default.useCallback((newOpen, event, reason) => {
40
35
  var _a;
41
36
  if (event instanceof MouseEvent &&
@@ -49,17 +44,19 @@ const Item = (props) => {
49
44
  onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
50
45
  }, [onOpenChangePopup]);
51
46
  const isDivider = type === 'divider';
52
- const hasSubmenuPopup = !isDivider && Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) && (collapsedItem || isGroupHeader);
47
+ const showMenuPopup = !isDivider &&
48
+ Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) &&
49
+ (collapsedItem || !inlineGroupHeader);
53
50
  const submenuNest = React__default.useContext(ItemPopupNestContext);
54
51
  React__default.useEffect(() => {
55
- if (!submenuNest || !hasSubmenuPopup || !compactNavPopoverOpen) {
52
+ if (!submenuNest || !showMenuPopup || !compactNavPopoverOpen) {
56
53
  return undefined;
57
54
  }
58
55
  submenuNest.registerNestedOpen(1);
59
56
  return () => {
60
57
  submenuNest.registerNestedOpen(-1);
61
58
  };
62
- }, [submenuNest, hasSubmenuPopup, compactNavPopoverOpen]);
59
+ }, [submenuNest, showMenuPopup, compactNavPopoverOpen]);
63
60
  if (isDivider) {
64
61
  return React__default.createElement("div", { className: b('menu-divider') });
65
62
  }
@@ -97,12 +94,14 @@ const Item = (props) => {
97
94
  onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
98
95
  }
99
96
  } }),
97
+ menuGroupNestedTreeConnector,
100
98
  React__default.createElement("div", { className: b('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
101
99
  React__default.createElement("div", { className: b('title'), title: typeof title === 'string' ? title : undefined }, titleEl),
102
- Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) && (isGroupHeader || collapsedItem) && (React__default.createElement("div", { className: b('chevron') },
103
- React__default.createElement(Icon, { data: ChevronRight, size: compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE })))));
100
+ inlineGroupHeader ? (React__default.createElement("div", { className: b('chevron') },
101
+ React__default.createElement(Icon, { data: groupHeaderExpanded ? ChevronUp : ChevronDown, size: compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE }))) : (Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) && (React__default.createElement("div", { className: b('chevron') },
102
+ React__default.createElement(Icon, { data: ChevronRight, size: compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE }))))));
104
103
  const expandedMenuRows = resolvedMenuPopupItems;
105
- const wrappedTagNode = hasSubmenuPopup && expandedMenuRows ? (React__default.createElement(ItemPopup, { items: expandedMenuRows, title: isGroupHeader ? resolvedMenuPopupTitle : undefined, open: compactNavPopoverOpen, itemClassName: popupItemClassName, onOpenChange: setCompactNavPopoverOpen, collapsed: collapsedItem ? true : compact, onItemClick: onItemClick }, tagNode)) : (tagNode);
104
+ const wrappedTagNode = showMenuPopup && expandedMenuRows ? (React__default.createElement(ItemPopup, { items: expandedMenuRows, title: resolvedMenuPopupTitle, open: compactNavPopoverOpen, itemClassName: popupItemClassName, onOpenChange: setCompactNavPopoverOpen, collapsed: collapsedItem ? true : compact, onItemClick: onItemClick }, tagNode)) : (tagNode);
106
105
  const createdNode = (React__default.createElement(React__default.Fragment, null,
107
106
  wrappedTagNode,
108
107
  renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorElement: anchorRef.current, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));
@@ -1 +1 @@
1
- {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR} from '../constants';\nimport {isGroupHeaderItem} from '../grouping';\n\nimport {ItemInnerProps, ItemProps} from './Item.types';\nimport {ItemPopup} from './ItemPopup';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\nimport {renderItemTitle} from './renderItemTitle';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\nconst CHEVRON_SIZE = 16;\nconst CHEVRON_SIZE_COMPACT = 10;\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n const {\n className,\n popupItemClassName,\n menuPopupItems,\n menuPopupTitle,\n compact,\n onMouseLeave,\n onMouseEnter,\n enableTooltip = true,\n popupVisible = false,\n popupRef: anchoreRefProp,\n popupPlacement = defaultPopupPlacement,\n popupOffset = defaultPopupOffset,\n popupKeepMounted,\n renderPopupContent,\n onOpenChangePopup,\n onItemClick,\n onItemClickCapture,\n itemWrapper,\n bringForward,\n rightAdornment,\n title,\n href,\n qa,\n hideIcon = false,\n stopClickPropagation = false,\n } = props;\n\n const [compactNavPopoverOpen, setCompactNavPopoverOpen] = React.useState(false);\n\n const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n const anchorRef = anchoreRefProp?.current ? anchoreRefProp : ref;\n const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n const type = props.type || ITEM_TYPE_REGULAR;\n const current = props.current || false;\n const icon = props.icon;\n const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;\n const iconQa = props.iconQa;\n const collapsedItem = props.id === COLLAPSE_ITEM_ID;\n const isGroupHeader = isGroupHeaderItem(props);\n\n let resolvedMenuPopupItems = menuPopupItems;\n let resolvedMenuPopupTitle = menuPopupTitle;\n\n if (isGroupHeader) {\n resolvedMenuPopupItems = menuPopupItems ?? props.groupChildren;\n resolvedMenuPopupTitle = menuPopupTitle ?? props.groupPopupTitle;\n }\n\n const handleOpenChangePopup = React.useCallback<NonNullable<ItemProps['onOpenChangePopup']>>(\n (newOpen, event, reason) => {\n if (\n event instanceof MouseEvent &&\n event.target &&\n ref.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n if (newOpen) {\n setCompactNavPopoverOpen(false);\n }\n\n onOpenChangePopup?.(newOpen, event, reason);\n },\n [onOpenChangePopup],\n );\n\n const isDivider = type === 'divider';\n const hasSubmenuPopup =\n !isDivider && Boolean(resolvedMenuPopupItems?.length) && (collapsedItem || isGroupHeader);\n\n const submenuNest = React.useContext(ItemPopupNestContext);\n\n React.useEffect(() => {\n if (!submenuNest || !hasSubmenuPopup || !compactNavPopoverOpen) {\n return undefined;\n }\n\n submenuNest.registerNestedOpen(1);\n\n return () => {\n submenuNest.registerNestedOpen(-1);\n };\n }, [submenuNest, hasSubmenuPopup, compactNavPopoverOpen]);\n\n if (isDivider) {\n return <div className={b('menu-divider')} />;\n }\n\n const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';\n\n const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n if (!compact) {\n return iconEl;\n }\n\n const iconButton = (\n <div\n onMouseEnter={() => onMouseEnter?.()}\n onMouseLeave={() => onMouseLeave?.()}\n className={b('btn-icon')}\n >\n {iconEl}\n </div>\n );\n\n if (resolvedMenuPopupItems?.length) {\n return iconButton;\n }\n\n return (\n <ItemPopup\n items={[props]}\n open={compactNavPopoverOpen}\n onOpenChange={(nextOpen) => {\n if (nextOpen && compactPopoverDisabled) return;\n setCompactNavPopoverOpen(nextOpen);\n }}\n hideIcon\n itemClassName={popupItemClassName}\n disabled={compactPopoverDisabled}\n type={type}\n collapsed={compact}\n onItemClick={onItemClick}\n >\n {iconButton}\n </ItemPopup>\n );\n };\n\n const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n const [Tag, tagProps] = href ? ['a' as const, {href}] : ['button' as const, {}];\n\n const tagNode = (\n <Tag\n {...tagProps}\n className={b({type, current, compact, 'hide-icon': hideIcon}, className)}\n ref={ref}\n data-type={type}\n data-qa={qa}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (stopClickPropagation) {\n event.stopPropagation();\n }\n\n if (compact && !collapsedItem) {\n setCompactNavPopoverOpen(false);\n }\n\n onItemClick?.(props, collapsedItem, event);\n }}\n onClickCapture={onItemClickCapture}\n onMouseEnter={() => {\n if (!compact) {\n onMouseEnter?.();\n }\n }}\n onMouseLeave={() => {\n if (!compact) {\n onMouseLeave?.();\n }\n }}\n >\n <div className={b('icon-place')} ref={highlightedRef}>\n {makeIconNode(iconEl)}\n </div>\n\n <div className={b('title')} title={typeof title === 'string' ? title : undefined}>\n {titleEl}\n </div>\n\n {Boolean(resolvedMenuPopupItems?.length) && (isGroupHeader || collapsedItem) && (\n <div className={b('chevron')}>\n <Icon\n data={ChevronRight}\n size={compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE}\n />\n </div>\n )}\n </Tag>\n );\n\n const expandedMenuRows = resolvedMenuPopupItems;\n\n const wrappedTagNode =\n hasSubmenuPopup && expandedMenuRows ? (\n <ItemPopup\n items={expandedMenuRows}\n title={isGroupHeader ? resolvedMenuPopupTitle : undefined}\n open={compactNavPopoverOpen}\n itemClassName={popupItemClassName}\n onOpenChange={setCompactNavPopoverOpen}\n collapsed={collapsedItem ? true : compact}\n onItemClick={onItemClick}\n >\n {tagNode}\n </ItemPopup>\n ) : (\n tagNode\n );\n\n const createdNode = (\n <React.Fragment>\n {wrappedTagNode}\n {renderPopupContent && Boolean(anchorRef?.current) && (\n <Popup\n strategy=\"fixed\"\n open={popupVisible}\n keepMounted={popupKeepMounted}\n placement={popupPlacement}\n offset={popupOffset}\n anchorElement={anchorRef.current}\n onOpenChange={handleOpenChangePopup}\n >\n {renderPopupContent()}\n </Popup>\n )}\n </React.Fragment>\n );\n\n return createdNode;\n };\n\n const iconNode =\n hideIcon || !icon ? null : (\n <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n );\n const titleNode = renderItemTitle({title, rightAdornment});\n const params = {icon: iconNode, title: titleNode};\n let highlightedNode = null;\n let node;\n\n const opts = {compact: Boolean(compact), collapsed: false, item: props, ref};\n\n if (typeof itemWrapper === 'function') {\n node = itemWrapper(params, makeNode, opts) as React.ReactElement;\n highlightedNode =\n bringForward &&\n (itemWrapper(\n params,\n ({icon: iconEl}) => makeIconNode(iconEl),\n opts,\n ) as React.ReactElement);\n } else {\n node = makeNode(params);\n highlightedNode = bringForward && makeIconNode(iconNode);\n }\n\n return (\n <React.Fragment>\n {bringForward && (\n <HighlightedItem\n iconNode={highlightedNode}\n iconRef={highlightedRef}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) =>\n onItemClick?.(props, false, event)\n }\n onClickCapture={onItemClickCapture}\n />\n )}\n {node}\n </React.Fragment>\n );\n};\n\nItem.displayName = 'Item';\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ChevronDown, ChevronRight, ChevronUp} from '@gravity-ui/icons';\nimport {Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR} from '../constants';\n\nimport {ItemInnerProps, ItemProps} from './Item.types';\nimport {ItemPopup} from './ItemPopup';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\nimport {renderItemTitle} from './renderItemTitle';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\nconst CHEVRON_SIZE = 16;\nconst CHEVRON_SIZE_COMPACT = 10;\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n const {\n className,\n popupItemClassName,\n menuPopupItems,\n menuPopupTitle,\n groupHeaderExpanded,\n compact,\n onMouseLeave,\n onMouseEnter,\n enableTooltip = true,\n popupVisible = false,\n popupRef: anchoreRefProp,\n popupPlacement = defaultPopupPlacement,\n popupOffset = defaultPopupOffset,\n popupKeepMounted,\n renderPopupContent,\n onOpenChangePopup,\n onItemClick,\n onItemClickCapture,\n itemWrapper,\n bringForward,\n rightAdornment,\n title,\n href,\n qa,\n hideIcon = false,\n stopClickPropagation = false,\n menuGroupNestedTreeConnector,\n } = props;\n\n const [compactNavPopoverOpen, setCompactNavPopoverOpen] = React.useState(false);\n\n const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n const anchorRef = anchoreRefProp?.current ? anchoreRefProp : ref;\n const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n const type = props.type || ITEM_TYPE_REGULAR;\n const current = props.current || false;\n const icon = props.icon;\n const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;\n const iconQa = props.iconQa;\n const collapsedItem = props.id === COLLAPSE_ITEM_ID;\n const inlineGroupHeader = groupHeaderExpanded !== undefined;\n const resolvedMenuPopupItems = menuPopupItems ?? props.compositeBarMenuPopupItems;\n const resolvedMenuPopupTitle = menuPopupTitle ?? props.compositeBarMenuPopupTitle;\n\n const handleOpenChangePopup = React.useCallback<NonNullable<ItemProps['onOpenChangePopup']>>(\n (newOpen, event, reason) => {\n if (\n event instanceof MouseEvent &&\n event.target &&\n ref.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n if (newOpen) {\n setCompactNavPopoverOpen(false);\n }\n\n onOpenChangePopup?.(newOpen, event, reason);\n },\n [onOpenChangePopup],\n );\n\n const isDivider = type === 'divider';\n const showMenuPopup =\n !isDivider &&\n Boolean(resolvedMenuPopupItems?.length) &&\n (collapsedItem || !inlineGroupHeader);\n\n const submenuNest = React.useContext(ItemPopupNestContext);\n\n React.useEffect(() => {\n if (!submenuNest || !showMenuPopup || !compactNavPopoverOpen) {\n return undefined;\n }\n\n submenuNest.registerNestedOpen(1);\n\n return () => {\n submenuNest.registerNestedOpen(-1);\n };\n }, [submenuNest, showMenuPopup, compactNavPopoverOpen]);\n\n if (isDivider) {\n return <div className={b('menu-divider')} />;\n }\n\n const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';\n\n const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n if (!compact) {\n return iconEl;\n }\n\n const iconButton = (\n <div\n onMouseEnter={() => onMouseEnter?.()}\n onMouseLeave={() => onMouseLeave?.()}\n className={b('btn-icon')}\n >\n {iconEl}\n </div>\n );\n\n if (resolvedMenuPopupItems?.length) {\n return iconButton;\n }\n\n return (\n <ItemPopup\n items={[props]}\n open={compactNavPopoverOpen}\n onOpenChange={(nextOpen) => {\n if (nextOpen && compactPopoverDisabled) return;\n setCompactNavPopoverOpen(nextOpen);\n }}\n hideIcon\n itemClassName={popupItemClassName}\n disabled={compactPopoverDisabled}\n type={type}\n collapsed={compact}\n onItemClick={onItemClick}\n >\n {iconButton}\n </ItemPopup>\n );\n };\n\n const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n const [Tag, tagProps] = href ? ['a' as const, {href}] : ['button' as const, {}];\n\n const tagNode = (\n <Tag\n {...tagProps}\n className={b({type, current, compact, 'hide-icon': hideIcon}, className)}\n ref={ref}\n data-type={type}\n data-qa={qa}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (stopClickPropagation) {\n event.stopPropagation();\n }\n\n if (compact && !collapsedItem) {\n setCompactNavPopoverOpen(false);\n }\n\n onItemClick?.(props, collapsedItem, event);\n }}\n onClickCapture={onItemClickCapture}\n onMouseEnter={() => {\n if (!compact) {\n onMouseEnter?.();\n }\n }}\n onMouseLeave={() => {\n if (!compact) {\n onMouseLeave?.();\n }\n }}\n >\n {menuGroupNestedTreeConnector}\n <div className={b('icon-place')} ref={highlightedRef}>\n {makeIconNode(iconEl)}\n </div>\n\n <div className={b('title')} title={typeof title === 'string' ? title : undefined}>\n {titleEl}\n </div>\n\n {inlineGroupHeader ? (\n <div className={b('chevron')}>\n <Icon\n data={groupHeaderExpanded ? ChevronUp : ChevronDown}\n size={compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE}\n />\n </div>\n ) : (\n Boolean(resolvedMenuPopupItems?.length) && (\n <div className={b('chevron')}>\n <Icon\n data={ChevronRight}\n size={compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE}\n />\n </div>\n )\n )}\n </Tag>\n );\n\n const expandedMenuRows = resolvedMenuPopupItems;\n\n const wrappedTagNode =\n showMenuPopup && expandedMenuRows ? (\n <ItemPopup\n items={expandedMenuRows}\n title={resolvedMenuPopupTitle}\n open={compactNavPopoverOpen}\n itemClassName={popupItemClassName}\n onOpenChange={setCompactNavPopoverOpen}\n collapsed={collapsedItem ? true : compact}\n onItemClick={onItemClick}\n >\n {tagNode}\n </ItemPopup>\n ) : (\n tagNode\n );\n\n const createdNode = (\n <React.Fragment>\n {wrappedTagNode}\n {renderPopupContent && Boolean(anchorRef?.current) && (\n <Popup\n strategy=\"fixed\"\n open={popupVisible}\n keepMounted={popupKeepMounted}\n placement={popupPlacement}\n offset={popupOffset}\n anchorElement={anchorRef.current}\n onOpenChange={handleOpenChangePopup}\n >\n {renderPopupContent()}\n </Popup>\n )}\n </React.Fragment>\n );\n\n return createdNode;\n };\n\n const iconNode =\n hideIcon || !icon ? null : (\n <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n );\n const titleNode = renderItemTitle({title, rightAdornment});\n const params = {icon: iconNode, title: titleNode};\n let highlightedNode = null;\n let node;\n\n const opts = {compact: Boolean(compact), collapsed: false, item: props, ref};\n\n if (typeof itemWrapper === 'function') {\n node = itemWrapper(params, makeNode, opts) as React.ReactElement;\n highlightedNode =\n bringForward &&\n (itemWrapper(\n params,\n ({icon: iconEl}) => makeIconNode(iconEl),\n opts,\n ) as React.ReactElement);\n } else {\n node = makeNode(params);\n highlightedNode = bringForward && makeIconNode(iconNode);\n }\n\n return (\n <React.Fragment>\n {bringForward && (\n <HighlightedItem\n iconNode={highlightedNode}\n iconRef={highlightedRef}\n onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) =>\n onItemClick?.(props, false, event)\n }\n onClickCapture={onItemClickCapture}\n />\n )}\n {node}\n </React.Fragment>\n );\n};\n\nItem.displayName = 'Item';\n"],"names":["React"],"mappings":"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"}
@@ -1,3 +1,4 @@
1
+ import * as React from 'react';
1
2
  import { AsideHeaderItem } from 'src/components/AsideHeader/types';
2
3
  export interface ItemProps extends AsideHeaderItem {
3
4
  }
@@ -8,6 +9,11 @@ export interface ItemInnerProps extends ItemProps {
8
9
  menuPopupItems?: AsideHeaderItem[];
9
10
  /** Optional title rendered at the top of the popup listing `menuPopupItems`. */
10
11
  menuPopupTitle?: string;
12
+ /**
13
+ * When set, the row is an inline (expanded sidebar) group header: chevron up/down
14
+ * instead of a flyout chevron, and children render in a nested list.
15
+ */
16
+ groupHeaderExpanded?: boolean;
11
17
  onMouseEnter?: () => void;
12
18
  onMouseLeave?: () => void;
13
19
  /** When true, the icon slot is not rendered (e.g. compact popover: icon stays in the bar). */
@@ -17,4 +23,6 @@ export interface ItemInnerProps extends ItemProps {
17
23
  * the parent Item's onClick in the React tree.
18
24
  */
19
25
  stopClickPropagation?: boolean;
26
+ /** Inline menu-group tree (L-connector) rendered inside the row, before the icon slot. */
27
+ menuGroupNestedTreeConnector?: React.ReactNode;
20
28
  }
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- export type ItemPopupNestContextValue = {
2
+ type ItemPopupNestContextValue = {
3
3
  registerNestedOpen: (delta: number) => void;
4
4
  };
5
5
  export declare const ItemPopupNestContext: React.Context<ItemPopupNestContextValue | null>;
6
+ export {};
@@ -1 +1 @@
1
- {"version":3,"file":"ItemPopupNestContext.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.tsx"],"sourcesContent":["import React from 'react';\n\nexport type ItemPopupNestContextValue = {\n registerNestedOpen: (delta: number) => void;\n};\n\nexport const ItemPopupNestContext = React.createContext<ItemPopupNestContextValue | null>(null);\n"],"names":["React"],"mappings":";;AAMa,MAAA,oBAAoB,GAAGA,cAAK,CAAC,aAAa,CAAmC,IAAI;;;;"}
1
+ {"version":3,"file":"ItemPopupNestContext.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.tsx"],"sourcesContent":["import React from 'react';\n\ntype ItemPopupNestContextValue = {\n registerNestedOpen: (delta: number) => void;\n};\n\nexport const ItemPopupNestContext = React.createContext<ItemPopupNestContextValue | null>(null);\n"],"names":["React"],"mappings":";;AAMa,MAAA,oBAAoB,GAAGA,cAAK,CAAC,aAAa,CAAmC,IAAI;;;;"}