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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _bindEventListener = require("bind-event-listener");
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _compiled = require("@atlaskit/primitives/compiled");
var _buttonIndicator = require("./button-indicator");
var _presentationalIndicator = require("./presentational-indicator");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 = (0, _react.useRef)(null);
  var onSelectWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)({
    fn: onSelect || _noop.default,
    action: 'selected',
    componentName: 'progressIndicator',
    packageName: packageName,
    packageVersion: packageVersion
  });
  var gap = progressIndicatorGapMap[gutter][size];
  var handleKeyDown = (0, _react.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]);
  (0, _react.useEffect)(function () {
    if (!onSelect) {
      return _noop.default;
    }
    return (0, _bindEventListener.bind)(document, {
      type: 'keydown',
      listener: handleKeyDown,
      options: {
        capture: false
      }
    });
  }, [onSelect, handleKeyDown]);
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, varDotsSize, "".concat(sizes[size], "px")), varDotsMargin, gap),
    role: onSelect && 'tablist'
  }, /*#__PURE__*/_react.default.createElement(_compiled.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.default.createElement(_buttonIndicator.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.default.createElement(_presentationalIndicator.PresentationalIndicator, {
      key: index,
      testId: indicatorTestId,
      appearance: appearance,
      isSelected: isSelected
    });
  })));
};
var _default = exports.default = ProgressDots;