From f837474ff8d60edaa3399a15a53c52b543597629 Mon Sep 17 00:00:00 2001 From: Peter Oesteritz Date: Thu, 11 Aug 2022 09:21:02 +0200 Subject: [PATCH 1/3] =?UTF-8?q?Added=20prop=20to=20render=20Radix=E2=80=99?= =?UTF-8?q?=20Dialog.Trigger?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cmdk/src/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/cmdk/src/index.tsx b/cmdk/src/index.tsx index e0c05c6..8c757a5 100644 --- a/cmdk/src/index.tsx +++ b/cmdk/src/index.tsx @@ -14,7 +14,12 @@ type SeparatorProps = DivProps & { /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */ alwaysRender?: boolean } -type DialogProps = RadixDialog.DialogProps & CommandProps +type DialogProps = RadixDialog.DialogProps & CommandProps & { + /** + * Pass an element which will be used as Dialog.Trigger inside Dialog.Root + */ + trigger?: React.ReactNode +} type ListProps = Children & DivProps & {} type ItemProps = Children & Omit & { @@ -748,9 +753,10 @@ const List = React.forwardRef((props, forwardedRef) = * Renders the command menu in a Radix Dialog. */ const Dialog = React.forwardRef((props, forwardedRef) => { - const { open, onOpenChange, ...etc } = props + const { open, onOpenChange, trigger, ...etc } = props return ( + {trigger && {trigger}} From f6745609ff9a855e6a14f64552479aed8bf36600 Mon Sep 17 00:00:00 2001 From: Peter Oesteritz Date: Wed, 31 Aug 2022 10:42:07 +0200 Subject: [PATCH 2/3] [WIP] extracted dialog portal --- cmdk/src/index.tsx | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/cmdk/src/index.tsx b/cmdk/src/index.tsx index 8c757a5..84c2b57 100644 --- a/cmdk/src/index.tsx +++ b/cmdk/src/index.tsx @@ -14,12 +14,8 @@ type SeparatorProps = DivProps & { /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */ alwaysRender?: boolean } -type DialogProps = RadixDialog.DialogProps & CommandProps & { - /** - * Pass an element which will be used as Dialog.Trigger inside Dialog.Root - */ - trigger?: React.ReactNode -} +type DialogProps = RadixDialog.DialogProps & CommandProps +type DialogPortalProps = RadixDialog.DialogPortalProps & CommandProps type ListProps = Children & DivProps & {} type ItemProps = Children & Omit & { @@ -749,14 +745,27 @@ const List = React.forwardRef((props, forwardedRef) = ) }) +/** + * Dialog Portal + */ +const DialogPortal = React.forwardRef((props, forwardedRef) => { + return ( + + + + + + + ) +}) + /** * Renders the command menu in a Radix Dialog. */ const Dialog = React.forwardRef((props, forwardedRef) => { - const { open, onOpenChange, trigger, ...etc } = props + const { open, onOpenChange, ...etc } = props return ( - {trigger && {trigger}} @@ -811,6 +820,7 @@ const pkg = Object.assign(Command, { Group, Separator, Dialog, + DialogPortal, Empty, Loading, }) From 13912b2b5f924cf0c8405df6781722b93a43f0f2 Mon Sep 17 00:00:00 2001 From: Peter Oesteritz Date: Mon, 24 Jul 2023 16:20:29 +0200 Subject: [PATCH 3/3] export DialogPortal as single component --- cmdk/src/index.tsx | 58 +++++++++++++++++++++++++++++++--------------- 1 file changed, 39 insertions(+), 19 deletions(-) diff --git a/cmdk/src/index.tsx b/cmdk/src/index.tsx index fcbd83c..35f56b6 100644 --- a/cmdk/src/index.tsx +++ b/cmdk/src/index.tsx @@ -5,24 +5,29 @@ import { commandScore } from './command-score' type Children = { children?: React.ReactNode } type DivProps = React.HTMLAttributes -type LoadingProps = Children & DivProps & { - /** Estimated progress of loading asynchronous options. */ - progress?: number -} +type LoadingProps = Children & + DivProps & { + /** Estimated progress of loading asynchronous options. */ + progress?: number + } type EmptyProps = Children & DivProps & {} type SeparatorProps = DivProps & { /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */ alwaysRender?: boolean } -type DialogProps = RadixDialog.DialogProps & - CommandProps & { - /** Provide a className to the Dialog overlay. */ - overlayClassName?: string - /** Provide a className to the Dialog content. */ - contentClassName?: string - /** Provide a custom element the Dialog should portal into. */ - container?: HTMLElement - } +type CommonDialogProps = { + /** Provide a className to the Dialog overlay. */ + overlayClassName?: string + /** Provide a className to the Dialog content. */ + contentClassName?: string + /** Provide a custom element the Dialog should portal into. */ + container?: HTMLElement +} +type DialogProps = RadixDialog.DialogProps & CommandProps & CommonDialogProps +type DialogPortalWrapperProps = RadixDialog.DialogPortalProps & CommandProps & CommonDialogProps +type DialogPortalProps = { + ref: React.ForwardedRef +} & (DialogProps | DialogPortalWrapperProps) type ListProps = Children & DivProps & {} type ItemProps = Children & Omit & { @@ -799,6 +804,17 @@ const List = React.forwardRef((props, forwardedRef) = ) }) +const DialogPortal = ({ overlayClassName, contentClassName, container, label, ref, ...etc }: DialogPortalProps) => { + return ( + + + + + + + ) +} + /** * Renders the command menu in a Radix Dialog. */ @@ -806,16 +822,19 @@ const Dialog = React.forwardRef((props, forwardedRe const { open, onOpenChange, overlayClassName, contentClassName, container, ...etc } = props return ( - - - - - - + ) }) +/** + * Renders the command menu in a Radix Dialog without the root element + */ +const DialogPortalWrapper = React.forwardRef((props, forwardedRef) => { + const { overlayClassName, contentClassName, container, ...etc } = props + return +}) + /** * Automatically renders when there are no results for the search query. */ @@ -860,6 +879,7 @@ const pkg = Object.assign(Command, { Group, Separator, Dialog, + DialogPortal: DialogPortalWrapper, Empty, Loading, })