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

package/dist/esm/Drawer/Drawer.js

@@ -1,89 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import StackView from '../StackView';
-import { useThemeValue } from '../system';
-
-function DrawerContents(_ref) {
-  var shouldClose = _ref.shouldClose,
-      onClose = _ref.onClose,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["shouldClose", "onClose"]);
-
-  var themeProps = useThemeValue('drawer');
-  var ref = useRef(null);
-
-  var _useState = useState(false),
-      show = _useState[0],
-      setShow = _useState[1];
-
-  useEffect(function () {
-    var node = ref.current;
-    var firstTransition = true;
-
-    function handleTransitionEnd(event) {
-      if (event.target === node && event.propertyName === 'transform') {
-        if (firstTransition) {
-          firstTransition = false;
-        } else {
-          onClose();
-        }
-      }
-    }
-
-    setShow(true);
-    node.addEventListener('transitionend', handleTransitionEnd);
-    return function () {
-      node.removeEventListener('transitionend', handleTransitionEnd);
-    };
-  }, []);
-  useEffect(function () {
-    if (shouldClose) {
-      setShow(false);
-    }
-  }, [shouldClose]);
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    innerRef: ref,
-    width: 52,
-    height: "100%",
-    x: (show ? 0 : 100) + "%",
-    position: "absolute",
-    bottom: 0,
-    right: 0,
-    zIndex: 999,
-    boxShadow: "-6px 0px 6px -4px rgba(150,150,150,0.25)",
-    backgroundColor: "surfaceTertiary",
-    transition: "transform 240ms ease-out"
-  }, themeProps, restProps));
-}
-
-function Drawer(props) {
-  var open = props.open,
-      restProps = _objectWithoutPropertiesLoose(props, ["open"]);
-
-  var _useState2 = useState(null),
-      localOpen = _useState2[0],
-      setLocalOpen = _useState2[1];
-
-  var _useState3 = useState(null),
-      shouldClose = _useState3[0],
-      setShouldClose = _useState3[1];
-
-  var handleClose = useCallback(function () {
-    setLocalOpen(false);
-    setShouldClose(true);
-  }, []);
-  useLayoutEffect(function () {
-    if (open) {
-      setLocalOpen(true);
-      setShouldClose(false);
-    } else if (localOpen !== null) {
-      setShouldClose(true);
-    }
-  }, [open]);
-  return localOpen && /*#__PURE__*/React.createElement(DrawerContents, _extends({
-    shouldClose: shouldClose,
-    onClose: handleClose
-  }, restProps));
-}
-
-export default Drawer;

package/dist/esm/Drawer/index.js

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

package/dist/esm/Dropdown/Dropdown.js

@@ -1,301 +0,0 @@
-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";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import React, { Component, cloneElement, createElement } from 'react';
-import Button from '../Button';
-import FocusGroup from '../FocusGroup';
-import { ItemList, ItemListController } from '../ItemList';
-import Menu from '../Menu';
-import Popover from '../Popover';
-import { cloneChildren, generateId } from '../utils';
-import Item, { ITEM_DISPLAY_NAME } from './Item';
-import Link, { LINK_DISPLAY_NAME } from './Link';
-
-var Dropdown = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Dropdown, _Component);
-
-  function Dropdown(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "openPopover", function (event) {
-      if (_this.props.onOpen) {
-        _this.props.onOpen();
-      }
-
-      _this.setState({
-        isPopoverOpen: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "closePopover", function (event) {
-      if (_this.props.onClose) {
-        _this.props.onClose();
-      }
-
-      if (!_this.props.forceOpen) {
-        _this.setState({
-          isPopoverOpen: false
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "togglePopover", function (event) {
-      _this.setState({
-        preventBlur: false
-      });
-
-      if (_this.state.isPopoverOpen) {
-        _this.closePopover(event);
-      } else {
-        _this.openPopover(event);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleSelect", function (data, _ref) {
-      var node = _ref.node;
-
-      if (_this.props.closeOnSelect) {
-        _this.itemList.clearHighlightedIndex();
-
-        _this.closePopover();
-
-        _this.popover.focusAnchor();
-      }
-
-      if (node.tagName === 'A' && event.type !== 'click') {
-        node.click();
-      } else if (_this.props.onSelect) {
-        _this.props.onSelect(data);
-      }
-    });
-
-    _this.state = {
-      isPopoverOpen: props.defaultOpen || props.forceOpen,
-      preventBlur: false
-    };
-    _this.id = generateId('dropdown');
-    return _this;
-  }
-
-  var _proto = Dropdown.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        forceOpen = _this$props.forceOpen,
-        closeOnSelect = _this$props.closeOnSelect,
-        children = _this$props.children,
-        as = _this$props.as,
-        defaultOpen = _this$props.defaultOpen,
-        _innerRef = _this$props.innerRef,
-        keepInView = _this$props.keepInView,
-        lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
-        matchWidths = _this$props.matchWidths,
-        _onClick = _this$props.onClick,
-        onClose = _this$props.onClose,
-        onKeyDown = _this$props.onKeyDown,
-        onOpen = _this$props.onOpen,
-        onSearch = _this$props.onSearch,
-        placement = _this$props.placement,
-        popoverProps = _this$props.popoverProps,
-        renderTo = _this$props.renderTo,
-        triggerElement = _this$props.triggerElement,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["forceOpen", "closeOnSelect", "children", "as", "defaultOpen", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "onClick", "onClose", "onKeyDown", "onOpen", "onSearch", "placement", "popoverProps", "renderTo", "triggerElement"]);
-
-    var isPopoverOpen = this.state.isPopoverOpen;
-    var arrowIconOnly = !restProps.icon && !restProps.title;
-    var index = -1;
-    return /*#__PURE__*/React.createElement(FocusGroup, {
-      onBlur: this.closePopover
-    }, function (_ref2) {
-      var requestBlur = _ref2.requestBlur,
-          setRef = _ref2.setRef;
-      return /*#__PURE__*/React.createElement(ItemList, {
-        ref: function ref(c) {
-          return _this2.itemList = c;
-        },
-        onSelect: _this2.handleSelect
-      }, function (_ref3) {
-        var getItemByText = _ref3.getItemByText,
-            moveHighlightedIndex = _ref3.moveHighlightedIndex,
-            selectHighlightedItem = _ref3.selectHighlightedItem,
-            setHighlightedIndex = _ref3.setHighlightedIndex,
-            stringSearch = _ref3.stringSearch;
-        return /*#__PURE__*/React.createElement(Popover, _extends({}, 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,
-          display: Boolean(restProps.spinner) ? 'none' : undefined,
-          onBlur: requestBlur,
-          matchWidths: matchWidths,
-          keepInView: keepInView,
-          lockScrollWhileOpen: lockScrollWhileOpen,
-          placement: placement,
-          renderTo: renderTo,
-          open: isPopoverOpen,
-          onRequestClose: function onRequestClose() {
-            _this2.closePopover();
-
-            _this2.popover.focusAnchor();
-          },
-          anchorElement: function anchorElement(anchorProps) {
-            return /*#__PURE__*/React.createElement(ItemListController, null, function (_ref4) {
-              var _objectSpread2;
-
-              var getHighlightedItemId = _ref4.getHighlightedItemId;
-
-              var triggerProps = _objectSpread((_objectSpread2 = {
-                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;
-                  }
-
-                  setRef(_this2.id + "-button")(node);
-
-                  if (_innerRef) {
-                    _innerRef(node);
-                  }
-                },
-                'aria-activedescendant': getHighlightedItemId(),
-                'aria-owns': getHighlightedItemId(),
-                'aria-haspopup': true,
-                'aria-expanded': isPopoverOpen
-              }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
-                name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
-                size: 'sm'
-              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = function onBlur(event) {
-                if (_this2.state.preventBlur) {
-                  _this2.setState({
-                    preventBlur: false
-                  });
-                } else {
-                  requestBlur(event);
-                }
-              }, _objectSpread2.onClick = function onClick(event) {
-                _this2.togglePopover();
-
-                if (!isPopoverOpen) {
-                  _this2.popover.focusAnchor();
-                }
-
-                _onClick && _onClick(event);
-              }, _objectSpread2.onKeyDown = function onKeyDown(event) {
-                anchorProps.onKeyDown(event);
-
-                switch (event.key) {
-                  case 'ArrowUp':
-                    event.preventDefault();
-
-                    if (isPopoverOpen) {
-                      moveHighlightedIndex(-1);
-                    } else {
-                      _this2.openPopover();
-
-                      setTimeout(function () {
-                        moveHighlightedIndex(-1);
-                      });
-                    }
-
-                    break;
-
-                  case 'ArrowDown':
-                    event.preventDefault();
-
-                    if (isPopoverOpen) {
-                      moveHighlightedIndex(1);
-                    } else {
-                      _this2.openPopover();
-
-                      setTimeout(function () {
-                        moveHighlightedIndex(1);
-                      });
-                    }
-
-                    break;
-
-                  case 'Enter':
-                    if (isPopoverOpen) {
-                      event.preventDefault();
-                      selectHighlightedItem();
-                    }
-
-                    break;
-
-                  case ' ':
-                    event.preventDefault();
-
-                    _this2.togglePopover();
-
-                    break;
-
-                  default:
-                    onSearch ? onSearch(event) : stringSearch(event).then(function (text) {
-                      var item = getItemByText(text);
-
-                      if (item) {
-                        setHighlightedIndex(item.props.index);
-                      }
-                    });
-                }
-              }, _objectSpread2.onMouseDown = function onMouseDown() {
-                _this2.setState({
-                  preventBlur: true
-                });
-              }, _objectSpread2), restProps);
-
-              if ( /*#__PURE__*/React.isValidElement(triggerElement)) {
-                return /*#__PURE__*/cloneElement(triggerElement, triggerProps);
-              } else {
-                return /*#__PURE__*/createElement(triggerElement, triggerProps);
-              }
-            });
-          }
-        }), cloneChildren(children, function (child) {
-          if (child.type.displayName === ITEM_DISPLAY_NAME || child.type.displayName === LINK_DISPLAY_NAME) {
-            index++;
-            return {
-              index: index
-            };
-          } else {
-            return {};
-          }
-        }));
-      });
-    });
-  };
-
-  return Dropdown;
-}(Component);
-
-_defineProperty(Dropdown, "Item", Item);
-
-_defineProperty(Dropdown, "Link", Link);
-
-_defineProperty(Dropdown, "defaultProps", {
-  triggerElement: Button,
-  closeOnSelect: true,
-  defaultOpen: false
-});
-
-export default Dropdown;

package/dist/esm/Dropdown/Dropdown.test.js

@@ -1,167 +0,0 @@
-import React, { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
-import noop from 'lodash/noop';
-import { Box, Button, Text, ThemeProvider } from '..';
-import Dropdown from './Dropdown';
-
-var _ref = /*#__PURE__*/React.createElement(Dropdown, {
-  title: "A menu"
-});
-
-describe('Dropdown', function () {
-  describe('Text search', function () {
-    it("should render title", function () {
-      render(_ref);
-      screen.getByText('A menu');
-    });
-    it("calls passed onSearch function when receiving keyboard input", function () {
-      var customTextSearch = jest.fn();
-      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, {
-        title: "A menu",
-        onSearch: customTextSearch
-      })));
-      var dropdown = screen.getByText('A menu');
-      fireEvent.keyDown(dropdown, {
-        key: 'A',
-        code: 'KeyA'
-      });
-      expect(customTextSearch).toHaveBeenCalled();
-    });
-  });
-  describe('Keyboard navigation', function () {
-    var StatefulDropdown = function StatefulDropdown() {
-      var _useState = useState(0),
-          count = _useState[0],
-          setCount = _useState[1];
-
-      return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
-        title: "One",
-        onClick: function onClick() {
-          return noop();
-        }
-      })), /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
-        title: "Two",
-        onClick: function onClick() {
-          return setCount(function (c) {
-            return c + 1;
-          });
-        }
-      }), /*#__PURE__*/React.createElement(Text, {
-        "data-testid": "count-text"
-      }, count)), /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
-        title: "Three",
-        onClick: function onClick() {
-          return noop();
-        }
-      })))));
-    };
-
-    var _ref2 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
-
-    it('should trap focus, tab forward through all elements', function () {
-      render(_ref2);
-      userEvent.tab();
-      userEvent.keyboard('{enter}');
-
-      var _screen$getAllByRole = screen.getAllByRole('button'),
-          openPopover = _screen$getAllByRole[0],
-          buttonOne = _screen$getAllByRole[1],
-          buttonTwo = _screen$getAllByRole[2],
-          buttonThree = _screen$getAllByRole[3];
-
-      expect(openPopover).toHaveFocus();
-      userEvent.tab();
-      expect(buttonOne).toHaveFocus();
-      userEvent.tab();
-      expect(buttonTwo).toHaveFocus();
-      userEvent.tab();
-      expect(buttonThree).toHaveFocus();
-      userEvent.tab();
-      expect(buttonOne).toHaveFocus();
-    });
-
-    var _ref3 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
-
-    it('should trap focus, tab backwards from first element to last', function () {
-      render(_ref3);
-      userEvent.tab();
-      userEvent.keyboard('{enter}');
-
-      var _screen$getAllByRole2 = screen.getAllByRole('button'),
-          openPopover = _screen$getAllByRole2[0],
-          buttonOne = _screen$getAllByRole2[1],
-          _buttonTwo = _screen$getAllByRole2[2],
-          buttonThree = _screen$getAllByRole2[3];
-
-      expect(openPopover).toHaveFocus();
-      userEvent.tab();
-      expect(buttonOne).toHaveFocus();
-      userEvent.tab({
-        shift: true
-      });
-      expect(buttonThree).toHaveFocus();
-    });
-
-    var _ref4 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
-
-    it('should retain tab order after rerender', function () {
-      render(_ref4);
-      userEvent.tab();
-      userEvent.keyboard('{enter}');
-
-      var _screen$getAllByRole3 = screen.getAllByRole('button'),
-          buttonOne = _screen$getAllByRole3[1],
-          buttonTwo = _screen$getAllByRole3[2],
-          buttonThree = _screen$getAllByRole3[3];
-
-      userEvent.tab();
-      userEvent.tab();
-      expect(screen.getByTestId('count-text')).toHaveTextContent('0');
-      userEvent.keyboard('{enter}');
-      expect(screen.getByTestId('count-text')).toHaveTextContent('1');
-      expect(buttonTwo).toHaveFocus();
-      userEvent.tab();
-      expect(buttonThree).toHaveFocus();
-      userEvent.tab({
-        shift: true
-      });
-      userEvent.tab({
-        shift: true
-      });
-      expect(buttonOne).toHaveFocus();
-      userEvent.tab();
-      userEvent.tab();
-      userEvent.tab();
-      expect(buttonOne).toHaveFocus();
-      userEvent.tab({
-        shift: true
-      });
-      userEvent.tab({
-        shift: true
-      });
-      userEvent.tab({
-        shift: true
-      });
-      expect(buttonOne).toHaveFocus();
-    });
-
-    var _ref5 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
-
-    it('should focus dropdown toggle when a user presses escape key', function () {
-      render(_ref5);
-      userEvent.tab();
-      userEvent.keyboard('{enter}');
-
-      var _screen$getAllByRole4 = screen.getAllByRole('button'),
-          openPopover = _screen$getAllByRole4[0],
-          buttonOne = _screen$getAllByRole4[1];
-
-      userEvent.tab();
-      expect(buttonOne).toHaveFocus();
-      userEvent.keyboard("{esc}");
-      expect(openPopover).toHaveFocus();
-    });
-  });
-});

package/dist/esm/Dropdown/Item.js

@@ -1,58 +0,0 @@
-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';
-export var ITEM_DISPLAY_NAME = 'Dropdown.Item';
-
-var Item = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Item, _Component);
-
-  function Item() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = Item.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        disabled = _this$props.disabled,
-        index = _this$props.index,
-        onSelect = _this$props.onSelect,
-        text = _this$props.text,
-        value = _this$props.value,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["disabled", "index", "onSelect", "text", "value"]);
-
-    return /*#__PURE__*/React.createElement(ItemListItem, {
-      data: value,
-      text: text,
-      disabled: disabled,
-      index: index,
-      onSelect: onSelect
-    }, 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({
-        id: id,
-        role: "menuitem",
-        "aria-disabled": disabled,
-        disabled: disabled,
-        isHighlighted: highlighted,
-        onMouseOver: highlight,
-        onMouseOut: clearHighlight,
-        onClick: select
-      }, restProps));
-    });
-  };
-
-  return Item;
-}(Component);
-
-_defineProperty(Item, "displayName", ITEM_DISPLAY_NAME);
-
-export default Item;

package/dist/esm/Dropdown/Link.js

@@ -1,68 +0,0 @@
-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';
-export var LINK_DISPLAY_NAME = 'Dropdown.Link';
-
-var Link = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Link, _Component);
-
-  function Link() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = Link.prototype;
-
-  // Graphql wasn't picking up the correct displayName when this was
-  // assigned to LINK_DISPLAY_NAME, but using a string works
-  _proto.render = function render() {
-    var _this$props = this.props,
-        disabled = _this$props.disabled,
-        external = _this$props.external,
-        index = _this$props.index,
-        text = _this$props.text,
-        to = _this$props.to,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["disabled", "external", "index", "text", "to"]);
-
-    if (external) {
-      restProps.target = '_blank';
-    }
-
-    return /*#__PURE__*/React.createElement(ItemListItem, {
-      data: "link",
-      text: text,
-      disabled: disabled,
-      index: index
-    }, 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({
-        as: "a",
-        id: id,
-        href: disabled ? undefined : to,
-        disabled: disabled,
-        isHighlighted: highlighted,
-        onMouseOver: highlight,
-        onMouseOut: clearHighlight,
-        onKeyDown: function onKeyDown(event) {
-          return event.key === 'Enter' && select(event);
-        },
-        onClick: function onClick(event) {
-          return event.metaKey === false && select(event);
-        }
-      }, restProps));
-    });
-  };
-
-  return Link;
-}(Component);
-
-_defineProperty(Link, "displayName", 'Dropdown.Link');
-
-export default Link;

package/dist/esm/Dropdown/index.js

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