@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Collapse/Collapse.js

@@ -0,0 +1,123 @@
+"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 _core = require("@emotion/core");
+
+var _react = require("react");
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+var transition = 'height 200ms ease-out';
+
+function Collapse(props) {
+  var children = props.children,
+      instant = props.instant,
+      lazy = props.lazy,
+      onComplete = props.onComplete,
+      open = props.open,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["children", "instant", "lazy", "onComplete", "open"]);
+
+  var _useState = (0, _react.useState)(lazy ? open : true),
+      renderChildren = _useState[0],
+      setRenderChildren = _useState[1];
+
+  var ref = (0, _react.useRef)();
+  var firstRender = (0, _react.useRef)(true);
+  var instantRender = instant || firstRender.current;
+
+  function openCollapse() {
+    var node = ref.current;
+    requestAnimationFrame(function () {
+      node.style.height = node.scrollHeight + 'px';
+    });
+  }
+
+  function closeCollapse() {
+    var node = ref.current;
+    requestAnimationFrame(function () {
+      node.style.height = node.offsetHeight + 'px';
+      node.style.overflow = 'hidden';
+      requestAnimationFrame(function () {
+        node.style.height = 0;
+      });
+    });
+  }
+
+  (0, _react.useLayoutEffect)(function () {
+    if (lazy) {
+      if (open) {
+        if (renderChildren) {
+          openCollapse();
+        } else {
+          setRenderChildren(true);
+        }
+      } else {
+        closeCollapse();
+      }
+    } else {
+      if (open) {
+        openCollapse();
+      } else {
+        closeCollapse();
+      }
+    }
+  }, [open, renderChildren]);
+  (0, _react.useLayoutEffect)(function () {
+    var node = ref.current;
+
+    function handleComplete() {
+      node.style.overflow = open ? 'initial' : 'hidden';
+
+      if (open) {
+        requestAnimationFrame(function () {
+          node.style.margin = null;
+          node.style.height = 'auto';
+        });
+      }
+
+      if (!open && lazy) {
+        node.style.margin = '0';
+        setRenderChildren(false);
+      }
+
+      if (firstRender.current) {
+        firstRender.current = false;
+      } else if (onComplete) {
+        onComplete();
+      }
+    }
+
+    function handleTransitionEnd(event) {
+      if (event.target === node && event.propertyName === 'height') {
+        handleComplete();
+      }
+    }
+
+    if (instantRender) {
+      handleComplete();
+    }
+
+    node.addEventListener('transitionend', handleTransitionEnd);
+    return function () {
+      node.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, [open]);
+  return (0, _core.jsx)("div", (0, _extends2["default"])({
+    ref: ref,
+    css: {
+      transition: instantRender ? undefined : transition
+    }
+  }, restProps), renderChildren ? children : null);
+}
+
+var _default = Collapse;
+exports["default"] = _default;

package/dist/cjs/Collapse/index.js

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

package/dist/cjs/ColumnView/ColumnView.js

@@ -0,0 +1,63 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+function Column() {
+  return null;
+}
+
+function ColumnView(props) {
+  var children = props.children,
+      _props$sizes = props.sizes,
+      sizes = _props$sizes === void 0 ? [] : _props$sizes,
+      spacing = props.spacing,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["children", "sizes", "spacing"]);
+
+  var sortedColumns = _react.Children.toArray(children).sort(function (a, b) {
+    return (a.props.order || 0) - (b.props.order || 0);
+  }).reduce(function (columns, cell, index) {
+    var columnIndex = cell.props.index === undefined ? index : cell.props.index;
+
+    if (!columns[columnIndex]) {
+      columns[columnIndex] = [];
+    }
+
+    columns[columnIndex].push(cell);
+    return columns;
+  }, []);
+
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal",
+    grow: 1,
+    shrink: 1
+  }, restProps), sortedColumns.map(function (column, index) {
+    var size = sizes ? sizes[index] || 'auto' : 'auto';
+    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      key: index,
+      basis: size === 'auto' ? '100%' : size.basis || size,
+      shrink: size === 'auto' ? 1 : size.shrink || 0,
+      grow: size === 'auto' ? 1 : size.grow || 0,
+      marginLeft: index === 0 ? null : spacing,
+      spacing: spacing
+    }, column.map(function (cell) {
+      return cell.props.children;
+    }));
+  }));
+}
+
+ColumnView.Column = Column;
+var _default = ColumnView;
+exports["default"] = _default;

package/dist/cjs/ColumnView/index.js

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

package/dist/cjs/Combobox/Combobox.js

@@ -0,0 +1,62 @@
+"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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _ItemList = require("../ItemList");
+
+var _ComboboxInput = _interopRequireDefault(require("./ComboboxInput"));
+
+var _ComboboxItem = _interopRequireDefault(require("./ComboboxItem"));
+
+var _ComboboxItems = _interopRequireDefault(require("./ComboboxItems"));
+
+var _ComboboxPopover = _interopRequireDefault(require("./ComboboxPopover"));
+
+var Combobox = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(Combobox, _Component);
+
+  function Combobox() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Combobox.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        multiple = _this$props.multiple,
+        onSelect = _this$props.onSelect,
+        selectedValue = _this$props.selectedValue,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["children", "multiple", "onSelect", "selectedValue"]);
+    return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemList, {
+      selected: function selected(item) {
+        return item.value === selectedValue;
+      },
+      onSelect: onSelect
+    }, /*#__PURE__*/_react["default"].createElement(_Box["default"], restProps, children));
+  };
+
+  return Combobox;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Combobox, "Input", _ComboboxInput["default"]);
+(0, _defineProperty2["default"])(Combobox, "Item", _ComboboxItem["default"]);
+(0, _defineProperty2["default"])(Combobox, "Items", _ComboboxItems["default"]);
+(0, _defineProperty2["default"])(Combobox, "Popover", _ComboboxPopover["default"]);
+var _default = Combobox;
+exports["default"] = _default;

package/dist/cjs/Combobox/ComboboxInput.js

@@ -0,0 +1,171 @@
+"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 _Input = _interopRequireDefault(require("../Input"));
+
+var _ItemList = require("../ItemList");
+
+var ComboboxInput = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(ComboboxInput, _Component);
+
+  function ComboboxInput() {
+    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), "setInputNode", function (node) {
+      _this.inputNode = node;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (e) {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+
+        _this.itemList.moveHighlightedIndex(-1, {
+          contain: false
+        });
+      }
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+
+        _this.itemList.moveHighlightedIndex(1, {
+          contain: false
+        });
+      }
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+
+        _this.itemList.selectHighlightedItem();
+      }
+
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(e);
+      }
+
+      if (_this.props.onClose && e.key === 'Tab') {
+        _this.props.onClose();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDocumentKeyDown", function (e) {
+      if (_this.props.onClear && e.key === 'Escape') {
+        _this.props.onClear();
+      }
+    });
+    return _this;
+  }
+
+  var _proto = ComboboxInput.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    var _this2 = this;
+
+    if (lastProps.value !== this.props.value) {
+      // needs to be called after items have been sorted, there's probably a better way to fix this
+      setTimeout(function () {
+        _this2.itemList.setHighlightedIndex(0);
+      });
+    }
+  };
+
+  _proto.focus = function focus() {
+    this.inputNode.focus();
+  };
+
+  _proto.blur = function blur() {
+    this.inputNode.blur();
+  };
+
+  _proto.render = function render() {
+    var _this3 = this;
+
+    var _this$props = this.props,
+        autoFocus = _this$props.autoFocus,
+        defaultValue = _this$props.defaultValue,
+        disabled = _this$props.disabled,
+        innerRef = _this$props.innerRef,
+        isOpen = _this$props.isOpen,
+        isLoading = _this$props.isLoading,
+        name = _this$props.name,
+        onBlur = _this$props.onBlur,
+        onChange = _this$props.onChange,
+        onFocus = _this$props.onFocus,
+        onClear = _this$props.onClear,
+        onClose = _this$props.onClose,
+        onKeyDown = _this$props.onKeyDown,
+        onKeyUp = _this$props.onKeyUp,
+        placeholder = _this$props.placeholder,
+        readOnly = _this$props.readOnly,
+        size = _this$props.size,
+        type = _this$props.type,
+        value = _this$props.value,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["autoFocus", "defaultValue", "disabled", "innerRef", "isOpen", "isLoading", "name", "onBlur", "onChange", "onFocus", "onClear", "onClose", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "size", "type", "value"]);
+    return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListController, null, function (itemList) {
+      var highlightedItemId = itemList.highlightedItemId,
+          id = itemList.id;
+
+      if (!_this3.itemList) {
+        _this3.itemList = itemList;
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_Input["default"].InputBox, (0, _extends2["default"])({
+        innerRef: innerRef,
+        size: size,
+        disabled: disabled,
+        isLoading: isLoading,
+        onClear: onClear
+      }, restProps, {
+        grow: 1
+      }), /*#__PURE__*/_react["default"].createElement(_Input["default"].InputField, {
+        innerRef: _this3.setInputNode,
+        grow: 1,
+        role: "combobox",
+        autoComplete: "off",
+        "aria-autocomplete": "list",
+        "aria-controls": id,
+        "aria-expanded": isOpen,
+        "aria-activedescendant": highlightedItemId,
+        autoFocus: autoFocus,
+        type: type,
+        name: name,
+        disabled: disabled,
+        readOnly: readOnly,
+        placeholder: placeholder,
+        defaultValue: defaultValue,
+        value: value,
+        onChange: onChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onKeyDown: _this3.handleKeyDown,
+        onKeyUp: onKeyUp
+      }));
+    });
+  };
+
+  return ComboboxInput;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(ComboboxInput, "displayName", 'Combobox.Input');
+var _default = ComboboxInput;
+exports["default"] = _default;

package/dist/cjs/Combobox/ComboboxItem.js

@@ -0,0 +1,72 @@
+"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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ItemList = require("../ItemList");
+
+var _Menu = _interopRequireDefault(require("../Menu"));
+
+var ComboboxItem = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(ComboboxItem, _Component);
+
+  function ComboboxItem() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = ComboboxItem.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        value = _this$props.value,
+        index = _this$props.index,
+        text = _this$props.text,
+        _this$props$disabled = _this$props.disabled,
+        disabled = _this$props$disabled === void 0 ? false : _this$props$disabled,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["value", "index", "text", "disabled"]);
+    return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListItem, {
+      data: value,
+      disabled: disabled,
+      index: index,
+      text: text
+    }, function (_ref) {
+      var id = _ref.id,
+          highlight = _ref.highlight,
+          highlighted = _ref.highlighted,
+          clearHighlight = _ref.clearHighlight,
+          select = _ref.select;
+      return /*#__PURE__*/_react["default"].createElement(_Menu["default"].Item, (0, _extends2["default"])({
+        disabled: disabled,
+        id: id,
+        isHighlighted: highlighted,
+        onMouseOver: highlight,
+        onMouseOut: clearHighlight,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          event.nativeEvent.stopImmediatePropagation();
+          select();
+        }
+      }, restProps));
+    });
+  };
+
+  return ComboboxItem;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(ComboboxItem, "displayName", 'Combobox.Item');
+var _default = ComboboxItem;
+exports["default"] = _default;

package/dist/cjs/Combobox/ComboboxItems.js

@@ -0,0 +1,107 @@
+"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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _matchSorter = require("match-sorter");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Menu = _interopRequireDefault(require("../Menu"));
+
+var _HeadingUppercase = _interopRequireDefault(require("../HeadingUppercase"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _utils = require("../utils");
+
+var _ComboboxItem = _interopRequireDefault(require("./ComboboxItem"));
+
+var defaultRenderEmpty = function defaultRenderEmpty(value) {
+  return /*#__PURE__*/_react["default"].createElement(_Menu["default"].Item, null, "No results for", /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    as: "span",
+    inline: true,
+    color: "grey-7"
+  }, "\"", value, "\""));
+};
+
+var defaultRenderItem = function defaultRenderItem(item) {
+  return /*#__PURE__*/_react["default"].createElement(_ComboboxItem["default"], {
+    value: item,
+    children: item ? String(item) : null
+  });
+};
+
+var ComboboxItems = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(ComboboxItems, _Component);
+
+  function ComboboxItems(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    _this.state = {
+      sortedItems: _this.getSortedItems(props)
+    };
+    return _this;
+  }
+
+  var _proto = ComboboxItems.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.value !== this.props.value || !(0, _utils.shallowEqual)(lastProps.items, this.props.items) || !(0, _utils.shallowEqual)(lastProps.filter, this.props.filter)) {
+      this.setState({
+        sortedItems: this.getSortedItems(this.props)
+      });
+    }
+  };
+
+  _proto.getSortedItems = function getSortedItems(_ref) {
+    var items = _ref.items,
+        value = _ref.value,
+        filter = _ref.filter;
+    return (0, _matchSorter.matchSorter)(items, value.length > 0 ? value : '', filter);
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        filter = _this$props.filter,
+        items = _this$props.items,
+        renderEmpty = _this$props.renderEmpty,
+        renderItem = _this$props.renderItem,
+        title = _this$props.title,
+        value = _this$props.value,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["filter", "items", "renderEmpty", "renderItem", "title", "value"]);
+    var sortedItems = this.state.sortedItems;
+    return /*#__PURE__*/_react["default"].createElement(_Box["default"], restProps, title && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      paddingHorizontal: 1,
+      paddingVertical: 0.5
+    }, /*#__PURE__*/_react["default"].createElement(_HeadingUppercase["default"], null, title)), _react.Children.toArray(sortedItems.length > 0 ? sortedItems.map(function (item, index) {
+      return renderItem(item, index);
+    }) : typeof renderEmpty === 'function' ? renderEmpty(value) : renderEmpty));
+  };
+
+  return ComboboxItems;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(ComboboxItems, "displayName", 'Combobox.Items');
+(0, _defineProperty2["default"])(ComboboxItems, "defaultProps", {
+  value: '',
+  renderEmpty: defaultRenderEmpty,
+  renderItem: defaultRenderItem
+});
+var _default = ComboboxItems;
+exports["default"] = _default;