@alfakit/react 0.1.8 → 0.1.10

package/dist/components/panel/app-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.js","names":[],"sources":["../../../src/components/panel/app-sidebar.tsx"],"sourcesContent":["import {\n  PREFETCH_CACHE_FOR,\n  flattenNavigationItems,\n  hasActiveNavigationItem,\n  navigationItemText,\n  type NavigationGroupSchema,\n  type NavigationItemSchema,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { ChevronRightIcon } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { NotificationsMenu } from '../notifications/notifications-menu'\nimport { Badge } from '../ui/badge'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '../ui/sidebar'\nimport { Brand } from './brand'\nimport { GlobalSearch } from './global-search'\nimport { NavLabel } from './nav-label'\nimport { Slot } from './slot'\nimport { TenantMenu } from './tenant-menu'\nimport { UserMenu } from './user-menu'\n\nexport { Brand } from './brand'\n\nfunction NavBadge({ item }: { item: NavigationItemSchema }) {\n  const t = useT()\n\n  // `deferNavigationBadges()`: a placeholder until the deferred badges arrive.\n  if (item.badgePending) {\n    return (\n      <span\n        data-slot=\"badge\"\n        aria-busy=\"true\"\n        aria-label={t('loading', {}, 'Loading')}\n        className=\"bg-muted-foreground/20 ms-auto inline-block h-4 w-5 animate-pulse rounded-md\"\n      />\n    )\n  }\n\n  if (item.badge === undefined || item.badge === null) return null\n\n  return (\n    <Badge\n      variant=\"outline\"\n      className={cn('ms-auto px-1.5 py-0', colorClass(badgeColorClasses, item.badgeColor, 'gray'))}\n      title={item.badgeTooltip}\n    >\n      {item.badge}\n    </Badge>\n  )\n}\n\n/**\n * A navigation link: an Inertia link, or a plain anchor for `openUrlInNewTab()`. Used as an\n * `asChild` target, so it must pass on the classes, data attributes and handlers it receives.\n */\nfunction NavLink({\n  item,\n  children,\n  ...props\n}: { item: NavigationItemSchema; children: ReactNode } & Omit<\n  ComponentProps<'a'>,\n  'href' | 'children'\n>) {\n  // `NavigationItem::extraAttributes()`; `class` is merged with the link's own.\n  const attributes = {\n    ...props,\n    ...extraProps(item.extraAttributes, props.className),\n  } as ComponentProps<'a'>\n\n  return item.openInNewTab ? (\n    <a {...attributes} href={item.url} target=\"_blank\" rel=\"noopener noreferrer\">\n      {children}\n      <NewTabHint />\n    </a>\n  ) : (\n    // Slot passes DOM props; Inertia's Link redefines a few event names, so pass them through untyped.\n    <Link\n      {...(attributes as Record<string, unknown>)}\n      href={item.url ?? '#'}\n      prefetch\n      cacheFor={PREFETCH_CACHE_FOR}\n    >\n      {children}\n    </Link>\n  )\n}\n\n/** Child items (any depth) with their own badges, new-tab links and nested children. */\nfunction NavSubItem({ item }: { item: NavigationItemSchema }) {\n  if (item.children && item.children.length > 0) {\n    return (\n      <SidebarMenuSubItem>\n        <Collapsible defaultOpen={item.active} className=\"group/nav-sub\">\n          <CollapsibleTrigger asChild>\n            <SidebarMenuSubButton asChild isActive={item.active}>\n              <button type=\"button\" {...extraProps(item.extraAttributes, 'w-full')}>\n                {item.icon && <Icon name={item.icon} />}\n                <NavLabel item={item} />\n                <NavBadge item={item} />\n                <ChevronRightIcon className=\"ms-auto transition-transform duration-200 group-data-[state=open]/nav-sub:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/nav-sub:rotate-90\" />\n              </button>\n            </SidebarMenuSubButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              {item.children.map((child) => (\n                <NavSubItem key={child.label} item={child} />\n              ))}\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </Collapsible>\n      </SidebarMenuSubItem>\n    )\n  }\n\n  return (\n    <SidebarMenuSubItem>\n      <SidebarMenuSubButton asChild isActive={item.active}>\n        <NavLink item={item}>\n          {item.icon && <Icon name={item.icon} />}\n          <NavLabel item={item} />\n          <NavBadge item={item} />\n        </NavLink>\n      </SidebarMenuSubButton>\n    </SidebarMenuSubItem>\n  )\n}\n\nfunction NavItem({ item }: { item: NavigationItemSchema }) {\n  if (item.children && item.children.length > 0) {\n    return (\n      <Collapsible asChild defaultOpen={item.active} className=\"group/collapsible\">\n        <SidebarMenuItem>\n          <CollapsibleTrigger asChild>\n            <SidebarMenuButton\n              tooltip={navigationItemText(item)}\n              isActive={item.active}\n              {...extraProps(item.extraAttributes)}\n            >\n              {item.icon && <Icon name={item.icon} />}\n              <NavLabel item={item} />\n              <NavBadge item={item} />\n              <ChevronRightIcon className=\"ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              {item.children.map((child) => (\n                <NavSubItem key={child.label} item={child} />\n              ))}\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <SidebarMenuButton asChild isActive={item.active} tooltip={navigationItemText(item)}>\n        <NavLink item={item}>\n          {item.icon && <Icon name={item.icon} />}\n          <NavLabel item={item} />\n          <NavBadge item={item} />\n        </NavLink>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  )\n}\n\n/** A group's items in its flyout menu, children indented under their parent. */\nfunction FlyoutItems({ items }: { items: NavigationItemSchema[] }) {\n  return flattenNavigationItems(items).map(({ item, depth }, index) => (\n    <DropdownMenuItem\n      key={`${depth}-${item.label}-${index}`}\n      asChild\n      data-active={item.active ? 'true' : undefined}\n    >\n      <NavLink\n        item={item}\n        aria-current={item.active ? 'page' : undefined}\n        className={cn(\n          'data-[active=true]:bg-accent data-[active=true]:font-medium',\n          depth === 1 && 'ps-6',\n          depth > 1 && 'ps-9',\n        )}\n      >\n        {item.icon && <Icon name={item.icon} />}\n        <NavLabel item={item} className=\"truncate\" />\n        <NavBadge item={item} />\n      </NavLink>\n    </DropdownMenuItem>\n  ))\n}\n\n/**\n * In the icon-only (collapsed) sidebar, a group with an icon is one button that opens its\n * items in a flyout menu, like Filament. Hidden while the sidebar is expanded.\n */\nfunction NavGroupFlyout({ group }: { group: NavigationGroupSchema }) {\n  const direction = useDirection()\n  const active = hasActiveNavigationItem(group.items)\n\n  return (\n    <SidebarMenu className=\"hidden group-data-[collapsible=icon]:flex\" data-nav-flyout=\"\">\n      <SidebarMenuItem>\n        <DropdownMenu dir={direction}>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton isActive={active}>\n              <Icon name={group.icon!} />\n              <span>{group.label}</span>\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            side={direction === 'rtl' ? 'left' : 'right'}\n            align=\"start\"\n            className=\"min-w-56\"\n          >\n            <DropdownMenuLabel>{group.label}</DropdownMenuLabel>\n            <FlyoutItems items={group.items} />\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction NavGroup({ group }: { group: NavigationGroupSchema }) {\n  // `NavigationGroup::extraSidebarAttributes()`; `class` is merged with the group's own.\n  const attributes = extraProps(group.extraSidebarAttributes)\n  // A labelled group with an icon collapses into a flyout in the icon-only sidebar.\n  const flyout = Boolean(group.label && group.icon)\n  const content = (\n    <SidebarGroupContent className={cn(flyout && 'group-data-[collapsible=icon]:hidden')}>\n      <SidebarMenu>\n        {group.items.map((item) => (\n          <NavItem key={item.label} item={item} />\n        ))}\n      </SidebarMenu>\n    </SidebarGroupContent>\n  )\n  const flyoutMenu = flyout ? <NavGroupFlyout group={group} /> : null\n\n  if (!group.label) {\n    return <SidebarGroup {...attributes}>{content}</SidebarGroup>\n  }\n\n  if (!group.collapsible) {\n    return (\n      <SidebarGroup {...attributes}>\n        <SidebarGroupLabel>\n          {group.icon && <Icon name={group.icon} className=\"me-1.5\" />}\n          {group.label}\n        </SidebarGroupLabel>\n        {content}\n        {flyoutMenu}\n      </SidebarGroup>\n    )\n  }\n\n  return (\n    <Collapsible\n      defaultOpen={!group.collapsed || group.items.some((item) => item.active)}\n      className=\"group/nav-group\"\n    >\n      <SidebarGroup {...attributes}>\n        <CollapsibleTrigger asChild>\n          <SidebarGroupLabel\n            asChild\n            className=\"hover:bg-sidebar-accent w-full cursor-pointer justify-between\"\n          >\n            <button type=\"button\">\n              <span className=\"flex items-center gap-1.5\">\n                {group.icon && <Icon name={group.icon} />}\n                {group.label}\n              </span>\n              <Icon\n                name=\"alfakit::panels.sidebar.group.collapse-button\"\n                fallback={ChevronRightIcon}\n                className=\"size-3.5 transition-transform group-data-[state=open]/nav-group:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/nav-group:rotate-90\"\n              />\n            </button>\n          </SidebarGroupLabel>\n        </CollapsibleTrigger>\n        <CollapsibleContent>{content}</CollapsibleContent>\n        {flyoutMenu}\n      </SidebarGroup>\n    </Collapsible>\n  )\n}\n\nexport function AppSidebar() {\n  const panel = usePanel()\n  const direction = useDirection()\n  const t = useT()\n\n  return (\n    <Sidebar\n      side={direction === 'rtl' ? 'right' : 'left'}\n      collapsible={\n        panel.theme?.design?.layout === 'rail'\n          ? 'icon'\n          : panel.sidebarFullyCollapsibleOnDesktop\n            ? 'offcanvas'\n            : panel.sidebarCollapsibleOnDesktop\n              ? 'icon'\n              : 'none'\n      }\n      variant={panel.theme?.sidebar === 'flush' ? 'sidebar' : (panel.theme?.sidebar ?? 'inset')}\n    >\n      <SidebarHeader>\n        <Slot name=\"sidebar.start\" />\n        <Slot name=\"sidebar.logo.before\" />\n        <SidebarMenu>\n          <SidebarMenuItem>\n            {panel.tenancy?.current ? (\n              <>\n                <Slot name=\"tenant-menu.before\" />\n                <TenantMenu />\n                <Slot name=\"tenant-menu.after\" />\n              </>\n            ) : (\n              <SidebarMenuButton size=\"lg\" asChild>\n                <div>\n                  <Brand />\n                </div>\n              </SidebarMenuButton>\n            )}\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <Slot name=\"sidebar.logo.after\" />\n        {/* `databaseNotifications(position: 'sidebar')` or `topbar(false)`. */}\n        {panel.databaseNotifications?.position === 'sidebar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <NotificationsMenu variant=\"sidebar\" />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        {/* `globalSearch(position: GlobalSearchPosition::Sidebar)` or `topbar(false)`. */}\n        {panel.globalSearch?.position === 'sidebar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <GlobalSearch variant=\"sidebar\" />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        <Slot name=\"sidebar.header\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <Slot name=\"sidebar.nav.start\" />\n        <nav aria-label={t('sidebar', {}, 'Sidebar')} className=\"contents\">\n          {panel.navigation.map((group, index) => (\n            <NavGroup key={group.label ?? `group-${index}`} group={group} />\n          ))}\n        </nav>\n        <Slot name=\"sidebar.nav.end\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <Slot name=\"sidebar.footer\" />\n        {/* `userMenu(position: UserMenuPosition::Topbar)` shows it in the top bar instead. */}\n        {panel.userMenu?.position !== 'topbar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <UserMenu />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        <Slot name=\"sidebar.end\" />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"app-sidebar.js","names":[],"sources":["../../../src/components/panel/app-sidebar.tsx"],"sourcesContent":["import {\n  PREFETCH_CACHE_FOR,\n  flattenNavigationItems,\n  hasActiveNavigationItem,\n  navigationItemText,\n  type NavigationGroupSchema,\n  type NavigationItemSchema,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { ChevronRightIcon } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { NotificationsMenu } from '../notifications/notifications-menu'\nimport { Badge } from '../ui/badge'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '../ui/sidebar'\nimport { Brand } from './brand'\nimport { GlobalSearch } from './global-search'\nimport { NavLabel } from './nav-label'\nimport { Slot } from './slot'\nimport { TenantMenu } from './tenant-menu'\nimport { UserMenu } from './user-menu'\n\nexport { Brand } from './brand'\n\nfunction NavBadge({ item }: { item: NavigationItemSchema }) {\n  const t = useT()\n\n  // `deferNavigationBadges()`: a placeholder until the deferred badges arrive.\n  if (item.badgePending) {\n    return (\n      <span\n        data-slot=\"badge\"\n        aria-busy=\"true\"\n        aria-label={t('loading', {}, 'Loading')}\n        className=\"bg-muted-foreground/20 ms-auto inline-block h-4 w-5 animate-pulse rounded-md\"\n      />\n    )\n  }\n\n  if (item.badge === undefined || item.badge === null) return null\n\n  return (\n    <Badge\n      variant=\"outline\"\n      className={cn('ms-auto px-1.5 py-0', colorClass(badgeColorClasses, item.badgeColor, 'gray'))}\n      title={item.badgeTooltip}\n    >\n      {item.badge}\n    </Badge>\n  )\n}\n\n/**\n * A navigation link: an Inertia link, or a plain anchor for `openUrlInNewTab()`. Used as an\n * `asChild` target, so it must pass on the classes, data attributes and handlers it receives.\n */\nfunction NavLink({\n  item,\n  children,\n  ...props\n}: { item: NavigationItemSchema; children: ReactNode } & Omit<\n  ComponentProps<'a'>,\n  'href' | 'children'\n>) {\n  // `NavigationItem::extraAttributes()`; `class` is merged with the link's own.\n  const attributes = {\n    ...props,\n    ...extraProps(item.extraAttributes, props.className),\n  } as ComponentProps<'a'>\n\n  return item.openInNewTab ? (\n    <a {...attributes} href={item.url} target=\"_blank\" rel=\"noopener noreferrer\">\n      {children}\n      <NewTabHint />\n    </a>\n  ) : (\n    // Slot passes DOM props; Inertia's Link redefines a few event names, so pass them through untyped.\n    <Link\n      {...(attributes as Record<string, unknown>)}\n      href={item.url ?? '#'}\n      prefetch\n      cacheFor={PREFETCH_CACHE_FOR}\n    >\n      {children}\n    </Link>\n  )\n}\n\n/** Child items (any depth) with their own badges, new-tab links and nested children. */\nfunction NavSubItem({ item }: { item: NavigationItemSchema }) {\n  if (item.children && item.children.length > 0) {\n    return (\n      <SidebarMenuSubItem>\n        <Collapsible defaultOpen={item.active} className=\"group/nav-sub\">\n          <CollapsibleTrigger asChild>\n            <SidebarMenuSubButton asChild isActive={item.active}>\n              <button type=\"button\" {...extraProps(item.extraAttributes, 'w-full')}>\n                {item.icon && <Icon name={item.icon} />}\n                <NavLabel item={item} />\n                <NavBadge item={item} />\n                <ChevronRightIcon className=\"ms-auto transition-transform duration-200 group-data-[state=open]/nav-sub:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/nav-sub:rotate-90\" />\n              </button>\n            </SidebarMenuSubButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              {item.children.map((child) => (\n                <NavSubItem key={child.url ?? child.label} item={child} />\n              ))}\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </Collapsible>\n      </SidebarMenuSubItem>\n    )\n  }\n\n  return (\n    <SidebarMenuSubItem>\n      <SidebarMenuSubButton asChild isActive={item.active}>\n        <NavLink item={item}>\n          {item.icon && <Icon name={item.icon} />}\n          <NavLabel item={item} />\n          <NavBadge item={item} />\n        </NavLink>\n      </SidebarMenuSubButton>\n    </SidebarMenuSubItem>\n  )\n}\n\nfunction NavItem({ item }: { item: NavigationItemSchema }) {\n  if (item.children && item.children.length > 0) {\n    return (\n      <Collapsible asChild defaultOpen={item.active} className=\"group/collapsible\">\n        <SidebarMenuItem>\n          <CollapsibleTrigger asChild>\n            <SidebarMenuButton\n              tooltip={navigationItemText(item)}\n              isActive={item.active}\n              {...extraProps(item.extraAttributes)}\n            >\n              {item.icon && <Icon name={item.icon} />}\n              <NavLabel item={item} />\n              <NavBadge item={item} />\n              <ChevronRightIcon className=\"ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              {item.children.map((child) => (\n                <NavSubItem key={child.url ?? child.label} item={child} />\n              ))}\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <SidebarMenuButton asChild isActive={item.active} tooltip={navigationItemText(item)}>\n        <NavLink item={item}>\n          {item.icon && <Icon name={item.icon} />}\n          <NavLabel item={item} />\n          <NavBadge item={item} />\n        </NavLink>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  )\n}\n\n/** A group's items in its flyout menu, children indented under their parent. */\nfunction FlyoutItems({ items }: { items: NavigationItemSchema[] }) {\n  return flattenNavigationItems(items).map(({ item, depth }, index) => (\n    <DropdownMenuItem\n      key={`${depth}-${item.label}-${index}`}\n      asChild\n      data-active={item.active ? 'true' : undefined}\n    >\n      <NavLink\n        item={item}\n        aria-current={item.active ? 'page' : undefined}\n        className={cn(\n          'data-[active=true]:bg-accent data-[active=true]:font-medium',\n          depth === 1 && 'ps-6',\n          depth > 1 && 'ps-9',\n        )}\n      >\n        {item.icon && <Icon name={item.icon} />}\n        <NavLabel item={item} className=\"truncate\" />\n        <NavBadge item={item} />\n      </NavLink>\n    </DropdownMenuItem>\n  ))\n}\n\n/**\n * In the icon-only (collapsed) sidebar, a group with an icon is one button that opens its\n * items in a flyout menu, like Filament. Hidden while the sidebar is expanded.\n */\nfunction NavGroupFlyout({ group }: { group: NavigationGroupSchema }) {\n  const direction = useDirection()\n  const active = hasActiveNavigationItem(group.items)\n\n  return (\n    <SidebarMenu className=\"hidden group-data-[collapsible=icon]:flex\" data-nav-flyout=\"\">\n      <SidebarMenuItem>\n        <DropdownMenu dir={direction}>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton isActive={active}>\n              <Icon name={group.icon!} />\n              <span>{group.label}</span>\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            side={direction === 'rtl' ? 'left' : 'right'}\n            align=\"start\"\n            className=\"min-w-56\"\n          >\n            <DropdownMenuLabel>{group.label}</DropdownMenuLabel>\n            <FlyoutItems items={group.items} />\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction NavGroup({ group }: { group: NavigationGroupSchema }) {\n  // `NavigationGroup::extraSidebarAttributes()`; `class` is merged with the group's own.\n  const attributes = extraProps(group.extraSidebarAttributes)\n  // A labelled group with an icon collapses into a flyout in the icon-only sidebar.\n  const flyout = Boolean(group.label && group.icon)\n  const content = (\n    <SidebarGroupContent className={cn(flyout && 'group-data-[collapsible=icon]:hidden')}>\n      <SidebarMenu>\n        {group.items.map((item) => (\n          <NavItem key={item.url ?? item.label} item={item} />\n        ))}\n      </SidebarMenu>\n    </SidebarGroupContent>\n  )\n  const flyoutMenu = flyout ? <NavGroupFlyout group={group} /> : null\n\n  if (!group.label) {\n    return <SidebarGroup {...attributes}>{content}</SidebarGroup>\n  }\n\n  if (!group.collapsible) {\n    return (\n      <SidebarGroup {...attributes}>\n        <SidebarGroupLabel>\n          {group.icon && <Icon name={group.icon} className=\"me-1.5\" />}\n          {group.label}\n        </SidebarGroupLabel>\n        {content}\n        {flyoutMenu}\n      </SidebarGroup>\n    )\n  }\n\n  return (\n    <Collapsible\n      defaultOpen={!group.collapsed || group.items.some((item) => item.active)}\n      className=\"group/nav-group\"\n    >\n      <SidebarGroup {...attributes}>\n        <CollapsibleTrigger asChild>\n          <SidebarGroupLabel\n            asChild\n            className=\"hover:bg-sidebar-accent w-full cursor-pointer justify-between\"\n          >\n            <button type=\"button\">\n              <span className=\"flex items-center gap-1.5\">\n                {group.icon && <Icon name={group.icon} />}\n                {group.label}\n              </span>\n              <Icon\n                name=\"alfakit::panels.sidebar.group.collapse-button\"\n                fallback={ChevronRightIcon}\n                className=\"size-3.5 transition-transform group-data-[state=open]/nav-group:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/nav-group:rotate-90\"\n              />\n            </button>\n          </SidebarGroupLabel>\n        </CollapsibleTrigger>\n        <CollapsibleContent>{content}</CollapsibleContent>\n        {flyoutMenu}\n      </SidebarGroup>\n    </Collapsible>\n  )\n}\n\nexport function AppSidebar() {\n  const panel = usePanel()\n  const direction = useDirection()\n  const t = useT()\n\n  return (\n    <Sidebar\n      side={direction === 'rtl' ? 'right' : 'left'}\n      collapsible={\n        panel.theme?.design?.layout === 'rail'\n          ? 'icon'\n          : panel.sidebarFullyCollapsibleOnDesktop\n            ? 'offcanvas'\n            : panel.sidebarCollapsibleOnDesktop\n              ? 'icon'\n              : 'none'\n      }\n      variant={panel.theme?.sidebar === 'flush' ? 'sidebar' : (panel.theme?.sidebar ?? 'inset')}\n    >\n      <SidebarHeader>\n        <Slot name=\"sidebar.start\" />\n        <Slot name=\"sidebar.logo.before\" />\n        <SidebarMenu>\n          <SidebarMenuItem>\n            {panel.tenancy?.current ? (\n              <>\n                <Slot name=\"tenant-menu.before\" />\n                <TenantMenu />\n                <Slot name=\"tenant-menu.after\" />\n              </>\n            ) : (\n              <SidebarMenuButton size=\"lg\" asChild>\n                <div>\n                  <Brand />\n                </div>\n              </SidebarMenuButton>\n            )}\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <Slot name=\"sidebar.logo.after\" />\n        {/* `databaseNotifications(position: 'sidebar')` or `topbar(false)`. */}\n        {panel.databaseNotifications?.position === 'sidebar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <NotificationsMenu variant=\"sidebar\" />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        {/* `globalSearch(position: GlobalSearchPosition::Sidebar)` or `topbar(false)`. */}\n        {panel.globalSearch?.position === 'sidebar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <GlobalSearch variant=\"sidebar\" />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        <Slot name=\"sidebar.header\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <Slot name=\"sidebar.nav.start\" />\n        <nav aria-label={t('sidebar', {}, 'Sidebar')} className=\"contents\">\n          {panel.navigation.map((group, index) => (\n            <NavGroup key={group.label ?? `group-${index}`} group={group} />\n          ))}\n        </nav>\n        <Slot name=\"sidebar.nav.end\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <Slot name=\"sidebar.footer\" />\n        {/* `userMenu(position: UserMenuPosition::Topbar)` shows it in the top bar instead. */}\n        {panel.userMenu?.position !== 'topbar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <UserMenu />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        <Slot name=\"sidebar.end\" />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n"],"mappings":"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"}

package/dist/components/panel/bottom-nav.js

@@ -55,7 +55,7 @@ function BottomNav() {
 		"data-slot": "bottom-nav",
 		"aria-label": t("navigation", {}, "Navigation"),
 		className: "md:hidden",
-		children: [primary.map((item) => /* @__PURE__ */ jsx(BottomNavLink, { item }, item.label)), overflow.length > 0 && /* @__PURE__ */ jsxs(Sheet, {
+		children: [primary.map((item) => /* @__PURE__ */ jsx(BottomNavLink, { item }, item.url ?? item.label)), overflow.length > 0 && /* @__PURE__ */ jsxs(Sheet, {
 			open,
 			onOpenChange: setOpen,
 			children: [/* @__PURE__ */ jsxs("button", {
@@ -88,7 +88,7 @@ function BottomNav() {
 						"data-active": isNavigationItemActive(item) ? "true" : void 0,
 						className: cn("hover:bg-accent data-[active=true]:bg-accent flex min-h-11 items-center gap-3 rounded-md px-3 font-medium [&_svg]:size-4"),
 						children: [item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }), /* @__PURE__ */ jsx(NavLabel, { item })]
-					}, item.label))
+					}, item.url ?? item.label))
 				})]
 			})]
 		})]

package/dist/components/panel/bottom-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-nav.js","names":[],"sources":["../../../src/components/panel/bottom-nav.tsx"],"sourcesContent":["import {\n  PREFETCH_CACHE_FOR,\n  bottomNavigationItems,\n  isNavigationItemActive,\n  navigationItemUrl,\n  type NavigationItemSchema,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { MenuIcon } from 'lucide-react'\nimport { useState } from 'react'\nimport { usePanel, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from '../ui/sheet'\nimport { NavLabel } from './nav-label'\n\nfunction BottomNavLink({\n  item,\n  onNavigate,\n}: {\n  item: NavigationItemSchema\n  onNavigate?: () => void\n}) {\n  const active = isNavigationItemActive(item)\n  const url = navigationItemUrl(item) ?? '#'\n\n  if (item.openInNewTab) {\n    return (\n      <a\n        {...extraProps(item.extraAttributes, 'min-w-0')}\n        href={url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        data-slot=\"bottom-nav-item\"\n      >\n        {item.icon && <Icon name={item.icon} />}\n        <NavLabel item={item} className=\"max-w-full truncate\" />\n      </a>\n    )\n  }\n\n  return (\n    <Link\n      {...extraProps(item.extraAttributes, 'min-w-0')}\n      href={url}\n      prefetch\n      cacheFor={PREFETCH_CACHE_FOR}\n      data-slot=\"bottom-nav-item\"\n      data-active={active ? 'true' : undefined}\n      aria-current={active ? 'page' : undefined}\n      onClick={onNavigate}\n    >\n      {item.icon && <Icon name={item.icon} />}\n      <NavLabel item={item} className=\"max-w-full truncate\" />\n    </Link>\n  )\n}\n\n/**\n * The mobile preset's bottom navigation bar (`Panel::mobile()`): the top-level items, with\n * the rest behind a \"More\" button that opens a sheet. Hidden from `md` up; replace it\n * everywhere with `createAlfakit({ components: { 'panel:bottom-nav': … } })`.\n */\nexport function BottomNav() {\n  const panel = usePanel()\n  const t = useT()\n  const [open, setOpen] = useState(false)\n  const { primary, overflow } = bottomNavigationItems(panel.navigation)\n\n  if (primary.length === 0 && overflow.length === 0) {\n    return null\n  }\n\n  const overflowActive = overflow.some(isNavigationItemActive)\n\n  return (\n    <nav\n      data-slot=\"bottom-nav\"\n      aria-label={t('navigation', {}, 'Navigation')}\n      className=\"md:hidden\"\n    >\n      {primary.map((item) => (\n        <BottomNavLink key={item.label} item={item} />\n      ))}\n      {overflow.length > 0 && (\n        <Sheet open={open} onOpenChange={setOpen}>\n          <button\n            type=\"button\"\n            data-slot=\"bottom-nav-item\"\n            data-active={overflowActive ? 'true' : undefined}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            className=\"min-w-0 bg-transparent\"\n            onClick={() => setOpen(true)}\n          >\n            <Icon name=\"alfakit::panels.topbar.open-sidebar-button\" fallback={MenuIcon} />\n            <span className=\"max-w-full truncate\">{t('more', {}, 'More')}</span>\n          </button>\n          <SheetContent side=\"bottom\" className=\"max-h-[80dvh] overflow-y-auto rounded-t-xl p-0\">\n            <SheetHeader className=\"border-b\">\n              <SheetTitle>{t('more', {}, 'More')}</SheetTitle>\n            </SheetHeader>\n            <nav\n              aria-label={t('navigation', {}, 'Navigation')}\n              className=\"flex flex-col gap-1 p-3 text-sm\"\n            >\n              {overflow\n                .flatMap((item) => [item, ...(item.children ?? [])])\n                .map((item) => (\n                  <Link\n                    key={item.label}\n                    href={navigationItemUrl(item) ?? '#'}\n                    onClick={() => setOpen(false)}\n                    data-active={isNavigationItemActive(item) ? 'true' : undefined}\n                    className={cn(\n                      'hover:bg-accent data-[active=true]:bg-accent flex min-h-11 items-center gap-3 rounded-md px-3 font-medium [&_svg]:size-4',\n                    )}\n                  >\n                    {item.icon && <Icon name={item.icon} />}\n                    <NavLabel item={item} />\n                  </Link>\n                ))}\n            </nav>\n          </SheetContent>\n        </Sheet>\n      )}\n    </nav>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAS,cAAc,EACrB,MACA,cAIC;CACD,MAAM,SAAS,uBAAuB,IAAI;CAC1C,MAAM,MAAM,kBAAkB,IAAI,KAAK;CAEvC,IAAI,KAAK,cACP,OACE,qBAAC,KAAD;EACE,GAAI,WAAW,KAAK,iBAAiB,SAAS;EAC9C,MAAM;EACN,QAAO;EACP,KAAI;EACJ,aAAU;EALZ,UAAA,CAOG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD;GAAgB;GAAM,WAAU;EAAuB,CAAA,CACtD;;CAIP,OACE,qBAAC,MAAD;EACE,GAAI,WAAW,KAAK,iBAAiB,SAAS;EAC9C,MAAM;EACN,UAAA;EACA,UAAU;EACV,aAAU;EACV,eAAa,SAAS,SAAS,KAAA;EAC/B,gBAAc,SAAS,SAAS,KAAA;EAChC,SAAS;EARX,UAAA,CAUG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD;GAAgB;GAAM,WAAU;EAAuB,CAAA,CACnD;;AAEV;;;;;;AAOA,SAAgB,YAAY;CAC1B,MAAM,QAAQ,SAAS;CACvB,MAAM,IAAI,KAAK;CACf,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,EAAE,SAAS,aAAa,sBAAsB,MAAM,UAAU;CAEpE,IAAI,QAAQ,WAAW,KAAK,SAAS,WAAW,GAC9C,OAAO;CAGT,MAAM,iBAAiB,SAAS,KAAK,sBAAsB;CAE3D,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY,EAAE,cAAc,CAAC,GAAG,YAAY;EAC5C,WAAU;EAHZ,UAAA,CAKG,QAAQ,KAAK,SACZ,oBAAC,eAAD,EAAsC,KAAO,GAAzB,KAAK,KAAoB,CAC9C,GACA,SAAS,SAAS,KACjB,qBAAC,OAAD;GAAa;GAAM,cAAc;GAAjC,UAAA,CACE,qBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,eAAa,iBAAiB,SAAS,KAAA;IACvC,iBAAc;IACd,iBAAe;IACf,WAAU;IACV,eAAe,QAAQ,IAAI;IAP7B,UAAA,CASE,oBAAC,MAAD;KAAM,MAAK;KAA6C,UAAU;IAAW,CAAA,GAC7E,oBAAC,QAAD;KAAM,WAAU;KAAuB,UAAA,EAAE,QAAQ,CAAC,GAAG,MAAM;IAAQ,CAAA,CAC7D;GACR,CAAA,GAAA,qBAAC,cAAD;IAAc,MAAK;IAAS,WAAU;IAAtC,UAAA,CACE,oBAAC,aAAD;KAAa,WAAU;KACrB,UAAA,oBAAC,YAAD,EAAA,UAAa,EAAE,QAAQ,CAAC,GAAG,MAAM,EAAc,CAAA;IACpC,CAAA,GACb,oBAAC,OAAD;KACE,cAAY,EAAE,cAAc,CAAC,GAAG,YAAY;KAC5C,WAAU;KAET,UAAA,SACE,SAAS,SAAS,CAAC,MAAM,GAAI,KAAK,YAAY,CAAC,CAAE,CAAC,CAAC,CACnD,KAAK,SACJ,qBAAC,MAAD;MAEE,MAAM,kBAAkB,IAAI,KAAK;MACjC,eAAe,QAAQ,KAAK;MAC5B,eAAa,uBAAuB,IAAI,IAAI,SAAS,KAAA;MACrD,WAAW,GACT,0HACF;MAPF,UAAA,CASG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD,EAAgB,KAAO,CAAA,CACnB;KAVC,GAAA,KAAK,KAUN,CACP;IACA,CAAA,CACO;GACT,CAAA,CAAA;EAEN,CAAA,CAAA;;AAET"}
+{"version":3,"file":"bottom-nav.js","names":[],"sources":["../../../src/components/panel/bottom-nav.tsx"],"sourcesContent":["import {\n  PREFETCH_CACHE_FOR,\n  bottomNavigationItems,\n  isNavigationItemActive,\n  navigationItemUrl,\n  type NavigationItemSchema,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { MenuIcon } from 'lucide-react'\nimport { useState } from 'react'\nimport { usePanel, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from '../ui/sheet'\nimport { NavLabel } from './nav-label'\n\nfunction BottomNavLink({\n  item,\n  onNavigate,\n}: {\n  item: NavigationItemSchema\n  onNavigate?: () => void\n}) {\n  const active = isNavigationItemActive(item)\n  const url = navigationItemUrl(item) ?? '#'\n\n  if (item.openInNewTab) {\n    return (\n      <a\n        {...extraProps(item.extraAttributes, 'min-w-0')}\n        href={url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        data-slot=\"bottom-nav-item\"\n      >\n        {item.icon && <Icon name={item.icon} />}\n        <NavLabel item={item} className=\"max-w-full truncate\" />\n      </a>\n    )\n  }\n\n  return (\n    <Link\n      {...extraProps(item.extraAttributes, 'min-w-0')}\n      href={url}\n      prefetch\n      cacheFor={PREFETCH_CACHE_FOR}\n      data-slot=\"bottom-nav-item\"\n      data-active={active ? 'true' : undefined}\n      aria-current={active ? 'page' : undefined}\n      onClick={onNavigate}\n    >\n      {item.icon && <Icon name={item.icon} />}\n      <NavLabel item={item} className=\"max-w-full truncate\" />\n    </Link>\n  )\n}\n\n/**\n * The mobile preset's bottom navigation bar (`Panel::mobile()`): the top-level items, with\n * the rest behind a \"More\" button that opens a sheet. Hidden from `md` up; replace it\n * everywhere with `createAlfakit({ components: { 'panel:bottom-nav': … } })`.\n */\nexport function BottomNav() {\n  const panel = usePanel()\n  const t = useT()\n  const [open, setOpen] = useState(false)\n  const { primary, overflow } = bottomNavigationItems(panel.navigation)\n\n  if (primary.length === 0 && overflow.length === 0) {\n    return null\n  }\n\n  const overflowActive = overflow.some(isNavigationItemActive)\n\n  return (\n    <nav\n      data-slot=\"bottom-nav\"\n      aria-label={t('navigation', {}, 'Navigation')}\n      className=\"md:hidden\"\n    >\n      {primary.map((item) => (\n        <BottomNavLink key={item.url ?? item.label} item={item} />\n      ))}\n      {overflow.length > 0 && (\n        <Sheet open={open} onOpenChange={setOpen}>\n          <button\n            type=\"button\"\n            data-slot=\"bottom-nav-item\"\n            data-active={overflowActive ? 'true' : undefined}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            className=\"min-w-0 bg-transparent\"\n            onClick={() => setOpen(true)}\n          >\n            <Icon name=\"alfakit::panels.topbar.open-sidebar-button\" fallback={MenuIcon} />\n            <span className=\"max-w-full truncate\">{t('more', {}, 'More')}</span>\n          </button>\n          <SheetContent side=\"bottom\" className=\"max-h-[80dvh] overflow-y-auto rounded-t-xl p-0\">\n            <SheetHeader className=\"border-b\">\n              <SheetTitle>{t('more', {}, 'More')}</SheetTitle>\n            </SheetHeader>\n            <nav\n              aria-label={t('navigation', {}, 'Navigation')}\n              className=\"flex flex-col gap-1 p-3 text-sm\"\n            >\n              {overflow\n                .flatMap((item) => [item, ...(item.children ?? [])])\n                .map((item) => (\n                  <Link\n                    key={item.url ?? item.label}\n                    href={navigationItemUrl(item) ?? '#'}\n                    onClick={() => setOpen(false)}\n                    data-active={isNavigationItemActive(item) ? 'true' : undefined}\n                    className={cn(\n                      'hover:bg-accent data-[active=true]:bg-accent flex min-h-11 items-center gap-3 rounded-md px-3 font-medium [&_svg]:size-4',\n                    )}\n                  >\n                    {item.icon && <Icon name={item.icon} />}\n                    <NavLabel item={item} />\n                  </Link>\n                ))}\n            </nav>\n          </SheetContent>\n        </Sheet>\n      )}\n    </nav>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAS,cAAc,EACrB,MACA,cAIC;CACD,MAAM,SAAS,uBAAuB,IAAI;CAC1C,MAAM,MAAM,kBAAkB,IAAI,KAAK;CAEvC,IAAI,KAAK,cACP,OACE,qBAAC,KAAD;EACE,GAAI,WAAW,KAAK,iBAAiB,SAAS;EAC9C,MAAM;EACN,QAAO;EACP,KAAI;EACJ,aAAU;EALZ,UAAA,CAOG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD;GAAgB;GAAM,WAAU;EAAuB,CAAA,CACtD;;CAIP,OACE,qBAAC,MAAD;EACE,GAAI,WAAW,KAAK,iBAAiB,SAAS;EAC9C,MAAM;EACN,UAAA;EACA,UAAU;EACV,aAAU;EACV,eAAa,SAAS,SAAS,KAAA;EAC/B,gBAAc,SAAS,SAAS,KAAA;EAChC,SAAS;EARX,UAAA,CAUG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD;GAAgB;GAAM,WAAU;EAAuB,CAAA,CACnD;;AAEV;;;;;;AAOA,SAAgB,YAAY;CAC1B,MAAM,QAAQ,SAAS;CACvB,MAAM,IAAI,KAAK;CACf,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,EAAE,SAAS,aAAa,sBAAsB,MAAM,UAAU;CAEpE,IAAI,QAAQ,WAAW,KAAK,SAAS,WAAW,GAC9C,OAAO;CAGT,MAAM,iBAAiB,SAAS,KAAK,sBAAsB;CAE3D,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY,EAAE,cAAc,CAAC,GAAG,YAAY;EAC5C,WAAU;EAHZ,UAAA,CAKG,QAAQ,KAAK,SACZ,oBAAC,eAAD,EAAkD,KAAO,GAArC,KAAK,OAAO,KAAK,KAAoB,CAC1D,GACA,SAAS,SAAS,KACjB,qBAAC,OAAD;GAAa;GAAM,cAAc;GAAjC,UAAA,CACE,qBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,eAAa,iBAAiB,SAAS,KAAA;IACvC,iBAAc;IACd,iBAAe;IACf,WAAU;IACV,eAAe,QAAQ,IAAI;IAP7B,UAAA,CASE,oBAAC,MAAD;KAAM,MAAK;KAA6C,UAAU;IAAW,CAAA,GAC7E,oBAAC,QAAD;KAAM,WAAU;KAAuB,UAAA,EAAE,QAAQ,CAAC,GAAG,MAAM;IAAQ,CAAA,CAC7D;GACR,CAAA,GAAA,qBAAC,cAAD;IAAc,MAAK;IAAS,WAAU;IAAtC,UAAA,CACE,oBAAC,aAAD;KAAa,WAAU;KACrB,UAAA,oBAAC,YAAD,EAAA,UAAa,EAAE,QAAQ,CAAC,GAAG,MAAM,EAAc,CAAA;IACpC,CAAA,GACb,oBAAC,OAAD;KACE,cAAY,EAAE,cAAc,CAAC,GAAG,YAAY;KAC5C,WAAU;KAET,UAAA,SACE,SAAS,SAAS,CAAC,MAAM,GAAI,KAAK,YAAY,CAAC,CAAE,CAAC,CAAC,CACnD,KAAK,SACJ,qBAAC,MAAD;MAEE,MAAM,kBAAkB,IAAI,KAAK;MACjC,eAAe,QAAQ,KAAK;MAC5B,eAAa,uBAAuB,IAAI,IAAI,SAAS,KAAA;MACrD,WAAW,GACT,0HACF;MAPF,UAAA,CASG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD,EAAgB,KAAO,CAAA,CACnB;KAVC,GAAA,KAAK,OAAO,KAAK,KAUlB,CACP;IACA,CAAA,CACO;GACT,CAAA,CAAA;EAEN,CAAA,CAAA;;AAET"}

package/dist/components/panel/keyboard-shortcuts.js

@@ -31,7 +31,7 @@ function KeyboardShortcuts() {
 	const overrides = JSON.stringify(config ? config.overrides ?? {} : {});
 	const token = page?.token ?? "";
 	const commands = panel.commandPalette?.commands;
-	const home = panel.url;
+	const home = panel.dashboardUrl ?? panel.url;
 	const overlayLabel = t("shortcuts.show_overlay", {}, "Show keyboard shortcuts");
 	const searchLabel = t("shortcuts.focus_search", {}, "Search the table");
 	const dashboardLabel = t("shortcuts.go_dashboard", {}, "Go to the dashboard");

package/dist/components/panel/keyboard-shortcuts.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcuts.js","names":[],"sources":["../../../src/components/panel/keyboard-shortcuts.tsx"],"sourcesContent":["import type { CommandSchema } from '@alfakit/core'\nimport {\n  COMMANDS_COMPONENT,\n  commandShortcutId,\n  focusTableSearch,\n  SHORTCUT_IDS,\n  shortcuts,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { useEffect, useState } from 'react'\nimport { useActionRunner, usePageSchema, usePanel, useT } from '../../context'\nimport type { ShortcutsOverlay as Overlay } from './shortcuts-overlay'\n\ntype OverlayComponent = typeof Overlay\n\nlet loadedOverlay: OverlayComponent | undefined\nlet loadingOverlay: Promise<OverlayComponent> | undefined\n\n/** The `?` overlay's code: loaded the first time it opens; the shortcuts register eagerly. */\nfunction loadOverlay(): Promise<OverlayComponent> {\n  loadingOverlay ??= import('./shortcuts-overlay').then(\n    (module) => (loadedOverlay = module.ShortcutsOverlay),\n    (error: unknown) => {\n      loadingOverlay = undefined\n      throw error\n    },\n  )\n\n  return loadingOverlay\n}\n\n/**\n * Keyboard shortcuts of the panel: `/` (focus the table search), `g d` (dashboard), `?`\n * (the overlay) and the panel commands' `shortcut()`, with the user's customised keys\n * (`alfakit.keyboardShortcuts`). The overlay lists everything available on the page,\n * grouped, and lets users change keys (stored on the server).\n */\nexport function KeyboardShortcuts() {\n  const t = useT()\n  const panel = usePanel()\n  const page = usePageSchema()\n  const runner = useActionRunner()\n  const config = panel.keyboardShortcuts\n  const [open, setOpen] = useState(false)\n  // Undefined on the server and during hydration (nothing loads there), so the markup matches.\n  const [ShortcutsOverlay, setOverlay] = useState<OverlayComponent | undefined>(() => loadedOverlay)\n  const overrides = JSON.stringify(config ? (config.overrides ?? {}) : {})\n  const token = page?.token ?? ''\n  const commands = panel.commandPalette?.commands\n  const home = panel.url\n  // Strings, so the effect below doesn't re-run on every render (`t` is a new function each time).\n  const overlayLabel = t('shortcuts.show_overlay', {}, 'Show keyboard shortcuts')\n  const searchLabel = t('shortcuts.focus_search', {}, 'Search the table')\n  const dashboardLabel = t('shortcuts.go_dashboard', {}, 'Go to the dashboard')\n\n  useEffect(() => {\n    shortcuts.setEnabled(config !== false)\n    shortcuts.setOverrides(JSON.parse(overrides) as Record<string, string[]>)\n  }, [config, overrides])\n\n  useEffect(() => {\n    if (!config) return\n\n    const disposers = [\n      shortcuts.register({\n        id: SHORTCUT_IDS.overlay,\n        keys: ['?'],\n        label: overlayLabel,\n        group: 'general',\n        handler: () => setOpen(true),\n      }),\n      // Declined (`false`) on pages without a table search, so `/` keeps its default.\n      shortcuts.register({\n        id: SHORTCUT_IDS.search,\n        keys: ['/'],\n        label: searchLabel,\n        group: 'general',\n        handler: () => focusTableSearch(),\n      }),\n      ...(home\n        ? [\n            shortcuts.register({\n              id: SHORTCUT_IDS.dashboard,\n              keys: ['g d'],\n              label: dashboardLabel,\n              group: 'navigation',\n              handler: () => router.visit(home),\n            }),\n          ]\n        : []),\n      ...(commands ?? [])\n        .filter((command: CommandSchema) => command.keyBindings?.length && !command.disabled)\n        .map((command: CommandSchema) =>\n          shortcuts.register({\n            id: commandShortcutId(command.name),\n            keys: command.keyBindings ?? [],\n            label: command.label ?? command.name,\n            group: command.url ? 'navigation' : 'commands',\n            handler: () => void runner.trigger(command, { token, component: COMMANDS_COMPONENT }),\n          }),\n        ),\n    ]\n\n    return () => disposers.forEach((dispose) => dispose())\n  }, [config, commands, home, runner, token, overlayLabel, searchLabel, dashboardLabel])\n\n  // `?` (or the palette's \"Keyboard shortcuts\") before the code has arrived keeps `open`\n  // set; the overlay mounts open once it has loaded.\n  useEffect(() => {\n    if (!open || ShortcutsOverlay) return\n\n    let active = true\n\n    loadOverlay().then(\n      (component) => active && setOverlay(() => component),\n      () => active && setOpen(false),\n    )\n\n    return () => {\n      active = false\n    }\n  }, [open, ShortcutsOverlay])\n\n  if (!config || !ShortcutsOverlay) return null\n\n  return (\n    <ShortcutsOverlay\n      open={open}\n      onOpenChange={setOpen}\n      customizable={Boolean(config.customizable && panel.endpoints.shortcuts)}\n      endpoint={panel.endpoints.shortcuts}\n    />\n  )\n}\n"],"mappings":";;;;;;AAeA,IAAI;AACJ,IAAI;;AAGJ,SAAS,cAAyC;CAChD,mBAAmB,OAAO,yBAAsB,CAAC,MAC9C,WAAY,gBAAgB,OAAO,mBACnC,UAAmB;EAClB,iBAAiB,KAAA;EACjB,MAAM;CACR,CACF;CAEA,OAAO;AACT;;;;;;;AAQA,SAAgB,oBAAoB;CAClC,MAAM,IAAI,KAAK;CACf,MAAM,QAAQ,SAAS;CACvB,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,gBAAgB;CAC/B,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,CAAC,kBAAkB,cAAc,eAA6C,aAAa;CACjG,MAAM,YAAY,KAAK,UAAU,SAAU,OAAO,aAAa,CAAC,IAAK,CAAC,CAAC;CACvE,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,WAAW,MAAM,gBAAgB;CACvC,MAAM,OAAO,MAAM;CAEnB,MAAM,eAAe,EAAE,0BAA0B,CAAC,GAAG,yBAAyB;CAC9E,MAAM,cAAc,EAAE,0BAA0B,CAAC,GAAG,kBAAkB;CACtE,MAAM,iBAAiB,EAAE,0BAA0B,CAAC,GAAG,qBAAqB;CAE5E,gBAAgB;EACd,UAAU,WAAW,WAAW,KAAK;EACrC,UAAU,aAAa,KAAK,MAAM,SAAS,CAA6B;CAC1E,GAAG,CAAC,QAAQ,SAAS,CAAC;CAEtB,gBAAgB;EACd,IAAI,CAAC,QAAQ;EAEb,MAAM,YAAY;GAChB,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,GAAG;IACV,OAAO;IACP,OAAO;IACP,eAAe,QAAQ,IAAI;GAC7B,CAAC;GAED,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,GAAG;IACV,OAAO;IACP,OAAO;IACP,eAAe,iBAAiB;GAClC,CAAC;GACD,GAAI,OACA,CACE,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,KAAK;IACZ,OAAO;IACP,OAAO;IACP,eAAe,OAAO,MAAM,IAAI;GAClC,CAAC,CACH,IACA,CAAC;GACL,IAAI,YAAY,CAAC,EAAA,CACd,QAAQ,YAA2B,QAAQ,aAAa,UAAU,CAAC,QAAQ,QAAQ,CAAC,CACpF,KAAK,YACJ,UAAU,SAAS;IACjB,IAAI,kBAAkB,QAAQ,IAAI;IAClC,MAAM,QAAQ,eAAe,CAAC;IAC9B,OAAO,QAAQ,SAAS,QAAQ;IAChC,OAAO,QAAQ,MAAM,eAAe;IACpC,eAAe,KAAK,OAAO,QAAQ,SAAS;KAAE;KAAO,WAAW;IAAmB,CAAC;GACtF,CAAC,CACH;EACJ;EAEA,aAAa,UAAU,SAAS,YAAY,QAAQ,CAAC;CACvD,GAAG;EAAC;EAAQ;EAAU;EAAM;EAAQ;EAAO;EAAc;EAAa;CAAc,CAAC;CAIrF,gBAAgB;EACd,IAAI,CAAC,QAAQ,kBAAkB;EAE/B,IAAI,SAAS;EAEb,YAAY,CAAC,CAAC,MACX,cAAc,UAAU,iBAAiB,SAAS,SAC7C,UAAU,QAAQ,KAAK,CAC/B;EAEA,aAAa;GACX,SAAS;EACX;CACF,GAAG,CAAC,MAAM,gBAAgB,CAAC;CAE3B,IAAI,CAAC,UAAU,CAAC,kBAAkB,OAAO;CAEzC,OACE,oBAAC,kBAAD;EACQ;EACN,cAAc;EACd,cAAc,QAAQ,OAAO,gBAAgB,MAAM,UAAU,SAAS;EACtE,UAAU,MAAM,UAAU;CAC3B,CAAA;AAEL"}
+{"version":3,"file":"keyboard-shortcuts.js","names":[],"sources":["../../../src/components/panel/keyboard-shortcuts.tsx"],"sourcesContent":["import type { CommandSchema } from '@alfakit/core'\nimport {\n  COMMANDS_COMPONENT,\n  commandShortcutId,\n  focusTableSearch,\n  SHORTCUT_IDS,\n  shortcuts,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { useEffect, useState } from 'react'\nimport { useActionRunner, usePageSchema, usePanel, useT } from '../../context'\nimport type { ShortcutsOverlay as Overlay } from './shortcuts-overlay'\n\ntype OverlayComponent = typeof Overlay\n\nlet loadedOverlay: OverlayComponent | undefined\nlet loadingOverlay: Promise<OverlayComponent> | undefined\n\n/** The `?` overlay's code: loaded the first time it opens; the shortcuts register eagerly. */\nfunction loadOverlay(): Promise<OverlayComponent> {\n  loadingOverlay ??= import('./shortcuts-overlay').then(\n    (module) => (loadedOverlay = module.ShortcutsOverlay),\n    (error: unknown) => {\n      loadingOverlay = undefined\n      throw error\n    },\n  )\n\n  return loadingOverlay\n}\n\n/**\n * Keyboard shortcuts of the panel: `/` (focus the table search), `g d` (dashboard), `?`\n * (the overlay) and the panel commands' `shortcut()`, with the user's customised keys\n * (`alfakit.keyboardShortcuts`). The overlay lists everything available on the page,\n * grouped, and lets users change keys (stored on the server).\n */\nexport function KeyboardShortcuts() {\n  const t = useT()\n  const panel = usePanel()\n  const page = usePageSchema()\n  const runner = useActionRunner()\n  const config = panel.keyboardShortcuts\n  const [open, setOpen] = useState(false)\n  // Undefined on the server and during hydration (nothing loads there), so the markup matches.\n  const [ShortcutsOverlay, setOverlay] = useState<OverlayComponent | undefined>(() => loadedOverlay)\n  const overrides = JSON.stringify(config ? (config.overrides ?? {}) : {})\n  const token = page?.token ?? ''\n  const commands = panel.commandPalette?.commands\n  const home = panel.dashboardUrl ?? panel.url\n  // Strings, so the effect below doesn't re-run on every render (`t` is a new function each time).\n  const overlayLabel = t('shortcuts.show_overlay', {}, 'Show keyboard shortcuts')\n  const searchLabel = t('shortcuts.focus_search', {}, 'Search the table')\n  const dashboardLabel = t('shortcuts.go_dashboard', {}, 'Go to the dashboard')\n\n  useEffect(() => {\n    shortcuts.setEnabled(config !== false)\n    shortcuts.setOverrides(JSON.parse(overrides) as Record<string, string[]>)\n  }, [config, overrides])\n\n  useEffect(() => {\n    if (!config) return\n\n    const disposers = [\n      shortcuts.register({\n        id: SHORTCUT_IDS.overlay,\n        keys: ['?'],\n        label: overlayLabel,\n        group: 'general',\n        handler: () => setOpen(true),\n      }),\n      // Declined (`false`) on pages without a table search, so `/` keeps its default.\n      shortcuts.register({\n        id: SHORTCUT_IDS.search,\n        keys: ['/'],\n        label: searchLabel,\n        group: 'general',\n        handler: () => focusTableSearch(),\n      }),\n      ...(home\n        ? [\n            shortcuts.register({\n              id: SHORTCUT_IDS.dashboard,\n              keys: ['g d'],\n              label: dashboardLabel,\n              group: 'navigation',\n              handler: () => router.visit(home),\n            }),\n          ]\n        : []),\n      ...(commands ?? [])\n        .filter((command: CommandSchema) => command.keyBindings?.length && !command.disabled)\n        .map((command: CommandSchema) =>\n          shortcuts.register({\n            id: commandShortcutId(command.name),\n            keys: command.keyBindings ?? [],\n            label: command.label ?? command.name,\n            group: command.url ? 'navigation' : 'commands',\n            handler: () => void runner.trigger(command, { token, component: COMMANDS_COMPONENT }),\n          }),\n        ),\n    ]\n\n    return () => disposers.forEach((dispose) => dispose())\n  }, [config, commands, home, runner, token, overlayLabel, searchLabel, dashboardLabel])\n\n  // `?` (or the palette's \"Keyboard shortcuts\") before the code has arrived keeps `open`\n  // set; the overlay mounts open once it has loaded.\n  useEffect(() => {\n    if (!open || ShortcutsOverlay) return\n\n    let active = true\n\n    loadOverlay().then(\n      (component) => active && setOverlay(() => component),\n      () => active && setOpen(false),\n    )\n\n    return () => {\n      active = false\n    }\n  }, [open, ShortcutsOverlay])\n\n  if (!config || !ShortcutsOverlay) return null\n\n  return (\n    <ShortcutsOverlay\n      open={open}\n      onOpenChange={setOpen}\n      customizable={Boolean(config.customizable && panel.endpoints.shortcuts)}\n      endpoint={panel.endpoints.shortcuts}\n    />\n  )\n}\n"],"mappings":";;;;;;AAeA,IAAI;AACJ,IAAI;;AAGJ,SAAS,cAAyC;CAChD,mBAAmB,OAAO,yBAAsB,CAAC,MAC9C,WAAY,gBAAgB,OAAO,mBACnC,UAAmB;EAClB,iBAAiB,KAAA;EACjB,MAAM;CACR,CACF;CAEA,OAAO;AACT;;;;;;;AAQA,SAAgB,oBAAoB;CAClC,MAAM,IAAI,KAAK;CACf,MAAM,QAAQ,SAAS;CACvB,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,gBAAgB;CAC/B,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,CAAC,kBAAkB,cAAc,eAA6C,aAAa;CACjG,MAAM,YAAY,KAAK,UAAU,SAAU,OAAO,aAAa,CAAC,IAAK,CAAC,CAAC;CACvE,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,WAAW,MAAM,gBAAgB;CACvC,MAAM,OAAO,MAAM,gBAAgB,MAAM;CAEzC,MAAM,eAAe,EAAE,0BAA0B,CAAC,GAAG,yBAAyB;CAC9E,MAAM,cAAc,EAAE,0BAA0B,CAAC,GAAG,kBAAkB;CACtE,MAAM,iBAAiB,EAAE,0BAA0B,CAAC,GAAG,qBAAqB;CAE5E,gBAAgB;EACd,UAAU,WAAW,WAAW,KAAK;EACrC,UAAU,aAAa,KAAK,MAAM,SAAS,CAA6B;CAC1E,GAAG,CAAC,QAAQ,SAAS,CAAC;CAEtB,gBAAgB;EACd,IAAI,CAAC,QAAQ;EAEb,MAAM,YAAY;GAChB,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,GAAG;IACV,OAAO;IACP,OAAO;IACP,eAAe,QAAQ,IAAI;GAC7B,CAAC;GAED,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,GAAG;IACV,OAAO;IACP,OAAO;IACP,eAAe,iBAAiB;GAClC,CAAC;GACD,GAAI,OACA,CACE,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,KAAK;IACZ,OAAO;IACP,OAAO;IACP,eAAe,OAAO,MAAM,IAAI;GAClC,CAAC,CACH,IACA,CAAC;GACL,IAAI,YAAY,CAAC,EAAA,CACd,QAAQ,YAA2B,QAAQ,aAAa,UAAU,CAAC,QAAQ,QAAQ,CAAC,CACpF,KAAK,YACJ,UAAU,SAAS;IACjB,IAAI,kBAAkB,QAAQ,IAAI;IAClC,MAAM,QAAQ,eAAe,CAAC;IAC9B,OAAO,QAAQ,SAAS,QAAQ;IAChC,OAAO,QAAQ,MAAM,eAAe;IACpC,eAAe,KAAK,OAAO,QAAQ,SAAS;KAAE;KAAO,WAAW;IAAmB,CAAC;GACtF,CAAC,CACH;EACJ;EAEA,aAAa,UAAU,SAAS,YAAY,QAAQ,CAAC;CACvD,GAAG;EAAC;EAAQ;EAAU;EAAM;EAAQ;EAAO;EAAc;EAAa;CAAc,CAAC;CAIrF,gBAAgB;EACd,IAAI,CAAC,QAAQ,kBAAkB;EAE/B,IAAI,SAAS;EAEb,YAAY,CAAC,CAAC,MACX,cAAc,UAAU,iBAAiB,SAAS,SAC7C,UAAU,QAAQ,KAAK,CAC/B;EAEA,aAAa;GACX,SAAS;EACX;CACF,GAAG,CAAC,MAAM,gBAAgB,CAAC;CAE3B,IAAI,CAAC,UAAU,CAAC,kBAAkB,OAAO;CAEzC,OACE,oBAAC,kBAAD;EACQ;EACN,cAAc;EACd,cAAc,QAAQ,OAAO,gBAAgB,MAAM,UAAU,SAAS;EACtE,UAAU,MAAM,UAAU;CAC3B,CAAA;AAEL"}

package/dist/components/panel/shortcuts-overlay.js

@@ -2,7 +2,7 @@ import { usePageSchema, useT } from "../../context.js";
 import { Button } from "../ui/button.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog.js";
 import { ShortcutKeys } from "./shortcut-keys.js";
-import { bindingFromEvent, flattenActionGroup, saveShortcutOverrides, shortcutOverlayGroups, shortcuts } from "@alfakit/core";
+import { ShortcutRecorder, flattenActionGroup, saveShortcutOverrides, shortcutOverlayGroups, shortcuts } from "@alfakit/core";
 import { useEffect, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/panel/shortcuts-overlay.tsx
@@ -31,26 +31,29 @@ function ShortcutsOverlay({ open, onOpenChange, customizable, endpoint }) {
 	useEffect(() => {
 		if (!recording) return;
 		shortcuts.setPaused(true);
+		const recorder = new ShortcutRecorder({ onDone: (binding) => {
+			setRecording(null);
+			const conflict = shortcuts.conflict([binding], recording);
+			if (conflict) {
+				setMessage(t("shortcuts.conflict", { label: conflict.label }, `Already used by “${conflict.label}”.`));
+				return;
+			}
+			save(recording, [binding]);
+		} });
 		const listener = (event) => {
 			event.preventDefault();
 			event.stopPropagation();
 			if (event.key === "Escape") {
+				recorder.cancel();
 				setRecording(null);
 				setMessage(t("shortcuts.cancelled", {}, "Change cancelled."));
 				return;
 			}
-			const binding = bindingFromEvent(event);
-			if (!binding) return;
-			const conflict = shortcuts.conflict([binding], recording);
-			setRecording(null);
-			if (conflict) {
-				setMessage(t("shortcuts.conflict", { label: conflict.label }, `Already used by “${conflict.label}”.`));
-				return;
-			}
-			save(recording, [binding]);
+			recorder.press(event);
 		};
 		window.addEventListener("keydown", listener, true);
 		return () => {
+			recorder.cancel();
 			window.removeEventListener("keydown", listener, true);
 			shortcuts.setPaused(false);
 		};

package/dist/components/panel/shortcuts-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"shortcuts-overlay.js","names":[],"sources":["../../../src/components/panel/shortcuts-overlay.tsx"],"sourcesContent":["import type { ShortcutListGroup, ShortcutListItem } from '@alfakit/core'\nimport {\n  bindingFromEvent,\n  flattenActionGroup,\n  saveShortcutOverrides,\n  shortcutOverlayGroups,\n  shortcuts,\n} from '@alfakit/core'\nimport { useEffect, useState, useSyncExternalStore } from 'react'\nimport { usePageSchema, useT } from '../../context'\nimport { Button } from '../ui/button'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog'\nimport { ShortcutKeys } from './shortcut-keys'\n\nconst subscribe = (listener: () => void) => shortcuts.subscribe(listener)\nconst version = () => shortcuts.getVersion()\n\n/**\n * The `?` overlay: every shortcut available on the page, grouped; users may change their\n * keys (stored on the server). `KeyboardShortcuts` loads it the first time it opens.\n */\nexport function ShortcutsOverlay({\n  open,\n  onOpenChange,\n  customizable,\n  endpoint,\n}: {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  customizable: boolean\n  endpoint?: string\n}) {\n  const t = useT()\n  const page = usePageSchema()\n  useSyncExternalStore(subscribe, version, version)\n  const [recording, setRecording] = useState<string | null>(null)\n  const [message, setMessage] = useState('')\n\n  const groups = shortcutOverlayGroups(\n    shortcuts.list(),\n    flattenActionGroup(page?.headerActions ?? []),\n  )\n\n  const save = async (id: string, keys: string[] | null) => {\n    if (!endpoint) return\n\n    try {\n      shortcuts.setOverrides(await saveShortcutOverrides(endpoint, { [id]: keys }))\n      setMessage(t('shortcuts.saved', {}, 'Shortcut saved.'))\n    } catch {\n      setMessage(t('shortcuts.save_failed', {}, 'The shortcut could not be saved.'))\n    }\n  }\n\n  // While recording, the next key press is the new binding (Escape cancels). Listening in the\n  // capture phase keeps the key from closing the dialog or running another shortcut.\n  useEffect(() => {\n    if (!recording) return\n\n    shortcuts.setPaused(true)\n\n    const listener = (event: KeyboardEvent) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (event.key === 'Escape') {\n        setRecording(null)\n        setMessage(t('shortcuts.cancelled', {}, 'Change cancelled.'))\n\n        return\n      }\n\n      const binding = bindingFromEvent(event)\n\n      if (!binding) return\n\n      const conflict = shortcuts.conflict([binding], recording)\n\n      setRecording(null)\n\n      if (conflict) {\n        setMessage(\n          t(\n            'shortcuts.conflict',\n            { label: conflict.label },\n            `Already used by “${conflict.label}”.`,\n          ),\n        )\n\n        return\n      }\n\n      void save(recording, [binding])\n    }\n\n    window.addEventListener('keydown', listener, true)\n\n    return () => {\n      window.removeEventListener('keydown', listener, true)\n      shortcuts.setPaused(false)\n    }\n    // `save` and `t` only change with the endpoint and the locale.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [recording])\n\n  const groupLabel = (group: ShortcutListGroup['group']) =>\n    ({\n      general: t('shortcuts.groups.general', {}, 'General'),\n      navigation: t('shortcuts.groups.navigation', {}, 'Navigation'),\n      commands: t('shortcuts.groups.commands', {}, 'Commands'),\n      actions: t('shortcuts.groups.actions', {}, 'Actions on this page'),\n    })[group]\n\n  const change = (item: ShortcutListItem) => {\n    setMessage(\n      t(\n        'shortcuts.recording',\n        { label: item.label },\n        `Press the new keys for “${item.label}”. Escape cancels.`,\n      ),\n    )\n    setRecording(item.id)\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        setRecording(null)\n        setMessage('')\n        onOpenChange(next)\n      }}\n    >\n      <DialogContent className=\"max-h-[85vh] overflow-y-auto sm:max-w-lg\">\n        <div data-slot=\"shortcuts-overlay\" className=\"flex flex-col gap-4\">\n          <DialogHeader>\n            <DialogTitle>{t('shortcuts.title', {}, 'Keyboard shortcuts')}</DialogTitle>\n            <DialogDescription>\n              {t('shortcuts.description', {}, 'Shortcuts available on this page.')}\n            </DialogDescription>\n          </DialogHeader>\n          <div role=\"status\" aria-live=\"polite\" className=\"text-muted-foreground min-h-5 text-sm\">\n            {message}\n          </div>\n          <div className=\"flex flex-col gap-5\">\n            {groups.map((group) => (\n              <section\n                key={group.group}\n                data-group={group.group}\n                aria-labelledby={`shortcuts-${group.group}`}\n              >\n                <h3\n                  id={`shortcuts-${group.group}`}\n                  className=\"text-muted-foreground mb-2 text-xs font-medium uppercase\"\n                >\n                  {groupLabel(group.group)}\n                </h3>\n                <ul className=\"flex flex-col divide-y rounded-md border\">\n                  {group.items.map((item) => (\n                    <li\n                      key={item.id}\n                      data-shortcut={item.id}\n                      className=\"flex items-center gap-3 px-3 py-2 text-sm\"\n                    >\n                      <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n                      {recording === item.id ? (\n                        <span className=\"text-primary text-xs\">\n                          {t('shortcuts.press_keys', {}, 'Press keys…')}\n                        </span>\n                      ) : item.keys.length === 0 ? (\n                        <span className=\"text-muted-foreground text-xs\">\n                          {t('shortcuts.off', {}, 'Off')}\n                        </span>\n                      ) : (\n                        <span className=\"flex flex-wrap items-center justify-end gap-2\">\n                          {item.keys.map((key) => (\n                            <ShortcutKeys key={key} binding={key} />\n                          ))}\n                        </span>\n                      )}\n                      {customizable && item.customizable && (\n                        <span className=\"flex shrink-0 gap-1\">\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"xs\"\n                            aria-label={t(\n                              'shortcuts.change_label',\n                              { label: item.label },\n                              `Change the shortcut for ${item.label}`,\n                            )}\n                            onClick={() => change(item)}\n                          >\n                            {t('shortcuts.change', {}, 'Change')}\n                          </Button>\n                          {item.keys.length > 0 && (\n                            <Button\n                              type=\"button\"\n                              variant=\"ghost\"\n                              size=\"xs\"\n                              aria-label={t(\n                                'shortcuts.turn_off_label',\n                                { label: item.label },\n                                `Turn off the shortcut for ${item.label}`,\n                              )}\n                              onClick={() => void save(item.id, [])}\n                            >\n                              {t('shortcuts.turn_off', {}, 'Turn off')}\n                            </Button>\n                          )}\n                          {item.customized && (\n                            <Button\n                              type=\"button\"\n                              variant=\"ghost\"\n                              size=\"xs\"\n                              aria-label={t(\n                                'shortcuts.reset_label',\n                                { label: item.label },\n                                `Restore the default shortcut for ${item.label}`,\n                              )}\n                              onClick={() => void save(item.id, null)}\n                            >\n                              {t('shortcuts.reset', {}, 'Reset')}\n                            </Button>\n                          )}\n                        </span>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))}\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"shortcuts-overlay.js","names":[],"sources":["../../../src/components/panel/shortcuts-overlay.tsx"],"sourcesContent":["import type { ShortcutListGroup, ShortcutListItem } from '@alfakit/core'\nimport {\n  ShortcutRecorder,\n  flattenActionGroup,\n  saveShortcutOverrides,\n  shortcutOverlayGroups,\n  shortcuts,\n} from '@alfakit/core'\nimport { useEffect, useState, useSyncExternalStore } from 'react'\nimport { usePageSchema, useT } from '../../context'\nimport { Button } from '../ui/button'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog'\nimport { ShortcutKeys } from './shortcut-keys'\n\nconst subscribe = (listener: () => void) => shortcuts.subscribe(listener)\nconst version = () => shortcuts.getVersion()\n\n/**\n * The `?` overlay: every shortcut available on the page, grouped; users may change their\n * keys (stored on the server). `KeyboardShortcuts` loads it the first time it opens.\n */\nexport function ShortcutsOverlay({\n  open,\n  onOpenChange,\n  customizable,\n  endpoint,\n}: {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  customizable: boolean\n  endpoint?: string\n}) {\n  const t = useT()\n  const page = usePageSchema()\n  useSyncExternalStore(subscribe, version, version)\n  const [recording, setRecording] = useState<string | null>(null)\n  const [message, setMessage] = useState('')\n\n  const groups = shortcutOverlayGroups(\n    shortcuts.list(),\n    flattenActionGroup(page?.headerActions ?? []),\n  )\n\n  const save = async (id: string, keys: string[] | null) => {\n    if (!endpoint) return\n\n    try {\n      shortcuts.setOverrides(await saveShortcutOverrides(endpoint, { [id]: keys }))\n      setMessage(t('shortcuts.saved', {}, 'Shortcut saved.'))\n    } catch {\n      setMessage(t('shortcuts.save_failed', {}, 'The shortcut could not be saved.'))\n    }\n  }\n\n  // While recording, the keys pressed are the new binding: one key (with modifiers) or a\n  // sequence (\"g o\"), finished a second after the last key (Escape cancels). Listening in\n  // the capture phase keeps the keys from closing the dialog or running another shortcut.\n  useEffect(() => {\n    if (!recording) return\n\n    shortcuts.setPaused(true)\n\n    const recorder = new ShortcutRecorder({\n      onDone: (binding) => {\n        setRecording(null)\n\n        const conflict = shortcuts.conflict([binding], recording)\n\n        if (conflict) {\n          setMessage(\n            t(\n              'shortcuts.conflict',\n              { label: conflict.label },\n              `Already used by “${conflict.label}”.`,\n            ),\n          )\n\n          return\n        }\n\n        void save(recording, [binding])\n      },\n    })\n\n    const listener = (event: KeyboardEvent) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (event.key === 'Escape') {\n        recorder.cancel()\n        setRecording(null)\n        setMessage(t('shortcuts.cancelled', {}, 'Change cancelled.'))\n\n        return\n      }\n\n      recorder.press(event)\n    }\n\n    window.addEventListener('keydown', listener, true)\n\n    return () => {\n      recorder.cancel()\n      window.removeEventListener('keydown', listener, true)\n      shortcuts.setPaused(false)\n    }\n    // `save` and `t` only change with the endpoint and the locale.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [recording])\n\n  const groupLabel = (group: ShortcutListGroup['group']) =>\n    ({\n      general: t('shortcuts.groups.general', {}, 'General'),\n      navigation: t('shortcuts.groups.navigation', {}, 'Navigation'),\n      commands: t('shortcuts.groups.commands', {}, 'Commands'),\n      actions: t('shortcuts.groups.actions', {}, 'Actions on this page'),\n    })[group]\n\n  const change = (item: ShortcutListItem) => {\n    setMessage(\n      t(\n        'shortcuts.recording',\n        { label: item.label },\n        `Press the new keys for “${item.label}”. Escape cancels.`,\n      ),\n    )\n    setRecording(item.id)\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        setRecording(null)\n        setMessage('')\n        onOpenChange(next)\n      }}\n    >\n      <DialogContent className=\"max-h-[85vh] overflow-y-auto sm:max-w-lg\">\n        <div data-slot=\"shortcuts-overlay\" className=\"flex flex-col gap-4\">\n          <DialogHeader>\n            <DialogTitle>{t('shortcuts.title', {}, 'Keyboard shortcuts')}</DialogTitle>\n            <DialogDescription>\n              {t('shortcuts.description', {}, 'Shortcuts available on this page.')}\n            </DialogDescription>\n          </DialogHeader>\n          <div role=\"status\" aria-live=\"polite\" className=\"text-muted-foreground min-h-5 text-sm\">\n            {message}\n          </div>\n          <div className=\"flex flex-col gap-5\">\n            {groups.map((group) => (\n              <section\n                key={group.group}\n                data-group={group.group}\n                aria-labelledby={`shortcuts-${group.group}`}\n              >\n                <h3\n                  id={`shortcuts-${group.group}`}\n                  className=\"text-muted-foreground mb-2 text-xs font-medium uppercase\"\n                >\n                  {groupLabel(group.group)}\n                </h3>\n                <ul className=\"flex flex-col divide-y rounded-md border\">\n                  {group.items.map((item) => (\n                    <li\n                      key={item.id}\n                      data-shortcut={item.id}\n                      className=\"flex items-center gap-3 px-3 py-2 text-sm\"\n                    >\n                      <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n                      {recording === item.id ? (\n                        <span className=\"text-primary text-xs\">\n                          {t('shortcuts.press_keys', {}, 'Press keys…')}\n                        </span>\n                      ) : item.keys.length === 0 ? (\n                        <span className=\"text-muted-foreground text-xs\">\n                          {t('shortcuts.off', {}, 'Off')}\n                        </span>\n                      ) : (\n                        <span className=\"flex flex-wrap items-center justify-end gap-2\">\n                          {item.keys.map((key) => (\n                            <ShortcutKeys key={key} binding={key} />\n                          ))}\n                        </span>\n                      )}\n                      {customizable && item.customizable && (\n                        <span className=\"flex shrink-0 gap-1\">\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"xs\"\n                            aria-label={t(\n                              'shortcuts.change_label',\n                              { label: item.label },\n                              `Change the shortcut for ${item.label}`,\n                            )}\n                            onClick={() => change(item)}\n                          >\n                            {t('shortcuts.change', {}, 'Change')}\n                          </Button>\n                          {item.keys.length > 0 && (\n                            <Button\n                              type=\"button\"\n                              variant=\"ghost\"\n                              size=\"xs\"\n                              aria-label={t(\n                                'shortcuts.turn_off_label',\n                                { label: item.label },\n                                `Turn off the shortcut for ${item.label}`,\n                              )}\n                              onClick={() => void save(item.id, [])}\n                            >\n                              {t('shortcuts.turn_off', {}, 'Turn off')}\n                            </Button>\n                          )}\n                          {item.customized && (\n                            <Button\n                              type=\"button\"\n                              variant=\"ghost\"\n                              size=\"xs\"\n                              aria-label={t(\n                                'shortcuts.reset_label',\n                                { label: item.label },\n                                `Restore the default shortcut for ${item.label}`,\n                              )}\n                              onClick={() => void save(item.id, null)}\n                            >\n                              {t('shortcuts.reset', {}, 'Reset')}\n                            </Button>\n                          )}\n                        </span>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))}\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":"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"}

package/dist/components/table/column-manager.js

@@ -56,11 +56,11 @@ function ColumnManager({ table, token, component }) {
 		if (deferred) setDraft(next);
 		else visitTable(table.identifier, { columns: next }, ["page"]);
 	};
-	const save = async (order) => {
+	const save = async (order, options = {}) => {
 		if (!panel.endpoints.tableColumns) return false;
 		setSaving(true);
 		try {
-			await saveColumnOrder(panel.endpoints.tableColumns, token, component, order);
+			await saveColumnOrder(panel.endpoints.tableColumns, token, component, order, options);
 			return true;
 		} catch (error) {
 			showToast({
@@ -107,13 +107,13 @@ function ColumnManager({ table, token, component }) {
 		setOrderDraft(null);
 		setAnnouncement("");
 		setOpen(false);
-		if (orderDraft && orderChanged) await save(orderDraft);
+		if (orderDraft && orderChanged) await save(orderDraft, { reload: !columns });
 		if (columns) visitTable(table.identifier, { columns }, ["page"]);
 	};
 	const reset = async () => {
 		if (reorderable) {
 			setOrderDraft(null);
-			await save([]);
+			await save([], { reload: !toggleable });
 		}
 		if (toggleable) {
 			setDraft(null);

package/dist/components/table/column-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-manager.js","names":[],"sources":["../../../src/components/table/column-manager.tsx"],"sourcesContent":["import type { TableSchema } from '@alfakit/core'\nimport {\n  columnDraftChanged,\n  columnManagerPosition,\n  columnOrderChanged,\n  defaultVisibleColumns,\n  FILTERS_MODAL_WIDTH_CLASSES,\n  gridColumnsClasses,\n  keepMoveButtonFocus,\n  moveColumnInManager,\n  moveColumnTo,\n  orderColumnsBy,\n  saveColumnOrder,\n  slideOverSide,\n  toggleVisibleColumn,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from 'lucide-react'\nimport { useId, useState, type ReactNode } from 'react'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { showToast } from '../notifications/flash-toasts'\nimport { Button } from '../ui/button'\nimport { Checkbox } from '../ui/checkbox'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '../ui/dialog'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '../ui/sheet'\nimport { TableTriggerButton } from './trigger-button'\n\n/**\n * The column manager: show / hide toggleable columns (kept in the query string) and,\n * with `reorderableColumns()`, move columns (stored per user on the server) by dragging a\n * row onto another or with the move up / down buttons (the keyboard path).\n *\n * `deferColumnManager()` keeps toggles in a draft until \"Apply\"; `columnManagerLayout()`\n * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.\n */\nexport function ColumnManager({\n  table,\n  token,\n  component,\n}: {\n  table: TableSchema\n  token: string\n  component: string\n}) {\n  const t = useT()\n  const panel = usePanel()\n  const direction = useDirection()\n  const [open, setOpen] = useState(false)\n  const [saving, setSaving] = useState(false)\n  const [dragging, setDragging] = useState<string | null>(null)\n  const [dropTarget, setDropTarget] = useState<string | null>(null)\n  // Toggles of a deferred column manager wait here until \"Apply\".\n  const [draft, setDraft] = useState<string[] | null>(null)\n  // A moved column order: the draft of a deferred column manager, or shown at once\n  // while it is saved.\n  // It belongs to the columns it was made from: the server's next order replaces the\n  // one shown while saving.\n  const [orderState, setOrderState] = useState<{\n    order: string[]\n    columns: TableSchema['columns']\n  } | null>(null)\n  // Screen-reader announcement of the last move.\n  const [announcement, setAnnouncement] = useState('')\n  const idBase = useId()\n  const reorderable = Boolean(table.reorderableColumns && panel.endpoints.tableColumns)\n  const toggleable = Boolean(table.toggleableColumns)\n  const deferred = Boolean(table.deferColumnManager)\n  const orderDraft =\n    orderState && (deferred || orderState.columns === table.columns) ? orderState.order : null\n  const setOrderDraft = (order: string[] | null) =>\n    setOrderState(order ? { order, columns: table.columns } : null)\n  const appliedNames = table.columns.map((column) => column.name)\n  const names = orderDraft ?? appliedNames\n  const columns = orderColumnsBy(\n    reorderable ? table.columns : table.columns.filter((column) => column.toggleable),\n    orderDraft,\n  )\n  const visible = draft ?? table.visibleColumns\n\n  if (!toggleable && !reorderable) return null\n\n  const trigger = triggerButtonView(table, 'columnManager', {\n    label: t('table.columns', {}, 'Columns'),\n    showLabel: false,\n  })\n\n  if (!trigger) return null\n\n  const toggle = (name: string) => {\n    const next = toggleVisibleColumn(visible, name)\n\n    if (deferred) {\n      setDraft(next)\n    } else {\n      visitTable(table.identifier, { columns: next }, ['page'])\n    }\n  }\n\n  const save = async (order: string[]): Promise<boolean> => {\n    if (!panel.endpoints.tableColumns) return false\n\n    setSaving(true)\n\n    try {\n      await saveColumnOrder(panel.endpoints.tableColumns, token, component, order)\n\n      return true\n    } catch (error) {\n      showToast({\n        id: 'alfakit-column-order-failed',\n        title: t('table.column_order_failed', {}, \"Couldn't save the column order\"),\n        body: error instanceof Error ? error.message : String(error),\n        status: 'danger',\n        format: 'alfakit',\n      })\n\n      return false\n    } finally {\n      setSaving(false)\n    }\n  }\n\n  const announce = (name: string, order: string[]) => {\n    const { position, count, group } = columnManagerPosition(order, name, table.columnGroups)\n    const label = table.columns.find((column) => column.name === name)?.label ?? name\n    const replace = { column: label, position, count, group: group ?? '' }\n\n    setAnnouncement(\n      group\n        ? deferred\n          ? t(\n              'table.column_manager.reordered_in_group_deferred',\n              replace,\n              `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`,\n            )\n          : t(\n              'table.column_manager.reordered_in_group',\n              replace,\n              `${label} moved to position ${position} of ${count} in ${group}.`,\n            )\n        : deferred\n          ? t(\n              'table.column_manager.reordered_deferred',\n              replace,\n              `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`,\n            )\n          : t(\n              'table.column_manager.reordered',\n              replace,\n              `${label} moved to position ${position} of ${count}.`,\n            ),\n    )\n  }\n\n  // A new order: kept as a draft until \"Apply\" (`deferColumnManager()`), else saved now.\n  const reorder = (name: string, order: string[]) => {\n    if (saving || !columnOrderChanged(names, order)) return\n\n    setOrderDraft(order)\n    setAnnouncement('')\n\n    if (deferred) {\n      announce(name, order)\n\n      return\n    }\n\n    void save(order).then((saved) => (saved ? announce(name, order) : setOrderDraft(null)))\n  }\n\n  const move = (name: string, offset: -1 | 1, button: HTMLElement) => {\n    keepMoveButtonFocus(button)\n    reorder(name, moveColumnInManager(names, name, offset, table.columnGroups))\n  }\n\n  const orderChanged = Boolean(orderDraft && columnOrderChanged(appliedNames, orderDraft))\n\n  // The order is saved before the visibility visit: both requests share the session, and a\n  // visit running alongside the save would write the old order back when it finishes.\n  const apply = async () => {\n    const columns = draft && columnDraftChanged(table.visibleColumns, draft) ? draft : null\n\n    setDraft(null)\n    setOrderDraft(null)\n    setAnnouncement('')\n    setOpen(false)\n\n    if (orderDraft && orderChanged) await save(orderDraft)\n\n    if (columns) visitTable(table.identifier, { columns }, ['page'])\n  }\n\n  // Reset: the defined column order and, for toggleable columns, the default visibility.\n  const reset = async () => {\n    if (reorderable) {\n      setOrderDraft(null)\n      await save([])\n    }\n\n    if (toggleable) {\n      setDraft(null)\n      visitTable(table.identifier, { columns: defaultVisibleColumns(table) }, ['page'])\n    }\n  }\n\n  const resetView = triggerButtonView(table, 'columnManagerReset', {\n    label: toggleable\n      ? t('table.reset_columns', {}, 'Reset')\n      : t('table.reset_column_order', {}, 'Reset column order'),\n    variant: 'ghost',\n  })\n  const applyView = deferred\n    ? triggerButtonView(table, 'columnManagerApply', {\n        label: t('table_filters.apply', {}, 'Apply'),\n        variant: 'default',\n      })\n    : null\n  const resetButton = resetView ? (\n    <TableTriggerButton\n      view={resetView}\n      disabled={saving}\n      data-slot=\"column-manager-reset\"\n      className={cn(!applyView && 'w-full')}\n      onClick={() => void reset()}\n    />\n  ) : null\n  const inHeader = table.columnManagerResetActionPosition === 'header'\n\n  const list = (\n    <ul\n      className={cn(\n        table.columnManagerColumns\n          ? ['grid gap-0.5', gridColumnsClasses(table.columnManagerColumns)]\n          : 'flex flex-col gap-0.5',\n      )}\n      aria-label={t('table.columns', {}, 'Columns')}\n    >\n      {columns.map((column) => {\n        const { position, count, group } = columnManagerPosition(\n          names,\n          column.name,\n          table.columnGroups,\n        )\n        const positionId = `${idBase}-${column.name}-position`\n\n        return (\n          <li\n            key={column.name}\n            data-column={column.name}\n            draggable={reorderable && !saving}\n            onDragStart={(event) => {\n              if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'\n              setDragging(column.name)\n            }}\n            onDragOver={(event) => {\n              if (dragging === null) return\n\n              event.preventDefault()\n              if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'\n              setDropTarget(column.name)\n            }}\n            onDragLeave={() => dropTarget === column.name && setDropTarget(null)}\n            onDragEnd={() => {\n              setDragging(null)\n              setDropTarget(null)\n            }}\n            onDrop={(event) => {\n              event.preventDefault()\n\n              if (dragging !== null && dragging !== column.name) {\n                reorder(dragging, moveColumnTo(names, dragging, column.name))\n              }\n\n              setDragging(null)\n              setDropTarget(null)\n            }}\n            className={cn(\n              'flex items-center gap-2 rounded-md px-2 py-1 text-sm',\n              reorderable && 'cursor-grab',\n              dragging === column.name && 'opacity-50',\n              dropTarget === column.name && dragging !== column.name && 'bg-muted',\n            )}\n          >\n            {reorderable && (\n              <GripVerticalIcon\n                className=\"text-muted-foreground size-4 shrink-0\"\n                aria-hidden=\"true\"\n              />\n            )}\n            {column.toggleable ? (\n              <label className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <Checkbox\n                  checked={visible.includes(column.name)}\n                  onCheckedChange={() => toggle(column.name)}\n                />\n                <span className=\"truncate\">{column.label}</span>\n              </label>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{column.label}</span>\n            )}\n            {reorderable && (\n              <span className=\"flex shrink-0 items-center\">\n                <span id={positionId} className=\"sr-only\" data-slot=\"column-manager-position\">\n                  {group\n                    ? t(\n                        'table.column_manager.position_in_group',\n                        { position, count, group },\n                        `Position ${position} of ${count} in ${group}.`,\n                      )\n                    : t(\n                        'table.column_manager.position',\n                        { position, count },\n                        `Position ${position} of ${count}.`,\n                      )}\n                </span>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  disabled={position <= 1}\n                  aria-disabled={saving || undefined}\n                  aria-describedby={positionId}\n                  aria-label={t(\n                    'table.move_column_up',\n                    { column: column.label },\n                    `Move ${column.label} up`,\n                  )}\n                  onClick={(event) => move(column.name, -1, event.currentTarget)}\n                >\n                  <ChevronUpIcon />\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  disabled={position >= count}\n                  aria-disabled={saving || undefined}\n                  aria-describedby={positionId}\n                  aria-label={t(\n                    'table.move_column_down',\n                    { column: column.label },\n                    `Move ${column.label} down`,\n                  )}\n                  onClick={(event) => move(column.name, 1, event.currentTarget)}\n                >\n                  <ChevronDownIcon />\n                </Button>\n              </span>\n            )}\n          </li>\n        )\n      })}\n    </ul>\n  )\n\n  const body: ReactNode = (\n    <div className=\"flex flex-col gap-1\">\n      {inHeader && resetButton && <div className=\"flex justify-end\">{resetButton}</div>}\n      {list}\n      {reorderable && (\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          className=\"sr-only\"\n          data-slot=\"column-manager-announcement\"\n        >\n          {announcement}\n        </div>\n      )}\n      {((!inHeader && resetButton) || applyView) && (\n        <div className=\"mt-1 flex items-center justify-end gap-2\">\n          {!inHeader && resetButton}\n          {applyView && (\n            <TableTriggerButton\n              view={applyView}\n              data-slot=\"column-manager-apply\"\n              disabled={\n                !orderChanged && (!draft || !columnDraftChanged(table.visibleColumns, draft))\n              }\n              onClick={() => void apply()}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  )\n\n  const onOpenChange = (next: boolean) => {\n    // Closing without \"Apply\" drops the draft.\n    if (!next) {\n      setDraft(null)\n      if (deferred) setOrderDraft(null)\n      setAnnouncement('')\n    }\n    setOpen(next)\n  }\n\n  const triggerButton = (\n    <TableTriggerButton\n      view={trigger}\n      defaultIcon={<Icon name=\"alfakit::tables.actions.column-manager\" fallback={Columns3Icon} />}\n      aria-label={trigger.showLabel ? undefined : trigger.label}\n    />\n  )\n\n  if (table.columnManagerLayout === 'modal') {\n    // `columnManagerTriggerAction()` may set `slideOver()`, `modalWidth()` and the heading.\n    const modal = table.triggerActions?.columnManager?.modal\n    const heading = modal?.heading ?? t('table.columns', {}, 'Columns')\n    const description = modal?.description ?? table.pluralModelLabel\n    const widthClass = modal?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.width] : undefined\n\n    if (modal?.slideOver) {\n      return (\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetTrigger asChild>{triggerButton}</SheetTrigger>\n          <SheetContent\n            side={slideOverSide(modal.slideOverPosition, direction)}\n            className={cn('flex w-full flex-col gap-0 p-0', widthClass ?? 'sm:max-w-md')}\n            data-slot=\"column-manager\"\n            data-slide-over=\"\"\n          >\n            <SheetHeader className=\"border-b\">\n              <SheetTitle>{heading}</SheetTitle>\n              <SheetDescription className={modal.description ? undefined : 'sr-only'}>\n                {description}\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"flex-1 overflow-y-auto p-4\">{body}</div>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <DialogTrigger asChild>{triggerButton}</DialogTrigger>\n        <DialogContent className={widthClass ?? 'sm:max-w-lg'} data-slot=\"column-manager\">\n          <DialogHeader>\n            <DialogTitle>{heading}</DialogTitle>\n            <DialogDescription className={modal?.description ? undefined : 'sr-only'}>\n              {description}\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"max-h-[60vh] overflow-y-auto\">{body}</div>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        className={cn('p-2', table.columnManagerColumns ? 'w-auto min-w-64' : 'w-64')}\n        data-slot=\"column-manager\"\n      >\n        {body}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"column-manager.js","names":[],"sources":["../../../src/components/table/column-manager.tsx"],"sourcesContent":["import type { TableSchema } from '@alfakit/core'\nimport {\n  columnDraftChanged,\n  columnManagerPosition,\n  columnOrderChanged,\n  defaultVisibleColumns,\n  FILTERS_MODAL_WIDTH_CLASSES,\n  gridColumnsClasses,\n  keepMoveButtonFocus,\n  moveColumnInManager,\n  moveColumnTo,\n  orderColumnsBy,\n  saveColumnOrder,\n  slideOverSide,\n  toggleVisibleColumn,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from 'lucide-react'\nimport { useId, useState, type ReactNode } from 'react'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { showToast } from '../notifications/flash-toasts'\nimport { Button } from '../ui/button'\nimport { Checkbox } from '../ui/checkbox'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '../ui/dialog'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '../ui/sheet'\nimport { TableTriggerButton } from './trigger-button'\n\n/**\n * The column manager: show / hide toggleable columns (kept in the query string) and,\n * with `reorderableColumns()`, move columns (stored per user on the server) by dragging a\n * row onto another or with the move up / down buttons (the keyboard path).\n *\n * `deferColumnManager()` keeps toggles in a draft until \"Apply\"; `columnManagerLayout()`\n * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.\n */\nexport function ColumnManager({\n  table,\n  token,\n  component,\n}: {\n  table: TableSchema\n  token: string\n  component: string\n}) {\n  const t = useT()\n  const panel = usePanel()\n  const direction = useDirection()\n  const [open, setOpen] = useState(false)\n  const [saving, setSaving] = useState(false)\n  const [dragging, setDragging] = useState<string | null>(null)\n  const [dropTarget, setDropTarget] = useState<string | null>(null)\n  // Toggles of a deferred column manager wait here until \"Apply\".\n  const [draft, setDraft] = useState<string[] | null>(null)\n  // A moved column order: the draft of a deferred column manager, or shown at once\n  // while it is saved.\n  // It belongs to the columns it was made from: the server's next order replaces the\n  // one shown while saving.\n  const [orderState, setOrderState] = useState<{\n    order: string[]\n    columns: TableSchema['columns']\n  } | null>(null)\n  // Screen-reader announcement of the last move.\n  const [announcement, setAnnouncement] = useState('')\n  const idBase = useId()\n  const reorderable = Boolean(table.reorderableColumns && panel.endpoints.tableColumns)\n  const toggleable = Boolean(table.toggleableColumns)\n  const deferred = Boolean(table.deferColumnManager)\n  const orderDraft =\n    orderState && (deferred || orderState.columns === table.columns) ? orderState.order : null\n  const setOrderDraft = (order: string[] | null) =>\n    setOrderState(order ? { order, columns: table.columns } : null)\n  const appliedNames = table.columns.map((column) => column.name)\n  const names = orderDraft ?? appliedNames\n  const columns = orderColumnsBy(\n    reorderable ? table.columns : table.columns.filter((column) => column.toggleable),\n    orderDraft,\n  )\n  const visible = draft ?? table.visibleColumns\n\n  if (!toggleable && !reorderable) return null\n\n  const trigger = triggerButtonView(table, 'columnManager', {\n    label: t('table.columns', {}, 'Columns'),\n    showLabel: false,\n  })\n\n  if (!trigger) return null\n\n  const toggle = (name: string) => {\n    const next = toggleVisibleColumn(visible, name)\n\n    if (deferred) {\n      setDraft(next)\n    } else {\n      visitTable(table.identifier, { columns: next }, ['page'])\n    }\n  }\n\n  const save = async (order: string[], options: { reload?: boolean } = {}): Promise<boolean> => {\n    if (!panel.endpoints.tableColumns) return false\n\n    setSaving(true)\n\n    try {\n      await saveColumnOrder(panel.endpoints.tableColumns, token, component, order, options)\n\n      return true\n    } catch (error) {\n      showToast({\n        id: 'alfakit-column-order-failed',\n        title: t('table.column_order_failed', {}, \"Couldn't save the column order\"),\n        body: error instanceof Error ? error.message : String(error),\n        status: 'danger',\n        format: 'alfakit',\n      })\n\n      return false\n    } finally {\n      setSaving(false)\n    }\n  }\n\n  const announce = (name: string, order: string[]) => {\n    const { position, count, group } = columnManagerPosition(order, name, table.columnGroups)\n    const label = table.columns.find((column) => column.name === name)?.label ?? name\n    const replace = { column: label, position, count, group: group ?? '' }\n\n    setAnnouncement(\n      group\n        ? deferred\n          ? t(\n              'table.column_manager.reordered_in_group_deferred',\n              replace,\n              `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`,\n            )\n          : t(\n              'table.column_manager.reordered_in_group',\n              replace,\n              `${label} moved to position ${position} of ${count} in ${group}.`,\n            )\n        : deferred\n          ? t(\n              'table.column_manager.reordered_deferred',\n              replace,\n              `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`,\n            )\n          : t(\n              'table.column_manager.reordered',\n              replace,\n              `${label} moved to position ${position} of ${count}.`,\n            ),\n    )\n  }\n\n  // A new order: kept as a draft until \"Apply\" (`deferColumnManager()`), else saved now.\n  const reorder = (name: string, order: string[]) => {\n    if (saving || !columnOrderChanged(names, order)) return\n\n    setOrderDraft(order)\n    setAnnouncement('')\n\n    if (deferred) {\n      announce(name, order)\n\n      return\n    }\n\n    void save(order).then((saved) => (saved ? announce(name, order) : setOrderDraft(null)))\n  }\n\n  const move = (name: string, offset: -1 | 1, button: HTMLElement) => {\n    keepMoveButtonFocus(button)\n    reorder(name, moveColumnInManager(names, name, offset, table.columnGroups))\n  }\n\n  const orderChanged = Boolean(orderDraft && columnOrderChanged(appliedNames, orderDraft))\n\n  // The order is saved before the visibility visit: both requests share the session, and a\n  // visit running alongside the save would write the old order back when it finishes.\n  const apply = async () => {\n    const columns = draft && columnDraftChanged(table.visibleColumns, draft) ? draft : null\n\n    setDraft(null)\n    setOrderDraft(null)\n    setAnnouncement('')\n    setOpen(false)\n\n    // The visibility visit renders the new order too: no second reload racing it.\n    if (orderDraft && orderChanged) await save(orderDraft, { reload: !columns })\n\n    if (columns) visitTable(table.identifier, { columns }, ['page'])\n  }\n\n  // Reset: the defined column order and, for toggleable columns, the default visibility.\n  const reset = async () => {\n    if (reorderable) {\n      setOrderDraft(null)\n      // The visibility visit below renders the defined order too.\n      await save([], { reload: !toggleable })\n    }\n\n    if (toggleable) {\n      setDraft(null)\n      visitTable(table.identifier, { columns: defaultVisibleColumns(table) }, ['page'])\n    }\n  }\n\n  const resetView = triggerButtonView(table, 'columnManagerReset', {\n    label: toggleable\n      ? t('table.reset_columns', {}, 'Reset')\n      : t('table.reset_column_order', {}, 'Reset column order'),\n    variant: 'ghost',\n  })\n  const applyView = deferred\n    ? triggerButtonView(table, 'columnManagerApply', {\n        label: t('table_filters.apply', {}, 'Apply'),\n        variant: 'default',\n      })\n    : null\n  const resetButton = resetView ? (\n    <TableTriggerButton\n      view={resetView}\n      disabled={saving}\n      data-slot=\"column-manager-reset\"\n      className={cn(!applyView && 'w-full')}\n      onClick={() => void reset()}\n    />\n  ) : null\n  const inHeader = table.columnManagerResetActionPosition === 'header'\n\n  const list = (\n    <ul\n      className={cn(\n        table.columnManagerColumns\n          ? ['grid gap-0.5', gridColumnsClasses(table.columnManagerColumns)]\n          : 'flex flex-col gap-0.5',\n      )}\n      aria-label={t('table.columns', {}, 'Columns')}\n    >\n      {columns.map((column) => {\n        const { position, count, group } = columnManagerPosition(\n          names,\n          column.name,\n          table.columnGroups,\n        )\n        const positionId = `${idBase}-${column.name}-position`\n\n        return (\n          <li\n            key={column.name}\n            data-column={column.name}\n            draggable={reorderable && !saving}\n            onDragStart={(event) => {\n              if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'\n              setDragging(column.name)\n            }}\n            onDragOver={(event) => {\n              if (dragging === null) return\n\n              event.preventDefault()\n              if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'\n              setDropTarget(column.name)\n            }}\n            onDragLeave={() => dropTarget === column.name && setDropTarget(null)}\n            onDragEnd={() => {\n              setDragging(null)\n              setDropTarget(null)\n            }}\n            onDrop={(event) => {\n              event.preventDefault()\n\n              if (dragging !== null && dragging !== column.name) {\n                reorder(dragging, moveColumnTo(names, dragging, column.name))\n              }\n\n              setDragging(null)\n              setDropTarget(null)\n            }}\n            className={cn(\n              'flex items-center gap-2 rounded-md px-2 py-1 text-sm',\n              reorderable && 'cursor-grab',\n              dragging === column.name && 'opacity-50',\n              dropTarget === column.name && dragging !== column.name && 'bg-muted',\n            )}\n          >\n            {reorderable && (\n              <GripVerticalIcon\n                className=\"text-muted-foreground size-4 shrink-0\"\n                aria-hidden=\"true\"\n              />\n            )}\n            {column.toggleable ? (\n              <label className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <Checkbox\n                  checked={visible.includes(column.name)}\n                  onCheckedChange={() => toggle(column.name)}\n                />\n                <span className=\"truncate\">{column.label}</span>\n              </label>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{column.label}</span>\n            )}\n            {reorderable && (\n              <span className=\"flex shrink-0 items-center\">\n                <span id={positionId} className=\"sr-only\" data-slot=\"column-manager-position\">\n                  {group\n                    ? t(\n                        'table.column_manager.position_in_group',\n                        { position, count, group },\n                        `Position ${position} of ${count} in ${group}.`,\n                      )\n                    : t(\n                        'table.column_manager.position',\n                        { position, count },\n                        `Position ${position} of ${count}.`,\n                      )}\n                </span>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  disabled={position <= 1}\n                  aria-disabled={saving || undefined}\n                  aria-describedby={positionId}\n                  aria-label={t(\n                    'table.move_column_up',\n                    { column: column.label },\n                    `Move ${column.label} up`,\n                  )}\n                  onClick={(event) => move(column.name, -1, event.currentTarget)}\n                >\n                  <ChevronUpIcon />\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  disabled={position >= count}\n                  aria-disabled={saving || undefined}\n                  aria-describedby={positionId}\n                  aria-label={t(\n                    'table.move_column_down',\n                    { column: column.label },\n                    `Move ${column.label} down`,\n                  )}\n                  onClick={(event) => move(column.name, 1, event.currentTarget)}\n                >\n                  <ChevronDownIcon />\n                </Button>\n              </span>\n            )}\n          </li>\n        )\n      })}\n    </ul>\n  )\n\n  const body: ReactNode = (\n    <div className=\"flex flex-col gap-1\">\n      {inHeader && resetButton && <div className=\"flex justify-end\">{resetButton}</div>}\n      {list}\n      {reorderable && (\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          className=\"sr-only\"\n          data-slot=\"column-manager-announcement\"\n        >\n          {announcement}\n        </div>\n      )}\n      {((!inHeader && resetButton) || applyView) && (\n        <div className=\"mt-1 flex items-center justify-end gap-2\">\n          {!inHeader && resetButton}\n          {applyView && (\n            <TableTriggerButton\n              view={applyView}\n              data-slot=\"column-manager-apply\"\n              disabled={\n                !orderChanged && (!draft || !columnDraftChanged(table.visibleColumns, draft))\n              }\n              onClick={() => void apply()}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  )\n\n  const onOpenChange = (next: boolean) => {\n    // Closing without \"Apply\" drops the draft.\n    if (!next) {\n      setDraft(null)\n      if (deferred) setOrderDraft(null)\n      setAnnouncement('')\n    }\n    setOpen(next)\n  }\n\n  const triggerButton = (\n    <TableTriggerButton\n      view={trigger}\n      defaultIcon={<Icon name=\"alfakit::tables.actions.column-manager\" fallback={Columns3Icon} />}\n      aria-label={trigger.showLabel ? undefined : trigger.label}\n    />\n  )\n\n  if (table.columnManagerLayout === 'modal') {\n    // `columnManagerTriggerAction()` may set `slideOver()`, `modalWidth()` and the heading.\n    const modal = table.triggerActions?.columnManager?.modal\n    const heading = modal?.heading ?? t('table.columns', {}, 'Columns')\n    const description = modal?.description ?? table.pluralModelLabel\n    const widthClass = modal?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.width] : undefined\n\n    if (modal?.slideOver) {\n      return (\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetTrigger asChild>{triggerButton}</SheetTrigger>\n          <SheetContent\n            side={slideOverSide(modal.slideOverPosition, direction)}\n            className={cn('flex w-full flex-col gap-0 p-0', widthClass ?? 'sm:max-w-md')}\n            data-slot=\"column-manager\"\n            data-slide-over=\"\"\n          >\n            <SheetHeader className=\"border-b\">\n              <SheetTitle>{heading}</SheetTitle>\n              <SheetDescription className={modal.description ? undefined : 'sr-only'}>\n                {description}\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"flex-1 overflow-y-auto p-4\">{body}</div>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <DialogTrigger asChild>{triggerButton}</DialogTrigger>\n        <DialogContent className={widthClass ?? 'sm:max-w-lg'} data-slot=\"column-manager\">\n          <DialogHeader>\n            <DialogTitle>{heading}</DialogTitle>\n            <DialogDescription className={modal?.description ? undefined : 'sr-only'}>\n              {description}\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"max-h-[60vh] overflow-y-auto\">{body}</div>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        className={cn('p-2', table.columnManagerColumns ? 'w-auto min-w-64' : 'w-64')}\n        data-slot=\"column-manager\"\n      >\n        {body}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,cAAc,EAC5B,OACA,OACA,aAKC;CACD,MAAM,IAAI,KAAK;CACf,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,aAAa;CAC/B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,UAAU,eAAe,SAAwB,IAAI;CAC5D,MAAM,CAAC,YAAY,iBAAiB,SAAwB,IAAI;CAEhE,MAAM,CAAC,OAAO,YAAY,SAA0B,IAAI;CAKxD,MAAM,CAAC,YAAY,iBAAiB,SAG1B,IAAI;CAEd,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,SAAS,MAAM;CACrB,MAAM,cAAc,QAAQ,MAAM,sBAAsB,MAAM,UAAU,YAAY;CACpF,MAAM,aAAa,QAAQ,MAAM,iBAAiB;CAClD,MAAM,WAAW,QAAQ,MAAM,kBAAkB;CACjD,MAAM,aACJ,eAAe,YAAY,WAAW,YAAY,MAAM,WAAW,WAAW,QAAQ;CACxF,MAAM,iBAAiB,UACrB,cAAc,QAAQ;EAAE;EAAO,SAAS,MAAM;CAAQ,IAAI,IAAI;CAChE,MAAM,eAAe,MAAM,QAAQ,KAAK,WAAW,OAAO,IAAI;CAC9D,MAAM,QAAQ,cAAc;CAC5B,MAAM,UAAU,eACd,cAAc,MAAM,UAAU,MAAM,QAAQ,QAAQ,WAAW,OAAO,UAAU,GAChF,UACF;CACA,MAAM,UAAU,SAAS,MAAM;CAE/B,IAAI,CAAC,cAAc,CAAC,aAAa,OAAO;CAExC,MAAM,UAAU,kBAAkB,OAAO,iBAAiB;EACxD,OAAO,EAAE,iBAAiB,CAAC,GAAG,SAAS;EACvC,WAAW;CACb,CAAC;CAED,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,UAAU,SAAiB;EAC/B,MAAM,OAAO,oBAAoB,SAAS,IAAI;EAE9C,IAAI,UACF,SAAS,IAAI;OAEb,WAAW,MAAM,YAAY,EAAE,SAAS,KAAK,GAAG,CAAC,MAAM,CAAC;CAE5D;CAEA,MAAM,OAAO,OAAO,OAAiB,UAAgC,CAAC,MAAwB;EAC5F,IAAI,CAAC,MAAM,UAAU,cAAc,OAAO;EAE1C,UAAU,IAAI;EAEd,IAAI;GACF,MAAM,gBAAgB,MAAM,UAAU,cAAc,OAAO,WAAW,OAAO,OAAO;GAEpF,OAAO;EACT,SAAS,OAAO;GACd,UAAU;IACR,IAAI;IACJ,OAAO,EAAE,6BAA6B,CAAC,GAAG,gCAAgC;IAC1E,MAAM,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;IAC3D,QAAQ;IACR,QAAQ;GACV,CAAC;GAED,OAAO;EACT,UAAU;GACR,UAAU,KAAK;EACjB;CACF;CAEA,MAAM,YAAY,MAAc,UAAoB;EAClD,MAAM,EAAE,UAAU,OAAO,UAAU,sBAAsB,OAAO,MAAM,MAAM,YAAY;EACxF,MAAM,QAAQ,MAAM,QAAQ,MAAM,WAAW,OAAO,SAAS,IAAI,CAAC,EAAE,SAAS;EAC7E,MAAM,UAAU;GAAE,QAAQ;GAAO;GAAU;GAAO,OAAO,SAAS;EAAG;EAErE,gBACE,QACI,WACE,EACE,oDACA,SACA,GAAG,MAAM,qBAAqB,SAAS,MAAM,MAAM,MAAM,MAAM,sCACjE,IACA,EACE,2CACA,SACA,GAAG,MAAM,qBAAqB,SAAS,MAAM,MAAM,MAAM,MAAM,EACjE,IACF,WACE,EACE,2CACA,SACA,GAAG,MAAM,qBAAqB,SAAS,MAAM,MAAM,sCACrD,IACA,EACE,kCACA,SACA,GAAG,MAAM,qBAAqB,SAAS,MAAM,MAAM,EACrD,CACR;CACF;CAGA,MAAM,WAAW,MAAc,UAAoB;EACjD,IAAI,UAAU,CAAC,mBAAmB,OAAO,KAAK,GAAG;EAEjD,cAAc,KAAK;EACnB,gBAAgB,EAAE;EAElB,IAAI,UAAU;GACZ,SAAS,MAAM,KAAK;GAEpB;EACF;EAEA,KAAU,KAAK,CAAC,CAAC,MAAM,UAAW,QAAQ,SAAS,MAAM,KAAK,IAAI,cAAc,IAAI,CAAE;CACxF;CAEA,MAAM,QAAQ,MAAc,QAAgB,WAAwB;EAClE,oBAAoB,MAAM;EAC1B,QAAQ,MAAM,oBAAoB,OAAO,MAAM,QAAQ,MAAM,YAAY,CAAC;CAC5E;CAEA,MAAM,eAAe,QAAQ,cAAc,mBAAmB,cAAc,UAAU,CAAC;CAIvF,MAAM,QAAQ,YAAY;EACxB,MAAM,UAAU,SAAS,mBAAmB,MAAM,gBAAgB,KAAK,IAAI,QAAQ;EAEnF,SAAS,IAAI;EACb,cAAc,IAAI;EAClB,gBAAgB,EAAE;EAClB,QAAQ,KAAK;EAGb,IAAI,cAAc,cAAc,MAAM,KAAK,YAAY,EAAE,QAAQ,CAAC,QAAQ,CAAC;EAE3E,IAAI,SAAS,WAAW,MAAM,YAAY,EAAE,QAAQ,GAAG,CAAC,MAAM,CAAC;CACjE;CAGA,MAAM,QAAQ,YAAY;EACxB,IAAI,aAAa;GACf,cAAc,IAAI;GAElB,MAAM,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC,WAAW,CAAC;EACxC;EAEA,IAAI,YAAY;GACd,SAAS,IAAI;GACb,WAAW,MAAM,YAAY,EAAE,SAAS,sBAAsB,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;EAClF;CACF;CAEA,MAAM,YAAY,kBAAkB,OAAO,sBAAsB;EAC/D,OAAO,aACH,EAAE,uBAAuB,CAAC,GAAG,OAAO,IACpC,EAAE,4BAA4B,CAAC,GAAG,oBAAoB;EAC1D,SAAS;CACX,CAAC;CACD,MAAM,YAAY,WACd,kBAAkB,OAAO,sBAAsB;EAC7C,OAAO,EAAE,uBAAuB,CAAC,GAAG,OAAO;EAC3C,SAAS;CACX,CAAC,IACD;CACJ,MAAM,cAAc,YAClB,oBAAC,oBAAD;EACE,MAAM;EACN,UAAU;EACV,aAAU;EACV,WAAW,GAAG,CAAC,aAAa,QAAQ;EACpC,eAAe,KAAK,MAAM;CAC3B,CAAA,IACC;CACJ,MAAM,WAAW,MAAM,qCAAqC;CAE5D,MAAM,OACJ,oBAAC,MAAD;EACE,WAAW,GACT,MAAM,uBACF,CAAC,gBAAgB,mBAAmB,MAAM,oBAAoB,CAAC,IAC/D,uBACN;EACA,cAAY,EAAE,iBAAiB,CAAC,GAAG,SAAS;EAE3C,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,EAAE,UAAU,OAAO,UAAU,sBACjC,OACA,OAAO,MACP,MAAM,YACR;GACA,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,KAAK;GAE5C,OACE,qBAAC,MAAD;IAEE,eAAa,OAAO;IACpB,WAAW,eAAe,CAAC;IAC3B,cAAc,UAAU;KACtB,IAAI,MAAM,cAAc,MAAM,aAAa,gBAAgB;KAC3D,YAAY,OAAO,IAAI;IACzB;IACA,aAAa,UAAU;KACrB,IAAI,aAAa,MAAM;KAEvB,MAAM,eAAe;KACrB,IAAI,MAAM,cAAc,MAAM,aAAa,aAAa;KACxD,cAAc,OAAO,IAAI;IAC3B;IACA,mBAAmB,eAAe,OAAO,QAAQ,cAAc,IAAI;IACnE,iBAAiB;KACf,YAAY,IAAI;KAChB,cAAc,IAAI;IACpB;IACA,SAAS,UAAU;KACjB,MAAM,eAAe;KAErB,IAAI,aAAa,QAAQ,aAAa,OAAO,MAC3C,QAAQ,UAAU,aAAa,OAAO,UAAU,OAAO,IAAI,CAAC;KAG9D,YAAY,IAAI;KAChB,cAAc,IAAI;IACpB;IACA,WAAW,GACT,wDACA,eAAe,eACf,aAAa,OAAO,QAAQ,cAC5B,eAAe,OAAO,QAAQ,aAAa,OAAO,QAAQ,UAC5D;IAnCF,UAAA;KAqCG,eACC,oBAAC,kBAAD;MACE,WAAU;MACV,eAAY;KACb,CAAA;KAEF,OAAO,aACN,qBAAC,SAAD;MAAO,WAAU;MAAjB,UAAA,CACE,oBAAC,UAAD;OACE,SAAS,QAAQ,SAAS,OAAO,IAAI;OACrC,uBAAuB,OAAO,OAAO,IAAI;MAC1C,CAAA,GACD,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA,OAAO;MAAY,CAAA,CAC1C;KAEP,CAAA,IAAA,oBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA,OAAO;KAAY,CAAA;KAE/D,eACC,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACE,oBAAC,QAAD;QAAM,IAAI;QAAY,WAAU;QAAU,aAAU;QACjD,UAAA,QACG,EACE,0CACA;SAAE;SAAU;SAAO;QAAM,GACzB,YAAY,SAAS,MAAM,MAAM,MAAM,MAAM,EAC/C,IACA,EACE,iCACA;SAAE;SAAU;QAAM,GAClB,YAAY,SAAS,MAAM,MAAM,EACnC;OACA,CAAA;OACN,oBAAC,QAAD;QACE,MAAK;QACL,SAAQ;QACR,MAAK;QACL,UAAU,YAAY;QACtB,iBAAe,UAAU,KAAA;QACzB,oBAAkB;QAClB,cAAY,EACV,wBACA,EAAE,QAAQ,OAAO,MAAM,GACvB,QAAQ,OAAO,MAAM,IACvB;QACA,UAAU,UAAU,KAAK,OAAO,MAAM,IAAI,MAAM,aAAa;QAE7D,UAAA,oBAAC,eAAD,CAAgB,CAAA;OACV,CAAA;OACR,oBAAC,QAAD;QACE,MAAK;QACL,SAAQ;QACR,MAAK;QACL,UAAU,YAAY;QACtB,iBAAe,UAAU,KAAA;QACzB,oBAAkB;QAClB,cAAY,EACV,0BACA,EAAE,QAAQ,OAAO,MAAM,GACvB,QAAQ,OAAO,MAAM,MACvB;QACA,UAAU,UAAU,KAAK,OAAO,MAAM,GAAG,MAAM,aAAa;QAE5D,UAAA,oBAAC,iBAAD,CAAkB,CAAA;OACZ,CAAA;MACJ;;IAEN;GAtGG,GAAA,OAAO,IAsGV;EAER,CAAC;CACC,CAAA;CAGN,MAAM,OACJ,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACG,YAAY,eAAe,oBAAC,OAAD;IAAK,WAAU;IAAoB,UAAA;GAAiB,CAAA;GAC/E;GACA,eACC,oBAAC,OAAD;IACE,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAU;IACV,aAAU;IAET,UAAA;GACE,CAAA;IAEJ,CAAC,YAAY,eAAgB,cAC9B,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,CAAC,YAAY,aACb,aACC,oBAAC,oBAAD;KACE,MAAM;KACN,aAAU;KACV,UACE,CAAC,iBAAiB,CAAC,SAAS,CAAC,mBAAmB,MAAM,gBAAgB,KAAK;KAE7E,eAAe,KAAK,MAAM;IAC3B,CAAA,CAEA;;EAEJ;;CAGP,MAAM,gBAAgB,SAAkB;EAEtC,IAAI,CAAC,MAAM;GACT,SAAS,IAAI;GACb,IAAI,UAAU,cAAc,IAAI;GAChC,gBAAgB,EAAE;EACpB;EACA,QAAQ,IAAI;CACd;CAEA,MAAM,gBACJ,oBAAC,oBAAD;EACE,MAAM;EACN,aAAa,oBAAC,MAAD;GAAM,MAAK;GAAyC,UAAU;EAAe,CAAA;EAC1F,cAAY,QAAQ,YAAY,KAAA,IAAY,QAAQ;CACrD,CAAA;CAGH,IAAI,MAAM,wBAAwB,SAAS;EAEzC,MAAM,QAAQ,MAAM,gBAAgB,eAAe;EACnD,MAAM,UAAU,OAAO,WAAW,EAAE,iBAAiB,CAAC,GAAG,SAAS;EAClE,MAAM,cAAc,OAAO,eAAe,MAAM;EAChD,MAAM,aAAa,OAAO,QAAQ,4BAA4B,MAAM,SAAS,KAAA;EAE7E,IAAI,OAAO,WACT,OACE,qBAAC,OAAD;GAAa;GAAoB;GAAjC,UAAA,CACE,oBAAC,cAAD;IAAc,SAAA;IAAS,UAAA;GAA4B,CAAA,GACnD,qBAAC,cAAD;IACE,MAAM,cAAc,MAAM,mBAAmB,SAAS;IACtD,WAAW,GAAG,kCAAkC,cAAc,aAAa;IAC3E,aAAU;IACV,mBAAgB;IAJlB,UAAA,CAME,qBAAC,aAAD;KAAa,WAAU;KAAvB,UAAA,CACE,oBAAC,YAAD,EAAA,UAAa,QAAoB,CAAA,GACjC,oBAAC,kBAAD;MAAkB,WAAW,MAAM,cAAc,KAAA,IAAY;MAC1D,UAAA;KACe,CAAA,CACP;IACb,CAAA,GAAA,oBAAC,OAAD;KAAK,WAAU;KAA8B,UAAA;IAAU,CAAA,CAC3C;GACT,CAAA,CAAA;;EAIX,OACE,qBAAC,QAAD;GAAc;GAAoB;GAAlC,UAAA,CACE,oBAAC,eAAD;IAAe,SAAA;IAAS,UAAA;GAA6B,CAAA,GACrD,qBAAC,eAAD;IAAe,WAAW,cAAc;IAAe,aAAU;IAAjE,UAAA,CACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,QAAqB,CAAA,GACnC,oBAAC,mBAAD;KAAmB,WAAW,OAAO,cAAc,KAAA,IAAY;KAC5D,UAAA;IACgB,CAAA,CACP,EAAA,CAAA,GACd,oBAAC,OAAD;KAAK,WAAU;KAAgC,UAAA;IAAU,CAAA,CAC5C;GACT,CAAA,CAAA;;CAEZ;CAEA,OACE,qBAAC,SAAD;EAAe;EAAoB;EAAnC,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GAAS,UAAA;EAA8B,CAAA,GACvD,oBAAC,gBAAD;GACE,OAAM;GACN,WAAW,GAAG,OAAO,MAAM,uBAAuB,oBAAoB,MAAM;GAC5E,aAAU;GAET,UAAA;EACa,CAAA,CACT;;AAEb"}

package/dist/components/table/spreadsheet.js

@@ -376,7 +376,14 @@ function Spreadsheet({ table, token, component, onClose }) {
 				children: /* @__PURE__ */ jsxs(DialogContent, {
 					className: "sm:max-w-lg",
 					children: [
-						/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("table.spreadsheet.paste_title", {}, "Paste cells") }), /* @__PURE__ */ jsxs(DialogDescription, { children: [choice("table.spreadsheet.paste_summary", preview?.plan.changes.length ?? 0, {}, ":count cell will change|:count cells will change"), (preview?.plan.skipped ?? 0) > 0 && ` ${choice("table.spreadsheet.paste_skipped", preview?.plan.skipped ?? 0, {}, ":count read-only cell is skipped|:count read-only cells are skipped")}`] })] }),
+						/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("table.spreadsheet.paste_title", {}, "Paste cells") }), /* @__PURE__ */ jsxs(DialogDescription, { children: [/* @__PURE__ */ jsx("span", {
+							className: "block",
+							children: choice("table.spreadsheet.paste_summary", preview?.plan.changes.length ?? 0, {}, ":count cell will change|:count cells will change")
+						}), (preview?.plan.skipped ?? 0) > 0 && /* @__PURE__ */ jsx("span", {
+							className: "block",
+							"data-slot": "spreadsheet-paste-skipped",
+							children: choice("table.spreadsheet.paste_skipped", preview?.plan.skipped ?? 0, {}, ":count read-only cell is skipped|:count read-only cells are skipped")
+						})] })] }),
 						/* @__PURE__ */ jsxs("div", {
 							"data-slot": "spreadsheet-paste",
 							className: "flex flex-col gap-3",