refactor(slide-carousel): migrate SlideCarousel from Flow to TypeScript

src/components/slide-carousel/CarouselHeader.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export interface CarouselHeaderProps {
+    /** Title displayed above the carousel */
+    title: string;
+}
+
+const CarouselHeader = ({ title }: CarouselHeaderProps) => (
+    <div className="slide-carousel-header">
+        <h3 className="slide-carousel-title">{title}</h3>
+    </div>
+);
+
+export default CarouselHeader;

src/components/slide-carousel/Slide.tsx

@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+export interface SlideProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Content displayed within the slide */
+    children?: React.ReactNode;
+    /** Custom class name for the slide */
+    className?: string;
+}
+
+const Slide = ({ children, className, ...rest }: SlideProps) => (
+    <div className={classNames('slide-content', className)} {...rest}>
+        {children}
+    </div>
+);
+
+export default Slide;

src/components/slide-carousel/SlideButton.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { ButtonType } from '../button';
+import PlainButton, { type PlainButtonProps } from '../plain-button';
+
+export interface SlideButtonProps extends Omit<PlainButtonProps, 'getDOMRef'> {
+    /** Ref for the underlying button element */
+    buttonRef?: React.LegacyRef<HTMLButtonElement>;
+    /** Whether the button represents the selected slide */
+    isSelected?: boolean;
+    /** Handler invoked when the button is clicked */
+    onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+}
+
+const SlideButton = ({ buttonRef, onClick, isSelected = false, ...rest }: SlideButtonProps) => (
+    <PlainButton
+        aria-selected={isSelected}
+        className={`slide-selector ${isSelected ? 'is-selected' : ''}`}
+        getDOMRef={buttonRef}
+        onClick={onClick}
+        role="tab"
+        type={ButtonType.BUTTON}
+        {...rest}
+    />
+);
+
+export default SlideButton;

src/components/slide-carousel/SlideCarousel.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import uniqueId from 'lodash/uniqueId';
+
+import SlideCarouselPrimitive from './SlideCarouselPrimitive';
+
+import './SlideCarousel.scss';
+
+export interface SlideCarouselProps {
+    /** Slides displayed by the carousel */
+    children?: React.ReactNode;
+    /** Custom class name for the carousel */
+    className?: string;
+    /** Used as the value for the content area's style height property */
+    contentHeight?: string;
+    /** Index selected when the carousel is initialized */
+    initialIndex: number;
+    /** Title displayed above the carousel */
+    title?: string;
+}
+
+interface SlideCarouselState {
+    selectedIndex: number;
+}
+
+class SlideCarousel extends React.Component<SlideCarouselProps, SlideCarouselState> {
+    static defaultProps = {
+        className: '',
+        initialIndex: 0,
+    };
+
+    constructor(props: SlideCarouselProps) {
+        super(props);
+
+        this.id = uniqueId('slidecarousel');
+
+        this.state = {
+            selectedIndex: props.initialIndex || 0,
+        };
+    }
+
+    /*
+     * If the selected index in the state has somehow gotten set to an
+     * out of bounds value (either because we were passed a bad value,
+     * or the number of children has reduced), compute a new selected
+     * index which is a floored value between 0 <= index < num children
+     */
+    getBoundedSelectedIndex() {
+        const { children } = this.props;
+        const { selectedIndex } = this.state;
+
+        const lastChildIndex = Math.max(React.Children.count(children) - 1, 0);
+        const boundedSelectedIndex = Math.max(selectedIndex || 0, 0);
+
+        return boundedSelectedIndex > lastChildIndex ? lastChildIndex : Math.floor(boundedSelectedIndex);
+    }
+
+    setSelectedIndex = (index: number) => {
+        this.setState({ selectedIndex: index });
+    };
+
+    id: string;
+
+    render() {
+        const { children, className, contentHeight, title } = this.props;
+        const selectedIndex = this.getBoundedSelectedIndex();
+
+        return (
+            <SlideCarouselPrimitive
+                className={className}
+                contentHeight={contentHeight}
+                idPrefix={this.id}
+                onSelection={this.setSelectedIndex}
+                selectedIndex={selectedIndex}
+                title={title}
+            >
+                {children}
+            </SlideCarouselPrimitive>
+        );
+    }
+}
+
+export default SlideCarousel;

src/components/slide-carousel/SlideCarouselPrimitive.tsx

@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import noop from 'lodash/noop';
+
+import CarouselHeader from './CarouselHeader';
+import SlideNavigator from './SlideNavigator';
+import SlidePanels from './SlidePanels';
+
+export interface SlideCarouselPrimitiveProps {
+    /** Slides displayed by the carousel */
+    children?: React.ReactNode;
+    /** Custom class name for the carousel */
+    className?: string;
+    /** The constant value to use for the content area's style height property */
+    contentHeight?: string;
+    /** Prefix used to create unique button and panel IDs */
+    idPrefix?: string;
+    /** Handler invoked with the index of the selected slide */
+    onSelection: (index: number) => void;
+    /** Index of the selected slide */
+    selectedIndex: number;
+    /** Title displayed above the carousel */
+    title?: string;
+}
+
+const SlideCarouselPrimitive = ({
+    children,
+    className = '',
+    contentHeight,
+    idPrefix = '',
+    onSelection = noop,
+    selectedIndex,
+    title,
+}: SlideCarouselPrimitiveProps) => {
+    const buttonIdGenerator = (value: number) => `${idPrefix && `${idPrefix}-`}selector-${value}`;
+    const panelIdGenerator = (value: number) => `${idPrefix && `${idPrefix}-`}slide-panel-${value}`;
+    return (
+        <div className={classNames('slide-carousel', className)}>
+            {title && <CarouselHeader title={title} />}
+            <SlidePanels
+                getPanelIdFromValue={panelIdGenerator}
+                onSelection={onSelection}
+                selectedIndex={selectedIndex}
+                style={{ height: contentHeight }}
+            >
+                {children}
+            </SlidePanels>
+            <SlideNavigator
+                getButtonIdFromValue={buttonIdGenerator}
+                getPanelIdFromValue={panelIdGenerator}
+                numOptions={React.Children.count(children)}
+                onSelection={onSelection}
+                selectedIndex={selectedIndex}
+            />
+        </div>
+    );
+};
+
+SlideCarouselPrimitive.displayName = 'SlideCarouselPrimitive';
+
+export default SlideCarouselPrimitive;

src/components/slide-carousel/SlideNavigator.tsx

@@ -0,0 +1,86 @@
+import range from 'lodash/range';
+import * as React from 'react';
+
+import SlideButton from './SlideButton';
+
+export interface SlideNavigatorProps {
+    /** Pure function that returns a button ID unique to the given index */
+    getButtonIdFromValue: (index: number) => string;
+    /** Pure function that returns a panel ID unique to the given index */
+    getPanelIdFromValue: (index: number) => string;
+    /** The number of slides. Each is associated to an index, starting from 0 */
+    numOptions: number;
+    /** Handler invoked with the index of the selected slide */
+    onSelection: (index: number) => void;
+    /** Index of the selected slide */
+    selectedIndex: number;
+}
+
+class SlideNavigator extends React.Component<SlideNavigatorProps> {
+    buttonElements: HTMLButtonElement[] = [];
+
+    focusOnButtonElement = (index: number) => {
+        if (index + 1 > this.buttonElements.length || index < 0) {
+            return;
+        }
+
+        this.buttonElements[index].focus();
+    };
+
+    handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+        const { numOptions, selectedIndex } = this.props;
+
+        let nextIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                nextIndex = (selectedIndex + 1) % numOptions;
+                break;
+
+            case 'ArrowLeft':
+                nextIndex = (selectedIndex - 1 + numOptions) % numOptions;
+                break;
+
+            default:
+                return;
+        }
+
+        this.handleSelection(nextIndex);
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    handleSelection = (index: number) => {
+        this.focusOnButtonElement(index);
+        this.props.onSelection(index);
+    };
+
+    render() {
+        const { getButtonIdFromValue, getPanelIdFromValue, numOptions, onSelection, selectedIndex } = this.props;
+
+        return (
+            <nav
+                className="slide-navigator"
+                /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+                onKeyDown={this.handleKeyDown}
+                role="tablist"
+            >
+                {range(numOptions).map(i => (
+                    <SlideButton
+                        key={i}
+                        aria-controls={getPanelIdFromValue(i)}
+                        aria-label={`slide${i}`}
+                        buttonRef={buttonEl => {
+                            this.buttonElements[i] = buttonEl;
+                        }}
+                        id={getButtonIdFromValue(i)}
+                        isSelected={i === selectedIndex}
+                        onClick={() => onSelection(i)}
+                        tabIndex={(i === selectedIndex ? '0' : '-1') as unknown as number}
+                    />
+                ))}
+            </nav>
+        );
+    }
+}
+
+export default SlideNavigator;

src/components/slide-carousel/SlidePanels.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+
+export interface SlidePanelsProps {
+    /** Slides rendered within the panels */
+    children?: React.ReactNode;
+    /** Pure function that returns a panel ID unique to the given index */
+    getPanelIdFromValue: (index: number) => string;
+    /** Handler invoked with the index of the selected slide */
+    onSelection?: (index: number) => void;
+    /** Index of the selected slide */
+    selectedIndex: number;
+    /** Inline styles applied to the panels container */
+    style?: React.CSSProperties;
+}
+
+class SlidePanels extends React.Component<SlidePanelsProps> {
+    static displayName = 'SlidePanels';
+
+    containerEl: HTMLDivElement | null = null;
+
+    focusOnContainerElement = () => {
+        if (this.containerEl) {
+            this.containerEl.focus();
+        }
+    };
+
+    handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const { children, selectedIndex } = this.props;
+
+        const numOptions = React.Children.count(children);
+
+        let nextIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                nextIndex = (selectedIndex + 1) % numOptions;
+                break;
+
+            case 'ArrowLeft':
+                nextIndex = (selectedIndex - 1 + numOptions) % numOptions;
+                break;
+
+            default:
+                break;
+        }
+
+        if (nextIndex !== null) {
+            this.handleSelection(nextIndex);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+
+    handleSelection = (index: number) => {
+        const { onSelection } = this.props;
+        this.focusOnContainerElement();
+        if (onSelection) {
+            onSelection(index);
+        }
+    };
+
+    render() {
+        const { getPanelIdFromValue, children, selectedIndex, style } = this.props;
+
+        return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            <div
+                ref={containerEl => {
+                    this.containerEl = containerEl;
+                }}
+                className="slide-panels"
+                onKeyDown={this.handleKeyDown}
+                style={style}
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex={'0' as unknown as number}
+            >
+                {React.Children.map(children, (child, i) => {
+                    const isSelected = i === selectedIndex;
+                    return (
+                        <div
+                            key={i}
+                            aria-hidden={!isSelected}
+                            className="slide-panel"
+                            id={getPanelIdFromValue(i)}
+                            role="tabpanel"
+                        >
+                            {child}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+}
+
+export default SlidePanels;