@react-fabric/core 1.0.0-beta.43 → 1.0.0-beta.45

package/css/components/_button.css

@@ -134,7 +134,7 @@
     --text: color-mix(in lab, var(--color) 80%, var(--fabric-text));
     --bg-hover: color-mix(in lab, var(--color) 18%, var(--fabric-bg));
     --bg-click: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
-    --bg-active: color-mix(in lab, var(--color) 36%, var(--fabric-bg));
+    --bg-active: color-mix(in lab, var(--color) 24%, var(--fabric-bg));
 
     &[data-color="accent"] {
       --color: var(--color-accent-500);

package/css/components/_menu.css

@@ -56,20 +56,20 @@
     }
 
     &[data-focus="true"] {
-      background-color: color(from var(--color) srgb r g b / 15%);
+      background-color: color-mix(in lab, var(--color) 15%, var(--fabric-bg));
     }
 
     &:active {
-      background-color: color(from var(--color) srgb r g b / 35%);
+      background-color: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
     }
 
     &[data-open="true"] {
-      background-color: color(from var(--color) srgb r g b / 10%);
+      background-color: color-mix(in lab, var(--color) 10%, var(--fabric-bg));
     }
 
     &.active {
       pointer-events: none;
-      background-color: color(from var(--color) srgb r g b / 20%);
+      background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
 
       & > div {
         box-shadow: 4px 0 0 var(--color) inset;

package/dist/cjs/components/card/Card.js

@@ -11,7 +11,7 @@ var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 var nodeCheck = require('../../utils/nodeCheck.js');
 
-var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData", "ref"];
+var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "onDragStart", "flex", "draggable", "dragKey", "dragData", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Card = function Card(_ref) {
@@ -21,6 +21,7 @@ var Card = function Card(_ref) {
     selected = _ref.selected,
     selectedRibbon = _ref.selectedRibbon,
     onClick = _ref.onClick,
+    onDragStart = _ref.onDragStart,
     flex = _ref.flex,
     draggable = _ref.draggable,
     dragKey = _ref.dragKey,
@@ -37,16 +38,18 @@ var Card = function Card(_ref) {
     header = _useMemo2[0],
     body = _useMemo2[1],
     footer = _useMemo2[2];
+  var handleDragStart = react.useCallback(function (event) {
+    var _event$dataTransfer;
+    dragKey && ((_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
+    dragKey && (onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, dragKey, dragData));
+  }, [onDragStart, dragKey, dragData]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames("fabric-cardWrapper", "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && "selected", selected && "outline-2 outline-accent-500 outline-offset-2"),
     children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
         className: classNames("fabric-card", className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && "clickable"),
         draggable: draggable,
-        onDragStart: !draggable ? undefined : function (e) {
-          var _e$dataTransfer;
-          return dragKey && ((_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 ? void 0 : _e$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
-        },
+        onDragStart: !draggable ? undefined : handleDragStart,
         ref: ref
       }, aria), {}, {
         children: [header, /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/components/tabpanel/Tab.js

@@ -61,7 +61,7 @@ var Tab = function Tab(_ref) {
       disabled: disabled,
       "data-color": color,
       "data-inner-clickable": true,
-      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
+      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },

package/dist/cjs/hooks/useEffectDebugger.js

@@ -30,9 +30,9 @@ var loggerM = utilities.useLogger("useMemoDebugger");
 var loggerE = utilities.useLogger("useEffectDebugger");
 var loggerLE = utilities.useLogger("useLayoutEffectDebugger");
 var compareInputs = function compareInputs(oldInputs, newInputs, prefix, logger) {
-  if (process.env.NODE_ENV === "production" && typeof window !== "undefined" &&
+  if (typeof window !== "undefined" &&
   // @ts-expect-error ignore
-  window.DEBUG_HOOKS !== true) return;
+  window.DEBUG_EFFECTS !== true) return;
 
   // Edge-case: different array lengths
   if (oldInputs.length !== newInputs.length) {

package/dist/cjs/overlays/tooltip/Tooltip.js

@@ -92,8 +92,9 @@ var Tooltip = function Tooltip(_ref) {
   var copyEl = react.useMemo(function () {
     if (copyContent) {
       var copyText = utilities.isString(copyContent) ? copyContent : content;
-      var handler = function handler() {
+      var handler = function handler(e) {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return /*#__PURE__*/jsxRuntime.jsx("span", {

package/dist/esm/components/card/Card.js

@@ -4,14 +4,14 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import { useMemo, Children } from 'react';
+import { useMemo, Children, useCallback } from 'react';
 import { ErrorBoundary } from '../../core/boundary/ErrorBoundary.js';
 import { Header, Footer } from '../../core/headfoot/HeadFoot.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 
-var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData", "ref"];
+var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "onDragStart", "flex", "draggable", "dragKey", "dragData", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Card = function Card(_ref) {
@@ -21,6 +21,7 @@ var Card = function Card(_ref) {
     selected = _ref.selected,
     selectedRibbon = _ref.selectedRibbon,
     onClick = _ref.onClick,
+    onDragStart = _ref.onDragStart,
     flex = _ref.flex,
     draggable = _ref.draggable,
     dragKey = _ref.dragKey,
@@ -37,16 +38,18 @@ var Card = function Card(_ref) {
     header = _useMemo2[0],
     body = _useMemo2[1],
     footer = _useMemo2[2];
+  var handleDragStart = useCallback(function (event) {
+    var _event$dataTransfer;
+    dragKey && ((_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
+    dragKey && (onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, dragKey, dragData));
+  }, [onDragStart, dragKey, dragData]);
   return /*#__PURE__*/jsx("div", {
     className: classNames("fabric-cardWrapper", "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && "selected", selected && "outline-2 outline-accent-500 outline-offset-2"),
     children: /*#__PURE__*/jsx(ErrorBoundary, {
       children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
         className: classNames("fabric-card", className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && "clickable"),
         draggable: draggable,
-        onDragStart: !draggable ? undefined : function (e) {
-          var _e$dataTransfer;
-          return dragKey && ((_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 ? void 0 : _e$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
-        },
+        onDragStart: !draggable ? undefined : handleDragStart,
         ref: ref
       }, aria), {}, {
         children: [header, /*#__PURE__*/jsx("div", {

package/dist/esm/components/tabpanel/Tab.js

@@ -61,7 +61,7 @@ var Tab = function Tab(_ref) {
       disabled: disabled,
       "data-color": color,
       "data-inner-clickable": true,
-      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
+      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },

package/dist/esm/hooks/useEffectDebugger.js

@@ -30,9 +30,9 @@ var loggerM = useLogger("useMemoDebugger");
 var loggerE = useLogger("useEffectDebugger");
 var loggerLE = useLogger("useLayoutEffectDebugger");
 var compareInputs = function compareInputs(oldInputs, newInputs, prefix, logger) {
-  if (process.env.NODE_ENV === "production" && typeof window !== "undefined" &&
+  if (typeof window !== "undefined" &&
   // @ts-expect-error ignore
-  window.DEBUG_HOOKS !== true) return;
+  window.DEBUG_EFFECTS !== true) return;
 
   // Edge-case: different array lengths
   if (oldInputs.length !== newInputs.length) {

package/dist/esm/overlays/tooltip/Tooltip.js

@@ -92,8 +92,9 @@ var Tooltip = function Tooltip(_ref) {
   var copyEl = useMemo(function () {
     if (copyContent) {
       var copyText = isString(copyContent) ? copyContent : content;
-      var handler = function handler() {
+      var handler = function handler(e) {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return /*#__PURE__*/jsx("span", {

package/dist/types/components/callout/Callout.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type AriaProps, type ChildrenProp, type ColorState, type CssProp, type TestProps } from "../../types";
 export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProps {
     /**
@@ -7,7 +8,7 @@ export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProp
     /**
      * legend title
      */
-    legend?: string;
+    legend?: string | React.ReactElement;
     /**
      * callout icon
      */

package/dist/types/components/card/Card.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEventHandler } from "react";
+import { type DragEvent, type MouseEventHandler } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
 import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
@@ -11,6 +11,10 @@ export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDi
      * click handler
      */
     onClick?: MouseEventHandler;
+    /**
+     * drag start handler
+     */
+    onDragStart?: (event: DragEvent, dragKey: string, dragData?: KeyValue) => void;
     /**
      * body css classname(s)
      */
@@ -36,4 +40,4 @@ export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDi
      */
     dragData?: KeyValue;
 }
-export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, flex, draggable, dragKey, dragData, ref, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, onDragStart, flex, draggable, dragKey, dragData, ref, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.43",
+  "version": "1.0.0-beta.45",
   "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.43",
+    "@react-fabric/utilities": "^1.0.0-beta.45",
     "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.10.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "92cd2fc5c71e3f0e00a9cff83ff924c51d7adb57"
+  "gitHead": "37d7cbcd99da40553f4ac775c3332d5281565936"
 }

package/src/components/callout/Callout.tsx

@@ -44,7 +44,7 @@ export interface CalloutProps
   /**
    * legend title
    */
-  legend?: string;
+  legend?: string | React.ReactElement;
   /**
    * callout icon
    */

package/src/components/card/Card.tsx

@@ -24,9 +24,10 @@
 import classNames from "classnames";
 import {
   Children,
-  useMemo,
   type DragEvent,
   type MouseEventHandler,
+  useCallback,
+  useMemo,
 } from "react";
 import { ErrorBoundary } from "../../core/boundary/ErrorBoundary";
 import { type ContentProps } from "../../core/content/Content";
@@ -58,6 +59,14 @@ export interface CardProps
    * click handler
    */
   onClick?: MouseEventHandler;
+  /**
+   * drag start handler
+   */
+  onDragStart?: (
+    event: DragEvent,
+    dragKey: string,
+    dragData?: KeyValue,
+  ) => void;
   /**
    * body css classname(s)
    */
@@ -91,6 +100,7 @@ export const Card = ({
   selected,
   selectedRibbon,
   onClick,
+  onDragStart,
   flex,
   draggable,
   dragKey,
@@ -112,6 +122,14 @@ export const Card = ({
     );
   }, [children]);
 
+  const handleDragStart = useCallback(
+    (event: DragEvent) => {
+      dragKey && event.dataTransfer?.setData(dragKey, JSON.stringify(dragData));
+      dragKey && onDragStart?.(event, dragKey, dragData);
+    },
+    [onDragStart, dragKey, dragData],
+  );
+
   return (
     <div
       className={classNames(
@@ -131,13 +149,7 @@ export const Card = ({
             onClick && "clickable",
           )}
           draggable={draggable}
-          onDragStart={
-            !draggable
-              ? undefined
-              : (e: DragEvent) =>
-                  dragKey &&
-                  e.dataTransfer?.setData(dragKey, JSON.stringify(dragData))
-          }
+          onDragStart={!draggable ? undefined : handleDragStart}
           ref={ref}
           {...aria}
         >

package/src/components/tabpanel/Tab.tsx

@@ -144,7 +144,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
           disabled && "text-tint-500 pointer-events-none",
           tabFlex ? "flex-1" : "flex-initial max-w-36",
           minimal ? "min-w-6" : "min-w-18",
-          "flex items-center justify-center px-1 rounded overflow-hidden",
+          "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer",
         )}
         onClick={() => !active && onClick?.(id)}
         ref={ref as AnyObject}

package/src/hooks/useEffectDebugger.ts

@@ -44,10 +44,9 @@ const compareInputs = (
   logger: ReturnType<typeof useLogger>,
 ) => {
   if (
-    process.env.NODE_ENV === "production" &&
     typeof window !== "undefined" &&
     // @ts-expect-error ignore
-    window.DEBUG_HOOKS !== true
+    window.DEBUG_EFFECTS !== true
   )
     return;
 

package/src/overlays/tooltip/Tooltip.tsx

@@ -45,6 +45,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type MouseEvent,
   type ReactElement,
 } from "react";
 import { Icon } from "../../components/icon/Icon";
@@ -147,8 +148,9 @@ export const Tooltip = ({
   const copyEl = useMemo(() => {
     if (copyContent) {
       const copyText: AnyObject = isString(copyContent) ? copyContent : content;
-      const handler = () => {
+      const handler = (e: MouseEvent) => {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return (