@react-fabric/core 1.0.0-beta.44 → 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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.44",
+  "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.44",
+    "@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": "5c05c100917811fa40b30c98b94fd396b1f68ea9"
+  "gitHead": "37d7cbcd99da40553f4ac775c3332d5281565936"
 }

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