@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/dist/esm/Select/Select.js

@@ -1,544 +0,0 @@
-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 '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

@@ -1,59 +0,0 @@
-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);
-})));

package/dist/esm/Select/Value.js

@@ -1,18 +0,0 @@
-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

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

package/dist/esm/Select/index.js

@@ -1,12 +0,0 @@
-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;