Merge pull request #13727 from supabase/fix/add-child-item-component

Add ChildItem component

packages/ui/src/components/Command/APIKeys.tsx

@@ -1,9 +1,9 @@
 import { CommandGroup } from 'cmdk-supabase'
 import { useCommandMenu } from './CommandMenuProvider'
-import SearchOnlyItem from './SearchOnlyItem'
 import { Badge } from '../Badge'
 import { CommandItem } from './Command.utils'
 import { IconAlertCircle } from './../Icon/icons/IconAlertCircle'
+import ChildItem from './ChildItem'
 
 const APIKeys = ({ isSubItem = false }) => {
   const { setIsOpen, project } = useCommandMenu()
@@ -21,7 +21,7 @@ const APIKeys = ({ isSubItem = false }) => {
   return (
     <CommandGroup>
       {apiKeys?.anon !== undefined && (
-        <SearchOnlyItem
+        <ChildItem
           isSubItem={isSubItem}
           onSelect={() => {
             copyToClipboard(apiKeys?.anon ?? '')
@@ -31,10 +31,10 @@ const APIKeys = ({ isSubItem = false }) => {
         >
           <p>Copy anonymous key</p>
           <Badge color="gray">Public</Badge>
-        </SearchOnlyItem>
+        </ChildItem>
       )}
       {apiKeys?.service !== undefined && (
-        <SearchOnlyItem
+        <ChildItem
           isSubItem={isSubItem}
           onSelect={() => {
             copyToClipboard(apiKeys?.service ?? '')
@@ -44,7 +44,7 @@ const APIKeys = ({ isSubItem = false }) => {
         >
           <p>Copy service key</p>
           <Badge color="red">Secret</Badge>
-        </SearchOnlyItem>
+        </ChildItem>
       )}
       {apiKeys?.anon === undefined && apiKeys?.service === undefined && (
         <CommandItem type="link" className="items-start">

packages/ui/src/components/Command/ChildItem.tsx

@@ -0,0 +1,11 @@
+import { useCommandState } from 'cmdk-supabase'
+import { CommandItem } from './Command.utils'
+import React from 'react'
+
+export default function ChildItem({ children, isSubItem, ...props }: any) {
+  const search = useCommandState((state) => state.search)
+  // if search is empty & items is marked as a subItem, don't show it
+  // ie: only show these items in search results, not top level
+  if (!search && isSubItem) return null
+  return <CommandItem {...props}>{children}</CommandItem>
+}

packages/ui/src/components/Command/SearchOnlyItem.tsx

@@ -1,10 +1,5 @@
-import { useCommandState } from 'cmdk-supabase'
 import { CommandItem } from './Command.utils'
 
 export default function SearchOnlyItem({ children, isSubItem, ...props }: any) {
-  const search = useCommandState((state) => state.search)
-  // if search is empty & items is marked as a subItem, don't show it
-  // ie: only show these items in search results, not top level
-  if (!search && isSubItem) return null
   return <CommandItem {...props}>{children}</CommandItem>
 }

packages/ui/src/components/Command/SearchableStudioItems.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { CommandGroup } from './Command.utils'
 import SearchOnlyItem from './SearchOnlyItem'
 import { useRouter } from 'next/router'

packages/ui/src/components/Command/ThemeOptions.tsx

@@ -1,12 +1,12 @@
 import { CommandGroup } from 'cmdk-supabase'
 import { useCommandMenu } from './CommandMenuProvider'
-import SearchOnlyItem from './SearchOnlyItem'
+import ChildItem from './ChildItem'
 
 const ThemeOptions = ({ isSubItem = false }) => {
   const { setIsOpen, actions } = useCommandMenu()
   return (
     <CommandGroup>
-      <SearchOnlyItem
+      <ChildItem
         isSubItem={isSubItem}
         onSelect={() => {
           actions.toggleTheme(true)
@@ -14,8 +14,8 @@ const ThemeOptions = ({ isSubItem = false }) => {
         }}
       >
         Change Theme to dark
-      </SearchOnlyItem>
-      <SearchOnlyItem
+      </ChildItem>
+      <ChildItem
         isSubItem={isSubItem}
         onSelect={() => {
           actions.toggleTheme(false)
@@ -23,7 +23,7 @@ const ThemeOptions = ({ isSubItem = false }) => {
         }}
       >
         Change Theme to light
-      </SearchOnlyItem>
+      </ChildItem>
     </CommandGroup>
   )
 }