Add ability to hide breadcrumbs button when items are selected

src/ui/components/Navigation/Core/NavigationBreadcrumbs/NavigationBreadcrumbs.scss

@@ -1,14 +1,14 @@
 .dl-core-navigation-breadcrumbs {
     flex: 1 1 0;
     position: relative;
-    height: 28px;
+    height: var(--dl-navigation-breadcrumbs-height);
 
     &__wrapper {
         position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
+        inset: 0;
+
+        line-height: var(--dl-navigation-breadcrumbs-height);
+        vertical-align: middle;
     }
 
     &__line {

src/ui/components/Navigation/Core/NavigationEntries.js

@@ -73,6 +73,8 @@ class NavigationEntries extends React.Component {
         focusSearchInput: PropTypes.func,
         clearSearchInput: PropTypes.func,
 
+        onItemSelect: PropTypes.func,
+
         getPlaceParameters: PropTypes.func.isRequired,
         inactiveEntryIds: PropTypes.arrayOf(PropTypes.string),
         isMobileNavigation: PropTypes.bool,
@@ -663,6 +665,7 @@ class NavigationEntries extends React.Component {
                     refreshNavigation={this.refresh}
                     onChangeLocation={this.props.onChangeLocation}
                     onMenuClick={this.props.onContextMenuClick}
+                    onItemSelect={this.props.onItemSelect}
                 />
             </div>
         );

src/ui/components/Navigation/Core/NavigationInline.js

@@ -31,13 +31,17 @@ class NavigationInline extends React.Component {
     };
     state = {
         breadCrumbs: [],
+        isSomeItemSelected: false,
     };
     refEntries = React.createRef();
     setBreadCrumbs = (breadCrumbs) => {
         if (!isEqual(this.state.breadCrumbs, breadCrumbs)) {
             this.setState({breadCrumbs});
         }
     };
+    onItemSelect = ({selectedItemsIds}) => {
+        this.setState({isSomeItemSelected: selectedItemsIds.size > 0});
+    };
     refresh = () => {
         if (this.refEntries.current) {
             this.refEntries.current.refresh();
@@ -58,7 +62,7 @@ class NavigationInline extends React.Component {
                     place={place}
                     getPlaceParameters={getPlaceParameters}
                     onClick={onCrumbClick}
-                    enableMenu={true}
+                    enableMenu={!this.state.isSomeItemSelected}
                     getContextMenuItems={this.props.getContextMenuItems}
                     refresh={this.refresh}
                     onChangeLocation={this.props.onChangeLocation}
@@ -96,6 +100,7 @@ class NavigationInline extends React.Component {
                         linkWrapper={linkWrapper}
                         getPlaceParameters={this.props.getPlaceParameters}
                         setBreadCrumbs={this.setBreadCrumbs}
+                        onItemSelect={this.onItemSelect}
                     />
                 </div>
             </div>

src/ui/components/Navigation/Core/NavigationModal.js

@@ -43,6 +43,7 @@ class NavigationModal extends React.Component {
     };
     state = {
         breadCrumbs: [],
+        isSomeItemSelected: false,
     };
     static getDerivedStateFromProps(props, state) {
         const {path, place} = props;
@@ -105,6 +106,9 @@ class NavigationModal extends React.Component {
             this.setState({breadCrumbs});
         }
     };
+    onItemSelect = ({selectedItemsIds}) => {
+        this.setState({isSomeItemSelected: selectedItemsIds.size > 0});
+    };
     render() {
         const {
             linkWrapper,
@@ -120,6 +124,7 @@ class NavigationModal extends React.Component {
         } = this.props;
         const {path, place} = this.state;
         const asideMode = Boolean(aside);
+
         const body = (
             <div className={b({modal: !asideMode, aside: asideMode})}>
                 {!hideSidebar && (
@@ -141,7 +146,7 @@ class NavigationModal extends React.Component {
                             place={place}
                             getPlaceParameters={this.props.getPlaceParameters}
                             onClick={this.onCrumbClick}
-                            enableMenu={true}
+                            enableMenu={!this.state.isSomeItemSelected}
                             getContextMenuItems={this.props.getContextMenuItems}
                             refresh={this.refresh}
                             onChangeLocation={this.props.onChangeLocation}
@@ -159,6 +164,7 @@ class NavigationModal extends React.Component {
                         getPlaceParameters={this.props.getPlaceParameters}
                         mode={MODE_MODAL}
                         setBreadCrumbs={this.setBreadCrumbs}
+                        onItemSelect={this.onItemSelect}
                     >
                         <CreateEntry
                             place={place}

src/ui/components/Navigation/Core/TableView/TableView.tsx

@@ -16,7 +16,7 @@ import './TableView.scss';
 const b = block('dl-core-navigation-table-view');
 
 export const TableView = (props: TableViewProps) => {
-    const {isMobileNavigation, ...listProps} = props;
+    const {isMobileNavigation, onItemSelect, ...listProps} = props;
 
     const [batchAction, setBatchAction] = React.useState<BatchAction | null>(null);
 
@@ -29,6 +29,7 @@ export const TableView = (props: TableViewProps) => {
         resetSelected,
     } = useBatchSelect({
         isMobileNavigation,
+        onItemSelect,
         mode: props.mode,
         entries: props.entries,
     });

src/ui/components/Navigation/Core/TableView/types.ts

@@ -2,6 +2,7 @@ import type {NavigationEntry} from '../../../../../shared/schema';
 import type {
     ChangeLocation,
     CurrentPageEntry,
+    ItemSelectArgs,
     LinkWrapperArgs,
     MenuClickArgs,
     Mode,
@@ -46,6 +47,7 @@ export type TableViewProps = {
     hasNextPage?: boolean;
     isMobileNavigation?: boolean;
     onMenuClick?: (args: MenuClickArgs) => void;
+    onItemSelect?: (args: ItemSelectArgs) => void;
 };
 
 export type HookBatchSelectResult = {

src/ui/components/Navigation/Core/TableView/useBatchSelect.ts

@@ -2,12 +2,16 @@ import React from 'react';
 
 import type {HookBatchSelectResult, TableViewProps} from './types';
 
-type HookBatchSelectArgs = Pick<TableViewProps, 'entries' | 'mode' | 'isMobileNavigation'>;
+type HookBatchSelectArgs = Pick<
+    TableViewProps,
+    'entries' | 'mode' | 'isMobileNavigation' | 'onItemSelect'
+>;
 
 export function useBatchSelect({
     entries,
     mode,
     isMobileNavigation,
+    onItemSelect,
 }: HookBatchSelectArgs): HookBatchSelectResult {
     const isBatchEnabled = checkBatchEnabled(mode, isMobileNavigation);
 
@@ -35,7 +39,15 @@ export function useBatchSelect({
                 } else {
                     newSelectedIds.add(entryId);
                 }
+
                 setSelectedIds(newSelectedIds);
+
+                if (onItemSelect) {
+                    onItemSelect({
+                        selectedItemId: entryId,
+                        selectedItemsIds: newSelectedIds,
+                    });
+                }
             }
         },
         [allActiveIds, selectedIds],

src/ui/components/Navigation/types.ts

@@ -42,6 +42,11 @@ export type MenuClickArgs = {
     action: string;
 };
 
+export type ItemSelectArgs = {
+    selectedItemId: string;
+    selectedItemsIds: Set<string>;
+};
+
 export type BatchAction = 'move';
 
 export type ChangeLocation = (place: string, path: string) => void;

src/ui/styles/variables.scss

@@ -24,6 +24,8 @@ $titleFontFamily: 'Arial', 'HelveticaNeue', 'Helvetica', sans-serif;
 $monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;
 
 .g-root {
+    --dl-navigation-breadcrumbs-height: 28px;
+
     --dl-color-border: var(--g-color-line-generic);
     --dl-color-border-solid: var(--g-color-line-generic-solid);
     --dl-color-progress-bar: var(--g-color-text-info);