feat(sort-handle): hide reorder group title when no sibling groups; disable boundary items instead of hiding

[Copilot]

The sort-handle dropdown always showed the "Reorder" group label even when it was the only group, adding noise with no disambiguation value. Additionally, reorder items were hidden at boundary positions, causing the menu height to vary depending on item position.

Changes

sort-handle.tsx

• renderReorderGroup(): Only sets groupTitle when sibling groups (moveToItems or addToItems) are present — matches the Atlassian Pragmatic DnD design pattern referenced in issue discussion
• renderDropdownItem(): Accepts an optional disabled parameter
• renderTop/Up/Down/Bottom(): Always render all 4 items; disable at boundaries instead of hiding:
  • Position 1 → "Move to top" + "Move up" disabled
  • Last position → "Move down" + "Move to bottom" disabled

sort-handle.e2e.ts

• Added test: reorder group title visibility based on sibling group presence
• Added test: reorder items disabled at first/last positions, enabled in the middle

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Sort-handle menu - hide dropdown group labels when no other groups are present</issue_title>
<issue_description>monday.com sync: Esri/calcite-design-system#18048690095

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

When using an item in Field Maps Designer with a sort-handle for drag, we'd like the option to hide the dropdown group label Reorder. The dropdown labels provided are pretty explanatory: move up, move down, move to bottom, etc. that the group label is not really needed. Being able to hide the group label will also help users quickly get to their dropdown menu items.

Acceptance Criteria

Consumer of this sort-handle menu has the option to hide group label (Reorder)

Current UI:

Desired UI:

Relevant Info

No response

Which Component

sort handle

Example Use Case

No response

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps</issue_description>

<agent_instructions>Follow the contribution guidelines in CONTRIBUTING.md. </agent_instructions>

Comments on the Issue (you are @copilot in this section)

@macandcheese Could we just do this by default? Only show "Re-order" if there is another sibling group with it's own distinct header?

Here's an example of this very close by (combined with some other actions, but ... has move as well) 😆 </comment_new>
<comment_new>@driskull

Could we just do this by default? Only show "Re-order" if there is another sibling group with it's own distinct header?

Yes, we could.

I think the group header is nice for moving because otherwise each item would need to say Move to {x} and the list label (x) could be long since its a user provided string.</comment_new>
<comment_new>@macandcheese
Would we want to do what GH does and disable / grey-out "move up / move down" options that can't be performed vs. removing them? It reduces the height variance of the dropdown which currently can change each position you move to.</comment_new>
<comment_new>@driskull

Yes, disabling (move up/down) options when can't be performed makes sense to me - that way the dropdown menu has the same set of options regardless of the selected item.

I had considered this before but it does make the menu longer in many cases. Especially if an item is the only item within a group and can only be moved to another group. It would have all these options disabled

• move to top
• move up
• move down
• move to bottom</comment_new>
  <comment_new>@driskull

wouldn't we disable and hide all the reorder options and only show the move to option?
which is the opposite state of when there's no move to option.

@macandcheese @ashetland I think this is where we need design involved.

• Should we always just disable or are there use cases where we do hide?
• Do we need to show the Reorder group at all or do we only need a group for Move to?</comment_new>
  <comment_new>@ashetland
  Further user testing might be required here, but modeling this behavior after Atlassian's Pragmatic drag and drop seems like a reasonable place to start.

Hide the move to group when not needed, hide the reorder group heading, and disable reorder items as required:

When there is only a single item left in the group, disable the reorder items:

</comment_new>
<comment_new>@driskull
Sounds good. We can proceed with the above once triaged.</comment_new>

• Fixes Sort-handle menu - hide dropdown group labels when no other groups are present #11451

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[Copilot]

Pull request overview

Updates the calcite-sort-handle dropdown UX to reduce visual noise (hide the “Reorder” group header when it’s the only group) and stabilize menu height (disable boundary reorder actions instead of conditionally hiding them). Also adjusts dropdown focus behavior to avoid targeting disabled/hidden items, and includes new E2E coverage for the updated sort-handle behavior.

Changes:

• Conditionally omits the reorder group title when there are no sibling groups, and always renders the 4 reorder actions with boundary items disabled.
• Adds E2E tests for reorder group title visibility and boundary disabled states.
• Updates dropdown initial-focus logic to use traversable (non-disabled/non-hidden) items.

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated no comments.

File	Description
packages/components/src/components/sort-handle/sort-handle.tsx	Hide reorder group title when it’s the only group; render reorder actions consistently and disable at boundaries.
packages/components/src/components/sort-handle/sort-handle.e2e.ts	Adds E2E coverage for group title visibility and disabled boundary actions.
packages/components/src/components/dropdown/dropdown.tsx	Ensures initial focus targets traversable dropdown items (avoids disabled/hidden).
package-lock.json	Large lockfile churn included in the PR.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[driskull]

@copilot can you add e2e browser tests for the changes to this file?

[driskull]

@copilot can you revert the changes to the package-lock file?

[ashetland]

@driskull Do we have story coverage for this or do we need to make new ones?

[driskull]

@ashetland sort handle has stories. I think as part of our copilot instructions we should say to add relevant storybook stories to cover screenshot testing. cc @isaacbraun

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.