Carousel: Drag event based index callback

[Mitch-At-Work]

Previous Behavior

Carousel was calling the index change callback on Button and Focus events only, preventing users from receiving callback information about drag events.

New Behavior

Drag event now correctly emits a native DOM event with type 'drag', this is driven directly by Embla engine and hence is native.

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.159 MB 290.329 kB	1.16 MB 290.616 kB	1.126 kB 287 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	69.21 kB 20.174 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	220.616 kB 63.902 kB
react-components react-components: FluentProvider & webLightTheme	44.447 kB 14.59 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-timepicker-compat TimePicker	107.387 kB 35.758 kB

_{🤖 This report was generated against 8fd463bdea974f2402a05a5b621a63ec128a60cf}

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender-with-unmount	85	89	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	655	641	5000
Button	mount	308	303	5000
Field	mount	1115	1162	5000
FluentProvider	mount	710	710	5000
FluentProviderWithTheme	mount	87	95	10
FluentProviderWithTheme	virtual-rerender	39	38	10
FluentProviderWithTheme	virtual-rerender-with-unmount	85	89	10	Possible regression
MakeStyles	mount	870	843	50000
Persona	mount	1775	1764	5000
SpinButton	mount	1432	1345	5000
SwatchPicker	mount	1657	1652	5000

[layershifter]

The problem that we have there is kinda simple: Embla does not provide access to events.

IMO, it would nicer to solve it via a custom plugin:

export type PointerEventPluginOptions = {
  onSelectViaDrag: (event: PointerEvent | MouseEvent, index: number) => void;
};

export type PointerEventPlugin = CreatePluginType<{}, PointerEventPluginOptions>;

function PointerEventPlugin(options: PointerEventPluginOptions): PointerEventPlugin {
  let emblaApi: EmblaCarouselType;
  let pointerEvent: PointerEvent | MouseEvent | undefined;

  function documentDownListener(event: PointerEvent | MouseEvent) {
    const targetDocument = emblaApi.containerNode().ownerDocument;

    pointerEvent = event;

    targetDocument.removeEventListener('mousedown', documentDownListener);
    targetDocument.removeEventListener('pointerdown', documentDownListener);
  }

  function pointerUpListener() {
    const targetDocument = emblaApi.containerNode().ownerDocument;

    targetDocument.addEventListener('mousedown', documentDownListener);
    targetDocument.addEventListener('pointerdown', documentDownListener);
  }

  function selectListener() {
    if (pointerEvent) {
      const newIndex = emblaApi.selectedScrollSnap() ?? 0;

      options.onSelectViaDrag(pointerEvent, newIndex);
      pointerEvent = undefined;
    }
  }

  function init(emblaApiInstance: EmblaCarouselType, optionsHandler: OptionsHandlerType): void {
    emblaApi = emblaApiInstance;

    emblaApi.on('pointerUp', pointerUpListener);
    emblaApi.on('select', selectListener);
  }

  function destroy(): void {
    emblaApi.off('pointerUp', pointerUpListener);
    emblaApi.off('select', selectListener);
  }

  return {
    name: 'pointerEvent',
    options,
    init,
    destroy,
  };
}