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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/css/reset/_reset.css +1 -1
  2. package/dist/cjs/components/menu/Menu.js +3 -2
  3. package/dist/cjs/components/menu/MenuItem.js +10 -3
  4. package/dist/esm/components/menu/Menu.js +3 -2
  5. package/dist/esm/components/menu/MenuItem.js +11 -4
  6. package/dist/types/components/menu/MenuItem.d.ts +1 -1
  7. package/package.json +3 -3
  8. package/src/components/menu/Menu.tsx +3 -2
  9. package/src/components/menu/MenuItem.tsx +7 -1
package/css/reset/_reset.css CHANGED
@@ -135,7 +135,7 @@
135
135
  }
136
136
 
137
137
  ::selection {
138
- background-color: color-mix(in lab, var(--accent) 35%, var(--fabric-bg));
138
+ background-color: color(from var(--accent) srgb r g b / 30%);
139
139
  }
140
140
 
141
141
  *,
package/dist/cjs/components/menu/Menu.js CHANGED
@@ -66,8 +66,9 @@ var MenuComponent = function MenuComponent(_ref) {
66
66
  })
67
67
  });
68
68
  var click = react.useClick(context, {
69
- toggle: true,
70
- ignoreMouse: true
69
+ event: "mousedown",
70
+ toggle: !isNested,
71
+ ignoreMouse: isNested
71
72
  });
72
73
  var role = react.useRole(context, {
73
74
  role: "menu"
package/dist/cjs/components/menu/MenuItem.js CHANGED
@@ -19,7 +19,7 @@ require('../../types/icons.js');
19
19
  require('../../hotkeys/HotKeyWrapper.js');
20
20
  var Menu_module = require('./Menu.module.css');
21
21
 
22
- var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
22
+ var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
23
23
  _excluded2 = ["children"];
24
24
  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; }
25
25
  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) {
41
41
  _onClick = _ref.onClick,
42
42
  badge = _ref.badge,
43
43
  hotKey = _ref.hotKey,
44
+ _ref$tabIndex = _ref.tabIndex,
45
+ tabIndex = _ref$tabIndex === void 0 ? -1 : _ref$tabIndex,
44
46
  minimal = _ref.minimal,
45
47
  childOpen = _ref["data-open"],
46
48
  ref = _ref.ref,
@@ -50,6 +52,10 @@ var MenuItem = function MenuItem(_ref) {
50
52
  var badgeProps = react.useMemo(function () {
51
53
  return Badge.getBadgeProps(badge);
52
54
  }, [badge]);
55
+ react.useEffect(function () {
56
+ var _elRef$current;
57
+ tabIndex === 0 && ((_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.focus());
58
+ }, [tabIndex]);
53
59
  var iconEl = react.useMemo(function () {
54
60
  var _path;
55
61
  var path = icon;
@@ -109,6 +115,7 @@ var MenuItem = function MenuItem(_ref) {
109
115
  "data-open": childOpen,
110
116
  disabled: disabled,
111
117
  "data-id": id,
118
+ tabIndex: tabIndex,
112
119
  onClick: function onClick(e) {
113
120
  (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
114
121
  }
@@ -116,8 +123,8 @@ var MenuItem = function MenuItem(_ref) {
116
123
  children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
117
124
  keyCombo: hotKey,
118
125
  handler: function handler() {
119
- var _elRef$current, _elRef$current$click;
120
- 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);
126
+ var _elRef$current2, _elRef$current2$click;
127
+ 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);
121
128
  }
122
129
  }), menuLabel]
123
130
  }))
package/dist/esm/components/menu/Menu.js CHANGED
@@ -66,8 +66,9 @@ var MenuComponent = function MenuComponent(_ref) {
66
66
  })
67
67
  });
68
68
  var click = useClick(context, {
69
- toggle: true,
70
- ignoreMouse: true
69
+ event: "mousedown",
70
+ toggle: !isNested,
71
+ ignoreMouse: isNested
71
72
  });
72
73
  var role = useRole(context, {
73
74
  role: "menu"
package/dist/esm/components/menu/MenuItem.js CHANGED
@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
5
5
  import { useFloatingTree } from '@floating-ui/react';
6
6
  import { iconToken, mergeRefs } from '@react-fabric/utilities';
7
7
  import classNames from 'classnames';
8
- import { useRef, useMemo, useCallback, Fragment } from 'react';
8
+ import { useRef, useMemo, useEffect, useCallback, Fragment } from 'react';
9
9
  import { HotKey } from '../../hotkeys/HotKey.js';
10
10
  import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
11
11
  import '@babel/runtime/helpers/slicedToArray';
@@ -19,7 +19,7 @@ import '../../types/icons.js';
19
19
  import '../../hotkeys/HotKeyWrapper.js';
20
20
  import classes from './Menu.module.css';
21
21
 
22
- var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
22
+ var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
23
23
  _excluded2 = ["children"];
24
24
  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; }
25
25
  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) {
41
41
  _onClick = _ref.onClick,
42
42
  badge = _ref.badge,
43
43
  hotKey = _ref.hotKey,
44
+ _ref$tabIndex = _ref.tabIndex,
45
+ tabIndex = _ref$tabIndex === void 0 ? -1 : _ref$tabIndex,
44
46
  minimal = _ref.minimal,
45
47
  childOpen = _ref["data-open"],
46
48
  ref = _ref.ref,
@@ -50,6 +52,10 @@ var MenuItem = function MenuItem(_ref) {
50
52
  var badgeProps = useMemo(function () {
51
53
  return getBadgeProps(badge);
52
54
  }, [badge]);
55
+ useEffect(function () {
56
+ var _elRef$current;
57
+ tabIndex === 0 && ((_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.focus());
58
+ }, [tabIndex]);
53
59
  var iconEl = useMemo(function () {
54
60
  var _path;
55
61
  var path = icon;
@@ -109,6 +115,7 @@ var MenuItem = function MenuItem(_ref) {
109
115
  "data-open": childOpen,
110
116
  disabled: disabled,
111
117
  "data-id": id,
118
+ tabIndex: tabIndex,
112
119
  onClick: function onClick(e) {
113
120
  (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
114
121
  }
@@ -116,8 +123,8 @@ var MenuItem = function MenuItem(_ref) {
116
123
  children: [hotKey && /*#__PURE__*/jsx(HotKey, {
117
124
  keyCombo: hotKey,
118
125
  handler: function handler() {
119
- var _elRef$current, _elRef$current$click;
120
- 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);
126
+ var _elRef$current2, _elRef$current2$click;
127
+ 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);
121
128
  }
122
129
  }), menuLabel]
123
130
  }))
package/dist/types/components/menu/MenuItem.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { type PolymorphicProps } from "../../types";
3
3
  import { type MenuItemProps } from "./types";
4
- 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;
4
+ 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/core",
3
- "version": "1.0.0-beta.24",
3
+ "version": "1.0.0-beta.25",
4
4
  "description": "RUF: Core package",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -36,7 +36,7 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@floating-ui/react": "^0.26.24",
39
- "@react-fabric/utilities": "^1.0.0-beta.24",
39
+ "@react-fabric/utilities": "^1.0.0-beta.25",
40
40
  "@tailwindcss/container-queries": "^0.1.1",
41
41
  "@tailwindcss/forms": "^0.5.7",
42
42
  "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
56
56
  "node": ">=18.12.0",
57
57
  "npm": ">=8.19.0"
58
58
  },
59
- "gitHead": "ccdec75c17dcc549e7a0cad3fd1fda2001c5f990"
59
+ "gitHead": "34640e2473c7823254e82aa7aed920c9c6f8f503"
60
60
  }
package/src/components/menu/Menu.tsx CHANGED
@@ -104,8 +104,9 @@ const MenuComponent = ({
104
104
  handleClose: safePolygon({ blockPointerEvents: true }),
105
105
  });
106
106
  const click = useClick(context, {
107
- toggle: true,
108
- ignoreMouse: true,
107
+ event: "mousedown",
108
+ toggle: !isNested,
109
+ ignoreMouse: isNested,
109
110
  });
110
111
  const role = useRole(context, { role: "menu" });
111
112
  const dismiss = useDismiss(context, { bubbles: true });
package/src/components/menu/MenuItem.tsx CHANGED
@@ -24,7 +24,7 @@
24
24
  import { useFloatingTree } from "@floating-ui/react";
25
25
  import { iconToken, mergeRefs } from "@react-fabric/utilities";
26
26
  import classNames from "classnames";
27
- import { Fragment, useCallback, useMemo, useRef } from "react";
27
+ import { Fragment, useCallback, useEffect, useMemo, useRef } from "react";
28
28
  import { HotKey } from "../../hotkeys/HotKey";
29
29
  import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
30
30
  import { Tooltip } from "../../overlays";
@@ -51,6 +51,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
51
51
  onClick,
52
52
  badge,
53
53
  hotKey,
54
+ tabIndex = -1,
54
55
  // @ts-expect-error ignore
55
56
  minimal,
56
57
  // @ts-expect-error ignore
@@ -65,6 +66,10 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
65
66
  return getBadgeProps(badge);
66
67
  }, [badge]);
67
68
 
69
+ useEffect(() => {
70
+ tabIndex === 0 && elRef.current?.focus();
71
+ }, [tabIndex]);
72
+
68
73
  const iconEl = useMemo(() => {
69
74
  let path = icon;
70
75
  if (minimal && !path) {
@@ -152,6 +157,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
152
157
  data-open={childOpen}
153
158
  disabled={disabled}
154
159
  data-id={id}
160
+ tabIndex={tabIndex}
155
161
  onClick={(e) => {
156
162
  onClick?.(e) !== false && tree?.events.emit("click");
157
163
  }}