From 7781fe16965e3d43f8d5666a19f98fe73f1a4cea Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Tue, 28 Mar 2023 17:30:21 -0700 Subject: [PATCH 1/5] Move focus from cell to row on drop --- packages/@react-aria/dnd/src/useDroppableCollection.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts index 86c248cef97..b93a5283bff 100644 --- a/packages/@react-aria/dnd/src/useDroppableCollection.ts +++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts @@ -297,6 +297,13 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state: // is some indication that items were added. if (state.selectionManager.focusedKey === droppingState.current.focusedKey) { let first = newKeys.keys().next().value; + let item = state.collection.getItem(first); + + // If this is a cell, focus the parent row. + if (item?.type === 'cell') { + first = item.parentKey; + } + state.selectionManager.setFocusedKey(first); if (state.selectionManager.selectionMode === 'none') { From a804a943e4ae84de3cb03576896a59e4b03e39b3 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Tue, 28 Mar 2023 17:30:28 -0700 Subject: [PATCH 2/5] Fix meter high contrast --- packages/react-aria-components/docs/Meter.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-aria-components/docs/Meter.mdx b/packages/react-aria-components/docs/Meter.mdx index 9a4c27061b7..58278be53a1 100644 --- a/packages/react-aria-components/docs/Meter.mdx +++ b/packages/react-aria-components/docs/Meter.mdx @@ -60,6 +60,7 @@ import {Meter, Label} from 'react-aria-components'; ```css .react-aria-Meter { --bar-color: var(--spectrum-global-color-gray-500); + --fill-color: forestgreen; --text-color: var(--spectrum-alias-text-color); display: grid; @@ -83,16 +84,16 @@ import {Meter, Label} from 'react-aria-components'; } .fill { - background: forestgreen; + background: var(--fill-color); height: 100%; } } @media (forced-colors: active) { .react-aria-Meter { - forced-color-adjust: none; --bar-color: ButtonFace; --text-color: ButtonText; + --fill-color: Highlight; .bar { border: 1px solid ButtonBorder; From ad150e0ea50eb279c9aa15d8c33b3c92b37b15b0 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Tue, 28 Mar 2023 17:30:46 -0700 Subject: [PATCH 3/5] Fix crash in dnd docs examples --- packages/react-aria-components/docs/GridList.mdx | 4 ++-- packages/react-aria-components/docs/ListBox.mdx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx index 5ff769cb439..172a695980e 100644 --- a/packages/react-aria-components/docs/GridList.mdx +++ b/packages/react-aria-components/docs/GridList.mdx @@ -875,7 +875,7 @@ function DraggableGridList() { return ( - {([id, item]) => {React.createElement(item.style, null, item.name)}} + {([id, item]) => {React.createElement(item.style || 'span', null, item.name)}} ); } @@ -1149,7 +1149,7 @@ function DroppableGridList() { return ( "Drop items here"}> - {item => {React.createElement(item.style, null, item.name)}} + {item => {React.createElement(item.style || 'span', null, item.name)}} ); } diff --git a/packages/react-aria-components/docs/ListBox.mdx b/packages/react-aria-components/docs/ListBox.mdx index 109f0b3846e..e48829f59c2 100644 --- a/packages/react-aria-components/docs/ListBox.mdx +++ b/packages/react-aria-components/docs/ListBox.mdx @@ -834,7 +834,7 @@ function DraggableListBox() { return ( - {([id, item]) => {React.createElement(item.style, null, item.name)}} + {([id, item]) => {React.createElement(item.style || 'span', null, item.name)}} ); } @@ -1098,7 +1098,7 @@ function DroppableListBox() { return ( "Drop items here"}> - {item => {React.createElement(item.style, null, item.name)}} + {item => {React.createElement(item.style || 'span', null, item.name)}} ); } From 366cb3e190018f4a58fcd2cc25abd2ea85d9ddeb Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Tue, 28 Mar 2023 17:34:16 -0700 Subject: [PATCH 4/5] Fix flex gap affecting hidden drop indicators --- .../react-aria-components/src/GridList.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx index 26a3d72fb7b..5f563756b58 100644 --- a/packages/react-aria-components/src/GridList.tsx +++ b/packages/react-aria-components/src/GridList.tsx @@ -301,7 +301,7 @@ function GridListItem({item}) { renderDropIndicator({type: 'item', key: item.key, dropPosition: 'before'}) } {dropIndicator && !dropIndicator.isHidden && -
+
@@ -402,10 +402,25 @@ function RootDropIndicator() { } return ( -
+
); } + +// Applies a negative margin to offset the gap of a parent flex or grid layout. +function fixGap(element: HTMLElement | null) { + if (element && element.parentElement) { + let {display, rowGap, columnGap} = window.getComputedStyle(element.parentElement); + if (/flex|grid/.test(display)) { + if (rowGap && rowGap !== 'normal') { + element.style.marginTop = '-' + rowGap; + } + if (columnGap && columnGap !== 'normal') { + element.style.marginLeft = '-' + columnGap; + } + } + } +} From 71ef16788df1acc44a6a011c8a75c0e5bd484f45 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Tue, 28 Mar 2023 19:37:02 -0700 Subject: [PATCH 5/5] Use position: absolute on hidden elements instead --- .../react-aria-components/src/GridList.tsx | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx index 5f563756b58..fff05641dce 100644 --- a/packages/react-aria-components/src/GridList.tsx +++ b/packages/react-aria-components/src/GridList.tsx @@ -301,7 +301,7 @@ function GridListItem({item}) { renderDropIndicator({type: 'item', key: item.key, dropPosition: 'before'}) } {dropIndicator && !dropIndicator.isHidden && -
+
@@ -402,25 +402,10 @@ function RootDropIndicator() { } return ( -
+
); } - -// Applies a negative margin to offset the gap of a parent flex or grid layout. -function fixGap(element: HTMLElement | null) { - if (element && element.parentElement) { - let {display, rowGap, columnGap} = window.getComputedStyle(element.parentElement); - if (/flex|grid/.test(display)) { - if (rowGap && rowGap !== 'normal') { - element.style.marginTop = '-' + rowGap; - } - if (columnGap && columnGap !== 'normal') { - element.style.marginLeft = '-' + columnGap; - } - } - } -}