@atlaskit/progress-indicator 9.0.5 → 9.2.0

package/dist/cjs/styled/Dots.js

@@ -1,120 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-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");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 || (_templateObject = (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  "])), 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 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " background-color: ", ";\n  border-radius: 50%;\n"])), getDimensions, getColor);
-
-var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n"])));
-
-exports.Container = Container;
-
-var IndicatorButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", " border: 0;\n  cursor: pointer;\n  outline: 0;\n  padding: 0;\n\n  ", ";\n"])), commonRules, function (p) {
-  return p.selected ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n          &:focus {\n            box-shadow: 0 0 0 2px ", ";\n          }\n        "])), outlineColorMap[p.appearance]) : null;
-});
-
-exports.IndicatorButton = IndicatorButton;
-
-var IndicatorDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), 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.5";
-
-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};
-`;

package/dist/esm/components/Dots.js

@@ -1,178 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { Component } from 'react';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { Container, IndicatorButton, IndicatorDiv } from '../styled/Dots';
-var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.0.5";
-
-var ProgressDots = /*#__PURE__*/function (_Component) {
-  _inherits(ProgressDots, _Component);
-
-  var _super = _createSuper(ProgressDots);
-
-  function ProgressDots() {
-    var _this;
-
-    _classCallCheck(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));
-
-    _defineProperty(_assertThisInitialized(_this), "tablist", {
-      children: []
-    });
-
-    _defineProperty(_assertThisInitialized(_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;
-  }
-
-  _createClass(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.createElement(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.createElement(IndicatorButton, _extends({}, 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.createElement(IndicatorDiv, _extends({}, common, {
-          role: "presentation"
-        }));
-      }));
-    }
-  }]);
-
-  return ProgressDots;
-}(Component);
-
-_defineProperty(ProgressDots, "defaultProps", {
-  appearance: 'default',
-  ariaControls: 'panel',
-  ariaLabel: 'tab',
-  size: 'default',
-  spacing: 'comfortable'
-});
-
-export { ProgressDots as ProgressDotsWithoutAnalytics };
-var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-export default withAnalyticsContext({
-  componentName: 'progressIndicator',
-  packageName: packageName,
-  packageVersion: packageVersion
-})(withAnalyticsEvents({
-  onSelect: createAndFireEventOnAtlaskit({
-    action: 'selected',
-    actionSubject: 'progressIndicator',
-    attributes: {
-      componentName: 'progressIndicator',
-      packageName: packageName,
-      packageVersion: packageVersion
-    }
-  })
-})(ProgressDots));

package/dist/esm/styled/Dots.js

@@ -1,93 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-import styled, { css } from 'styled-components';
-import * as colors from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-var 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
-  })
-};
-var 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
-  })
-};
-var 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
-  })
-};
-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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  "])), 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 = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " background-color: ", ";\n  border-radius: 50%;\n"])), getDimensions, getColor);
-export var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n"])));
-export var IndicatorButton = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " border: 0;\n  cursor: pointer;\n  outline: 0;\n  padding: 0;\n\n  ", ";\n"])), commonRules, function (p) {
-  return p.selected ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          &:focus {\n            box-shadow: 0 0 0 2px ", ";\n          }\n        "])), outlineColorMap[p.appearance]) : null;
-});
-export var IndicatorDiv = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n"])), commonRules);