@atlaskit/progress-indicator 9.0.3 → 9.1.1

package/dist/esm/components/Dots.js

@@ -1,177 +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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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';
-import { name as packageName, version as packageVersion } from '../version.json';
-
-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,151 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n  ", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n          &:focus {\n            box-shadow: 0 0 0 2px ", ";\n          }\n        "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\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 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  ", " background-color: ", ";\n  border-radius: 50%;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _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  "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-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(), 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(), getDimensions, getColor);
-export var Container = styled.div(_templateObject3());
-export var IndicatorButton = styled.button(_templateObject4(), commonRules, function (p) {
-  return p.selected ? css(_templateObject5(), outlineColorMap[p.appearance]) : null;
-});
-export var IndicatorDiv = styled.div(_templateObject6(), commonRules);

package/dist/types/components/Dots.d.ts

@@ -1,51 +0,0 @@
-import React, { Component } from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-export declare type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
-export declare type Spacing = 'comfortable' | 'cozy' | 'compact';
-export declare type Size = 'small' | 'default' | 'large';
-interface Props extends WithAnalyticsEventsProps {
-    /** The color of the indicators */
-    appearance?: DotsAppearance;
-    /** The aria-controls text applied to each indicator, appended by the index */
-    ariaControls?: string;
-    /** The aria-label text applied to each indicator, appended by the index */
-    ariaLabel?: string;
-    /** Function called when an indicator is selected */
-    onSelect?: (eventData: {
-        event: React.MouseEvent<HTMLButtonElement>;
-        index: number;
-    }) => void;
-    /** Which indicator is currently selected */
-    selectedIndex: number;
-    /** Corresponds to the width & height of each indicator */
-    size?: Size;
-    /** How much of a gutter is desired between indicators */
-    spacing?: Spacing;
-    /** An array of values mapped over to create the indicators */
-    values: Array<any>;
-}
-declare class ProgressDots extends Component<Props, {}> {
-    tablist: {
-        children: HTMLElement[];
-    };
-    static defaultProps: {
-        appearance: string;
-        ariaControls: string;
-        ariaLabel: string;
-        size: string;
-        spacing: string;
-    };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    render(): JSX.Element;
-}
-export { ProgressDots as ProgressDotsWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<Props, "size" | "appearance" | "ariaControls" | "ariaLabel" | "onSelect" | "selectedIndex" | "spacing" | "values">, "onSelect" | "selectedIndex" | "values"> & Partial<Pick<Pick<Props, "size" | "appearance" | "ariaControls" | "ariaLabel" | "onSelect" | "selectedIndex" | "spacing" | "values">, "size" | "appearance" | "ariaControls" | "ariaLabel" | "spacing">> & Partial<Pick<{
-    appearance: string;
-    ariaControls: string;
-    ariaLabel: string;
-    size: string;
-    spacing: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "size" | "appearance" | "ariaControls" | "ariaLabel" | "onSelect" | "selectedIndex" | "spacing" | "values" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
-export default _default;

package/dist/types/styled/Dots.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { DotsAppearance, Size, Spacing } from '../components/Dots';
-export declare const Container: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-interface IndicatorButtonProps {
-    selected: boolean;
-    appearance: DotsAppearance;
-    gutter: Spacing;
-    size: Size;
-}
-export declare const IndicatorButton: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & IndicatorButtonProps, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & IndicatorButtonProps>;
-export declare const IndicatorDiv: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & IndicatorButtonProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & IndicatorButtonProps>;
-export {};