@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.6

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
    */

package/src/components/menu/ContextMenu.tsx

@@ -29,30 +29,41 @@ import {
   useClick,
   useDismiss,
   useFloating,
+  useFloatingNodeId,
   useInteractions,
 } from "@floating-ui/react";
-import { cloneElement, useRef, useState } from "react";
+import { cloneElement, useEffect, useRef, useState } from "react";
 import { type ChildrenProp } from "../../types";
 import { type Menu } from "./Menu";
 
 export interface ContextMenuProps extends ChildrenProp {
   menu: React.ReactElement<typeof Menu>;
+
+  disabled?: boolean;
 }
 
-export const ContextMenu = ({ children, menu }: ContextMenuProps) => {
+export const ContextMenu = ({ children, menu, disabled }: ContextMenuProps) => {
   const [isOpen, setIsOpen] = useState(false);
+  const nodeId = useFloatingNodeId();
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
-    onOpenChange: setIsOpen,
+    nodeId,
+    onOpenChange: (open, evt, reason) => {
+      const target = evt?.target as HTMLElement;
+      if (!target?.closest(".menu-list")) setIsOpen(open);
+    },
     strategy: "fixed",
     placement: "bottom-start",
     whileElementsMounted: autoUpdate,
     middleware: [offset(8), flip()],
   });
 
-  const click = useClick(context, {});
-  const dismiss = useDismiss(context, {});
+  const click = useClick(context, {
+    toggle: true,
+    ignoreMouse: true,
+  });
+  const dismiss = useDismiss(context, { bubbles: true });
 
   const { getFloatingProps } = useInteractions([dismiss, click]);
 
@@ -78,10 +89,19 @@ export const ContextMenu = ({ children, menu }: ContextMenuProps) => {
     return false;
   });
 
-  const wrapperRef = useRef((el: HTMLElement) => {
-    el?.parentElement?.removeEventListener("contextmenu", handleClick.current);
-    el?.parentElement?.addEventListener("contextmenu", handleClick.current);
-  });
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (el && !disabled) {
+      el?.parentElement?.addEventListener("contextmenu", handleClick.current);
+      return () => {
+        el?.parentElement?.removeEventListener(
+          "contextmenu",
+          handleClick.current,
+        );
+      };
+    }
+  }, [disabled]);
 
   const tryClosing = useRef((e: React.MouseEvent) => {
     if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']"))
@@ -91,12 +111,17 @@ export const ContextMenu = ({ children, menu }: ContextMenuProps) => {
   return (
     <div
       className="contents"
-      ref={wrapperRef.current as AnyObject}
+      ref={wrapperRef}
       onMouseUpCapture={tryClosing.current}
     >
       {children}
       {isOpen && (
-        <FloatingPortal>
+        <FloatingPortal
+          root={
+            refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
+            undefined
+          }
+        >
           {cloneElement(menu as AnyObject, {
             ...getFloatingProps(),
             style: {

package/src/components/menu/Menu.tsx

@@ -224,7 +224,7 @@ const MenuComponent = ({
                     "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]",
                 )}
                 autoFocus
-                ref={mergeRefs(refs.setFloating, isNested ? undefined : ref)}
+                ref={mergeRefs(isNested ? refs.setFloating : ref)}
                 {...getFloatingProps({
                   onClick: isNested ? undefined : handleClick,
                 })}

package/src/components/navigator/Navigator.tsx

@@ -61,6 +61,7 @@ export const Navigator = ({
         color={color}
         className="text-[1em] p-1"
         aria-label="previous"
+        data-testid="previous"
         icon={CoreIcons.chevronLeft}
         onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
       />
@@ -69,6 +70,7 @@ export const Navigator = ({
         className="text-[1em] p-1"
         color={color}
         aria-label="next"
+        data-testid="next"
         icon={CoreIcons.chevronRight}
         onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
       />

package/src/components/panel/Panel.tsx

@@ -176,6 +176,7 @@ export const Panel = ({
           headerClassName,
           "flex flex-nowrap items-center area-head",
         )}
+        data-testid="panel-header"
         onClick={collapsable ? toggleCollapse : undefined}
       >
         {onBack && (
@@ -240,6 +241,7 @@ export const Panel = ({
       </header>
       {(!collapsed || expanded) && (
         <div
+          data-testid="panel-body"
           className={classNames(
             classes.panelBody,
             "area-content grid overflow-hidden",

package/src/components/tabpanel/Tab.tsx

@@ -21,8 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { type ReactElement, useMemo } from "react";
+import { Fragment, type ReactElement, useMemo } from "react";
+import { Tooltip } from "../../overlays";
 import {
   type AriaProps,
   type BadgeType,
@@ -34,6 +36,7 @@ import {
   type PolymorphicProps,
   type RefProp,
   type TestProps,
+  type TooltipProp,
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
@@ -46,7 +49,8 @@ export interface TabProps
     RefProp,
     AriaProps,
     TestProps,
-    IconProps {
+    IconProps,
+    TooltipProp {
   /**
    * tab id
    */
@@ -62,7 +66,7 @@ export interface TabProps
   /**
    * tab badge
    */
-  badge?: BadgeType;
+  badge?: string | number | BadgeType;
   /**
    * disabled
    */
@@ -110,6 +114,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
   tabFlex,
   color,
   actions,
+  tooltip,
   activeClassName,
   ...aria
 }: TabProps & PolymorphicProps<Tag>) => {
@@ -117,63 +122,72 @@ export const Tab = <Tag extends React.ElementType = "button">({
     return getBadgeProps(badge);
   }, [badge]);
 
+  const tooltipProps = useMemo(() => {
+    if (isString(tooltip)) return { content: tooltip };
+
+    return tooltip ?? {};
+  }, [tooltip]);
+
   const E = as ?? "button";
+  const W = tooltip ? Tooltip : Fragment;
   return (
-    <E
-      data-id={id}
-      disabled={disabled}
-      data-color={color}
-      className={classNames(
-        classes.tabButton,
-        className,
-        active && "active pointer-events-none",
-        active && activeClassName,
-        disabled && "text-tint-500 pointer-events-none",
-        tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24",
-        "flex items-center justify-center px-1 rounded overflow-hidden",
-      )}
-      onClick={() => !active && onClick?.(id)}
-      ref={ref as AnyObject}
-      {...aria}
-    >
-      {icon && (
-        <Icon
-          icon={icon}
-          bg={iconBg}
-          color={iconColor}
-          rtlFlip={rtlFlip}
-          className="flex-content"
-        />
-      )}
-      {!minimal && (
-        <label className="flex-initial truncate text-center px-1 py-1">
-          {label}
-        </label>
-      )}
-      {badge && (
-        <Badge
-          {...badgeProps}
-          placement={minimal ? "end" : ""}
-          className={classNames("me-1", badgeProps.className)}
-        />
-      )}
-      {actions && active && (
-        <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
-      )}
-      {onClose && (
-        <span
-          role="none"
-          className={classNames(
-            "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
-          )}
-          onClick={(e) => {
-            onClose?.();
-            e.stopPropagation();
-          }}
-        >
-          &times;
-        </span>
-      )}
-    </E>
+    <W {...tooltipProps}>
+      <E
+        data-id={id}
+        disabled={disabled}
+        data-color={color}
+        className={classNames(
+          classes.tabButton,
+          className,
+          active && "active pointer-events-none",
+          active && activeClassName,
+          disabled && "text-tint-500 pointer-events-none",
+          tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24",
+          "flex items-center justify-center px-1 rounded overflow-hidden",
+        )}
+        onClick={() => !active && onClick?.(id)}
+        ref={ref as AnyObject}
+        {...aria}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            bg={iconBg}
+            color={iconColor}
+            rtlFlip={rtlFlip}
+            className="flex-content"
+          />
+        )}
+        {!minimal && (
+          <label className="flex-initial truncate text-center px-1 py-1">
+            {label}
+          </label>
+        )}
+        {badge && (
+          <Badge
+            {...badgeProps}
+            placement={minimal ? "end" : ""}
+            className={classNames("me-1", badgeProps.className)}
+          />
+        )}
+        {actions && active && (
+          <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
+        )}
+        {onClose && (
+          <span
+            role="none"
+            className={classNames(
+              "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
+            )}
+            onClick={(e) => {
+              onClose?.();
+              e.stopPropagation();
+            }}
+          >
+            &times;
+          </span>
+        )}
+      </E>
+    </W>
   );
 };

package/src/core/aside/Aside.tsx

@@ -200,6 +200,7 @@ export const Aside = ({
       className={classNames(classes.aside, className, "overflow-hidden grid")}
       data-align={align}
       data-flyout={peek}
+      data-loading={loading}
       data-collapsed={isCollapsed}
       style={isCollapsed ? undefined : widthStyles}
       data-testid={testId}
@@ -211,6 +212,7 @@ export const Aside = ({
           headerClassName,
           "grid area-head items-center",
         )}
+        data-testid="aside-header"
       >
         {title && (
           <div
@@ -264,6 +266,7 @@ export const Aside = ({
           "overflow-hidden grid",
         )}
         style={isCollapsed ? widthStyles : undefined}
+        data-testid="aside-body"
       >
         <ErrorBoundary>{children}</ErrorBoundary>
       </section>

package/src/core/content/Content.tsx

@@ -22,14 +22,14 @@
  */
 
 import classNames from "classnames";
-import { useImperativeHandle } from "react";
+import { type MouseEvent, useImperativeHandle } from "react";
 import { useDebounce } from "../../hooks/useDebounce";
 import { useResizeObserver } from "../../hooks/useResizeObserver";
 import {
   type ChildrenProp,
   type CssProp,
-  type PositionObject,
   type RefProp,
+  type ScrollObject,
   type SizeObject,
   type TestProps,
 } from "../../types";
@@ -44,7 +44,7 @@ export interface ContentProps
   /**
    * scroll vevent handler
    */
-  onScroll?: (event: PositionObject) => void;
+  onScroll?: (scroll: ScrollObject, event: MouseEvent<HTMLDivElement>) => void;
   /**
    * scroll vevent handler
    */
@@ -65,13 +65,19 @@ export const Content = ({
 }: ContentProps) => {
   const resizeHandle = useResizeObserver(onResize);
   const scrollHandler = useDebounce(
-    (e: React.UIEvent<HTMLDivElement>) => {
-      onScroll?.({
-        // @ts-expect-error ignore
-        left: e.target.scrollLeft,
-        // @ts-expect-error ignore
-        top: e.target.scrollTop,
-      });
+    (e: MouseEvent<HTMLDivElement>) => {
+      const el = e.target as HTMLElement;
+      onScroll?.(
+        {
+          left: el.scrollLeft,
+          top: el.scrollTop,
+          scrollHeight: el.scrollHeight,
+          scrollWidth: el.scrollWidth,
+          width: el.offsetWidth,
+          height: el.offsetHeight,
+        },
+        e,
+      );
     },
     [onScroll],
   );

package/src/core/page/Page.tsx

@@ -66,6 +66,7 @@ export const Page = ({
     <div
       data-testid={testId}
       data-test-value={testValue}
+      data-loading={loading}
       className={classNames(
         classes.page,
         "overflow-hidden grid area-content",

package/src/overlays/modal/Modal.tsx

@@ -95,7 +95,7 @@ export interface ModalProps
   /**
    * close handler
    */
-  onClose: (...args: AnyObject) => void;
+  onClose?: (...args: AnyObject) => void;
   /**
    * before close handler, return false to prevent close
    */

package/src/types/index.ts

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

package/src/typography/Typography.module.css

@@ -57,7 +57,7 @@
   }
 
   .mark {
-    --mark-color: var(--accent);
+    --mark-color: var(--primary);
 
     background-color: color-mix(
       in lab,