feat(list): support multiple selection using the shift key

[driskull]

Related Issue: #7966

Summary

• support multiple selection using the shift key
• updates calciteListItemSelect event detail to specify if multiple selection should occur by adding a selectMultiple property that is true when the shiftKey is pressed.
• stores the last clicked element to reference for selecting items in-between the next potential shift click.
• disables text selection on list content
• add e2e test

[jcfranco]

Is multiple strictly for internal purposes? If so, can we prevent multiple from being exposed in the public event type?

[driskull]

@jcfranco how would we do that? It might still be useful for public but correct its basically just for us.

[driskull]

value-list did expose this as well as shiftPressed.

calcite-design-system/packages/calcite-components/src/components/value-list-item/value-list-item.tsx

Lines 192 to 196 in 2b2506d

	@Event({ cancelable: false }) calciteListItemChange: EventEmitter<{
	item: HTMLCalciteValueListItemElement;
	value: any;
	selected: boolean;
	shiftPressed: boolean;

[benelan]

Would this do it?

@Event({ cancelable: false }) private calciteListItemSelect: EventEmitter<{ multiple: boolean }>;

---

Edit: nevermind, we want the detail to be private, not the whole event.

[driskull]

I'm ok with it being public but i'll defer to @jcfranco. Not sure how to mark an event detail as @internal

[driskull]

I can create and emit an internal event instead but then I'm not sure if its guaranteed the internal one would be handled first before updating the selected items.

[jcfranco]

I think we could hide it from the public types by doing the following:

1. Type the item's select event emitter as void.
2. Use an internal type for the detail in the event handler (looks like ListItemSelectDetail in this case).
3. Use the internal type in the list's select event handler (as it currently does)
4. Not sure, but exporting the new event might no longer be needed as it wouldn't be used in the event type.

Based on the latest changes in this PR, you would need to do something like the following:

list-item.tsx

@Event({ cancelable: false }) calciteListItemSelect: EventEmitter<void>;
// ...
const internalDetail: ListItemSelectDetail = { 
  selectMultiple: shiftKey && selectionMode === "multiple" 
};
this.calciteListItemSelect.emit(internalDetail as any);

In addition, we could rename the prop in the interface to _selectMultiple to make it clear that it is internal.

WDYT?

[driskull]

@jcfranco I updated to use a separate internal event. Can you review again?

[benelan]

👍

[benelan]

Exporting the new event detail here will fix the build error:

calcite-design-system/packages/calcite-components/src/index.ts

Lines 7 to 13 in 2b2506d

	// Event detail types need to be exported from this entry point
	// because that's where the Angular output target expects them to be.
	// For more details, see: https://github.com/Esri/calcite-design-system/pull/8177
	export { HandleChange } from "./components/handle/interfaces";
	export { HandleNudge } from "./components/handle/interfaces";
	export { ListDragDetail } from "./components/list/interfaces";
	export { DragDetail } from "./utils/sortableComponent";

[driskull]

@benelan can you review again?

[jcfranco]

🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏
🤏📝🤏🤏🤏📝📝📝📝🤏📝📝📝📝📝🤏📝🤏🤏🤏📝🤏📝🤏
🤏📝🤏🤏🤏📝🤏🤏🤏🤏🤏🤏📝🤏🤏🤏📝📝🤏📝📝🤏📝🤏
🤏📝🤏🤏🤏📝🤏📝📝🤏🤏🤏📝🤏🤏🤏📝🤏📝🤏📝🤏📝🤏
🤏📝🤏🤏🤏📝🤏🤏📝🤏🤏🤏📝🤏🤏🤏📝🤏🤏🤏📝🤏🤏🤏
🤏📝📝📝🤏📝📝📝📝🤏🤏🤏📝🤏🤏🤏📝🤏🤏🤏📝🤏📝🤏
🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏