@semiont/react-ui 0.2.33-build.79 → 0.2.33-build.81

package/src/components/resource/panels/__tests__/TaggingPanel.test.tsx

@@ -1,22 +1,77 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import type { MockedFunction } from 'vitest';
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { TaggingPanel } from '../TaggingPanel';
+import { EventBusProvider, resetEventBusForTesting, useEventBus } from '../../../../contexts/EventBusContext';
 import type { components } from '@semiont/api-client';
 
 type Annotation = components['schemas']['Annotation'];
 
-// Mock MakeMeaningEventBusContext
-vi.mock('../../../../contexts/MakeMeaningEventBusContext', () => ({
-  useMakeMeaningEvents: vi.fn(() => ({
-    emit: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
-  })),
-}));
+// Composition-based event tracker
+interface TrackedEvent {
+  event: string;
+  payload: any;
+}
+
+function createEventTracker() {
+  const events: TrackedEvent[] = [];
+
+  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
+    const eventBus = useEventBus();
+
+    React.useEffect(() => {
+      const handlers: Array<() => void> = [];
+
+      const trackEvent = (eventName: string) => (payload: any) => {
+        events.push({ event: eventName, payload });
+      };
+
+      const panelEvents = ['annotation:create', 'detection:start'];
+
+      panelEvents.forEach(eventName => {
+        const handler = trackEvent(eventName);
+        eventBus.on(eventName, handler);
+        handlers.push(() => eventBus.off(eventName, handler));
+      });
+
+      return () => {
+        handlers.forEach(cleanup => cleanup());
+      };
+    }, [eventBus]);
+
+    return <>{children}</>;
+  }
+
+  return {
+    EventTrackingWrapper,
+    events,
+    clear: () => {
+      events.length = 0;
+    },
+  };
+}
+
+// Helper to render with EventBusProvider
+const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
+  if (tracker) {
+    return render(
+      <EventBusProvider>
+        <tracker.EventTrackingWrapper>
+          {component}
+        </tracker.EventTrackingWrapper>
+      </EventBusProvider>
+    );
+  }
+
+  return render(
+    <EventBusProvider>
+      {component}
+    </EventBusProvider>
+  );
+};
 
 // Mock TranslationContext
 vi.mock('../../../../contexts/TranslationContext', () => ({
@@ -50,6 +105,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
     }
     return result;
   }),
+  TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
 // Mock @semiont/api-client utilities
@@ -64,17 +120,8 @@ vi.mock('@semiont/api-client', async () => {
 
 // Mock TagEntry component to simplify testing
 vi.mock('../TagEntry', () => ({
-  TagEntry: ({ tag, onClick, onTagRef, onTagHover }: any) => (
-    <div
-      data-testid={`tag-${tag.id}`}
-      onClick={() => onClick()}
-    >
-      <button
-        onMouseEnter={() => onTagHover?.(tag.id)}
-        onMouseLeave={() => onTagHover?.(null)}
-      >
-        Hover
-      </button>
+  TagEntry: ({ tag, onTagRef }: any) => (
+    <div data-testid={`tag-${tag.id}`}>
       <div>{tag.id}</div>
     </div>
   ),
@@ -152,13 +199,11 @@ const createPendingAnnotation = (exact: string) => ({
 describe('TaggingPanel Component', () => {
   const defaultProps = {
     annotations: mockTags.empty,
-    onAnnotationClick: vi.fn(),
-    onCreate: vi.fn(),
-    focusedAnnotationId: null,
     pendingAnnotation: null,
   };
 
   beforeEach(() => {
+    resetEventBusForTesting();
     vi.clearAllMocks();
 
     // Mock scrollIntoView for jsdom
@@ -184,20 +229,21 @@ describe('TaggingPanel Component', () => {
 
   describe('Rendering', () => {
     it('should render panel header with title and count', () => {
-      render(<TaggingPanel {...defaultProps} annotations={mockTags.multiple} />);
+      renderWithEventBus(<TaggingPanel {...defaultProps} annotations={mockTags.multiple} />);
 
-      expect(screen.getByText(/Tags/)).toBeInTheDocument();
+      const headings = screen.getAllByText(/Tags/);
+      expect(headings.length).toBeGreaterThan(0);
       expect(screen.getByText(/\(3\)/)).toBeInTheDocument();
     });
 
     it('should show empty state when no tags', () => {
-      render(<TaggingPanel {...defaultProps} />);
+      renderWithEventBus(<TaggingPanel {...defaultProps} />);
 
       expect(screen.getByText(/No tags yet/)).toBeInTheDocument();
     });
 
     it('should render all tags', () => {
-      render(<TaggingPanel {...defaultProps} annotations={mockTags.multiple} />);
+      renderWithEventBus(<TaggingPanel {...defaultProps} annotations={mockTags.multiple} />);
 
       expect(screen.getByTestId('tag-1')).toBeInTheDocument();
       expect(screen.getByTestId('tag-2')).toBeInTheDocument();
@@ -205,7 +251,7 @@ describe('TaggingPanel Component', () => {
     });
 
     it('should have proper panel structure', () => {
-      const { container } = render(<TaggingPanel {...defaultProps} />);
+      const { container } = renderWithEventBus(<TaggingPanel {...defaultProps} />);
 
       const panel = container.firstChild as HTMLElement;
       expect(panel).toHaveClass('semiont-panel');
@@ -214,7 +260,7 @@ describe('TaggingPanel Component', () => {
 
   describe('Tag Sorting', () => {
     it('should sort tags by position in resource', () => {
-      render(<TaggingPanel {...defaultProps} annotations={mockTags.multiple} />);
+      renderWithEventBus(<TaggingPanel {...defaultProps} annotations={mockTags.multiple} />);
 
       const tags = screen.getAllByTestId(/tag-/);
 
@@ -228,14 +274,14 @@ describe('TaggingPanel Component', () => {
       mockGetTextPositionSelector.mockReturnValue(null);
 
       expect(() => {
-        render(<TaggingPanel {...defaultProps} annotations={mockTags.multiple} />);
+        renderWithEventBus(<TaggingPanel {...defaultProps} annotations={mockTags.multiple} />);
       }).not.toThrow();
     });
   });
 
   describe('Manual Tag Creation', () => {
     it('should not show tag creation form by default', () => {
-      render(<TaggingPanel {...defaultProps} />);
+      renderWithEventBus(<TaggingPanel {...defaultProps} />);
 
       expect(screen.queryByText(/Create tag for selection/)).not.toBeInTheDocument();
     });
@@ -243,7 +289,7 @@ describe('TaggingPanel Component', () => {
     it('should show tag creation form when pendingAnnotation exists', () => {
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
@@ -256,7 +302,7 @@ describe('TaggingPanel Component', () => {
     it('should display quoted selected text in tag creation form', () => {
       const pendingAnnotation = createPendingAnnotation('Selected text for tagging');
 
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
@@ -270,7 +316,7 @@ describe('TaggingPanel Component', () => {
       const longText = 'A'.repeat(150);
       const pendingAnnotation = createPendingAnnotation(longText);
 
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
@@ -284,7 +330,7 @@ describe('TaggingPanel Component', () => {
     it('should show schema selector in tag creation form', () => {
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
@@ -298,7 +344,7 @@ describe('TaggingPanel Component', () => {
     it('should show category selector in tag creation form', () => {
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
@@ -308,16 +354,16 @@ describe('TaggingPanel Component', () => {
       expect(screen.getByText(/Select category/)).toBeInTheDocument();
     });
 
-    it('should call onCreate when category is selected', async () => {
-      const onCreate = vi.fn();
+    it('should emit annotation:create event when category is selected', async () => {
+      const tracker = createEventTracker();
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
-          onCreate={onCreate}
-        />
+        />,
+        tracker
       );
 
       // Find the category selector (the one in the pending annotation form)
@@ -330,13 +376,20 @@ describe('TaggingPanel Component', () => {
 
       await userEvent.selectOptions(categorySelect!, 'Issue');
 
-      expect(onCreate).toHaveBeenCalledWith('legal-irac', 'Issue');
+      await waitFor(() => {
+        expect(tracker.events.some(e =>
+          e.event === 'annotation:create' &&
+          e.payload?.motivation === 'tagging' &&
+          e.payload?.body?.[0]?.value === 'Issue' &&
+          e.payload?.body?.[0]?.type === 'TextualBody'
+        )).toBe(true);
+      });
     });
 
     it('should have proper styling for tag creation form', () => {
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
-      const { container } = render(
+      const { container } = renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
@@ -350,43 +403,23 @@ describe('TaggingPanel Component', () => {
   });
 
   describe('Tag Interactions', () => {
-    it('should call onAnnotationClick when tag is clicked', () => {
-      const onAnnotationClick = vi.fn();
-      render(
+    it('should render tag entries', () => {
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           annotations={mockTags.single}
-          onAnnotationClick={onAnnotationClick}
         />
       );
 
       const tag = screen.getByTestId('tag-1');
-      fireEvent.click(tag);
-
-      expect(onAnnotationClick).toHaveBeenCalledWith(mockTags.single[0]);
+      expect(tag).toBeInTheDocument();
     });
   });
 
   describe('Tag Hover Behavior', () => {
-    it('should call onAnnotationHover when provided', () => {
-      const onAnnotationHover = vi.fn();
-      render(
-        <TaggingPanel
-          {...defaultProps}
-          annotations={mockTags.single}
-          onAnnotationHover={onAnnotationHover}
-        />
-      );
-
-      const hoverButton = screen.getByText('Hover');
-      fireEvent.mouseEnter(hoverButton);
-
-      expect(onAnnotationHover).toHaveBeenCalledWith('1');
-    });
-
-    it('should not error when onAnnotationHover is not provided', () => {
+    it('should render without errors', () => {
       expect(() => {
-        render(
+        renderWithEventBus(
           <TaggingPanel
             {...defaultProps}
             annotations={mockTags.single}
@@ -397,11 +430,10 @@ describe('TaggingPanel Component', () => {
   });
 
   describe('Detection Section', () => {
-    it('should render detection section when onDetect is provided and annotateMode is true', () => {
-      render(
+    it('should render detection section when annotateMode is true', () => {
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={vi.fn()}
           annotateMode={true}
         />
       );
@@ -409,22 +441,10 @@ describe('TaggingPanel Component', () => {
       expect(screen.getByText(/Detect Tags/)).toBeInTheDocument();
     });
 
-    it('should not render detection section when onDetect is not provided', () => {
-      render(
-        <TaggingPanel
-          {...defaultProps}
-          annotateMode={true}
-        />
-      );
-
-      expect(screen.queryByText(/Detect Tags/)).not.toBeInTheDocument();
-    });
-
     it('should not render detection section when annotateMode is false', () => {
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={vi.fn()}
           annotateMode={false}
         />
       );
@@ -433,10 +453,9 @@ describe('TaggingPanel Component', () => {
     });
 
     it('should show schema selector in detection section', () => {
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={vi.fn()}
           annotateMode={true}
         />
       );
@@ -446,10 +465,9 @@ describe('TaggingPanel Component', () => {
     });
 
     it('should show Select All and Deselect All buttons', () => {
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={vi.fn()}
           annotateMode={true}
         />
       );
@@ -459,10 +477,9 @@ describe('TaggingPanel Component', () => {
     });
 
     it('should show category checkboxes', () => {
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={vi.fn()}
           annotateMode={true}
         />
       );
@@ -474,10 +491,9 @@ describe('TaggingPanel Component', () => {
     });
 
     it('should disable detect button when no categories selected', () => {
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={vi.fn()}
           annotateMode={true}
         />
       );
@@ -487,10 +503,9 @@ describe('TaggingPanel Component', () => {
     });
 
     it('should enable detect button when categories are selected', async () => {
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={vi.fn()}
           annotateMode={true}
         />
       );
@@ -502,14 +517,14 @@ describe('TaggingPanel Component', () => {
       expect(detectButton).not.toBeDisabled();
     });
 
-    it('should call onDetect with selected schema and categories', async () => {
-      const onDetect = vi.fn();
-      render(
+    it('should emit detection:start event with selected schema and categories', async () => {
+      const tracker = createEventTracker();
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={onDetect}
           annotateMode={true}
-        />
+        />,
+        tracker
       );
 
       const issueCheckbox = screen.getByLabelText(/Issue/);
@@ -521,7 +536,15 @@ describe('TaggingPanel Component', () => {
       const detectButton = screen.getByRole('button', { name: /✨ Detect/i });
       await userEvent.click(detectButton);
 
-      expect(onDetect).toHaveBeenCalledWith('legal-irac', ['Issue', 'Rule']);
+      await waitFor(() => {
+        expect(tracker.events.some(e =>
+          e.event === 'detection:start' &&
+          e.payload?.motivation === 'tagging' &&
+          e.payload?.options?.schemaId === 'legal-irac' &&
+          e.payload?.options?.categories?.includes('Issue') &&
+          e.payload?.options?.categories?.includes('Rule')
+        )).toBe(true);
+      });
     });
   });
 
@@ -529,7 +552,7 @@ describe('TaggingPanel Component', () => {
     it('should show Cancel button when pendingAnnotation exists', () => {
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
           pendingAnnotation={pendingAnnotation}
@@ -542,17 +565,16 @@ describe('TaggingPanel Component', () => {
 
   describe('Accessibility', () => {
     it('should have proper heading structure', () => {
-      render(<TaggingPanel {...defaultProps} />);
+      renderWithEventBus(<TaggingPanel {...defaultProps} />);
 
-      const heading = screen.getByText(/Tags/);
-      expect(heading).toHaveClass('semiont-panel-header__text');
+      const headings = screen.getAllByText(/Tags/);
+      expect(headings[0]).toHaveClass('semiont-panel-header__text');
     });
 
     it('should have proper checkbox labels', () => {
-      render(
+      renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
-          onDetect={vi.fn()}
           annotateMode={true}
         />
       );

package/src/components/settings/SettingsPanel.tsx

@@ -4,28 +4,31 @@ import React, { useEffect } from 'react';
 import { LOCALES } from '@semiont/api-client';
 import { useTranslations } from '../../contexts/TranslationContext';
 import { useLanguageChangeAnnouncements } from '../LiveRegion';
+import { useEventBus } from '../../contexts/EventBusContext';
 import './SettingsPanel.css';
 
 interface SettingsPanelProps {
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   theme: 'light' | 'dark' | 'system';
-  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
   locale: string;
-  onLocaleChange: (locale: string) => void;
   isPendingLocaleChange?: boolean;
 }
 
+/**
+ * Settings panel for application preferences
+ *
+ * @emits settings:locale-changed - Locale changed by user. Payload: { locale: string }
+ * @emits settings:line-numbers-toggled - Line numbers toggled on/off. Payload: undefined
+ * @emits settings:theme-changed - Theme changed by user. Payload: { theme: 'light' | 'dark' | 'system' }
+ */
 export function SettingsPanel({
   showLineNumbers,
-  onLineNumbersToggle,
   theme,
-  onThemeChange,
   locale,
-  onLocaleChange,
   isPendingLocaleChange = false
 }: SettingsPanelProps) {
   const t = useTranslations('Settings');
+  const eventBus = useEventBus();
   const { announceLanguageChanging, announceLanguageChanged } = useLanguageChangeAnnouncements();
 
   // Track previous locale to detect changes
@@ -35,7 +38,7 @@ export function SettingsPanel({
   const handleLocaleChange = (newLocale: string) => {
     const localeName = LOCALES.find(l => l.code === newLocale)?.nativeName || newLocale;
     announceLanguageChanging(localeName);
-    onLocaleChange(newLocale);
+    eventBus.emit('settings:locale-changed', { locale: newLocale });
   };
 
   // Announce when language has successfully changed
@@ -45,7 +48,7 @@ export function SettingsPanel({
       announceLanguageChanged(localeName);
       setPreviousLocale(locale);
     }
-  }, [locale, previousLocale, isPendingLocaleChange, announceLanguageChanged]);
+  }, [locale, previousLocale, isPendingLocaleChange]);
 
   return (
     <div className="semiont-settings-panel">
@@ -64,7 +67,7 @@ export function SettingsPanel({
               type="button"
               role="switch"
               aria-checked={showLineNumbers}
-              onClick={onLineNumbersToggle}
+              onClick={() => eventBus.emit('settings:line-numbers-toggled', undefined)}
               className={`semiont-toggle ${
                 showLineNumbers ? 'semiont-toggle--active' : ''
               }`}
@@ -88,7 +91,7 @@ export function SettingsPanel({
           </label>
           <div className="semiont-settings-panel__button-group">
             <button
-              onClick={() => onThemeChange('light')}
+              onClick={() => eventBus.emit('settings:theme-changed', { theme: 'light' })}
               className={`semiont-panel-button ${
                 theme === 'light' ? 'semiont-panel-button-active' : ''
               }`}
@@ -97,7 +100,7 @@ export function SettingsPanel({
               ☀️ {t('themeLight')}
             </button>
             <button
-              onClick={() => onThemeChange('dark')}
+              onClick={() => eventBus.emit('settings:theme-changed', { theme: 'dark' })}
               className={`semiont-panel-button ${
                 theme === 'dark' ? 'semiont-panel-button-active' : ''
               }`}
@@ -106,7 +109,7 @@ export function SettingsPanel({
               🌙 {t('themeDark')}
             </button>
             <button
-              onClick={() => onThemeChange('system')}
+              onClick={() => eventBus.emit('settings:theme-changed', { theme: 'system' })}
               className={`semiont-panel-button ${
                 theme === 'system' ? 'semiont-panel-button-active' : ''
               }`}

package/src/features/admin-devops/__tests__/AdminDevOpsPage.test.tsx

@@ -34,11 +34,8 @@ const createMockProps = (overrides?: Partial<AdminDevOpsPageProps>): AdminDevOps
     },
   ],
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   translations: {
     title: 'DevOps',
     subtitle: 'System monitoring and management',
@@ -303,30 +300,6 @@ describe('AdminDevOpsPage', () => {
       );
     });
 
-    it('passes onThemeChange to toolbar panels', () => {
-      const onThemeChange = vi.fn();
-      const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
-      const props = createMockProps({ onThemeChange, ToolbarPanels });
-      render(<AdminDevOpsPage {...props} />);
-
-      expect(ToolbarPanels).toHaveBeenCalledWith(
-        expect.objectContaining({ onThemeChange }),
-        expect.anything()
-      );
-    });
-
-    it('passes onLineNumbersToggle to toolbar panels', () => {
-      const onLineNumbersToggle = vi.fn();
-      const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
-      const props = createMockProps({ onLineNumbersToggle, ToolbarPanels });
-      render(<AdminDevOpsPage {...props} />);
-
-      expect(ToolbarPanels).toHaveBeenCalledWith(
-        expect.objectContaining({ onLineNumbersToggle }),
-        expect.anything()
-      );
-    });
-
     it('passes activePanel to toolbar panels', () => {
       const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
       const props = createMockProps({ activePanel: 'settings', ToolbarPanels });
@@ -360,17 +333,6 @@ describe('AdminDevOpsPage', () => {
       );
     });
 
-    it('passes onPanelToggle to toolbar', () => {
-      const onPanelToggle = vi.fn();
-      const Toolbar = vi.fn(() => <div data-testid="toolbar" />);
-      const props = createMockProps({ onPanelToggle, Toolbar });
-      render(<AdminDevOpsPage {...props} />);
-
-      expect(Toolbar).toHaveBeenCalledWith(
-        expect.objectContaining({ onPanelToggle }),
-        expect.anything()
-      );
-    });
   });
 
   describe('Layout and Structure', () => {
@@ -430,14 +392,7 @@ describe('AdminDevOpsPage', () => {
     });
 
     it('handles all callbacks being defined', () => {
-      const onThemeChange = vi.fn();
-      const onLineNumbersToggle = vi.fn();
-      const onPanelToggle = vi.fn();
-      const props = createMockProps({
-        onThemeChange,
-        onLineNumbersToggle,
-        onPanelToggle,
-      });
+      const props = createMockProps();
       render(<AdminDevOpsPage {...props} />);
 
       expect(screen.getByText('DevOps')).toBeInTheDocument();

package/src/features/admin-devops/components/AdminDevOpsPage.tsx

@@ -23,11 +23,8 @@ export interface AdminDevOpsPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string | null) => void;
 
   // Translations
   translations: {
@@ -49,11 +46,8 @@ export interface AdminDevOpsPageProps {
 export function AdminDevOpsPage({
   suggestedFeatures,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   translations: t,
   StatusDisplay,
   ToolbarPanels,
@@ -138,15 +132,12 @@ export function AdminDevOpsPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>