From f939a57eab55be972600435d8b213cae1b9a47cd Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Thu, 23 Dec 2021 09:23:49 -0800 Subject: [PATCH 1/7] missing semi-colon that parcel upgrade and docs-differ revealed (#2705) --- packages/@react-aria/ssr/docs/useIsSSR.mdx | 2 +- packages/@react-aria/utils/docs/mergeProps.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/ssr/docs/useIsSSR.mdx b/packages/@react-aria/ssr/docs/useIsSSR.mdx index c8c838f0b22..ee4a6553919 100644 --- a/packages/@react-aria/ssr/docs/useIsSSR.mdx +++ b/packages/@react-aria/ssr/docs/useIsSSR.mdx @@ -50,5 +50,5 @@ import {useIsSSR} from '@react-aria/ssr'; function MyComponent() { let isSSR = useIsSSR(); return {isSSR ? 'Server' : 'Client'}; -} +}; ``` diff --git a/packages/@react-aria/utils/docs/mergeProps.mdx b/packages/@react-aria/utils/docs/mergeProps.mdx index 3982250ad15..7c6d09d5319 100644 --- a/packages/@react-aria/utils/docs/mergeProps.mdx +++ b/packages/@react-aria/utils/docs/mergeProps.mdx @@ -73,5 +73,5 @@ let merged = { a.onKeyDown(e); b.onKeyDown(e); } -} +}; ``` From 5b6e59d48cb5621c3fd2042fdd8293ac1a4268dd Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Thu, 23 Dec 2021 11:18:07 -0800 Subject: [PATCH 2/7] Updating minimum supported version for iOS (#2704) * Updating minimum supported version for iOS * Apply suggestions from code review Co-authored-by: Devon Govett Co-authored-by: Danni Co-authored-by: Devon Govett --- packages/@react-aria/interactions/docs/interactions.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@react-aria/interactions/docs/interactions.mdx b/packages/@react-aria/interactions/docs/interactions.mdx index 9392184cd46..c64fbc396e6 100644 --- a/packages/@react-aria/interactions/docs/interactions.mdx +++ b/packages/@react-aria/interactions/docs/interactions.mdx @@ -111,7 +111,7 @@ mouse input, touchscreens, and also hybrid devices. * Chrome 80+ on macOS and Windows * Firefox 76+ on macOS and Windows -* Safari 12+ on macOS -* Edge 44+ on Windows -* Safari 12+ on iOS and iPadOS +* Safari 13+ on macOS +* Edge 80+ on Windows +* Safari 13+ on iOS and iPadOS * Chrome 80+ on Android From 9ce5df5be73ef16a3a368f94691e9fb0de60341d Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 23 Dec 2021 11:24:55 -0800 Subject: [PATCH 3/7] Whcm fixes (#2620) --- .../components/accordion/skin.css | 7 +++ .../components/avatar/skin.css | 8 +++ .../components/barloader/skin.css | 8 +++ .../components/breadcrumb/skin.css | 34 +++++++++++++ .../components/circleloader/skin.css | 6 +++ .../components/dialog/skin.css | 5 ++ .../components/sidenav/skin.css | 20 ++++++++ .../components/statuslight/skin.css | 11 +++++ .../components/tabs/skin.css | 49 +++++++++++++++++++ .../components/tags/skin.css | 47 ++++++++++++++++++ .../components/toast/skin.css | 6 +++ .../components/tooltip/skin.css | 13 +++++ .../actionbar/src/actionbar.css | 8 +++ 13 files changed, 222 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/accordion/skin.css b/packages/@adobe/spectrum-css-temp/components/accordion/skin.css index c8e26abf71f..3e6f245de2c 100644 --- a/packages/@adobe/spectrum-css-temp/components/accordion/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/accordion/skin.css @@ -62,3 +62,10 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Accordion-itemHeader { + &:focus-ring { + outline: 3px solid CanvasText; + } + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/avatar/skin.css b/packages/@adobe/spectrum-css-temp/components/avatar/skin.css index a7b3ca51811..ffb69b9ee98 100644 --- a/packages/@adobe/spectrum-css-temp/components/avatar/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/avatar/skin.css @@ -19,3 +19,11 @@ governing permissions and limitations under the License. opacity: var(--spectrum-avatar-small-opacity-disabled); } } +@media (forced-colors: active) { + .spectrum-Avatar { + &.is-disabled { + opacity: 1; + border: 2px solid GrayText; + } + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/barloader/skin.css b/packages/@adobe/spectrum-css-temp/components/barloader/skin.css index 303e31937db..75db6b07ea3 100644 --- a/packages/@adobe/spectrum-css-temp/components/barloader/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/barloader/skin.css @@ -61,3 +61,11 @@ governing permissions and limitations under the License. .spectrum-BarLoader-percentage { color: var(--spectrum-fieldlabel-text-color); } +@media (forced-colors: active) { + .spectrum-BarLoader-track { + forced-color-adjust: none; + --spectrum-barloader-large-track-fill-color: ButtonText; + --spectrum-barloader-large-track-color: ButtonFace; + border: 1px solid ButtonText; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css b/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css index 76eeed0fcc9..d7b904b8e23 100644 --- a/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css @@ -72,3 +72,37 @@ governing permissions and limitations under the License. } } } +@media (forced-colors: active) { + .spectrum-Breadcrumbs-item { + --spectrum-breadcrumb-item-border-color-drop: LinkText; + --spectrum-breadcrumb-item-border-color-key-focus: CanvasText; + --spectrum-breadcrumb-item-text-color-drop: LinkText; + --spectrum-breadcrumb-text-color: LinkText; + --spectrum-breadcrumb-text-color-down: CanvasText; + --spectrum-breadcrumb-text-color-hover: LinkText; + --spectrum-breadcrumb-text-color-key-focus: LinkText; + --spectrum-breadcrumb-ui-icon-color: CanvasText; + --spectrum-label-text-color-disabled: GrayText; + /* Override the selected to be the Standard Text color */ + &.is-selected, + &:last-of-type { + color: var(--spectrum-breadcrumb-text-color-down); + .spectrum-Breadcrumbs-itemLink { + &:hover { + color: var(--spectrum-breadcrumb-text-color-down); + } + } + } + /* Make links stay link color when clicked and disabled links remain disabled color */ + .spectrum-Breadcrumbs-itemLink { + &:active { + color: var(--spectrum-breadcrumb-text-color); + } + &.is-disabled { + &:active { + color: var(--spectrum-label-text-color-disabled); + } + } + } + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css index aea504fa4ec..528dc942729 100644 --- a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css @@ -35,3 +35,9 @@ governing permissions and limitations under the License. border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color); } } + +@media (forced-colors: active) { + .spectrum-CircleLoader-fill { + --spectrum-loader-circle-medium-track-fill-color: Highlight; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/skin.css b/packages/@adobe/spectrum-css-temp/components/dialog/skin.css index f38f3b8737c..39bf3b7caf7 100644 --- a/packages/@adobe/spectrum-css-temp/components/dialog/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/dialog/skin.css @@ -36,3 +36,8 @@ governing permissions and limitations under the License. color: var(--spectrum-dialog-warning-icon-color); } } +@media (forced-colors: active) { + .spectrum-Dialog { + border: 1px solid transparent; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css b/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css index 8ba533d7a6d..9d4ac3c1dd3 100644 --- a/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/sidenav/skin.css @@ -62,3 +62,23 @@ governing permissions and limitations under the License. .spectrum-SideNav-heading { color: var(--spectrum-sidenav-header-text-color); } + +@media (forced-colors: active) { + .spectrum-SideNav-item { + forced-color-adjust: none; + --spectrum-sidenav-item-text-color-selected: HighlightText; + --spectrum-sidenav-item-background-color-selected: Highlight; + --spectrum-sidenav-item-background-color-down: Highlight; + --spectrum-sidenav-item-background-color-disabled: ButtonFace; + --spectrum-sidenav-item-text-color-disabled: GrayText; + --spectrum-sidenav-item-background-color: ButtonFace; + --spectrum-sidenav-item-text-color: ButtonText; + --spectrum-sidenav-item-background-color-hover: ButtonFace; + --spectrum-sidenav-item-text-color-hover: ButtonText; + --spectrum-sidenav-item-background-color-down: ButtonFace; + --spectrum-sidenav-item-background-color-key-focus: ButtonFace; + --spectrum-sidenav-item-text-color-key-focus: ButtonText; + --spectrum-sidenav-item-border-color-key-focus: ButtonText; + --spectrum-sidenav-header-text-color: ButtonText; + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css b/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css index af8f5cdc394..d6f1e5d8858 100644 --- a/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/statuslight/skin.css @@ -79,3 +79,14 @@ governing permissions and limitations under the License. .spectrum-StatusLight--purple::before { background-color: var(--spectrum-statuslight-dot-color-label-purple); } + +@media (forced-colors: active) { + .spectrum-StatusLight { + forced-color-adjust: none; + --spectrum-statuslight-text-color-disabled: GrayText; + --spectrum-statuslight-dot-color-disabled: GrayText; + &:before { + border: 1px solid ButtonText; + } + } +} \ No newline at end of file diff --git a/packages/@adobe/spectrum-css-temp/components/tabs/skin.css b/packages/@adobe/spectrum-css-temp/components/tabs/skin.css index f1350cd711c..6a5996091a4 100644 --- a/packages/@adobe/spectrum-css-temp/components/tabs/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tabs/skin.css @@ -105,3 +105,52 @@ governing permissions and limitations under the License. border-color: var(--spectrum-tabs-focus-ring-color); } } + +@media (forced-colors: active) { + .spectrum-Tabs { + forced-color-adjust: none; + --spectrum-tabs-focus-ring-color: ButtonText; + --spectrum-tabs-icon-color: ButtonText; + --spectrum-tabs-icon-color-disabled: GrayText; + --spectrum-tabs-icon-color-hover: ButtonText; + --spectrum-tabs-icon-color-key-focus: ButtonText; + --spectrum-tabs-icon-color-selected: HighlightText; + --spectrum-tabs-quiet-rule-color: transparent; + --spectrum-tabs-quiet-selection-indicator-color: transparent; + --spectrum-tabs-quiet-vertical-rule-color: transparent; + --spectrum-tabs-rule-color: transparent; + --spectrum-tabs-selection-indicator-color: transparent; + --spectrum-tabs-text-color: ButtonText; + --spectrum-tabs-text-color-disabled: GrayText; + --spectrum-tabs-text-color-hover: ButtonText; + --spectrum-tabs-text-color-key-focus: ButtonText; + --spectrum-tabs-text-color-selected: HighlightText; + --spectrum-tabs-vertical-rule-color: transparent; + .spectrum-Tabs-item { + &:before { + background-color: ButtonFace; + } + .spectrum-Icon { + z-index: 1; + position: relative; + } + .spectrum-Tabs-itemLabel { + position: relative; + z-index: 1; + } + } + .is-selected { + color: HighlightText; + .spectrum-Icon { + fill: HighlightText; + } + &:before { + background-color: Highlight; + color: HighlightText; + } + .spectrum-Tabs-itemLabel { + color: HighlightText; + } + } + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/tags/skin.css b/packages/@adobe/spectrum-css-temp/components/tags/skin.css index f25d64c914f..a0e2f7a3584 100644 --- a/packages/@adobe/spectrum-css-temp/components/tags/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tags/skin.css @@ -155,3 +155,50 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-Tags-item { + forced-color-adjust: none; + --spectrum-tag-background-color: ButtonFace; + --spectrum-tag-background-color-disabled: ButtonFace; + --spectrum-tag-background-color-hover: ButtonFace; + --spectrum-tag-background-color-key-focus: ButtonFace; + --spectrum-tag-background-color-selected: Highlight; + --spectrum-tag-background-color-selected-hover: Highlight; + --spectrum-tag-border-color: ButtonText; + --spectrum-tag-border-color-disabled: GrayText; + --spectrum-tag-border-color-error: ButtonText; + --spectrum-tag-border-color-error-hover: ButtonText; + --spectrum-tag-border-color-error-selected: HighlightText; + --spectrum-tag-border-color-hover: Highlight; + --spectrum-tag-border-color-key-focus: Highlight; + --spectrum-tag-border-color-selected: HighlightText; + --spectrum-tag-border-color-selected-key-focus: ButtonText; + --spectrum-tag-icon-color-error: ButtonText; + --spectrum-tag-icon-color-error-hover: ButtonText; + --spectrum-tag-removable-border-color-error-down: Highlight; + --spectrum-tag-removable-border-color-error-hover: Highlight; + --spectrum-tag-removable-border-color-key-focus: Highlight; + --spectrum-tag-removable-button-background-color-hover: ButtonFace; + --spectrum-tag-removable-button-background-color-key-focus: ButtonFace; + --spectrum-tag-removable-button-background-color-selected-hover: Highlight; + --spectrum-tag-removable-button-icon-color-hover: Highlight; + --spectrum-tag-removable-button-icon-color-key-focus: Highlight; + --spectrum-tag-removable-button-icon-color-selected: HighlightText; + --spectrum-tag-removable-button-icon-color-selected-hover: HighlightText; + --spectrum-tag-removable-text-color-down: ButtonText; + --spectrum-tag-removable-text-color-error-down: Highlight; + --spectrum-tag-removable-text-color-error-key-focus: Highlight; + --spectrum-tag-removable-text-color-hover: ButtonText; + --spectrum-tag-removable-text-color-key-focus: ButtonText; + --spectrum-tag-removable-text-color-selected: HighlightText; + --spectrum-tag-removable-text-color-selected-key-focus: HighlightText; + --spectrum-tag-text-color: ButtonText; + --spectrum-tag-text-color-disabled: GrayText; + --spectrum-tag-text-color-error-selected: HighlightText; + --spectrum-tag-text-color-hover: ButtonText; + --spectrum-tag-text-color-key-focus: ButtonText; + --spectrum-tag-text-color-selected: HighlightText; + --spectrum-tag-text-color-selected-key-focus: HighlightText; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/toast/skin.css b/packages/@adobe/spectrum-css-temp/components/toast/skin.css index 1b8dff8f38f..b2202cd00d6 100644 --- a/packages/@adobe/spectrum-css-temp/components/toast/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/toast/skin.css @@ -72,3 +72,9 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-Toast { + border: 1px solid transparent; + } +} diff --git a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css index 1d686e74e95..4e9b6a1d971 100644 --- a/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/tooltip/skin.css @@ -46,3 +46,16 @@ governing permissions and limitations under the License. border-top-color: var(--spectrum-tooltip-positive-background-color); } } + +@media (forced-colors: active) { + .spectrum-Tooltip { + border: 1px solid transparent; + } + .spectrum-Tooltip-tip { + forced-color-adjust: none; + --spectrum-tooltip-background-color: CanvasText; + --spectrum-tooltip-negative-background-color: Highlight; + --spectrum-tooltip-info-background-color: Highlight; + --spectrum-tooltip-positive-background-color: Highlight; + } +} \ No newline at end of file diff --git a/packages/@react-spectrum/actionbar/src/actionbar.css b/packages/@react-spectrum/actionbar/src/actionbar.css index c7f821cee73..49560200b61 100644 --- a/packages/@react-spectrum/actionbar/src/actionbar.css +++ b/packages/@react-spectrum/actionbar/src/actionbar.css @@ -81,3 +81,11 @@ min-width: 0; } } +@media (forced-colors: active) { + .react-spectrum-ActionBar { + &.react-spectrum-ActionBar--emphasized .react-spectrum-ActionBar-bar { + + border: 1px solid transparent; + } + } +} From 150c8ae280665d2ae45c54081ee6017ac0aa8798 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Thu, 23 Dec 2021 11:48:57 -0800 Subject: [PATCH 4/7] undo fix of false positive from docs-differ (#2708) --- packages/@react-aria/ssr/docs/useIsSSR.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/ssr/docs/useIsSSR.mdx b/packages/@react-aria/ssr/docs/useIsSSR.mdx index ee4a6553919..c8c838f0b22 100644 --- a/packages/@react-aria/ssr/docs/useIsSSR.mdx +++ b/packages/@react-aria/ssr/docs/useIsSSR.mdx @@ -50,5 +50,5 @@ import {useIsSSR} from '@react-aria/ssr'; function MyComponent() { let isSSR = useIsSSR(); return {isSSR ? 'Server' : 'Client'}; -}; +} ``` From fa7fbb2398254b71c78353c3028902c3d6c1d53d Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Thu, 23 Dec 2021 13:54:51 -0600 Subject: [PATCH 5/7] Handle undefined children in useTreeData (#2549) * handle no children in useTreeData * fix tests to cover Co-authored-by: Robert Snow Co-authored-by: Danni --- packages/@react-stately/data/src/useTreeData.ts | 4 ++-- packages/@react-stately/data/test/useTreeData.test.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@react-stately/data/src/useTreeData.ts b/packages/@react-stately/data/src/useTreeData.ts index c6feaf8ab5c..7da3631fb57 100644 --- a/packages/@react-stately/data/src/useTreeData.ts +++ b/packages/@react-stately/data/src/useTreeData.ts @@ -123,7 +123,7 @@ export function useTreeData(options: TreeOptions): TreeData initialItems = [], initialSelectedKeys, getKey = (item: any) => item.id || item.key, - getChildren = (item: any) => item.children || [] + getChildren = (item: any) => item.children } = options; let map = useMemo(() => new Map>(), []); @@ -133,7 +133,7 @@ export function useTreeData(options: TreeOptions): TreeData let [items, setItems] = useState(initialNodes); let [selectedKeys, setSelectedKeys] = useState(new Set(initialSelectedKeys || [])); - function buildTree(initialItems: T[], parentKey?: Key | null) { + function buildTree(initialItems: T[] = [], parentKey?: Key | null) { return initialItems.map(item => { let node: TreeNode = { key: getKey(item), diff --git a/packages/@react-stately/data/test/useTreeData.test.js b/packages/@react-stately/data/test/useTreeData.test.js index 49bd45b3386..61a48671439 100644 --- a/packages/@react-stately/data/test/useTreeData.test.js +++ b/packages/@react-stately/data/test/useTreeData.test.js @@ -31,7 +31,7 @@ const initial = [ ]; let getKey = (item) => item.name; -let getChildren = (item) => item.children || []; +let getChildren = (item) => item.children; describe('useTreeData', function () { it('should construct a tree using initial data', function () { From 63ddab720e6f7befab0794d8fcc04215e729bcf8 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Thu, 23 Dec 2021 12:44:47 -0800 Subject: [PATCH 6/7] Add Types for Card (#2361) * Add Types for Card * Update to match Item * Edit Card types to include forward ref Co-authored-by: Danni --- packages/@react-spectrum/card/src/Card.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/@react-spectrum/card/src/Card.tsx b/packages/@react-spectrum/card/src/Card.tsx index b41c6c9efcc..80bd0044495 100644 --- a/packages/@react-spectrum/card/src/Card.tsx +++ b/packages/@react-spectrum/card/src/Card.tsx @@ -10,14 +10,14 @@ * governing permissions and limitations under the License. */ - import {CardBase} from './CardBase'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, DOMRefValue, ItemProps} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes} from 'react'; import {SpectrumCardProps} from '@react-types/card'; import {useCardViewContext} from './CardViewContext'; + let Card = forwardRef((props: SpectrumCardProps, ref: DOMRef) => { let context = useCardViewContext(); if (context !== null) { @@ -29,10 +29,8 @@ let Card = forwardRef((props: SpectrumCardProps, ref: DOMRef) => } }); -// TODO: Update the typescript for the below and the export // @ts-ignore -// eslint-disable-next-line -Card.getCollectionNode = function* getCollectionNode(props, context: any): Generator> { +Card.getCollectionNode = function* getCollectionNode(props: any): Generator> { let {children, textValue} = props; yield { @@ -45,6 +43,5 @@ Card.getCollectionNode = function* getCollectionNode(props, context: any): Ge }; }; -// eslint-disable-next-line -let _Card = Card as (props, ref) => JSX.Element; +let _Card = Card as ForwardRefExoticComponent & PropsWithoutRef & RefAttributes>>; export {_Card as Card}; From 8e44d5a70740e44f5e5edf735d6a9f017c6c3c16 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Thu, 23 Dec 2021 12:54:55 -0800 Subject: [PATCH 7/7] Fix Numberfield android focus lost (#2127) --- packages/@react-aria/button/src/useButton.ts | 5 ++++ .../numberfield/src/useNumberField.ts | 2 ++ .../spinbutton/src/useSpinButton.ts | 24 +++++++++++++++---- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/@react-aria/button/src/useButton.ts b/packages/@react-aria/button/src/useButton.ts index 84798e4088a..07b29a9ae25 100644 --- a/packages/@react-aria/button/src/useButton.ts +++ b/packages/@react-aria/button/src/useButton.ts @@ -54,6 +54,8 @@ export function useButton(props: AriaButtonProps, ref: RefObject, ref: RefObject { + e.preventDefault(); + }; + return { spinButtonProps: { role: 'spinbutton', @@ -182,14 +186,26 @@ export function useSpinButton( onBlur }, incrementButtonProps: { - onPressStart: () => onIncrementPressStart(400), - onPressEnd: clearAsync, + onPressStart: () => { + onIncrementPressStart(400); + window.addEventListener('contextmenu', cancelContextMenu); + }, + onPressEnd: () => { + clearAsync(); + window.removeEventListener('contextmenu', cancelContextMenu); + }, onFocus, onBlur }, decrementButtonProps: { - onPressStart: () => onDecrementPressStart(400), - onPressEnd: clearAsync, + onPressStart: () => { + onDecrementPressStart(400); + window.addEventListener('contextmenu', cancelContextMenu); + }, + onPressEnd: () => { + clearAsync(); + window.removeEventListener('contextmenu', cancelContextMenu); + }, onFocus, onBlur }