chore: update cmdk 1.0.0 (#28937)

* chore: update cmdk 1.0.0

* update react-popover

* fixed disabled states

* address breaking changes from cmdk update

* fix formatting

* update column options popover

apps/design-system/content/docs/components/combobox.mdx

@@ -78,27 +78,29 @@ export function ComboboxDemo() {
       <PopoverContent className="w-[200px] p-0">
         <Command>
           <CommandInput placeholder="Search framework..." />
-          <CommandEmpty>No framework found.</CommandEmpty>
-          <CommandGroup>
-            {frameworks.map((framework) => (
-              <CommandItem
-                key={framework.value}
-                value={framework.value}
-                onSelect={(currentValue) => {
-                  setValue(currentValue === value ? '' : currentValue)
-                  setOpen(false)
-                }}
-              >
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    value === framework.value ? 'opacity-100' : 'opacity-0'
-                  )}
-                />
-                {framework.label}
-              </CommandItem>
-            ))}
-          </CommandGroup>
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? '' : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      value === framework.value ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                  {framework.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

apps/design-system/registry/default/example/combobox-demo.tsx

@@ -1,18 +1,21 @@
 'use client'
 
-import * as React from 'react'
 import { Check, ChevronsUpDown } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
 import {
+  Button,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
 
 const frameworks = [
   {
@@ -60,27 +63,29 @@ export default function ComboboxDemo() {
       <PopoverContent_Shadcn_ className="w-[200px] p-0">
         <Command_Shadcn_>
           <CommandInput_Shadcn_ placeholder="Search framework..." />
-          <CommandEmpty_Shadcn_>No framework found.</CommandEmpty_Shadcn_>
-          <CommandGroup_Shadcn_>
-            {frameworks.map((framework) => (
-              <CommandItem_Shadcn_
-                key={framework.value}
-                value={framework.value}
-                onSelect={(currentValue) => {
-                  setValue(currentValue === value ? '' : currentValue)
-                  setOpen(false)
-                }}
-              >
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    value === framework.value ? 'opacity-100' : 'opacity-0'
-                  )}
-                />
-                {framework.label}
-              </CommandItem_Shadcn_>
-            ))}
-          </CommandGroup_Shadcn_>
+          <CommandList_Shadcn_>
+            <CommandEmpty_Shadcn_>No framework found.</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              {frameworks.map((framework) => (
+                <CommandItem_Shadcn_
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? '' : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      value === framework.value ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                  {framework.label}
+                </CommandItem_Shadcn_>
+              ))}
+            </CommandGroup_Shadcn_>
+          </CommandList_Shadcn_>
         </Command_Shadcn_>
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>

apps/design-system/registry/default/example/combobox-form.tsx

@@ -13,6 +13,7 @@ import {
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
 } from 'ui'
 import {
   Form_Shadcn_,
@@ -96,26 +97,28 @@ export default function ComboboxForm() {
                 <PopoverContent_Shadcn_ className="w-[200px] p-0">
                   <Command_Shadcn_>
                     <CommandInput_Shadcn_ placeholder="Search language..." />
-                    <CommandEmpty_Shadcn_>No language found.</CommandEmpty_Shadcn_>
-                    <CommandGroup_Shadcn_>
-                      {languages.map((language) => (
-                        <CommandItem_Shadcn_
-                          value={language.label}
-                          key={language.value}
-                          onSelect={() => {
-                            form.setValue('language', language.value)
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              'mr-2 h-4 w-4',
-                              language.value === field.value ? 'opacity-100' : 'opacity-0'
-                            )}
-                          />
-                          {language.label}
-                        </CommandItem_Shadcn_>
-                      ))}
-                    </CommandGroup_Shadcn_>
+                    <CommandList_Shadcn_>
+                      <CommandEmpty_Shadcn_>No language found.</CommandEmpty_Shadcn_>
+                      <CommandGroup_Shadcn_>
+                        {languages.map((language) => (
+                          <CommandItem_Shadcn_
+                            value={language.label}
+                            key={language.value}
+                            onSelect={() => {
+                              form.setValue('language', language.value)
+                            }}
+                          >
+                            <Check
+                              className={cn(
+                                'mr-2 h-4 w-4',
+                                language.value === field.value ? 'opacity-100' : 'opacity-0'
+                              )}
+                            />
+                            {language.label}
+                          </CommandItem_Shadcn_>
+                        ))}
+                      </CommandGroup_Shadcn_>
+                    </CommandList_Shadcn_>
                   </Command_Shadcn_>
                 </PopoverContent_Shadcn_>
               </Popover_Shadcn_>

apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx

@@ -11,6 +11,7 @@ import {
   CommandEmpty_Shadcn_ as CommandEmpty,
   CommandItem_Shadcn_ as CommandItem,
   CommandGroup_Shadcn_ as CommandGroup,
+  CommandList_Shadcn_ as CommandList,
   cn,
   ScrollArea,
 } from 'ui'
@@ -72,30 +73,32 @@ export function ComboBox<Opt extends ComboBoxOption>({
       <PopoverContent className="p-0" side="bottom">
         <Command>
           <CommandInput placeholder={`Search ${name}...`} className="border-none ring-0" />
-          <CommandEmpty>No {name} found.</CommandEmpty>
-          <CommandGroup>
-            <ScrollArea className={options.length > 10 ? 'h-[280px]' : ''}>
-              {options.map((option) => (
-                <CommandItem
-                  key={option.id}
-                  value={option.value}
-                  onSelect={(selectedValue: string) => {
-                    setOpen(false)
-                    onSelectOption(selectedValue)
-                  }}
-                  className="cursor-pointer"
-                >
-                  <Check
-                    className={cn(
-                      'mr-2 h-4 w-4',
-                      selectedOption === option.value ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                  {option.displayName}
-                </CommandItem>
-              ))}
-            </ScrollArea>
-          </CommandGroup>
+          <CommandList>
+            <CommandEmpty>No {name} found.</CommandEmpty>
+            <CommandGroup>
+              <ScrollArea className={options.length > 10 ? 'h-[280px]' : ''}>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.id}
+                    value={option.value}
+                    onSelect={(selectedValue: string) => {
+                      setOpen(false)
+                      onSelectOption(selectedValue)
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        selectedOption === option.value ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                    {option.displayName}
+                  </CommandItem>
+                ))}
+              </ScrollArea>
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx

@@ -6,6 +6,7 @@ import {
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
   Command_Shadcn_,
   FormControl_Shadcn_,
   PopoverContent_Shadcn_,
@@ -76,26 +77,28 @@ export const AwsRegionSelector = ({
       <PopoverContent_Shadcn_ className="p-0" sameWidthAsTrigger>
         <Command_Shadcn_>
           <CommandInput_Shadcn_ placeholder="Search AWS regions..." />
-          <CommandEmpty_Shadcn_>No regions found.</CommandEmpty_Shadcn_>
-          <CommandGroup_Shadcn_>
-            <ScrollArea className="h-72">
-              {AWS_IDP_REGIONS.map((option) => (
-                <CommandItem_Shadcn_
-                  value={option}
-                  key={option}
-                  onSelect={(currentValue) => {
-                    onChange(currentValue === value ? '' : currentValue)
-                    setOpen(false)
-                  }}
-                >
-                  <Check
-                    className={cn('mr-2 h-4 w-4', option === value ? 'opacity-100' : 'opacity-0')}
-                  />
-                  {option}
-                </CommandItem_Shadcn_>
-              ))}
-            </ScrollArea>
-          </CommandGroup_Shadcn_>
+          <CommandList_Shadcn_>
+            <CommandEmpty_Shadcn_>No regions found.</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              <ScrollArea className="h-72">
+                {AWS_IDP_REGIONS.map((option) => (
+                  <CommandItem_Shadcn_
+                    value={option}
+                    key={option}
+                    onSelect={(currentValue) => {
+                      onChange(currentValue === value ? '' : currentValue)
+                      setOpen(false)
+                    }}
+                  >
+                    <Check
+                      className={cn('mr-2 h-4 w-4', option === value ? 'opacity-100' : 'opacity-0')}
+                    />
+                    {option}
+                  </CommandItem_Shadcn_>
+                ))}
+              </ScrollArea>
+            </CommandGroup_Shadcn_>
+          </CommandList_Shadcn_>
         </Command_Shadcn_>
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>

apps/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx

@@ -5,6 +5,7 @@ import {
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
   Command_Shadcn_,
   IconGlobe,
   PopoverContent_Shadcn_,
@@ -51,34 +52,36 @@ export const TimezoneSelection = ({
         <PopoverContent_Shadcn_ className="w-[350px] p-0">
           <Command_Shadcn_>
             <CommandInput_Shadcn_ placeholder="Search timezone..." className="h-9" />
-            <CommandEmpty_Shadcn_> No timezones found</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
-              <ScrollArea className="h-72">
-                {timezoneOptions.map((option) => (
-                  <CommandItem_Shadcn_
-                    key={option}
-                    value={option}
-                    onSelect={(text) => {
-                      const selectedTimezone = ALL_TIMEZONES.find(
-                        (option) => option.text.toLocaleLowerCase() === text
-                      )
-                      if (selectedTimezone) {
-                        onSelectTimezone(selectedTimezone)
-                        setOpen(false)
-                      }
-                    }}
-                  >
-                    {option}
-                    <CheckIcon
-                      className={cn(
-                        'ml-auto h-4 w-4',
-                        selectedTimezone.text === option ? 'opacity-100' : 'opacity-0'
-                      )}
-                    />
-                  </CommandItem_Shadcn_>
-                ))}
-              </ScrollArea>
-            </CommandGroup_Shadcn_>
+            <CommandList_Shadcn_>
+              <CommandEmpty_Shadcn_>No timezones found...</CommandEmpty_Shadcn_>
+              <CommandGroup_Shadcn_>
+                <ScrollArea className="h-72">
+                  {timezoneOptions.map((option) => (
+                    <CommandItem_Shadcn_
+                      key={option}
+                      value={option}
+                      onSelect={(text) => {
+                        const selectedTimezone = ALL_TIMEZONES.find(
+                          (option) => option.text.toLocaleLowerCase() === text
+                        )
+                        if (selectedTimezone) {
+                          onSelectTimezone(selectedTimezone)
+                          setOpen(false)
+                        }
+                      }}
+                    >
+                      {option}
+                      <CheckIcon
+                        className={cn(
+                          'ml-auto h-4 w-4',
+                          selectedTimezone.text === option ? 'opacity-100' : 'opacity-0'
+                        )}
+                      />
+                    </CommandItem_Shadcn_>
+                  ))}
+                </ScrollArea>
+              </CommandGroup_Shadcn_>
+            </CommandList_Shadcn_>
           </Command_Shadcn_>
         </PopoverContent_Shadcn_>
       </Popover_Shadcn_>

apps/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx

@@ -13,6 +13,7 @@ import {
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
   Command_Shadcn_,
   IconPlus,
   PopoverContent_Shadcn_,
@@ -75,32 +76,34 @@ const WrapperDropdown = ({ buttonText = 'Add wrapper', align = 'end' }: WrapperD
       <PopoverContent_Shadcn_ className="w-[200px] p-0" align={align}>
         <Command_Shadcn_>
           <CommandInput_Shadcn_ placeholder="Search wrappers..." />
-          <CommandEmpty_Shadcn_ className="py-3">No wrappers found</CommandEmpty_Shadcn_>
-          <CommandGroup_Shadcn_>
-            <ScrollArea className="max-h-[270px] overflow-scroll">
-              {WRAPPERS.map((wrapper) => (
-                <CommandItem_Shadcn_
-                  key={wrapper.name}
-                  value={wrapper.name}
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push(
-                      `/project/${ref}/database/wrappers/new?type=${wrapper.name.toLowerCase()}`
-                    )
-                  }}
-                  className="gap-2 cursor-pointer"
-                >
-                  <Image
-                    width={20}
-                    height={20}
-                    src={wrapper.icon}
-                    alt={`${wrapper.name} wrapper icon`}
-                  />
-                  {wrapper.label}
-                </CommandItem_Shadcn_>
-              ))}
-            </ScrollArea>
-          </CommandGroup_Shadcn_>
+          <CommandList_Shadcn_>
+            <CommandEmpty_Shadcn_ className="py-3">No wrappers found...</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              <ScrollArea className="max-h-[270px] overflow-scroll">
+                {WRAPPERS.map((wrapper) => (
+                  <CommandItem_Shadcn_
+                    key={wrapper.name}
+                    value={wrapper.name}
+                    onSelect={() => {
+                      setOpen(false)
+                      router.push(
+                        `/project/${ref}/database/wrappers/new?type=${wrapper.name.toLowerCase()}`
+                      )
+                    }}
+                    className="gap-2 cursor-pointer"
+                  >
+                    <Image
+                      width={20}
+                      height={20}
+                      src={wrapper.icon}
+                      alt={`${wrapper.name} wrapper icon`}
+                    />
+                    {wrapper.label}
+                  </CommandItem_Shadcn_>
+                ))}
+              </ScrollArea>
+            </CommandGroup_Shadcn_>
+          </CommandList_Shadcn_>
         </Command_Shadcn_>
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>

apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx

@@ -32,6 +32,7 @@ import {
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
   Command_Shadcn_,
   Dialog,
   DialogContent,
@@ -354,38 +355,40 @@ export const InviteMemberButton = () => {
                               }}
                             >
                               <CommandInput_Shadcn_ placeholder="Search project..." />
-                              <CommandEmpty_Shadcn_>No projects found</CommandEmpty_Shadcn_>
-                              <CommandGroup_Shadcn_>
-                                <ScrollArea
-                                  className={cn(
-                                    (orgProjects || []).length > 7 &&
-                                      'max-h-[210px] overflow-y-auto'
-                                  )}
-                                >
-                                  {orgProjects.map((project) => {
-                                    return (
-                                      <CommandItem_Shadcn_
-                                        key={project.ref}
-                                        value={project.ref}
-                                        onSelect={(value) => {
-                                          form.setValue('projectRef', value)
-                                          setProjectDropdownOpen(false)
-                                        }}
-                                      >
-                                        <Check
-                                          className={cn(
-                                            'mr-2 h-4 w-4',
-                                            field.value === project.ref
-                                              ? 'opacity-100'
-                                              : 'opacity-0'
-                                          )}
-                                        />
-                                        {project.name}
-                                      </CommandItem_Shadcn_>
-                                    )
-                                  })}
-                                </ScrollArea>
-                              </CommandGroup_Shadcn_>
+                              <CommandList_Shadcn_>
+                                <CommandEmpty_Shadcn_>No projects found...</CommandEmpty_Shadcn_>
+                                <CommandGroup_Shadcn_>
+                                  <ScrollArea
+                                    className={cn(
+                                      (orgProjects || []).length > 7 &&
+                                        'max-h-[210px] overflow-y-auto'
+                                    )}
+                                  >
+                                    {orgProjects.map((project) => {
+                                      return (
+                                        <CommandItem_Shadcn_
+                                          key={project.ref}
+                                          value={project.ref}
+                                          onSelect={(value) => {
+                                            form.setValue('projectRef', value)
+                                            setProjectDropdownOpen(false)
+                                          }}
+                                        >
+                                          <Check
+                                            className={cn(
+                                              'mr-2 h-4 w-4',
+                                              field.value === project.ref
+                                                ? 'opacity-100'
+                                                : 'opacity-0'
+                                            )}
+                                          />
+                                          {project.name}
+                                        </CommandItem_Shadcn_>
+                                      )
+                                    })}
+                                  </ScrollArea>
+                                </CommandGroup_Shadcn_>
+                              </CommandList_Shadcn_>
                             </Command_Shadcn_>
                           </PopoverContent_Shadcn_>
                         </Popover_Shadcn_>

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx

@@ -9,10 +9,10 @@ import {
   CommandSeparator_Shadcn_,
   Command_Shadcn_,
   Input,
-  Popover,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
+  Separator,
   cn,
 } from 'ui'
 
@@ -275,85 +275,76 @@ const Column = ({
       <div className={`${hasImportContent ? 'w-[10%]' : 'w-[0%]'}`} />
       <div className="flex w-[5%] justify-end">
         {(!column.isPrimaryKey || column.format.includes('int')) && (
-          <>
-            <Popover
-              size="xlarge"
-              className="pointer-events-auto"
-              align="end"
-              modal={true}
+          <Popover_Shadcn_>
+            <PopoverTrigger_Shadcn_
               data-testid={`${column.name}-extra-options`}
-              header={
-                <div className="flex items-center justify-center">
-                  <h5 className="text-sm text-foreground">Extra options</h5>
-                </div>
-              }
-              overlay={[
-                <div className="flex flex-col space-y-1" key={`${column.id}_configuration`}>
-                  {!column.isPrimaryKey && (
-                    <>
-                      <Checkbox
-                        label="Is Nullable"
-                        description="Specify if the column can assume a NULL value if no value is provided"
-                        checked={column.isNullable}
-                        className="p-4"
-                        onChange={() => onUpdateColumn({ isNullable: !column.isNullable })}
-                      />
-                      <Popover.Separator />
-                    </>
-                  )}
-                  <Checkbox
-                    label="Is Unique"
-                    description="Enforce if values in the column should be unique across rows"
-                    checked={column.isUnique}
-                    className="p-4"
-                    onChange={() => onUpdateColumn({ isUnique: !column.isUnique })}
-                  />
-                  <Popover.Separator />
-                  {column.format.includes('int') && (
-                    <>
-                      <Checkbox
-                        label="Is Identity"
-                        description="Automatically assign a sequential unique number to the column"
-                        checked={column.isIdentity}
-                        className="p-4"
-                        onChange={() => {
-                          const isIdentity = !column.isIdentity
-                          const isArray = isIdentity ? false : column.isArray
-                          onUpdateColumn({ isIdentity, isArray })
-                        }}
-                      />
-                      <Popover.Separator />
-                    </>
-                  )}
-
-                  {!column.isPrimaryKey && (
-                    <Checkbox
-                      label="Define as Array"
-                      description="Define your column as a variable-length multidimensional array"
-                      checked={column.isArray}
-                      className="p-4"
-                      onChange={() => {
-                        const isArray = !column.isArray
-                        const isIdentity = isArray ? false : column.isIdentity
-                        onUpdateColumn({ isArray, isIdentity })
-                      }}
-                    />
-                  )}
-                </div>,
-              ]}
+              className="group flex items-center -space-x-1"
             >
-              <div className="group flex items-center -space-x-1">
-                {settingsCount > 0 && (
-                  <div className="rounded-full bg-foreground h-4 w-4 flex items-center justify-center text-xs text-background">
-                    {settingsCount}
-                  </div>
-                )}
-                <div className="text-foreground-light transition-colors group-hover:text-foreground">
-                  <Settings size={16} strokeWidth={1} />
+              {settingsCount > 0 && (
+                <div className="rounded-full bg-foreground h-4 w-4 flex items-center justify-center text-xs text-background">
+                  {settingsCount}
                 </div>
+              )}
+              <div className="text-foreground-light transition-colors group-hover:text-foreground">
+                <Settings size={16} strokeWidth={1} />
               </div>
-            </Popover>
-          </>
+            </PopoverTrigger_Shadcn_>
+            <PopoverContent_Shadcn_ align="end" className="w-96 p-0">
+              <div className="flex items-center justify-center bg-surface-200 space-y-1 py-1.5 px-3 border-b border-overlay">
+                <h5 className="text-sm text-foreground">Extra options</h5>
+              </div>
+
+              <div className="flex flex-col space-y-1" key={`${column.id}_configuration`}>
+                {!column.isPrimaryKey && (
+                  <>
+                    <Checkbox
+                      label="Is Nullable"
+                      description="Specify if the column can assume a NULL value if no value is provided"
+                      checked={column.isNullable}
+                      className="p-4"
+                      onChange={() => onUpdateColumn({ isNullable: !column.isNullable })}
+                    />
+                    <Separator />
+                  </>
+                )}
+                <Checkbox
+                  label="Is Unique"
+                  description="Enforce if values in the column should be unique across rows"
+                  checked={column.isUnique}
+                  className="p-4"
+                  onChange={() => onUpdateColumn({ isUnique: !column.isUnique })}
+                />
+                <Separator />
+                {column.format.includes('int') && (
+                  <Checkbox
+                    label="Is Identity"
+                    description="Automatically assign a sequential unique number to the column"
+                    checked={column.isIdentity}
+                    className="p-4"
+                    onChange={() => {
+                      const isIdentity = !column.isIdentity
+                      const isArray = isIdentity ? false : column.isArray
+                      onUpdateColumn({ isIdentity, isArray })
+                    }}
+                  />
+                )}
+
+                {!column.isPrimaryKey && (
+                  <Checkbox
+                    label="Define as Array"
+                    description="Define your column as a variable-length multidimensional array"
+                    checked={column.isArray}
+                    className="p-4"
+                    onChange={() => {
+                      const isArray = !column.isArray
+                      const isIdentity = isArray ? false : column.isIdentity
+                      onUpdateColumn({ isArray, isIdentity })
+                    }}
+                  />
+                )}
+              </div>
+            </PopoverContent_Shadcn_>
+          </Popover_Shadcn_>
         )}
       </div>
       {!hasImportContent && (

apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsFilter.tsx

@@ -6,6 +6,7 @@ import {
   CommandGroup_Shadcn_,
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
+  CommandList_Shadcn_,
   CommandSeparator_Shadcn_,
   Command_Shadcn_,
   DropdownMenuLabel,
@@ -45,144 +46,146 @@ export const NotificationsFilter = ({ activeTab }: { activeTab: 'inbox' | 'archi
       <PopoverContent_Shadcn_ className="p-0 w-64" side="bottom" align="end">
         <Command_Shadcn_>
           <CommandInput_Shadcn_ placeholder="Find filter..." />
-          <ScrollArea className="max-h-[240px] py-1 overflow-y-auto">
-            <CommandGroup_Shadcn_>
-              <DropdownMenuLabel>Status</DropdownMenuLabel>
-              <CommandItem_Shadcn_
-                disabled={activeTab === 'archived'}
-                onSelect={() => {
-                  snap.setFilters('unread', 'status')
-                }}
-              >
-                <Label_Shadcn_
-                  htmlFor={'unread'}
-                  className={cn(
-                    'flex items-center gap-x-2 text-xs text-foreground-light transition-colors',
-                    snap.filterStatuses.includes('unread') && 'text-foreground'
-                  )}
-                >
-                  <Checkbox_Shadcn_
-                    name="unread"
-                    checked={snap.filterStatuses.includes('unread')}
-                  ></Checkbox_Shadcn_>
-                  Unread
-                </Label_Shadcn_>
-              </CommandItem_Shadcn_>
-            </CommandGroup_Shadcn_>
-            <CommandSeparator_Shadcn_ />
-            <CommandGroup_Shadcn_>
-              <DropdownMenuLabel>Priority</DropdownMenuLabel>
-              <CommandItem_Shadcn_
-                onSelect={() => {
-                  snap.setFilters('Warning', 'priority')
-                }}
-                className="flex items-center gap-x-2"
-              >
-                <Label_Shadcn_
-                  htmlFor={'warning'}
-                  className={cn(
-                    'flex items-center gap-x-2 text-xs text-foreground-light transition-colors',
-                    snap.filterPriorities.includes('Warning') && 'text-foreground'
-                  )}
-                >
-                  <Checkbox_Shadcn_
-                    name="warning"
-                    checked={snap.filterPriorities.includes('Warning')}
-                  ></Checkbox_Shadcn_>
-                  <WarningIcon className="w-2 h-2" />
-                  Warning
-                </Label_Shadcn_>
-              </CommandItem_Shadcn_>
-              <CommandItem_Shadcn_
-                key={'critical'}
-                onSelect={() => {
-                  snap.setFilters('Critical', 'priority')
-                }}
-              >
-                <Label_Shadcn_
-                  htmlFor={'critical'}
-                  className={cn(
-                    'flex items-center gap-x-2 text-xs text-foreground-light transition-colors',
-                    snap.filterPriorities.includes('Critical') && 'text-foreground'
-                  )}
-                >
-                  <Checkbox_Shadcn_
-                    name="critical"
-                    checked={snap.filterPriorities.includes('Critical')}
-                  ></Checkbox_Shadcn_>
-                  <CriticalIcon className="w-2 h-2" />
-                  Critical
-                </Label_Shadcn_>
-              </CommandItem_Shadcn_>
-            </CommandGroup_Shadcn_>
-            <CommandSeparator_Shadcn_ />
-            <CommandGroup_Shadcn_>
-              <DropdownMenuLabel>Organizations</DropdownMenuLabel>
-              {(organizations ?? []).map((org) => (
+          <CommandList_Shadcn_>
+            <ScrollArea className="max-h-[240px] py-1 overflow-y-auto">
+              <CommandGroup_Shadcn_>
+                <DropdownMenuLabel>Status</DropdownMenuLabel>
                 <CommandItem_Shadcn_
-                  key={org.slug}
-                  value={org.name.replaceAll('"', '')}
-                  className="flex items-center gap-x-2"
+                  disabled={activeTab === 'archived'}
                   onSelect={() => {
-                    snap.setFilters(org.slug, 'organizations')
+                    snap.setFilters('unread', 'status')
                   }}
                 >
                   <Label_Shadcn_
-                    htmlFor={`${org.slug}`}
+                    htmlFor={'unread'}
                     className={cn(
                       'flex items-center gap-x-2 text-xs text-foreground-light transition-colors',
-                      snap.filterOrganizations.includes(org.slug) && 'text-foreground'
+                      snap.filterStatuses.includes('unread') && 'text-foreground'
                     )}
                   >
                     <Checkbox_Shadcn_
-                      name={`${org.slug}`}
-                      checked={snap.filterOrganizations.includes(org.slug)}
-                      className=""
+                      name="unread"
+                      checked={snap.filterStatuses.includes('unread')}
                     ></Checkbox_Shadcn_>
-                    {org.name}
+                    Unread
                   </Label_Shadcn_>
                 </CommandItem_Shadcn_>
-              ))}
-            </CommandGroup_Shadcn_>
-            <CommandSeparator_Shadcn_ />
-            <CommandGroup_Shadcn_>
-              <DropdownMenuLabel>Projects</DropdownMenuLabel>
-              {(projects ?? []).map((project) => (
+              </CommandGroup_Shadcn_>
+              <CommandSeparator_Shadcn_ />
+              <CommandGroup_Shadcn_>
+                <DropdownMenuLabel>Priority</DropdownMenuLabel>
                 <CommandItem_Shadcn_
-                  key={project.ref}
-                  className="flex items-center gap-x-2"
-                  onSelect={(event) => {
-                    snap.setFilters(project.ref, 'projects')
+                  onSelect={() => {
+                    snap.setFilters('Warning', 'priority')
                   }}
+                  className="flex items-center gap-x-2"
                 >
                   <Label_Shadcn_
-                    htmlFor={`${project.ref}`}
+                    htmlFor={'warning'}
                     className={cn(
                       'flex items-center gap-x-2 text-xs text-foreground-light transition-colors',
-                      snap.filterProjects.includes(project.ref) && 'text-foreground'
+                      snap.filterPriorities.includes('Warning') && 'text-foreground'
                     )}
                   >
                     <Checkbox_Shadcn_
-                      name={`${project.ref}`}
-                      checked={snap.filterProjects.includes(project.ref)}
-                      className=""
+                      name="warning"
+                      checked={snap.filterPriorities.includes('Warning')}
                     ></Checkbox_Shadcn_>
-                    {project.name}
+                    <WarningIcon className="w-2 h-2" />
+                    Warning
                   </Label_Shadcn_>
                 </CommandItem_Shadcn_>
-              ))}
-            </CommandGroup_Shadcn_>
-          </ScrollArea>
-          <CommandSeparator_Shadcn_ />
-          <CommandGroup>
-            <CommandItem_Shadcn_
-              onSelect={() => snap.resetFilters()}
-              className="flex gap-x-2 items-center"
-            >
-              <RotateCcw className="text-foreground-muted" size={12} strokeWidth={1} />
-              Reset filters
-            </CommandItem_Shadcn_>
-          </CommandGroup>
+                <CommandItem_Shadcn_
+                  key={'critical'}
+                  onSelect={() => {
+                    snap.setFilters('Critical', 'priority')
+                  }}
+                >
+                  <Label_Shadcn_
+                    htmlFor={'critical'}
+                    className={cn(
+                      'flex items-center gap-x-2 text-xs text-foreground-light transition-colors',
+                      snap.filterPriorities.includes('Critical') && 'text-foreground'
+                    )}
+                  >
+                    <Checkbox_Shadcn_
+                      name="critical"
+                      checked={snap.filterPriorities.includes('Critical')}
+                    ></Checkbox_Shadcn_>
+                    <CriticalIcon className="w-2 h-2" />
+                    Critical
+                  </Label_Shadcn_>
+                </CommandItem_Shadcn_>
+              </CommandGroup_Shadcn_>
+              <CommandSeparator_Shadcn_ />
+              <CommandGroup_Shadcn_>
+                <DropdownMenuLabel>Organizations</DropdownMenuLabel>
+                {(organizations ?? []).map((org) => (
+                  <CommandItem_Shadcn_
+                    key={org.slug}
+                    value={org.name.replaceAll('"', '')}
+                    className="flex items-center gap-x-2"
+                    onSelect={() => {
+                      snap.setFilters(org.slug, 'organizations')
+                    }}
+                  >
+                    <Label_Shadcn_
+                      htmlFor={`${org.slug}`}
+                      className={cn(
+                        'flex items-center gap-x-2 text-xs text-foreground-light transition-colors',
+                        snap.filterOrganizations.includes(org.slug) && 'text-foreground'
+                      )}
+                    >
+                      <Checkbox_Shadcn_
+                        name={`${org.slug}`}
+                        checked={snap.filterOrganizations.includes(org.slug)}
+                        className=""
+                      ></Checkbox_Shadcn_>
+                      {org.name}
+                    </Label_Shadcn_>
+                  </CommandItem_Shadcn_>
+                ))}
+              </CommandGroup_Shadcn_>
+              <CommandSeparator_Shadcn_ />
+              <CommandGroup_Shadcn_>
+                <DropdownMenuLabel>Projects</DropdownMenuLabel>
+                {(projects ?? []).map((project) => (
+                  <CommandItem_Shadcn_
+                    key={project.ref}
+                    className="flex items-center gap-x-2"
+                    onSelect={(event) => {
+                      snap.setFilters(project.ref, 'projects')
+                    }}
+                  >
+                    <Label_Shadcn_
+                      htmlFor={`${project.ref}`}
+                      className={cn(
+                        'flex items-center gap-x-2 text-xs text-foreground-light transition-colors',
+                        snap.filterProjects.includes(project.ref) && 'text-foreground'
+                      )}
+                    >
+                      <Checkbox_Shadcn_
+                        name={`${project.ref}`}
+                        checked={snap.filterProjects.includes(project.ref)}
+                        className=""
+                      ></Checkbox_Shadcn_>
+                      {project.name}
+                    </Label_Shadcn_>
+                  </CommandItem_Shadcn_>
+                ))}
+              </CommandGroup_Shadcn_>
+            </ScrollArea>
+            <CommandSeparator_Shadcn_ />
+            <CommandGroup>
+              <CommandItem_Shadcn_
+                onSelect={() => snap.resetFilters()}
+                className="flex gap-x-2 items-center"
+              >
+                <RotateCcw className="text-foreground-muted" size={12} strokeWidth={1} />
+                Reset filters
+              </CommandItem_Shadcn_>
+            </CommandGroup>
+          </CommandList_Shadcn_>
         </Command_Shadcn_>
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>

package-lock.json

@@ -10434,31 +10434,31 @@
       }
     },
     "node_modules/@radix-ui/react-popover": {
-      "version": "1.0.7",
-      "license": "MIT",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz",
+      "integrity": "sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-popper": "1.1.3",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
         "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
+        "react-remove-scroll": "2.5.7"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -10469,6 +10469,383 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
+      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.3",
       "license": "MIT",
@@ -17931,233 +18308,18 @@
       }
     },
     "node_modules/cmdk": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.1.tgz",
-      "integrity": "sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
       "dependencies": {
-        "@radix-ui/react-dialog": "1.0.0"
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
       }
     },
-    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-dismissable-layer": "1.0.0",
-        "@radix-ui/react-focus-guards": "1.0.0",
-        "@radix-ui/react-focus-scope": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-portal": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-slot": "1.0.0",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.4"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0",
-        "@radix-ui/react-use-escape-keydown": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/react-remove-scroll": {
-      "version": "2.5.4",
-      "license": "MIT",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/co": {
       "version": "4.6.0",
       "dev": true,
@@ -43166,7 +43328,7 @@
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-menubar": "^1.0.4",
         "@radix-ui/react-navigation-menu": "^1.1.4",
-        "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-portal": "^1.0.4",
         "@radix-ui/react-progress": "^1.0.3",
         "@radix-ui/react-radio-group": "^1.1.3",
@@ -43186,6 +43348,7 @@
         "autoprefixer": "^10.4.14",
         "class-variance-authority": "^0.6.0",
         "clsx": "^1.2.1",
+        "cmdk": "^1.0.0",
         "color": "^4.2.3",
         "colorjs.io": "^0.4.3",
         "common-tags": "^1.8.2",
@@ -43265,7 +43428,6 @@
       "dependencies": {
         "@monaco-editor/react": "^4.6.0",
         "@supabase/sql-to-rest": "^0.1.6",
-        "cmdk": "^0.2.1",
         "common": "*",
         "common-tags": "^1.8.2",
         "framer-motion": "^11.1.9",

packages/ui-patterns/CommandMenu/internal/Command.tsx

@@ -64,14 +64,14 @@ aria-selected:border-overlay
 aria-selected:bg-selection/90
 aria-selected:shadow-sm
 aria-selected:scale-[100.3%]
-data-[disabled]:pointer-events-none data-[disabled]:opacity-50`
+data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`
       : `
 px-2
 aria-selected:bg-selection/80
 aria-selected:backdrop-filter
 aria-selected:backdrop-blur-md
-data-[disabled]:pointer-events-none
-data-[disabled]:opacity-50
+data-[disabled=true]:pointer-events-none
+data-[disabled=true]:opacity-50
 `
   )
 

packages/ui-patterns/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
     "@supabase/sql-to-rest": "^0.1.6",
-    "cmdk": "^0.2.1",
     "common": "*",
     "common-tags": "^1.8.2",
     "framer-motion": "^11.1.9",

packages/ui/package.json

@@ -32,7 +32,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-portal": "^1.0.4",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -52,6 +52,7 @@
     "autoprefixer": "^10.4.14",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
+    "cmdk": "^1.0.0",
     "color": "^4.2.3",
     "colorjs.io": "^0.4.3",
     "common-tags": "^1.8.2",

packages/ui/src/components/shadcn/ui/command.tsx

@@ -122,7 +122,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-xs outline-none aria-selected:bg-overlay-hover aria-selected:text-strong data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-xs outline-none data-[selected=true]:bg-overlay-hover data-[selected=true]:text-strong data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
       className
     )}
     {...props}