@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Select/Select.js

@@ -0,0 +1,542 @@
+"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FocusGroup = _interopRequireDefault(require("../FocusGroup"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Input = _interopRequireDefault(require("../Input"));
+
+var _ItemList = require("../ItemList");
+
+var _Menu = _interopRequireDefault(require("../Menu"));
+
+var _Popover = _interopRequireDefault(require("../Popover"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _utils = require("../utils");
+
+var _constants = require("./constants");
+
+var _Context = _interopRequireDefault(require("./Context"));
+
+var _Value = _interopRequireDefault(require("./Value"));
+
+var _utils2 = require("./utils");
+
+function MenuList(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Menu["default"], (0, _extends2["default"])({}, props, {
+    as: "ul"
+  }));
+}
+
+var Select = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(Select, _Component);
+
+  function Select() {
+    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), "id", (0, _utils.generateId)('select'));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "canCallFocus", true);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "contextValue", {
+      multiple: _this.props.multiple,
+      canSelectOption: {
+        current: false
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isPopoverOpen: _this.props.defaultOpen,
+      isPopoverVisible: false,
+      selectedOptions: [],
+      uncontrolledValue: _this.props.defaultValue === undefined ? _this.props.multiple ? [] : null : _this.props.defaultValue
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addUserSelectStyle", function () {
+      document.body.style.webkitUserSelect = 'none';
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearUserSelectStyle", function () {
+      document.body.style.webkitUserSelect = '';
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openPopover", function (isPopoverVisible) {
+      if (isPopoverVisible) {
+        // prevent options from being selected immediately
+        setTimeout(function () {
+          _this.contextValue.canSelectOption.current = true;
+        }, 300); // TODO: use better method for moving scrollbar to selected option
+        // ideally we would open menu exactly on top of selected item's location
+
+        setTimeout(function () {
+          var selectedOptions = _this.state.selectedOptions;
+
+          if (selectedOptions.length > 0) {
+            _this.itemList.scrollItemIntoViewByIndex(selectedOptions[0].index);
+          }
+        });
+      }
+
+      _this.setState({
+        isPopoverOpen: true,
+        isPopoverVisible: isPopoverVisible
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closePopover", function () {
+      _this.contextValue.canSelectOption.current = false;
+
+      _this.setState({
+        isPopoverOpen: false,
+        isPopoverVisible: false
+      });
+
+      if (_this.itemList) {
+        _this.itemList.clearHighlightedIndex();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "togglePopover", function () {
+      if (_this.state.isPopoverVisible) {
+        if (_this.state.isPopoverOpen) {
+          _this.closePopover();
+        } else {
+          _this.openPopover(true);
+        }
+      } else {
+        _this.openPopover(true);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getValue", function () {
+      if (_this.state.selectedOptions.length > 0) {
+        var value = _this.isControlled() ? _this.props.value : _this.state.uncontrolledValue;
+        return _this.props.renderValue((0, _utils.isArray)(value) ? _this.getSortedSelectedOptions(value) : _this.state.selectedOptions);
+      } else {
+        return _this.props.emptyValue;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHiddenInputValues", function () {
+      var name = _this.props.name;
+      var selectedOptions = _this.state.selectedOptions;
+      return name && selectedOptions.length > 0 ? selectedOptions.map(function (option, index) {
+        return /*#__PURE__*/_react["default"].createElement("input", {
+          key: index,
+          name: name,
+          type: "hidden",
+          value: option.value
+        });
+      }) : null;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getSelected", function (item) {
+      var value = _this.props.value;
+      var uncontrolledValue = _this.state.uncontrolledValue;
+      return _this.isControlled() ? (0, _utils.isFunction)(value) ? value(item) : (0, _utils.isArray)(value) ? (0, _utils.isValueInArray)(value, item) > -1 : value === item : (0, _utils.isArray)(uncontrolledValue) ? (0, _utils.isValueInArray)(uncontrolledValue, item) > -1 : uncontrolledValue === item;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelect", function (item) {
+      var _this$props = _this.props,
+          multiple = _this$props.multiple,
+          value = _this$props.value;
+      var newValue = item;
+
+      if (!_this.isControlled()) {
+        if (multiple) {
+          newValue = Select.toggleValue(_this.state.uncontrolledValue, item);
+        }
+
+        _this.setState({
+          uncontrolledValue: newValue
+        }, _this.setSelectedOptions);
+      } else if ((0, _utils.isArray)(value)) {
+        newValue = Select.toggleValue(_this.props.value, item);
+      }
+
+      if (_this.props.onChange) {
+        _this.props.onChange({
+          selectedValue: item,
+          value: newValue
+        });
+      }
+
+      if (!multiple && _this.state.isPopoverVisible) {
+        _this.focusInput();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "highlightFirstSelectedOption", function () {
+      var selectedOptions = _this.state.selectedOptions;
+
+      if (selectedOptions.length > 0) {
+        _this.itemList.setHighlightedIndex(selectedOptions[0].index);
+      } else {
+        _this.itemList.moveHighlightedIndex(1, {
+          contain: true
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "highlightLastSelectedOption", function () {
+      var selectedOptions = _this.state.selectedOptions;
+
+      if (selectedOptions.length > 0) {
+        _this.itemList.setHighlightedIndex(selectedOptions[Math.max(0, selectedOptions.length - 1)].index);
+      } else {
+        _this.itemList.moveHighlightedIndex(-1, {
+          contain: true
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusInput", function () {
+      if (_this.input) {
+        _this.contextValue.canSelectOption.current = false;
+
+        _this.setState({
+          isPopoverVisible: false
+        });
+
+        _this.canCallFocus = false;
+
+        _this.input.focus();
+
+        _this.canCallFocus = true;
+      }
+    });
+    return _this;
+  }
+
+  var _proto = Select.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (typeof document !== 'undefined') {
+      document.addEventListener('mouseup', this.clearUserSelectStyle);
+    }
+
+    this.setSelectedOptions();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    if (this.isControlled()) {
+      this.setSelectedOptions();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('mouseup', this.clearUserSelectStyle);
+      this.clearUserSelectStyle();
+    }
+  };
+
+  _proto.isControlled = function isControlled() {
+    return this.props.value !== undefined;
+  };
+
+  _proto.setSelectedOptions = function setSelectedOptions() {
+    var options = this.props.options ? (0, _utils2.optionsToElements)(this.props.options) : this.props.children;
+    var nextSelectedOptions = (0, _utils2.getSelectedOptions)(options, this.getSelected);
+
+    if (!(0, _utils.shallowEqual)(this.state.selectedOptions.map(function (option) {
+      return option.value;
+    }), nextSelectedOptions.map(function (option) {
+      return option.value;
+    }))) {
+      this.setState({
+        selectedOptions: nextSelectedOptions
+      });
+    }
+  };
+
+  _proto.getSortedSelectedOptions = function getSortedSelectedOptions(value) {
+    return [].concat(this.state.selectedOptions).sort(function (a, b) {
+      return (0, _utils.isValueInArray)(value, a.value) - (0, _utils.isValueInArray)(value, b.value);
+    });
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props2 = this.props,
+        children = _this$props2.children,
+        defaultValue = _this$props2.defaultValue,
+        disabled = _this$props2.disabled,
+        emptyValue = _this$props2.emptyValue,
+        _innerRef = _this$props2.innerRef,
+        defaultOpen = _this$props2.defaultOpen,
+        keepInView = _this$props2.keepInView,
+        lockScrollWhileOpen = _this$props2.lockScrollWhileOpen,
+        matchWidths = _this$props2.matchWidths,
+        multiple = _this$props2.multiple,
+        name = _this$props2.name,
+        onBlur = _this$props2.onBlur,
+        onChange = _this$props2.onChange,
+        onClick = _this$props2.onClick,
+        onFocus = _this$props2.onFocus,
+        onKeyDown = _this$props2.onKeyDown,
+        onMouseDown = _this$props2.onMouseDown,
+        onMouseUp = _this$props2.onMouseUp,
+        options = _this$props2.options,
+        placement = _this$props2.placement,
+        popoverProps = _this$props2.popoverProps,
+        renderTo = _this$props2.renderTo,
+        renderValue = _this$props2.renderValue,
+        tooltip = _this$props2.tooltip,
+        value = _this$props2.value,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props2, ["children", "defaultValue", "disabled", "emptyValue", "innerRef", "defaultOpen", "keepInView", "lockScrollWhileOpen", "matchWidths", "multiple", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onMouseDown", "onMouseUp", "options", "placement", "popoverProps", "renderTo", "renderValue", "tooltip", "value"]);
+    var _this$state = this.state,
+        isPopoverOpen = _this$state.isPopoverOpen,
+        isPopoverVisible = _this$state.isPopoverVisible;
+    return /*#__PURE__*/_react["default"].createElement(_Context["default"].Provider, {
+      value: this.contextValue
+    }, /*#__PURE__*/_react["default"].createElement(_FocusGroup["default"], {
+      onBlur: this.closePopover
+    }, function (_ref) {
+      var requestBlur = _ref.requestBlur,
+          setRef = _ref.setRef;
+      return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemList, {
+        ref: function ref(c) {
+          return _this2.itemList = c;
+        },
+        selected: _this2.getSelected,
+        onSelect: _this2.handleSelect
+      }, function (_ref2) {
+        var getItemByText = _ref2.getItemByText,
+            getHighlightedIndex = _ref2.getHighlightedIndex,
+            moveHighlightedIndex = _ref2.moveHighlightedIndex,
+            selectHighlightedItem = _ref2.selectHighlightedItem,
+            setHighlightedIndex = _ref2.setHighlightedIndex,
+            selectItemByIndex = _ref2.selectItemByIndex,
+            stringSearch = _ref2.stringSearch;
+
+        var handleKeyboardControls = function handleKeyboardControls(event) {
+          switch (event.key) {
+            case 'ArrowUp':
+              event.preventDefault();
+
+              if (isPopoverVisible) {
+                moveHighlightedIndex(-1, {
+                  contain: true
+                });
+              } else {
+                _this2.openPopover(true);
+
+                setTimeout(function () {
+                  _this2.highlightLastSelectedOption();
+                });
+              }
+
+              break;
+
+            case 'ArrowDown':
+              event.preventDefault();
+
+              if (isPopoverVisible) {
+                moveHighlightedIndex(1, {
+                  contain: true
+                });
+              } else {
+                _this2.openPopover(true);
+
+                setTimeout(function () {
+                  _this2.highlightFirstSelectedOption();
+                });
+              }
+
+              break;
+
+            case 'Enter':
+              if (isPopoverVisible) {
+                event.preventDefault();
+                selectHighlightedItem();
+              }
+
+              break;
+
+            case ' ':
+              event.preventDefault();
+
+              if (getHighlightedIndex() === null) {
+                _this2.togglePopover();
+
+                setTimeout(function () {
+                  _this2.highlightFirstSelectedOption();
+                });
+              } else if (isPopoverVisible) {
+                selectHighlightedItem();
+              } else {
+                _this2.openPopover(true);
+              }
+
+              break;
+
+            default:
+              stringSearch(event).then(function (text) {
+                var item = getItemByText(text);
+
+                if (item) {
+                  if (isPopoverVisible) {
+                    setHighlightedIndex(item.props.index);
+                  } else {
+                    selectItemByIndex(item.props.index);
+                  }
+                }
+              });
+          }
+        };
+
+        return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({}, popoverProps, {
+          ref: function ref(component) {
+            _this2.popover = component;
+          },
+          innerRef: function innerRef(node) {
+            setRef(_this2.id + "-popover")(node);
+          },
+          as: MenuList,
+          tabIndex: -1,
+          "aria-labelledby": _this2.id,
+          "aria-multiselectable": multiple,
+          role: "listbox",
+          display: isPopoverVisible ? undefined : 'none',
+          minWidth: 16,
+          padding: 0,
+          elevation: 2,
+          matchWidths: matchWidths,
+          lockScrollWhileOpen: isPopoverVisible ? lockScrollWhileOpen : false,
+          keepInView: keepInView,
+          placement: placement,
+          renderTo: renderTo,
+          open: isPopoverOpen,
+          onRequestClose: function onRequestClose() {
+            return _this2.setState({
+              isPopoverVisible: false
+            });
+          },
+          onBlur: requestBlur,
+          onKeyDown: handleKeyboardControls,
+          anchorElement: function anchorElement(anchorProps) {
+            if (!disabled) {
+              restProps.onFocus = function (event) {
+                if (_this2.canCallFocus) {
+                  _this2.openPopover(false);
+                }
+
+                if (onFocus) {
+                  onFocus(event);
+                }
+              };
+
+              restProps.onBlur = function (event) {
+                requestBlur(event);
+
+                if (onBlur) {
+                  onBlur(event);
+                }
+              };
+
+              restProps.onMouseDown = function (event) {
+                if (event.button === 0) {
+                  _this2.addUserSelectStyle();
+
+                  _this2.canCallFocus = false;
+
+                  _this2.togglePopover();
+                }
+
+                if (onMouseDown) {
+                  onMouseDown(event);
+                }
+              };
+
+              restProps.onMouseUp = function (event) {
+                _this2.canCallFocus = true;
+
+                if (onMouseUp) {
+                  onMouseUp(event);
+                }
+              };
+
+              restProps.onKeyDown = function (event) {
+                anchorProps.onKeyDown(event);
+
+                if (onKeyDown) {
+                  onKeyDown(event);
+                }
+              };
+            }
+
+            return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListController, null, function (_ref3) {
+              var getHighlightedItemId = _ref3.getHighlightedItemId;
+              return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
+                triggerOnHover: !isPopoverVisible,
+                triggerOnFocus: !isPopoverVisible
+              }, tooltip), /*#__PURE__*/_react["default"].createElement(_Input["default"].InputBox, (0, _extends2["default"])({
+                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.input = node;
+                  setRef(_this2.id + "-button")(node);
+
+                  if (_innerRef) {
+                    _innerRef(node);
+                  }
+                },
+                id: _this2.id,
+                tabIndex: 0,
+                role: "button",
+                disabled: disabled,
+                "aria-disabled": disabled,
+                "aria-haspopup": isPopoverVisible,
+                "aria-expanded": isPopoverVisible,
+                "aria-activedescendant": getHighlightedItemId(),
+                cursor: "pointer",
+                userSelect: "none",
+                touchAction: "manipulation",
+                focusChildrenOnFocus: false,
+                renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+                  name: isPopoverVisible ? 'arrow-up' : 'arrow-down'
+                })
+              }, restProps), _this2.getValue(), _this2.getHiddenInputValues()));
+            });
+          }
+        }), (0, _utils2.renderOptions)(options ? (0, _utils2.optionsToElements)(options) : children));
+      });
+    }));
+  };
+
+  return Select;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Select, "displayName", _constants.SELECT_DISPLAY_NAME);
+(0, _defineProperty2["default"])(Select, "defaultProps", {
+  emptyValue: /*#__PURE__*/_react["default"].createElement(_Value["default"], null, "Select an item"),
+  defaultOpen: false,
+  lockScrollWhileOpen: true,
+  matchWidths: 'minimum',
+  renderValue: function renderValue(selectedOptions) {
+    return /*#__PURE__*/_react["default"].createElement(_Value["default"], null, (0, _utils.joinChildren)(selectedOptions.map(function (option) {
+      return option.children;
+    })));
+  }
+});
+var _default = Select;
+exports["default"] = _default;

package/dist/cjs/Select/Value.js

@@ -0,0 +1,27 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+function Value(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
+    as: "span",
+    grow: 1,
+    shrink: 1,
+    fontSize: "inherit",
+    lineHeight: "inherit",
+    textAlign: "left",
+    truncate: true
+  }, props));
+}
+
+var _default = Value;
+exports["default"] = _default;

package/dist/cjs/Select/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.OPTION_DISPLAY_NAME = exports.OPTIONGROUP_DISPLAY_NAME = exports.SELECT_DISPLAY_NAME = void 0;
+var SELECT_DISPLAY_NAME = 'Select';
+exports.SELECT_DISPLAY_NAME = SELECT_DISPLAY_NAME;
+var OPTIONGROUP_DISPLAY_NAME = 'OptionGroup';
+exports.OPTIONGROUP_DISPLAY_NAME = OPTIONGROUP_DISPLAY_NAME;
+var OPTION_DISPLAY_NAME = 'Option';
+exports.OPTION_DISPLAY_NAME = OPTION_DISPLAY_NAME;

package/dist/cjs/Select/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Select = _interopRequireDefault(require("./Select"));
+
+var _Inline = _interopRequireDefault(require("./Inline"));
+
+var _Option = _interopRequireDefault(require("./Option"));
+
+var _OptionGroup = _interopRequireDefault(require("./OptionGroup"));
+
+var _Value = _interopRequireDefault(require("./Value"));
+
+var _utils = require("./utils");
+
+_Select["default"].Inline = _Inline["default"];
+_Select["default"].Option = _Option["default"];
+_Select["default"].OptionGroup = _OptionGroup["default"];
+_Select["default"].Value = _Value["default"];
+_Select["default"].toggleValue = _utils.toggleValue;
+var _default = _Select["default"];
+exports["default"] = _default;