@react-fabric/core 1.0.0-beta.42 → 1.0.0-beta.44

package/dist/cjs/components/button/ConfirmButton.js

@@ -125,7 +125,9 @@ var ConfirmButton = function ConfirmButton(_ref) {
           "data-color": color,
           className: classNames("select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base"),
           ref: refs.setFloating,
-          style: floatingStyles
+          style: _objectSpread({
+            zIndex: "var(--z-popover)"
+          }, floatingStyles)
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "font-medium ",

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

@@ -72,7 +72,7 @@ var Tooltip = function Tooltip(_ref) {
     floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
   var hover = react$1.useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: {
       open: 1000
     },

package/dist/esm/components/button/ConfirmButton.js

@@ -125,7 +125,9 @@ var ConfirmButton = function ConfirmButton(_ref) {
           "data-color": color,
           className: classNames("select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base"),
           ref: refs.setFloating,
-          style: floatingStyles
+          style: _objectSpread({
+            zIndex: "var(--z-popover)"
+          }, floatingStyles)
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsxs("div", {
             className: "font-medium ",

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

@@ -72,7 +72,7 @@ var Tooltip = function Tooltip(_ref) {
     floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
   var hover = useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: {
       open: 1000
     },

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.42",
+  "version": "1.0.0-beta.44",
   "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.42",
+    "@react-fabric/utilities": "^1.0.0-beta.44",
     "@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": "61c9612bb2c7bc9a807f46922881432748c9e7a3"
+  "gitHead": "5c05c100917811fa40b30c98b94fd396b1f68ea9"
 }

package/src/components/button/ConfirmButton.tsx

@@ -187,7 +187,10 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
                 "select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base",
               )}
               ref={refs.setFloating}
-              style={floatingStyles}
+              style={{
+                zIndex: "var(--z-popover)",
+                ...floatingStyles,
+              }}
               {...getFloatingProps()}
             >
               <div className="font-medium ">

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

@@ -126,7 +126,7 @@ export const Tooltip = ({
   });
 
   const hover = useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: { open: 1000 },
     handleClose: copyContent ? safePolygon({ buffer: 1 }) : undefined,
   });