@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Select/Select.js

@@ -0,0 +1,535 @@
+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 _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Component } from 'react';
+import FocusGroup from '../FocusGroup';
+import Icon from '../Icon';
+import Input from '../Input';
+import { ItemList, ItemListController } from '../ItemList';
+import Menu from '../Menu';
+import Popover from '../Popover';
+import Tooltip from '../Tooltip';
+import { generateId, isArray, isFunction, isValueInArray, joinChildren, shallowEqual } from '../utils';
+import { SELECT_DISPLAY_NAME } from './constants';
+import SelectContext from './Context';
+import Value from './Value';
+import { getSelectedOptions, optionsToElements, renderOptions } from './utils';
+
+function MenuList(props) {
+  return /*#__PURE__*/React.createElement(Menu, _extends({}, props, {
+    as: "ul"
+  }));
+}
+
+var Select = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(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;
+
+    _defineProperty(_assertThisInitialized(_this), "id", generateId('select'));
+
+    _defineProperty(_assertThisInitialized(_this), "canCallFocus", true);
+
+    _defineProperty(_assertThisInitialized(_this), "contextValue", {
+      multiple: _this.props.multiple,
+      canSelectOption: {
+        current: false
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isPopoverOpen: _this.props.defaultOpen,
+      isPopoverVisible: false,
+      selectedOptions: [],
+      uncontrolledValue: _this.props.defaultValue === undefined ? _this.props.multiple ? [] : null : _this.props.defaultValue
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "addUserSelectStyle", function () {
+      document.body.style.webkitUserSelect = 'none';
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearUserSelectStyle", function () {
+      document.body.style.webkitUserSelect = '';
+    });
+
+    _defineProperty(_assertThisInitialized(_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
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closePopover", function () {
+      _this.contextValue.canSelectOption.current = false;
+
+      _this.setState({
+        isPopoverOpen: false,
+        isPopoverVisible: false
+      });
+
+      if (_this.itemList) {
+        _this.itemList.clearHighlightedIndex();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "togglePopover", function () {
+      if (_this.state.isPopoverVisible) {
+        if (_this.state.isPopoverOpen) {
+          _this.closePopover();
+        } else {
+          _this.openPopover(true);
+        }
+      } else {
+        _this.openPopover(true);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getValue", function () {
+      if (_this.state.selectedOptions.length > 0) {
+        var value = _this.isControlled() ? _this.props.value : _this.state.uncontrolledValue;
+        return _this.props.renderValue(isArray(value) ? _this.getSortedSelectedOptions(value) : _this.state.selectedOptions);
+      } else {
+        return _this.props.emptyValue;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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.createElement("input", {
+          key: index,
+          name: name,
+          type: "hidden",
+          value: option.value
+        });
+      }) : null;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getSelected", function (item) {
+      var value = _this.props.value;
+      var uncontrolledValue = _this.state.uncontrolledValue;
+      return _this.isControlled() ? isFunction(value) ? value(item) : isArray(value) ? isValueInArray(value, item) > -1 : value === item : isArray(uncontrolledValue) ? isValueInArray(uncontrolledValue, item) > -1 : uncontrolledValue === item;
+    });
+
+    _defineProperty(_assertThisInitialized(_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 (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();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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 ? optionsToElements(this.props.options) : this.props.children;
+    var nextSelectedOptions = getSelectedOptions(options, this.getSelected);
+
+    if (!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 isValueInArray(value, a.value) - 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 = _objectWithoutPropertiesLoose(_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.createElement(SelectContext.Provider, {
+      value: this.contextValue
+    }, /*#__PURE__*/React.createElement(FocusGroup, {
+      onBlur: this.closePopover
+    }, function (_ref) {
+      var requestBlur = _ref.requestBlur,
+          setRef = _ref.setRef;
+      return /*#__PURE__*/React.createElement(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.createElement(Popover, _extends({}, 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.createElement(ItemListController, null, function (_ref3) {
+              var getHighlightedItemId = _ref3.getHighlightedItemId;
+              return /*#__PURE__*/React.createElement(Tooltip, _extends({
+                triggerOnHover: !isPopoverVisible,
+                triggerOnFocus: !isPopoverVisible
+              }, tooltip), /*#__PURE__*/React.createElement(Input.InputBox, _extends({
+                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.createElement(Icon, {
+                  name: isPopoverVisible ? 'arrow-up' : 'arrow-down'
+                })
+              }, restProps), _this2.getValue(), _this2.getHiddenInputValues()));
+            });
+          }
+        }), renderOptions(options ? optionsToElements(options) : children));
+      });
+    }));
+  };
+
+  return Select;
+}(Component);
+
+_defineProperty(Select, "displayName", SELECT_DISPLAY_NAME);
+
+_defineProperty(Select, "defaultProps", {
+  emptyValue: /*#__PURE__*/React.createElement(Value, null, "Select an item"),
+  defaultOpen: false,
+  lockScrollWhileOpen: true,
+  matchWidths: 'minimum',
+  renderValue: function renderValue(selectedOptions) {
+    return /*#__PURE__*/React.createElement(Value, null, joinChildren(selectedOptions.map(function (option) {
+      return option.children;
+    })));
+  }
+});
+
+export default Select;

package/dist/esm/Select/Value.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Text from '../Text';
+
+function Value(props) {
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "span",
+    grow: 1,
+    shrink: 1,
+    fontSize: "inherit",
+    lineHeight: "inherit",
+    textAlign: "left",
+    truncate: true
+  }, props));
+}
+
+export default Value;

package/dist/esm/Select/constants.js

@@ -0,0 +1,3 @@
+export var SELECT_DISPLAY_NAME = 'Select';
+export var OPTIONGROUP_DISPLAY_NAME = 'OptionGroup';
+export var OPTION_DISPLAY_NAME = 'Option';

package/dist/esm/Select/index.js

@@ -0,0 +1,12 @@
+import Select from './Select';
+import Inline from './Inline';
+import Option from './Option';
+import OptionGroup from './OptionGroup';
+import Value from './Value';
+import { toggleValue } from './utils';
+Select.Inline = Inline;
+Select.Option = Option;
+Select.OptionGroup = OptionGroup;
+Select.Value = Value;
+Select.toggleValue = toggleValue;
+export default Select;

package/dist/esm/Select/utils.js

@@ -0,0 +1,106 @@
+import React, { Children, cloneElement, isValidElement } from 'react';
+import Box from '../Box';
+import Menu from '../Menu';
+import { shallowEqual } from '../utils';
+import { OPTIONGROUP_DISPLAY_NAME, OPTION_DISPLAY_NAME } from './constants';
+import Option from './Option';
+import OptionGroup from './OptionGroup';
+export function getSelectedOptions(children, selected) {
+  var selectedChildren = [];
+  var index = -1;
+
+  function getSelectedOption(child) {
+    index++;
+
+    if (selected(child.props.value)) {
+      return {
+        index: index,
+        value: child.props.value,
+        text: child.props.text,
+        children: typeof child.props.children === 'function' ? child.props.children() : child.props.children
+      };
+    } else {
+      return false;
+    }
+  }
+
+  function pushSelectedOption(child) {
+    var option = getSelectedOption(child);
+
+    if (option) {
+      selectedChildren.push(option);
+    }
+  }
+
+  Children.toArray(children).forEach(function (child) {
+    if (child) {
+      if (child.type.displayName === OPTIONGROUP_DISPLAY_NAME) {
+        Children.toArray(child.props.children).filter(isValidElement).forEach(function (grandChild) {
+          if (grandChild.type.displayName === OPTION_DISPLAY_NAME) {
+            pushSelectedOption(grandChild);
+          }
+        });
+      }
+
+      if (child.type.displayName === OPTION_DISPLAY_NAME) {
+        pushSelectedOption(child);
+      }
+    }
+  });
+  return selectedChildren;
+}
+export function renderOptions(children) {
+  var index = -1;
+
+  function renderOption(child) {
+    index++;
+    return /*#__PURE__*/cloneElement(child, {
+      index: index
+    });
+  }
+
+  return Children.map(children, function (child) {
+    if (child) {
+      if (child.type.displayName === OPTIONGROUP_DISPLAY_NAME) {
+        return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Menu.Heading, null, child.props.title), Children.map(child.props.children, renderOption));
+      }
+
+      if (child.type.displayName === OPTION_DISPLAY_NAME) {
+        return renderOption(child);
+      }
+    }
+
+    return child;
+  });
+}
+export function optionsToElements(options) {
+  return options.map(function (option) {
+    return option.optgroup ? /*#__PURE__*/React.createElement(OptionGroup, {
+      title: option.label,
+      children: option.optgroup.map(function (option) {
+        return /*#__PURE__*/React.createElement(Option, {
+          value: option.value
+        }, option.label);
+      })
+    }) : /*#__PURE__*/React.createElement(Option, {
+      value: option.value
+    }, option.label);
+  });
+}
+export function toggleValue(collection, item) {
+  var previousValue = false;
+  var newValue = collection.reduce(function (newCollection, value) {
+    if (shallowEqual(item, value)) {
+      previousValue = true;
+      return newCollection;
+    } else {
+      return [].concat(newCollection, [value]);
+    }
+  }, []);
+
+  if (!previousValue) {
+    newValue.push(item);
+  }
+
+  return newValue;
+}