@greatapps/common 1.1.211 → 1.1.212

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -94,7 +94,8 @@ function ProjectSelectorPopover({
94
94
  return /* @__PURE__ */ jsx(
95
95
  CommandItem,
96
96
  {
97
- value: project.title,
97
+ value: `${project.title}-${project.id}`,
98
+ keywords: [project.title],
98
99
  className: isSelected ? "bg-gray-50" : "",
99
100
  onSelect: () => onSelectProject(project),
100
101
  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full cursor-pointer", children: [
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Dispatch, RefObject, SetStateAction } from 'react';\r\nimport {\r\n Button,\r\n Command,\r\n CommandEmpty,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n Tooltip,\r\n TooltipContent,\r\n TooltipTrigger,\r\n UserAvatar,\r\n} from '../../index';\r\nimport { CheckIcon, ChevronDown, FolderOpen, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from './types';\r\n\r\ninterface ProjectSelectorPopoverProps {\r\n open: boolean;\r\n setOpen: Dispatch<SetStateAction<boolean>>;\r\n titleRef?: RefObject<HTMLSpanElement | null>;\r\n projects: NavigationProject[];\r\n selectedProject: NavigationProject | null;\r\n onSelectProject: (project: NavigationProject) => void;\r\n onAddProject: () => void;\r\n onManageProjects: () => void;\r\n children?: React.ReactNode;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\r\n <div className=\"flex items-center gap-2 flex-1\">\r\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\r\n <div className=\"skeleton h-3.5 w-32 rounded\" />\r\n </div>\r\n <div className=\"skeleton size-4 rounded-full shrink-0\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport function ProjectSelectorPopover({\r\n open,\r\n setOpen,\r\n titleRef,\r\n projects,\r\n selectedProject,\r\n onSelectProject,\r\n onAddProject,\r\n onManageProjects,\r\n children,\r\n}: ProjectSelectorPopoverProps) {\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n {children ?? (\r\n <button className=\"cursor-pointer\">\r\n <ChevronDown\r\n size={20}\r\n className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\r\n />\r\n </button>\r\n )}\r\n </PopoverTrigger>\r\n <PopoverContent\r\n className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\r\n align=\"start\"\r\n sideOffset={8}\r\n onOpenAutoFocus={(e: Event) => e.preventDefault()}\r\n onInteractOutside={(event: Event) => {\r\n if (titleRef?.current?.contains(event.target as Node)) {\r\n event.preventDefault();\r\n }\r\n }}\r\n >\r\n <div className=\"flex flex-col p-3 gap-2\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Projetos</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-8! paragraph-small-semibold text-gray-950\"\r\n onClick={onAddProject}\r\n >\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Tooltip>\r\n <TooltipTrigger asChild>\r\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n <Settings size={18} />\r\n </Button>\r\n </TooltipTrigger>\r\n <TooltipContent className=\"z-[1002]\">Visualizar todos projetos</TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </div>\r\n <Command className=\"gap-2\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n {projects.length === 0 ? (\r\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\r\n <FolderOpen size={28} className=\"text-gray-300\" />\r\n <span className=\"paragraph-small-medium text-center text-gray-500\">\r\n Nenhum projeto encontrado.\r\n <br />\r\n Crie um projeto para começar.\r\n </span>\r\n </div>\r\n ) : (\r\n <>\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {projects.map((project) => {\r\n const isSelected = selectedProject?.id === project.id;\r\n return (\r\n <CommandItem\r\n key={project.id}\r\n value={project.title}\r\n className={isSelected ? 'bg-gray-50' : ''}\r\n onSelect={() => onSelectProject(project)}\r\n >\r\n <div className=\"flex items-center justify-between w-full cursor-pointer\">\r\n <div className=\"flex items-center gap-2 w-full\">\r\n <UserAvatar\r\n photo={project.photo}\r\n name={project.title}\r\n size={32}\r\n />\r\n {project.title}\r\n </div>\r\n {isSelected && (\r\n <CheckIcon className=\"size-4 text-gray-950\" />\r\n )}\r\n </div>\r\n </CommandItem>\r\n );\r\n })}\r\n </>\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Dispatch, RefObject, SetStateAction } from 'react';\r\nimport {\r\n Button,\r\n Command,\r\n CommandEmpty,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n Tooltip,\r\n TooltipContent,\r\n TooltipTrigger,\r\n UserAvatar,\r\n} from '../../index';\r\nimport { CheckIcon, ChevronDown, FolderOpen, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from './types';\r\n\r\ninterface ProjectSelectorPopoverProps {\r\n open: boolean;\r\n setOpen: Dispatch<SetStateAction<boolean>>;\r\n titleRef?: RefObject<HTMLSpanElement | null>;\r\n projects: NavigationProject[];\r\n selectedProject: NavigationProject | null;\r\n onSelectProject: (project: NavigationProject) => void;\r\n onAddProject: () => void;\r\n onManageProjects: () => void;\r\n children?: React.ReactNode;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\r\n <div className=\"flex items-center gap-2 flex-1\">\r\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\r\n <div className=\"skeleton h-3.5 w-32 rounded\" />\r\n </div>\r\n <div className=\"skeleton size-4 rounded-full shrink-0\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport function ProjectSelectorPopover({\r\n open,\r\n setOpen,\r\n titleRef,\r\n projects,\r\n selectedProject,\r\n onSelectProject,\r\n onAddProject,\r\n onManageProjects,\r\n children,\r\n}: ProjectSelectorPopoverProps) {\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n {children ?? (\r\n <button className=\"cursor-pointer\">\r\n <ChevronDown\r\n size={20}\r\n className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\r\n />\r\n </button>\r\n )}\r\n </PopoverTrigger>\r\n <PopoverContent\r\n className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\r\n align=\"start\"\r\n sideOffset={8}\r\n onOpenAutoFocus={(e: Event) => e.preventDefault()}\r\n onInteractOutside={(event: Event) => {\r\n if (titleRef?.current?.contains(event.target as Node)) {\r\n event.preventDefault();\r\n }\r\n }}\r\n >\r\n <div className=\"flex flex-col p-3 gap-2\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Projetos</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-8! paragraph-small-semibold text-gray-950\"\r\n onClick={onAddProject}\r\n >\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Tooltip>\r\n <TooltipTrigger asChild>\r\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n <Settings size={18} />\r\n </Button>\r\n </TooltipTrigger>\r\n <TooltipContent className=\"z-[1002]\">Visualizar todos projetos</TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </div>\r\n <Command className=\"gap-2\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n {projects.length === 0 ? (\r\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\r\n <FolderOpen size={28} className=\"text-gray-300\" />\r\n <span className=\"paragraph-small-medium text-center text-gray-500\">\r\n Nenhum projeto encontrado.\r\n <br />\r\n Crie um projeto para começar.\r\n </span>\r\n </div>\r\n ) : (\r\n <>\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {projects.map((project) => {\r\n const isSelected = selectedProject?.id === project.id;\r\n return (\r\n <CommandItem\r\n key={project.id}\r\n value={`${project.title}-${project.id}`}\r\n keywords={[project.title]}\r\n className={isSelected ? 'bg-gray-50' : ''}\r\n onSelect={() => onSelectProject(project)}\r\n >\r\n <div className=\"flex items-center justify-between w-full cursor-pointer\">\r\n <div className=\"flex items-center gap-2 w-full\">\r\n <UserAvatar\r\n photo={project.photo}\r\n name={project.title}\r\n size={32}\r\n />\r\n {project.title}\r\n </div>\r\n {isSelected && (\r\n <CheckIcon className=\"size-4 text-gray-950\" />\r\n )}\r\n </div>\r\n </CommandItem>\r\n );\r\n })}\r\n </>\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
@@ -96,7 +96,8 @@ function ProjectSelector({
96
96
  ] }) : projects.map((project) => /* @__PURE__ */ jsxs(
97
97
  CommandItem,
98
98
  {
99
- value: project.title,
99
+ value: `${project.title}-${project.id}`,
100
+ keywords: [project.title],
100
101
  className: selectedProject?.id === project.id ? "bg-gray-50" : "",
101
102
  onSelect: () => {
102
103
  onSelectProject(project);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useRef, useEffect, RefObject } from 'react';\r\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\r\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\r\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\r\nimport { ChevronDown, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from '../types';\r\n\r\nexport interface ProjectSelectorProps {\r\n projects: NavigationProject[];\r\n selectedProject: NavigationProject | null;\r\n isLoading?: boolean;\r\n onSelectProject: (project: NavigationProject) => void;\r\n onAddProject: () => void;\r\n onManageProjects: () => void;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center gap-2 p-2\">\r\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\r\n <div className=\"skeleton h-3.5 w-32 rounded\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport function ProjectSelector({\r\n projects,\r\n selectedProject,\r\n isLoading,\r\n onSelectProject,\r\n onAddProject,\r\n onManageProjects,\r\n}: ProjectSelectorProps) {\r\n const { breakpoint } = useAppNavigationContext();\r\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\r\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\r\n const titleRef = useRef<HTMLDivElement>(null);\r\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\r\n\r\n useEffect(() => {\r\n if (openProjectList && breakpoint === 'mobile') {\r\n setActiveSection('projects');\r\n clearProjectList();\r\n }\r\n }, [openProjectList, breakpoint, clearProjectList]);\r\n\r\n // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\r\n if (breakpoint === 'desktop' || breakpoint === 'md') {\r\n return (\r\n <div className=\"flex items-center justify-between\">\r\n <ProjectSelectorPopover\r\n open={isPopoverOpen}\r\n setOpen={setIsPopoverOpen}\r\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\r\n projects={projects}\r\n selectedProject={selectedProject}\r\n onSelectProject={onSelectProject}\r\n onAddProject={onAddProject}\r\n onManageProjects={onManageProjects}\r\n >\r\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\r\n {isLoading ? (\r\n <div className=\"skeleton h-4 w-32 rounded\" />\r\n ) : (\r\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\r\n {selectedProject?.title}\r\n </span>\r\n )}\r\n <ChevronDown\r\n size={20}\r\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\r\n />\r\n </div>\r\n </ProjectSelectorPopover>\r\n <div className=\"flex items-center gap-2\">\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n // Mobile: inline collapsible accordion\r\n return (\r\n <div className=\"flex flex-col gap-2.5\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center gap-1\">\r\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\r\n <ChevronDown\r\n size={20}\r\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\r\n className={`transition-transform duration-200 cursor-pointer ${\r\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\r\n }`}\r\n />\r\n </div>\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n {activeSection === 'projects' && (\r\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Projetos</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n <Settings size={18} />\r\n </Button>\r\n </div>\r\n </div>\r\n <Command className=\"gap-2\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {isLoading ? (\r\n <>\r\n <ProjectItemSkeleton />\r\n <ProjectItemSkeleton />\r\n </>\r\n ) : (\r\n projects.map((project) => (\r\n <CommandItem\r\n key={project.id}\r\n value={project.title}\r\n className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}\r\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\r\n >\r\n <UserAvatar\r\n photo={project.photo}\r\n name={project.title}\r\n size={32}\r\n />\r\n {project.title}\r\n </CommandItem>\r\n ))\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useRef, useEffect, RefObject } from 'react';\r\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\r\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\r\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\r\nimport { ChevronDown, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from '../types';\r\n\r\nexport interface ProjectSelectorProps {\r\n projects: NavigationProject[];\r\n selectedProject: NavigationProject | null;\r\n isLoading?: boolean;\r\n onSelectProject: (project: NavigationProject) => void;\r\n onAddProject: () => void;\r\n onManageProjects: () => void;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center gap-2 p-2\">\r\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\r\n <div className=\"skeleton h-3.5 w-32 rounded\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport function ProjectSelector({\r\n projects,\r\n selectedProject,\r\n isLoading,\r\n onSelectProject,\r\n onAddProject,\r\n onManageProjects,\r\n}: ProjectSelectorProps) {\r\n const { breakpoint } = useAppNavigationContext();\r\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\r\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\r\n const titleRef = useRef<HTMLDivElement>(null);\r\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\r\n\r\n useEffect(() => {\r\n if (openProjectList && breakpoint === 'mobile') {\r\n setActiveSection('projects');\r\n clearProjectList();\r\n }\r\n }, [openProjectList, breakpoint, clearProjectList]);\r\n\r\n // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\r\n if (breakpoint === 'desktop' || breakpoint === 'md') {\r\n return (\r\n <div className=\"flex items-center justify-between\">\r\n <ProjectSelectorPopover\r\n open={isPopoverOpen}\r\n setOpen={setIsPopoverOpen}\r\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\r\n projects={projects}\r\n selectedProject={selectedProject}\r\n onSelectProject={onSelectProject}\r\n onAddProject={onAddProject}\r\n onManageProjects={onManageProjects}\r\n >\r\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\r\n {isLoading ? (\r\n <div className=\"skeleton h-4 w-32 rounded\" />\r\n ) : (\r\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\r\n {selectedProject?.title}\r\n </span>\r\n )}\r\n <ChevronDown\r\n size={20}\r\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\r\n />\r\n </div>\r\n </ProjectSelectorPopover>\r\n <div className=\"flex items-center gap-2\">\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n // Mobile: inline collapsible accordion\r\n return (\r\n <div className=\"flex flex-col gap-2.5\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center gap-1\">\r\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\r\n <ChevronDown\r\n size={20}\r\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\r\n className={`transition-transform duration-200 cursor-pointer ${\r\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\r\n }`}\r\n />\r\n </div>\r\n <UsersSelectorPopover projectId={selectedProject?.id} />\r\n </div>\r\n {activeSection === 'projects' && (\r\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Projetos</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n <Settings size={18} />\r\n </Button>\r\n </div>\r\n </div>\r\n <Command className=\"gap-2\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {isLoading ? (\r\n <>\r\n <ProjectItemSkeleton />\r\n <ProjectItemSkeleton />\r\n </>\r\n ) : (\r\n projects.map((project) => (\r\n <CommandItem\r\n key={project.id}\r\n value={`${project.title}-${project.id}`}\r\n keywords={[project.title]}\r\n className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}\r\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\r\n >\r\n <UserAvatar\r\n photo={project.photo}\r\n name={project.title}\r\n size={32}\r\n />\r\n {project.title}\r\n </CommandItem>\r\n ))\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greatapps/common",
3
- "version": "1.1.211",
3
+ "version": "1.1.212",
4
4
  "description": "Shared library for GreatApps frontend applications",
5
5
  "main": "./dist/index.mjs",
6
6
  "types": "./src/index.ts",
@@ -119,7 +119,8 @@ export function ProjectSelectorPopover({
119
119
  return (
120
120
  <CommandItem
121
121
  key={project.id}
122
- value={project.title}
122
+ value={`${project.title}-${project.id}`}
123
+ keywords={[project.title]}
123
124
  className={isSelected ? 'bg-gray-50' : ''}
124
125
  onSelect={() => onSelectProject(project)}
125
126
  >
@@ -126,7 +126,8 @@ export function ProjectSelector({
126
126
  projects.map((project) => (
127
127
  <CommandItem
128
128
  key={project.id}
129
- value={project.title}
129
+ value={`${project.title}-${project.id}`}
130
+ keywords={[project.title]}
130
131
  className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
131
132
  onSelect={() => { onSelectProject(project); setActiveSection(null); }}
132
133
  >