@spree/dashboard-ui 0.13.0 → 1.0.0-beta.1

package/README.md

@@ -11,7 +11,7 @@ Spree Dashboard design system. Shadcn primitives + headless composed components
 - `src/styles.css` — design tokens + Tailwind theme. Import once from your Vite app.
 - `src/lib/` — generic helpers (`cn`, formatters, …).
 
-The headless rule is what makes the components composable from outside `@spree/dashboard` — a plugin author, an app developer building a vendor panel, or a third-party using just `@spree/dashboard-ui` can all instantiate the same components with their own data sources.
+The headless rule is what makes the components composable from outside `@spree/dashboard` — a plugin author, an app developer building a seller panel, or a third-party using just `@spree/dashboard-ui` can all instantiate the same components with their own data sources.
 
 ## Source-only package
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "0.13.0",
+  "version": "1.0.0-beta.1",
   "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup. Developer Preview.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -24,6 +24,7 @@
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./icons": "./src/spree/icons.ts",
     "./styles.css": "./src/styles.css",
     "./ui/*": "./src/ui/*.tsx",
     "./spree/*": "./src/spree/*.tsx",
@@ -42,7 +43,8 @@
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.75.0",
-    "react-i18next": "^17.0.8"
+    "react-i18next": "^17.0.8",
+    "tailwindcss": "^4.2.4"
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
@@ -52,10 +54,11 @@
     "@fontsource-variable/geist": "^5.2.8",
     "@fontsource-variable/geist-mono": "^5.2.7",
     "@tanstack/react-table": "^8.21.3",
-    "@tiptap/extension-link": "^3.22.5",
-    "@tiptap/extension-placeholder": "^3.22.5",
-    "@tiptap/react": "^3.22.5",
-    "@tiptap/starter-kit": "^3.22.5",
+    "@tiptap/extension-image": "^3.31.3",
+    "@tiptap/extension-link": "^3.31.3",
+    "@tiptap/extension-placeholder": "^3.31.3",
+    "@tiptap/react": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
     "@uiw/react-json-view": "^1.12",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -64,18 +67,21 @@
     "date-fns-tz": "^3.2.0",
     "flag-icons": "^7.5.0",
     "lucide-react": "^1.14.0",
+    "maplibre-gl": "6.4.1",
     "react-colorful": "^5.7.0",
     "react-day-picker": "^9.14.0",
     "recharts": "^3.8.1",
-    "shadcn": "^4.7.0",
-    "sonner": "^2.0.7",
+    "shadcn": "^4.21.0",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@types/geojson": "^7946.0.16",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "typescript": "~6.0.3"
+    "tailwindcss": "^4.2.4",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.16"
   },
   "scripts": {
     "lint": "biome check src",

package/src/hooks/use-prefers-reduced-motion.ts

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+/**
+ * Tracks the user's `prefers-reduced-motion` setting, live.
+ *
+ * For motion that CSS alone can't soften. Suppressing a transition in CSS
+ * turns a slide into a jump, which is the opposite of what the setting asks
+ * for; reading the preference here lets a component drop the movement
+ * altogether and simply hold its position.
+ *
+ * Starts `false` so a future SSR render and the first client paint agree; the
+ * effect resyncs on mount.
+ */
+export function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const onChange = () => setPrefersReducedMotion(mql.matches)
+    onChange()
+    mql.addEventListener('change', onChange)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return prefersReducedMotion
+}

package/src/hooks/use-scrolled.ts

@@ -1,18 +1,28 @@
 import * as React from 'react'
 
 /**
- * Returns true once the document has been scrolled past `threshold` pixels
- * from the top, false at rest. Used to fade in subtle elevation on sticky
- * headers, top bars, etc. so they don't look heavy when nothing is scrolled
- * behind them.
+ * Returns true once the page has been scrolled past `threshold` pixels from
+ * the top, false at rest. Used to fade in subtle elevation on sticky headers
+ * so they don't look heavy when nothing is scrolled behind them.
  *
- * Listens passively to `window` scroll. Default threshold is 4px to avoid
- * flickering at the boundary on devices that report fractional scroll
- * positions. Initial value is computed synchronously on mount so the first
- * paint matches the actual scroll position (e.g., after browser scroll
- * restoration on navigation).
+ * Listens on the document in the capture phase rather than on `window`, and
+ * reads the offset from whichever element actually scrolled. The shell's
+ * content is an inset sheet that scrolls internally, so `window.scrollY` stays
+ * 0 there for the whole life of the page — a window listener would report "not
+ * scrolled" no matter how far down a long form the user went. Scroll events do
+ * not bubble, which is why this has to capture.
+ *
+ * Default threshold is 4px to avoid flickering at the boundary on devices that
+ * report fractional scroll positions.
+ *
+ * @param threshold Scroll offset, in pixels, at which the state flips to true.
+ * @param releaseThreshold Offset the user must scroll back above before it
+ *   flips to false again. Defaults to `threshold` (no hysteresis). Set it
+ *   lower than `threshold` when the flag drives motion: a single boundary
+ *   makes a slow scroll across it toggle repeatedly, and anything animating
+ *   off this flag then flickers.
  */
-export function useScrolled(threshold = 4) {
+export function useScrolled(threshold = 4, releaseThreshold = threshold) {
   // Always start `false` so a future SSR render and the first client paint
   // agree (no hydration mismatch). The effect below resyncs against the
   // actual scroll position on mount, so any restored scroll position is
@@ -20,11 +30,21 @@ export function useScrolled(threshold = 4) {
   const [scrolled, setScrolled] = React.useState(false)
 
   React.useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > threshold)
+    const onScroll = (event?: Event) => {
+      // The scrolled element for a container, `window.scrollY` for the page.
+      const target = event?.target
+      const offset = target instanceof HTMLElement ? target.scrollTop : window.scrollY
+
+      // Reading the previous value here (rather than from a dependency) keeps
+      // the listener stable while still letting the two thresholds apply
+      // directionally: past `threshold` to engage, back above
+      // `releaseThreshold` to disengage.
+      setScrolled((wasScrolled) => (wasScrolled ? offset > releaseThreshold : offset > threshold))
+    }
     onScroll()
-    window.addEventListener('scroll', onScroll, { passive: true })
-    return () => window.removeEventListener('scroll', onScroll)
-  }, [threshold])
+    document.addEventListener('scroll', onScroll, { capture: true, passive: true })
+    return () => document.removeEventListener('scroll', onScroll, { capture: true })
+  }, [threshold, releaseThreshold])
 
   return scrolled
 }

package/src/index.ts

@@ -13,27 +13,52 @@
 
 export * from './hooks/use-copy-to-clipboard'
 export { useIsMobile } from './hooks/use-mobile'
+export * from './hooks/use-prefers-reduced-motion'
 export * from './hooks/use-scrolled'
 // ---------------------------------------------------------------------------
 // Helpers + hooks
 // ---------------------------------------------------------------------------
+export {
+  type DateRangePresetKey,
+  matchDateRangePreset,
+  resolveDateRangePreset,
+} from './lib/date-range-presets'
+export { sameRichText, shouldEmitRichTextChange } from './lib/same-rich-text'
 export { cn } from './lib/utils'
 export { requiredMessage } from './lib/validation-messages'
 // ---------------------------------------------------------------------------
 // Spree composed components — headless, accept data via props
 // ---------------------------------------------------------------------------
 export * from './spree/address-block'
+export * from './spree/address-book-row'
+export * from './spree/address-map'
 export * from './spree/back-button'
 export * from './spree/bulk-dialog'
 export * from './spree/bulk-price-table'
+export * from './spree/bulk-variants-table'
 export * from './spree/calculator-summary'
+export * from './spree/claim-resolve-dialog'
 export * from './spree/color-picker'
 export * from './spree/confirm-dialog'
 export * from './spree/copy-to-clipboard-button'
 export * from './spree/country-flag'
 export * from './spree/data-grid'
+export * from './spree/delivery-form-dialog'
 export * from './spree/drag-handle'
+export * from './spree/editable-note-card'
+export * from './spree/file-type-icon'
 export * from './spree/form-actions'
+export * from './spree/form-section'
+export * from './spree/fulfill-items-form'
+export * from './spree/fulfillment-edit-dialog'
+export * from './spree/fulfillment-item-list'
+export * from './spree/fulfillment-panel'
+export * from './spree/label-upload-dialog'
+export * from './spree/order-cancel-dialog'
+export * from './spree/post-sale-create-dialogs'
+export * from './spree/post-sale-fields'
+export * from './spree/quantity-tier-editor'
+export * from './spree/return-dialogs'
 
 // JsonPreviewDrawer and JsonValueView are intentionally NOT re-exported from
 // this barrel: they pull in `@uiw/react-json-view` (~30KB gzip), and
@@ -42,8 +67,11 @@ export * from './spree/form-actions'
 // `@spree/dashboard-ui/spree/json-value-view`. Types are available the same
 // way — `import { type JsonPreviewDrawerProps } from '@spree/dashboard-ui/spree/json-preview-drawer'`.
 
+export * from './spree/external-link'
 export * from './spree/language-menu-items'
 export * from './spree/metadata/metadata-card'
+export * from './spree/product-membership-list'
+export * from './spree/products/status-card'
 export * from './spree/relative-time'
 export * from './spree/resource-combobox'
 export * from './spree/resource-layout'
@@ -52,14 +80,19 @@ export * from './spree/resource-name-cell'
 export * from './spree/route-error-boundary'
 export * from './spree/row-actions'
 export * from './spree/row-click-bridge'
+export * from './spree/search-input'
 export * from './spree/secret-input'
 export * from './spree/storefront-visible-switch'
 export * from './spree/tag-list'
+export * from './spree/tax-identifiers-card'
 export * from './spree/theme-provider'
 export * from './spree/theme-toggle'
+export * from './spree/wizard'
 // ---------------------------------------------------------------------------
 // UI primitives (shadcn) — see ./ui/*
 // ---------------------------------------------------------------------------
+export * from './ui/accordion'
+export * from './ui/alert'
 export * from './ui/attachment'
 export * from './ui/avatar'
 export * from './ui/badge'
@@ -72,6 +105,7 @@ export * from './ui/checkbox'
 export * from './ui/collapsible'
 export * from './ui/combobox'
 export * from './ui/command'
+export * from './ui/context-menu'
 export * from './ui/data-table'
 export * from './ui/date-picker'
 export * from './ui/date-range-picker'
@@ -82,18 +116,22 @@ export * from './ui/field'
 export * from './ui/input'
 export * from './ui/input-group'
 export * from './ui/label'
+export * from './ui/media-preview'
 export * from './ui/pagination'
 export * from './ui/popover'
 export * from './ui/progress'
 export * from './ui/radio-group'
 export * from './ui/rich-text-editor'
+export * from './ui/scroll-area'
 export * from './ui/select'
 export * from './ui/separator'
 export * from './ui/sheet'
 export * from './ui/sidebar'
 export * from './ui/skeleton'
 export * from './ui/slot'
-export * from './ui/sonner'
 export * from './ui/switch'
+export * from './ui/tabs'
 export * from './ui/textarea'
+export * from './ui/thumbnail'
+export * from './ui/toast'
 export * from './ui/tooltip'

package/src/lib/date-range-presets.ts

@@ -0,0 +1,79 @@
+import { format, startOfMonth, startOfYear, subDays } from 'date-fns'
+import { toZonedTime } from 'date-fns-tz'
+
+/**
+ * Named ranges the date-range picker offers. `custom` is a hand-picked
+ * span that no named entry produces today.
+ */
+export type DateRangePresetKey = '7d' | '14d' | '30d' | '90d' | 'this_month' | 'ytd' | 'custom'
+
+export const DATE_RANGE_PRESET_KEYS: Exclude<DateRangePresetKey, 'custom'>[] = [
+  '7d',
+  '14d',
+  '30d',
+  '90d',
+  'this_month',
+  'ytd',
+]
+
+export interface CalendarDateRange {
+  from: Date
+  to: Date
+}
+
+/**
+ * Resolve a named range on the given calendar.
+ *
+ * "Last N days" is inclusive of today — last 30 days is 30 dates, so the
+ * start is 29 days back. The timezone argument is the merchant's zone:
+ * these ranges are relative to *now* where they trade, not where the
+ * browser happens to be.
+ */
+export function resolveDateRangePreset(
+  preset: Exclude<DateRangePresetKey, 'custom'>,
+  timezone: string,
+): CalendarDateRange {
+  const now = toZonedTime(new Date(), timezone)
+
+  switch (preset) {
+    case '7d':
+      return { from: subDays(now, 6), to: now }
+    case '14d':
+      return { from: subDays(now, 13), to: now }
+    case '30d':
+      return { from: subDays(now, 29), to: now }
+    case '90d':
+      return { from: subDays(now, 89), to: now }
+    case 'this_month':
+      return { from: startOfMonth(now), to: now }
+    case 'ytd':
+      return { from: startOfYear(now), to: now }
+  }
+}
+
+/**
+ * Recognise which named range a pair of dates came from, so a picker that
+ * remounts (or is given a range from outside) re-selects its menu entry
+ * instead of always reading as the default.
+ *
+ * Matching by calendar day rather than storing the key keeps the value a
+ * plain range — the preset is a way of writing dates, not a second piece
+ * of state that can drift. A range that no longer matches any preset
+ * (yesterday's "last 7 days", reopened today) correctly reads as custom.
+ */
+export function matchDateRangePreset(
+  range: CalendarDateRange,
+  timezone: string,
+): DateRangePresetKey {
+  const from = dayKey(range.from)
+  const to = dayKey(range.to)
+  for (const key of DATE_RANGE_PRESET_KEYS) {
+    const candidate = resolveDateRangePreset(key, timezone)
+    if (dayKey(candidate.from) === from && dayKey(candidate.to) === to) return key
+  }
+  return 'custom'
+}
+
+function dayKey(date: Date): string {
+  return format(date, 'yyyy-MM-dd')
+}

package/src/lib/same-rich-text.ts

@@ -0,0 +1,145 @@
+/**
+ * Whether two rich-text strings are the same content after TipTap-style
+ * normalization. The editor wraps bare text in `<p>` and emits empty
+ * paragraphs (`<p></p>`, `<p><br></p>`) on mount — those must not count as
+ * an edit against a stored plain-text or empty baseline.
+ *
+ * Implemented with linear scans so a long string of empty paragraphs cannot
+ * trip a polynomial regular expression (CodeQL js/polynomial-redos).
+ */
+export function sameRichText(left: string, right: string): boolean {
+  return canonicalizeRichText(left) === canonicalizeRichText(right)
+}
+
+/**
+ * Whether the editor should call `onChange` for `next` given the last stored
+ * `previous` value. Mount wrapping (`''` → `<p></p>`, bare text → `<p>…</p>`)
+ * is ignored. A user pressing Enter is not: that adds an empty paragraph
+ * `sameRichText` would otherwise treat as noise.
+ */
+export function shouldEmitRichTextChange(next: string, previous: string): boolean {
+  if (next === previous) return false
+  if (!sameRichText(next, previous)) return true
+  if (!visibleText(previous) && !hasImage(previous)) return false
+
+  const previousHtml = looksLikeHtml(previous.trim()) ? previous : `<p>${previous}</p>`
+  return countParagraphs(next) !== countParagraphs(previousHtml)
+}
+
+function canonicalizeRichText(html: string): string {
+  const withoutTrailingEmpty = stripTrailingEmptyParagraphs((html ?? '').trim())
+  if (!visibleText(withoutTrailingEmpty) && !hasImage(withoutTrailingEmpty)) return ''
+  if (!looksLikeHtml(withoutTrailingEmpty)) return `<p>${withoutTrailingEmpty}</p>`
+  return withoutTrailingEmpty
+}
+
+function stripTrailingEmptyParagraphs(html: string): string {
+  let end = html.length
+
+  while (end > 0) {
+    while (end > 0 && isAsciiWhitespace(html.charCodeAt(end - 1))) end -= 1
+    if (!html.slice(0, end).toLowerCase().endsWith('</p>')) break
+
+    const open = html.lastIndexOf('<p>', end - 4)
+    if (open === -1 || open > end - 4) break
+
+    const inner = html.slice(open + 3, end - 4).trim()
+    if (inner === '' || isBreakOnly(inner) || isNbspOnly(inner)) {
+      end = open
+      continue
+    }
+    break
+  }
+
+  return html.slice(0, end).trim()
+}
+
+function isBreakOnly(inner: string): boolean {
+  const lower = inner.toLowerCase()
+  return lower === '<br>' || lower === '<br/>' || lower === '<br />'
+}
+
+function isNbspOnly(inner: string): boolean {
+  return inner.replace(/&nbsp;/gi, '').trim() === ''
+}
+
+function isAsciiWhitespace(charCode: number): boolean {
+  return charCode === 32 || charCode === 9 || charCode === 10 || charCode === 13
+}
+
+function looksLikeHtml(value: string): boolean {
+  const start = value.search(/<\/?[a-z]/i)
+  if (start === -1) return false
+  return value.indexOf('>', start) !== -1
+}
+
+/** TipTap's image button can produce a paragraph that has no text. */
+function hasImage(html: string): boolean {
+  const lower = html.toLowerCase()
+  let index = 0
+  while (index < lower.length) {
+    const open = lower.indexOf('<img', index)
+    if (open === -1) return false
+    const after = lower.charCodeAt(open + 4)
+    if (
+      Number.isNaN(after) ||
+      after === 32 ||
+      after === 9 ||
+      after === 10 ||
+      after === 13 ||
+      after === 47 ||
+      after === 62
+    ) {
+      return true
+    }
+    index = open + 4
+  }
+  return false
+}
+
+function countParagraphs(html: string): number {
+  const lower = (html ?? '').toLowerCase()
+  let count = 0
+  let index = 0
+  while (index < lower.length) {
+    const open = lower.indexOf('<p', index)
+    if (open === -1) return count
+    const after = lower.charCodeAt(open + 2)
+    if (
+      Number.isNaN(after) ||
+      after === 32 ||
+      after === 9 ||
+      after === 10 ||
+      after === 13 ||
+      after === 62
+    ) {
+      count += 1
+    }
+    index = open + 2
+  }
+  return count
+}
+
+function visibleText(html: string): string {
+  let text = ''
+  let index = 0
+  while (index < html.length) {
+    const open = html.indexOf('<', index)
+    if (open === -1) {
+      text += html.slice(index)
+      break
+    }
+    text += html.slice(index, open)
+    const close = html.indexOf('>', open + 1)
+    if (close === -1) {
+      text += html.slice(open)
+      break
+    }
+    text += ' '
+    index = close + 1
+  }
+  return text
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}

package/src/spree/address-block.tsx

@@ -13,7 +13,7 @@ export interface AddressBlockValue {
   city?: string | null
   state_text?: string | null
   postal_code?: string | null
-  country_iso?: string | null
+  country_code?: string | null
   country_name?: string | null
   phone?: string | null
 }
@@ -43,13 +43,14 @@ export function AddressBlock({
   title,
   address,
 }: {
-  title: string
+  /** Omitted where the surrounding card already names the address. */
+  title?: string
   address: AddressBlockValue | null | undefined
 }) {
   const { t, i18n } = useTranslation()
   return (
     <div>
-      <h6 className="font-semibold text-sm mb-1.5">{title}</h6>
+      {title && <h6 className="font-semibold text-sm mb-1.5">{title}</h6>}
       {address ? (
         <div className="text-sm text-muted-foreground flex flex-col gap-0.5">
           <div>{address.full_name}</div>
@@ -60,7 +61,7 @@ export function AddressBlock({
             {[address.city, address.state_text, address.postal_code].filter(Boolean).join(', ')}
           </div>
           <div>
-            {localizedCountryName(i18n.language, address.country_iso, address.country_name)}
+            {localizedCountryName(i18n.language, address.country_code, address.country_name)}
           </div>
           {address.phone && <div>{address.phone}</div>}
         </div>

package/src/spree/address-book-row.tsx

@@ -0,0 +1,96 @@
+import { useTranslation } from 'react-i18next'
+import { Badge } from '../ui/badge'
+import { Button } from '../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import { AddressBlock, type AddressBlockValue } from './address-block'
+import { EllipsisVerticalIcon, PencilIcon, TrashIcon } from './icons'
+
+/** What every address book row needs, whoever owns the book. */
+export interface AddressBookEntry extends AddressBlockValue {
+  id: string
+  label?: string | null
+  is_default_billing?: boolean | null
+  is_default_shipping?: boolean | null
+}
+
+/**
+ * One row of an address book — the labelled address, which defaults it holds,
+ * and the actions on it behind a menu.
+ *
+ * Shared so a customer's book and a company node's read the same: they are the
+ * same thing seen from different owners, and a merchant moving between them
+ * should not have to learn two layouts.
+ */
+export function AddressBookRow({
+  address,
+  canEdit = true,
+  onEdit,
+  onRemove,
+  onSetDefaultBilling,
+  onSetDefaultShipping,
+}: {
+  address: AddressBookEntry
+  canEdit?: boolean
+  onEdit: () => void
+  onRemove: () => void
+  /** Omit either to hide that action — a book with one address has no choice. */
+  onSetDefaultBilling?: () => void
+  onSetDefaultShipping?: () => void
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex items-start justify-between gap-2 rounded-md border p-3">
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="flex flex-wrap items-center gap-2">
+          {address.label && (
+            <span className="font-medium text-foreground text-sm">{address.label}</span>
+          )}
+          {address.is_default_billing && (
+            <Badge variant="outline">{t('admin.address_book.default_billing')}</Badge>
+          )}
+          {address.is_default_shipping && (
+            <Badge variant="outline">{t('admin.address_book.default_shipping')}</Badge>
+          )}
+        </span>
+        <AddressBlock address={address} />
+      </div>
+
+      {canEdit && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon-xs" className="shrink-0">
+              <EllipsisVerticalIcon className="size-4" />
+              <span className="sr-only">{t('admin.actions.actions_menu')}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={onEdit}>
+              <PencilIcon className="size-4" />
+              {t('admin.actions.edit')}
+            </DropdownMenuItem>
+            {onSetDefaultBilling && !address.is_default_billing && (
+              <DropdownMenuItem onClick={onSetDefaultBilling}>
+                {t('admin.address_book.set_default_billing')}
+              </DropdownMenuItem>
+            )}
+            {onSetDefaultShipping && !address.is_default_shipping && (
+              <DropdownMenuItem onClick={onSetDefaultShipping}>
+                {t('admin.address_book.set_default_shipping')}
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuItem variant="destructive" onClick={onRemove}>
+              <TrashIcon className="size-4" />
+              {t('admin.actions.delete')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  )
+}