@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Combobox/Combobox.js

@@ -0,0 +1,48 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+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 { ItemList } from '../ItemList';
+import ComboboxInput from './ComboboxInput';
+import ComboboxItem from './ComboboxItem';
+import ComboboxItems from './ComboboxItems';
+import ComboboxPopover from './ComboboxPopover';
+
+var Combobox = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(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 = _objectWithoutPropertiesLoose(_this$props, ["children", "multiple", "onSelect", "selectedValue"]);
+
+    return /*#__PURE__*/React.createElement(ItemList, {
+      selected: function selected(item) {
+        return item.value === selectedValue;
+      },
+      onSelect: onSelect
+    }, /*#__PURE__*/React.createElement(Box, restProps, children));
+  };
+
+  return Combobox;
+}(Component);
+
+_defineProperty(Combobox, "Input", ComboboxInput);
+
+_defineProperty(Combobox, "Item", ComboboxItem);
+
+_defineProperty(Combobox, "Items", ComboboxItems);
+
+_defineProperty(Combobox, "Popover", ComboboxPopover);
+
+export default Combobox;

package/dist/esm/Combobox/ComboboxInput.js

@@ -0,0 +1,160 @@
+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 Input from '../Input';
+import { ItemListController } from '../ItemList';
+
+var ComboboxInput = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(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;
+
+    _defineProperty(_assertThisInitialized(_this), "setInputNode", function (node) {
+      _this.inputNode = node;
+    });
+
+    _defineProperty(_assertThisInitialized(_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();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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 = _objectWithoutPropertiesLoose(_this$props, ["autoFocus", "defaultValue", "disabled", "innerRef", "isOpen", "isLoading", "name", "onBlur", "onChange", "onFocus", "onClear", "onClose", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "size", "type", "value"]);
+
+    return /*#__PURE__*/React.createElement(ItemListController, null, function (itemList) {
+      var highlightedItemId = itemList.highlightedItemId,
+          id = itemList.id;
+
+      if (!_this3.itemList) {
+        _this3.itemList = itemList;
+      }
+
+      return /*#__PURE__*/React.createElement(Input.InputBox, _extends({
+        innerRef: innerRef,
+        size: size,
+        disabled: disabled,
+        isLoading: isLoading,
+        onClear: onClear
+      }, restProps, {
+        grow: 1
+      }), /*#__PURE__*/React.createElement(Input.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;
+}(Component);
+
+_defineProperty(ComboboxInput, "displayName", 'Combobox.Input');
+
+export default ComboboxInput;

package/dist/esm/Combobox/ComboboxItem.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import { ItemListItem } from '../ItemList';
+import Menu from '../Menu';
+
+var ComboboxItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(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 = _objectWithoutPropertiesLoose(_this$props, ["value", "index", "text", "disabled"]);
+
+    return /*#__PURE__*/React.createElement(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.createElement(Menu.Item, _extends({
+        disabled: disabled,
+        id: id,
+        isHighlighted: highlighted,
+        onMouseOver: highlight,
+        onMouseOut: clearHighlight,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          event.nativeEvent.stopImmediatePropagation();
+          select();
+        }
+      }, restProps));
+    });
+  };
+
+  return ComboboxItem;
+}(Component);
+
+_defineProperty(ComboboxItem, "displayName", 'Combobox.Item');
+
+export default ComboboxItem;

package/dist/esm/Combobox/ComboboxItems.js

@@ -0,0 +1,89 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component, Children } from 'react';
+import { matchSorter } from 'match-sorter';
+import Box from '../Box';
+import Menu from '../Menu';
+import HeadingUppercase from '../HeadingUppercase';
+import StackView from '../StackView';
+import Text from '../Text';
+import { shallowEqual } from '../utils';
+import ComboboxItem from './ComboboxItem';
+
+var defaultRenderEmpty = function defaultRenderEmpty(value) {
+  return /*#__PURE__*/React.createElement(Menu.Item, null, "No results for", /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    inline: true,
+    color: "grey-7"
+  }, "\"", value, "\""));
+};
+
+var defaultRenderItem = function defaultRenderItem(item) {
+  return /*#__PURE__*/React.createElement(ComboboxItem, {
+    value: item,
+    children: item ? String(item) : null
+  });
+};
+
+var ComboboxItems = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(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 || !shallowEqual(lastProps.items, this.props.items) || !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 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 = _objectWithoutPropertiesLoose(_this$props, ["filter", "items", "renderEmpty", "renderItem", "title", "value"]);
+
+    var sortedItems = this.state.sortedItems;
+    return /*#__PURE__*/React.createElement(Box, restProps, title && /*#__PURE__*/React.createElement(StackView, {
+      paddingHorizontal: 1,
+      paddingVertical: 0.5
+    }, /*#__PURE__*/React.createElement(HeadingUppercase, null, title)), Children.toArray(sortedItems.length > 0 ? sortedItems.map(function (item, index) {
+      return renderItem(item, index);
+    }) : typeof renderEmpty === 'function' ? renderEmpty(value) : renderEmpty));
+  };
+
+  return ComboboxItems;
+}(Component);
+
+_defineProperty(ComboboxItems, "displayName", 'Combobox.Items');
+
+_defineProperty(ComboboxItems, "defaultProps", {
+  value: '',
+  renderEmpty: defaultRenderEmpty,
+  renderItem: defaultRenderItem
+});
+
+export default ComboboxItems;

package/dist/esm/Combobox/ComboboxPopover.js

@@ -0,0 +1,243 @@
+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 { ItemList } from '../ItemList';
+import Button from '../Button';
+import FocusGroup from '../FocusGroup';
+import Menu from '../Menu';
+import Popover from '../Popover';
+import { generateId } from '../utils';
+import ComboboxInput from './ComboboxInput';
+
+var ComboboxPopover = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ComboboxPopover, _Component);
+
+  function ComboboxPopover() {
+    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", {
+      isPopoverOpen: _this.props.defaultOpen || false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "id", generateId('combobox'));
+
+    _defineProperty(_assertThisInitialized(_this), "inputNode", null);
+
+    _defineProperty(_assertThisInitialized(_this), "inputTouched", false);
+
+    _defineProperty(_assertThisInitialized(_this), "closeRequestId", null);
+
+    _defineProperty(_assertThisInitialized(_this), "setItemListRef", function (component) {
+      _this.itemList = component;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setInputRef", function (component) {
+      _this.input = component;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "openPopover", function () {
+      _this.setState({
+        isPopoverOpen: true
+      }, function () {
+        _this.itemList.setHighlightedIndex(0, {
+          maybeScrollIntoView: false
+        });
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closePopover", function () {
+      // push to next event stack because Popover events are messed up :(
+      _this.closeRequestId = requestAnimationFrame(function () {
+        _this.setState({
+          isPopoverOpen: false
+        }, function () {
+          _this.itemList.clearHighlightedIndex();
+        });
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
+      _this.closePopover();
+
+      _this.inputTouched = false;
+
+      if (_this.props.onBlur) {
+        _this.props.onBlur(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelect", function (event) {
+      if (_this.props.closeOnSelect) {
+        _this.closePopover();
+      }
+
+      if (_this.props.onSelect) {
+        _this.props.onSelect(event);
+      }
+    });
+
+    return _this;
+  }
+
+  var _proto = ComboboxPopover.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.disabled !== lastProps.disabled && this.props.disabled === true) {
+      this.closePopover();
+    }
+
+    var isComboboxFocused = document.activeElement === this.inputNode;
+
+    if (isComboboxFocused && lastProps.value !== this.props.value && this.props.value.length > 0 && !this.state.isPopoverOpen) {
+      this.openPopover();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.closeRequestId) {
+      cancelAnimationFrame(this.closeRequestId);
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        children = _this$props.children,
+        closeButton = _this$props.closeButton,
+        closeOnSelect = _this$props.closeOnSelect,
+        disabled = _this$props.disabled,
+        dropdownButton = _this$props.dropdownButton,
+        _innerRef = _this$props.innerRef,
+        defaultOpen = _this$props.defaultOpen,
+        lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
+        onClear = _this$props.onClear,
+        onBlur = _this$props.onBlur,
+        _onFocus = _this$props.onFocus,
+        onSelect = _this$props.onSelect,
+        openOnFocus = _this$props.openOnFocus,
+        placement = _this$props.placement,
+        popoverProps = _this$props.popoverProps,
+        relativeTo = _this$props.relativeTo,
+        renderTo = _this$props.renderTo,
+        value = _this$props.value,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["children", "closeButton", "closeOnSelect", "disabled", "dropdownButton", "innerRef", "defaultOpen", "lockScrollWhileOpen", "onClear", "onBlur", "onFocus", "onSelect", "openOnFocus", "placement", "popoverProps", "relativeTo", "renderTo", "value"]);
+
+    var isPopoverOpen = this.state.isPopoverOpen;
+    var valuePresent = value && value.length > 0;
+    return /*#__PURE__*/React.createElement(FocusGroup, {
+      onBlur: this.handleBlur
+    }, function (_ref) {
+      var requestBlur = _ref.requestBlur,
+          setRef = _ref.setRef;
+      return /*#__PURE__*/React.createElement(ItemList, {
+        ref: _this2.setItemListRef,
+        onSelect: _this2.handleSelect
+      }, function (_ref2) {
+        var clearHighlightedIndex = _ref2.clearHighlightedIndex;
+        return /*#__PURE__*/React.createElement(Popover, _extends({
+          keepInView: false,
+          matchWidths: true,
+          minWidth: 16
+        }, popoverProps, {
+          as: Menu,
+          ref: function ref(component) {
+            _this2.popover = component;
+          },
+          innerRef: function innerRef(node) {
+            setRef(_this2.id + "-popover")(node);
+          },
+          role: "menu",
+          tabIndex: -1,
+          elevation: 2,
+          lockScrollWhileOpen: lockScrollWhileOpen,
+          placement: placement,
+          relativeTo: relativeTo,
+          renderTo: renderTo,
+          open: isPopoverOpen,
+          onBlur: requestBlur,
+          anchorElement: function anchorElement(anchorProps) {
+            return /*#__PURE__*/React.createElement(ComboboxInput, _extends({
+              ref: _this2.setInputRef,
+              innerRef: function innerRef(node) {
+                var _anchorProps$innerRef;
+
+                if (typeof anchorProps.innerRef === 'function') {
+                  anchorProps.innerRef(node);
+                } else if ((_anchorProps$innerRef = anchorProps.innerRef) != null && _anchorProps$innerRef.current) {
+                  anchorProps.innerRef.current = node;
+                }
+
+                _this2.inputNode = node ? node.querySelector('input') : null;
+                setRef(_this2.id + "-input")(node);
+
+                if (_innerRef) {
+                  _innerRef(node);
+                }
+              },
+              value: value,
+              onFocus: function onFocus(event) {
+                if (closeOnSelect ? openOnFocus && !_this2.inputTouched : openOnFocus) {
+                  _this2.openPopover();
+                }
+
+                _this2.inputTouched = true;
+                _onFocus && _onFocus(event);
+              },
+              onBlur: function onBlur(event) {
+                requestBlur(event);
+                clearHighlightedIndex();
+              },
+              onClear: valuePresent ? onClear : undefined,
+              renderRight: closeButton ? /*#__PURE__*/React.createElement(Button, _extends({
+                disabled: disabled,
+                icon: {
+                  name: 'close'
+                },
+                title: "close options",
+                theme: false
+              }, closeButton)) : dropdownButton ? /*#__PURE__*/React.createElement(Button, {
+                disabled: disabled,
+                icon: {
+                  name: isPopoverOpen ? 'close' : 'arrow-down'
+                },
+                title: isPopoverOpen ? 'close options' : 'open options',
+                theme: false,
+                onClick: function onClick() {
+                  if (isPopoverOpen) {
+                    _this2.closePopover();
+                  } else {
+                    _this2.openPopover();
+                  }
+
+                  _this2.input.focus();
+                }
+              }) : null,
+              disabled: disabled
+            }, restProps));
+          }
+        }), children);
+      });
+    });
+  };
+
+  return ComboboxPopover;
+}(Component);
+
+_defineProperty(ComboboxPopover, "displayName", 'Combobox.Popover');
+
+_defineProperty(ComboboxPopover, "defaultProps", {
+  closeOnSelect: false,
+  openOnFocus: false
+});
+
+export default ComboboxPopover;

package/dist/esm/Combobox/index.js

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