@react-fabric/core 1.0.0-beta.24 → 1.0.0-beta.26

package/css/reset/_reset.css

@@ -135,7 +135,7 @@
     }
 
     ::selection {
-      background-color: color-mix(in lab, var(--accent) 35%, var(--fabric-bg));
+      background-color: color(from var(--accent) srgb r g b / 30%);
     }
 
     *,

package/dist/cjs/components/dropdown/DropdownTool.js

@@ -20,7 +20,7 @@ var DropdownTool = function DropdownTool(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon !== null && icon !== void 0 ? icon : icons.CoreIcons.caretDown,
-      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover:inline-block data-[dropdown-open]:inline-block")
+      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));
 };

package/dist/cjs/components/menu/Menu.js

@@ -66,8 +66,9 @@ var MenuComponent = function MenuComponent(_ref) {
     })
   });
   var click = react.useClick(context, {
-    toggle: true,
-    ignoreMouse: true
+    event: "mousedown",
+    toggle: !isNested,
+    ignoreMouse: isNested
   });
   var role = react.useRole(context, {
     role: "menu"

package/dist/cjs/components/menu/MenuItem.js

@@ -19,7 +19,7 @@ require('../../types/icons.js');
 require('../../hotkeys/HotKeyWrapper.js');
 var Menu_module = require('./Menu.module.css');
 
-var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
+var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
   _excluded2 = ["children"];
 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; }
@@ -41,6 +41,8 @@ var MenuItem = function MenuItem(_ref) {
     _onClick = _ref.onClick,
     badge = _ref.badge,
     hotKey = _ref.hotKey,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? -1 : _ref$tabIndex,
     minimal = _ref.minimal,
     childOpen = _ref["data-open"],
     ref = _ref.ref,
@@ -50,6 +52,10 @@ var MenuItem = function MenuItem(_ref) {
   var badgeProps = react.useMemo(function () {
     return Badge.getBadgeProps(badge);
   }, [badge]);
+  react.useEffect(function () {
+    var _elRef$current;
+    tabIndex === 0 && ((_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.focus());
+  }, [tabIndex]);
   var iconEl = react.useMemo(function () {
     var _path;
     var path = icon;
@@ -109,6 +115,7 @@ var MenuItem = function MenuItem(_ref) {
       "data-open": childOpen,
       disabled: disabled,
       "data-id": id,
+      tabIndex: tabIndex,
       onClick: function onClick(e) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
@@ -116,8 +123,8 @@ var MenuItem = function MenuItem(_ref) {
       children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
         keyCombo: hotKey,
         handler: function handler() {
-          var _elRef$current, _elRef$current$click;
-          return (_elRef$current = elRef.current) === null || _elRef$current === void 0 || (_elRef$current$click = _elRef$current.click) === null || _elRef$current$click === void 0 ? void 0 : _elRef$current$click.call(_elRef$current);
+          var _elRef$current2, _elRef$current2$click;
+          return (_elRef$current2 = elRef.current) === null || _elRef$current2 === void 0 || (_elRef$current2$click = _elRef$current2.click) === null || _elRef$current2$click === void 0 ? void 0 : _elRef$current2$click.call(_elRef$current2);
         }
       }), menuLabel]
     }))

package/dist/cjs/core/responsive/Responsive.js

@@ -53,7 +53,7 @@ var Col = function Col(_ref3) {
     stretchContent = _ref3.stretchContent,
     aria = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-    className: classNames(Responsive_module.col, className, stretchContent && Responsive_module.stretchContent, flex === "auto" && "flex-content", flex === "fill" && "flex-1", flex === "full" && "flex-full", align && "self-".concat(align))
+    className: classNames(Responsive_module.col, className, stretchContent && Responsive_module.stretchContent, flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-initial", flex === "content" && "flex-content", align && "self-".concat(align))
   }, aria), {}, {
     children: children
   }));

package/dist/esm/components/dropdown/DropdownTool.js

@@ -20,7 +20,7 @@ var DropdownTool = function DropdownTool(_ref) {
   return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(Icon, {
       icon: icon !== null && icon !== void 0 ? icon : CoreIcons.caretDown,
-      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover:inline-block data-[dropdown-open]:inline-block")
+      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));
 };

package/dist/esm/components/menu/Menu.js

@@ -66,8 +66,9 @@ var MenuComponent = function MenuComponent(_ref) {
     })
   });
   var click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true
+    event: "mousedown",
+    toggle: !isNested,
+    ignoreMouse: isNested
   });
   var role = useRole(context, {
     role: "menu"

package/dist/esm/components/menu/MenuItem.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { useFloatingTree } from '@floating-ui/react';
 import { iconToken, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useRef, useMemo, useCallback, Fragment } from 'react';
+import { useRef, useMemo, useEffect, useCallback, Fragment } from 'react';
 import { HotKey } from '../../hotkeys/HotKey.js';
 import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
 import '@babel/runtime/helpers/slicedToArray';
@@ -19,7 +19,7 @@ import '../../types/icons.js';
 import '../../hotkeys/HotKeyWrapper.js';
 import classes from './Menu.module.css';
 
-var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
+var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
   _excluded2 = ["children"];
 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; }
@@ -41,6 +41,8 @@ var MenuItem = function MenuItem(_ref) {
     _onClick = _ref.onClick,
     badge = _ref.badge,
     hotKey = _ref.hotKey,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? -1 : _ref$tabIndex,
     minimal = _ref.minimal,
     childOpen = _ref["data-open"],
     ref = _ref.ref,
@@ -50,6 +52,10 @@ var MenuItem = function MenuItem(_ref) {
   var badgeProps = useMemo(function () {
     return getBadgeProps(badge);
   }, [badge]);
+  useEffect(function () {
+    var _elRef$current;
+    tabIndex === 0 && ((_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.focus());
+  }, [tabIndex]);
   var iconEl = useMemo(function () {
     var _path;
     var path = icon;
@@ -109,6 +115,7 @@ var MenuItem = function MenuItem(_ref) {
       "data-open": childOpen,
       disabled: disabled,
       "data-id": id,
+      tabIndex: tabIndex,
       onClick: function onClick(e) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
@@ -116,8 +123,8 @@ var MenuItem = function MenuItem(_ref) {
       children: [hotKey && /*#__PURE__*/jsx(HotKey, {
         keyCombo: hotKey,
         handler: function handler() {
-          var _elRef$current, _elRef$current$click;
-          return (_elRef$current = elRef.current) === null || _elRef$current === void 0 || (_elRef$current$click = _elRef$current.click) === null || _elRef$current$click === void 0 ? void 0 : _elRef$current$click.call(_elRef$current);
+          var _elRef$current2, _elRef$current2$click;
+          return (_elRef$current2 = elRef.current) === null || _elRef$current2 === void 0 || (_elRef$current2$click = _elRef$current2.click) === null || _elRef$current2$click === void 0 ? void 0 : _elRef$current2$click.call(_elRef$current2);
         }
       }), menuLabel]
     }))

package/dist/esm/core/responsive/Responsive.js

@@ -53,7 +53,7 @@ var Col = function Col(_ref3) {
     stretchContent = _ref3.stretchContent,
     aria = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.col, className, stretchContent && classes.stretchContent, flex === "auto" && "flex-content", flex === "fill" && "flex-1", flex === "full" && "flex-full", align && "self-".concat(align))
+    className: classNames(classes.col, className, stretchContent && classes.stretchContent, flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-initial", flex === "content" && "flex-content", align && "self-".concat(align))
   }, aria), {}, {
     children: children
   }));

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type PolymorphicProps } from "../../types";
 import { type MenuItemProps } from "./types";
-export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, tabIndex, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/theme/ThemeProvider.d.ts

@@ -29,7 +29,7 @@ export interface ThemeProps {
     /**
      * component rounding
      */
-    rounding?: "minimal" | "normal" | "full";
+    rounding?: "sm" | "md" | "full";
 }
 /**
  * Theme override

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.24",
+  "version": "1.0.0-beta.26",
   "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.24",
+    "@react-fabric/utilities": "^1.0.0-beta.26",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -48,13 +48,13 @@
   },
   "peerDependencies": {
     "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-i18next": "^15.0.2"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "ccdec75c17dcc549e7a0cad3fd1fda2001c5f990"
+  "gitHead": "452f821dc8b22c5765b3858cc53ad9d7e2f9bcf1"
 }

package/src/components/dropdown/DropdownTool.tsx

@@ -50,7 +50,7 @@ export const DropdownTool = ({
           className,
           "outline bg-base flex-content pointer-events-auto cursor-pointer",
           groupHover &&
-            "hidden group-hover:inline-block data-[dropdown-open]:inline-block",
+            "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block",
         )}
       />
       {children}

package/src/components/menu/Menu.tsx

@@ -104,8 +104,9 @@ const MenuComponent = ({
     handleClose: safePolygon({ blockPointerEvents: true }),
   });
   const click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true,
+    event: "mousedown",
+    toggle: !isNested,
+    ignoreMouse: isNested,
   });
   const role = useRole(context, { role: "menu" });
   const dismiss = useDismiss(context, { bubbles: true });

package/src/components/menu/MenuItem.tsx

@@ -24,7 +24,7 @@
 import { useFloatingTree } from "@floating-ui/react";
 import { iconToken, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Fragment, useCallback, useMemo, useRef } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef } from "react";
 import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
@@ -51,6 +51,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   onClick,
   badge,
   hotKey,
+  tabIndex = -1,
   // @ts-expect-error ignore
   minimal,
   // @ts-expect-error ignore
@@ -65,6 +66,10 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     return getBadgeProps(badge);
   }, [badge]);
 
+  useEffect(() => {
+    tabIndex === 0 && elRef.current?.focus();
+  }, [tabIndex]);
+
   const iconEl = useMemo(() => {
     let path = icon;
     if (minimal && !path) {
@@ -152,6 +157,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         data-open={childOpen}
         disabled={disabled}
         data-id={id}
+        tabIndex={tabIndex}
         onClick={(e) => {
           onClick?.(e) !== false && tree?.events.emit("click");
         }}

package/src/core/responsive/Responsive.tsx

@@ -159,9 +159,10 @@ export const Col = ({
         classes.col,
         className,
         stretchContent && classes.stretchContent,
-        flex === "auto" && "flex-content",
         flex === "fill" && "flex-1",
         flex === "full" && "flex-full",
+        flex === "auto" && "flex-initial",
+        flex === "content" && "flex-content",
         align && `self-${align}`,
       )}
       {...aria}

package/src/core/theme/ThemeProvider.tsx

@@ -57,7 +57,7 @@ export interface ThemeProps {
   /**
    * component rounding
    */
-  rounding?: "minimal" | "normal" | "full";
+  rounding?: "sm" | "md" | "full";
 }
 
 /**