@planningcenter/tapestry-react 2.0.1-rc.0 → 2.1.0

package/dist/cjs/Avatar/Avatar.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.Avatar = Avatar;
 exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -20,7 +21,8 @@ var borderSizes = {
   sm: 2,
   md: 3,
   lg: 4,
-  xl: 5
+  xl: 4,
+  xxl: 4
 };
 
 /**

package/dist/cjs/Box/Box.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -37,7 +37,7 @@ function Box(_ref) {
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["as", "innerRef", "inline"]);
   var Element = as || defaultElement;
   var variant = (0, _VariantProvider.useVariant)();
-  return (0, _core.jsx)(Element, (0, _extends2["default"])({
+  return (0, _react.jsx)(Element, (0, _extends2["default"])({
     ref: innerRef
   }, (0, _splitStyles["default"])(_objectSpread({
     display: inline ? 'inline-block' : 'block',

package/dist/cjs/Button/Button.js

@@ -238,11 +238,11 @@ function Button(_ref) {
     if (icon && !(title || tooltip && tooltip.title)) {
       var _useAccessibilityViol = (0, _useAccessibilityViolation.useAccessibilityViolation)( /*#__PURE__*/React.createElement(React.Fragment, null, "Icon only buttons must define either a", ' ', /*#__PURE__*/React.createElement(_Link["default"], {
         external: true,
-        to: "https://ministrycentered.github.io/tapestry-react/button#tooltip",
+        to: "https://planningcenter.github.io/tapestry-react/button#tooltip",
         weight: 700
       }, "tooltip"), ' ', "or", ' ', /*#__PURE__*/React.createElement(_Link["default"], {
         external: true,
-        to: "https://ministrycentered.github.io/tapestry-react/button#title",
+        to: "https://planningcenter.github.io/tapestry-react/button#title",
         weight: 700
       }, "title"), ' ', "prop."), "Tapestry-React: <Button/> icon only buttons must define either a \"tooltip\" or \"title\" prop for proper accessibility."),
           tooltipProps = _useAccessibilityViol.tooltipProps,

package/dist/cjs/Calendar/Day.js

@@ -99,5 +99,6 @@ var Day = function Day(_ref2) {
   }))));
 };
 
+Day.displayName = 'Calendar.Day';
 var _default = Day;
 exports["default"] = _default;

package/dist/cjs/Card/Card.js

@@ -5,7 +5,6 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Section = Section;
 exports.Card = Card;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -18,24 +17,16 @@ var _system = require("../system");
 
 var _StackView = require("../StackView");
 
-var _utils = require("../utils");
+var _Section = require("./Section");
 
-function Section(_ref) {
-  var subdued = _ref.subdued,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["subdued"]);
-  return /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({
-    width: "100%",
-    padding: 1,
-    backgroundColor: subdued ? 'surfaceSecondary' : undefined
-  }, restProps));
-}
+var _utils = require("../utils");
 
-function Card(_ref2) {
-  var children = _ref2.children,
-      subdued = _ref2.subdued,
-      _ref2$radius = _ref2.radius,
-      radius = _ref2$radius === void 0 ? 3 : _ref2$radius,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["children", "subdued", "radius"]);
+function Card(_ref) {
+  var children = _ref.children,
+      subdued = _ref.subdued,
+      _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? 3 : _ref$radius,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "subdued", "radius"]);
   var cardTheme = (0, _system.useThemeValue)('card');
   return /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({
     width: "100%",
@@ -46,14 +37,13 @@ function Card(_ref2) {
     backgroundColor: subdued ? 'surfaceSecondary' : 'surface',
     color: "foreground",
     radius: radius
-  }, cardTheme, restProps), radius > 0 ? (0, _utils.cloneChildren)(children, function (child, _ref3) {
-    var _ref4, _ref5;
+  }, cardTheme, restProps), radius > 0 ? (0, _utils.cloneChildren)(children, function (child, _ref2) {
+    var _ref3, _ref4;
 
-    var firstChild = _ref3.firstChild,
-        lastChild = _ref3.lastChild;
-    return child.props.radius === undefined ? firstChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref4) : lastChild ? (_ref5 = {}, _ref5["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref5) : {} : {};
+    var firstChild = _ref2.firstChild,
+        lastChild = _ref2.lastChild;
+    return child.props.radius === undefined ? firstChild ? (_ref3 = {}, _ref3["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref3) : lastChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref4) : {} : {};
   }) : children);
 }
 
-Section.displayName = 'Card.Section';
-Card.Section = Section;
+Card.Section = _Section.Section;

package/dist/cjs/Card/Section.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Section = Section;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _StackView = require("../StackView");
+
+function Section(_ref) {
+  var subdued = _ref.subdued,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["subdued"]);
+  return /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({
+    width: "100%",
+    padding: 1,
+    backgroundColor: subdued ? 'surfaceSecondary' : undefined
+  }, restProps));
+}
+
+Section.displayName = 'Card.Section';

package/dist/cjs/Checkbox/Checkbox.js

@@ -78,7 +78,7 @@ function Checkbox(_ref) {
 
     var _useAccessibilityViol = (0, _useAccessibilityViolation.useAccessibilityViolation)( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Checkbox must define a", ' ', /*#__PURE__*/_react["default"].createElement(_Link["default"], {
       external: true,
-      to: "https://ministrycentered.github.io/tapestry-react/checkbox#label",
+      to: "https://planningcenter.github.io/tapestry-react/checkbox#label",
       weight: 700
     }, "label"), ' ', "through props or a parent element that is a label."), "Tapestry-React: <Checkbox/> must define a \"label\" prop or have a parent that renders a label for proper accessibility."),
         tooltipProps = _useAccessibilityViol.tooltipProps,

package/dist/cjs/Collapse/Collapse.js

@@ -9,9 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = require("react");
+var _react2 = require("react");
 
 /** @jsxRuntime classic */
 
@@ -26,12 +26,12 @@ function Collapse(props) {
       open = props.open,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["children", "instant", "lazy", "onComplete", "open"]);
 
-  var _useState = (0, _react.useState)(lazy ? open : true),
+  var _useState = (0, _react2.useState)(lazy ? open : true),
       renderChildren = _useState[0],
       setRenderChildren = _useState[1];
 
-  var ref = (0, _react.useRef)();
-  var firstRender = (0, _react.useRef)(true);
+  var ref = (0, _react2.useRef)();
+  var firstRender = (0, _react2.useRef)(true);
   var instantRender = instant || firstRender.current;
 
   function openCollapse() {
@@ -52,7 +52,7 @@ function Collapse(props) {
     });
   }
 
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react2.useLayoutEffect)(function () {
     if (lazy) {
       if (open) {
         if (renderChildren) {
@@ -71,7 +71,7 @@ function Collapse(props) {
       }
     }
   }, [open, renderChildren]);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react2.useLayoutEffect)(function () {
     var node = ref.current;
 
     function handleComplete() {
@@ -111,10 +111,11 @@ function Collapse(props) {
       node.removeEventListener('transitionend', handleTransitionEnd);
     };
   }, [open]);
-  return (0, _core.jsx)("div", (0, _extends2["default"])({
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
     ref: ref,
     css: {
-      transition: instantRender ? undefined : transition
+      transition: instantRender ? undefined : transition,
+      visibility: open ? 'visible' : 'hidden'
     }
   }, restProps), renderChildren ? children : null);
 }

package/dist/cjs/Collapse/Collapse.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _dom = require("@testing-library/dom");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = require("..");
+
+describe('Collapse', function () {
+  describe('Render children', function () {
+    var Component = function Component() {
+      var _useState = (0, _react.useState)(false),
+          open = _useState[0],
+          setOpen = _useState[1];
+
+      return /*#__PURE__*/_react["default"].createElement(_.Box, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+        "data-testid": "toggle",
+        onClick: function onClick() {
+          return setOpen(!open);
+        }
+      }, "Toggle"), /*#__PURE__*/_react["default"].createElement(_.Collapse, {
+        open: open
+      }, /*#__PURE__*/_react["default"].createElement(_.Button, {
+        "data-testid": "child"
+      })));
+    };
+
+    it('should render collapsed children', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null));
+      expect(_react2.screen.getByTestId('child')).toBeInTheDocument();
+    });
+    it('should hide children from accessibility tree when collapsed', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null));
+      expect((0, _dom.isInaccessible)(_react2.screen.getByTestId('toggle'))).toBe(false);
+      expect((0, _dom.isInaccessible)(_react2.screen.getByTestId('child'))).toBe(true);
+    });
+    it('should include children in accessibility tree when open', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('toggle'));
+
+      expect((0, _dom.isInaccessible)(_react2.screen.getByTestId('toggle'))).toBe(false);
+      expect((0, _dom.isInaccessible)(_react2.screen.getByTestId('child'))).toBe(false);
+    });
+  });
+});

package/dist/cjs/DataTable/components/Icon.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _system = require("../../system");
 
@@ -37,10 +37,10 @@ function Icon(_ref) {
   var icons = (0, _system.useThemeValue)('icons');
   var themeColor = (0, _system.useThemeValue)(['colors', color]);
   var iconSize = sizes[size] || size;
-  var childrenToRender = name ? (0, _core.jsx)("path", {
+  var childrenToRender = name ? (0, _react.jsx)("path", {
     d: icons[name]
   }) : children;
-  return (0, _core.jsx)("svg", (0, _extends2["default"])({
+  return (0, _react.jsx)("svg", (0, _extends2["default"])({
     viewBox: "0 0 16 16",
     width: iconSize,
     height: iconSize,
@@ -58,7 +58,7 @@ function Path(_ref2) {
   var themeFill = (0, _system.useThemeValue)(['colors', fill]);
   var themeStroke = (0, _system.useThemeValue)(['colors', stroke]);
   var icons = (0, _system.useThemeValue)('icons');
-  return (0, _core.jsx)("path", (0, _extends2["default"])({
+  return (0, _react.jsx)("path", (0, _extends2["default"])({
     d: icons[name],
     fill: fill ? themeFill || fill : 'none',
     stroke: stroke ? themeStroke || stroke : undefined

package/dist/cjs/DragDrop/DragDrop.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = require("react-dom");
 
-var RBDND = _interopRequireWildcard(require("react-beautiful-dnd"));
+var RBDND = _interopRequireWildcard(require("@planningcenter/react-beautiful-dnd"));
 
 var _mitt = _interopRequireDefault(require("mitt"));
 

package/dist/cjs/GridView/GridView.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -100,7 +100,7 @@ function GridView(_ref2) {
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["as", "inline", "innerRef"]);
   var Element = as || defaultElement;
   var variant = (0, _VariantProvider.useVariant)();
-  return (0, _core.jsx)(Element, (0, _extends2["default"])({
+  return (0, _react.jsx)(Element, (0, _extends2["default"])({
     ref: innerRef
   }, (0, _splitStyles["default"])(_objectSpread({
     display: inline ? 'inline-grid' : 'grid',

package/dist/cjs/HelperDrawer/HelperDrawer.js

@@ -9,9 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = require("react");
+var _react2 = require("react");
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -27,7 +27,7 @@ var drawerToggles = {};
 function Toggle(_ref) {
   var drawerId = _ref.drawerId,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["drawerId"]);
-  var handleClick = (0, _react.useCallback)(function (event) {
+  var handleClick = (0, _react2.useCallback)(function (event) {
     var drawerToggle = drawerToggles[drawerId];
 
     if (drawerToggle) {
@@ -35,7 +35,7 @@ function Toggle(_ref) {
       drawerToggle();
     }
   }, [drawerId]);
-  return (0, _core.jsx)(_Button["default"], (0, _extends2["default"])({
+  return (0, _react.jsx)(_Button["default"], (0, _extends2["default"])({
     icon: {
       name: 'general.outlinedInfoCircle'
     },
@@ -58,11 +58,11 @@ function HelperDrawer(_ref2) {
       id = _ref2.id,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["children", "id"]);
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react2.useState)(false),
       open = _useState[0],
       setOpen = _useState[1];
 
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     drawerToggles[id] = function () {
       return setOpen(function (open) {
         return !open;
@@ -73,13 +73,13 @@ function HelperDrawer(_ref2) {
       delete drawerToggles[id];
     };
   }, [id]);
-  return (0, _core.jsx)(_Collapse["default"], {
+  return (0, _react.jsx)(_Collapse["default"], {
     open: open,
     lazy: true,
     css: {
       width: '100%'
     }
-  }, (0, _core.jsx)(_Card["default"], (0, _extends2["default"])({
+  }, (0, _react.jsx)(_Card["default"], (0, _extends2["default"])({
     subdued: true,
     padding: 1,
     fontSize: 4

package/dist/cjs/Icon/Path.js

@@ -29,5 +29,6 @@ function Path(_ref) {
   }, restProps));
 }
 
+Path.displayName = 'Icon.Path';
 var _default = Path;
 exports["default"] = _default;

package/dist/cjs/Icon/Status.js

@@ -16,9 +16,21 @@ var _Icon = _interopRequireDefault(require("./Icon"));
 var _Path = _interopRequireDefault(require("./Path"));
 
 var STATUS_VARIANTS = {
-  confirmed: ['general.outlinedCircleCheck', 'success'],
-  unconfirmed: ['general.outlinedQuestionCircle', 'warning'],
-  declined: ['general.outlinedXCircle', 'error']
+  confirmed: {
+    iconColor: 'success',
+    iconFilled: 'general.checkCircle',
+    iconOutlined: 'general.outlinedCircleCheck'
+  },
+  unconfirmed: {
+    iconColor: 'warning',
+    iconFilled: 'general.questionCircle',
+    iconOutlined: 'general.outlinedQuestionCircle'
+  },
+  declined: {
+    iconColor: 'error',
+    iconFilled: 'general.xCircle',
+    iconOutlined: 'general.outlinedXCircle'
+  }
 };
 
 function Status(props) {
@@ -26,26 +38,21 @@ function Status(props) {
       variant = props.variant,
       variantFilled = props.variantFilled,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["color", "variant", "variantFilled"]);
-  var variantName;
-  var variantColor;
-  Object.keys(STATUS_VARIANTS).some(function (key) {
-    var _STATUS_VARIANTS$key;
-
-    return variant === key ? (_STATUS_VARIANTS$key = STATUS_VARIANTS[key], variantName = _STATUS_VARIANTS$key[0], variantColor = _STATUS_VARIANTS$key[1], _STATUS_VARIANTS$key) : false;
-  });
-
-  if (variantName && variantFilled) {
-    variantName += '-filled';
-  }
-
+  var _STATUS_VARIANTS$vari = STATUS_VARIANTS[variant],
+      iconOutlined = _STATUS_VARIANTS$vari.iconOutlined,
+      iconFilled = _STATUS_VARIANTS$vari.iconFilled,
+      iconColor = _STATUS_VARIANTS$vari.iconColor;
+  var variantColor = color || iconColor;
+  var variantIcon = variantFilled ? iconFilled : iconOutlined;
   return /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
-    name: variantName,
-    color: color || variantColor
+    name: variantIcon,
+    color: variantColor
   }, restProps), /*#__PURE__*/_react["default"].createElement(_Path["default"], {
     name: "tapestry.radio0",
     color: color
   }));
 }
 
+Status.displayName = 'Icon.Status';
 var _default = Status;
 exports["default"] = _default;