From e752facc51165cd8498dae75ed55acf6fcafcaf1 Mon Sep 17 00:00:00 2001 From: Sriram Veeraghanta Date: Mon, 11 Aug 2025 01:29:01 +0530 Subject: [PATCH 1/4] chore: replace jsx element with react node --- .../authentication/authentication-method-card.tsx | 4 ++-- apps/admin/core/components/common/controller-input.tsx | 4 ++-- apps/admin/core/components/common/copy-field.tsx | 4 ++-- .../components/issues/issue-layouts/issue-layout-HOC.tsx | 2 +- .../(projects)/profile/[userId]/activity/page.tsx | 2 +- .../(detail)/[projectId]/issues/(list)/mobile-header.tsx | 4 +--- .../(settings)/settings/account/activity/page.tsx | 2 +- apps/web/app/(all)/profile/activity/page.tsx | 2 +- apps/web/ce/components/command-palette/helpers.tsx | 2 +- apps/web/ce/components/workflow/state-option.tsx | 2 +- .../core/components/analytics/select/select-x-axis.tsx | 2 +- apps/web/core/components/core/list/list-item.tsx | 8 ++++---- .../core/components/core/modals/gpt-assistant-popover.tsx | 2 +- .../web/core/components/dropdowns/cycle/cycle-options.tsx | 2 +- apps/web/core/components/dropdowns/estimate.tsx | 2 +- .../core/components/dropdowns/module/module-options.tsx | 2 +- .../core/components/gantt-chart/chart/main-content.tsx | 2 +- apps/web/core/components/gantt-chart/chart/root.tsx | 2 +- apps/web/core/components/gantt-chart/root.tsx | 2 +- .../core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx | 2 +- apps/web/core/components/gantt-chart/sidebar/root.tsx | 2 +- .../components/integration/github/select-repository.tsx | 2 +- .../components/integration/github/single-user-select.tsx | 2 +- .../web/core/components/integration/jira/import-users.tsx | 2 +- .../issues/issue-detail-widgets/widget-button.tsx | 2 +- .../components/issues/issue-layouts/issue-layout-HOC.tsx | 2 +- .../components/issues/issue-layouts/quick-add/root.tsx | 2 +- apps/web/core/components/issues/select/base.tsx | 2 +- apps/web/core/components/labels/label-drag-n-drop-HOC.tsx | 2 +- apps/web/core/components/project/member-select.tsx | 2 +- .../components/project/send-project-invitation-modal.tsx | 2 +- .../favorite-items/common/favorite-item-title.tsx | 2 +- packages/propel/src/charts/bar-chart/bar.tsx | 4 ++-- packages/propel/src/charts/bar-chart/root.tsx | 2 +- packages/types/src/instance/auth.ts | 4 ++-- .../ui/src/breadcrumbs/navigation-search-dropdown.tsx | 2 +- packages/ui/src/dropdowns/helper.tsx | 6 +++--- packages/ui/src/tables/types.ts | 4 ++-- packages/ui/src/toast/index.tsx | 2 +- packages/ui/src/tooltip/tooltip.tsx | 4 ++-- packages/utils/src/editor.ts | 2 +- 41 files changed, 53 insertions(+), 55 deletions(-) diff --git a/apps/admin/core/components/authentication/authentication-method-card.tsx b/apps/admin/core/components/authentication/authentication-method-card.tsx index 897deb7c481..566551f48ef 100644 --- a/apps/admin/core/components/authentication/authentication-method-card.tsx +++ b/apps/admin/core/components/authentication/authentication-method-card.tsx @@ -7,8 +7,8 @@ import { cn } from "@plane/utils"; type Props = { name: string; description: string; - icon: JSX.Element; - config: JSX.Element; + icon: React.ReactNode; + config: React.ReactNode; disabled?: boolean; withBorder?: boolean; unavailable?: boolean; diff --git a/apps/admin/core/components/common/controller-input.tsx b/apps/admin/core/components/common/controller-input.tsx index ca8f301620c..cbcbafb2d07 100644 --- a/apps/admin/core/components/common/controller-input.tsx +++ b/apps/admin/core/components/common/controller-input.tsx @@ -13,7 +13,7 @@ type Props = { type: "text" | "password"; name: string; label: string; - description?: string | JSX.Element; + description?: string | React.ReactNode; placeholder: string; error: boolean; required: boolean; @@ -23,7 +23,7 @@ export type TControllerInputFormField = { key: string; type: "text" | "password"; label: string; - description?: string | JSX.Element; + description?: string | React.ReactNode; placeholder: string; error: boolean; required: boolean; diff --git a/apps/admin/core/components/common/copy-field.tsx b/apps/admin/core/components/common/copy-field.tsx index 6322356b44d..cd8cfee53a2 100644 --- a/apps/admin/core/components/common/copy-field.tsx +++ b/apps/admin/core/components/common/copy-field.tsx @@ -9,14 +9,14 @@ import { Button, TOAST_TYPE, setToast } from "@plane/ui"; type Props = { label: string; url: string; - description: string | JSX.Element; + description: string | React.ReactNode; }; export type TCopyField = { key: string; label: string; url: string; - description: string | JSX.Element; + description: string | React.ReactNode; }; export const CopyField: React.FC = (props) => { diff --git a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx index 193d7c55155..71cf0850208 100644 --- a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx +++ b/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx @@ -3,7 +3,7 @@ import { TLoader } from "@plane/types"; import { LogoSpinner } from "@/components/common"; interface Props { - children: string | JSX.Element | JSX.Element[]; + children: string | React.ReactNode | React.ReactNode[]; getGroupIssueCount: ( groupId: string | undefined, subGroupId: string | undefined, diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx index f3b71990445..3ad14bd9660 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx @@ -31,7 +31,7 @@ const ProfileActivityPage = observer(() => { const handleLoadMore = () => setPageCount((prev) => prev + 1); - const activityPages: JSX.Element[] = []; + const activityPages: React.ReactNode[] = []; for (let i = 0; i < pageCount; i++) activityPages.push( { const handleLoadMore = () => setPageCount((prev) => prev + 1); - const activityPages: JSX.Element[] = []; + const activityPages: React.ReactNode[] = []; for (let i = 0; i < pageCount; i++) activityPages.push( { const handleLoadMore = () => setPageCount((prev) => prev + 1); - const activityPages: JSX.Element[] = []; + const activityPages: React.ReactNode[] = []; for (let i = 0; i < pageCount; i++) activityPages.push( React.ReactNode; path: (item: any, projectId: string | undefined) => string; title: string; diff --git a/apps/web/ce/components/workflow/state-option.tsx b/apps/web/ce/components/workflow/state-option.tsx index a49b50db646..d9d911a9cc7 100644 --- a/apps/web/ce/components/workflow/state-option.tsx +++ b/apps/web/ce/components/workflow/state-option.tsx @@ -7,7 +7,7 @@ export type TStateOptionProps = { option: { value: string | undefined; query: string; - content: JSX.Element; + content: React.ReactNode; }; selectedValue: string | null | undefined; className?: string; diff --git a/apps/web/core/components/analytics/select/select-x-axis.tsx b/apps/web/core/components/analytics/select/select-x-axis.tsx index 1be296ff39b..9fc846c30bd 100644 --- a/apps/web/core/components/analytics/select/select-x-axis.tsx +++ b/apps/web/core/components/analytics/select/select-x-axis.tsx @@ -10,7 +10,7 @@ type Props = { placeholder?: string; hiddenOptions?: ChartXAxisProperty[]; allowNoValue?: boolean; - label?: string | JSX.Element; + label?: string | React.ReactNode; }; export const SelectXAxis: React.FC = (props) => { diff --git a/apps/web/core/components/core/list/list-item.tsx b/apps/web/core/components/core/list/list-item.tsx index 89c911680c7..e8ae4fcb9eb 100644 --- a/apps/web/core/components/core/list/list-item.tsx +++ b/apps/web/core/components/core/list/list-item.tsx @@ -12,9 +12,9 @@ interface IListItemProps { title: string; itemLink: string; onItemClick?: (e: React.MouseEvent) => void; - prependTitleElement?: JSX.Element; - appendTitleElement?: JSX.Element; - actionableItems?: JSX.Element; + prependTitleElement?: React.ReactNode; + appendTitleElement?: React.ReactNode; + actionableItems?: React.ReactNode; isMobile?: boolean; parentRef: React.RefObject; disableLink?: boolean; @@ -22,7 +22,7 @@ interface IListItemProps { itemClassName?: string; actionItemContainerClassName?: string; isSidebarOpen?: boolean; - quickActionElement?: JSX.Element; + quickActionElement?: React.ReactNode; preventDefaultProgress?: boolean; leftElementClassName?: string; rightElementClassName?: string; diff --git a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx index 7f0ce82597e..3c6eaa80926 100644 --- a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx +++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx @@ -22,7 +22,7 @@ type Props = { onError?: (error: any) => void; placement?: Placement; prompt?: string; - button: JSX.Element; + button: React.ReactNode; className?: string; workspaceId: string; workspaceSlug: string; diff --git a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx index 69baa558ca6..aaf4b6940e6 100644 --- a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx +++ b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx @@ -23,7 +23,7 @@ type DropdownOptions = | { value: string | null; query: string; - content: JSX.Element; + content: React.ReactNode; }[] | undefined; diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx index 1fe850a772d..2968ee58399 100644 --- a/apps/web/core/components/dropdowns/estimate.tsx +++ b/apps/web/core/components/dropdowns/estimate.tsx @@ -33,7 +33,7 @@ type DropdownOptions = | { value: string | null; query: string; - content: JSX.Element; + content: React.ReactNode; }[] | undefined; diff --git a/apps/web/core/components/dropdowns/module/module-options.tsx b/apps/web/core/components/dropdowns/module/module-options.tsx index 226b2c9f81a..28f16839b61 100644 --- a/apps/web/core/components/dropdowns/module/module-options.tsx +++ b/apps/web/core/components/dropdowns/module/module-options.tsx @@ -18,7 +18,7 @@ type DropdownOptions = | { value: string | null; query: string; - content: JSX.Element; + content: React.ReactNode; }[] | undefined; diff --git a/apps/web/core/components/gantt-chart/chart/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx index 278994b0b38..b2f3180b71c 100644 --- a/apps/web/core/components/gantt-chart/chart/main-content.tsx +++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx @@ -46,7 +46,7 @@ type Props = { currentView: TGanttViews, targetDate?: Date ) => ChartDataType | undefined; - quickAdd?: React.JSX.Element | undefined; + quickAdd?: React.ReactNode | undefined; isEpic?: boolean; }; diff --git a/apps/web/core/components/gantt-chart/chart/root.tsx b/apps/web/core/components/gantt-chart/chart/root.tsx index 11bc0ee5469..7c22d56be94 100644 --- a/apps/web/core/components/gantt-chart/chart/root.tsx +++ b/apps/web/core/components/gantt-chart/chart/root.tsx @@ -43,7 +43,7 @@ type ChartViewRootProps = { loadMoreBlocks?: () => void; updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise; canLoadMoreBlocks?: boolean; - quickAdd?: React.JSX.Element | undefined; + quickAdd?: React.ReactNode | undefined; showToday: boolean; isEpic?: boolean; }; diff --git a/apps/web/core/components/gantt-chart/root.tsx b/apps/web/core/components/gantt-chart/root.tsx index 67930aa58e8..da25611a877 100644 --- a/apps/web/core/components/gantt-chart/root.tsx +++ b/apps/web/core/components/gantt-chart/root.tsx @@ -14,7 +14,7 @@ type GanttChartRootProps = { blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void; blockToRender: (data: any) => React.ReactNode; sidebarToRender: (props: any) => React.ReactNode; - quickAdd?: React.JSX.Element | undefined; + quickAdd?: React.ReactNode | undefined; canLoadMoreBlocks?: boolean; loadMoreBlocks?: () => void; updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise; diff --git a/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx b/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx index 9f0ab590296..5f1a8f8b889 100644 --- a/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx +++ b/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx @@ -13,7 +13,7 @@ type Props = { id: string; isLastChild: boolean; isDragEnabled: boolean; - children: (isDragging: boolean) => JSX.Element; + children: (isDragging: boolean) => React.ReactNode; onDrop: (draggingBlockId: string | undefined, droppedBlockId: string | undefined, dropAtEndOfList: boolean) => void; }; diff --git a/apps/web/core/components/gantt-chart/sidebar/root.tsx b/apps/web/core/components/gantt-chart/sidebar/root.tsx index fb5562b03a3..c6a3b29bc32 100644 --- a/apps/web/core/components/gantt-chart/sidebar/root.tsx +++ b/apps/web/core/components/gantt-chart/sidebar/root.tsx @@ -22,7 +22,7 @@ type Props = { enableSelection: boolean | ((blockId: string) => boolean); sidebarToRender: (props: any) => React.ReactNode; title: string; - quickAdd?: React.JSX.Element | undefined; + quickAdd?: React.ReactNode | undefined; selectionHelpers: TSelectionHelper; isEpic?: boolean; }; diff --git a/apps/web/core/components/integration/github/select-repository.tsx b/apps/web/core/components/integration/github/select-repository.tsx index 05936cfa78a..2d8042f2aca 100644 --- a/apps/web/core/components/integration/github/select-repository.tsx +++ b/apps/web/core/components/integration/github/select-repository.tsx @@ -15,7 +15,7 @@ import { ProjectService } from "@/services/project"; type Props = { integration: IWorkspaceIntegration; value: any; - label: string | JSX.Element; + label: string | React.ReactNode; onChange: (repo: any) => void; characterLimit?: number; }; diff --git a/apps/web/core/components/integration/github/single-user-select.tsx b/apps/web/core/components/integration/github/single-user-select.tsx index 3b24338bceb..1145355186f 100644 --- a/apps/web/core/components/integration/github/single-user-select.tsx +++ b/apps/web/core/components/integration/github/single-user-select.tsx @@ -66,7 +66,7 @@ export const SingleUserSelect: React.FC = ({ collaborator, index, users, | { value: string; query: string; - content: JSX.Element; + content: React.ReactNode; }[] | undefined; diff --git a/apps/web/core/components/integration/jira/import-users.tsx b/apps/web/core/components/integration/jira/import-users.tsx index 7a35aa9d4ef..2adaf3ba358 100644 --- a/apps/web/core/components/integration/jira/import-users.tsx +++ b/apps/web/core/components/integration/jira/import-users.tsx @@ -54,7 +54,7 @@ export const JiraImportUsers: FC = () => { | { value: string; query: string; - content: JSX.Element; + content: React.ReactNode; }[] | undefined; diff --git a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx index b34846b87e1..cded28d30d8 100644 --- a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx +++ b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx @@ -4,7 +4,7 @@ import React, { FC } from "react"; import { cn } from "@plane/utils"; type Props = { - icon: JSX.Element; + icon: React.ReactNode; title: string; disabled?: boolean; }; diff --git a/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx index 517e1182822..ba26b3f0d2d 100644 --- a/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx +++ b/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx @@ -31,7 +31,7 @@ const ActiveLoader = (props: { layout: EIssueLayoutTypes }) => { }; interface Props { - children: string | JSX.Element | JSX.Element[]; + children: string | React.ReactNode | React.ReactNode[]; layout: EIssueLayoutTypes; } diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx index 066db208869..00ae3585dc2 100644 --- a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx +++ b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx @@ -42,7 +42,7 @@ type TQuickAddIssueRoot = { layout: EIssueLayoutTypes; prePopulatedData?: Partial; QuickAddButton?: FC; - customQuickAddButton?: JSX.Element; + customQuickAddButton?: React.ReactNode; containerClassName?: string; setIsQuickAddOpen?: (isOpen: boolean) => void; quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise; diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx index f81d8bbb6a5..59e7901ffe0 100644 --- a/apps/web/core/components/issues/select/base.tsx +++ b/apps/web/core/components/issues/select/base.tsx @@ -21,7 +21,7 @@ export type TWorkItemLabelSelectBaseProps = { createLabelEnabled?: boolean; disabled?: boolean; getLabelById: (labelId: string) => IIssueLabel | null; - label?: JSX.Element; + label?: React.ReactNode; labelIds: string[]; onChange: (value: string[]) => void; onDropdownOpen?: () => void; diff --git a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx index 8cc87d4c6d5..9ea93b70d24 100644 --- a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx +++ b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx @@ -42,7 +42,7 @@ type Props = { isDragging: boolean, isDroppingInLabel: boolean, dragHandleRef: MutableRefObject - ) => JSX.Element; + ) => React.ReactNode; onDrop: ( draggingLabelId: string, droppedParentId: string | null, diff --git a/apps/web/core/components/project/member-select.tsx b/apps/web/core/components/project/member-select.tsx index 8a61883e237..c1597e0dd6a 100644 --- a/apps/web/core/components/project/member-select.tsx +++ b/apps/web/core/components/project/member-select.tsx @@ -50,7 +50,7 @@ export const MemberSelect: React.FC = observer((props) => { | { value: string; query: string; - content: React.JSX.Element; + content: React.ReactNode; }[] | undefined; const selectedOption = projectId ? getProjectMemberDetails(value, projectId.toString()) : null; diff --git a/apps/web/core/components/project/send-project-invitation-modal.tsx b/apps/web/core/components/project/send-project-invitation-modal.tsx index 561dcd6a832..9e28140c1d1 100644 --- a/apps/web/core/components/project/send-project-invitation-modal.tsx +++ b/apps/web/core/components/project/send-project-invitation-modal.tsx @@ -163,7 +163,7 @@ export const SendProjectInvitationModal: React.FC = observer((props) => { | { value: string; query: string; - content: React.JSX.Element; + content: React.ReactNode; }[] | undefined; diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx index 59945c9b5a1..7dec302b7cc 100644 --- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx +++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx @@ -9,7 +9,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { href: string; title: string; - icon: JSX.Element; + icon: React.ReactNode; }; export const FavoriteItemTitle: FC = observer((props) => { diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx index a13e154b2d3..49ccf3de794 100644 --- a/packages/propel/src/charts/bar-chart/bar.tsx +++ b/packages/propel/src/charts/bar-chart/bar.tsx @@ -158,7 +158,7 @@ const CustomBarLollipop = React.memo((props: TBarProps) => { */ const createShapeVariant = (Component: React.ComponentType, factoryProps?: Partial) => - (shapeProps: TShapeProps, bar: TBarItem, stackKeys: string[]): JSX.Element => { + (shapeProps: TShapeProps, bar: TBarItem, stackKeys: string[]): React.ReactNode => { const showTopBorderRadius = bar.showTopBorderRadius?.(shapeProps.dataKey, shapeProps.payload); const showBottomBorderRadius = bar.showBottomBorderRadius?.(shapeProps.dataKey, shapeProps.payload); @@ -178,7 +178,7 @@ const createShapeVariant = export const barShapeVariants: Record< TBarChartShapeVariant, - (props: TShapeProps, bar: TBarItem, stackKeys: string[]) => JSX.Element + (props: TShapeProps, bar: TBarItem, stackKeys: string[]) => React.ReactNode > = { bar: createShapeVariant(CustomBar), // Standard bar with rounded corners lollipop: createShapeVariant(CustomBarLollipop), // Line with circle at top diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx index e6624252476..8deb9fb48e4 100644 --- a/packages/propel/src/charts/bar-chart/root.tsx +++ b/packages/propel/src/charts/bar-chart/root.tsx @@ -68,7 +68,7 @@ export const BarChart = React.memo((props: T opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1} shape={(shapeProps: any) => { const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"]; - return shapeVariant(shapeProps, bar, stackKeys); + return shapeVariant(shapeProps, bar, stackKeys) as any; }} className="[&_path]:transition-opacity [&_path]:duration-200" onMouseEnter={() => setActiveBar(bar.key)} diff --git a/packages/types/src/instance/auth.ts b/packages/types/src/instance/auth.ts index 274c5a29cd2..c3049bc4516 100644 --- a/packages/types/src/instance/auth.ts +++ b/packages/types/src/instance/auth.ts @@ -2,8 +2,8 @@ export type TInstanceAuthenticationModes = { key: string; name: string; description: string; - icon: JSX.Element; - config: JSX.Element; + icon: React.ReactNode; + config: React.ReactNode; unavailable?: boolean; }; diff --git a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx index 75cfff35a77..6ed3b26fe87 100644 --- a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx +++ b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx @@ -7,7 +7,7 @@ import { Tooltip } from "../tooltip"; import { Breadcrumbs } from "./breadcrumbs"; type TBreadcrumbNavigationSearchDropdownProps = { - icon?: React.JSX.Element; + icon?: React.ReactNode; title?: string; selectedItem: string; navigationItems: ICustomSearchSelectOption[]; diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx index ad6cb4fd5b6..efff3165a78 100644 --- a/packages/ui/src/dropdowns/helper.tsx +++ b/packages/ui/src/dropdowns/helper.tsx @@ -7,10 +7,10 @@ export interface IDropdownProps { customButtonTabIndex?: number; buttonClassName?: string; className?: string; - customButton?: JSX.Element; + customButton?: React.ReactNode; disabled?: boolean; input?: boolean; - label?: string | JSX.Element; + label?: string | React.ReactNode; maxHeight?: "sm" | "rg" | "md" | "lg"; noChevron?: boolean; chevronClassName?: string; @@ -48,7 +48,7 @@ export interface ICustomSelectProps extends IDropdownProps { } interface CustomSearchSelectProps { - footerOption?: JSX.Element; + footerOption?: React.ReactNode; onChange: any; onClose?: () => void; noResultsMessage?: string; diff --git a/packages/ui/src/tables/types.ts b/packages/ui/src/tables/types.ts index 220e4d738b6..9f7acf6ca7b 100644 --- a/packages/ui/src/tables/types.ts +++ b/packages/ui/src/tables/types.ts @@ -1,8 +1,8 @@ export type TTableColumn = { key: string; content: string; - thRender?: () => JSX.Element; - tdRender: (rowData: T) => JSX.Element; + thRender?: () => React.ReactNode; + tdRender: (rowData: T) => React.ReactNode; }; export type TTableData = { diff --git a/packages/ui/src/toast/index.tsx b/packages/ui/src/toast/index.tsx index 5ccbd775b9a..38690b409c7 100644 --- a/packages/ui/src/toast/index.tsx +++ b/packages/ui/src/toast/index.tsx @@ -29,7 +29,7 @@ type SetToastProps = }; type PromiseToastCallback = (data: ToastData) => string; -type ActionItemsPromiseToastCallback = (data: ToastData) => JSX.Element; +type ActionItemsPromiseToastCallback = (data: ToastData) => React.ReactNode; type PromiseToastData = { title: string; diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx index d013414cdb8..45bc9d6b904 100644 --- a/packages/ui/src/tooltip/tooltip.tsx +++ b/packages/ui/src/tooltip/tooltip.tsx @@ -22,9 +22,9 @@ export type TPosition = interface ITooltipProps { tooltipHeading?: string; - tooltipContent: string | React.ReactNode; + tooltipContent: string | any; position?: TPosition; - children: JSX.Element; + children: any; disabled?: boolean; className?: string; openDelay?: number; diff --git a/packages/utils/src/editor.ts b/packages/utils/src/editor.ts index fb15edd078f..69fb73b8bf8 100644 --- a/packages/utils/src/editor.ts +++ b/packages/utils/src/editor.ts @@ -37,7 +37,7 @@ export const getEditorAssetDownloadSrc = (args: TEditorSrcArgs): string | undefi return url; }; -export const getTextContent = (jsx: JSX.Element | React.ReactNode | null | undefined): string => { +export const getTextContent = (jsx: React.ReactNode | React.ReactNode | null | undefined): string => { if (!jsx) return ""; const div = document.createElement("div"); From 2f9ae9f9f1d5ffcb0bba88473d75646df315050c Mon Sep 17 00:00:00 2001 From: sriramveeraghanta Date: Mon, 11 Aug 2025 15:54:35 +0530 Subject: [PATCH 2/4] fix: review comments --- packages/types/package.json | 6 ++++++ packages/ui/src/tooltip/tooltip.tsx | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/types/package.json b/packages/types/package.json index 2a6b18030a9..cfc187011b7 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -26,9 +26,15 @@ "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"", "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist" }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, "devDependencies": { "@plane/eslint-config": "*", "@plane/typescript-config": "*", + "@types/react": "18.3.11", + "@types/react-dom": "18.3.1", "tsup": "8.4.0", "typescript": "5.8.3" } diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx index 45bc9d6b904..7ad90dfd897 100644 --- a/packages/ui/src/tooltip/tooltip.tsx +++ b/packages/ui/src/tooltip/tooltip.tsx @@ -22,9 +22,9 @@ export type TPosition = interface ITooltipProps { tooltipHeading?: string; - tooltipContent: string | any; + tooltipContent: string | React.ReactElement; position?: TPosition; - children: any; + children: React.ReactElement; disabled?: boolean; className?: string; openDelay?: number; From 1a0948a1594949698d6e225cc11d612ca17e2e61 Mon Sep 17 00:00:00 2001 From: sriramveeraghanta Date: Mon, 11 Aug 2025 16:07:59 +0530 Subject: [PATCH 3/4] fix: tooltip types update --- packages/ui/src/tooltip/tooltip.tsx | 2 +- yarn.lock | 46 +++++++++++++++++++++++++++-- 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx index 7ad90dfd897..1c931c66e52 100644 --- a/packages/ui/src/tooltip/tooltip.tsx +++ b/packages/ui/src/tooltip/tooltip.tsx @@ -22,7 +22,7 @@ export type TPosition = interface ITooltipProps { tooltipHeading?: string; - tooltipContent: string | React.ReactElement; + tooltipContent: string | React.ReactNode; position?: TPosition; children: React.ReactElement; disabled?: boolean; diff --git a/yarn.lock b/yarn.lock index 77baf7900ad..8c1e7f19e95 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2678,6 +2678,13 @@ dependencies: "@types/react" "*" +"@types/react-dom@18.3.1": + version "18.3.1" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07" + integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ== + dependencies: + "@types/react" "*" + "@types/react-dom@^18.2.18": version "18.3.7" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.7.tgz#b89ddf2cd83b4feafcc4e2ea41afdfb95a0d194f" @@ -2703,6 +2710,14 @@ "@types/prop-types" "*" csstype "^3.0.2" +"@types/react@18.3.11": + version "18.3.11" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.11.tgz#9d530601ff843ee0d7030d4227ea4360236bd537" + integrity sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ== + dependencies: + "@types/prop-types" "*" + csstype "^3.0.2" + "@types/react@^18.3.11": version "18.3.23" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.23.tgz#86ae6f6b95a48c418fecdaccc8069e0fbb63696a" @@ -9526,7 +9541,16 @@ streamx@^2.15.0, streamx@^2.21.0: optionalDependencies: bare-events "^2.2.0" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -9619,7 +9643,14 @@ string_decoder@^1.1.1, string_decoder@^1.3.0: dependencies: safe-buffer "~5.2.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -10791,7 +10822,16 @@ word-wrap@^1.2.5: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + +wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== From dddeb5ed257de7e1d4639206fbb66dc1aa722877 Mon Sep 17 00:00:00 2001 From: sriramveeraghanta Date: Mon, 11 Aug 2025 16:12:36 +0530 Subject: [PATCH 4/4] fix: propel pacakge fix --- packages/propel/src/charts/bar-chart/root.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx index 8deb9fb48e4..96efff32c78 100644 --- a/packages/propel/src/charts/bar-chart/root.tsx +++ b/packages/propel/src/charts/bar-chart/root.tsx @@ -68,7 +68,8 @@ export const BarChart = React.memo((props: T opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1} shape={(shapeProps: any) => { const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"]; - return shapeVariant(shapeProps, bar, stackKeys) as any; + const node = shapeVariant(shapeProps, bar, stackKeys); + return React.isValidElement(node) ? node : <>{node}; }} className="[&_path]:transition-opacity [&_path]:duration-200" onMouseEnter={() => setActiveBar(bar.key)}