@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Popover/Popover.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Popover = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _core = require("@popperjs/core");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Portal = _interopRequireDefault(require("../Portal"));
+
+var _utils = require("../utils");
+
+var _rewireTabOrder = _interopRequireDefault(require("./rewireTabOrder"));
+
+var _utils2 = require("./utils");
+
+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) { (0, _defineProperty2["default"])(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; }
+
+var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var anchorElement = _ref.anchorElement,
+      _ref$as = _ref.as,
+      Element = _ref$as === void 0 ? _Box["default"] : _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 = (0, _objectWithoutPropertiesLoose2["default"])(_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 = (0, _core.createPopper)(anchorNode, popperNode, {
+          placement: placement,
+          // PopperJS is written in Flow and TS isn't playing nice :(
+          // @ts-ignore
+          modifiers: (0, _utils2.getModifiers)({
+            matchWidths: matchWidths,
+            offset: offset,
+            keepInView: keepInView,
+            shouldFlip: shouldFlip
+          })
+        });
+
+        if (unwireTabOrder.current) {
+          unwireTabOrder.current();
+        }
+
+        unwireTabOrder.current = (0, _rewireTabOrder["default"])(popperNode);
+
+        if (lockScrollWhileOpen) {
+          if (unlockScroll.current) {
+            unlockScroll.current();
+          }
+
+          unlockScroll.current = (0, _utils.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((0, _utils2.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["default"], {
+    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);
+});
+exports.Popover = Popover;
+Popover.displayName = 'Popover';

package/dist/cjs/Popover/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Popover = require("./Popover");
+
+exports["default"] = _Popover.Popover;
+Object.keys(_Popover).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Popover[key]) return;
+  exports[key] = _Popover[key];
+});

package/dist/cjs/Popover/rewireTabOrder.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _tabbable = require("tabbable");
+
+var TAB_KEY = 9;
+
+function getNextActiveElement(node, startNode) {
+  if (startNode === void 0) {
+    startNode = null;
+  }
+
+  var tabbables = (0, _tabbable.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;
+
+    (0, _defineProperty2["default"])(this, "tabbables", []);
+    (0, _defineProperty2["default"])(this, "firstFocusableElement", null);
+    (0, _defineProperty2["default"])(this, "lastFocusableElement", null);
+    (0, _defineProperty2["default"])(this, "originalActiveElement", null);
+    (0, _defineProperty2["default"])(this, "nextActiveElement", null);
+    (0, _defineProperty2["default"])(this, "focusOriginalActiveElement", function () {
+      _this.originalActiveElement.focus();
+    });
+    (0, _defineProperty2["default"])(this, "focusNextActiveElement", function () {
+      _this.nextActiveElement.focus();
+    });
+    (0, _defineProperty2["default"])(this, "moveFocusToTargetFromTriggerElement", function (event) {
+      if (!event.shiftKey && event.keyCode === TAB_KEY) {
+        event.preventDefault();
+
+        _this.firstFocusableElement.focus();
+      }
+    });
+    (0, _defineProperty2["default"])(this, "moveFocusFromTargetToTriggerElement", function (event) {
+      if (event.target === _this.firstFocusableElement && event.shiftKey && event.keyCode === TAB_KEY) {
+        event.preventDefault();
+
+        _this.originalActiveElement.focus();
+      }
+    });
+    (0, _defineProperty2["default"])(this, "moveFocusToTargetFromNextElement", function (event) {
+      if (event.shiftKey && event.keyCode === TAB_KEY) {
+        event.preventDefault();
+
+        _this.lastFocusableElement.focus();
+      }
+    });
+    (0, _defineProperty2["default"])(this, "moveFocusFromTargetToNextElement", function (event) {
+      if (!event.shiftKey && event.keyCode === TAB_KEY) {
+        event.preventDefault();
+
+        _this.nextActiveElement.focus();
+      }
+    });
+
+    if (node) {
+      this.tabbables = (0, _tabbable.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;
+}();
+
+var _default = function _default(node) {
+  var unwireTabOrder = new RewireTabOrder(node);
+  return function () {
+    return unwireTabOrder.destroy();
+  };
+};
+
+exports["default"] = _default;

package/dist/cjs/Popover/utils.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.getModifiers = getModifiers;
+exports.getFixedParent = getFixedParent;
+
+var _popperMaxSizeModifier = _interopRequireDefault(require("popper-max-size-modifier"));
+
+function getModifiers(_ref) {
+  var matchWidths = _ref.matchWidths,
+      offset = _ref.offset,
+      keepInView = _ref.keepInView,
+      shouldFlip = _ref.shouldFlip;
+  return [// https://popper.js.org/docs/v2/modifiers/community-modifiers/
+  _popperMaxSizeModifier["default"], {
+    name: 'applyMaxSize',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn: function fn(_ref2) {
+      var state = _ref2.state;
+      var height = state.modifiersData.maxSize.height;
+      state.styles.popper.maxHeight = height + "px";
+    }
+  }, {
+    name: 'matchWidths',
+    enabled: Boolean(matchWidths),
+    phase: 'write',
+    requires: ['computeStyles'],
+    effect: function effect(_ref3) {
+      var state = _ref3.state;
+      var offsetWidth = state.elements.reference.offsetWidth;
+
+      if (matchWidths === 'minimum') {
+        if (offsetWidth > state.elements.popper.offsetWidth) {
+          state.elements.popper.style.minWidth = offsetWidth + "px";
+        }
+      } else {
+        state.elements.popper.style.width = offsetWidth + "px";
+      }
+    }
+  }, {
+    name: 'offset',
+    options: {
+      offset: [0, offset]
+    }
+  }, {
+    name: 'preventOverflow',
+    enabled: keepInView
+  }, {
+    name: 'flip',
+    enabled: shouldFlip
+  }];
+}
+
+function getFixedParent(node) {
+  var offsetParent = node.offsetParent;
+
+  if (offsetParent) {
+    var offsetParentStyles = getComputedStyle(offsetParent);
+
+    if (offsetParentStyles.position !== 'fixed') {
+      return getFixedParent(offsetParent);
+    } else {
+      return offsetParent;
+    }
+  } else {
+    return null;
+  }
+}

package/dist/cjs/Portal/Portal.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Portal = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+/** Accepts any additional HTML attributes. */
+var Portal = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2["default"])(Portal, _React$Component);
+
+  function Portal() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_portalNode", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_needsUpdate", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_updated", false);
+    return _this;
+  }
+
+  var _proto = Portal.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var secondChild = this._getSecondChild();
+
+    if (secondChild) {
+      this._setupPortal();
+
+      this._updatePortal();
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    var secondChild = this._getSecondChild();
+
+    if (secondChild && !this._portalNode) {
+      this._setupPortal();
+    } else if (!secondChild && this._portalNode) {
+      this._destroyPortal();
+    }
+
+    if (secondChild) {
+      this._updatePortal();
+    }
+
+    if (this._needsUpdate) {
+      if (this._updated) {
+        if (this.props.onUpdate) {
+          this.props.onUpdate();
+        }
+
+        this._updated = false;
+        this._needsUpdate = false;
+      } else {
+        this.forceUpdate();
+        this._updated = true;
+      }
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this._destroyPortal();
+  };
+
+  _proto._getSecondChild = function _getSecondChild() {
+    return React.Children.toArray(this.props.children)[1];
+  };
+
+  _proto._getRenderToNode = function _getRenderToNode() {
+    var renderTo = this.props.renderTo;
+
+    if (typeof renderTo === 'string') {
+      return document.querySelector(renderTo);
+    } else {
+      return renderTo || document.body;
+    }
+  };
+
+  _proto._setupPortal = function _setupPortal() {
+    if (typeof document !== 'undefined') {
+      this._portalNode = document.createElement(this.props.renderTag);
+
+      this._getRenderToNode().appendChild(this._portalNode);
+
+      if (this.props.getPortalNode) {
+        this.props.getPortalNode(this._portalNode);
+      }
+    }
+
+    this.forceUpdate();
+    this._needsUpdate = true;
+  };
+
+  _proto._updatePortal = function _updatePortal() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        renderTo = _this$props.renderTo,
+        renderTag = _this$props.renderTag,
+        onUpdate = _this$props.onUpdate,
+        getPortalNode = _this$props.getPortalNode,
+        style = _this$props.style,
+        children = _this$props.children,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["renderTo", "renderTag", "onUpdate", "getPortalNode", "style", "children"]);
+    Object.keys(restProps).forEach(function (key) {
+      _this2._portalNode.setAttribute(key, restProps[key]);
+    });
+
+    if (style) {
+      Object.keys(style).forEach(function (key) {
+        _this2._portalNode.style[key] = style[key];
+      });
+    }
+  };
+
+  _proto._renderPortal = function _renderPortal(component) {
+    return /*#__PURE__*/(0, _reactDom.createPortal)(component, this._portalNode);
+  };
+
+  _proto._destroyPortal = function _destroyPortal() {
+    if (this._portalNode) {
+      this._portalNode.parentNode.removeChild(this._portalNode);
+
+      if (this.props.getPortalNode) {
+        this.props.getPortalNode(null);
+      }
+    }
+
+    this._portalNode = null;
+  };
+
+  _proto.render = function render() {
+    var _React$Children$toArr = React.Children.toArray(this.props.children),
+        firstChild = _React$Children$toArr[0],
+        secondChild = _React$Children$toArr[1];
+
+    return this._portalNode ? /*#__PURE__*/React.createElement(React.Fragment, null, firstChild, this._renderPortal(secondChild)) : firstChild;
+  };
+
+  return Portal;
+}(React.Component);
+
+exports.Portal = Portal;
+(0, _defineProperty2["default"])(Portal, "defaultProps", {
+  renderTag: 'div',
+  renderTo: null
+});

package/dist/cjs/Portal/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Portal = require("./Portal");
+
+exports["default"] = _Portal.Portal;
+Object.keys(_Portal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Portal[key]) return;
+  exports[key] = _Portal[key];
+});

package/dist/cjs/Progress/Progress.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+function Progress(props) {
+  var value = props.value,
+      _props$activeColor = props.activeColor,
+      activeColor = _props$activeColor === void 0 ? 'primary' : _props$activeColor,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["value", "activeColor"]);
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    role: "progressbar",
+    "aria-valuenow": value,
+    width: "100%",
+    height: 0.5,
+    radius: 6,
+    position: "relative",
+    overflow: "hidden",
+    backgroundColor: "grey-3"
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    transformOrigin: "center left",
+    backgroundColor: activeColor,
+    style: {
+      transform: "scaleX(" + value / 100 + ")"
+    }
+  }));
+}
+
+var _default = Progress;
+exports["default"] = _default;

package/dist/cjs/Progress/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Progress = _interopRequireDefault(require("./Progress"));
+
+var _default = _Progress["default"];
+exports["default"] = _default;