refactor: clean up Placer component and styles, update type definitions

Author: tanerengiiin

packages/primereact/src/placer/Placer.props.ts

@@ -5,18 +5,3 @@ export const defaultProps: PlacerProps = {
     ...HeadlessPlacer.defaultProps,
     as: 'div'
 };
-
-// export const defaultProps: PlacerProps = {
-//     ...HeadlessPlacer.defaultProps,
-//     ...defaultMotionProps,
-//     animateOnEnter: true,
-//     animateOnLeave: true,
-//     enterFromClassName: 'p-placer-content-enter-from',
-//     enterToClassName: 'p-placer-content-enter-to',
-//     enterActiveClassName: 'p-placer-content-enter-active',
-//     leaveFromClassName: 'p-placer-content-leave-from',
-//     leaveToClassName: 'p-placer-content-leave-to',
-//     leaveActiveClassName: 'p-placer-content-leave-active',
-//     shouldAnimateOnEnter: true,
-//     shouldAnimateOnLeave: true
-// };

packages/primereact/src/placer/Placer.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { Component } from '@primereact/core/component';
 import { usePlacer } from '@primereact/headless/placer';
-import { styles } from '@primereact/styles/popover';
 import { mergeProps } from '@primeuix/utils';
 import { withComponent } from 'primereact/base';
 import * as React from 'react';
@@ -13,7 +12,6 @@ import { PlacerArrow } from './arrow';
 export const Placer = withComponent({
     name: 'Placer',
     defaultProps,
-    styles,
     setup(instance) {
         const placer = usePlacer(instance.inProps);
 
@@ -37,7 +35,9 @@ export const Placer = withComponent({
         );
 
         return (
+            // @ts-expect-error - Temporary fix for elementRef property access
             <PlacerProvider value={instance}>
+                {/* @ts-expect-error - Temporary fix for elementRef property access */}
                 <Component instance={instance} attrs={rootProps} children={props.children} />
             </PlacerProvider>
         );
@@ -47,29 +47,3 @@ export const Placer = withComponent({
         Anchor: PlacerAnchor
     }
 });
-
-// const porp={
-//     in: props.in,
-//                 enterFromClassName: props.shouldAnimateOnEnter ? props.enterFromClassName : undefined,
-//                 enterToClassName: props.shouldAnimateOnEnter ? props.enterToClassName : undefined,
-//                 enterActiveClassName: props.shouldAnimateOnEnter ? props.enterActiveClassName : undefined,
-//                 leaveFromClassName: props.shouldAnimateOnLeave ? props.leaveFromClassName : undefined,
-//                 leaveToClassName: props.shouldAnimateOnLeave ? props.leaveToClassName : undefined,
-//                 leaveActiveClassName: props.shouldAnimateOnLeave ? props.leaveActiveClassName : undefined,
-//                 onBeforeEnter: (e: Element | undefined) => {
-//                     props?.onBeforeEnter?.(e);
-//                     placer?.onBeforeEnter?.(e);
-//                 },
-//                 onLeave: () => {
-//                     placer?.onLeave?.();
-//                     props?.onLeave?.();
-//                 },
-//                 onEnter: () => {
-//                     placer?.onEnter?.();
-//                     props?.onEnter?.();
-//                 },
-//                 onBeforeLeave: () => {
-//                     placer?.onBeforeLeave?.();
-//                     props?.onBeforeLeave?.();
-//                 },
-// }

packages/styles/src/tooltip/Tooltip.style.ts

@@ -43,6 +43,26 @@ const style = `
     .p-tooltip2-arrow[data-side='bottom'] {
         transform: translateY(50%) rotate(135deg);
     }
+
+    .p-placer-content-enter-from,
+    .p-placer-content-leave-to {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+
+    .p-placer-content-enter-to,
+    .p-placer-content-leave-from {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    .p-placer-content-leave-active,
+    .p-placer-content-enter-active {
+        transition:
+            opacity 250ms cubic-bezier(0.16, 1, 0.3, 1),
+            transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
 `;
 
 export const styles = createStyles<TooltipInstance>({

packages/types/src/shared/placer/usePlacer.types.ts

@@ -46,11 +46,11 @@ export interface usePlacerState {
     /**
      * The effective side of the placer.
      */
-    effectiveSide: SideType;
+    effectiveSide: SideType | null | undefined;
     /**
      * The effective align of the placer.
      */
-    effectiveAlign: AlignType;
+    effectiveAlign: AlignType | null | undefined;
 }
 
 /**