@atlaskit/progress-indicator 9.0.4 → 9.1.2

package/dist/cjs/components/Dots.js

@@ -1,197 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ProgressDotsWithoutAnalytics = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _Dots = require("../styled/Dots");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.0.4";
-
-var ProgressDots = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ProgressDots, _Component);
-
-  var _super = _createSuper(ProgressDots);
-
-  function ProgressDots() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ProgressDots);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tablist", {
-      children: []
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
-      var _this$props = _this.props,
-          onSelect = _this$props.onSelect,
-          selectedIndex = _this$props.selectedIndex,
-          values = _this$props.values;
-      var indicators = Array.from(_this.tablist.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) {
-        onSelect({
-          event: event,
-          index: index
-        });
-      }
-
-      if (typeof indicators[index].focus === 'function') {
-        indicators[index].focus();
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ProgressDots, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.onSelect) {
-        document.addEventListener('keydown', this.handleKeyDown, false);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.props.onSelect) {
-        document.removeEventListener('keydown', this.handleKeyDown);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      // NOTE: `spacing` is a reserved HTML attribute and will be added to the
-      // element, replaced with `gutter`.
-      var _this$props2 = this.props,
-          appearance = _this$props2.appearance,
-          ariaControls = _this$props2.ariaControls,
-          ariaLabel = _this$props2.ariaLabel,
-          onSelect = _this$props2.onSelect,
-          selectedIndex = _this$props2.selectedIndex,
-          size = _this$props2.size,
-          gutter = _this$props2.spacing,
-          values = _this$props2.values;
-      return /*#__PURE__*/_react.default.createElement(_Dots.Container, {
-        innerRef: function innerRef(r) {
-          _this2.tablist = r;
-        },
-        role: "tablist"
-      }, values.map(function (val, index) {
-        var selected = selectedIndex === index;
-        var common = {
-          appearance: appearance,
-          key: index,
-          selected: selected,
-          size: size,
-          gutter: gutter
-        };
-        var tabId = "".concat(ariaLabel).concat(index);
-        var panelId = "".concat(ariaControls).concat(index);
-        return onSelect ? /*#__PURE__*/_react.default.createElement(_Dots.IndicatorButton, (0, _extends2.default)({}, common, {
-          "aria-controls": panelId,
-          "aria-label": tabId,
-          "aria-selected": selected,
-          id: tabId,
-          onClick: function onClick(event) {
-            return onSelect({
-              event: event,
-              index: index
-            });
-          },
-          role: "tab",
-          tabIndex: selected ? 0 : -1,
-          type: "button"
-        })) : /*#__PURE__*/_react.default.createElement(_Dots.IndicatorDiv, (0, _extends2.default)({}, common, {
-          role: "presentation"
-        }));
-      }));
-    }
-  }]);
-  return ProgressDots;
-}(_react.Component);
-
-exports.ProgressDotsWithoutAnalytics = ProgressDots;
-(0, _defineProperty2.default)(ProgressDots, "defaultProps", {
-  appearance: 'default',
-  ariaControls: 'panel',
-  ariaLabel: 'tab',
-  size: 'default',
-  spacing: 'comfortable'
-});
-var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
-
-var _default = (0, _analyticsNext.withAnalyticsContext)({
-  componentName: 'progressIndicator',
-  packageName: packageName,
-  packageVersion: packageVersion
-})((0, _analyticsNext.withAnalyticsEvents)({
-  onSelect: createAndFireEventOnAtlaskit({
-    action: 'selected',
-    actionSubject: 'progressIndicator',
-    attributes: {
-      componentName: 'progressIndicator',
-      packageName: packageName,
-      packageVersion: packageVersion
-    }
-  })
-})(ProgressDots));
-
-exports.default = _default;

package/dist/cjs/styled/Dots.js

@@ -1,174 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IndicatorDiv = exports.IndicatorButton = exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
-var _components = require("@atlaskit/theme/components");
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n          &:focus {\n            box-shadow: 0 0 0 2px ", ";\n          }\n        "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", " border: 0;\n  cursor: pointer;\n  outline: 0;\n  padding: 0;\n\n  ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", " background-color: ", ";\n  border-radius: 50%;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    margin-left: ", "px;\n    margin-right: ", "px;\n    position: relative;\n    width: ", "px;\n\n    &::before {\n      content: '';\n      display: block;\n      height: ", "px;\n      left: -", "px;\n      position: absolute;\n      top: -", "px;\n      width: ", "px;\n    }\n  "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var colorMap = {
-  default: (0, _components.themed)({
-    light: colors.N50,
-    dark: colors.DN70
-  }),
-  help: (0, _components.themed)({
-    light: colors.P75,
-    dark: colors.DN70
-  }),
-  inverted: (0, _components.themed)({
-    light: 'rgba(255, 255, 255, 0.4)',
-    dark: colors.DN300A
-  }),
-  primary: (0, _components.themed)({
-    light: colors.B75,
-    dark: colors.DN70
-  })
-};
-var selectedColorMap = {
-  default: (0, _components.themed)({
-    light: colors.N900,
-    dark: colors.DN600
-  }),
-  help: (0, _components.themed)({
-    light: colors.P400,
-    dark: colors.P300
-  }),
-  inverted: (0, _components.themed)({
-    light: colors.N0,
-    dark: colors.DN30
-  }),
-  primary: (0, _components.themed)({
-    light: colors.B400,
-    dark: colors.B100
-  })
-};
-var outlineColorMap = {
-  default: (0, _components.themed)({
-    light: colors.B75,
-    dark: colors.B200
-  }),
-  help: (0, _components.themed)({
-    light: colors.P75,
-    dark: colors.P75
-  }),
-  inverted: (0, _components.themed)({
-    light: colors.B200,
-    dark: colors.B75
-  }),
-  primary: (0, _components.themed)({
-    light: colors.B75,
-    dark: colors.B75
-  })
-};
-var sizes = {
-  small: 4,
-  default: 8,
-  large: 12
-};
-var spacingDivision = {
-  comfortable: 2,
-  cozy: 4,
-  compact: 8
-};
-
-var getDimensions = function getDimensions(_ref) {
-  var gutter = _ref.gutter,
-      size = _ref.size;
-  var val = sizes[size];
-  var margin = val / spacingDivision[gutter];
-  var hitslop = val + margin * 2;
-  return (0, _styledComponents.css)(_templateObject(), val, margin, margin, val, hitslop, margin, margin, hitslop);
-};
-
-var getColor = function getColor(_ref2) {
-  var appearance = _ref2.appearance,
-      selected = _ref2.selected;
-  return selected ? selectedColorMap[appearance] : colorMap[appearance];
-};
-
-var commonRules = (0, _styledComponents.css)(_templateObject2(), getDimensions, getColor);
-
-var Container = _styledComponents.default.div(_templateObject3());
-
-exports.Container = Container;
-
-var IndicatorButton = _styledComponents.default.button(_templateObject4(), commonRules, function (p) {
-  return p.selected ? (0, _styledComponents.css)(_templateObject5(), outlineColorMap[p.appearance]) : null;
-});
-
-exports.IndicatorButton = IndicatorButton;
-
-var IndicatorDiv = _styledComponents.default.div(_templateObject6(), commonRules);
-
-exports.IndicatorDiv = IndicatorDiv;

package/dist/es2019/components/Dots.js

@@ -1,145 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { Container, IndicatorButton, IndicatorDiv } from '../styled/Dots';
-const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "9.0.4";
-
-class ProgressDots extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "tablist", {
-      children: []
-    });
-
-    _defineProperty(this, "handleKeyDown", event => {
-      const {
-        onSelect,
-        selectedIndex,
-        values
-      } = this.props;
-      const indicators = Array.from(this.tablist.children); // bail if the target isn't an indicator
-
-      if (!indicators.includes(event.target)) {
-        return;
-      } // bail if not valid arrow key
-
-
-      const isLeft = event.key === 'ArrowLeft';
-      const isRight = event.key === 'ArrowRight';
-
-      if (!isLeft && !isRight) {
-        return;
-      } // bail if at either end of the values
-
-
-      const isAlpha = isLeft && selectedIndex === 0;
-      const isOmega = isRight && selectedIndex === values.length - 1;
-
-      if (isAlpha || isOmega) {
-        return;
-      }
-
-      const index = isLeft ? selectedIndex - 1 : selectedIndex + 1; // call the consumer's select method and focus the applicable indicator
-
-      if (onSelect) {
-        onSelect({
-          event: event,
-          index
-        });
-      }
-
-      if (typeof indicators[index].focus === 'function') {
-        indicators[index].focus();
-      }
-    });
-  }
-
-  componentDidMount() {
-    if (this.props.onSelect) {
-      document.addEventListener('keydown', this.handleKeyDown, false);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.props.onSelect) {
-      document.removeEventListener('keydown', this.handleKeyDown);
-    }
-  }
-
-  render() {
-    // NOTE: `spacing` is a reserved HTML attribute and will be added to the
-    // element, replaced with `gutter`.
-    const {
-      appearance,
-      ariaControls,
-      ariaLabel,
-      onSelect,
-      selectedIndex,
-      size,
-      spacing: gutter,
-      values
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      innerRef: r => {
-        this.tablist = r;
-      },
-      role: "tablist"
-    }, values.map((val, index) => {
-      const selected = selectedIndex === index;
-      const common = {
-        appearance: appearance,
-        key: index,
-        selected,
-        size: size,
-        gutter: gutter
-      };
-      const tabId = `${ariaLabel}${index}`;
-      const panelId = `${ariaControls}${index}`;
-      return onSelect ? /*#__PURE__*/React.createElement(IndicatorButton, _extends({}, common, {
-        "aria-controls": panelId,
-        "aria-label": tabId,
-        "aria-selected": selected,
-        id: tabId,
-        onClick: event => onSelect({
-          event,
-          index
-        }),
-        role: "tab",
-        tabIndex: selected ? 0 : -1,
-        type: "button"
-      })) : /*#__PURE__*/React.createElement(IndicatorDiv, _extends({}, common, {
-        role: "presentation"
-      }));
-    }));
-  }
-
-}
-
-_defineProperty(ProgressDots, "defaultProps", {
-  appearance: 'default',
-  ariaControls: 'panel',
-  ariaLabel: 'tab',
-  size: 'default',
-  spacing: 'comfortable'
-});
-
-export { ProgressDots as ProgressDotsWithoutAnalytics };
-const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-export default withAnalyticsContext({
-  componentName: 'progressIndicator',
-  packageName,
-  packageVersion
-})(withAnalyticsEvents({
-  onSelect: createAndFireEventOnAtlaskit({
-    action: 'selected',
-    actionSubject: 'progressIndicator',
-    attributes: {
-      componentName: 'progressIndicator',
-      packageName,
-      packageVersion
-    }
-  })
-})(ProgressDots));

package/dist/es2019/styled/Dots.js

@@ -1,122 +0,0 @@
-import styled, { css } from 'styled-components';
-import * as colors from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-const colorMap = {
-  default: themed({
-    light: colors.N50,
-    dark: colors.DN70
-  }),
-  help: themed({
-    light: colors.P75,
-    dark: colors.DN70
-  }),
-  inverted: themed({
-    light: 'rgba(255, 255, 255, 0.4)',
-    dark: colors.DN300A
-  }),
-  primary: themed({
-    light: colors.B75,
-    dark: colors.DN70
-  })
-};
-const selectedColorMap = {
-  default: themed({
-    light: colors.N900,
-    dark: colors.DN600
-  }),
-  help: themed({
-    light: colors.P400,
-    dark: colors.P300
-  }),
-  inverted: themed({
-    light: colors.N0,
-    dark: colors.DN30
-  }),
-  primary: themed({
-    light: colors.B400,
-    dark: colors.B100
-  })
-};
-const outlineColorMap = {
-  default: themed({
-    light: colors.B75,
-    dark: colors.B200
-  }),
-  help: themed({
-    light: colors.P75,
-    dark: colors.P75
-  }),
-  inverted: themed({
-    light: colors.B200,
-    dark: colors.B75
-  }),
-  primary: themed({
-    light: colors.B75,
-    dark: colors.B75
-  })
-};
-const sizes = {
-  small: 4,
-  default: 8,
-  large: 12
-};
-const spacingDivision = {
-  comfortable: 2,
-  cozy: 4,
-  compact: 8
-};
-
-const getDimensions = ({
-  gutter,
-  size
-}) => {
-  const val = sizes[size];
-  const margin = val / spacingDivision[gutter];
-  const hitslop = val + margin * 2;
-  return css`
-    height: ${val}px;
-    margin-left: ${margin}px;
-    margin-right: ${margin}px;
-    position: relative;
-    width: ${val}px;
-
-    &::before {
-      content: '';
-      display: block;
-      height: ${hitslop}px;
-      left: -${margin}px;
-      position: absolute;
-      top: -${margin}px;
-      width: ${hitslop}px;
-    }
-  `;
-};
-
-const getColor = ({
-  appearance,
-  selected
-}) => selected ? selectedColorMap[appearance] : colorMap[appearance];
-
-const commonRules = css`
-  ${getDimensions} background-color: ${getColor};
-  border-radius: 50%;
-`;
-export const Container = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-export const IndicatorButton = styled.button`
-  ${commonRules} border: 0;
-  cursor: pointer;
-  outline: 0;
-  padding: 0;
-
-  ${p => p.selected ? css`
-          &:focus {
-            box-shadow: 0 0 0 2px ${outlineColorMap[p.appearance]};
-          }
-        ` : null};
-`;
-export const IndicatorDiv = styled.div`
-  ${commonRules};
-`;