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

package/dist/esm/Input/InputField.js

@@ -1,281 +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 Box from '../Box';
-import { getBoxSize } from '../system';
-import { deselectCurrentTextRange, getTextWidth, selectFullTextRange } from '../utils';
-import InputContext from './InputContext';
-import { inputs, inputLabels } from './utils';
-var resetStyles = {
-  appearance: 'none',
-  outline: 0,
-  boxShadow: 'none',
-  MozAppearance: 'textfield',
-  '::-ms-clear': {
-    display: 'none'
-  },
-  '::-webkit-clear-button': {
-    display: 'none'
-  },
-  '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
-    display: 'none'
-  },
-  '::-webkit-search-cancel-button': {
-    display: 'none'
-  }
-};
-
-var InputField = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(InputField, _Component);
-
-  function InputField(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), "getAutoWidthValue", function (defaultValue) {
-      return _this.props.autoWidth === true ? _this.props.value !== null && _this.props.value !== undefined ? _this.props.value : defaultValue : _this.props.autoWidth;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "preventFocus", function (event) {
-      if (_this.props.highlightOnInteraction && event.target === document.activeElement) {
-        event.preventDefault();
-        selectFullTextRange(event.target);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
-      if (_this.props.autoWidth !== undefined) {
-        if (_this.props.autoWidth === true) {
-          _this.setWidth(event.target.value);
-        } else {
-          _this.shouldUpdateWidth = true;
-        }
-      }
-
-      if (_this.props.onChange) {
-        _this.props.onChange(event);
-      }
-
-      _this.canHighlight = true;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      _this.canHighlight = true;
-
-      if (_this.props.onKeyDown) {
-        _this.props.onKeyDown(event);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (event) {
-      if (_this.props.highlightOnInteraction) {
-        selectFullTextRange(event.target);
-      }
-
-      if (_this.inputBox) {
-        _this.inputBox.setState({
-          isFocused: true
-        });
-      }
-
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
-      _this.canHighlight = false;
-
-      if (_this.props.highlightOnInteraction) {
-        deselectCurrentTextRange();
-      }
-
-      if (_this.inputBox) {
-        _this.inputBox.setState({
-          isFocused: false
-        });
-      }
-
-      if (_this.props.autoWidth !== undefined && _this.props.placeholder !== undefined && event.target.value === '') {
-        _this.setWidth(_this.props.placeholder);
-      }
-
-      if (_this.props.onBlur) {
-        _this.props.onBlur(event);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focus", function () {
-      _this.node.focus();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "blur", function () {
-      _this.node.blur();
-    });
-
-    _this.state = {
-      isHovered: false
-    };
-    _this.shouldUpdateWidth = false;
-
-    if (props.id) {
-      inputs[props.id] = _assertThisInitialized(_this);
-    }
-
-    return _this;
-  }
-
-  var _proto = InputField.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    if (this.props.autoWidth !== undefined) {
-      var autoWidthValue = this.getAutoWidthValue(this.props.defaultValue !== undefined ? this.props.defaultValue : this.props.placeholder);
-
-      if (autoWidthValue !== undefined) {
-        this.setWidth(autoWidthValue);
-      }
-    }
-  };
-
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (this.shouldUpdateWidth || this.props.autoWidth !== undefined && this.props.value !== undefined && this.props.value !== lastProps.value) {
-      this.setWidth(this.getAutoWidthValue(this.props.placeholder));
-      this.shouldUpdateWidth = false;
-    }
-
-    if (this.canHighlight && this.props.highlightOnInteraction) {
-      selectFullTextRange(this.node);
-      this.canHighlight = false;
-    }
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    if (this.props.id) {
-      delete inputs[this.props.id];
-    }
-  };
-
-  _proto.setWidth = function setWidth(text) {
-    var autoWidthType = this.props.autoWidthType;
-    var textWidth = getTextWidth(text, this.node);
-
-    if (textWidth !== this._lastTextWidth) {
-      var cursorWidth = 1;
-
-      var _getComputedStyle = getComputedStyle(this.node),
-          borderLeftWidth = _getComputedStyle.borderLeftWidth,
-          borderRightWidth = _getComputedStyle.borderRightWidth,
-          paddingLeft = _getComputedStyle.paddingLeft,
-          paddingRight = _getComputedStyle.paddingRight;
-
-      var totalWidth = [borderLeftWidth, borderRightWidth, cursorWidth, paddingLeft, paddingRight, textWidth].reduce(function (total, val) {
-        return total + parseInt(val, 10);
-      }, 0);
-
-      if (autoWidthType === 'width' || autoWidthType === 'both') {
-        this.node.style.width = totalWidth + "px";
-      }
-
-      if (autoWidthType === 'basis' || autoWidthType === 'both') {
-        this.node.style.flexBasis = totalWidth + "px";
-      }
-
-      this._lastTextWidth = textWidth;
-    }
-  };
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        autoWidth = _this$props.autoWidth,
-        autoWidthType = _this$props.autoWidthType,
-        css = _this$props.css,
-        disabled = _this$props.disabled,
-        innerRef = _this$props.innerRef,
-        onBlur = _this$props.onBlur,
-        onChange = _this$props.onChange,
-        onFocus = _this$props.onFocus,
-        onKeyDown = _this$props.onKeyDown,
-        onMouseDown = _this$props.onMouseDown,
-        onMouseUp = _this$props.onMouseUp,
-        placeholderColor = _this$props.placeholderColor,
-        highlightOnInteraction = _this$props.highlightOnInteraction,
-        size = _this$props.size,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["autoWidth", "autoWidthType", "css", "disabled", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onMouseDown", "onMouseUp", "placeholderColor", "highlightOnInteraction", "size"]);
-
-    var placeholderColorStyles = {
-      '::placeholder': {
-        color: placeholderColor
-      },
-      '::-webkit-input-placeholder': {
-        color: placeholderColor
-      },
-      ':-moz-placeholder': {
-        color: placeholderColor
-      },
-      ':-ms-input-placeholder': {
-        color: placeholderColor
-      }
-    };
-    return /*#__PURE__*/React.createElement(InputContext.Consumer, null, function (inputBox) {
-      var _ref = inputBox ? inputBox.getBoxStyles() : getBoxSize(size),
-          fontSize = _ref.fontSize,
-          lineHeight = _ref.lineHeight;
-
-      if (!_this2.inputBox) {
-        _this2.inputBox = inputBox;
-      }
-
-      if (inputLabels[_this2.props.id]) {
-        restProps['aria-labelledby'] = _this2.props.id + "-label";
-      }
-
-      if (_this2.state.isHovered && restProps.hover) {
-        Object.assign(restProps, restProps.hover);
-      }
-
-      return /*#__PURE__*/React.createElement(Box, _extends({
-        as: "input",
-        innerRef: _this2.setNode,
-        disabled: disabled,
-        grow: 1,
-        padding: 0,
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        fontSize: fontSize,
-        lineHeight: lineHeight,
-        minHeight: lineHeight,
-        onFocus: _this2.handleFocus,
-        onBlur: _this2.handleBlur,
-        onChange: _this2.handleChange,
-        onKeyDown: _this2.handleKeyDown,
-        onMouseDown: _this2.preventFocus,
-        onMouseUp: _this2.preventFocus,
-        css: [resetStyles, placeholderColorStyles, css]
-      }, restProps));
-    });
-  };
-
-  return InputField;
-}(Component);
-
-_defineProperty(InputField, "defaultProps", {
-  placeholderColor: 'foregroundTertiary',
-  autoWidthType: 'both'
-});
-
-InputField.displayName = 'Input.InputField';
-export default InputField;

package/dist/esm/Input/InputLabel.js

@@ -1,56 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useRef, useEffect } from 'react';
-import { getColor } from '../system';
-import Text from '../Text';
-import { useThemeProps } from '../system';
-import { inputs, inputLabels } from './utils';
-
-function InputLabel(_ref) {
-  var controls = _ref.controls,
-      state = _ref.state,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["controls", "state"]);
-
-  var _useThemeProps = useThemeProps('inputLabel', restProps),
-      themeProps = _extends({}, _useThemeProps);
-
-  var input = useRef(null);
-
-  if (controls) {
-    themeProps.id = controls + "-label";
-  }
-
-  if (state) {
-    themeProps.color = getColor(state);
-  }
-
-  useEffect(function () {
-    input.current = inputs[controls];
-    inputLabels[controls] = true;
-    return function () {
-      delete inputLabels[controls];
-    };
-  }, []);
-  var focusInput = useCallback(function () {
-    input.current && input.current.focus();
-  }, [input]);
-  var handleMouseOver = useCallback(function () {
-    input.current && input.current.setState({
-      isHovered: true
-    });
-  }, [input]);
-  var handleMouseOut = useCallback(function () {
-    input.current && input.current.setState({
-      isHovered: false
-    });
-  }, [input]);
-  return /*#__PURE__*/React.createElement(Text, _extends({
-    as: "label",
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onClick: focusInput
-  }, themeProps));
-}
-
-InputLabel.displayName = 'Input.InputLabel';
-export default InputLabel;

package/dist/esm/Input/index.js

@@ -1,10 +0,0 @@
-import Inline from './Inline';
-import Input from './Input';
-import InputBox from './InputBox';
-import InputField from './InputField';
-import InputLabel from './InputLabel';
-Input.Inline = Inline;
-Input.InputBox = InputBox;
-Input.InputField = InputField;
-Input.InputLabel = InputLabel;
-export default Input;

package/dist/esm/Input/utils.js

@@ -1,5 +0,0 @@
-export var inputs = {};
-export var inputLabels = {};
-export function isTabbable(node) {
-  return ['BUTTON', 'INPUT'].indexOf(node.tagName) > -1 || parseInt(node.getAttribute('tabindex'), 10) > -1;
-}

package/dist/esm/ItemList/ItemList.js

@@ -1,275 +0,0 @@
-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 ItemListContext from './ItemListContext';
-import { isComboKey, isLetterKey, isNumberKey, isSpecialKey, modulo, scrollIntoView } from './utils';
-var itemListId = 0;
-
-var ItemList = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(ItemList, _Component);
-
-  function ItemList() {
-    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), "controllers", []);
-
-    _defineProperty(_assertThisInitialized(_this), "highlightedIndex", null);
-
-    _defineProperty(_assertThisInitialized(_this), "id", "item-list-" + itemListId++);
-
-    _defineProperty(_assertThisInitialized(_this), "items", []);
-
-    _defineProperty(_assertThisInitialized(_this), "searchString", '');
-
-    _defineProperty(_assertThisInitialized(_this), "getItemId", function (index) {
-      return index === null ? null : _this.id + "-item-" + index;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getItemNode", function (index) {
-      return index === null ? null : _this.items[index].getNode();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getItemByText", function (text) {
-      for (var index = 0; index < _this.items.length; index++) {
-        var item = _this.items[index];
-        var itemText = item.props.text || String(item.props.data);
-
-        if (!item.props.disabled && itemText.toLowerCase().indexOf(text) === 0) {
-          return item;
-        }
-      }
-
-      return null;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "subscribeController", function (controllerInstance) {
-      _this.controllers.push(controllerInstance);
-
-      return function () {
-        _this.controllers.splice(_this.controllers.indexOf(controllerInstance), 1);
-      };
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "subscribeItem", function (itemInstance) {
-      _this.items.push(itemInstance);
-
-      return function () {
-        // if item was highlighted we need to null the highlightedIndex on unsubscribe
-        if (itemInstance.props.index === _this.highlightedIndex) {
-          _this.highlightedIndex = null;
-        }
-
-        _this.items.splice(_this.items.indexOf(itemInstance), 1);
-      };
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "scrollItemIntoViewByIndex", function (index) {
-      var itemNode = _this.getItemNode(index);
-
-      if (itemNode) {
-        scrollIntoView(itemNode);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "stringSearch", function (event, delay) {
-      if (delay === void 0) {
-        delay = 300;
-      }
-
-      return new Promise(function (resolve) {
-        if ((isNumberKey(event) || isLetterKey(event) || isSpecialKey(event)) && !isComboKey(event)) {
-          event.preventDefault();
-
-          _this.addToSearchString(event.key);
-
-          _this.startSearchStringRefreshTimer(delay);
-
-          resolve(_this.searchString);
-        }
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "addToSearchString", function (letter) {
-      _this.searchString += letter.toLowerCase();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "clearSearchString", function () {
-      _this.searchString = '';
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "startSearchStringRefreshTimer", function (delay) {
-      _this.clearSearchStringRefreshTimer();
-
-      _this.stringSearchTimer = setTimeout(function () {
-        _this.clearSearchString();
-      }, delay);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "clearSearchStringRefreshTimer", function () {
-      clearTimeout(_this.stringSearchTimer);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getHighlightedIndex", function () {
-      return _this.highlightedIndex;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getHighlightedItemId", function () {
-      return _this.highlightedItemId;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setHighlightedIndex", function (index, _temp) {
-      var _ref = _temp === void 0 ? {} : _temp,
-          _ref$focus = _ref.focus,
-          focus = _ref$focus === void 0 ? false : _ref$focus,
-          _ref$maybeScrollIntoV = _ref.maybeScrollIntoView,
-          maybeScrollIntoView = _ref$maybeScrollIntoV === void 0 ? true : _ref$maybeScrollIntoV;
-
-      var event = {
-        lastIndex: _this.highlightedIndex,
-        newIndex: index
-      };
-      var item = _this.items[index];
-
-      if (_this.items.length === 0) {
-        return;
-      }
-
-      if (item && item.props.disabled) {
-        index = null;
-      }
-
-      if (index !== null) {
-        var itemNode = _this.getItemNode(index);
-
-        if (maybeScrollIntoView) {
-          scrollIntoView(itemNode);
-        }
-
-        if (focus) {
-          itemNode.focus();
-        }
-      }
-
-      if (_this.props.onHighlight) {
-        _this.props.onHighlight(event);
-      }
-
-      _this.items.forEach(function (itemInstance) {
-        if (itemInstance.props.index === index) {
-          itemInstance.highlighted = true;
-          itemInstance.forceUpdate();
-        } else if (itemInstance.highlighted) {
-          itemInstance.highlighted = false;
-          itemInstance.forceUpdate();
-        } else {
-          itemInstance.highlighted = false;
-        }
-      });
-
-      _this.controllers.forEach(function (controllerInstance) {
-        controllerInstance.highlightedItemId = _this.getItemId(index);
-        controllerInstance.forceUpdate();
-      });
-
-      _this.highlightedIndex = index;
-      _this.highlightedItemId = _this.getItemId(index);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "moveHighlightedIndex", function (amount, _temp2) {
-      var _ref2 = _temp2 === void 0 ? {} : _temp2,
-          _ref2$contain = _ref2.contain,
-          contain = _ref2$contain === void 0 ? true : _ref2$contain,
-          focus = _ref2.focus,
-          maybeScrollIntoView = _ref2.maybeScrollIntoView;
-
-      var itemCount = _this.items.length;
-      var index = _this.highlightedIndex;
-
-      if (index === null) {
-        index = amount >= 0 ? 0 : itemCount - 1;
-      } else {
-        index += amount;
-
-        if (index < 0 || index >= itemCount) {
-          index = contain ? modulo(_this.highlightedIndex + amount, itemCount) : null;
-        }
-      }
-
-      var item = _this.items[index];
-
-      if (item && item.props.disabled) {
-        _this.highlightedIndex = index;
-
-        _this.moveHighlightedIndex(amount, {
-          contain: contain,
-          focus: focus,
-          maybeScrollIntoView: maybeScrollIntoView
-        });
-      } else {
-        _this.setHighlightedIndex(index, {
-          focus: focus,
-          maybeScrollIntoView: maybeScrollIntoView
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "clearHighlightedIndex", function () {
-      _this.setHighlightedIndex(null);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "selectItemByIndex", function (index) {
-      var item = _this.items[index];
-
-      if (item) {
-        _this.props.onSelect(item.props.data, {
-          index: item.props.index,
-          node: item.node
-        });
-
-        if (item.props.onSelect) {
-          item.props.onSelect(item.node);
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "selectItem", function (index) {
-      _this.selectItemByIndex(index);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "selectHighlightedItem", function () {
-      if (_this.highlightedIndex !== null) {
-        _this.selectItemByIndex(_this.highlightedIndex);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "isItemSelected", function (data) {
-      var selected = _this.props.selected;
-      return typeof selected === 'function' ? selected(data) : selected === data;
-    });
-
-    return _this;
-  } // String Search
-  // Highlight
-  // Select
-
-
-  var _proto = ItemList.prototype;
-
-  _proto.render = function render() {
-    var children = this.props.children;
-    return /*#__PURE__*/React.createElement(ItemListContext.Provider, {
-      value: this
-    }, typeof children === 'function' ? children(this) : children);
-  };
-
-  return ItemList;
-}(Component);
-
-export default ItemList;

package/dist/esm/ItemList/ItemListContext.js

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

package/dist/esm/ItemList/ItemListController.js

@@ -1,56 +0,0 @@
-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 } from 'react';
-import ItemListContext from './ItemListContext';
-
-var ItemListController = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(ItemListController, _Component);
-
-  function ItemListController() {
-    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), "highlightedItemId", null);
-
-    return _this;
-  }
-
-  var _proto = ItemListController.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.unsubsribeController = this.itemList.subscribeController(this);
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.unsubsribeController();
-  };
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    return /*#__PURE__*/React.createElement(ItemListContext.Consumer, null, function (itemList) {
-      if (!_this2.itemList) {
-        _this2.itemList = itemList;
-      }
-
-      return _this2.props.children(_objectSpread(_objectSpread({}, itemList), {}, {
-        highlightedItemId: _this2.highlightedItemId
-      }));
-    });
-  };
-
-  return ItemListController;
-}(Component);
-
-export default ItemListController;