Apply changes from code browser

Apply changes from code browser

Author: adamleithp

apps/code/src/renderer/features/command/components/Command.tsx

@@ -1,161 +1,161 @@
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandRoot,
-} from "cmdk";
+import { Command as CmdkCommand } from "cmdk";
 import React from "react";
 import "./Command.css";
 
-type CommandRootProps = React.ComponentPropsWithoutRef<typeof CommandRoot> & {
+interface CommandRootProps extends React.ComponentProps<typeof CmdkCommand> {
   className?: string;
-};
+}
 
-const CommandRootWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandRoot>,
+const CommandRoot = React.forwardRef<
+  React.ElementRef<typeof CmdkCommand>,
   CommandRootProps
 >(({ className, ...props }, ref) => {
   return (
-    <CommandRoot
+    <CmdkCommand
       ref={ref}
       className={`flex h-full w-full flex-col overflow-hidden ${className || ""}`}
       {...props}
     />
   );
 });
 
-CommandRootWrapper.displayName = "CommandRoot";
+CommandRoot.displayName = "CommandRoot";
 
-type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandInput> & {
+interface CommandInputProps
+  extends React.ComponentProps<typeof CmdkCommand.Input> {
   className?: string;
-};
+}
 
-const CommandInputWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandInput>,
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CmdkCommand.Input>,
   CommandInputProps
 >(({ className, ...props }, ref) => {
-  return <CommandInput ref={ref} className={className} {...props} />;
+  return <CmdkCommand.Input ref={ref} className={className} {...props} />;
 });
 
-CommandInputWrapper.displayName = "CommandInput";
+CommandInput.displayName = "CommandInput";
 
-type CommandListProps = React.ComponentPropsWithoutRef<typeof CommandList> & {
+interface CommandListProps
+  extends React.ComponentProps<typeof CmdkCommand.List> {
   className?: string;
-};
+}
 
-const CommandListWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandList>,
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CmdkCommand.List>,
   CommandListProps
 >(({ className, ...props }, ref) => {
   return (
-    <CommandList
+    <CmdkCommand.List
       ref={ref}
       className={`overflow-y-auto ${className || ""}`}
       {...props}
     />
   );
 });
 
-CommandListWrapper.displayName = "CommandList";
+CommandList.displayName = "CommandList";
 
-type CommandItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> & {
+interface CommandItemProps
+  extends React.ComponentProps<typeof CmdkCommand.Item> {
   className?: string;
-};
+}
 
-const CommandItemWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandItem>,
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CmdkCommand.Item>,
   CommandItemProps
 >(({ className, ...props }, ref) => {
   return (
-    <CommandItem
+    <CmdkCommand.Item
       ref={ref}
       className={`relative flex cursor-pointer select-none items-center px-3 py-2 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent-3 data-[disabled=true]:opacity-50 ${className || ""}`}
       {...props}
     />
   );
 });
 
-CommandItemWrapper.displayName = "CommandItem";
+CommandItem.displayName = "CommandItem";
 
-type CommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandGroup> & {
+interface CommandGroupProps
+  extends React.ComponentProps<typeof CmdkCommand.Group> {
   className?: string;
   heading?: string;
-};
+}
 
-const CommandGroupWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandGroup>,
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CmdkCommand.Group>,
   CommandGroupProps
 >(({ className, heading, children, ...props }, ref) => {
   return (
-    <CommandGroup ref={ref} className={`p-1 ${className || ""}`} {...props}>
+    <CmdkCommand.Group
+      ref={ref}
+      className={`p-1 ${className || ""}`}
+      {...props}
+    >
       {heading && (
         <div className="px-2 py-1.5 text-gray-11" style={{ fontSize: "14px" }}>
           {heading}
         </div>
       )}
       {children}
-    </CommandGroup>
+    </CmdkCommand.Group>
   );
 });
 
-CommandGroupWrapper.displayName = "CommandGroup";
+CommandGroup.displayName = "CommandGroup";
 
-type CommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandEmpty> & {
+interface CommandEmptyProps
+  extends React.ComponentProps<typeof CmdkCommand.Empty> {
   className?: string;
-};
+}
 
-const CommandEmptyWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandEmpty>,
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CmdkCommand.Empty>,
   CommandEmptyProps
 >(({ className, ...props }, ref) => {
   return (
-    <CommandEmpty
+    <CmdkCommand.Empty
       ref={ref}
       className={`py-6 text-center text-sm ${className || ""}`}
       {...props}
     />
   );
 });
 
-CommandEmptyWrapper.displayName = "CommandEmpty";
+CommandEmpty.displayName = "CommandEmpty";
 
-type CommandDialogProps = React.ComponentPropsWithoutRef<
-  typeof CommandDialog
-> & {
+interface CommandDialogProps
+  extends React.ComponentProps<typeof CmdkCommand.Dialog> {
   className?: string;
   contentClassName?: string;
-};
+}
 
-const CommandDialogWrapper = ({
+const CommandDialog = ({
   className,
   contentClassName,
   children,
   ...props
 }: CommandDialogProps) => {
   return (
-    <CommandDialog
+    <CmdkCommand.Dialog
       label="Command menu"
       className={className}
       contentClassName={`command-dialog-content ${contentClassName || ""}`}
       overlayClassName="command-dialog-overlay"
       {...props}
     >
       {children}
-    </CommandDialog>
+    </CmdkCommand.Dialog>
   );
 };
 
-CommandDialogWrapper.displayName = "CommandDialog";
+CommandDialog.displayName = "CommandDialog";
 
 export const Command = {
-  Root: CommandRootWrapper,
-  Dialog: CommandDialogWrapper,
-  Input: CommandInputWrapper,
-  List: CommandListWrapper,
-  Item: CommandItemWrapper,
-  Group: CommandGroupWrapper,
-  Empty: CommandEmptyWrapper,
+  Root: CommandRoot,
+  Dialog: CommandDialog,
+  Input: CommandInput,
+  List: CommandList,
+  Item: CommandItem,
+  Group: CommandGroup,
+  Empty: CommandEmpty,
 };