Skip to content

(ignore) Experiment a hunch for 6299 #7412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
siddharthkp wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

(ignore) Experiment a hunch for 6299 #7412

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 36 additions & 79 deletions packages/react/src/SelectPanel/SelectPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@
const [listContainerElement, setListContainerElement] = useState<HTMLElement | null>(null)
const [needsNoItemsAnnouncement, setNeedsNoItemsAnnouncement] = useState<boolean>(false)
const isNarrowScreenSize = useResponsiveValue({narrow: true, regular: false, wide: false}, false)
const [selectedOnSort, setSelectedOnSort] = useState<ItemInput[]>([])

Check failure on line 211 in packages/react/src/SelectPanel/SelectPanel.tsx

View workflow job for this annotation

GitHub Actions / lint 

'selectedOnSort' is assigned a value but never used
const [prevItems, setPrevItems] = useState<ItemInput[]>([])
const [prevOpen, setPrevOpen] = useState(open)
const initialHeightRef = useRef(0)
Expand All @@ -220,7 +220,7 @@

const featureFlagFullScreenOnNarrow = useFeatureFlag('primer_react_select_panel_fullscreen_on_narrow')
const usingFullScreenOnNarrow = disableFullscreenOnNarrow ? false : featureFlagFullScreenOnNarrow
const shouldOrderSelectedFirst =

Check failure on line 223 in packages/react/src/SelectPanel/SelectPanel.tsx

View workflow job for this annotation

GitHub Actions / lint 

'shouldOrderSelectedFirst' is assigned a value but never used
useFeatureFlag('primer_react_select_panel_order_selected_at_top') && showSelectedOptionsFirst

// Single select modals work differently, they have an intermediate state where the user has selected an item but
Expand Down Expand Up @@ -551,90 +551,47 @@
)

const itemsToRender = useMemo(() => {
return items
.map(item => {
return {
...item,
role: 'option',
id: item.id,
selected: 'selected' in item && item.selected === undefined ? undefined : isItemCurrentlySelected(item),
onAction: (itemFromAction, event) => {
item.onAction?.(itemFromAction, event)

if (event.defaultPrevented) {
return
}
return items.map(item => {
return {
...item,
role: 'option',
id: item.id,
selected: 'selected' in item && item.selected === undefined ? undefined : isItemCurrentlySelected(item),
onAction: (itemFromAction, event) => {
item.onAction?.(itemFromAction, event)

if (event.defaultPrevented) {
return
}

if (isMultiSelectVariant(selected)) {
const otherSelectedItems = selected.filter(selectedItem => !areItemsEqual(selectedItem, item))
const newSelectedItems = doesItemsIncludeItem(selected, item)
? otherSelectedItems
: [...otherSelectedItems, item]
if (isMultiSelectVariant(selected)) {
const otherSelectedItems = selected.filter(selectedItem => !areItemsEqual(selectedItem, item))
const newSelectedItems = doesItemsIncludeItem(selected, item)
? otherSelectedItems
: [...otherSelectedItems, item]

const multiSelectOnChange = onSelectedChange as SelectPanelMultiSelection['onSelectedChange']
multiSelectOnChange(newSelectedItems)
return
}
const multiSelectOnChange = onSelectedChange as SelectPanelMultiSelection['onSelectedChange']
multiSelectOnChange(newSelectedItems)
return
}

if (isSingleSelectModal) {
if (intermediateSelected?.id === item.id) {
// if the item is already selected, we need to unselect it
setIntermediateSelected(undefined)
} else {
setIntermediateSelected(item)
}
return
if (isSingleSelectModal) {
if (intermediateSelected?.id === item.id) {
// if the item is already selected, we need to unselect it
setIntermediateSelected(undefined)
} else {
setIntermediateSelected(item)
}
// single select anchored, direct save on click
const singleSelectOnChange = onSelectedChange as SelectPanelSingleSelection['onSelectedChange']
singleSelectOnChange(item === selected ? undefined : item)
onClose('selection')
},
} as ItemProps
})
.sort((itemA, itemB) => {
if (shouldOrderSelectedFirst) {
// itemA is selected (for sorting purposes) if an object in selectedOnSort matches every property of itemA, except for the selected property
const itemASelected = selectedOnSort.some(item =>
Object.entries(item).every(([key, value]) => {
if (key === 'selected') {
return true
}
return itemA[key as keyof ItemProps] === value
}),
)

// itemB is selected (for sorting purposes) if an object in selectedOnSort matches every property of itemA, except for the selected property
const itemBSelected = selectedOnSort.some(item =>
Object.entries(item).every(([key, value]) => {
if (key === 'selected') {
return true
}
return itemB[key as keyof ItemProps] === value
}),
)

// order selected items first
if (itemASelected > itemBSelected) {
return -1
} else if (itemASelected < itemBSelected) {
return 1
return
}
}

return 0
})
}, [
onClose,
onSelectedChange,
items,
selected,
isItemCurrentlySelected,
isSingleSelectModal,
intermediateSelected,
shouldOrderSelectedFirst,
selectedOnSort,
])
// single select anchored, direct save on click
const singleSelectOnChange = onSelectedChange as SelectPanelSingleSelection['onSelectedChange']
singleSelectOnChange(item === selected ? undefined : item)
onClose('selection')
},
} as ItemProps
})
}, [onClose, onSelectedChange, items, selected, isItemCurrentlySelected, isSingleSelectModal, intermediateSelected])

if (prevItems !== items) {
setPrevItems(items)
Expand Down
Loading