[WEB-5478] chore: fix types (#8155)

packages/propel/src/dialog/root.tsx

@@ -45,7 +45,10 @@ const getPositionClassNames = (position: DialogPosition) =>
     "top-8 left-1/2 -translate-x-1/2": position === "top",
   });
 
-const DialogPortal = memo(function DialogPortal({ children, ...props }) {
+const DialogPortal = memo(function DialogPortal({
+  children,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Portal>) {
   return (
     <BaseDialog.Portal data-slot="dialog-portal" {...props}>
       {children}
@@ -54,12 +57,15 @@ const DialogPortal = memo(function DialogPortal({ children, ...props }) {
 });
 DialogPortal.displayName = "DialogPortal";
 
-const DialogOverlay = memo(function DialogOverlay({ className, ...props }) {
+const DialogOverlay = memo(function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Backdrop>) {
   return <BaseDialog.Backdrop data-slot="dialog-overlay" className={cn(OVERLAY_CLASSNAME, className)} {...props} />;
 });
 DialogOverlay.displayName = "DialogOverlay";
 
-const DialogComponent = memo(function DialogComponent({ children, ...props }) {
+const DialogComponent = memo(function DialogComponent({ children, ...props }: DialogProps) {
   return (
     <BaseDialog.Root data-slot="dialog" {...props}>
       {children}
@@ -68,7 +74,10 @@ const DialogComponent = memo(function DialogComponent({ children, ...props }) {
 });
 DialogComponent.displayName = "Dialog";
 
-const DialogTrigger = memo(function DialogTrigger({ children, ...props }) {
+const DialogTrigger = memo(function DialogTrigger({
+  children,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Trigger>) {
   return (
     <BaseDialog.Trigger data-slot="dialog-trigger" {...props}>
       {children}
@@ -100,7 +109,7 @@ const DialogPanel = forwardRef(function DialogPanel(
 });
 DialogPanel.displayName = "DialogPanel";
 
-const DialogTitle = memo(function DialogTitle({ className, children, ...props }) {
+const DialogTitle = memo(function DialogTitle({ className, children, ...props }: DialogTitleProps) {
   return (
     <BaseDialog.Title
       data-slot="dialog-title"

packages/propel/src/popover/root.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { memo, useMemo } from "react";
 import { Popover as BasePopover } from "@base-ui-components/react/popover";
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
@@ -13,7 +13,7 @@ export interface PopoverContentProps extends React.ComponentProps<typeof BasePop
 }
 
 // PopoverContent component
-const PopoverContent = React.memo(function PopoverContent({
+const PopoverContent = memo(function PopoverContent({
   children,
   className,
   placement,
@@ -23,9 +23,9 @@ const PopoverContent = React.memo(function PopoverContent({
   containerRef,
   positionerClassName,
   ...props
-}) {
+}: PopoverContentProps) {
   // side and align calculations
-  const { finalSide, finalAlign } = React.useMemo(() => {
+  const { finalSide, finalAlign } = useMemo(() => {
     if (placement) {
       const converted = convertPlacementToSideAndAlign(placement);
       return { finalSide: converted.side, finalAlign: converted.align };
@@ -45,21 +45,21 @@ const PopoverContent = React.memo(function PopoverContent({
 });
 
 // wrapper components
-const PopoverTrigger = React.memo(function PopoverTrigger(props) {
+const PopoverTrigger = memo(function PopoverTrigger(props: React.ComponentProps<typeof BasePopover.Trigger>) {
   return <BasePopover.Trigger data-slot="popover-trigger" {...props} />;
 });
 
-const PopoverPortal = React.memo(function PopoverPortal(props) {
+const PopoverPortal = memo(function PopoverPortal(props: React.ComponentProps<typeof BasePopover.Portal>) {
   return <BasePopover.Portal data-slot="popover-portal" {...props} />;
 });
 
-const PopoverPositioner = React.memo(function PopoverPositioner(props) {
+const PopoverPositioner = memo(function PopoverPositioner(props: React.ComponentProps<typeof BasePopover.Positioner>) {
   return <BasePopover.Positioner data-slot="popover-positioner" {...props} />;
 });
 
 // compound components
 const Popover = Object.assign(
-  React.memo<React.ComponentProps<typeof BasePopover.Root>>(function Popover(props) {
+  memo(function Popover(props: React.ComponentProps<typeof BasePopover.Root>) {
     return <BasePopover.Root data-slot="popover" {...props} />;
   }),
   {

packages/propel/src/skeleton/root.tsx

@@ -37,4 +37,4 @@ const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
 SkeletonRoot.displayName = "plane-ui-skeleton";
 SkeletonItem.displayName = "plane-ui-skeleton-item";
 
-export { Skeleton };
+export { Skeleton, SkeletonRoot, SkeletonItem };

packages/types/package.json

@@ -26,6 +26,7 @@
     "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@prettier/plugin-oxc": "0.0.4",
+    "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "tsdown": "catalog:",

packages/ui/src/breadcrumbs/navigation-dropdown.tsx

@@ -29,7 +29,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
 
   function NavigationButton() {
     return (
-      <Tooltip tooltipContent={selectedItem.title} position="bottom" disabled={isOpen}>
+      <Tooltip tooltipContent={selectedItem?.title} position="bottom" disabled={isOpen}>
         <button
           onClick={(e) => {
             if (!isLast) {
@@ -48,7 +48,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
           <div className="flex @4xl:hidden text-custom-text-300">...</div>
           <div className="hidden @4xl:flex gap-2">
             {selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
-            <Breadcrumbs.Label>{selectedItem.title}</Breadcrumbs.Label>
+            <Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
           </div>
         </button>
       </Tooltip>