Are you sure you want to delete this pipeline? This action cannot be undone.
-
diff --git a/packages/ui/src/components/chat_deprecated.tsx b/packages/ui/src/components/chat_deprecated.tsx
index 44e3405fa1..d364bc519d 100644
--- a/packages/ui/src/components/chat_deprecated.tsx
+++ b/packages/ui/src/components/chat_deprecated.tsx
@@ -43,7 +43,7 @@ const Message: React.FC = ({ self, time, avatar, actions, children
>
{children}
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index 42368c6f5f..18f5f9fbf5 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -37,9 +37,9 @@ const Checkbox = forwardRef, Omit
{props.checked === 'indeterminate' ? (
-
diff --git a/packages/ui/src/components/commit-copy-actions.tsx b/packages/ui/src/components/commit-copy-actions.tsx
index 18e3d2f7ce..7c30aaf7fa 100644
--- a/packages/ui/src/components/commit-copy-actions.tsx
+++ b/packages/ui/src/components/commit-copy-actions.tsx
@@ -1,7 +1,6 @@
import { KeyboardEvent } from 'react'
-import { ButtonGroup, ButtonGroupButtonProps, ButtonProps, Text, useCopyButton } from '@/components'
-import { useRouterContext } from '@/context'
+import { ButtonGroup, ButtonGroupButtonProps, ButtonProps, Link, Text, useCopyButton } from '@/components'
interface CommitCopyActionsProps {
sha: string
@@ -11,11 +10,10 @@ interface CommitCopyActionsProps {
export const CommitCopyActions = ({ sha, toCommitDetails, size = 'xs' }: CommitCopyActionsProps) => {
const { copyButtonProps, CopyIcon } = useCopyButton({ copyData: sha, iconSize: '2xs', color: 'surfaceGray' })
- const { navigate } = useRouterContext()
const handleNavigation = (ev: React.MouseEvent | React.KeyboardEvent) => {
ev.stopPropagation()
- navigate(toCommitDetails?.({ sha: sha || '' }) || '')
+ toCommitDetails?.({ sha: sha || '' })
}
const handleKeyDown = (e: KeyboardEvent) => {
@@ -28,11 +26,12 @@ export const CommitCopyActions = ({ sha, toCommitDetails, size = 'xs' }: CommitC
buttonsProps={[
{
children: (
-
- {sha.substring(0, 6)}
-
+
+
+ {sha.substring(0, 6)}
+
+
),
- onClick: handleNavigation,
onKeyDown: handleKeyDown,
className: 'font-mono'
},
diff --git a/packages/ui/src/components/commit-suggestions-dialog/commit-suggestions-dialog.tsx b/packages/ui/src/components/commit-suggestions-dialog/commit-suggestions-dialog.tsx
index 6828187fb3..7af25b4388 100644
--- a/packages/ui/src/components/commit-suggestions-dialog/commit-suggestions-dialog.tsx
+++ b/packages/ui/src/components/commit-suggestions-dialog/commit-suggestions-dialog.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
import { useForm } from 'react-hook-form'
-import { Button, ButtonLayout, Dialog, FormInput, FormWrapper } from '@/components'
+import { Alert, Button, ButtonLayout, Dialog, FormInput, FormWrapper } from '@/components'
import { UsererrorError } from '@/types'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
@@ -32,6 +32,7 @@ export const CommitSuggestionsDialog: FC = ({
isOpen,
onClose,
commitTitlePlaceHolder,
+ error,
onFormSubmit,
isSubmitting
}) => {
@@ -44,7 +45,14 @@ export const CommitSuggestionsDialog: FC = ({
}
})
- const { register, handleSubmit } = formMethods
+ const { register, handleSubmit, reset } = formMethods
+ // Reset form when dialog opens or closes
+ useEffect(() => {
+ reset({
+ message: '',
+ title: commitTitlePlaceHolder
+ })
+ }, [isOpen, reset, commitTitlePlaceHolder])
return (
@@ -53,8 +61,8 @@ export const CommitSuggestionsDialog: FC = ({
Commit Changes
-
-
+
+
= ({
label="Extended description"
className="h-44"
/>
-
-
-
-
- Cancel
-
-
-
-
-
+ {error && (
+
+
+ {error.message || 'An error occurred while applying suggestions. Please try again.'}
+
+
+ )}
+
+
+
+
+
+
+ Cancel
+
+
+
+
)
diff --git a/packages/ui/src/components/copy-button/copy-button.tsx b/packages/ui/src/components/copy-button/copy-button.tsx
index e82d9a2860..8cc17cf0bb 100644
--- a/packages/ui/src/components/copy-button/copy-button.tsx
+++ b/packages/ui/src/components/copy-button/copy-button.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { forwardRef } from 'react'
import { Button, ButtonSizes, useCopyButton, UseCopyButtonProps, type ButtonVariants } from '@/components'
@@ -10,29 +10,26 @@ export interface CopyButtonProps extends Omit {
iconOnly?: boolean
}
-export const CopyButton: FC = ({
- name,
- className,
- buttonVariant = 'outline',
- iconSize = 'sm',
- size = 'sm',
- onClick,
- color,
- iconOnly = false
-}) => {
- const { copyButtonProps, CopyIcon } = useCopyButton({ onClick, copyData: name, iconSize, color })
+export const CopyButton = forwardRef(
+ (
+ { name, className, buttonVariant = 'outline', iconSize = 'sm', size = 'sm', onClick, color, iconOnly = false },
+ ref
+ ) => {
+ const { copyButtonProps, CopyIcon } = useCopyButton({ onClick, copyData: name, iconSize, color })
- return (
-
- )
-}
+ return (
+
+ )
+ }
+)
CopyButton.displayName = 'CopyButton'
diff --git a/packages/ui/src/components/copy-tag.tsx b/packages/ui/src/components/copy-tag.tsx
new file mode 100644
index 0000000000..11005d22f0
--- /dev/null
+++ b/packages/ui/src/components/copy-tag.tsx
@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import copy from 'clipboard-copy'
+
+import { Tag, TagProps } from './tag'
+
+type CopyTagProps = TagProps & {
+ actionIcon?: never
+ onActionClick?: never
+}
+
+export function CopyTag(props: CopyTagProps) {
+ const { value } = props
+
+ const [copied, setCopied] = useState(false)
+
+ useEffect(() => {
+ let timeoutId: number
+
+ if (copied) {
+ timeoutId = window.setTimeout(() => setCopied(false), 1000)
+ }
+
+ return () => {
+ clearTimeout(timeoutId)
+ }
+ }, [copied])
+
+ const handleCopy = useCallback(() => {
+ copy(value).then(() => {
+ setCopied(true)
+ })
+ }, [value])
+
+ return ,
'color' | 'role' | 'aria-readonly' | 'tabIndex' | 'onClick'
> & {
+ variant?: VariantProps['variant']
theme?: VariantProps['theme']
}
-function CounterBadge({ className, theme = 'default', children, ...props }: CounterBadgeProps) {
- return (
-
- {children}
-
- )
-}
+const CounterBadge = forwardRef(
+ ({ className, variant, theme = 'default', children, ...props }, ref) => {
+ return (
+
+ {children}
+
+ )
+ }
+)
CounterBadge.displayName = 'CounterBadge'
export { CounterBadge, counterBadgeVariants }
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index f8ab45cad3..741012c2e3 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -55,17 +55,26 @@ const Content = forwardRef(
return (
-
- {!hideClose && (
-
-
-
- )}
- {children}
-
+ {/* !!! */}
+ {/* For the scroll to work when using the dialog in Shadow DOM, the Overlay needs to wrap the Content */}
+ {/* Here’s the issue for the scroll bug in Shadow DOM - https://github.com/radix-ui/primitives/issues/3353 */}
+
+ event.preventDefault()}
+ {...props}
+ >
+ {!hideClose && (
+
+
+
+ )}
+ {children}
+
+
)
}
@@ -78,53 +87,60 @@ interface HeaderProps extends HTMLAttributes {
theme?: 'default' | 'warning' | 'danger'
}
-const Header = ({ className, icon, logo, theme = 'default', children, ...props }: HeaderProps) => {
- if (icon && logo) {
- console.warn('Dialog.Header: Cannot use both icon and logo props together')
- return null
- }
-
- // Find the title and description from children
- let title: React.ReactNode = null
- let description: React.ReactNode = null
+const Header = forwardRef(
+ ({ className, icon, logo, theme = 'default', children, ...props }, ref) => {
+ if (icon && logo) {
+ console.warn('Dialog.Header: Cannot use both icon and logo props together')
+ return null
+ }
- Children.forEach(children, child => {
- if (isValidElement(child)) {
- if (child.type === Title) {
- title = child
- } else if (child.type === Description) {
- description = child
+ // Find the title and description from children
+ let title: React.ReactNode = null
+ let description: React.ReactNode = null
+
+ Children.forEach(children, child => {
+ if (isValidElement(child)) {
+ if (child.type === Title) {
+ title = child
+ } else if (child.type === Description) {
+ description = child
+ }
}
- }
- })
-
- return (
-
-
- {icon && (
-
- ) => (
- >(({ className, ...props }, ref) => (
+ ) => (
- >(
+ ({ className, ...props }, ref) => (
+ (({ className, classNameContent, children, ...props }, ref) => (
{children}
-)
+))
+Body.displayName = 'Dialog.Body'
-const Footer = ({ className, ...props }: HTMLAttributes) => (
-
-)
+const Footer = forwardRef>(({ className, ...props }, ref) => (
+
+))
+Footer.displayName = 'Dialog.Footer'
const Close = forwardRef(({ children, className, ...props }, ref) => (
diff --git a/packages/ui/src/components/dialogs/delete-alert-dialog.tsx b/packages/ui/src/components/dialogs/delete-alert-dialog.tsx
index cf88f3ff71..a9e1b0dae3 100644
--- a/packages/ui/src/components/dialogs/delete-alert-dialog.tsx
+++ b/packages/ui/src/components/dialogs/delete-alert-dialog.tsx
@@ -1,6 +1,6 @@
import { ChangeEvent, FC, useMemo, useState } from 'react'
-import { Alert, AlertDialog, Fieldset, Input } from '@/components'
+import { Alert, AlertDialog, Message, MessageTheme, Text, TextInput } from '@/components'
import { useTranslation } from '@/context'
import { getErrorMessage } from '@utils/utils'
@@ -14,7 +14,10 @@ export interface DeleteAlertDialogProps {
error?: { type?: string; message: string } | null
withForm?: boolean
message?: string
+ deletionItemName?: string
deletionKeyword?: string
+ violation?: boolean
+ bypassable?: boolean
}
export const DeleteAlertDialog: FC = ({
@@ -27,59 +30,122 @@ export const DeleteAlertDialog: FC = ({
error,
withForm = false,
message,
- deletionKeyword = 'DELETE'
+ deletionItemName,
+ deletionKeyword = 'DELETE',
+ violation = false,
+ bypassable = false
}) => {
const { t } = useTranslation()
const [verification, setVerification] = useState('')
+ const [validationError, setValidationError] = useState(false)
const handleChangeVerification = (event: ChangeEvent) => {
setVerification(event.target.value)
+ if (validationError) {
+ setValidationError(false)
+ }
}
- const isDisabled = isLoading || (withForm && verification !== deletionKeyword)
-
const handleDelete = () => {
- if (isDisabled) return
+ if (withForm && verification !== deletionKeyword) {
+ setValidationError(true)
+ }
+
+ if (isLoading || (withForm && verification !== deletionKeyword)) return
+ setValidationError(false)
deleteFn(identifier!)
}
+ const handleOpenChange = () => {
+ setTimeout(() => {
+ setVerification('')
+ setValidationError(false)
+ }, 300)
+ onClose()
+ }
+
const displayMessageContent = useMemo(() => {
if (message) return message
+ const replaceText = '__IDENTIFIER__'
+
if (type) {
- return t(
+ const text = t(
'component:deleteDialog.descriptionWithType',
- `This will permanently delete your ${type} and remove all data. This action cannot be undone.`,
- { type: type }
+ `This will permanently delete your ${type} ${replaceText} and remove all data. This action cannot be undone.`,
+ { type: type, identifier: replaceText }
+ )
+
+ const parts = text.split(replaceText)
+
+ return (
+ <>
+ {parts[0]}
+ {(deletionItemName ?? identifier) && (
+
+ {deletionItemName ?? identifier}
+
+ )}
+ {parts[1]}
+
)
}
+
return t(
'component:deleteDialog.description',
`This will permanently remove all data. This action cannot be undone.`
)
- }, [type, t, message])
+ }, [type, t, message, identifier, deletionItemName])
return (
-
+
- {displayMessageContent}
+
+ {displayMessageContent}
+
+
{withForm && (
-
+
+ {bypassable
+ ? t(
+ 'component:deleteDialog.violationMessages.bypassed',
+ `Some rules will be bypassed while deleting ${type}`,
+ { type: type }
+ )
+ : t('component:deleteDialog.violationMessages.notAllow', `Some rules don't allow you to delete ${type}`, {
+ type: type
+ })}
+
)}
{!!error && (
-
+
Failed to perform delete operation
{getErrorMessage(error as Error, 'Failed to perform delete operation')}
@@ -88,7 +154,9 @@ export const DeleteAlertDialog: FC = ({
)}
Yes, delete {type}
+
+ {violation && bypassable ? `Bypass rules and delete` : `Yes`}
+
)
diff --git a/packages/ui/src/components/drawer/Drawer.Tagline.tsx b/packages/ui/src/components/drawer/Drawer.Tagline.tsx
index 64b7cf372e..3668b58881 100644
--- a/packages/ui/src/components/drawer/Drawer.Tagline.tsx
+++ b/packages/ui/src/components/drawer/Drawer.Tagline.tsx
@@ -1,8 +1,8 @@
-import { HTMLAttributes } from 'react'
+import { forwardRef, HTMLAttributes } from 'react'
import { cn } from '@/utils'
-export const DrawerTagline = ({ className, ...props }: HTMLAttributes) => (
-
+export const DrawerTagline = forwardRef>(
+ ({ className, ...props }, ref) =>
)
DrawerTagline.displayName = 'DrawerTagline'
diff --git a/packages/ui/src/components/drawer/DrawerBody.tsx b/packages/ui/src/components/drawer/DrawerBody.tsx
index 35260e906f..27d2c78252 100644
--- a/packages/ui/src/components/drawer/DrawerBody.tsx
+++ b/packages/ui/src/components/drawer/DrawerBody.tsx
@@ -1,28 +1,33 @@
+import { forwardRef } from 'react'
+
import { ScrollArea, ScrollAreaProps, useScrollArea } from '@/components'
import { cn } from '@/utils'
-export const DrawerBody = (props: ScrollAreaProps & { scrollAreaClassName?: string }) => {
- const { isTop, isBottom, onScrollTop, onScrollBottom } = useScrollArea(props)
- const { className, children, scrollAreaClassName, classNameContent, ...restProps } = props
+export const DrawerBody = forwardRef(
+ (props, ref) => {
+ const { isTop, isBottom, onScrollTop, onScrollBottom } = useScrollArea(props)
+ const { className, children, scrollAreaClassName, classNameContent, ...restProps } = props
- return (
-
-
- {children}
-
-
- )
-}
+
+ {children}
+
+
+ )
+ }
+)
DrawerBody.displayName = 'DrawerBody'
diff --git a/packages/ui/src/components/drawer/DrawerContent.tsx b/packages/ui/src/components/drawer/DrawerContent.tsx
index ad7675e327..472f83e2c0 100644
--- a/packages/ui/src/components/drawer/DrawerContent.tsx
+++ b/packages/ui/src/components/drawer/DrawerContent.tsx
@@ -46,29 +46,45 @@ export const DrawerContent = forwardRef {
const { portalContainer } = usePortal()
- const { direction } = useDrawerContext()
+ const { direction, modal } = useDrawerContext()
+
+ const withCustomOverlay = forceWithOverlay && modal === false
+
+ const Content = (
+
+ {!hideClose && (
+
+
+
+ )}
+ {children}
+
+ )
return (
-
- {!hideClose && (
-
-
-
- )}
- {children}
-
+ {/* !!! */}
+ {/* For the scroll to work when using the Drawer with modal === true in Shadow DOM, the Overlay needs to wrap the Content */}
+ {/* Here’s the issue for the scroll bug in Shadow DOM, works same for Vaul - https://github.com/radix-ui/primitives/issues/3353 */}
+ {modal ? (
+
+ {Content}
+
+ ) : (
+ <>
+
)
}
diff --git a/packages/ui/src/components/drawer/DrawerFooter.tsx b/packages/ui/src/components/drawer/DrawerFooter.tsx
index f06e8a7ad7..e210149c81 100644
--- a/packages/ui/src/components/drawer/DrawerFooter.tsx
+++ b/packages/ui/src/components/drawer/DrawerFooter.tsx
@@ -1,8 +1,8 @@
-import { HTMLAttributes } from 'react'
+import { forwardRef, HTMLAttributes } from 'react'
import { cn } from '@/utils'
-export const DrawerFooter = ({ className, ...props }: HTMLAttributes) => (
-
+export const DrawerFooter = forwardRef>(
+ ({ className, ...props }, ref) =>
)
DrawerFooter.displayName = 'DrawerFooter'
diff --git a/packages/ui/src/components/drawer/DrawerHeader.tsx b/packages/ui/src/components/drawer/DrawerHeader.tsx
index ab2b73c4fe..1fbe59ace2 100644
--- a/packages/ui/src/components/drawer/DrawerHeader.tsx
+++ b/packages/ui/src/components/drawer/DrawerHeader.tsx
@@ -1,4 +1,4 @@
-import { Children, HTMLAttributes, ReactNode } from 'react'
+import { Children, forwardRef, HTMLAttributes, ReactNode } from 'react'
import { IconV2, IconV2NamesType, LogoV2, LogoV2NamesType } from '@/components'
import { cn, getComponentDisplayName } from '@/utils'
@@ -28,39 +28,41 @@ type DrawerHeaderNoIconOrLogoProps = {
export type DrawerHeaderProps = DrawerHeaderBaseProps &
(DrawerHeaderIconOnlyProps | DrawerHeaderLogoOnlyProps | DrawerHeaderNoIconOrLogoProps)
-export const DrawerHeader = ({ className, children, icon, logo, ...props }: DrawerHeaderProps) => {
- const IconOrLogoComp =
- (!!icon && (
+ ({ className, children, icon, logo, ...props }, ref) => {
+ const IconOrLogoComp =
+ (!!icon && ,
- ComponentPropsWithoutRef & { forceWithOverlay?: boolean }
->(({ className, forceWithOverlay, ...props }, ref) => {
- const { nested, isParentOpen, modal } = useDrawerContext()
-
- const withCustomOverlay = forceWithOverlay && modal === false
+ ComponentPropsWithoutRef & { withCustomOverlay?: boolean }
+>(({ className, withCustomOverlay = false, ...props }, ref) => {
+ const { nested, isParentOpen } = useDrawerContext()
if (withCustomOverlay) {
return (
diff --git a/packages/ui/src/components/drawer/DrawerRoot.tsx b/packages/ui/src/components/drawer/DrawerRoot.tsx
index 81362c8bf8..449f36f2fb 100644
--- a/packages/ui/src/components/drawer/DrawerRoot.tsx
+++ b/packages/ui/src/components/drawer/DrawerRoot.tsx
@@ -69,7 +69,7 @@ export const DrawerRoot = ({
return (
{nested && FakeTriggers}
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index b7b8de04a3..a5e31f281b 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -1,7 +1,15 @@
-import { ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes, ReactNode } from 'react'
+import {
+ ComponentPropsWithoutRef,
+ ElementRef,
+ forwardRef,
+ HTMLAttributes,
+ KeyboardEvent,
+ ReactNode,
+ useRef
+} from 'react'
import { usePortal, useTranslation } from '@/context'
-import { cn, filterChildrenByDisplayNames } from '@/utils'
+import { cn, filterChildrenByDisplayNames, useMergeRefs } from '@/utils'
import { Avatar, AvatarProps } from '@components/avatar'
import { Layout } from '@components/layout'
import { ScrollArea, ScrollAreaProps } from '@components/scroll-area'
@@ -64,24 +72,88 @@ const innerComponentsDisplayNames = [
interface DropdownMenuContentProps extends ComponentPropsWithoutRef {
isSubContent?: boolean
scrollAreaProps?: Omit
+ onOpenAutoFocus?: (event: Event) => void
}
const DropdownMenuContent = forwardRef, DropdownMenuContentProps>(
- ({ className, children: _children, sideOffset = 4, isSubContent, scrollAreaProps, ...props }, ref) => {
+ (
+ {
+ className,
+ children: _children,
+ sideOffset = 4,
+ isSubContent,
+ scrollAreaProps,
+ onKeyDownCapture: propOnKeyDownCapture,
+ ...props
+ },
+ ref
+ ) => {
const { portalContainer } = usePortal()
+ const contentRef = useRef(null)
const Primitive = isSubContent ? DropdownMenuPrimitive.SubContent : DropdownMenuPrimitive.Content
const header = filterChildrenByDisplayNames(_children, [displayNames.header])[0]
const footer = filterChildrenByDisplayNames(_children, [displayNames.footer])[0]
const children = filterChildrenByDisplayNames(_children, [displayNames.header, displayNames.footer], true)
+ const mergedRef = useMergeRefs([
+ node => {
+ if (!node) return
+
+ contentRef.current = node
+ },
+ ref
+ ])
+
+ /**
+ * This code is executed only when inside a ShadowRoot
+ */
+ const onKeyDownCaptureHandler = (e: KeyboardEvent) => {
+ /**
+ * To block further code execution in onKeyDownCaptureHandler,
+ * need to call e.preventDefault() inside propOnKeyDownCapture.
+ */
+ propOnKeyDownCapture?.(e)
+ if (e.defaultPrevented || e.isDefaultPrevented?.()) return
+
+ if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return
+
+ const rootEl = contentRef.current
+ if (!rootEl) return
+
+ const rootNode = rootEl.getRootNode()
+
+ if (!(rootNode instanceof ShadowRoot)) return
+
+ const items = Array.from(
+ rootEl.querySelectorAll('[data-radix-collection-item]:not([data-disabled])[role*="menuitem"]')
+ )
+
+ if (!items.length) return
+
+ const activeEl = rootNode instanceof ShadowRoot ? rootNode.activeElement : document.activeElement
+ let idx = items.findIndex(el => el === activeEl || (activeEl instanceof Element && el.contains(activeEl)))
+
+ if (idx === -1) {
+ idx = e.key === 'ArrowDown' ? -1 : 0
+ }
+
+ const next =
+ e.key === 'ArrowDown' ? (idx + 1 + items.length) % items.length : (idx - 1 + items.length) % items.length
+
+ e.preventDefault()
+ e.stopPropagation()
+ items[next]?.focus()
+ }
+
return (
event.preventDefault()}
+ onKeyDownCapture={onKeyDownCaptureHandler}
{...props}
>
{!!header && {header}}
@@ -155,10 +227,28 @@ interface DropdownMenuItemProps
extends Omit,
Omit, 'title' | 'prefix'> {
prefix?: ReactNode
+ subContentProps?: Omit
+ subMenuProps?: ComponentPropsWithoutRef
}
const DropdownMenuItem = forwardRef, DropdownMenuItemProps>(
- ({ className, children, title, description, label, shortcut, checkmark, prefix, tag, ...props }, ref) => {
+ (
+ {
+ className,
+ children,
+ title,
+ description,
+ label,
+ shortcut,
+ checkmark,
+ prefix,
+ tag,
+ subContentProps,
+ subMenuProps,
+ ...props
+ },
+ ref
+ ) => {
const filteredChildren = filterChildrenByDisplayNames(children, innerComponentsDisplayNames)
const withChildren = filteredChildren.length > 0
@@ -170,7 +260,7 @@ const DropdownMenuItem = forwardRef
+
- {filteredChildren}
+
+ {filteredChildren}
+
)
}
@@ -194,7 +286,10 @@ DropdownMenuItem.displayName = displayNames.item
interface DropdownMenuCheckboxItemProps
extends Omit,
- Omit, 'title' | 'onSelect'> {}
+ Omit, 'title' | 'onSelect'> {
+ subContentProps?: Omit
+ subMenuProps?: ComponentPropsWithoutRef
+}
const DropdownMenuCheckboxItem = forwardRef<
ElementRef,
@@ -213,6 +308,8 @@ const DropdownMenuCheckboxItem = forwardRef<
tag,
onCheckedChange,
onClick,
+ subContentProps,
+ subMenuProps,
...props
},
ref
@@ -227,9 +324,9 @@ const DropdownMenuCheckboxItem = forwardRef<
{checked && (
{checked === 'indeterminate' ? (
-
+
- {filteredChildren}
+
+ {filteredChildren}
+
)
}
@@ -402,20 +501,22 @@ const DropdownMenuSeparator = forwardRef<
))
DropdownMenuSeparator.displayName = displayNames.separator
-const DropdownMenuHeader = ({ className, ...props }: HTMLAttributes) => (
-
+const DropdownMenuHeader = forwardRef>(
+ ({ className, ...props }, ref) =>
)
DropdownMenuHeader.displayName = displayNames.header
-const DropdownMenuFooter = ({ className, ...props }: HTMLAttributes) => (
-
+const DropdownMenuFooter = forwardRef>(
+ ({ className, ...props }, ref) =>
)
DropdownMenuFooter.displayName = displayNames.footer
-const DropdownMenuSpinner = ({ className, ...props }: HTMLAttributes) => (
-
- >(
+ ({ className, ...props }, ref) => (
+
+ ) =>
+const DropdownMenuSlot = forwardRef>((props, ref) => (
+
+ {props.children}
+
+))
DropdownMenuSlot.displayName = displayNames.slot
const DropdownMenu = {
diff --git a/packages/ui/src/components/favorite.tsx b/packages/ui/src/components/favorite.tsx
index 14ac03d49d..800d046195 100644
--- a/packages/ui/src/components/favorite.tsx
+++ b/packages/ui/src/components/favorite.tsx
@@ -13,12 +13,13 @@ const Favorite: FC = ({ isFavorite = false, onFavoriteToggle
size="sm"
variant="transparent"
selectedVariant="primary"
+ selected={isFavorite}
prefixIcon={isFavorite ? 'star-solid' : 'star'}
prefixIconProps={{
className: isFavorite ? 'text-cn-icon-yellow' : 'text-cn-foreground-2',
size: '2xs'
}}
- onChange={(selected: boolean) => onFavoriteToggle(!selected)}
+ onChange={(selected: boolean) => onFavoriteToggle(selected)}
/>
)
diff --git a/packages/ui/src/components/file-additions-trigger.tsx b/packages/ui/src/components/file-additions-trigger.tsx
index 2d351430a1..425b320c05 100644
--- a/packages/ui/src/components/file-additions-trigger.tsx
+++ b/packages/ui/src/components/file-additions-trigger.tsx
@@ -16,7 +16,8 @@ export const FileAdditionsTrigger: FC = ({ pathNewFil