From 7c8b15e27fa98daeb2e6c11f9eec983126be47e3 Mon Sep 17 00:00:00 2001 From: Johan Lindskogen Date: Fri, 24 Nov 2023 14:22:56 +0100 Subject: [PATCH 1/3] Allow more recent versions of @react-aria/focus --- packages/elements/package.json | 2 +- .../ui/action-menu/UseActionMenuLogic.ts | 4 +- yarn.lock | 84 ++++++++++--------- 3 files changed, 49 insertions(+), 41 deletions(-) diff --git a/packages/elements/package.json b/packages/elements/package.json index af08d8748..1d80e8f16 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -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" diff --git a/packages/elements/src/components/ui/action-menu/UseActionMenuLogic.ts b/packages/elements/src/components/ui/action-menu/UseActionMenuLogic.ts index baf48e106..93687b073 100644 --- a/packages/elements/src/components/ui/action-menu/UseActionMenuLogic.ts +++ b/packages/elements/src/components/ui/action-menu/UseActionMenuLogic.ts @@ -32,12 +32,12 @@ export const useActionMenuLogic = ( 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(); diff --git a/yarn.lock b/yarn.lock index 8c66ad2be..ca7409c7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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== @@ -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" @@ -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" From 07f6d958cc65a65a162ae233886cc1894967bd1b Mon Sep 17 00:00:00 2001 From: Johan Lindskogen Date: Fri, 24 Nov 2023 14:23:08 +0100 Subject: [PATCH 2/3] Fix oval IconMenuButtons --- .../src/components/ui/buttons/menu-button/IconMenuButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/elements/src/components/ui/buttons/menu-button/IconMenuButton.tsx b/packages/elements/src/components/ui/buttons/menu-button/IconMenuButton.tsx index aa09eb262..12aeb7253 100644 --- a/packages/elements/src/components/ui/buttons/menu-button/IconMenuButton.tsx +++ b/packages/elements/src/components/ui/buttons/menu-button/IconMenuButton.tsx @@ -32,6 +32,7 @@ export const IconMenuButton = forwardRef< styles.button, selected && styles.selected, disabled && styles.disabled, + styles.iconOnly, styles[variant], className )} From e7e99ffcb6304e48334a3742431fc2ba8043fcfe Mon Sep 17 00:00:00 2001 From: Johan Lindskogen Date: Fri, 24 Nov 2023 15:37:36 +0100 Subject: [PATCH 3/3] Add buttonRef to ActionMenuButton --- .../action-menu-button/ActionMenuButton.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/panels/src/components/action-menu-button/ActionMenuButton.tsx b/packages/panels/src/components/action-menu-button/ActionMenuButton.tsx index 1c873a544..3759a32f1 100644 --- a/packages/panels/src/components/action-menu-button/ActionMenuButton.tsx +++ b/packages/panels/src/components/action-menu-button/ActionMenuButton.tsx @@ -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, @@ -34,6 +34,7 @@ export interface ActionMenuButtonProps | typeof SecondaryButton | typeof FlatButton; disableArrow?: boolean; + buttonRef?: RefObject; } export const ActionMenuButton: React.FC = ({ @@ -47,11 +48,13 @@ export const ActionMenuButton: React.FC = ({ menuTop, onClick, disableArrow = false, + buttonRef, ...buttonProps }) => { const [isOpen, open, close, toggle] = useBoolean(false); - const buttonRef = useRef(null); + const fallbackRef = useRef(null); + const ref = buttonRef ?? fallbackRef; const focusManager: TippyPlugin = { name: "focusManager", @@ -83,8 +86,8 @@ export const ActionMenuButton: React.FC = ({ ?.focus(); }, onHide() { - if (buttonRef.current && restoreFocus) { - buttonRef.current.focus(); + if (ref.current && restoreFocus) { + ref.current.focus(); } }, }; @@ -105,7 +108,7 @@ export const ActionMenuButton: React.FC = ({