@object-ui/plugin-view 3.0.2 → 3.1.0

package/src/ObjectView.tsx

@@ -49,12 +49,14 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerDescription,
+  NavigationOverlay,
   Button,
   Tabs,
   TabsList,
   TabsTrigger,
 } from '@object-ui/components';
 import { Plus } from 'lucide-react';
+import { buildExpandFields } from '@object-ui/core';
 import { ViewSwitcher } from './ViewSwitcher';
 
 /**
@@ -139,6 +141,16 @@ export interface ObjectViewProps {
    * Toolbar addon: extra elements to render in the toolbar (e.g., MetadataToggle)
    */
   toolbarAddon?: React.ReactNode;
+
+  /**
+   * Callback when the "+" create view button is clicked in ViewSwitcher.
+   */
+  onCreateView?: () => void;
+
+  /**
+   * Callback when a per-view action is triggered in ViewSwitcher.
+   */
+  onViewAction?: (action: string, viewType: ViewType) => void;
 }
 
 type FormMode = 'create' | 'edit' | 'view';
@@ -203,6 +215,8 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   onEdit: onEditProp,
   renderListView,
   toolbarAddon,
+  onCreateView,
+  onViewAction,
 }) => {
   const [objectSchema, setObjectSchema] = useState<Record<string, unknown> | null>(null);
   const [isFormOpen, setIsFormOpen] = useState(false);
@@ -308,10 +322,13 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           ? sortConfig.map(s => ({ field: s.field, order: s.direction }))
           : (currentNamedViewConfig?.sort || activeView?.sort || schema.table?.defaultSort || undefined);
 
+        // Auto-inject $expand for lookup/master_detail fields
+        const expand = buildExpandFields((objectSchema as any)?.fields);
         const results = await dataSource.find(schema.objectName, {
           $filter: finalFilter.length > 0 ? finalFilter : undefined,
           $orderby: sort,
           $top: 100,
+          ...(expand.length > 0 ? { $expand: expand } : {}),
         });
 
         let items: any[] = [];
@@ -336,7 +353,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
     fetchData();
     return () => { isMounted = false; };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schema.objectName, dataSource, currentViewType, filterValues, sortConfig, refreshKey, currentNamedViewConfig, activeView, renderListView]);
+  }, [schema.objectName, dataSource, currentViewType, filterValues, sortConfig, refreshKey, currentNamedViewConfig, activeView, renderListView, objectSchema]);
 
   // Determine layout mode
   const layout = schema.layout || 'drawer';
@@ -425,6 +442,12 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
         }
         return;
       }
+      if (navigationConfig.mode === 'split' || navigationConfig.mode === 'popover') {
+        setFormMode('view');
+        setSelectedRecord(record);
+        setIsFormOpen(true);
+        return;
+      }
     }
 
     // Default behavior
@@ -490,8 +513,10 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           icon: iconMap[v.type] || 'table',
         };
       }),
+      allowCreateView: schema.allowCreateView,
+      viewActions: schema.viewActions,
     };
-  }, [hasMultiView, viewsPropResolved, activeView, schema.objectName]);
+  }, [hasMultiView, viewsPropResolved, activeView, schema.objectName, schema.allowCreateView, schema.viewActions]);
 
   // Handle view type change from ViewSwitcher → map back to view ID
   const handleViewTypeChange = useCallback((viewType: ViewType) => {
@@ -558,7 +583,10 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   }, [schema.showFilters, schema.filterableFields, objectSchema, filterValues]);
 
   // --- SortUI schema ---
+  const showSort = (schema as ObjectViewSchema).showSort;
   const sortSchema: SortUISchema | null = useMemo(() => {
+    if (showSort === false) return null;
+
     const fields = (objectSchema as any)?.fields || {};
     const sortableFields = Object.entries(fields)
       .filter(([, f]: [string, any]) => !f.hidden)
@@ -574,7 +602,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       fields: sortableFields,
       sort: sortConfig,
     };
-  }, [objectSchema, sortConfig]);
+  }, [objectSchema, sortConfig, showSort]);
 
   // --- Generate view component schema for non-grid views ---
   const generateViewSchema = useCallback((viewType: string): any => {
@@ -582,20 +610,41 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       objectName: schema.objectName,
       fields: currentNamedViewConfig?.columns || activeView?.columns || schema.table?.fields,
       className: 'h-full w-full',
-      showSearch: false,
+      showSearch: activeView?.showSearch ?? schema.showSearch ?? false,
+      showSort: activeView?.showSort ?? schema.showSort ?? false,
+      showFilters: activeView?.showFilters ?? schema.showFilters ?? false,
+      striped: activeView?.striped ?? false,
+      bordered: activeView?.bordered ?? false,
+      color: activeView?.color,
     };
 
     // Resolve type-specific options from current named view or active view
+    // Per @objectstack/spec, type-specific config MUST be nested under the view type key
     const viewOptions = currentNamedViewConfig?.options || activeView || {};
 
+    // Dev-mode warning for flat property access violations
+    if (process.env.NODE_ENV === 'development') {
+        const flatKeys = ['startDateField', 'endDateField', 'dateField', 'groupBy', 'groupField',
+            'locationField', 'imageField', 'dependenciesField', 'progressField', 'titleField',
+            'subtitleField', 'latitudeField', 'longitudeField'];
+        const nestedConfig = viewOptions[viewType] || {};
+        const found = flatKeys.filter(k => k in viewOptions && !(k in nestedConfig));
+        if (found.length > 0) {
+            console.warn(
+                `[Spec Compliance] View options use flat properties ${JSON.stringify(found)}. ` +
+                `Move them under options.${viewType} per @objectstack/spec protocol.`
+            );
+        }
+    }
+
     switch (viewType) {
       case 'kanban':
         return {
           type: 'object-kanban',
           ...baseProps,
-          groupBy: viewOptions.kanban?.groupField || viewOptions.groupBy || viewOptions.groupField || 'status',
-          groupField: viewOptions.kanban?.groupField || viewOptions.groupField || 'status',
-          titleField: viewOptions.kanban?.titleField || viewOptions.titleField || 'name',
+          groupBy: viewOptions.kanban?.groupField || 'status',
+          groupField: viewOptions.kanban?.groupField || 'status',
+          titleField: viewOptions.kanban?.titleField || 'name',
           cardFields: baseProps.fields || [],
           ...(viewOptions.kanban || {}),
         };
@@ -603,43 +652,43 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
         return {
           type: 'object-calendar',
           ...baseProps,
-          startDateField: viewOptions.calendar?.startDateField || viewOptions.startDateField || 'start_date',
-          endDateField: viewOptions.calendar?.endDateField || viewOptions.endDateField || 'end_date',
-          titleField: viewOptions.calendar?.titleField || viewOptions.titleField || 'name',
+          startDateField: viewOptions.calendar?.startDateField || 'start_date',
+          endDateField: viewOptions.calendar?.endDateField || 'end_date',
+          titleField: viewOptions.calendar?.titleField || 'name',
           ...(viewOptions.calendar || {}),
         };
       case 'gallery':
         return {
           type: 'object-gallery',
           ...baseProps,
-          imageField: viewOptions.gallery?.imageField || viewOptions.imageField,
-          titleField: viewOptions.gallery?.titleField || viewOptions.titleField || 'name',
-          subtitleField: viewOptions.gallery?.subtitleField || viewOptions.subtitleField,
+          imageField: viewOptions.gallery?.imageField,
+          titleField: viewOptions.gallery?.titleField || 'name',
+          subtitleField: viewOptions.gallery?.subtitleField,
           ...(viewOptions.gallery || {}),
         };
       case 'timeline':
         return {
           type: 'object-timeline',
           ...baseProps,
-          dateField: viewOptions.timeline?.dateField || viewOptions.dateField || 'created_at',
-          titleField: viewOptions.timeline?.titleField || viewOptions.titleField || 'name',
+          dateField: viewOptions.timeline?.dateField || 'created_at',
+          titleField: viewOptions.timeline?.titleField || 'name',
           ...(viewOptions.timeline || {}),
         };
       case 'gantt':
         return {
           type: 'object-gantt',
           ...baseProps,
-          startDateField: viewOptions.gantt?.startDateField || viewOptions.startDateField || 'start_date',
-          endDateField: viewOptions.gantt?.endDateField || viewOptions.endDateField || 'end_date',
-          progressField: viewOptions.gantt?.progressField || viewOptions.progressField || 'progress',
-          dependenciesField: viewOptions.gantt?.dependenciesField || viewOptions.dependenciesField || 'dependencies',
+          startDateField: viewOptions.gantt?.startDateField || 'start_date',
+          endDateField: viewOptions.gantt?.endDateField || 'end_date',
+          progressField: viewOptions.gantt?.progressField || 'progress',
+          dependenciesField: viewOptions.gantt?.dependenciesField || 'dependencies',
           ...(viewOptions.gantt || {}),
         };
       case 'map':
         return {
           type: 'object-map',
           ...baseProps,
-          locationField: viewOptions.map?.locationField || viewOptions.locationField || 'location',
+          locationField: viewOptions.map?.locationField || 'location',
           ...(viewOptions.map || {}),
         };
       default:
@@ -663,6 +712,8 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
     defaultSort: currentNamedViewConfig?.sort || activeView?.sort || schema.table?.defaultSort,
     pageSize: schema.table?.pageSize,
     selectable: schema.table?.selectable,
+    striped: activeView?.striped ?? schema.table?.striped,
+    bordered: activeView?.bordered ?? schema.table?.bordered,
     className: schema.table?.className,
   }), [schema, operations, currentNamedViewConfig, activeView]);
 
@@ -782,7 +833,54 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           fields: currentNamedViewConfig?.columns || activeView?.columns || schema.table?.fields,
           filters: mergedFilters,
           sort: mergedSort,
+          // Propagate appearance/view-config properties for live preview
+          rowHeight: activeView?.rowHeight,
+          densityMode: activeView?.densityMode,
+          groupBy: activeView?.groupBy,
           options: currentNamedViewConfig?.options || activeView,
+          // Propagate toolbar toggle flags
+          showSearch: activeView?.showSearch ?? schema.showSearch,
+          showFilters: activeView?.showFilters ?? schema.showFilters,
+          showSort: activeView?.showSort ?? schema.showSort,
+          showHideFields: activeView?.showHideFields ?? (schema as any).showHideFields,
+          showGroup: activeView?.showGroup ?? (schema as any).showGroup,
+          showColor: activeView?.showColor ?? (schema as any).showColor,
+          showDensity: activeView?.showDensity ?? (schema as any).showDensity,
+          allowExport: activeView?.allowExport ?? (schema as any).allowExport,
+          // Propagate display properties
+          striped: activeView?.striped ?? (schema as any).striped,
+          bordered: activeView?.bordered ?? (schema as any).bordered,
+          color: activeView?.color ?? (schema as any).color,
+          // Propagate view-config properties (Bug 4 / items 14-22)
+          inlineEdit: activeView?.inlineEdit ?? (schema as any).inlineEdit,
+          wrapHeaders: activeView?.wrapHeaders ?? (schema as any).wrapHeaders,
+          clickIntoRecordDetails: activeView?.clickIntoRecordDetails ?? (schema as any).clickIntoRecordDetails,
+          addRecordViaForm: activeView?.addRecordViaForm ?? (schema as any).addRecordViaForm,
+          addDeleteRecordsInline: activeView?.addDeleteRecordsInline ?? (schema as any).addDeleteRecordsInline,
+          collapseAllByDefault: activeView?.collapseAllByDefault ?? (schema as any).collapseAllByDefault,
+          fieldTextColor: activeView?.fieldTextColor ?? (schema as any).fieldTextColor,
+          prefixField: activeView?.prefixField ?? (schema as any).prefixField,
+          showDescription: activeView?.showDescription ?? (schema as any).showDescription,
+          // Propagate new spec properties (P0/P1/P2)
+          navigation: activeView?.navigation ?? (schema as any).navigation,
+          selection: activeView?.selection ?? (schema as any).selection,
+          pagination: activeView?.pagination ?? (schema as any).pagination,
+          searchableFields: activeView?.searchableFields ?? (schema as any).searchableFields,
+          filterableFields: activeView?.filterableFields ?? (schema as any).filterableFields,
+          resizable: activeView?.resizable ?? (schema as any).resizable,
+          hiddenFields: activeView?.hiddenFields ?? (schema as any).hiddenFields,
+          rowActions: activeView?.rowActions ?? (schema as any).rowActions,
+          bulkActions: activeView?.bulkActions ?? (schema as any).bulkActions,
+          sharing: activeView?.sharing ?? (schema as any).sharing,
+          addRecord: activeView?.addRecord ?? (schema as any).addRecord,
+          conditionalFormatting: activeView?.conditionalFormatting ?? (schema as any).conditionalFormatting,
+          quickFilters: activeView?.quickFilters ?? (schema as any).quickFilters,
+          showRecordCount: activeView?.showRecordCount ?? (schema as any).showRecordCount,
+          allowPrinting: activeView?.allowPrinting ?? (schema as any).allowPrinting,
+          virtualScroll: activeView?.virtualScroll ?? (schema as any).virtualScroll,
+          emptyState: activeView?.emptyState ?? (schema as any).emptyState,
+          aria: activeView?.aria ?? (schema as any).aria,
+          tabs: (schema as any).tabs,
         },
         dataSource,
         onEdit: handleEdit,
@@ -871,6 +969,8 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
                 <ViewSwitcher
                   schema={viewSwitcherSchema}
                   onViewChange={handleViewTypeChange}
+                  onCreateView={onCreateView}
+                  onViewAction={onViewAction}
                   className="overflow-x-auto"
                 />
               )}
@@ -895,10 +995,59 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   // Determine which form container to render
   const formLayout = navigationConfig?.mode === 'modal' ? 'modal'
     : navigationConfig?.mode === 'drawer' ? 'drawer'
+    : navigationConfig?.mode === 'split' ? 'split'
+    : navigationConfig?.mode === 'popover' ? 'popover'
     : layout;
 
+  // Build the record detail content for NavigationOverlay (split/popover modes)
+  const renderOverlayDetail = (_record: Record<string, unknown>) => (
+    <div className="space-y-3">
+      <ObjectForm schema={buildFormSchema()} dataSource={dataSource} />
+    </div>
+  );
+
+  // Shared handler for NavigationOverlay onOpenChange — close form when overlay is dismissed
+  const handleOverlayOpenChange = useCallback((open: boolean) => {
+    if (!open) handleFormCancel();
+  }, [handleFormCancel]);
+
+  // For split mode, wrap content inside NavigationOverlay with mainContent
+  if (formLayout === 'split') {
+    const objectLabel = (objectSchema?.label as string) || schema.objectName;
+    return (
+      <div className={cn('flex flex-col h-full min-w-0 overflow-hidden', className)}>
+        {(schema.title || schema.description) && (
+          <div className="mb-4 shrink-0">
+            {schema.title && <h2 className="text-2xl font-bold tracking-tight">{schema.title}</h2>}
+            {schema.description && <p className="text-muted-foreground mt-1">{schema.description}</p>}
+          </div>
+        )}
+        <div className="mb-4 shrink-0">{renderToolbar()}</div>
+        <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
+          {isFormOpen && selectedRecord ? (
+            <NavigationOverlay
+              isOpen={isFormOpen}
+              selectedRecord={selectedRecord}
+              mode="split"
+              close={handleFormCancel}
+              setIsOpen={handleOverlayOpenChange}
+              width={navigationConfig?.width}
+              isOverlay={true}
+              title={`${objectLabel} Detail`}
+              mainContent={<div className="h-full overflow-auto">{renderContent()}</div>}
+            >
+              {renderOverlayDetail}
+            </NavigationOverlay>
+          ) : (
+            renderContent()
+          )}
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className={cn('flex flex-col h-full', className)}>
+    <div className={cn('flex flex-col h-full min-w-0 overflow-hidden', className)}>
       {/* Title and description */}
       {(schema.title || schema.description) && (
         <div className="mb-4 shrink-0">
@@ -917,13 +1066,28 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       </div>
 
       {/* Content */}
-      <div className="flex-1 min-h-0">
+      <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
         {renderContent()}
       </div>
 
       {/* Form (drawer or modal) */}
       {formLayout === 'drawer' && renderDrawerForm()}
       {formLayout === 'modal' && renderModalForm()}
+      {/* Popover mode — uses NavigationOverlay Dialog fallback (no popoverTrigger) */}
+      {formLayout === 'popover' && isFormOpen && selectedRecord && (
+        <NavigationOverlay
+          isOpen={isFormOpen}
+          selectedRecord={selectedRecord}
+          mode="popover"
+          close={handleFormCancel}
+          setIsOpen={handleOverlayOpenChange}
+          width={navigationConfig?.width}
+          isOverlay={true}
+          title={getFormTitle()}
+        >
+          {renderOverlayDetail}
+        </NavigationOverlay>
+      )}
     </div>
   );
 };

package/src/SharedViewLink.tsx

@@ -0,0 +1,199 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import {
+  cn,
+  Button,
+  Badge,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@object-ui/components';
+import { Share2, Copy, Check, Lock, Calendar } from 'lucide-react';
+
+export interface SharedViewLinkProps {
+  /** The object name used in the share URL path */
+  objectName: string;
+  /** Optional view identifier; defaults to "default" */
+  viewId?: string;
+  /** Base URL for the shareable link (defaults to window.location.origin) */
+  baseUrl?: string;
+  /** Callback fired after a share URL is generated */
+  onShare?: (shareUrl: string, options?: { password?: string; expiresAt?: string }) => void;
+  className?: string;
+}
+
+function generateToken(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  // Fallback for environments without crypto.randomUUID
+  if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+  }
+  return Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+}
+
+function buildShareUrl(baseUrl: string, objectName: string, viewId: string, token: string): string {
+  return `${baseUrl}/share/${objectName}/${viewId}?mode=readonly&token=${token}`;
+}
+
+export const SharedViewLink: React.FC<SharedViewLinkProps> = ({
+  objectName,
+  viewId = 'default',
+  baseUrl,
+  onShare,
+  className,
+}) => {
+  const [shareUrl, setShareUrl] = React.useState<string | null>(null);
+  const [copied, setCopied] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [password, setPassword] = React.useState('');
+  const [expiresIn, setExpiresIn] = React.useState('');
+
+  const resolvedBaseUrl = baseUrl ?? (typeof window !== 'undefined' ? window.location.origin : '');
+
+  const handleGenerateLink = React.useCallback(() => {
+    const token = generateToken();
+    const url = buildShareUrl(resolvedBaseUrl, objectName, viewId, token);
+    setShareUrl(url);
+    setCopied(false);
+    const expiresAt = expiresIn ? new Date(Date.now() + parseInt(expiresIn, 10) * 86400000).toISOString() : undefined;
+    onShare?.(url, { password: password || undefined, expiresAt });
+  }, [resolvedBaseUrl, objectName, viewId, onShare, password, expiresIn]);
+
+  const handleCopy = React.useCallback(async () => {
+    if (!shareUrl) return;
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for environments without clipboard API
+      const textarea = document.createElement('textarea');
+      textarea.value = shareUrl;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [shareUrl]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className={cn('gap-2', className)}>
+          <Share2 className="h-4 w-4" />
+          Share
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-96 space-y-4" align="end">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium">Share View</h4>
+            <Badge variant="secondary" className="text-xs">
+              Read-only
+            </Badge>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Generate a public link to share this view. Recipients can view data without logging in.
+          </p>
+        </div>
+
+        {!shareUrl ? (
+          <div className="space-y-3">
+            {/* Password protection */}
+            <div className="space-y-1.5">
+              <label className="flex items-center gap-1.5 text-xs font-medium text-foreground">
+                <Lock className="h-3.5 w-3.5" />
+                Password protection (optional)
+              </label>
+              <Input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter password..."
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* Expiration */}
+            <div className="space-y-1.5">
+              <label className="flex items-center gap-1.5 text-xs font-medium text-foreground">
+                <Calendar className="h-3.5 w-3.5" />
+                Expires after (optional)
+              </label>
+              <select
+                value={expiresIn}
+                onChange={(e) => setExpiresIn(e.target.value)}
+                className="w-full h-8 text-xs rounded-md border border-input bg-background px-3"
+              >
+                <option value="">Never</option>
+                <option value="1">1 day</option>
+                <option value="7">7 days</option>
+                <option value="30">30 days</option>
+                <option value="90">90 days</option>
+              </select>
+            </div>
+
+            <Button onClick={handleGenerateLink} className="w-full gap-2" size="sm">
+              <Share2 className="h-4 w-4" />
+              Generate Link
+            </Button>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-center gap-2">
+              <Input
+                value={shareUrl}
+                readOnly
+                className="h-8 text-xs"
+                onClick={(e) => (e.target as HTMLInputElement).select()}
+              />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopy}
+                className="shrink-0 gap-1"
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-500" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+            {/* Share options indicators */}
+            {(password || expiresIn) && (
+              <div className="flex items-center gap-2 flex-wrap">
+                {password && (
+                  <Badge variant="outline" className="text-xs gap-1">
+                    <Lock className="h-3 w-3" />
+                    Password protected
+                  </Badge>
+                )}
+                {expiresIn && (
+                  <Badge variant="outline" className="text-xs gap-1">
+                    <Calendar className="h-3 w-3" />
+                    Expires in {expiresIn} day{expiresIn !== '1' ? 's' : ''}
+                  </Badge>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};