@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/TokenInput/index.js

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

package/dist/cjs/Toolbar/Action.js

@@ -0,0 +1,27 @@
+"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 _Button = _interopRequireDefault(require("../Button"));
+
+function ToolbarAction(_ref) {
+  var secondary = _ref.secondary,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["secondary"]);
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    size: "xs",
+    theme: "primary",
+    variant: secondary ? 'naked' : 'outline'
+  }, restProps));
+}
+
+var _default = ToolbarAction;
+exports["default"] = _default;

package/dist/cjs/Toolbar/Toolbar.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = 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 _Badge = _interopRequireDefault(require("../Badge"));
+
+var _HelperDrawer = _interopRequireDefault(require("../HelperDrawer"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _utils = require("../utils");
+
+var _Action = _interopRequireDefault(require("./Action"));
+
+var Toolbar = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(Toolbar, _Component);
+
+  function Toolbar() {
+    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;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "helperDrawerId", (0, _utils.generateId)('toolbar-helper-drawer'));
+    return _this;
+  }
+
+  var _proto = Toolbar.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        actions = _this$props.actions,
+        count = _this$props.count,
+        countColor = _this$props.countColor,
+        helpContent = _this$props.helpContent,
+        onStatusClearRequest = _this$props.onStatusClearRequest,
+        status = _this$props.status,
+        title = _this$props.title,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["actions", "count", "countColor", "helpContent", "onStatusClearRequest", "status", "title"]);
+    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], restProps, /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      alignment: "center",
+      axis: "horizontal",
+      distribution: "space-between",
+      spacing: 1
+    }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      alignment: "center",
+      axis: "horizontal",
+      grow: 1,
+      shrink: 1
+    }, title, count && /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+      color: countColor,
+      marginLeft: 0.75,
+      radius: "circle",
+      size: "xs",
+      title: count
+    }), helpContent && /*#__PURE__*/_react["default"].createElement(_HelperDrawer["default"].Toggle, {
+      drawerId: this.helperDrawerId,
+      marginLeft: 0.25,
+      tooltip: {
+        title: 'More info',
+        triggerOnFocus: false
+      }
+    })), (status || actions) && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      axis: "horizontal",
+      spacing: status && actions ? 1 : 0
+    }, status && /*#__PURE__*/_react["default"].createElement(_Badge["default"].Status, {
+      onClearRequest: onStatusClearRequest,
+      size: "xs",
+      status: status,
+      title: status === 'success' ? 'Saved' : 'Error'
+    }), actions && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      axis: "horizontal",
+      spacing: actions.length > 1 ? 1 : 0
+    }, _react.Children.map(actions, function (child) {
+      return child && child.type.displayName === 'ToolbarAction' ? child : /*#__PURE__*/(0, _react.cloneElement)(child, {
+        size: child.props.size || 'xs',
+        theme: child.props.theme || 'primary',
+        variant: child.props.variant || 'outline'
+      });
+    })))), helpContent && /*#__PURE__*/_react["default"].createElement(_HelperDrawer["default"], {
+      children: helpContent,
+      id: this.helperDrawerId,
+      marginTop: 1
+    }));
+  };
+
+  return Toolbar;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Toolbar, "Action", _Action["default"]);
+(0, _defineProperty2["default"])(Toolbar, "defaultProps", {
+  countColor: 'grey-7'
+});
+var _default = Toolbar;
+exports["default"] = _default;

package/dist/cjs/Toolbar/index.js

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

package/dist/cjs/Tooltip/Tooltip.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 _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 _mitt = _interopRequireDefault(require("mitt"));
+
+var _Popover = _interopRequireDefault(require("../Popover"));
+
+var _utils = require("../utils");
+
+var emitter = (0, _mitt["default"])();
+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) {
+  (0, _inheritsLoose2["default"])(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;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isPopoverOpen: _this.props.defaultOpen
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isPageInView", true);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isFocused", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isMouseDown", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openTimeoutId", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeTimeoutId", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "cleanupPageViewChange", (0, _utils.pageViewChange)(function (inView) {
+      return setTimeout(function () {
+        return _this.isPageInView = inView;
+      });
+    }));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleCloseOpenTooltips", function (instance) {
+      if ((0, _assertThisInitialized2["default"])(_this) !== instance) {
+        _this.close();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createCloseTimeout", function () {
+      startGlobalTimeout();
+
+      if (_this.closeTimeoutId === null) {
+        clearTimeout(_this.openTimeoutId);
+        _this.openTimeoutId = null;
+        _this.closeTimeoutId = setTimeout(function () {
+          _this.close();
+        }, _this.props.closeDelay);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "open", function () {
+      clearTimeout(_this.closeTimeoutId);
+      _this.closeTimeoutId = null;
+
+      _this.setState({
+        isPopoverOpen: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "close", function () {
+      clearTimeout(_this.openTimeoutId);
+      _this.openTimeoutId = null;
+
+      _this.setState({
+        isPopoverOpen: false
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggle", function () {
+      _this.setState(function (state) {
+        return {
+          isPopoverOpen: !state.isPopoverOpen
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFocus", function () {
+      if (_this.isPageInView && !_this.isMouseDown) {
+        _this.open();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseDown", function () {
+      _this.isMouseDown = true;
+
+      _this.close();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
+    var isPopoverOpen = this.state.isPopoverOpen;
+
+    var child = _react.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__*/(0, _react.cloneElement)(child, childProps);
+    }
+
+    if (triggerOnFocus) {
+      childProps.onFocus = (0, _utils.composeEvents)(this.handleFocus, onFocus);
+      childProps.onBlur = (0, _utils.composeEvents)(this.close, onBlur);
+      childProps.onMouseDown = (0, _utils.composeEvents)(this.handleMouseDown, onMouseDown);
+      childProps.onMouseUp = (0, _utils.composeEvents)(this.handleMouseUp, onMouseUp);
+    }
+
+    if (triggerOnHover) {
+      childProps.onMouseEnter = (0, _utils.composeEvents)(this.createOpenTimeout, onMouseEnter);
+      childProps.onMouseLeave = (0, _utils.composeEvents)(this.createCloseTimeout, onMouseLeave);
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({
+      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__*/(0, _react.cloneElement)(child, childProps),
+      onMouseEnter: this.createOpenTimeout,
+      onMouseLeave: this.createCloseTimeout,
+      keepInView: keepInView,
+      placement: placement,
+      renderTo: renderTo,
+      children: title,
+      open: isPopoverOpen
+    }));
+  };
+
+  return Tooltip;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Tooltip, "defaultProps", {
+  openDelay: 500,
+  closeDelay: 300,
+  keepInView: true,
+  triggerOnFocus: true,
+  triggerOnHover: true,
+  defaultOpen: false
+});
+var _default = Tooltip;
+exports["default"] = _default;

package/dist/cjs/Tooltip/index.js

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

package/dist/cjs/VariantProvider/VariantProvider.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useVariant = useVariant;
+exports.VariantProvider = VariantProvider;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var VariantContext = /*#__PURE__*/(0, _react.createContext)();
+
+function useVariant() {
+  var variant = (0, _react.useContext)(VariantContext);
+  return variant ? Object.keys(variant).filter(function (key) {
+    return variant[key];
+  }) : null;
+}
+
+function VariantProvider(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children"]);
+  var parentVariant = useVariant();
+  return /*#__PURE__*/_react["default"].createElement(VariantContext.Provider, {
+    value: props
+  }, children);
+}

package/dist/cjs/VariantProvider/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useVariant = exports["default"] = void 0;
+
+var _VariantProvider = require("./VariantProvider");
+
+exports["default"] = _VariantProvider.VariantProvider;
+exports.useVariant = _VariantProvider.useVariant;

package/dist/cjs/Wizard/Step.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = require("react");
+
+var _WizardContext = _interopRequireDefault(require("./WizardContext"));
+
+function Step(_ref) {
+  var children = _ref.children,
+      name = _ref.name,
+      valid = _ref.valid;
+
+  var _useContext = (0, _react.useContext)(_WizardContext["default"]),
+      addStep = _useContext.addStep,
+      wizard = (0, _objectWithoutPropertiesLoose2["default"])(_useContext, ["addStep"]);
+
+  (0, _react.useEffect)(function () {
+    return addStep({
+      name: name,
+      valid: valid
+    });
+  }, []);
+  return children(wizard);
+}
+
+var _default = Step;
+exports["default"] = _default;