Skip to content

Commit

Permalink
ActionMenuButton fixes (#680)
Browse files Browse the repository at this point in the history 
* Allow more recent versions of @react-aria/focus

* Fix oval IconMenuButtons

* Add buttonRef to ActionMenuButton
  • Loading branch information
@lindskogen
lindskogen authored Nov 24, 2023
1 parent c25bcf9 commit b1da391
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 47 deletions.
2 changes: 1 addition & 1 deletion packages/elements/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"deploy": "gh-pages -d example/build"
},
"dependencies": {
"@react-aria/focus": "3.3.0",
"@react-aria/focus": "^3.15.0",
"@stenajs-webui/core": "18.12.1",
"@stenajs-webui/theme": "18.12.1",
"classnames": "^2.3.1"
Expand Down
4 changes: 2 additions & 2 deletions packages/elements/src/components/ui/action-menu/UseActionMenuLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ export const useActionMenuLogic = <TElement extends HTMLElement>(
case "ArrowDown":
case "ArrowRight":
event.preventDefault();
focusManager.focusNext({ wrap: true });
focusManager?.focusNext({ wrap: true });
break;
case "ArrowUp":
case "ArrowLeft":
event.preventDefault();
focusManager.focusPrevious({ wrap: true });
focusManager?.focusPrevious({ wrap: true });
break;
case " ":
event.preventDefault();
Expand Down
1 change: 1 addition & 0 deletions packages/elements/src/components/ui/buttons/menu-button/IconMenuButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const IconMenuButton = forwardRef<
styles.button,
selected && styles.selected,
disabled && styles.disabled,
styles.iconOnly,
styles[variant],
className
)}
Expand Down
15 changes: 9 additions & 6 deletions packages/panels/src/components/action-menu-button/ActionMenuButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { ReactNode, useMemo, useRef } from "react";
import { ReactNode, RefObject, useMemo, useRef } from "react";
import {
ActionMenu,
ActionMenuContext,
Expand Down Expand Up @@ -34,6 +34,7 @@ export interface ActionMenuButtonProps
| typeof SecondaryButton
| typeof FlatButton;
disableArrow?: boolean;
buttonRef?: RefObject<HTMLButtonElement>;
}

export const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
Expand All @@ -47,11 +48,13 @@ export const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
menuTop,
onClick,
disableArrow = false,
buttonRef,
...buttonProps
}) => {
const [isOpen, open, close, toggle] = useBoolean(false);

const buttonRef = useRef<HTMLButtonElement>(null);
const fallbackRef = useRef<HTMLButtonElement>(null);
const ref = buttonRef ?? fallbackRef;

const focusManager: TippyPlugin<TippyProps> = {
name: "focusManager",
Expand Down Expand Up @@ -83,8 +86,8 @@ export const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
?.focus();
},
onHide() {
if (buttonRef.current && restoreFocus) {
buttonRef.current.focus();
if (ref.current && restoreFocus) {
ref.current.focus();
}
},
};
Expand All @@ -105,7 +108,7 @@ export const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
<Button
rightIcon={disableArrow ? undefined : rightIcon}
{...buttonProps}
ref={buttonRef}
ref={ref}
onClick={handleClick}
/>
<Popover
Expand All @@ -127,7 +130,7 @@ export const ActionMenuButton: React.FC<ActionMenuButtonProps> = ({
zIndex={zIndex}
plugins={[focusManager]}
lazy
reference={buttonRef}
reference={ref}
/>
</>
);
Expand Down
84 changes: 46 additions & 38 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1106,7 +1106,7 @@
core-js-pure "^3.0.0"
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
version "7.22.11"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==
Expand Down Expand Up @@ -2658,55 +2658,56 @@
dependencies:
"@babel/runtime" "^7.13.10"

"@react-aria/focus@3.3.0":
version "3.3.0"
resolved "https://registry.npmjs.org/@react-aria/focus/-/focus-3.3.0.tgz"
integrity sha512-9gOQ52VJsZr4doNRWvCB0zagyAp+7hdUePDTL/t7sJlWZYZaaMGKK9cSPT9cclsIx14AJtGbXZwpFl517oOwCQ==
"@react-aria/focus@^3.15.0":
version "3.15.0"
resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.15.0.tgz#acca3cfe94e0ba0c00276e74c6cca06975f75f87"
integrity sha512-nnxRyfqHuAjRwdQ4BpQyZPtGFKZmRU6cnaIb3pqWFCqEyJQensV7MA3TJ4Jhadq67cy1Ji5SYSlr1duBwjoYvw==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-aria/interactions" "^3.4.0"
"@react-aria/utils" "^3.8.0"
"@react-types/shared" "^3.6.0"
"@react-aria/interactions" "^3.20.0"
"@react-aria/utils" "^3.22.0"
"@react-types/shared" "^3.22.0"
"@swc/helpers" "^0.5.0"
clsx "^1.1.1"

"@react-aria/interactions@^3.4.0":
version "3.4.0"
resolved "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.4.0.tgz"
integrity sha512-BCt0bP+XimcytkAVMQrpRfU/zlOFG1g6i6XmRnatsqq2Xc1ipQHr/MumE2cu8teXJZw2Q3e27VphCDNhCUkpnQ==
"@react-aria/interactions@^3.20.0":
version "3.20.0"
resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.20.0.tgz#8db350541004f50c0479cc52b82597d8248ac5db"
integrity sha512-JCCEyK2Nb4mEHucrgmqhTHTNAEqhsiM07jJmmY22eikxnCQnsEfdwXyg9cgZLG79D5V7jyqVRqOp2OsG7Qx7kQ==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-aria/utils" "^3.8.0"
"@react-types/shared" "^3.6.0"
"@react-aria/ssr" "^3.9.0"
"@react-aria/utils" "^3.22.0"
"@react-types/shared" "^3.22.0"
"@swc/helpers" "^0.5.0"

"@react-aria/ssr@^3.0.2":
version "3.0.2"
resolved "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.0.2.tgz"
integrity sha512-+M0wrUlc2eTuMiwTfd0iFZJGu2hvMeYBLE8gRdbPJCDjLhrNWOQLKR/y6ntxQ9u8zjrNl/YPOdRtcqkA2EBnAQ==
"@react-aria/ssr@^3.9.0":
version "3.9.0"
resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.0.tgz#457310129e1447b09d2f4aa2fdd62ab0e668d88c"
integrity sha512-Bz6BqP6ZorCme9tSWHZVmmY+s7AU8l6Vl2NUYmBzezD//fVHHfFo4lFBn5tBuAaJEm3AuCLaJQ6H2qhxNSb7zg==
dependencies:
"@babel/runtime" "^7.6.2"
"@swc/helpers" "^0.5.0"

"@react-aria/utils@^3.8.0":
version "3.8.0"
resolved "https://registry.npmjs.org/@react-aria/utils/-/utils-3.8.0.tgz"
integrity sha512-VsFSeym4dB+A6t6Kl0MNSI9jYDijoLfy80z06AeGbv01xHGes86z5smvTGt3iW7u1vyYrwf+0h2WiCsF0Lw19g==
"@react-aria/utils@^3.22.0":
version "3.22.0"
resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.22.0.tgz#962a45ae95fdc21de7f22dda68253b0fb2470d06"
integrity sha512-Qi/m65GFFljXA/ayj1m5g3KZdgbZY3jacSSqD5vNUOEGiKsn4OQcsw8RfC2c0SgtLV1hLzsfvFI1OiryPlGCcw==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-aria/ssr" "^3.0.2"
"@react-stately/utils" "^3.2.1"
"@react-types/shared" "^3.6.0"
"@react-aria/ssr" "^3.9.0"
"@react-stately/utils" "^3.9.0"
"@react-types/shared" "^3.22.0"
"@swc/helpers" "^0.5.0"
clsx "^1.1.1"

"@react-stately/utils@^3.2.1":
version "3.2.1"
resolved "https://registry.npmjs.org/@react-stately/utils/-/utils-3.2.1.tgz"
integrity sha512-H79CYKPiQZrO1/dMSwjRJxsRlYg7y8PbTwnZOQ1h3DI5W6tD8CCLSlU1A5/Fp1GfcGNnK8gHqsJ9oJSRAwFS1g==
"@react-stately/utils@^3.9.0":
version "3.9.0"
resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.9.0.tgz#9cb2c8eea5dd1b58256ecb436b963c01526bae37"
integrity sha512-yPKFY1F88HxuZ15BG2qwAYxtpE4HnIU0Ofi4CuBE0xC6I8mwo4OQjDzi+DZjxQngM9D6AeTTD6F1V8gkozA0Gw==
dependencies:
"@babel/runtime" "^7.6.2"
"@swc/helpers" "^0.5.0"

"@react-types/shared@^3.6.0":
version "3.6.0"
resolved "https://registry.npmjs.org/@react-types/shared/-/shared-3.6.0.tgz"
integrity sha512-oa8m+GP881IUQmi+L0UoM5aC5t/6L6QIEA2I1FUMgwMeJn24qPAcEqYrTWeJzX2S+gAfa5r9qbzcVEgpQorEUw==
"@react-types/shared@^3.22.0":
version "3.22.0"
resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.22.0.tgz#70f85aad46cd225f7fcb29f1c2b5213163605074"
integrity sha512-yVOekZWbtSmmiThGEIARbBpnmUIuePFlLyctjvCbgJgGhz8JnEJOipLQ/a4anaWfzAgzSceQP8j/K+VOOePleA==

"@rollup/pluginutils@^4.2.1":
version "4.2.1"
Expand Down Expand Up @@ -3595,6 +3596,13 @@
"@svgr/hast-util-to-babel-ast" "^6.3.1"
svg-parser "^2.0.4"

"@swc/helpers@^0.5.0":
version "0.5.3"
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.3.tgz#98c6da1e196f5f08f977658b80d6bd941b5f294f"
integrity sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==
dependencies:
tslib "^2.4.0"

"@testing-library/dom@^8.13.0", "@testing-library/dom@^8.5.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
Expand Down

0 comments on commit b1da391

Please sign in to comment.