Migrate Popover component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/report.api.md

@@ -1647,18 +1647,32 @@ export const Popover: ForwardRefExoticComponent<
 
 // @public
 export const PopoverDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
     readonly root: 'bui-Popover';
     readonly arrow: 'bui-PopoverArrow';
     readonly content: 'bui-PopoverContent';
   };
+  readonly propDefs: {
+    readonly children: {};
+    readonly hideArrow: {};
+    readonly className: {};
+  };
+};
+
+// @public (undocumented)
+export type PopoverOwnProps = {
+  children: React.ReactNode;
+  hideArrow?: boolean;
+  className?: string;
 };
 
 // @public
-export interface PopoverProps extends Omit<PopoverProps_2, 'children'> {
-  children: React.ReactNode;
-  hideArrow?: boolean;
-}
+export interface PopoverProps
+  extends Omit<PopoverProps_2, 'children' | 'className'>,
+    PopoverOwnProps {}
 
 // @public
 export type ProviderBg = 'neutral' | 'danger' | 'warning' | 'success';

packages/ui/src/components/Popover/Popover.tsx

@@ -17,11 +17,9 @@
 import { forwardRef } from 'react';
 import { useId } from 'react-aria';
 import { OverlayArrow, Popover as AriaPopover } from 'react-aria-components';
-import clsx from 'clsx';
 import { PopoverProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { PopoverDefinition } from './definition';
-import styles from './Popover.module.css';
 import { Box } from '../Box';
 import { BgReset } from '../../hooks/useBg';
 
@@ -62,24 +60,18 @@ import { BgReset } from '../../hooks/useBg';
  */
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(PopoverDefinition, props);
-    const { className, children, hideArrow, ...rest } = cleanedProps;
+    const { ownProps, restProps } = useDefinition(PopoverDefinition, props);
+    const { classes, children, hideArrow } = ownProps;
     const svgPathId = useId();
 
     return (
-      <AriaPopover
-        className={clsx(classNames.root, styles[classNames.root], className)}
-        {...rest}
-        ref={ref}
-      >
+      <AriaPopover className={classes.root} {...restProps} ref={ref}>
         {({ trigger }) => (
           <>
             {!hideArrow &&
               trigger !== 'MenuTrigger' &&
               trigger !== 'SubmenuTrigger' && (
-                <OverlayArrow
-                  className={clsx(classNames.arrow, styles[classNames.arrow])}
-                >
+                <OverlayArrow className={classes.arrow}>
                   <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                     <defs>
                       <path
@@ -97,10 +89,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
                 </OverlayArrow>
               )}
             <BgReset>
-              <Box
-                bg="neutral"
-                className={clsx(classNames.content, styles[classNames.content])}
-              >
+              <Box bg="neutral" className={classes.content}>
                 {children}
               </Box>
             </BgReset>

packages/ui/src/components/Popover/definition.ts

@@ -14,16 +14,24 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { PopoverOwnProps } from './types';
+import styles from './Popover.module.css';
 
 /**
  * Component definition for Popover
  * @public
  */
-export const PopoverDefinition = {
+export const PopoverDefinition = defineComponent<PopoverOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Popover',
     arrow: 'bui-PopoverArrow',
     content: 'bui-PopoverContent',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    children: {},
+    hideArrow: {},
+    className: {},
+  },
+});

packages/ui/src/components/Popover/index.ts

@@ -15,5 +15,5 @@
  */
 
 export { Popover } from './Popover';
-export type { PopoverProps } from './types';
+export type { PopoverOwnProps, PopoverProps } from './types';
 export { PopoverDefinition } from './definition';

packages/ui/src/components/Popover/types.ts

@@ -16,12 +16,8 @@
 
 import { PopoverProps as AriaPopoverProps } from 'react-aria-components';
 
-/**
- * Properties for {@link Popover}
- *
- * @public
- */
-export interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
+/** @public */
+export type PopoverOwnProps = {
   /**
    * The content to display inside the popover.
    * Content is automatically wrapped with padding and scroll behavior.
@@ -35,4 +31,15 @@ export interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
    * @defaultValue false
    */
   hideArrow?: boolean;
-}
+
+  className?: string;
+};
+
+/**
+ * Properties for {@link Popover}
+ *
+ * @public
+ */
+export interface PopoverProps
+  extends Omit<AriaPopoverProps, 'children' | 'className'>,
+    PopoverOwnProps {}

packages/ui/src/components/Tooltip/Tooltip.tsx

@@ -61,7 +61,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           </svg>
         </OverlayArrow>
         <BgReset>
-          <Box bg="neutral-1" className={classes.content}>
+          <Box bg="neutral" className={classes.content}>
             {children}
           </Box>
         </BgReset>