@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

package/dist/esm/TokenInput/TokenInput.js

@@ -0,0 +1,251 @@
+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, cloneElement } from 'react';
+import { getBoxSize, navigateSize } from '../system';
+import InputBox from '../Input/InputBox';
+import WrapView from '../WrapView';
+import { defaultRenderToken, defaultRenderInput } from './default-renders';
+import DefaultToken from './DefaultToken';
+
+var TokenInput = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(TokenInput, _Component);
+
+  function TokenInput() {
+    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", {
+      inputValue: ''
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearInputValue", function () {
+      _this.setState({
+        inputValue: ''
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "addToken", function (token) {
+      var newTokens = [].concat(_this.props.tokens);
+      var tokenIndex = newTokens.indexOf(token);
+
+      if (tokenIndex > -1) {
+        var removed = newTokens.splice(tokenIndex, 1);
+        newTokens.push(removed[0]);
+      } else {
+        newTokens.push(token);
+      }
+
+      if (_this.props.onChange) {
+        _this.props.onChange({
+          token: token,
+          tokenIndex: tokenIndex,
+          tokens: newTokens,
+          added: true
+        });
+      }
+
+      _this.clearInputValue();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "removeToken", function (token, focusIndex) {
+      var newTokens = [].concat(_this.props.tokens);
+      var tokenIndex = -1;
+
+      if (token.constructor === Array) {
+        token.some(function (val) {
+          tokenIndex = newTokens.indexOf(val);
+
+          if (tokenIndex > -1) {
+            newTokens.splice(tokenIndex, 1);
+            return true;
+          }
+
+          return false;
+        });
+      } else {
+        tokenIndex = newTokens.indexOf(token);
+
+        if (tokenIndex > -1) {
+          newTokens.splice(tokenIndex, 1);
+        }
+      }
+
+      if (_this.props.onChange) {
+        _this.props.onChange({
+          token: token,
+          tokenIndex: tokenIndex,
+          tokens: newTokens,
+          added: false
+        });
+      }
+
+      if (typeof focusIndex === 'number') {
+        setTimeout(function () {
+          _this.focus(focusIndex >= newTokens.length ? undefined : focusIndex);
+        });
+      } else {
+        _this.blur();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleInputKeyDown", function (e) {
+      var _e$target = e.target,
+          selectionStart = _e$target.selectionStart,
+          selectionEnd = _e$target.selectionEnd;
+      var canMoveFocusBackward = selectionStart === 0 && selectionEnd === 0;
+
+      if (_this.props.tokens.length > 0 && canMoveFocusBackward && (e.key === 'Backspace' || e.key === 'ArrowLeft')) {
+        e.preventDefault();
+
+        _this.focusLastToken();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (e) {
+      _this.setState({
+        inputValue: e.target.value
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "blur", function () {
+      _this.inputBox.blur();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "focus", function (index) {
+      _this.inputBox.focus(index);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "focusFirstToken", function () {
+      _this.focus(0);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "focusLastToken", function () {
+      _this.focus(_this.props.tokens.length - 1);
+    });
+
+    return _this;
+  }
+
+  var _proto = TokenInput.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.tokens.length !== this.props.tokens.length) {
+      this.clearInputValue();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        onChange = _this$props.onChange,
+        renderInput = _this$props.renderInput,
+        renderToken = _this$props.renderToken,
+        tokens = _this$props.tokens,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["onChange", "renderInput", "renderToken", "tokens"]);
+
+    var inputProps = {
+      size: navigateSize(restProps.size, -1),
+      stroke: false,
+      strokeWeight: 0,
+      grow: 1,
+      shrink: 1,
+      paddingLeft: 0,
+      paddingRight: 0,
+      paddingVertical: 0,
+      onKeyDown: this.handleInputKeyDown,
+      onChange: this.handleInputChange,
+      value: this.state.inputValue
+    };
+
+    var _getBoxSize = getBoxSize(restProps.size),
+        paddingVertical = _getBoxSize.paddingVertical;
+
+    return /*#__PURE__*/React.createElement(WrapView, _extends({
+      as: InputBox,
+      innerRef: function innerRef(c) {
+        return _this2.inputBox = c;
+      },
+      role: "group",
+      focusChildIndex: tokens.length,
+      evenPadding: true,
+      spacing: paddingVertical
+    }, restProps), tokens.map(function (token, tokenIndex) {
+      var removeToken = _this2.removeToken.bind(_this2, token);
+
+      var selectFirstToken = _this2.focusFirstToken;
+      var selectLastToken = _this2.focusLastToken;
+
+      var selectNextToken = _this2.focus.bind(_this2, tokenIndex + 1);
+
+      var selectPreviousToken = _this2.focus.bind(_this2, tokenIndex - 1);
+
+      var tokenToRender = renderToken(token, {
+        keyboardControls: {
+          tabIndex: 0,
+          onKeyDown: function onKeyDown(e) {
+            if (e.key === 'Backspace') {
+              e.preventDefault();
+              removeToken(tokenIndex);
+            }
+
+            if (e.key === 'ArrowLeft') {
+              e.preventDefault();
+              selectPreviousToken();
+            }
+
+            if (e.key === 'ArrowRight') {
+              e.preventDefault();
+              selectNextToken();
+            }
+          }
+        },
+        removeToken: removeToken,
+        selectFirstToken: selectFirstToken,
+        selectLastToken: selectLastToken,
+        selectNextToken: selectNextToken,
+        selectPreviousToken: selectPreviousToken,
+        tokenIndex: tokenIndex
+      });
+      return typeof tokenToRender === 'string' ? /*#__PURE__*/React.createElement(DefaultToken, {
+        key: tokenToRender,
+        removeToken: removeToken,
+        selectFirstToken: selectFirstToken,
+        selectLastToken: selectLastToken,
+        selectNextToken: selectNextToken,
+        selectPreviousToken: selectPreviousToken,
+        token: tokenToRender,
+        tokenIndex: tokenIndex
+      }) : /*#__PURE__*/cloneElement(tokenToRender, {
+        key: JSON.stringify(token)
+      });
+    }), renderInput(inputProps, {
+      clearInputValue: this.clearInputValue,
+      addToken: this.addToken,
+      removeToken: this.removeToken,
+      selectFirstToken: this.focusFirstToken,
+      selectLastToken: this.focusLastToken
+    }));
+  };
+
+  return TokenInput;
+}(Component);
+
+_defineProperty(TokenInput, "Token", DefaultToken);
+
+_defineProperty(TokenInput, "defaultProps", {
+  tokens: null,
+  renderToken: defaultRenderToken,
+  renderInput: defaultRenderInput,
+  size: 'md'
+});
+
+export default TokenInput;

package/dist/esm/TokenInput/default-renders.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import InputField from '../Input/InputField';
+import DefaultToken from './DefaultToken';
+export function defaultRenderToken(token, _ref) {
+  var keyboardControls = _ref.keyboardControls,
+      removeToken = _ref.removeToken,
+      selectFirstToken = _ref.selectFirstToken,
+      selectLastToken = _ref.selectLastToken,
+      selectNextToken = _ref.selectNextToken,
+      selectPreviousToken = _ref.selectPreviousToken,
+      tokenIndex = _ref.tokenIndex;
+  return /*#__PURE__*/React.createElement(DefaultToken, {
+    keyboardControls: keyboardControls,
+    removeToken: removeToken,
+    selectFirstToken: selectFirstToken,
+    selectLastToken: selectLastToken,
+    selectNextToken: selectNextToken,
+    selectPreviousToken: selectPreviousToken,
+    token: token,
+    tokenIndex: tokenIndex
+  });
+}
+export function defaultRenderInput(_ref2, _ref3) {
+  var addToken = _ref3.addToken;
+
+  var _onKeyDown = _ref2.onKeyDown,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["onKeyDown"]);
+
+  return /*#__PURE__*/React.createElement(InputField, _extends({
+    onKeyDown: function onKeyDown(e) {
+      if (e.target.value !== '' && e.key === 'Enter') {
+        addToken(e.target.value);
+      }
+
+      if (_onKeyDown) {
+        _onKeyDown(e);
+      }
+    }
+  }, restProps));
+}

package/dist/esm/TokenInput/index.js

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

package/dist/esm/Toolbar/Action.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Button from '../Button';
+
+function ToolbarAction(_ref) {
+  var secondary = _ref.secondary,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["secondary"]);
+
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    size: "xs",
+    theme: "primary",
+    variant: secondary ? 'naked' : 'outline'
+  }, restProps));
+}
+
+export default ToolbarAction;

package/dist/esm/Toolbar/Toolbar.js

@@ -0,0 +1,99 @@
+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'; // @ts-ignore Should this be ReactNode anyway?
+
+import Badge from '../Badge';
+import HelperDrawer from '../HelperDrawer';
+import StackView from '../StackView';
+import { generateId } from '../utils';
+import ToolbarAction from './Action';
+
+var Toolbar = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(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;
+
+    _defineProperty(_assertThisInitialized(_this), "helperDrawerId", 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 = _objectWithoutPropertiesLoose(_this$props, ["actions", "count", "countColor", "helpContent", "onStatusClearRequest", "status", "title"]);
+
+    return /*#__PURE__*/React.createElement(StackView, restProps, /*#__PURE__*/React.createElement(StackView, {
+      alignment: "center",
+      axis: "horizontal",
+      distribution: "space-between",
+      spacing: 1
+    }, /*#__PURE__*/React.createElement(StackView, {
+      alignment: "center",
+      axis: "horizontal",
+      grow: 1,
+      shrink: 1
+    }, title, count && /*#__PURE__*/React.createElement(Badge, {
+      color: countColor,
+      marginLeft: 0.75,
+      radius: "circle",
+      size: "xs",
+      title: count
+    }), helpContent && /*#__PURE__*/React.createElement(HelperDrawer.Toggle, {
+      drawerId: this.helperDrawerId,
+      marginLeft: 0.25,
+      tooltip: {
+        title: 'More info',
+        triggerOnFocus: false
+      }
+    })), (status || actions) && /*#__PURE__*/React.createElement(StackView, {
+      axis: "horizontal",
+      spacing: status && actions ? 1 : 0
+    }, status && /*#__PURE__*/React.createElement(Badge.Status, {
+      onClearRequest: onStatusClearRequest,
+      size: "xs",
+      status: status,
+      title: status === 'success' ? 'Saved' : 'Error'
+    }), actions && /*#__PURE__*/React.createElement(StackView, {
+      axis: "horizontal",
+      spacing: actions.length > 1 ? 1 : 0
+    }, Children.map(actions, function (child) {
+      return child && child.type.displayName === 'ToolbarAction' ? child : /*#__PURE__*/cloneElement(child, {
+        size: child.props.size || 'xs',
+        theme: child.props.theme || 'primary',
+        variant: child.props.variant || 'outline'
+      });
+    })))), helpContent && /*#__PURE__*/React.createElement(HelperDrawer, {
+      children: helpContent,
+      id: this.helperDrawerId,
+      marginTop: 1
+    }));
+  };
+
+  return Toolbar;
+}(Component);
+
+_defineProperty(Toolbar, "Action", ToolbarAction);
+
+_defineProperty(Toolbar, "defaultProps", {
+  countColor: 'grey-7'
+});
+
+export default Toolbar;

package/dist/esm/Toolbar/index.js

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

package/dist/esm/Tooltip/Tooltip.js

@@ -0,0 +1,196 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Children, cloneElement, forwardRef, useRef, useState, useImperativeHandle, useEffect } from 'react';
+import mitt from 'mitt';
+import Popover from '../Popover';
+import { composeEvents, pageViewChange } from '../utils';
+import { useThemeProps } from '../system';
+var emitter = mitt();
+var globalTimeoutId = null;
+var instantDelay = false;
+
+function startGlobalTimeout() {
+  instantDelay = true;
+  globalTimeoutId = setTimeout(function () {
+    instantDelay = false;
+  }, 500);
+}
+
+function clearGlobalTimeout() {
+  clearTimeout(globalTimeoutId);
+}
+
+function Tooltip(props, ref) {
+  var _useThemeProps = useThemeProps('tooltip', props),
+      children = _useThemeProps.children,
+      _useThemeProps$openDe = _useThemeProps.openDelay,
+      openDelay = _useThemeProps$openDe === void 0 ? 500 : _useThemeProps$openDe,
+      _useThemeProps$closeD = _useThemeProps.closeDelay,
+      closeDelay = _useThemeProps$closeD === void 0 ? 300 : _useThemeProps$closeD,
+      _useThemeProps$defaul = _useThemeProps.defaultOpen,
+      defaultOpen = _useThemeProps$defaul === void 0 ? false : _useThemeProps$defaul,
+      _useThemeProps$keepIn = _useThemeProps.keepInView,
+      keepInView = _useThemeProps$keepIn === void 0 ? true : _useThemeProps$keepIn,
+      placement = _useThemeProps.placement,
+      popoverProps = _useThemeProps.popoverProps,
+      renderTo = _useThemeProps.renderTo,
+      title = _useThemeProps.title,
+      _useThemeProps$trigge = _useThemeProps.triggerOnFocus,
+      triggerOnFocus = _useThemeProps$trigge === void 0 ? true : _useThemeProps$trigge,
+      _useThemeProps$trigge2 = _useThemeProps.triggerOnHover,
+      triggerOnHover = _useThemeProps$trigge2 === void 0 ? true : _useThemeProps$trigge2,
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 9999 : _useThemeProps$zIndex,
+      childProps = _objectWithoutPropertiesLoose(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover", "zIndex"]);
+
+  var isPageInView = useRef(true);
+  var isMouseDown = useRef(false);
+  var openTimeoutId = useRef(null);
+  var closeTimeoutId = useRef(null);
+
+  var _useState = useState(defaultOpen),
+      isPopoverOpen = _useState[0],
+      setIsPopoverOpen = _useState[1];
+
+  useEffect(function () {
+    // prevents tooltips showing when focused and navigating back to a page after leaving
+    var cleanupPageViewChange = pageViewChange(function (inView) {
+      return setTimeout(function () {
+        return isPageInView.current = inView;
+      });
+    });
+    emitter.on('CLOSE_OPEN_TOOLTIPS', close);
+    return function () {
+      emitter.off('CLOSE_OPEN_TOOLTIPS', close);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
+      cleanupPageViewChange();
+    };
+  }, []);
+
+  var open = function open() {
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
+    setIsPopoverOpen(true);
+  };
+
+  var close = function close() {
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
+    setIsPopoverOpen(false);
+  };
+
+  var toggle = function toggle() {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      close: close,
+      toggle: toggle
+    };
+  });
+  useEffect(function () {
+    if (triggerOnFocus === false) {
+      close();
+    }
+  }, [triggerOnFocus]);
+  useEffect(function () {
+    if (triggerOnHover === false) {
+      close();
+    }
+  }, [triggerOnHover]);
+
+  var createOpenTimeout = function createOpenTimeout() {
+    clearGlobalTimeout();
+
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
+
+      if (isPopoverOpen === false) {
+        emitter.emit('CLOSE_OPEN_TOOLTIPS');
+        openTimeoutId.current = setTimeout(function () {
+          return open();
+        }, instantDelay ? 0 : openDelay);
+      }
+    }
+  };
+
+  var createCloseTimeout = function createCloseTimeout() {
+    startGlobalTimeout();
+
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
+      }, closeDelay);
+    }
+  };
+
+  var handleFocus = function handleFocus() {
+    if (isPageInView.current && !isMouseDown.current) {
+      open();
+    }
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    isMouseDown.current = true;
+    close();
+  };
+
+  var handleMouseUp = function handleMouseUp() {
+    isMouseDown.current = false;
+  };
+
+  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(handleFocus, onFocus);
+    childProps.onBlur = composeEvents(close, onBlur);
+    childProps.onMouseDown = composeEvents(handleMouseDown, onMouseDown);
+    childProps.onMouseUp = composeEvents(handleMouseUp, onMouseUp);
+  }
+
+  if (triggerOnHover) {
+    childProps.onMouseEnter = composeEvents(createOpenTimeout, onMouseEnter);
+    childProps.onMouseLeave = composeEvents(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: zIndex
+  }, popoverProps, {
+    anchorElement: /*#__PURE__*/cloneElement(child, childProps),
+    onMouseEnter: createOpenTimeout,
+    onMouseLeave: createCloseTimeout,
+    keepInView: keepInView,
+    placement: placement,
+    renderTo: renderTo,
+    children: title,
+    open: isPopoverOpen
+  }));
+}
+
+Tooltip = /*#__PURE__*/forwardRef(Tooltip);
+export default Tooltip;