@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/dist/esm/TokenInput/TokenInput.js

@@ -1,251 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

package/dist/esm/Toolbar/Action.js

@@ -1,17 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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 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

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

package/dist/esm/Tooltip/Tooltip.js

@@ -1,194 +0,0 @@
-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,
-      childProps = _objectWithoutPropertiesLoose(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
-
-  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: 9999
-  }, 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;