fixup! Refactor(web-react): step further

packages/web-react/src/components/Button/Button.tsx

@@ -52,4 +52,6 @@ const _Button = <T extends ElementType = 'button', C = void, S = void>(
 
 const Button = forwardRef<HTMLButtonElement, SpiritButtonProps<ElementType>>(_Button);
 
+Button.isSystemComponent = true;
+
 export default Button;

packages/web-react/src/components/Tooltip/TooltipTrigger.tsx

@@ -29,11 +29,13 @@ const TooltipTrigger = (props: TooltipTriggerProps) => {
       id={id}
       ref={triggerRef}
       {...getReferenceProps()}
-      {...(typeof ElementTag !== 'string' && { useUnsafe: typeof ElementTag === 'string' })}
+      // {...(typeof ElementTag !== 'string' && { useUnsafe: typeof ElementTag === 'string' })}
     >
       {typeof children === 'function' ? children({ isOpen }) : children}
     </ElementTag>
   );
 };
 
+TooltipTrigger.isSystemComponent = true;
+
 export default TooltipTrigger;

packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx

@@ -6,13 +6,13 @@ const TooltipDefault = () => {
   const [open, setOpen] = useState(true);
 
   const OutsideComponent = (props: any) => {
-    return <p {...props}>{props.children}</p>;
+    return <button {...props}>{props.children}</button>;
   };
 
   return (
     <Tooltip id="tooltip-default" isOpen={open} onToggle={setOpen}>
       {/* <TooltipTrigger elementType="button" UNSAFE_className="unsafe"> */}
-      <TooltipTrigger elementType={OutsideComponent} className="unsafe">
+      <TooltipTrigger elementType={Button} UNSAFE_className="unsafe">
         I have a tooltip 😎
       </TooltipTrigger>
       <TooltipPopover>Hello there!</TooltipPopover>

packages/web-react/src/hooks/styleProps.ts

@@ -17,16 +17,13 @@ export type StylePropsResult = {
 
 export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult {
   const classNamePrefix = useContext(ClassNamePrefixContext);
-  const { UNSAFE_className, UNSAFE_style, ElementTag, useUnsafe: receivedUseUnsafe, ...otherProps } = props;
+  const { UNSAFE_className, UNSAFE_style, ElementTag, ...otherProps } = props;
   const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix);
 
-  console.log('ElementTag:', ElementTag, receivedUseUnsafe);
-
   const style: CSSProperties = { ...UNSAFE_style };
 
-  // console.log('typeof ElementTag:', typeof ElementTag);
-  // if (typeof ElementTag === 'string' && receivedUseUnsafe == null) {
-  if (typeof ElementTag === 'string' && !receivedUseUnsafe) {
+  // @ts-ignore
+  if (typeof ElementTag === 'string' || !ElementTag?.isSystemComponent) {
     // Want to check if className prop exists, but not to define it in StyleProps type
     // @ts-expect-error Property 'className' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
     if (modifiedProps.className) {
@@ -62,21 +59,14 @@ export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult
 
     return {
       styleProps,
-      props: { ...(modifiedProps as HTMLAttributes<HTMLElement>), props1: 'test' },
+      props: { ...(modifiedProps as HTMLAttributes<HTMLElement>) },
     };
   }
 
   const rimmerProps = {
     ...modifiedProps,
-    props2: 'test',
   };
 
-  if (receivedUseUnsafe === false) {
-    rimmerProps.useUnsafe = true;
-  } else if (receivedUseUnsafe === true) {
-    rimmerProps.useUnsafe = undefined;
-  }
-
   return {
     styleProps: {
       ...(UNSAFE_style !== undefined && { UNSAFE_style }),