@atlaskit/progress-indicator/dist/esm/components/progress-dots.js

A progress indicator shows the user where they are along the steps of a journey.

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { useCallback, useEffect, useRef } from 'react';
import { bind } from 'bind-event-listener';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import noop from '@atlaskit/ds-lib/noop';
import { Box, Inline } from '@atlaskit/primitives/compiled';
import { ButtonIndicator } from './button-indicator';
import { PresentationalIndicator } from './presentational-indicator';
var packageName = "@atlaskit/progress-indicator";
var packageVersion = "13.4.2";
var progressIndicatorGapMap = {
  comfortable: {
    default: 'space.100',
    large: 'space.150'
  },
  cozy: {
    default: 'space.075',
    large: 'space.100'
  },
  compact: {
    default: 'space.050',
    large: 'space.075'
  }
};
var sizes = {
  default: 8,
  large: 12
};
var varDotsSize = '--ds-dots-size';
var varDotsMargin = '--ds-dots-margin';

/**
 * __ProgressDots__
 *
 * A progress indicator shows the user where they are along the steps of a journey.
 */
var ProgressDots = function ProgressDots(_ref) {
  var _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
    _ref$ariaControls = _ref.ariaControls,
    ariaControls = _ref$ariaControls === void 0 ? 'panel' : _ref$ariaControls,
    _ref$ariaLabel = _ref.ariaLabel,
    ariaLabel = _ref$ariaLabel === void 0 ? 'tab' : _ref$ariaLabel,
    getAriaLabel = _ref.getAriaLabel,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'default' : _ref$size,
    _ref$spacing = _ref.spacing,
    gutter = _ref$spacing === void 0 ? 'comfortable' : _ref$spacing,
    selectedIndex = _ref.selectedIndex,
    testId = _ref.testId,
    values = _ref.values,
    onSelect = _ref.onSelect;
  var tablistRef = useRef(null);
  var onSelectWithAnalytics = usePlatformLeafEventHandler({
    fn: onSelect || noop,
    action: 'selected',
    componentName: 'progressIndicator',
    packageName: packageName,
    packageVersion: packageVersion
  });
  var gap = progressIndicatorGapMap[gutter][size];
  var handleKeyDown = useCallback(function (event) {
    var indicators = Array.from(tablistRef.current.children);

    // bail if the target isn't an indicator
    if (!indicators.includes(event.target)) {
      return;
    }

    // bail if not valid arrow key
    var isLeft = event.key === 'ArrowLeft';
    var isRight = event.key === 'ArrowRight';
    if (!isLeft && !isRight) {
      return;
    }

    // bail if at either end of the values
    var isAlpha = isLeft && selectedIndex === 0;
    var isOmega = isRight && selectedIndex === values.length - 1;
    if (isAlpha || isOmega) {
      return;
    }
    var index = isLeft ? selectedIndex - 1 : selectedIndex + 1;

    // call the consumer's select method and focus the applicable indicator
    if (onSelect) {
      onSelectWithAnalytics({
        event: event,
        index: index
      });
    }
    if (typeof indicators[index].focus === 'function') {
      indicators[index].focus();
    }
  }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
  useEffect(function () {
    if (!onSelect) {
      return noop;
    }
    return bind(document, {
      type: 'keydown',
      listener: handleKeyDown,
      options: {
        capture: false
      }
    });
  }, [onSelect, handleKeyDown]);
  return /*#__PURE__*/React.createElement(Box, {
    style: _defineProperty(_defineProperty({}, varDotsSize, "".concat(sizes[size], "px")), varDotsMargin, gap),
    role: onSelect && 'tablist'
  }, /*#__PURE__*/React.createElement(Inline, {
    testId: testId,
    ref: function ref(r) {
      tablistRef.current = r;
    },
    alignInline: "center",
    space: gap
  }, values.map(function (_, index) {
    var isSelected = selectedIndex === index;
    var tabId = "".concat(ariaLabel).concat(index);
    var panelId = "".concat(ariaControls).concat(index);
    var label = getAriaLabel ? getAriaLabel(index) : tabId;
    var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
    return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
      key: index,
      testId: indicatorTestId,
      appearance: appearance,
      isSelected: isSelected,
      tabId: tabId,
      panelId: panelId,
      label: label,
      onClick: function onClick(event) {
        return onSelectWithAnalytics({
          event: event,
          index: index
        });
      }
    }) : /*#__PURE__*/React.createElement(PresentationalIndicator, {
      key: index,
      testId: indicatorTestId,
      appearance: appearance,
      isSelected: isSelected
    });
  })));
};
export default ProgressDots;