@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

package/dist/esm/Select/Select.js

@@ -0,0 +1,549 @@
+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';
+import { isEqual } from 'lodash';
+
+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;
+    })) || !isEqual(this.state.selectedOptions.map(function (option) {
+      return option.children;
+    }), nextSelectedOptions.map(function (option) {
+      return option.children;
+    }))) {
+      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 'Escape':
+              if (isPopoverOpen && !isPopoverVisible) {
+                event.preventDefault();
+
+                _this2.closePopover();
+              }
+
+              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 ? 'general.upCaret' : 'general.downCaret'
+                })
+              }, 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/Select.test.js

@@ -0,0 +1,127 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Select from '.';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+var people = [{
+  first: 'Charlie',
+  last: 'Brown',
+  twitter: 'dancounsell',
+  active: true
+}, {
+  first: 'Charlotte',
+  last: 'White',
+  twitter: 'mtnmissy',
+  active: true
+}, {
+  first: 'John',
+  last: 'James',
+  twitter: 'miller',
+  active: false
+}, {
+  first: 'Travis',
+  last: 'Arnold',
+  twitter: 'souporserious',
+  active: true
+}];
+var selectMock = jest.fn();
+test('can click to select item from list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useFakeTimers();
+          render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Select, {
+            onChange: selectMock
+          }, people.map(function (p) {
+            return /*#__PURE__*/React.createElement(Select.Option, {
+              value: p.twitter,
+              key: p.twitter
+            }, p.first, " ", p.last);
+          }))));
+          userEvent.click(screen.getByRole('button'));
+          jest.runAllTimers();
+          userEvent.click(screen.getByText('Travis Arnold'));
+          expect(selectMock).toHaveBeenCalledWith({
+            selectedValue: 'souporserious',
+            value: 'souporserious'
+          });
+          jest.useRealTimers();
+
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+it('updates display value when value of label changes and using options array', function () {
+  function TestCase(_ref2) {
+    var options = _ref2.options;
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Select, {
+      options: options,
+      value: "us"
+    }));
+  }
+
+  var canada = {
+    label: 'Canada',
+    value: 'ca'
+  };
+  var options = [canada, {
+    label: 'United States',
+    value: 'us'
+  }];
+
+  var _render = render( /*#__PURE__*/React.createElement(TestCase, {
+    options: options
+  })),
+      rerender = _render.rerender;
+
+  expect(screen.getByText('United States')).toBeInTheDocument();
+  rerender( /*#__PURE__*/React.createElement(TestCase, {
+    options: [canada, {
+      label: 'United States of America',
+      value: 'us'
+    }]
+  }));
+  expect(screen.getByText('United States of America')).toBeInTheDocument();
+});
+it('updates display value when value of label changes and using full components', function () {
+  function TestCase(_ref3) {
+    var options = _ref3.options;
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Select, {
+      value: "us"
+    }, options.map(function (option) {
+      return /*#__PURE__*/React.createElement(Select.Option, {
+        value: option.value,
+        key: option.value
+      }, /*#__PURE__*/React.createElement("div", null, option.label));
+    })));
+  }
+
+  var canada = {
+    label: 'Canada',
+    value: 'ca'
+  };
+  var options = [canada, {
+    label: 'United States',
+    value: 'us'
+  }];
+
+  var _render2 = render( /*#__PURE__*/React.createElement(TestCase, {
+    options: options
+  })),
+      rerender = _render2.rerender;
+
+  expect(screen.getByText('United States')).toBeInTheDocument();
+  rerender( /*#__PURE__*/React.createElement(TestCase, {
+    options: [canada, {
+      label: 'United States of America',
+      value: 'us'
+    }]
+  }));
+  expect(screen.getByText('United States of America')).toBeInTheDocument();
+});

package/dist/esm/Select/Value.js

@@ -0,0 +1,18 @@
+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));
+}
+
+Value.displayName = 'Select.Value';
+export default Value;

package/dist/esm/Select/constants.js

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