feat(): update

Author: shuga2704

packages/plasma-new-hope/src/components/_Slot/Slot.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { mergeRefs, mergeHandlers } from 'src/utils';
+
+export const Slot = React.forwardRef<any, any>((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+
+    if (!React.isValidElement(children)) {
+        return null;
+    }
+
+    const child = children as React.ReactElement<any>;
+    const childProps = child.props;
+
+    const mergedProps: Record<string, any> = { ...slotProps };
+
+    // merge event handlers
+    for (const key in slotProps) {
+        if (/^on[A-Z]/.test(key)) {
+            mergedProps[key] = mergeHandlers(childProps[key], slotProps[key]);
+        }
+    }
+
+    if (childProps.className || slotProps.className) {
+        mergedProps.className = [slotProps.className, childProps.className].filter(Boolean).join(' ');
+    }
+
+    // merge style
+    if (childProps.style || slotProps.style) {
+        mergedProps.style = { ...slotProps.style, ...childProps.style };
+    }
+
+    mergedProps.ref = mergeRefs(childProps.ref, forwardedRef);
+
+    return React.cloneElement(children, mergedProps);
+});

packages/plasma-new-hope/src/components/_beta/Popover/Popover.styles.ts

@@ -14,11 +14,6 @@ export const base = css`
     box-sizing: border-box;
 `;
 
-export const Target = styled.div`
-    display: inline-block;
-    max-width: 100%;
-`;
-
 export const CloseButton = styled.button`
     position: absolute;
     top: var(${tokens.iconOffset});

packages/plasma-new-hope/src/components/_beta/Popover/Popover.tsx

@@ -22,10 +22,11 @@ import { css } from '@linaria/core';
 
 import { IconClose } from '../../_Icon';
 import { Resizable } from '../../_Resizable';
+import { Slot } from '../../_Slot/Slot';
 
 import { sizeToIconSize, matchPlacements } from './utils';
 import { tokens, classes } from './Popover.tokens';
-import { base, Target, CloseButton } from './Popover.styles';
+import { base, CloseButton } from './Popover.styles';
 import type { PopoverProps } from './Popover.types';
 
 /* Ширина хвостика */
@@ -117,9 +118,9 @@ export const popoverRoot = (Root: RootProps<HTMLDivElement, PopoverProps>) =>
 
             return (
                 <>
-                    <Target ref={refs.setReference} {...getReferenceProps()}>
+                    <Slot ref={refs.setReference} {...getReferenceProps()}>
                         {target}
-                    </Target>
+                    </Slot>
 
                     {opened && (
                         <FloatingPortal>
@@ -143,15 +144,6 @@ export const popoverRoot = (Root: RootProps<HTMLDivElement, PopoverProps>) =>
                                             {...rest}
                                             data-popover-open={opened}
                                         >
-                                            {appearance === 'closeInner' && (
-                                                <CloseButton
-                                                    className={classes.popoverCloseIconButton}
-                                                    onClick={() => handleToggle(false)}
-                                                >
-                                                    <IconClose size={sizeToIconSize(size)} color="inherit" />
-                                                </CloseButton>
-                                            )}
-
                                             {outerArrow && (
                                                 <FloatingArrow
                                                     ref={arrowRef}
@@ -164,6 +156,15 @@ export const popoverRoot = (Root: RootProps<HTMLDivElement, PopoverProps>) =>
                                             )}
 
                                             {children}
+
+                                            {appearance === 'closeInner' && (
+                                                <CloseButton
+                                                    className={classes.popoverCloseIconButton}
+                                                    onClick={() => handleToggle(false)}
+                                                >
+                                                    <IconClose size={sizeToIconSize(size)} color="inherit" />
+                                                </CloseButton>
+                                            )}
                                         </Root>
                                     </Resizable>
                                 </div>

packages/plasma-new-hope/src/components/_beta/Popover/Popover.types.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode, ReactElement } from 'react';
 
 import { ResizableProps } from '../../_Resizable';
 
@@ -30,7 +30,7 @@ export type BasicPopoverProps = {
     /**
      * Целевой элемент взаимодействия с всплывающим окном.
      */
-    target: ReactNode;
+    target: ReactElement;
     /**
      * Управление скрытием/раскрытием всплывающего окна.
      */

packages/plasma-new-hope/src/utils/index.ts

@@ -30,3 +30,4 @@ export const composableStyle = (s: TemplateStringsArray, ...expr: Array<string |
 };
 
 export { fixedForwardRef } from './fixedForwardRef';
+export { mergeHandlers } from './mergeHandlers';

packages/plasma-new-hope/src/utils/mergeHandlers.ts

@@ -0,0 +1,9 @@
+export const mergeHandlers = (userHandler: any, injectedHandler: any) => {
+    return (event: any) => {
+        try {
+            userHandler?.(event);
+        } finally {
+            if (!event.defaultPrevented) injectedHandler?.(event);
+        }
+    };
+};