Repository: tannerlinsley/react-query
File: packages/query-devtools/src/Devtools.tsx (TypeScript)

Code before:
                    <DropdownMenu.Sub overlap gutter={8} shift={-4}>
                      <DropdownMenu.SubTrigger
                        class={cx(
                          styles().settingsSubTrigger,
                          'tsqd-settings-menu-sub-trigger',
                          'tsqd-settings-menu-sub-trigger-position',
                        )}
                      >
                        <span>Position</span>
                        <ChevronDown />
                      </DropdownMenu.SubTrigger>
                      <DropdownMenu.Portal
                        ref={(el) => setComputedVariables(el as HTMLDivElement)}
                        mount={
                          pip().pipWindow
                            ? pip().pipWindow!.document.body
                            : document.body
                        }
                      >
                        <DropdownMenu.SubContent
                          class={cx(
                            styles().settingsMenu,
                            'tsqd-settings-submenu',
                          )}
                        >
                          <DropdownMenu.RadioGroup aria-label="Position settings" value={props.localStore.position} onChange={value => setDevtoolsPosition(value as DevtoolsPosition)}>
                            <DropdownMenu.RadioItem
                              value="top"
                              role="menuitemradio"
                              class={cx(
                                styles().settingsSubButton,
                                'tsqd-settings-menu-position-btn',
                                'tsqd-settings-menu-position-btn-top',
                              )}
                            >
                              <span>Top</span>
                              <ArrowUp />
                            </DropdownMenu.RadioItem>
                            <DropdownMenu.RadioItem
                              value="bottom"
                              role="menuitemradio"
                              class={cx(
                                styles().settingsSubButton,
                                'tsqd-settings-menu-position-btn',
                                'tsqd-settings-menu-position-btn-bottom',
                              )}
                            >
                              <span>Bottom</span>
                              <ArrowDown />
                            </DropdownMenu.RadioItem>
                            <DropdownMenu.RadioItem

Review comment (suggestion):
Replaced `DropdownMenu.Item` with `DropdownMenu.Radio(Group|Item)`

These internally handle checked states - so moved the selected styles into `data-checked` instead of a separate class

Code after:
                    <DropdownMenu.Sub overlap gutter={8} shift={-4}>
                      <DropdownMenu.SubTrigger
                        class={cx(
                          styles().settingsSubTrigger,
                          'tsqd-settings-menu-sub-trigger',
                          'tsqd-settings-menu-sub-trigger-position',
                        )}
                      >
                        <span>Position</span>
                        <ChevronDown />
                      </DropdownMenu.SubTrigger>
                      <DropdownMenu.Portal
                        ref={(el) => setComputedVariables(el as HTMLDivElement)}
                        mount={
                          pip().pipWindow
                            ? pip().pipWindow!.document.body
                            : document.body
                        }
                      >
                        <DropdownMenu.SubContent
                          class={cx(
                            styles().settingsMenu,
                            'tsqd-settings-submenu',
                          )}
                        >
                          <DropdownMenu.RadioGroup
                            aria-label="Position settings"
                            value={props.localStore.position}
                            onChange={(value) =>
                              setDevtoolsPosition(value as DevtoolsPosition)
                            }
                          >
                            <DropdownMenu.RadioItem
                              value="top"
                              class={cx(
                                styles().settingsSubButton,
                                'tsqd-settings-menu-position-btn',
                                'tsqd-settings-menu-position-btn-top',
                              )}
                            >
                              <span>Top</span>
                              <ArrowUp />
                            </DropdownMenu.RadioItem>
                            <DropdownMenu.RadioItem
                              value="bottom"
                              class={cx(
                                styles().settingsSubButton,
                                'tsqd-settings-menu-position-btn',
                                'tsqd-settings-menu-position-btn-bottom',
                              )}
                            >