@storybook/addon-interactions 7.0.0-alpha.0 → 7.0.0-alpha.3

package/dist/cjs/Panel.js

@@ -1,50 +1,10 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.array.from.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Panel = exports.AddonPanelPure = void 0;
 
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.map.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.object.assign.js");
-
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.split.js");
-
-require("core-js/modules/es.regexp.to-string.js");
-
 var _global = _interopRequireDefault(require("global"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -67,36 +27,20 @@ var _Subnav = require("./components/Subnav/Subnav");
 
 var _Interaction = require("./components/Interaction/Interaction");
 
-var _excluded = ["calls", "controls", "controlStates", "interactions", "fileName", "hasException", "isPlaying", "onScrollToEnd", "endRef", "isRerunAnimating", "setIsRerunAnimating"],
-    _excluded2 = ["status"];
+const _excluded = ["calls", "controls", "controlStates", "interactions", "fileName", "hasException", "isPlaying", "pausedAt", "onScrollToEnd", "endRef", "isRerunAnimating", "setIsRerunAnimating"],
+      _excluded2 = ["status"];
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+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; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var INITIAL_CONTROL_STATES = {
+const INITIAL_CONTROL_STATES = {
   debugger: false,
   start: false,
   back: false,
@@ -104,31 +48,34 @@ var INITIAL_CONTROL_STATES = {
   next: false,
   end: false
 };
-var TabIcon = (0, _theming.styled)(_StatusIcon.StatusIcon)({
+const TabIcon = (0, _theming.styled)(_StatusIcon.StatusIcon)({
   marginLeft: 5
 });
 
-var TabStatus = function TabStatus(_ref) {
-  var children = _ref.children;
-
-  var container = _global.default.document.getElementById('tabbutton-interactions');
+const TabStatus = ({
+  children
+}) => {
+  const container = _global.default.document.getElementById('tabbutton-interactions');
 
   return container && /*#__PURE__*/_reactDom.default.createPortal(children, container);
 };
 
-var AddonPanelPure = /*#__PURE__*/React.memo(function (_ref2) {
-  var calls = _ref2.calls,
-      controls = _ref2.controls,
-      controlStates = _ref2.controlStates,
-      interactions = _ref2.interactions,
-      fileName = _ref2.fileName,
-      hasException = _ref2.hasException,
-      isPlaying = _ref2.isPlaying,
-      onScrollToEnd = _ref2.onScrollToEnd,
-      endRef = _ref2.endRef,
-      isRerunAnimating = _ref2.isRerunAnimating,
-      setIsRerunAnimating = _ref2.setIsRerunAnimating,
-      panelProps = _objectWithoutProperties(_ref2, _excluded);
+const AddonPanelPure = /*#__PURE__*/React.memo(_ref => {
+  let {
+    calls,
+    controls,
+    controlStates,
+    interactions,
+    fileName,
+    hasException,
+    isPlaying,
+    pausedAt,
+    onScrollToEnd,
+    endRef,
+    isRerunAnimating,
+    setIsRerunAnimating
+  } = _ref,
+      panelProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(_components.AddonPanel, panelProps, controlStates.debugger && interactions.length > 0 && /*#__PURE__*/React.createElement(_Subnav.Subnav, {
     controls: controls,
@@ -139,15 +86,17 @@ var AddonPanelPure = /*#__PURE__*/React.memo(function (_ref2) {
     onScrollToEnd: onScrollToEnd,
     isRerunAnimating: isRerunAnimating,
     setIsRerunAnimating: setIsRerunAnimating
-  }), interactions.map(function (call) {
-    return /*#__PURE__*/React.createElement(_Interaction.Interaction, {
-      key: call.id,
-      call: call,
-      callsById: calls,
-      controls: controls,
-      controlStates: controlStates
-    });
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", null, interactions.map(call => /*#__PURE__*/React.createElement(_Interaction.Interaction, {
+    key: call.id,
+    call: call,
+    callsById: calls,
+    controls: controls,
+    controlStates: controlStates,
+    childCallIds: call.childCallIds,
+    isCollapsed: call.isCollapsed,
+    toggleCollapsed: call.toggleCollapsed,
+    pausedAt: pausedAt
+  }))), /*#__PURE__*/React.createElement("div", {
     ref: endRef
   }), !isPlaying && interactions.length === 0 && /*#__PURE__*/React.createElement(_components.Placeholder, null, "No interactions found", /*#__PURE__*/React.createElement(_components.Link, {
     href: "https://github.com/storybookjs/storybook/blob/next/addons/interactions/README.md",
@@ -157,143 +106,110 @@ var AddonPanelPure = /*#__PURE__*/React.memo(function (_ref2) {
 });
 exports.AddonPanelPure = AddonPanelPure;
 
-var Panel = function Panel(props) {
-  var _useChannel;
-
-  var _React$useState = React.useState(),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      storyId = _React$useState2[0],
-      setStoryId = _React$useState2[1];
-
-  var _React$useState3 = React.useState(INITIAL_CONTROL_STATES),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      controlStates = _React$useState4[0],
-      setControlStates = _React$useState4[1];
-
-  var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isPlaying = _React$useState6[0],
-      setPlaying = _React$useState6[1];
-
-  var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      isRerunAnimating = _React$useState8[0],
-      setIsRerunAnimating = _React$useState8[1];
+const Panel = props => {
+  const [storyId, setStoryId] = React.useState();
+  const [controlStates, setControlStates] = React.useState(INITIAL_CONTROL_STATES);
+  const [pausedAt, setPausedAt] = React.useState();
+  const [isPlaying, setPlaying] = React.useState(false);
+  const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
+  const [scrollTarget, setScrollTarget] = React.useState();
+  const [collapsed, setCollapsed] = React.useState(new Set()); // Calls are tracked in a ref so we don't needlessly rerender.
 
-  var _React$useState9 = React.useState(),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      scrollTarget = _React$useState10[0],
-      setScrollTarget = _React$useState10[1]; // Calls are tracked in a ref so we don't needlessly rerender.
+  const calls = React.useRef(new Map());
 
-
-  var calls = React.useRef(new Map());
-
-  var setCall = function setCall(_ref3) {
-    var status = _ref3.status,
-        call = _objectWithoutProperties(_ref3, _excluded2);
+  const setCall = _ref2 => {
+    let call = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
     return calls.current.set(call.id, call);
   };
 
-  var _React$useState11 = React.useState([]),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      log = _React$useState12[0],
-      setLog = _React$useState12[1];
-
-  var interactions = log.map(function (_ref4) {
-    var callId = _ref4.callId,
-        status = _ref4.status;
-    return Object.assign({}, calls.current.get(callId), {
-      status: status
-    });
-  });
-  var endRef = React.useRef();
-  React.useEffect(function () {
-    var observer;
+  const [log, setLog] = React.useState([]);
+  const childCallMap = new Map();
+  const interactions = log.filter(call => {
+    if (!call.parentId) return true;
+    childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
+    return !collapsed.has(call.parentId);
+  }).map(({
+    callId,
+    status
+  }) => Object.assign({}, calls.current.get(callId), {
+    status,
+    childCallIds: childCallMap.get(callId),
+    isCollapsed: collapsed.has(callId),
+    toggleCollapsed: () => setCollapsed(ids => {
+      if (ids.has(callId)) ids.delete(callId);else ids.add(callId);
+      return new Set(ids);
+    })
+  }));
+  const endRef = React.useRef();
+  React.useEffect(() => {
+    let observer;
 
     if (_global.default.window.IntersectionObserver) {
-      observer = new _global.default.window.IntersectionObserver(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 1),
-            end = _ref6[0];
-
-        return setScrollTarget(end.isIntersecting ? undefined : end.target);
-      }, {
+      observer = new _global.default.window.IntersectionObserver(([end]) => setScrollTarget(end.isIntersecting ? undefined : end.target), {
         root: _global.default.window.document.querySelector('#panel-tab-content')
       });
       if (endRef.current) observer.observe(endRef.current);
     }
 
-    return function () {
+    return () => {
       var _observer;
 
       return (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
     };
   }, []);
-  var emit = (0, _api.useChannel)((_useChannel = {}, _defineProperty(_useChannel, _instrumenter.EVENTS.CALL, setCall), _defineProperty(_useChannel, _instrumenter.EVENTS.SYNC, function (payload) {
-    setControlStates(payload.controlStates);
-    setLog(payload.logItems);
-  }), _defineProperty(_useChannel, _coreEvents.STORY_RENDER_PHASE_CHANGED, function (event) {
-    setStoryId(event.storyId);
-    setPlaying(event.newPhase === 'playing');
-  }), _useChannel), []);
-  var controls = React.useMemo(function () {
-    return {
-      start: function start() {
-        return emit(_instrumenter.EVENTS.START, {
-          storyId: storyId
-        });
-      },
-      back: function back() {
-        return emit(_instrumenter.EVENTS.BACK, {
-          storyId: storyId
-        });
-      },
-      goto: function goto(callId) {
-        return emit(_instrumenter.EVENTS.GOTO, {
-          storyId: storyId,
-          callId: callId
-        });
-      },
-      next: function next() {
-        return emit(_instrumenter.EVENTS.NEXT, {
-          storyId: storyId
-        });
-      },
-      end: function end() {
-        return emit(_instrumenter.EVENTS.END, {
-          storyId: storyId
-        });
-      },
-      rerun: function rerun() {
-        setIsRerunAnimating(true);
-        emit(_coreEvents.FORCE_REMOUNT, {
-          storyId: storyId
-        });
-      }
-    };
-  }, [storyId]);
-  var storyFilePath = (0, _api.useParameter)('fileName', '');
-
-  var _storyFilePath$toStri = storyFilePath.toString().split('/').slice(-1),
-      _storyFilePath$toStri2 = _slicedToArray(_storyFilePath$toStri, 1),
-      fileName = _storyFilePath$toStri2[0];
-
-  var scrollToTarget = function scrollToTarget() {
-    return scrollTarget === null || scrollTarget === void 0 ? void 0 : scrollTarget.scrollIntoView({
-      behavior: 'smooth',
-      block: 'end'
-    });
-  };
+  const emit = (0, _api.useChannel)({
+    [_instrumenter.EVENTS.CALL]: setCall,
+    [_instrumenter.EVENTS.SYNC]: payload => {
+      setControlStates(payload.controlStates);
+      setLog(payload.logItems);
+      setPausedAt(payload.pausedAt);
+    },
+    [_coreEvents.STORY_RENDER_PHASE_CHANGED]: event => {
+      setStoryId(event.storyId);
+      setPlaying(event.newPhase === 'playing');
+      setPausedAt(undefined);
+    }
+  }, []);
+  const controls = React.useMemo(() => ({
+    start: () => emit(_instrumenter.EVENTS.START, {
+      storyId
+    }),
+    back: () => emit(_instrumenter.EVENTS.BACK, {
+      storyId
+    }),
+    goto: callId => emit(_instrumenter.EVENTS.GOTO, {
+      storyId,
+      callId
+    }),
+    next: () => emit(_instrumenter.EVENTS.NEXT, {
+      storyId
+    }),
+    end: () => emit(_instrumenter.EVENTS.END, {
+      storyId
+    }),
+    rerun: () => {
+      setIsRerunAnimating(true);
+      emit(_coreEvents.FORCE_REMOUNT, {
+        storyId
+      });
+    }
+  }), [storyId]);
+  const storyFilePath = (0, _api.useParameter)('fileName', '');
+  const [fileName] = storyFilePath.toString().split('/').slice(-1);
 
-  var showStatus = log.length > 0 && !isPlaying;
-  var hasException = log.some(function (item) {
-    return item.status === _instrumenter.CallStates.ERROR;
+  const scrollToTarget = () => scrollTarget === null || scrollTarget === void 0 ? void 0 : scrollTarget.scrollIntoView({
+    behavior: 'smooth',
+    block: 'end'
   });
+
+  const showStatus = log.length > 0 && !isPlaying;
+  const hasException = log.some(item => item.status === _instrumenter.CallStates.ERROR);
   return /*#__PURE__*/React.createElement(React.Fragment, {
     key: "interactions"
   }, /*#__PURE__*/React.createElement(TabStatus, null, showStatus && (hasException ? /*#__PURE__*/React.createElement(TabIcon, {
     status: _instrumenter.CallStates.ERROR
-  }) : " (".concat(interactions.length, ")"))), /*#__PURE__*/React.createElement(AddonPanelPure, _extends({
+  }) : ` (${interactions.length})`)), /*#__PURE__*/React.createElement(AddonPanelPure, _extends({
     calls: calls.current,
     controls: controls,
     controlStates: controlStates,
@@ -301,6 +217,7 @@ var Panel = function Panel(props) {
     fileName: fileName,
     hasException: hasException,
     isPlaying: isPlaying,
+    pausedAt: pausedAt,
     endRef: endRef,
     onScrollToEnd: scrollTarget && scrollToTarget,
     isRerunAnimating: isRerunAnimating,

package/dist/cjs/Panel.stories.js

@@ -5,18 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.WithDebuggingDisabled = exports.Playing = exports.Paused = exports.Passing = exports.NoInteractions = exports.Failed = void 0;
 
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.map.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.object.assign.js");
-
 var _react = _interopRequireDefault(require("react"));
 
 var _addonActions = require("@storybook/addon-actions");
@@ -33,37 +21,35 @@ var _Subnav = _interopRequireDefault(require("./components/Subnav/Subnav.stories
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var StyledWrapper = _theming.styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    backgroundColor: theme.background.content,
-    color: theme.color.defaultText,
-    display: 'block',
-    height: '100%',
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    overflow: 'auto'
-  };
-});
-
+const StyledWrapper = _theming.styled.div(({
+  theme
+}) => ({
+  backgroundColor: theme.background.content,
+  color: theme.color.defaultText,
+  display: 'block',
+  height: '100%',
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  overflow: 'auto'
+}));
+
+const interactions = (0, _mocks.getInteractions)(_instrumenter.CallStates.DONE);
 var _default = {
   title: 'Addons/Interactions/Panel',
   component: _Panel.AddonPanelPure,
-  decorators: [function (Story) {
-    return /*#__PURE__*/_react.default.createElement(StyledWrapper, {
-      id: "panel-tab-content"
-    }, /*#__PURE__*/_react.default.createElement(Story, null));
-  }],
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(StyledWrapper, {
+    id: "panel-tab-content"
+  }, /*#__PURE__*/_react.default.createElement(Story, null))],
   parameters: {
     layout: 'fullscreen'
   },
   args: {
-    calls: new Map(),
+    calls: new Map((0, _mocks.getCalls)(_instrumenter.CallStates.DONE).map(call => [call.id, call])),
     controls: _Subnav.default.args.controls,
     controlStates: _Subnav.default.args.controlStates,
-    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.DONE)],
+    interactions,
     fileName: 'addon-interactions.stories.tsx',
     hasException: false,
     isPlaying: false,
@@ -74,16 +60,16 @@ var _default = {
   }
 };
 exports.default = _default;
-var Passing = {
+const Passing = {
   args: {
-    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.DONE)]
+    interactions: (0, _mocks.getInteractions)(_instrumenter.CallStates.DONE)
   }
 };
 exports.Passing = Passing;
-var Paused = {
+const Paused = {
   args: {
     isPlaying: true,
-    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.WAITING)],
+    interactions: (0, _mocks.getInteractions)(_instrumenter.CallStates.WAITING),
     controlStates: {
       debugger: true,
       start: false,
@@ -91,25 +77,26 @@ var Paused = {
       goto: true,
       next: true,
       end: true
-    }
+    },
+    pausedAt: interactions[interactions.length - 1].id
   }
 };
 exports.Paused = Paused;
-var Playing = {
+const Playing = {
   args: {
     isPlaying: true,
-    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.ACTIVE)]
+    interactions: (0, _mocks.getInteractions)(_instrumenter.CallStates.ACTIVE)
   }
 };
 exports.Playing = Playing;
-var Failed = {
+const Failed = {
   args: {
     hasException: true,
-    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.ERROR)]
+    interactions: (0, _mocks.getInteractions)(_instrumenter.CallStates.ERROR)
   }
 };
 exports.Failed = Failed;
-var WithDebuggingDisabled = {
+const WithDebuggingDisabled = {
   args: {
     controlStates: Object.assign({}, _Subnav.default.args.controlStates, {
       debugger: false
@@ -117,7 +104,7 @@ var WithDebuggingDisabled = {
   }
 };
 exports.WithDebuggingDisabled = WithDebuggingDisabled;
-var NoInteractions = {
+const NoInteractions = {
   args: {
     interactions: []
   }