@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Tooltip/Tooltip.js

@@ -0,0 +1,230 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component, Children, cloneElement } from 'react';
+import mitt from 'mitt';
+import Popover from '../Popover';
+import { composeEvents, pageViewChange } from '../utils';
+var emitter = mitt();
+var globalTimeoutId = null;
+var instantDelay = false;
+
+function startGlobalTimeout() {
+  instantDelay = true;
+  globalTimeoutId = setTimeout(function () {
+    instantDelay = false;
+  }, 500);
+}
+
+function clearGlobalTimeout() {
+  clearTimeout(globalTimeoutId);
+}
+
+var Tooltip = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Tooltip, _Component);
+
+  function Tooltip() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isPopoverOpen: _this.props.defaultOpen
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isPageInView", true);
+
+    _defineProperty(_assertThisInitialized(_this), "isFocused", false);
+
+    _defineProperty(_assertThisInitialized(_this), "isMouseDown", false);
+
+    _defineProperty(_assertThisInitialized(_this), "openTimeoutId", null);
+
+    _defineProperty(_assertThisInitialized(_this), "closeTimeoutId", null);
+
+    _defineProperty(_assertThisInitialized(_this), "cleanupPageViewChange", pageViewChange(function (inView) {
+      return setTimeout(function () {
+        return _this.isPageInView = inView;
+      });
+    }));
+
+    _defineProperty(_assertThisInitialized(_this), "handleCloseOpenTooltips", function (instance) {
+      if (_assertThisInitialized(_this) !== instance) {
+        _this.close();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "createOpenTimeout", function () {
+      clearGlobalTimeout();
+
+      if (_this.openTimeoutId === null) {
+        clearTimeout(_this.closeTimeoutId);
+        _this.closeTimeoutId = null;
+
+        if (_this.state.isPopoverOpen === false) {
+          emitter.emit('CLOSE_OPEN_TOOLTIPS');
+          _this.openTimeoutId = setTimeout(function () {
+            return _this.open();
+          }, instantDelay ? 0 : _this.props.openDelay);
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "createCloseTimeout", function () {
+      startGlobalTimeout();
+
+      if (_this.closeTimeoutId === null) {
+        clearTimeout(_this.openTimeoutId);
+        _this.openTimeoutId = null;
+        _this.closeTimeoutId = setTimeout(function () {
+          _this.close();
+        }, _this.props.closeDelay);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "open", function () {
+      clearTimeout(_this.closeTimeoutId);
+      _this.closeTimeoutId = null;
+
+      _this.setState({
+        isPopoverOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "close", function () {
+      clearTimeout(_this.openTimeoutId);
+      _this.openTimeoutId = null;
+
+      _this.setState({
+        isPopoverOpen: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toggle", function () {
+      _this.setState(function (state) {
+        return {
+          isPopoverOpen: !state.isPopoverOpen
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
+      if (_this.isPageInView && !_this.isMouseDown) {
+        _this.open();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () {
+      _this.isMouseDown = true;
+
+      _this.close();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function () {
+      _this.isMouseDown = false;
+    });
+
+    return _this;
+  }
+
+  var _proto = Tooltip.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    emitter.on('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips);
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.triggerOnFocus !== this.props.triggerOnFocus && this.props.triggerOnFocus === false || lastProps.triggerOnHover !== this.props.triggerOnHover && this.triggerOnHover === false) {
+      this.close();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    emitter.off('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips);
+    clearTimeout(this.openTimeoutId);
+    clearTimeout(this.closeTimeoutId);
+    this.cleanupPageViewChange();
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        openDelay = _this$props.openDelay,
+        closeDelay = _this$props.closeDelay,
+        defaultOpen = _this$props.defaultOpen,
+        keepInView = _this$props.keepInView,
+        placement = _this$props.placement,
+        popoverProps = _this$props.popoverProps,
+        renderTo = _this$props.renderTo,
+        title = _this$props.title,
+        triggerOnFocus = _this$props.triggerOnFocus,
+        triggerOnHover = _this$props.triggerOnHover,
+        childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
+
+    var isPopoverOpen = this.state.isPopoverOpen;
+    var child = Children.only(children);
+    var _child$props = child.props,
+        onFocus = _child$props.onFocus,
+        onBlur = _child$props.onBlur,
+        onMouseEnter = _child$props.onMouseEnter,
+        onMouseLeave = _child$props.onMouseLeave,
+        onMouseDown = _child$props.onMouseDown,
+        onMouseUp = _child$props.onMouseUp;
+
+    if (!title) {
+      return /*#__PURE__*/cloneElement(child, childProps);
+    }
+
+    if (triggerOnFocus) {
+      childProps.onFocus = composeEvents(this.handleFocus, onFocus);
+      childProps.onBlur = composeEvents(this.close, onBlur);
+      childProps.onMouseDown = composeEvents(this.handleMouseDown, onMouseDown);
+      childProps.onMouseUp = composeEvents(this.handleMouseUp, onMouseUp);
+    }
+
+    if (triggerOnHover) {
+      childProps.onMouseEnter = composeEvents(this.createOpenTimeout, onMouseEnter);
+      childProps.onMouseLeave = composeEvents(this.createCloseTimeout, onMouseLeave);
+    }
+
+    return /*#__PURE__*/React.createElement(Popover, _extends({
+      shouldFlip: true,
+      paddingHorizontal: 0.75,
+      paddingVertical: 0.25,
+      fontSize: 5,
+      textAlign: "center",
+      radius: 2,
+      backgroundColor: "grey-9",
+      color: "rgba(255,255,255,0.94)",
+      zIndex: 9999
+    }, popoverProps, {
+      anchorElement: /*#__PURE__*/cloneElement(child, childProps),
+      onMouseEnter: this.createOpenTimeout,
+      onMouseLeave: this.createCloseTimeout,
+      keepInView: keepInView,
+      placement: placement,
+      renderTo: renderTo,
+      children: title,
+      open: isPopoverOpen
+    }));
+  };
+
+  return Tooltip;
+}(Component);
+
+_defineProperty(Tooltip, "defaultProps", {
+  openDelay: 500,
+  closeDelay: 300,
+  keepInView: true,
+  triggerOnFocus: true,
+  triggerOnHover: true,
+  defaultOpen: false
+});
+
+export default Tooltip;

package/dist/esm/Tooltip/index.js

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

package/dist/esm/VariantProvider/VariantProvider.js

@@ -0,0 +1,18 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { createContext, useContext } from 'react';
+var VariantContext = /*#__PURE__*/createContext();
+export function useVariant() {
+  var variant = useContext(VariantContext);
+  return variant ? Object.keys(variant).filter(function (key) {
+    return variant[key];
+  }) : null;
+}
+export function VariantProvider(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  var parentVariant = useVariant();
+  return /*#__PURE__*/React.createElement(VariantContext.Provider, {
+    value: props
+  }, children);
+}

package/dist/esm/VariantProvider/index.js

@@ -0,0 +1 @@
+export { VariantProvider as default, useVariant } from './VariantProvider';

package/dist/esm/Wizard/Step.js

@@ -0,0 +1,23 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { useContext, useEffect } from 'react';
+import WizardContext from './WizardContext';
+
+function Step(_ref) {
+  var children = _ref.children,
+      name = _ref.name,
+      valid = _ref.valid;
+
+  var _useContext = useContext(WizardContext),
+      addStep = _useContext.addStep,
+      wizard = _objectWithoutPropertiesLoose(_useContext, ["addStep"]);
+
+  useEffect(function () {
+    return addStep({
+      name: name,
+      valid: valid
+    });
+  }, []);
+  return children(wizard);
+}
+
+export default Step;

package/dist/esm/Wizard/Wizard.js

@@ -0,0 +1,226 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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, Component } from 'react';
+import Button from '../Button';
+import Card from '../Card';
+import Divider from '../Divider';
+import StackView from '../StackView';
+import PagerView from '../PagerView';
+import StepperProgress from '../StepperProgress';
+import Text from '../Text';
+import Step from './Step';
+import WizardContext from './WizardContext';
+
+var _ref = /*#__PURE__*/React.createElement(Divider, null);
+
+var Wizard = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Wizard, _Component);
+
+  function Wizard() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      activeStepIndex: 0,
+      payload: _this.props.initialPayload,
+      steps: [],
+      totalSteps: -1,
+      sendingPayload: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setPayload", function (newPayload, cb) {
+      _this.setState(function (state) {
+        return {
+          payload: _objectSpread(_objectSpread({}, state.payload), newPayload)
+        };
+      }, cb);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setSteps", function (getSteps) {
+      _this.setState(function (state) {
+        var nextSteps = getSteps(state.steps);
+        return {
+          steps: nextSteps,
+          totalSteps: nextSteps.length
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "addStep", function (step) {
+      _this.setSteps(function (steps) {
+        return [].concat(steps, [step]);
+      });
+
+      return function () {
+        _this.setSteps(function (steps) {
+          return steps.filter(function (previousStep) {
+            return previousStep.name !== step.name;
+          });
+        });
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function () {
+      if (_this.props.onSubmit) {
+        var _complete = function _complete() {
+          return _this.setState({
+            sendingPayload: false
+          });
+        };
+
+        _this.setState({
+          sendingPayload: true
+        });
+
+        _this.props.onSubmit(_this.state.payload, _complete);
+      }
+    });
+
+    return _this;
+  }
+
+  var _proto = Wizard.prototype;
+
+  _proto.isCurrentStepValid = function isCurrentStepValid() {
+    var _this$state = this.state,
+        activeStepIndex = _this$state.activeStepIndex,
+        payload = _this$state.payload,
+        steps = _this$state.steps;
+    var currentStep = steps[activeStepIndex];
+    return currentStep && currentStep.valid ? currentStep.valid(payload) : true;
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        autoFocus = _this$props.autoFocus,
+        backButtonProps = _this$props.backButtonProps,
+        buttonProps = _this$props.buttonProps,
+        cancelButtonProps = _this$props.cancelButtonProps,
+        children = _this$props.children,
+        footerProps = _this$props.footerProps,
+        initialPayload = _this$props.initialPayload,
+        nextButtonProps = _this$props.nextButtonProps,
+        nextButtonTitle = _this$props.nextButtonTitle,
+        onCancel = _this$props.onCancel,
+        onSubmit = _this$props.onSubmit,
+        renderProgress = _this$props.renderProgress,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["autoFocus", "backButtonProps", "buttonProps", "cancelButtonProps", "children", "footerProps", "initialPayload", "nextButtonProps", "nextButtonTitle", "onCancel", "onSubmit", "renderProgress"]);
+
+    var _this$state2 = this.state,
+        activeStepIndex = _this$state2.activeStepIndex,
+        sendingPayload = _this$state2.sendingPayload,
+        steps = _this$state2.steps,
+        totalSteps = _this$state2.totalSteps;
+    return /*#__PURE__*/React.createElement(WizardContext.Provider, {
+      value: {
+        activeStepIndex: this.state.activeStepIndex,
+        addStep: this.addStep,
+        setPayload: this.setPayload,
+        payload: this.state.payload,
+        totalSteps: this.state.totalSteps
+      }
+    }, /*#__PURE__*/React.createElement(StackView, _extends({
+      alignment: "center",
+      minWidth: 48,
+      maxWidth: 96
+    }, restProps), renderProgress ? renderProgress({
+      activeStepIndex: activeStepIndex,
+      steps: steps,
+      totalSteps: totalSteps
+    }) : /*#__PURE__*/React.createElement(StepperProgress, {
+      width: "80%",
+      paddingTop: 6,
+      paddingBottom: 4,
+      activeStepIndex: activeStepIndex
+    }, steps.map(function (step, index) {
+      return /*#__PURE__*/React.createElement(StepperProgress.Step, {
+        key: index,
+        renderEnd: /*#__PURE__*/React.createElement(Text, {
+          align: "center",
+          marginTop: 2
+        }, step.name)
+      });
+    })), /*#__PURE__*/React.createElement(Card, {
+      spacing: _ref,
+      elevation: 1
+    }, /*#__PURE__*/React.createElement(PagerView, {
+      activeViewIndex: activeStepIndex,
+      autoFocus: autoFocus
+    }, Children.map(children, function (child, index) {
+      return /*#__PURE__*/React.createElement(PagerView.View, {
+        key: index
+      }, child);
+    })), /*#__PURE__*/React.createElement(StackView, _extends({
+      axis: "horizontal",
+      distribution: activeStepIndex > 0 ? 'space-between' : 'end',
+      padding: 1,
+      spacing: 1
+    }, footerProps), activeStepIndex === 0 && onCancel && /*#__PURE__*/React.createElement(Button, _extends({
+      disabled: sendingPayload,
+      onClick: onCancel,
+      size: "lg",
+      title: "Cancel",
+      variant: "naked"
+    }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/React.createElement(Button, _extends({
+      disabled: sendingPayload,
+      iconLeft: {
+        name: 'caret-left'
+      },
+      onClick: function onClick() {
+        return _this2.setState({
+          activeStepIndex: activeStepIndex - 1
+        });
+      },
+      size: "lg",
+      title: "Back",
+      variant: "naked"
+    }, buttonProps, backButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
+      disabled: !this.isCurrentStepValid(),
+      onClick: function onClick() {
+        return activeStepIndex >= totalSteps - 1 ? _this2.handleSubmit() : _this2.setState({
+          activeStepIndex: activeStepIndex + 1
+        });
+      },
+      size: "lg",
+      spinner: sendingPayload,
+      theme: "primary",
+      title: nextButtonTitle({
+        activeStepIndex: activeStepIndex,
+        steps: steps,
+        totalSteps: totalSteps
+      })
+    }, buttonProps, nextButtonProps))))));
+  };
+
+  return Wizard;
+}(Component);
+
+_defineProperty(Wizard, "Step", Step);
+
+_defineProperty(Wizard, "defaultProps", {
+  autoFocus: true,
+  initialPayload: {},
+  nextButtonTitle: function nextButtonTitle(_ref2) {
+    var activeStepIndex = _ref2.activeStepIndex,
+        steps = _ref2.steps,
+        totalSteps = _ref2.totalSteps;
+    return activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next';
+  }
+});
+
+export default Wizard;

package/dist/esm/Wizard/WizardContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var WizardContext = /*#__PURE__*/createContext();
+export default WizardContext;

package/dist/esm/Wizard/index.js

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

package/dist/esm/WrapView/WrapView.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import StackView from '../StackView';
+var supportsFlexGap = null;
+
+function getSupportsFlexGap() {
+  if (typeof document !== 'undefined' && supportsFlexGap === null) {
+    var div = document.createElement('div');
+    div.style.display = 'flex';
+    div.style.flexDirection = 'column';
+    div.style.gap = '1px';
+    div.appendChild(document.createElement('div'));
+    div.appendChild(document.createElement('div'));
+    document.body.appendChild(div);
+    supportsFlexGap = div.scrollHeight === 1;
+    document.body.removeChild(div);
+  }
+
+  return supportsFlexGap;
+}
+
+export function WrapView(_ref) {
+  var children = _ref.children,
+      spacing = _ref.spacing,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "spacing"]);
+
+  var supportsFlexGap = getSupportsFlexGap();
+  var styles = {
+    basis: '100%'
+  };
+
+  if (spacing) {
+    if (supportsFlexGap) {
+      styles.gap = spacing;
+    } else {
+      styles.marginBottom = -spacing;
+      styles['& > *'] = {
+        marginRight: spacing,
+        marginBottom: spacing
+      };
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal"
+  }, restProps), /*#__PURE__*/React.createElement(StackView, {
+    wrap: true,
+    axis: "horizontal",
+    css: styles
+  }, children));
+}

package/dist/esm/WrapView/index.js

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

package/dist/esm/hooks/index.js

@@ -0,0 +1,7 @@
+export { useDocumentEvent } from './use-document-event';
+export { useFocus } from './use-focus';
+export { useHover } from './use-hover';
+export { useId } from './use-id';
+export { useKeyboardShortcuts } from './use-keyboard-shortcuts';
+export { useRovingIndex } from './use-roving-index';
+export { useMeasure } from './use-measure';

package/dist/esm/hooks/use-accessibility-violation.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import Icon from '../Icon';
+import StackView from '../StackView';
+import Text from '../Text';
+/**
+ * Provide an on-screen and optional console accessibilty violation.
+ */
+
+var _ref = /*#__PURE__*/React.createElement(StackView, {
+  axis: "horizontal",
+  alignment: "center",
+  spacing: 1
+}, /*#__PURE__*/React.createElement(Icon, {
+  name: "exclamation-circle-filled",
+  size: "md",
+  color: "error"
+}), /*#__PURE__*/React.createElement(Text, {
+  fontSize: 3,
+  weight: 500
+}, "Accessibility Violation"));
+
+export function useAccessibilityViolation(
+/** Content to be displayed in tooltip when hovering element. */
+tooltipContent,
+/** Content to be displayed in the console with a reference to the element. */
+consoleContent) {
+  if (process.env.NODE_ENV === 'production') {
+    return {};
+  } else {
+    var wrapperRef = React.useRef(null);
+    var tooltipProps = {
+      title: /*#__PURE__*/React.createElement(StackView, {
+        width: 32,
+        spacing: 1,
+        cursor: "default"
+      }, _ref, /*#__PURE__*/React.createElement(Text, {
+        fontSize: 3,
+        lineHeight: 3
+      }, tooltipContent)),
+      openDelay: 0,
+      closeDelay: 300,
+      popoverProps: {
+        textAlign: 'left',
+        paddingHorizontal: 2,
+        paddingVertical: 2,
+        backgroundColor: 'surface',
+        color: 'foreground',
+        stroke: 'separator',
+        strokeWeight: 1,
+        elevation: 2
+      }
+    };
+    var wrapperProps = {
+      innerRef: wrapperRef,
+      stroke: 'error',
+      strokeAlign: 'outside',
+      strokeWeight: 4
+    };
+    React.useEffect(function () {
+      if (wrapperRef.current) {
+        console.error(consoleContent, wrapperRef.current);
+      }
+    }, []);
+    return {
+      tooltipProps: tooltipProps,
+      wrapperProps: wrapperProps
+    };
+  }
+}

package/dist/esm/hooks/use-document-event.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Provide a callback for any document event type.
+ *
+ * @event {string} type - A valid [DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
+ * @param {Function} callback - Callback when specified event type occurs.
+ *
+ * @example
+ *
+ * function App() {
+ *   useDocumentEvent('keydown', event => {
+ *     console.log(`${event.key} pressed`)
+ *   })
+ *   return <div>App</div>
+ * }
+ */
+
+export function useDocumentEvent(type, callback) {
+  var savedCallback = useRef(callback);
+  useEffect(function () {
+    savedCallback.current = callback;
+  }, [callback]);
+  useEffect(function () {
+    function handleEvent(event) {
+      savedCallback.current(event);
+    }
+
+    document.addEventListener(type, handleEvent);
+    return function () {
+      document.removeEventListener(type, handleEvent);
+    };
+  }, []);
+}