@planningcenter/tapestry-react 2.10.0-rc.4 → 2.10.0-rc.6

package/dist/esm/Input/Input.js

@@ -1,118 +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 } from 'react';
-import InputBox from './InputBox';
-import InputField from './InputField';
-
-var Input = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Input, _Component);
-
-  function Input() {
-    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), "setInputNode", function (node) {
-      _this.inputNode = node;
-    });
-
-    return _this;
-  }
-
-  var _proto = Input.prototype;
-
-  _proto.focus = function focus() {
-    this.inputNode.focus();
-  };
-
-  _proto.blur = function blur() {
-    this.inputNode.blur();
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        backgroundColor = _this$props.backgroundColor,
-        color = _this$props.color,
-        autoComplete = _this$props.autoComplete,
-        autoFocus = _this$props.autoFocus,
-        autoWidth = _this$props.autoWidth,
-        defaultValue = _this$props.defaultValue,
-        disabled = _this$props.disabled,
-        focus = _this$props.focus,
-        hover = _this$props.hover,
-        id = _this$props.id,
-        min = _this$props.min,
-        minLength = _this$props.minLength,
-        max = _this$props.max,
-        maxLength = _this$props.maxLength,
-        name = _this$props.name,
-        onBlur = _this$props.onBlur,
-        onChange = _this$props.onChange,
-        onFocus = _this$props.onFocus,
-        onKeyDown = _this$props.onKeyDown,
-        onKeyUp = _this$props.onKeyUp,
-        placeholder = _this$props.placeholder,
-        placeholderColor = _this$props.placeholderColor,
-        readOnly = _this$props.readOnly,
-        highlightOnInteraction = _this$props.highlightOnInteraction,
-        type = _this$props.type,
-        value = _this$props.value,
-        required = _this$props.required,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value", "required"]);
-
-    var ariaLabel = restProps['aria-label'];
-
-    if (ariaLabel) {
-      delete restProps['aria-label'];
-    }
-
-    return /*#__PURE__*/React.createElement(InputBox, _extends({
-      disabled: disabled,
-      backgroundColor: backgroundColor,
-      color: color,
-      focus: focus,
-      hover: hover
-    }, restProps), /*#__PURE__*/React.createElement(InputField, {
-      "aria-label": ariaLabel,
-      width: "100%",
-      textOverflow: "ellipsis",
-      innerRef: this.setInputNode,
-      backgroundColor: "transparent",
-      color: "inherit",
-      id: id,
-      autoComplete: autoComplete,
-      autoFocus: autoFocus,
-      autoWidth: autoWidth,
-      type: type,
-      name: name,
-      disabled: disabled,
-      readOnly: readOnly,
-      highlightOnInteraction: highlightOnInteraction,
-      placeholder: placeholder,
-      placeholderColor: placeholderColor,
-      defaultValue: defaultValue,
-      min: min,
-      minLength: minLength,
-      max: max,
-      maxLength: maxLength,
-      value: value,
-      onChange: onChange,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown,
-      onKeyUp: onKeyUp,
-      required: required
-    }));
-  };
-
-  return Input;
-}(Component);
-
-export default Input;

package/dist/esm/Input/InputBox.js

@@ -1,340 +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";
-
-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, { Component, cloneElement } from 'react';
-import { tabbable } from 'tabbable';
-import Box from '../Box';
-import Button from '../Button';
-import { getBoxSize } from '../system';
-import { useDocumentEvent } from '../hooks';
-import Spinner from '../Spinner';
-import StackView from '../StackView';
-import InputContext from './InputContext';
-import { inputs, isTabbable } from './utils';
-import { designTokens } from '../designTokens';
-
-// temporary until InputBox is converted to a functional component
-function DocumentEscape(_ref) {
-  var onEscape = _ref.onEscape;
-  useDocumentEvent('keydown', function (event) {
-    if (event.keyCode === 27) {
-      onEscape();
-    }
-  });
-  return null;
-}
-
-var InputBox = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(InputBox, _Component);
-
-  function InputBox(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "setNode", function (node) {
-      _this.node = node;
-
-      if (_this.props.innerRef) {
-        _this.props.innerRef(node);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getBoxStyles", function () {
-      // allow child components (InputField) to access parent size info
-      return getBoxSize(_this.props.size);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focus", function (index) {
-      if (index === void 0) {
-        index = _this.props.focusChildIndex;
-      }
-
-      var node = _this.node;
-
-      if (node && index !== undefined) {
-        var tabbableChildren = tabbable(node);
-
-        if (tabbableChildren.length > 0) {
-          node = tabbableChildren[index];
-        }
-      }
-
-      if (node && node.focus) {
-        node.focus();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "blur", function () {
-      if (isTabbable(_this.node)) {
-        _this.node.blur();
-      } else {
-        _this.setState({
-          isFocused: false
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
-      // only call focus method if focus was obtained by this element and not
-      // an inner element that can obtain focus
-      if (_this.props.focusChildrenOnFocus && e.target === _this.node) {
-        _this.focus();
-      }
-
-      if (_this.props.onFocus) {
-        _this.props.onFocus(e);
-      }
-
-      _this.setState({
-        isFocused: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
-      if (_this.props.onBlur) {
-        _this.props.onBlur(e);
-      }
-
-      _this.setState({
-        isFocused: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClear", function (e) {
-      if (_this.props.onClear) {
-        _this.props.onClear(e);
-      }
-
-      _this.focus();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOver", function (e) {
-      if (_this.props.onMouseOver) {
-        _this.props.onMouseOver(e);
-      }
-
-      _this.setState({
-        isHovered: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOut", function (e) {
-      if (_this.props.onMouseOut) {
-        _this.props.onMouseOut(e);
-      }
-
-      _this.setState({
-        isHovered: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDocumentEscape", function () {
-      _this.props.onClear();
-    });
-
-    if (props.id) {
-      inputs[props.id] = _assertThisInitialized(_this);
-    }
-
-    _this.state = {
-      isFocused: false,
-      isHovered: false
-    };
-    return _this;
-  }
-
-  var _proto = InputBox.prototype;
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    if (this.props.id) {
-      delete inputs[this.props.id];
-    }
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        _this$props$backgroun = _this$props.backgroundColor,
-        backgroundColor = _this$props$backgroun === void 0 ? 'surface' : _this$props$backgroun,
-        children = _this$props.children,
-        disabled = _this$props.disabled,
-        evenPadding = _this$props.evenPadding,
-        focusChildIndex = _this$props.focusChildIndex,
-        focusChildrenOnFocus = _this$props.focusChildrenOnFocus,
-        id = _this$props.id,
-        innerRef = _this$props.innerRef,
-        includeSpacing = _this$props.includeSpacing,
-        isLoading = _this$props.isLoading,
-        naked = _this$props.naked,
-        onClear = _this$props.onClear,
-        onBlur = _this$props.onBlur,
-        onFocus = _this$props.onFocus,
-        renderLeft = _this$props.renderLeft,
-        renderRight = _this$props.renderRight,
-        _this$props$secondary = _this$props.secondaryStroke,
-        secondaryStroke = _this$props$secondary === void 0 ? true : _this$props$secondary,
-        size = _this$props.size,
-        state = _this$props.state,
-        subdued = _this$props.subdued,
-        _this$props$tabIndex = _this$props.tabIndex,
-        tabIndex = _this$props$tabIndex === void 0 ? -1 : _this$props$tabIndex,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["backgroundColor", "children", "disabled", "evenPadding", "focusChildIndex", "focusChildrenOnFocus", "id", "innerRef", "includeSpacing", "isLoading", "naked", "onClear", "onBlur", "onFocus", "renderLeft", "renderRight", "secondaryStroke", "size", "state", "subdued", "tabIndex"]);
-
-    var _this$state = this.state,
-        isFocused = _this$state.isFocused,
-        isHovered = _this$state.isHovered;
-
-    var _this$getBoxStyles = this.getBoxStyles(),
-        boxSize = _this$getBoxStyles.boxSize,
-        fontSize = _this$getBoxStyles.fontSize,
-        lineHeight = _this$getBoxStyles.lineHeight,
-        paddingHorizontal = _this$getBoxStyles.paddingHorizontal,
-        paddingVertical = _this$getBoxStyles.paddingVertical;
-
-    var dynamicProps = {
-      backgroundColor: backgroundColor,
-      paddingVertical: paddingVertical,
-      fontSize: fontSize,
-      lineHeight: lineHeight,
-      tabIndex: tabIndex,
-      zIndex: isFocused || isHovered ? 2 : 1
-    };
-    var renderSideProps = {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: boxSize,
-      height: '100%',
-      position: 'absolute',
-      top: 0
-    };
-    var spacingLeft = renderLeft ? boxSize : paddingHorizontal;
-    var spacingRight = renderRight ? boxSize : paddingHorizontal;
-
-    if (restProps.radius === 'pill') {
-      dynamicProps.paddingLeft = spacingLeft;
-      dynamicProps.paddingRight = spacingRight;
-    } else if (restProps.radius === 'pill-left') {
-      dynamicProps.paddingLeft = spacingLeft;
-      dynamicProps.paddingRight = spacingRight;
-    } else if (restProps.radius === 'pill-right') {
-      dynamicProps.paddingLeft = spacingLeft;
-      dynamicProps.paddingRight = spacingRight;
-    } else {
-      dynamicProps.paddingLeft = spacingLeft;
-      dynamicProps.paddingRight = spacingRight;
-    }
-
-    if (isLoading || onClear) {
-      dynamicProps.paddingRight = boxSize;
-    }
-
-    if (subdued) {
-      dynamicProps.backgroundColor = !disabled && isFocused ? 'highlightSecondary' : !disabled && isHovered ? state ? state + "-1" : 'highlight' : state ? state + "-0" : 'surfaceTertiary';
-    } else if (!naked) {
-      if (secondaryStroke) {
-        dynamicProps.boxShadow = !disabled && isFocused ? '0px 0px 0px 2px var(--colors-separator-focus-secondary)' : undefined;
-      }
-
-      dynamicProps.strokeAlign = 'inside';
-      dynamicProps.strokeWeight = 1;
-      dynamicProps.stroke = !disabled && isFocused ? state || 'separatorFocus' : state || (!disabled && isHovered ? 'separatorHover' : 'separatorSecondary');
-    }
-
-    if (id) {
-      dynamicProps['aria-labelledby'] = id + "-label";
-    }
-
-    if (evenPadding) {
-      dynamicProps.paddingLeft = dynamicProps.paddingVertical;
-      dynamicProps.paddingRight = dynamicProps.paddingVertical;
-    }
-
-    if (includeSpacing) {
-      dynamicProps.spacing = evenPadding ? dynamicProps.paddingVertical : paddingHorizontal;
-    }
-
-    if (disabled) {
-      restProps.cursor = 'not-allowed';
-      restProps.tabIndex = undefined;
-      restProps.opacity = 0.64;
-    } else if (!naked) {
-      if (isHovered && restProps.hover) {
-        Object.assign(restProps, restProps.hover);
-      }
-
-      if (isFocused && restProps.focus) {
-        Object.assign(restProps, restProps.focus);
-      }
-
-      restProps = _objectSpread(_objectSpread({}, restProps), {}, {
-        hover: _objectSpread({
-          strokeAlign: 'inside',
-          strokeWeight: 1
-        }, restProps.hover),
-        focus: _objectSpread({
-          strokeAlign: 'inside',
-          strokeWeight: 1
-        }, restProps.focus)
-      });
-    }
-
-    return /*#__PURE__*/React.createElement(InputContext.Provider, {
-      value: this
-    }, /*#__PURE__*/React.createElement(StackView, _extends({
-      innerRef: this.setNode,
-      id: id,
-      axis: StackView.HORIZONTAL,
-      alignment: StackView.CENTER,
-      shrink: 0,
-      minHeight: boxSize,
-      radius: designTokens.input.borderRadius,
-      position: "relative",
-      cursor: "text",
-      outline: 0,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onMouseOver: this.handleMouseOver,
-      onMouseOut: this.handleMouseOut,
-      children: children
-    }, dynamicProps, restProps), renderLeft && /*#__PURE__*/React.createElement(Box, _extends({}, renderSideProps, {
-      left: 0
-    }), typeof renderLeft === 'function' ? renderLeft(size) : /*#__PURE__*/cloneElement(renderLeft, {
-      size: renderLeft.props && renderLeft.props.size || size
-    })), children, (isLoading || onClear || renderRight) && /*#__PURE__*/React.createElement(Box, _extends({}, renderSideProps, {
-      right: 0
-    }), isLoading ? /*#__PURE__*/React.createElement(Spinner, {
-      size: size
-    }) : onClear ? /*#__PURE__*/React.createElement(Button, {
-      icon: {
-        name: 'general.x'
-      },
-      title: "clear input value",
-      size: size,
-      theme: false,
-      onClick: this.handleClear
-    }) : typeof renderRight === 'function' ? renderRight(size) : /*#__PURE__*/cloneElement(renderRight, {
-      size: renderRight.props && renderRight.props.size || size
-    })), onClear && /*#__PURE__*/React.createElement(DocumentEscape, {
-      onEscape: this.handleDocumentEscape
-    })));
-  };
-
-  return InputBox;
-}(Component);
-
-_defineProperty(InputBox, "defaultProps", {
-  focusChildrenOnFocus: true,
-  focusChildIndex: 0,
-  size: 'md'
-});
-
-InputBox.displayName = 'Input.InputBox';
-export default InputBox;

package/dist/esm/Input/InputContext.js

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