@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/PagerView/PagerView.js

@@ -0,0 +1,209 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { Children, createContext, useContext, useLayoutEffect, useRef } from 'react';
+import Spring from 'tiny-spring';
+import styler from 'stylefire';
+import { tabbable } from 'tabbable';
+import { clamp } from '@popmotion/popcorn';
+import GridView from '../GridView';
+import StackView from '../StackView';
+import { useMeasure } from '../hooks';
+import { range } from '../utils';
+
+function getRawTrackValue(_ref) {
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 1 : _ref$direction,
+      _ref$multiplier = _ref.multiplier,
+      multiplier = _ref$multiplier === void 0 ? null : _ref$multiplier,
+      _ref$spacing = _ref.spacing,
+      spacing = _ref$spacing === void 0 ? 0 : _ref$spacing,
+      _ref$viewsToShow = _ref.viewsToShow,
+      viewsToShow = _ref$viewsToShow === void 0 ? 1 : _ref$viewsToShow;
+  spacing *= 8;
+  var viewSize = 100 / viewsToShow * direction;
+  var spacingSize = (spacing - spacing / viewsToShow) * direction;
+
+  if (multiplier !== null) {
+    viewSize *= multiplier;
+    spacingSize = spacingSize * multiplier - spacing * direction * multiplier;
+  }
+
+  if (viewsToShow === 1 && spacing === 0) {
+    spacingSize = 0;
+  }
+
+  return {
+    viewSize: viewSize,
+    spacingSize: spacingSize
+  };
+}
+
+function getTrackValue(_ref2) {
+  var viewSize = _ref2.viewSize,
+      spacingSize = _ref2.spacingSize;
+  return "calc(" + viewSize + "% - " + spacingSize + "px)";
+}
+
+function parseTrackValue(value) {
+  return parseFloat(value.includes('calc') ? value.split('(')[1].split('%')[0] : value);
+}
+
+var PageViewContext = /*#__PURE__*/createContext({});
+
+function PagerView(props) {
+  var _trackProps;
+
+  var _props$axis = props.axis,
+      axis = _props$axis === void 0 ? 'horizontal' : _props$axis,
+      activeViewIndex = props.activeViewIndex,
+      _props$viewsToShow = props.viewsToShow,
+      viewsToShow = _props$viewsToShow === void 0 ? 1 : _props$viewsToShow,
+      _props$viewsToMove = props.viewsToMove,
+      viewsToMove = _props$viewsToMove === void 0 ? 1 : _props$viewsToMove,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? 0 : _props$spacing,
+      _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+      children = props.children,
+      restProps = _objectWithoutPropertiesLoose(props, ["axis", "activeViewIndex", "viewsToShow", "viewsToMove", "spacing", "autoFocus", "children"]);
+
+  var isHorizontal = axis === 'horizontal';
+  var childCount = Children.count(children);
+  var maxActiveIndex = childCount - viewsToShow;
+  var clampedIndex = clamp(0, maxActiveIndex, activeViewIndex * viewsToMove);
+  var visibleIndexes = range(0, viewsToShow).map(function (index) {
+    return clampedIndex + index;
+  });
+  var crossDimension = axis === 'horizontal' ? 'height' : 'width';
+  var frameRef = useRef();
+  var frameStyler = useRef();
+
+  var frameProps = _objectSpread({
+    innerRef: frameRef,
+    overflow: 'hidden'
+  }, restProps);
+
+  var trackRef = useRef();
+  var trackStyler = useRef();
+  var trackProps = (_trackProps = {
+    innerRef: trackRef,
+    alignment: isHorizontal ? 'start' : 'fill',
+    autoFlow: isHorizontal ? 'column' : 'row',
+    spacing: spacing
+  }, _trackProps[isHorizontal ? 'gridAutoColumns' : 'gridAutoRows'] = getTrackValue(getRawTrackValue({
+    spacing: spacing,
+    viewsToShow: viewsToShow
+  })), _trackProps);
+
+  var _useMeasure = useMeasure(),
+      useMeasureRef = _useMeasure[0],
+      useMeasureEffect = _useMeasure[1];
+
+  useMeasureEffect(function (viewNodes) {
+    var viewMeasurements = viewNodes.map(function (node) {
+      return node.getBoundingClientRect();
+    });
+    var nextFrameSize = Math.max.apply(Math, visibleIndexes.map(function (index) {
+      var measurements = viewMeasurements[index];
+      return measurements ? measurements[crossDimension] : -1;
+    }));
+
+    if (frameStyler.current) {
+      var spring = Spring(frameStyler.current.get(crossDimension), {
+        stiffness: 500,
+        damping: 50
+      });
+      spring.onUpdate(function (value) {
+        return frameStyler.current.set(crossDimension, value);
+      });
+      spring.transitionTo(nextFrameSize);
+      return function () {
+        return spring.destroy();
+      };
+    } else {
+      frameStyler.current = styler(frameRef.current);
+      frameStyler.current.set(crossDimension, nextFrameSize);
+      frameStyler.current.render();
+    }
+  }, [activeViewIndex, viewsToShow]);
+  useLayoutEffect(function () {
+    var trackAxis = isHorizontal ? 'x' : 'y';
+    var nextTrackValue = getRawTrackValue({
+      direction: -1,
+      multiplier: clampedIndex,
+      spacing: spacing,
+      viewsToShow: viewsToShow
+    });
+
+    if (trackStyler.current) {
+      var startValue = parseTrackValue(trackStyler.current.get(trackAxis));
+      var spring = Spring(startValue, {
+        stiffness: 500,
+        damping: 50
+      });
+      spring.onUpdate(function (value) {
+        trackStyler.current.set(trackAxis, getTrackValue({
+          viewSize: value,
+          spacingSize: nextTrackValue.spacingSize
+        }));
+      });
+      spring.transitionTo(nextTrackValue.viewSize);
+      return function () {
+        return spring.destroy();
+      };
+    } else {
+      trackStyler.current = styler(trackRef.current);
+      trackStyler.current.set(trackAxis, getTrackValue(nextTrackValue));
+      trackStyler.current.render();
+    }
+  }, [clampedIndex, spacing, viewsToShow]);
+  var lastTabbables = useRef([]);
+  useLayoutEffect(function () {
+    lastTabbables.current.forEach(function (node) {
+      return node.tabIndex = 0;
+    });
+    lastTabbables.current = [];
+
+    for (var index = 0; index < childCount; index++) {
+      var tabbables = tabbable(trackRef.current.children[index]);
+
+      if (autoFocus && index === clampedIndex) {
+        var firstTabbable = tabbables[0];
+
+        if (firstTabbable) {
+          firstTabbable.focus({
+            preventScroll: true
+          });
+        }
+      } // prevent tabbing to any outside views
+
+
+      if (!visibleIndexes.includes(index)) {
+        tabbables.forEach(function (node) {
+          return node.tabIndex = -1;
+        });
+      }
+
+      lastTabbables.current = [].concat(lastTabbables.current, tabbables);
+    }
+  }, [clampedIndex, viewsToShow]);
+  return /*#__PURE__*/React.createElement(StackView, frameProps, /*#__PURE__*/React.createElement(GridView, trackProps, /*#__PURE__*/React.createElement(PageViewContext.Provider, {
+    value: useMeasureRef
+  }, children)));
+}
+
+PagerView.View = function (props) {
+  var useMeasureRef = useContext(PageViewContext);
+  var viewRef = useMeasureRef();
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    innerRef: viewRef
+  }, props));
+};
+
+export default PagerView;

package/dist/esm/PagerView/index.js

@@ -0,0 +1,2 @@
+import PagerView from './PagerView';
+export default PagerView;

package/dist/esm/Pagination/Pagination.js

@@ -0,0 +1,131 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import Box from '../Box';
+import Button from '../Button';
+import StackView from '../StackView';
+import { range } from '../utils';
+
+function getVisiblePages(currentPage, totalPages, visiblePages) {
+  var start = Math.max(1, Math.min(totalPages - visiblePages + 1, currentPage - visiblePages / 2 + 1));
+  var stop = Math.min(totalPages, start + visiblePages - 1);
+  var primaryWindow = range(start, stop + 1);
+  var showFirstPage = start > 1;
+  var showLastPage = stop < totalPages;
+
+  if (showFirstPage) {
+    primaryWindow.shift();
+    primaryWindow.shift();
+  }
+
+  if (showLastPage) {
+    primaryWindow.pop();
+    primaryWindow.pop();
+  }
+
+  var first = showFirstPage ? [1, '...'] : [];
+  var last = showLastPage ? ['...', totalPages] : [];
+  return first.concat(primaryWindow).concat(last);
+}
+
+var Pagination = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Pagination, _Component);
+
+  function Pagination() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Pagination.prototype;
+
+  _proto.renderGap = function renderGap(key) {
+    return /*#__PURE__*/React.createElement(Box, {
+      key: key,
+      userSelect: "none",
+      cursor: "default",
+      children: "\u2026"
+    });
+  };
+
+  _proto.renderPageLink = function renderPageLink(number) {
+    var isActive = this.props.currentPage === number;
+    return /*#__PURE__*/React.createElement(Button, {
+      key: number,
+      onClick: this.props.onPageChange.bind(null, number),
+      theme: isActive ? this.props.activeColor : undefined,
+      variant: isActive ? 'fill' : 'naked',
+      title: number,
+      shrink: 0,
+      square: true
+    });
+  };
+
+  _proto.renderPageLinks = function renderPageLinks() {
+    var _this = this;
+
+    var pages = getVisiblePages(this.props.currentPage, this.props.totalPages, this.props.visiblePages);
+    return pages.map(function (page, index) {
+      return page === '...' ? _this.renderGap(page + index) : _this.renderPageLink(page);
+    });
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        activeColor = _this$props.activeColor,
+        currentPage = _this$props.currentPage,
+        totalPages = _this$props.totalPages,
+        visiblePages = _this$props.visiblePages,
+        onPageChange = _this$props.onPageChange,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeColor", "currentPage", "totalPages", "visiblePages", "onPageChange"]);
+
+    if (totalPages <= 1) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(StackView, _extends({
+      axis: "horizontal",
+      alignment: "center",
+      distribution: "center",
+      width: "100%",
+      paddingVertical: 1,
+      shrink: 0,
+      overflow: "auto"
+    }, restProps), /*#__PURE__*/React.createElement(Button, {
+      onClick: onPageChange.bind(null, currentPage - 1),
+      disabled: currentPage === 1,
+      icon: {
+        name: 'caret-left'
+      },
+      tooltip: {
+        title: 'Previous Page'
+      },
+      variant: "naked",
+      shrink: 0
+    }), this.renderPageLinks(), /*#__PURE__*/React.createElement(Button, {
+      onClick: onPageChange.bind(null, currentPage + 1),
+      disabled: currentPage === totalPages,
+      icon: {
+        name: 'caret-right'
+      },
+      tooltip: {
+        title: 'Next Page'
+      },
+      variant: "naked",
+      shrink: 0
+    }));
+  };
+
+  return Pagination;
+}(Component);
+
+_defineProperty(Pagination, "defaultProps", {
+  activeColor: 'primary',
+  onPageChange: function onPageChange() {
+    return null;
+  },
+  visiblePages: 8,
+  totalPages: 0
+});
+
+export default Pagination;

package/dist/esm/Pagination/index.js

@@ -0,0 +1,2 @@
+import Pagination from './Pagination';
+export default Pagination;

package/dist/esm/Popover/Popover.js

@@ -0,0 +1,197 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import * as React from 'react';
+import { createPopper } from '@popperjs/core';
+import Box from '../Box';
+import Portal from '../Portal';
+import { lockScroll } from '../utils';
+import rewireTabOrder from './rewireTabOrder';
+import { getFixedParent, getModifiers } from './utils';
+export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var anchorElement = _ref.anchorElement,
+      _ref$as = _ref.as,
+      Element = _ref$as === void 0 ? Box : _ref$as,
+      innerRef = _ref.innerRef,
+      _ref$keepInView = _ref.keepInView,
+      keepInView = _ref$keepInView === void 0 ? true : _ref$keepInView,
+      lockScrollWhileOpen = _ref.lockScrollWhileOpen,
+      matchWidths = _ref.matchWidths,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 8 : _ref$offset,
+      open = _ref.open,
+      onKeyDown = _ref.onKeyDown,
+      onRequestClose = _ref.onRequestClose,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+      relativeTo = _ref.relativeTo,
+      renderTo = _ref.renderTo,
+      _ref$shouldFlip = _ref.shouldFlip,
+      shouldFlip = _ref$shouldFlip === void 0 ? false : _ref$shouldFlip,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["anchorElement", "as", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "offset", "open", "onKeyDown", "onRequestClose", "placement", "relativeTo", "renderTo", "shouldFlip"]);
+
+  var anchorRef = React.useRef(null);
+  var popperRef = React.useRef(null);
+  var unlockScroll = React.useRef(null);
+  var unwireTabOrder = React.useRef(null);
+
+  var _React$useState = React.useState(renderTo),
+      renderPopperTo = _React$useState[0],
+      setRenderPopperTo = _React$useState[1];
+
+  var setPopperInnerRef = function setPopperInnerRef(popperNode) {
+    if (popperNode) {
+      if (popperRef.current === null) {
+        var anchorNode = relativeTo ? relativeTo.current || relativeTo : anchorRef.current;
+        popperRef.current = createPopper(anchorNode, popperNode, {
+          placement: placement,
+          // PopperJS is written in Flow and TS isn't playing nice :(
+          // @ts-ignore
+          modifiers: getModifiers({
+            matchWidths: matchWidths,
+            offset: offset,
+            keepInView: keepInView,
+            shouldFlip: shouldFlip
+          })
+        });
+
+        if (unwireTabOrder.current) {
+          unwireTabOrder.current();
+        }
+
+        unwireTabOrder.current = rewireTabOrder(popperNode);
+
+        if (lockScrollWhileOpen) {
+          if (unlockScroll.current) {
+            unlockScroll.current();
+          }
+
+          unlockScroll.current = lockScroll(popperNode);
+        }
+      }
+    } else {
+      cleanup();
+    }
+
+    if (typeof innerRef === 'function') {
+      innerRef(popperNode);
+    } else if (innerRef != null && innerRef.current) {
+      innerRef.current = popperNode;
+    }
+  };
+
+  var cleanup = function cleanup() {
+    if (popperRef.current) {
+      popperRef.current.destroy();
+      popperRef.current = null;
+    }
+
+    if (unwireTabOrder.current) {
+      unwireTabOrder.current();
+      unwireTabOrder.current = null;
+    }
+
+    if (unlockScroll.current) {
+      unlockScroll.current();
+      unlockScroll.current = null;
+    }
+  };
+
+  var requestClose = function requestClose(event) {
+    if (event.key === 'Escape' && onRequestClose) {
+      onRequestClose();
+    }
+
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  }; // cleanup when open has changed to `false` and on component unmount
+
+
+  React.useEffect(function () {
+    return function () {
+      if (open === false) {
+        cleanup();
+      }
+    };
+  }, [open]); // reposition the popover if an update in React occured while open
+  // for instance this can happen when selecting multiple items in a menu and the anchor grows/shrinks
+
+  React.useEffect(function () {
+    if (open && popperRef.current) {
+      popperRef.current.update();
+    }
+  }); // by default this will make sure popovers render in the same fixed area as the anchor
+
+  React.useEffect(function () {
+    if (renderPopperTo === undefined && anchorElement) {
+      setRenderPopperTo(getFixedParent(anchorElement));
+    }
+  }, [anchorElement]); // carried over from previous implementation, used exclusively in Dropdown
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      focusAnchor: function focusAnchor() {
+        if (anchorRef.current && anchorRef.current.focus) {
+          anchorRef.current.focus();
+        }
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(Portal, {
+    renderTo: renderPopperTo
+  }, typeof anchorElement === 'function' ? anchorElement({
+    innerRef: function innerRef(node) {
+      return anchorRef.current = node;
+    },
+    onKeyDown: requestClose
+  }) : /*#__PURE__*/React.cloneElement(anchorElement, {
+    innerRef: function innerRef(node) {
+      var _anchorElement$props$;
+
+      anchorRef.current = node;
+
+      if (typeof anchorElement.props.innerRef === 'function') {
+        anchorElement.props.innerRef(node);
+      } else if ((_anchorElement$props$ = anchorElement.props.innerRef) != null && _anchorElement$props$.current) {
+        anchorElement.props.innerRef.current = node;
+      }
+    },
+    onKeyDown: function onKeyDown(event) {
+      requestClose(event);
+
+      if (anchorElement.props.onKeyDown) {
+        anchorElement.props.onKeyDown(event);
+      }
+    }
+  }), open ? /*#__PURE__*/React.createElement(Element, _objectSpread({
+    innerRef: setPopperInnerRef,
+    width: 'auto',
+    onKeyDown: function (_onKeyDown) {
+      function onKeyDown(_x) {
+        return _onKeyDown.apply(this, arguments);
+      }
+
+      onKeyDown.toString = function () {
+        return _onKeyDown.toString();
+      };
+
+      return onKeyDown;
+    }(function (event) {
+      requestClose(event);
+
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+    }),
+    // ideally this should be pulled out to something like ThemeProvider for predictable z indices
+    style: {
+      zIndex: 10000
+    }
+  }, restProps)) : null);
+});
+Popover.displayName = 'Popover';

package/dist/esm/Popover/index.js

@@ -0,0 +1,2 @@
+export * from './Popover';
+export { Popover as default } from './Popover';

package/dist/esm/Popover/rewireTabOrder.js

@@ -0,0 +1,122 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { tabbable } from 'tabbable';
+var TAB_KEY = 9;
+
+function getNextActiveElement(node, startNode) {
+  if (startNode === void 0) {
+    startNode = null;
+  }
+
+  var tabbables = tabbable(node.parentNode);
+  var nodeToStartAt = startNode || node;
+  var nextTabbable = tabbables[tabbables.indexOf(nodeToStartAt) + 1];
+
+  if (!nextTabbable && node !== document.body) {
+    return getNextActiveElement(node.parentNode, nodeToStartAt);
+  }
+
+  return nextTabbable;
+}
+
+var RewireTabOrder = /*#__PURE__*/function () {
+  function RewireTabOrder(node) {
+    var _this = this;
+
+    _defineProperty(this, "tabbables", []);
+
+    _defineProperty(this, "firstFocusableElement", null);
+
+    _defineProperty(this, "lastFocusableElement", null);
+
+    _defineProperty(this, "originalActiveElement", null);
+
+    _defineProperty(this, "nextActiveElement", null);
+
+    _defineProperty(this, "focusOriginalActiveElement", function () {
+      _this.originalActiveElement.focus();
+    });
+
+    _defineProperty(this, "focusNextActiveElement", function () {
+      _this.nextActiveElement.focus();
+    });
+
+    _defineProperty(this, "moveFocusToTargetFromTriggerElement", function (event) {
+      if (!event.shiftKey && event.keyCode === TAB_KEY) {
+        event.preventDefault();
+
+        _this.firstFocusableElement.focus();
+      }
+    });
+
+    _defineProperty(this, "moveFocusFromTargetToTriggerElement", function (event) {
+      if (event.target === _this.firstFocusableElement && event.shiftKey && event.keyCode === TAB_KEY) {
+        event.preventDefault();
+
+        _this.originalActiveElement.focus();
+      }
+    });
+
+    _defineProperty(this, "moveFocusToTargetFromNextElement", function (event) {
+      if (event.shiftKey && event.keyCode === TAB_KEY) {
+        event.preventDefault();
+
+        _this.lastFocusableElement.focus();
+      }
+    });
+
+    _defineProperty(this, "moveFocusFromTargetToNextElement", function (event) {
+      if (!event.shiftKey && event.keyCode === TAB_KEY) {
+        event.preventDefault();
+
+        _this.nextActiveElement.focus();
+      }
+    });
+
+    if (node) {
+      this.tabbables = tabbable(node);
+
+      if (this.tabbables.length > 0) {
+        this.init();
+      }
+    }
+  }
+
+  var _proto = RewireTabOrder.prototype;
+
+  _proto.init = function init() {
+    this.firstFocusableElement = this.tabbables[0];
+    this.lastFocusableElement = this.tabbables[this.tabbables.length - 1];
+    this.originalActiveElement = document.activeElement;
+    this.nextActiveElement = getNextActiveElement(this.originalActiveElement);
+    this.originalActiveElement.addEventListener('keydown', this.moveFocusToTargetFromTriggerElement);
+    this.firstFocusableElement.addEventListener('keydown', this.moveFocusFromTargetToTriggerElement);
+
+    if (this.nextActiveElement) {
+      this.nextActiveElement.addEventListener('keydown', this.moveFocusToTargetFromNextElement);
+      this.lastFocusableElement.addEventListener('keydown', this.moveFocusFromTargetToNextElement);
+    }
+  };
+
+  _proto.destroy = function destroy() {
+    if (this.tabbables.length === 0) {
+      return;
+    }
+
+    this.originalActiveElement.removeEventListener('keydown', this.moveFocusToTargetFromTriggerElement);
+    this.firstFocusableElement.removeEventListener('keydown', this.moveFocusFromTargetToTriggerElement);
+
+    if (this.nextActiveElement) {
+      this.nextActiveElement.removeEventListener('keydown', this.moveFocusToTargetFromNextElement);
+      this.lastFocusableElement.removeEventListener('keydown', this.moveFocusFromTargetToNextElement);
+    }
+  };
+
+  return RewireTabOrder;
+}();
+
+export default (function (node) {
+  var unwireTabOrder = new RewireTabOrder(node);
+  return function () {
+    return unwireTabOrder.destroy();
+  };
+});