@tuturuuu/ui 0.11.0 → 0.12.0

package/src/components/ui/storefront/storefront-surface.test.tsx

@@ -1,9 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import type {
+  InventoryBundle,
   InventoryStorefront,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { StorefrontSurface } from './storefront-surface';
 import { formatStorefrontPrice, sanitizeStorefrontAccentColor } from './utils';
 
@@ -65,6 +66,95 @@ const secondListing: InventoryStorefrontListing = {
   unitId: 'unit-2',
 };
 
+const categoryBundle: InventoryBundle = {
+  availableQuantity: 9,
+  categoryCandidateScope: 'all_stock',
+  categoryComponents: [
+    {
+      bundleId: 'bundle-keychains',
+      candidates: [
+        {
+          availableQuantity: 5,
+          componentId: 'component-keychains',
+          listingId: 'listing-keychain-a',
+          price: 1200,
+          productId: 'product-keychain-a',
+          selectionKind: 'listing',
+          title: 'Acrylic Keychain',
+          unitId: 'unit-1',
+          unitName: 'Each',
+          variantId: null,
+          warehouseId: 'warehouse-1',
+          warehouseName: 'Main',
+        },
+        {
+          availableQuantity: 5,
+          componentId: 'component-keychains',
+          listingId: 'listing-keychain-b',
+          price: 900,
+          productId: 'product-keychain-b',
+          selectionKind: 'listing',
+          title: 'Metal Keychain',
+          unitId: 'unit-1',
+          unitName: 'Each',
+          variantId: null,
+          warehouseId: 'warehouse-1',
+          warehouseName: 'Main',
+        },
+        {
+          availableQuantity: 5,
+          componentId: 'component-keychains',
+          listingId: 'listing-keychain-c',
+          price: 1500,
+          productId: 'product-keychain-c',
+          selectionKind: 'listing',
+          title: 'Charm Keychain',
+          unitId: 'unit-1',
+          unitName: 'Each',
+          variantId: null,
+          warehouseId: 'warehouse-1',
+          warehouseName: 'Main',
+        },
+      ],
+      categoryId: 'category-keychains',
+      categoryName: 'Keychains',
+      discountStrategy: 'cheapest_free',
+      freeQuantity: 1,
+      id: 'component-keychains',
+      quantityRequired: 3,
+      sortOrder: 0,
+    },
+  ],
+  components: [],
+  createdAt: '2026-07-03T00:00:00.000Z',
+  description: 'Choose any three keychains.',
+  id: 'bundle-keychains',
+  imageUrl: null,
+  maxPerOrder: 4,
+  name: 'Buy 2 Get 1 Keychains',
+  price: 0,
+  pricingMode: 'selected_items',
+  slug: 'buy-2-get-1-keychains',
+  status: 'active',
+  storefrontId: storefront.id,
+  updatedAt: '2026-07-03T00:00:00.000Z',
+  wsId: storefront.wsId,
+};
+
+const bundleListing: InventoryStorefrontListing = {
+  ...listing,
+  bundleId: categoryBundle.id,
+  id: 'listing-keychain-bundle',
+  listingType: 'bundle',
+  price: 0,
+  productId: null,
+  title: 'Buy 2 Get 1 Keychains',
+  unitId: null,
+  unitName: null,
+  warehouseId: null,
+  warehouseName: null,
+};
+
 describe('StorefrontSurface', () => {
   it('sanitizes hex accent colors only', () => {
     expect(sanitizeStorefrontAccentColor('#abc')).toBe('#aabbcc');
@@ -143,6 +233,49 @@ describe('StorefrontSurface', () => {
     expect(screen.getByRole('button', { name: /Checkout/ })).toBeEnabled();
   });
 
+  it('opens category bundle selection and adds the configured selection to cart', () => {
+    const onAddCartLine = vi.fn();
+
+    render(
+      <StorefrontSurface
+        bundles={[categoryBundle]}
+        listings={[bundleListing]}
+        mode="store"
+        onAddCartLine={onAddCartLine}
+        storefront={storefront}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /Select options/ }));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('0 of 3 selected')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Add' })).toBeDisabled();
+
+    fireEvent.click(screen.getByRole('button', { name: /Acrylic Keychain/ }));
+    fireEvent.click(screen.getByRole('button', { name: /Metal Keychain/ }));
+    fireEvent.click(screen.getByRole('button', { name: /Charm Keychain/ }));
+
+    expect(screen.getByText('3 of 3 selected')).toBeInTheDocument();
+    expect(screen.getByText('$27.00')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Add' }));
+
+    expect(onAddCartLine).toHaveBeenCalledWith(
+      expect.objectContaining({
+        bundleSelections: {
+          'component-keychains': [
+            expect.objectContaining({ listingId: 'listing-keychain-a' }),
+            expect.objectContaining({ listingId: 'listing-keychain-b' }),
+            expect.objectContaining({ listingId: 'listing-keychain-c' }),
+          ],
+        },
+        listingId: bundleListing.id,
+        quantity: 1,
+        selectionKey: expect.stringContaining('component-keychains='),
+      }),
+      5
+    );
+  });
+
   it('keeps long item names and large totals inside the cart row bounds', () => {
     const largeListing: InventoryStorefrontListing = {
       ...listing,

package/src/components/ui/storefront/storefront-surface.tsx

@@ -2,6 +2,7 @@
 
 import { ArrowLeft } from '@tuturuuu/icons';
 import type {
+  InventoryBundle,
   InventoryStorefront,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
@@ -14,6 +15,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../dialog';
+import { StorefrontBundleSelectionDialog } from './bundle-selection-dialog';
 import { StorefrontCartPopover } from './cart-popover';
 import { StorefrontCartSummary } from './cart-summary';
 import { StorefrontCheckoutOverlay } from './checkout-overlay';
@@ -32,7 +34,7 @@ import type {
 import { mergeStorefrontSurfaceLabels } from './types';
 import {
   getAccentStyle,
-  getStorefrontLinePrice,
+  getStorefrontCartLineSubtotal,
   getStorefrontListingLimit,
   getStorefrontVariantLimit,
   sanitizeStorefrontAccentColor,
@@ -42,6 +44,7 @@ import {
 } from './utils';
 
 export function StorefrontSurface({
+  bundles = [],
   buyerDefaults,
   cartLines = [],
   cartHref,
@@ -65,12 +68,14 @@ export function StorefrontSurface({
   onCheckoutSubmit,
   onDecrement,
   onDetailListingChange,
+  onAddCartLine,
   onIncrement,
   onInstantCheckout,
   selectedListingId,
   storefront,
   storefrontHref,
 }: {
+  bundles?: InventoryBundle[];
   buyerDefaults?: StorefrontBuyerDefaults;
   cartLines?: StorefrontCartLine[];
   cartHref?: string;
@@ -93,6 +98,7 @@ export function StorefrontSurface({
   onCheckoutOpenChange?: (open: boolean) => void;
   onCheckoutSubmit?: (formData: FormData) => void;
   onDecrement?: (listingId: string, variantId?: string | null) => void;
+  onAddCartLine?: (line: StorefrontCartLine, maxQuantity?: number) => void;
   onDetailListingChange?: (listingId: string | null) => void;
   onIncrement?: (
     listingId: string,
@@ -106,6 +112,9 @@ export function StorefrontSurface({
 }) {
   const labels = mergeStorefrontSurfaceLabels(labelOverrides);
   const [isCartPopoverOpen, setIsCartPopoverOpen] = useState(false);
+  const [bundleSelectionListingId, setBundleSelectionListingId] = useState<
+    string | null
+  >(null);
   const accentColor = sanitizeStorefrontAccentColor(storefront.accentColor);
   const radius = storefrontRadiusClasses[storefront.cornerStyle];
   const resolveVariant = (
@@ -119,7 +128,14 @@ export function StorefrontSurface({
     const listing = listings.find((item) => item.id === line.listingId);
     if (!listing) return [];
     return [
-      { line, listing, variant: resolveVariant(listing, line.variantId) },
+      {
+        bundle: listing.bundleId
+          ? bundles.find((bundle) => bundle.id === listing.bundleId)
+          : undefined,
+        line,
+        listing,
+        variant: resolveVariant(listing, line.variantId),
+      },
     ];
   });
   const lineLimit = (entry: (typeof cartEntries)[number]) =>
@@ -132,7 +148,13 @@ export function StorefrontSurface({
   const total = checkoutEntries.reduce((sum, entry) => {
     const quantity = Math.min(entry.line.quantity, lineLimit(entry));
     return (
-      sum + getStorefrontLinePrice(entry.listing, entry.variant) * quantity
+      sum +
+      getStorefrontCartLineSubtotal({
+        bundle: entry.bundle,
+        line: { ...entry.line, quantity },
+        listing: entry.listing,
+        variant: entry.variant,
+      })
     );
   }, 0);
   const cartQuantity = cartLines.reduce((sum, line) => sum + line.quantity, 0);
@@ -152,6 +174,14 @@ export function StorefrontSurface({
   const isPreview = mode === 'preview';
   const isCartPage = mode === 'cart';
   const listingRows = visibleListings;
+  const bundleSelectionListing = bundleSelectionListingId
+    ? listings.find((listing) => listing.id === bundleSelectionListingId)
+    : null;
+  const bundleSelectionBundle = bundleSelectionListing?.bundleId
+    ? (bundles.find(
+        (bundle) => bundle.id === bundleSelectionListing.bundleId
+      ) ?? null)
+    : null;
   const currency = storefront.currency ?? 'USD';
   const handleCheckoutOpen = () => {
     setIsCartPopoverOpen(false);
@@ -337,9 +367,14 @@ export function StorefrontSurface({
                     />
                   ) : (
                     listingRows.map((listing) => {
-                      const line = cartLines.find(
-                        (item) => item.listingId === listing.id
-                      );
+                      const listingBundle = listing.bundleId
+                        ? bundles.find(
+                            (bundle) => bundle.id === listing.bundleId
+                          )
+                        : undefined;
+                      const quantity = cartLines
+                        .filter((item) => item.listingId === listing.id)
+                        .reduce((sum, item) => sum + item.quantity, 0);
 
                       return (
                         <StorefrontListingCard
@@ -349,13 +384,18 @@ export function StorefrontSurface({
                           labels={labels}
                           listing={listing}
                           onDecrement={onDecrement}
+                          onConfigureBundle={
+                            listingBundle?.categoryComponents.length
+                              ? () => setBundleSelectionListingId(listing.id)
+                              : undefined
+                          }
                           onIncrement={onIncrement}
                           onOpenDetail={
                             onDetailListingChange
                               ? (id) => onDetailListingChange(id)
                               : undefined
                           }
-                          quantity={line?.quantity ?? 0}
+                          quantity={quantity}
                           radius={radius}
                           showInventoryBadges={storefront.showInventoryBadges}
                           surfaceClassName={
@@ -390,6 +430,25 @@ export function StorefrontSurface({
         surfaceClassName={storefrontSurfaceClasses[storefront.surfaceStyle]}
       />
 
+      <StorefrontBundleSelectionDialog
+        bundle={bundleSelectionBundle}
+        currency={currency}
+        labels={labels}
+        listing={bundleSelectionListing ?? null}
+        onAdd={(line) => {
+          if (!bundleSelectionListing) return;
+          onAddCartLine?.(
+            line,
+            getStorefrontListingLimit(bundleSelectionListing)
+          );
+        }}
+        onOpenChange={(open) => {
+          if (!open) setBundleSelectionListingId(null);
+        }}
+        open={Boolean(bundleSelectionListing && bundleSelectionBundle)}
+        radius={radius}
+      />
+
       <Dialog
         onOpenChange={(open) => onCheckoutOpenChange?.(open)}
         open={isCheckoutDialogOpen}

package/src/components/ui/storefront/types.ts

@@ -1,15 +1,20 @@
 import type {
+  InventoryBundle,
+  InventoryCheckoutBundleSelections,
   InventoryListingVariant,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
 
 export type StorefrontCartLine = {
   listingId: string;
+  bundleSelections?: InventoryCheckoutBundleSelections;
+  selectionKey?: string | null;
   variantId?: string | null;
   quantity: number;
 };
 
 export type StorefrontCartEntry = {
+  bundle?: InventoryBundle;
   line: StorefrontCartLine;
   listing: InventoryStorefrontListing;
   variant?: InventoryListingVariant;
@@ -32,8 +37,10 @@ export type StorefrontSurfaceLabels = {
   available: string;
   browse: string;
   bundle: string;
+  bundleSelectionTitle: string;
   buyNow: string;
   cart: string;
+  cheapestFreePreview: string;
   checkout: string;
   checkoutDisabled: string;
   checkoutDisabledBadge: string;
@@ -45,7 +52,10 @@ export type StorefrontSurfaceLabels = {
   instantCheckout: string;
   orderSummary: string;
   redirectingToCheckout: string;
+  requiredItems: string;
   selectOptions: string;
+  searchBundleItems: string;
+  selectedItems: string;
   viewDetails: string;
   emptyListingsDescription: string;
   emptyListingsTitle: string;
@@ -74,8 +84,10 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   available: 'available',
   browse: 'Browse',
   bundle: 'Bundle',
+  bundleSelectionTitle: 'Build bundle',
   buyNow: 'Buy now',
   cart: 'Cart',
+  cheapestFreePreview: 'Cheapest eligible item is free.',
   checkout: 'Checkout',
   checkoutDisabled: 'Checkout is disabled in preview',
   checkoutDisabledBadge: 'Checkout disabled',
@@ -87,7 +99,10 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   instantCheckout: 'Instant checkout',
   orderSummary: 'Order summary',
   redirectingToCheckout: 'Taking you to secure checkout…',
+  requiredItems: 'Select {count} items',
   selectOptions: 'Select options',
+  searchBundleItems: 'Search items',
+  selectedItems: '{selected} of {required} selected',
   viewDetails: 'View details',
   emptyListingsDescription:
     'Publish a listing to make this storefront ready for buyers.',

package/src/components/ui/storefront/utils.ts

@@ -1,10 +1,14 @@
 import type {
+  InventoryBundle,
+  InventoryBundleCategoryCandidate,
+  InventoryBundleCategoryComponent,
   InventoryListingVariant,
   InventoryStorefront,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
 import { formatMoneyFromMinor } from '@tuturuuu/utils/money';
 import type { CSSProperties } from 'react';
+import type { StorefrontCartLine } from './types';
 
 // The storefront now ships a single, unified design language. The merchant
 // preset fields (cornerStyle/surfaceStyle/themePreset/layoutStyle) are retained
@@ -130,6 +134,163 @@ export function getStorefrontLinePrice(
   return variant ? variant.price : listing.price;
 }
 
+function getCategorySelectionItems(
+  line: StorefrontCartLine,
+  component: InventoryBundleCategoryComponent
+) {
+  const selections = line.bundleSelections;
+  if (!selections) return [];
+
+  if (Array.isArray(selections)) {
+    return (
+      selections.find((selection) => selection.componentId === component.id)
+        ?.items ?? []
+    );
+  }
+
+  return selections[component.id] ?? [];
+}
+
+function getCandidateKey(candidate: InventoryBundleCategoryCandidate) {
+  return [
+    candidate.selectionKind,
+    candidate.listingId ?? '',
+    candidate.variantId ?? '',
+    candidate.productId,
+    candidate.unitId,
+    candidate.warehouseId,
+  ].join(':');
+}
+
+function resolveBundleCandidate(
+  component: InventoryBundleCategoryComponent,
+  item: ReturnType<typeof getCategorySelectionItems>[number]
+) {
+  return component.candidates?.find((candidate) => {
+    if (item.variantId) {
+      return (
+        candidate.variantId === item.variantId &&
+        candidate.listingId === item.listingId
+      );
+    }
+    if (item.listingId) {
+      return candidate.listingId === item.listingId && !candidate.variantId;
+    }
+    return (
+      candidate.productId === item.productId &&
+      candidate.unitId === item.unitId &&
+      candidate.warehouseId === item.warehouseId
+    );
+  });
+}
+
+export function getStorefrontBundleSelectionSubtotal(
+  bundle: InventoryBundle | undefined,
+  line: StorefrontCartLine
+) {
+  if (!bundle?.categoryComponents?.length || !line.bundleSelections) {
+    return null;
+  }
+
+  let subtotal = 0;
+  for (const component of bundle.categoryComponents) {
+    const pricedItems = getCategorySelectionItems(line, component).map(
+      (item) => {
+        const candidate = resolveBundleCandidate(component, item);
+        return candidate
+          ? {
+              candidate,
+              quantity: item.quantity ?? 1,
+            }
+          : null;
+      }
+    );
+
+    if (pricedItems.some((item) => !item)) return null;
+
+    const validPricedItems = pricedItems.filter(
+      (
+        item
+      ): item is {
+        candidate: InventoryBundleCategoryCandidate;
+        quantity: number;
+      } => Boolean(item)
+    );
+
+    let freeRemaining =
+      component.discountStrategy === 'cheapest_free'
+        ? component.freeQuantity * line.quantity
+        : 0;
+
+    for (const pricedItem of validPricedItems.sort(
+      (a, b) => a.candidate.price - b.candidate.price
+    )) {
+      const units = pricedItem.quantity * line.quantity;
+      const freeUnits = Math.min(units, freeRemaining);
+      freeRemaining -= freeUnits;
+      subtotal += (units - freeUnits) * pricedItem.candidate.price;
+    }
+  }
+
+  return subtotal;
+}
+
+export function getStorefrontBundleSelectionLabels(
+  bundle: InventoryBundle | undefined,
+  line: StorefrontCartLine
+) {
+  if (!bundle?.categoryComponents?.length || !line.bundleSelections) return [];
+
+  return bundle.categoryComponents.flatMap((component) =>
+    getCategorySelectionItems(line, component).flatMap((item) => {
+      const candidate = resolveBundleCandidate(component, item);
+      if (!candidate) return [];
+      const quantity = item.quantity ?? 1;
+      return quantity > 1 ? `${quantity}x ${candidate.title}` : candidate.title;
+    })
+  );
+}
+
+export function getStorefrontCartLineSubtotal({
+  bundle,
+  line,
+  listing,
+  variant,
+}: {
+  bundle?: InventoryBundle;
+  line: StorefrontCartLine;
+  listing: InventoryStorefrontListing;
+  variant?: InventoryListingVariant | null;
+}) {
+  const selectedSubtotal = getStorefrontBundleSelectionSubtotal(bundle, line);
+  if (selectedSubtotal != null) return selectedSubtotal;
+
+  return getStorefrontLinePrice(listing, variant) * line.quantity;
+}
+
+export function createStorefrontBundleSelectionKey(
+  bundle: InventoryBundle,
+  selections: NonNullable<StorefrontCartLine['bundleSelections']>
+) {
+  const chunks = bundle.categoryComponents.map((component) => {
+    const items = Array.isArray(selections)
+      ? (selections.find((selection) => selection.componentId === component.id)
+          ?.items ?? [])
+      : (selections[component.id] ?? []);
+    const keys = items
+      .map((item) => {
+        const candidate = resolveBundleCandidate(component, item);
+        return candidate
+          ? `${getCandidateKey(candidate)}@${item.quantity ?? 1}`
+          : JSON.stringify(item);
+      })
+      .sort();
+    return `${component.id}=${keys.join(',')}`;
+  });
+
+  return chunks.join('|');
+}
+
 /** Lowest active-variant price, for a "from {price}" label on variant listings. */
 export function getStorefrontListingFromPrice(
   listing: InventoryStorefrontListing
@@ -145,9 +306,10 @@ export function getStorefrontListingFromPrice(
 /** Stable identity for a cart line so listing+variant combos stay distinct. */
 export function storefrontCartLineKey(
   listingId: string,
-  variantId?: string | null
+  variantId?: string | null,
+  selectionKey?: string | null
 ) {
-  return `${listingId}::${variantId ?? ''}`;
+  return `${listingId}::${variantId ?? ''}::${selectionKey ?? ''}`;
 }
 
 /** Composes a human label for the selected variant from its option values. */

package/src/components/ui/text-editor/__tests__/extensions.test.ts

@@ -1,5 +1,6 @@
 import { generateHTML, generateJSON } from '@tiptap/core';
 import type SupabaseProvider from '@tuturuuu/ui/hooks/supabase-provider';
+import { parseTaskDescriptionInput } from '@tuturuuu/utils/task-description-codec';
 import { describe, expect, it } from 'vitest';
 import * as Y from 'yjs';
 import { getEditorExtensions } from '../extensions';
@@ -157,6 +158,27 @@ describe('text editor extensions', () => {
     expect(html).toContain('#FFF59D');
   });
 
+  it('renders shared markdown-codec table JSON with editor table extensions', () => {
+    const extensions = getEditorExtensions({ readOnly: true });
+    const content = parseTaskDescriptionInput(
+      ['| Field | Value |', '| --- | --- |', '| Owner | Platform |'].join('\n'),
+      'markdown'
+    );
+
+    const html = generateHTML(content, extensions);
+
+    expect(html).toContain('<table');
+    expect(html).toContain('<th');
+    expect(html).toContain('<td');
+    expect(html).toContain('Platform');
+
+    const parsed = generateJSON(html, extensions);
+    expect(parsed.content?.[0]?.type).toBe('table');
+    expect(parsed.content?.[0]?.content?.[0]?.content?.[0]?.type).toBe(
+      'tableHeader'
+    );
+  });
+
   it('round-trips task mention workspace metadata through HTML attrs', () => {
     const renderOutput = (Mention.config as any).renderHTML({
       HTMLAttributes: {

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-list-selector.tsx

@@ -5,7 +5,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { type ComponentProps, useMemo, useState } from 'react';
 import { CreateListDialog } from '../../create-list-dialog';
 import { translateTaskListNameForDisplay } from '../../utils/translate-task-list-display-name';
 import { TaskListPickerPanel } from './task-list-picker-panel';
@@ -23,7 +23,14 @@ interface TaskListSelectorProps {
   compact?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  onPopoverCloseAutoFocus?: ComponentProps<
+    typeof PopoverContent
+  >['onCloseAutoFocus'];
+  onPopoverInteractOutside?: ComponentProps<
+    typeof PopoverContent
+  >['onInteractOutside'];
   onListChange: (listId: string) => void;
+  propertyPopoverId?: string;
 }
 
 export function TaskListSelector({
@@ -35,7 +42,10 @@ export function TaskListSelector({
   compact = false,
   open,
   onOpenChange,
+  onPopoverCloseAutoFocus,
+  onPopoverInteractOutside,
   onListChange,
+  propertyPopoverId,
 }: TaskListSelectorProps) {
   const t = useTranslations();
   const [uncontrolledPopoverOpen, setUncontrolledPopoverOpen] = useState(false);
@@ -80,6 +90,7 @@ export function TaskListSelector({
   const triggerButton = (
     <button
       type="button"
+      data-task-property-popover-trigger={propertyPopoverId}
       disabled={disabled}
       aria-label={compact ? triggerLabel : undefined}
       className={cn(
@@ -111,7 +122,12 @@ export function TaskListSelector({
         ) : (
           <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
         )}
-        <PopoverContent align="start" className="w-80 p-0">
+        <PopoverContent
+          align="start"
+          className="w-80 p-0"
+          onCloseAutoFocus={onPopoverCloseAutoFocus}
+          onInteractOutside={onPopoverInteractOutside}
+        >
           <TaskListPickerPanel
             selectedListId={selectedListId}
             availableLists={availableLists}