@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/types/components/media/Media.d.ts

@@ -1,5 +1,5 @@
-import { type AriaProps, type CssProp } from "../../types";
-export interface BaseProps extends CssProp, AriaProps {
+import { type AriaProps, type CssProp, type TestProps } from "../../types";
+export interface BaseProps extends CssProp, TestProps, AriaProps {
     /**
      * media source
      */

package/dist/types/components/menu/ContextMenu.d.ts

@@ -3,5 +3,6 @@ import { type ChildrenProp } from "../../types";
 import { type Menu } from "./Menu";
 export interface ContextMenuProps extends ChildrenProp {
     menu: React.ReactElement<typeof Menu>;
+    disabled?: boolean;
 }
-export declare const ContextMenu: ({ children, menu }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ children, menu, disabled }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/tabpanel/Tab.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps } from "../../types";
-export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps {
+import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps, type TooltipProp } from "../../types";
+export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps, TooltipProp {
     /**
      * tab id
      */
@@ -16,7 +16,7 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
     /**
      * tab badge
      */
-    badge?: BadgeType;
+    badge?: string | number | BadgeType;
     /**
      * disabled
      */
@@ -42,4 +42,4 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
      */
     onClick?: (id: string) => CallbackReturn;
 }
-export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, minimal, onClick, tabFlex, color, actions, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, minimal, onClick, tabFlex, color, actions, tooltip, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/content/Content.d.ts

@@ -1,9 +1,10 @@
-import { type ChildrenProp, type CssProp, type PositionObject, type RefProp, type SizeObject, type TestProps } from "../../types";
+import { type MouseEvent } from "react";
+import { type ChildrenProp, type CssProp, type RefProp, type ScrollObject, type SizeObject, type TestProps } from "../../types";
 export interface ContentProps extends ChildrenProp, CssProp, RefProp, TestProps {
     /**
      * scroll vevent handler
      */
-    onScroll?: (event: PositionObject) => void;
+    onScroll?: (scroll: ScrollObject, event: MouseEvent<HTMLDivElement>) => void;
     /**
      * scroll vevent handler
      */

package/dist/types/types/icons.d.ts

@@ -105,6 +105,7 @@ export declare namespace CoreIcons {
     const mic = "M12 2c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414v-8c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586zM12 0c-1.104 0-2.106 0.449-2.828 1.172s-1.172 1.724-1.172 2.828v8c0 1.104 0.449 2.106 1.172 2.828s1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828v-8c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172zM8 24h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-2.062c1.809-0.226 3.432-1.056 4.657-2.281 1.446-1.447 2.343-3.448 2.343-5.657v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 1.657-0.67 3.156-1.757 4.243s-2.586 1.757-4.243 1.757-3.156-0.67-4.243-1.757-1.757-2.586-1.757-4.243v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 2.209 0.897 4.21 2.343 5.657 1.225 1.225 2.847 2.055 4.657 2.281v2.062h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
     const play = "M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z";
     const pause = "M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z";
+    const stop = "M18,18H6V6H18V18Z";
     const volumeOn = "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM18.363 5.637c1.757 1.758 2.635 4.059 2.635 6.364 0 2.304-0.878 4.605-2.635 6.362-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c2.147-2.147 3.22-4.963 3.221-7.776s-1.074-5.63-3.221-7.778c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM14.833 9.167c0.781 0.781 1.171 1.803 1.171 2.828s-0.39 2.047-1.171 2.828c-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c1.171-1.171 1.757-2.708 1.757-4.242s-0.586-3.071-1.757-4.242c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
     const volumeOff = "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM16.293 9.707l2.293 2.293-2.293 2.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l2.293-2.293 2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.293-2.293 2.293-2.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
     const alignLeft = "M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z";

package/dist/types/types/index.d.ts

@@ -138,3 +138,7 @@ export interface SizeObject {
     width: number;
     height: number;
 }
+export interface ScrollObject extends PositionObject, SizeObject {
+    scrollWidth?: number;
+    scrollHeight: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.5",
+    "@react-fabric/utilities": "^1.0.0-beta.7",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "7d4a7ed1ea9890652826bef58d01c31280d761c8"
+  "gitHead": "8e6efedbbb02660c0b64140aff00e633b891bb85"
 }

package/src/components/actionLabel/ActionLabel.tsx

@@ -22,12 +22,21 @@
  */
 
 import classNames from "classnames";
-import { type ReactElement, useCallback } from "react";
-import { type AriaProps, type ChildProp, type CssProp } from "../../types";
+import { useCallback, type ReactElement } from "react";
+import {
+  type AriaProps,
+  type ChildProp,
+  type CssProp,
+  type TestProps,
+} from "../../types";
 import { ButtonGroup } from "../button/ButtonGroup";
 import classes from "./ActionLabel.module.css";
 
-export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
+export interface ActionLabelProps
+  extends AriaProps,
+    CssProp,
+    ChildProp,
+    TestProps {
   /**
    * action buttons aligment
    */

package/src/components/animations/Animations.tsx

@@ -142,6 +142,7 @@ export const AnimationSpinner = ({
       className={classNames(
         "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
       )}
+      data-testid="spinner"
     >
       <div
         className={classNames(
@@ -164,15 +165,20 @@ export const Loading = () => {
         classes.loader,
         "area-[loader] relative overflow-x-clip",
       )}
+      data-testid="loading"
     >
       <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
     </div>
   );
 };
 
-export const Skeleton = () => {
+export const Skeleton = ({ className, ...rest }: CssProp) => {
   return (
-    <div className={classNames("p-2 animate-pulse flex gap-2 max-w-lg")}>
+    <div
+      className={classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg")}
+      data-testid="skeleton"
+      {...rest}
+    >
       <div className="bg-tint-100 rounded aspect-square h-12" />
       <div className="flex-1 flex flex-col gap-2">
         <div className="bg-tint-100 h-3 rounded-full" />

package/src/components/avatar/Avatar.tsx

@@ -24,8 +24,7 @@
 import { isSvgPath } from "@react-fabric/utilities";
 import BoringAvatar from "boring-avatars";
 import classNames from "classnames";
-import { useState } from "react";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { useMemo, useState } from "react";
 import {
   type AriaProps,
   type ColorType,
@@ -109,89 +108,77 @@ export const Avatar = ({
   const [fallback, setFallback] = useState(true);
 
   /** ***************** style map *******************/
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (bg) {
-        s.backgroundColor = getColor(bg);
-      }
-      if (color) {
-        s.color = getColor(color);
-      }
-      if (size && !(size in SizeMap)) {
-        s.fontSize = size;
-      }
-      if (size && size in SizeMap) {
-        s.fontSize = SizeMap[size];
-      }
-      return s;
-    },
-    [bg, color, size],
-    "Avatar styles",
-  );
+  const styles = useMemo(() => {
+    const s: KeyValue = {};
+    if (bg) {
+      s.backgroundColor = getColor(bg);
+    }
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (size && !(size in SizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in SizeMap) {
+      s.fontSize = SizeMap[size];
+    }
+    return s;
+  }, [bg, color, size]);
 
   /** ***************** render icon *******************/
-  const avatarImage = useMemoDebugger(
-    () => {
-      setFallback(!avatar);
+  const avatarImage = useMemo(() => {
+    setFallback(!avatar);
+    return (
+      avatar && (
+        <div className="contents">
+          <div
+            className={classNames(
+              classes.imgPlaceholder,
+              "absolute inset-0 bg-gray animate-pulse",
+            )}
+          />
+          <img
+            src={avatar}
+            alt={avatar}
+            className="align-baseline"
+            onError={() => setFallback(true)}
+            onLoad={(e) => e.currentTarget.previousElementSibling?.remove()}
+          />
+        </div>
+      )
+    );
+  }, [avatar]);
+
+  const fallbackAvatar = useMemo(() => {
+    if (fallbackIcon) {
+      return isSvgPath(fallbackIcon) ? (
+        <svg viewBox={viewBox}>
+          <path fill="currentColor" d={fallbackIcon.toString()} />
+        </svg>
+      ) : (
+        <i className={fallbackIcon} />
+      );
+    }
+    if (variant === "text") {
+      const [, first, second, group] =
+        name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/) ?? [];
       return (
-        avatar && (
-          <div className="contents">
-            <div
-              className={classNames(
-                classes.imgPlaceholder,
-                "absolute inset-0 bg-gray animate-pulse",
-              )}
-            />
-            <img
-              src={avatar}
-              alt={avatar}
-              className="align-baseline"
-              onError={() => setFallback(true)}
-              onLoad={(e) => e.currentTarget.previousElementSibling?.remove()}
-            />
-          </div>
-        )
+        <svg role="img">
+          <text
+            x="50%"
+            y="50%"
+            dy=".1em"
+            dominantBaseline="middle"
+            textAnchor="middle"
+            style={{ fontSize: ".5em", fontWeight: 500 }}
+          >
+            {group ?? `${first}${second}`}
+          </text>
+        </svg>
       );
-    },
-    [avatar],
-    "Avatar icon",
-  );
-
-  const fallbackAvatar = useMemoDebugger(
-    () => {
-      if (fallbackIcon) {
-        return isSvgPath(fallbackIcon) ? (
-          <svg viewBox={viewBox}>
-            <path fill="currentColor" d={fallbackIcon.toString()} />
-          </svg>
-        ) : (
-          <i className={fallbackIcon} />
-        );
-      }
-      if (variant === "text") {
-        const [, first, second, group] =
-          name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/) ?? [];
-        return (
-          <svg role="img">
-            <text
-              x="50%"
-              y="50%"
-              dy=".1em"
-              dominantBaseline="middle"
-              textAnchor="middle"
-              style={{ fontSize: ".5em", fontWeight: 500 }}
-            >
-              {group ?? `${first}${second}`}
-            </text>
-          </svg>
-        );
-      }
-      return <BoringAvatar square size={64} variant={variant} name={name} />;
-    },
-    [name, variant, fallbackIcon],
-    "Avatar fallback",
-  );
+    }
+    return <BoringAvatar square size={64} variant={variant} name={name} />;
+  }, [name, variant, fallbackIcon]);
 
   return (
     <dfn

package/src/components/button/ConfirmButton.tsx

@@ -22,18 +22,19 @@
  */
 
 import {
-  FloatingArrow,
-  FloatingFocusManager,
-  FloatingPortal,
   arrow,
   autoUpdate,
   flip,
+  FloatingArrow,
+  FloatingFocusManager,
+  FloatingPortal,
   offset,
   shift,
   useClick,
   useDismiss,
   useFloating,
   useInteractions,
+  type Placement,
 } from "@floating-ui/react";
 import { mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
@@ -66,6 +67,10 @@ interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
    * ok label
    */
   cancelLabel?: string;
+  /**
+   * dropdown placement
+   */
+  placement?: Placement;
   /**
    * click handler, return Promise to autoset loading state
    */
@@ -85,6 +90,7 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
   cancelLabel,
   onClick,
   loading,
+  placement = "bottom",
   actionMessage,
   showActionDone,
   showActionDoneEvent = "click",
@@ -127,7 +133,7 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
       }
     },
     strategy: "fixed",
-    placement: "bottom",
+    placement,
     whileElementsMounted: autoUpdate,
     middleware: [
       shift({ padding: 8 }),

package/src/components/card/Card.tsx

@@ -39,6 +39,7 @@ import {
   type AriaProps,
   type ChildrenProp,
   type CssProp,
+  type RefProp,
   type TestProps,
 } from "../../types";
 import { nodeCheck } from "../../utils";
@@ -48,6 +49,7 @@ export interface CardProps
   extends CssProp,
     AriaProps,
     TestProps,
+    RefProp<HTMLDivElement>,
     ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
   /**
    * apply flex fill styling
@@ -94,6 +96,7 @@ export const Card = ({
   draggable,
   dragKey,
   dragData,
+  ref,
   ...aria
 }: CardProps) => {
   const [header, body, footer] = useMemo(() => {
@@ -136,6 +139,7 @@ export const Card = ({
                   dragKey &&
                   e.dataTransfer?.setData(dragKey, JSON.stringify(dragData))
           }
+          ref={ref}
           {...aria}
         >
           {header}

package/src/components/collapsable/Collapsable.tsx

@@ -66,6 +66,10 @@ export interface CollapsableProps
    * header button className
    */
   headerClassName?: string;
+  /**
+   * Header position sticky
+   */
+  stickyHeader?: boolean;
   /**
    * open state icon
    */
@@ -100,6 +104,7 @@ export const Collapsable = ({
   headerClassName,
   children,
   iconAlign,
+  stickyHeader,
   iconClosed = CoreIcons.chevronRight,
   iconOpen = CoreIcons.chevronDown,
   open,
@@ -138,6 +143,7 @@ export const Collapsable = ({
           classes.collapsableHead,
           "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70",
           headerClassName,
+          stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10",
           iconAlign === "end" ? "flex-row-reverse" : "flex-row",
         )}
         onClick={() => !disabled && setOpenState(!openState)}

package/src/components/dropdown/Dropdown.tsx

@@ -248,6 +248,7 @@ const DropdownElement = ({
                 zIndex: "var(--z-popover)",
                 ...floatingStyles,
               }}
+              data-testid="dropdown-body"
               {...getFloatingProps({
                 onClick: (e) => e.stopPropagation(),
               })}

package/src/components/dropdown/DropdownTool.tsx

@@ -31,10 +31,12 @@ export const DropdownTool = ({
   children,
   className,
   groupHover,
+  icon,
   ...props
 }: ChildProp &
   CssProp &
   Omit<DropdownProps, "children"> & {
+    icon?: string;
     /**
      * hide until group hovered
      */
@@ -43,7 +45,7 @@ export const DropdownTool = ({
   return (
     <Dropdown {...props}>
       <Icon
-        icon={CoreIcons.caretDown}
+        icon={icon ?? CoreIcons.caretDown}
         className={classNames(
           className,
           "outline bg-base flex-content pointer-events-auto cursor-pointer",

package/src/components/icon/Icon.tsx

@@ -23,7 +23,7 @@
 
 import { isString, isSvgPath } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { useMemo } from "react";
 import {
   type AriaProps,
   type ColorType,
@@ -101,66 +101,54 @@ export const Icon = ({
   ...rest
 }: IconProps) => {
   /** ***************** style map *******************/
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (bg) {
-        s.backgroundColor = getColor(bg);
-      }
-      if (color) {
-        s.color = getColor(color);
-      }
-      if (size && !(size in SizeMap)) {
-        s.fontSize = size;
-      }
-      if (size && size in SizeMap) {
-        s.fontSize = SizeMap[size];
-      }
-      return s;
-    },
-    [bg, color, size],
-    "Icon styles",
-  );
+  const styles = useMemo(() => {
+    const s: KeyValue = {};
+    if (bg) {
+      s.backgroundColor = getColor(bg);
+    }
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (size && !(size in SizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in SizeMap) {
+      s.fontSize = SizeMap[size];
+    }
+    return s;
+  }, [bg, color, size]);
 
   /** ***************** check if icon is svg path *******************/
-  const isSvg = useMemoDebugger(
-    () => {
-      return isSvgPath(icon);
-    },
-    [icon],
-    "Icon isSvg",
-  );
+  const isSvg = useMemo(() => {
+    return isSvgPath(icon);
+  }, [icon]);
 
   /** ***************** render icon *******************/
-  const iconEl = useMemoDebugger(
-    () => {
-      if (!isString(icon)) {
-        throw Error("Invalid icon expected string");
-      }
-      return isSvg ? (
-        <svg viewBox={viewBox}>
-          <path fill="currentColor" d={icon.toString()} />
-        </svg>
-      ) : icon?.toString().length <= 4 ? (
-        <svg role="img">
-          <text
-            x="50%"
-            y="50%"
-            dy=".1em"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            style={{ fontSize: SvgTextSize[icon.length] ?? "1em" }}
-          >
-            {icon}
-          </text>
-        </svg>
-      ) : (
-        <i className={`${icon}`} />
-      );
-    },
-    [icon, isSvg, viewBox],
-    "Icon el",
-  );
+  const iconEl = useMemo(() => {
+    if (!isString(icon)) {
+      throw Error("Invalid icon expected string");
+    }
+    return isSvg ? (
+      <svg viewBox={viewBox}>
+        <path fill="currentColor" d={icon.toString()} />
+      </svg>
+    ) : icon?.toString().length <= 4 ? (
+      <svg role="img">
+        <text
+          x="50%"
+          y="50%"
+          dy=".1em"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          style={{ fontSize: SvgTextSize[icon.length] ?? "1em" }}
+        >
+          {icon}
+        </text>
+      </svg>
+    ) : (
+      <i className={`${icon}`} />
+    );
+  }, [icon, isSvg, viewBox]);
 
   return (
     <dfn

package/src/components/media/Media.tsx

@@ -24,12 +24,12 @@
 import { getImageColorset } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo, useRef, useState } from "react";
-import { type AriaProps, type CssProp } from "../../types";
+import { type AriaProps, type CssProp, type TestProps } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Button } from "../button/Button";
 import classes from "./Media.module.css";
 
-export interface BaseProps extends CssProp, AriaProps {
+export interface BaseProps extends CssProp, TestProps, AriaProps {
   /**
    * media source
    */