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

package/dist/esm/Popover/Popover.js

@@ -1,207 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
-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 * as React from 'react';
-import { createPopper } from '@popperjs/core';
-import Box from '../Box';
-import Portal from '../Portal';
-import { lockScroll } from '../utils';
-import rewireTabOrder from './rewireTabOrder';
-import { getFixedParent, getModifiers } from './utils';
-import { useThemeProps } from '../system';
-export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var anchorElement = _ref.anchorElement,
-      _ref$as = _ref.as,
-      Element = _ref$as === void 0 ? Box : _ref$as,
-      innerRef = _ref.innerRef,
-      _ref$keepInView = _ref.keepInView,
-      keepInView = _ref$keepInView === void 0 ? true : _ref$keepInView,
-      lockScrollWhileOpen = _ref.lockScrollWhileOpen,
-      matchWidths = _ref.matchWidths,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? 8 : _ref$offset,
-      open = _ref.open,
-      onKeyDown = _ref.onKeyDown,
-      onRequestClose = _ref.onRequestClose,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-      relativeTo = _ref.relativeTo,
-      renderTo = _ref.renderTo,
-      _ref$shouldFlip = _ref.shouldFlip,
-      shouldFlip = _ref$shouldFlip === void 0 ? false : _ref$shouldFlip,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["anchorElement", "as", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "offset", "open", "onKeyDown", "onRequestClose", "placement", "relativeTo", "renderTo", "shouldFlip"]);
-
-  var _useThemeProps = useThemeProps('popover', restProps),
-      _useThemeProps$zIndex = _useThemeProps.zIndex,
-      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
-      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["zIndex"]);
-
-  var anchorRef = React.useRef(null);
-  var popperRef = React.useRef(null);
-  var unlockScroll = React.useRef(null);
-  var unwireTabOrder = React.useRef(null);
-
-  var _React$useState = React.useState(renderTo),
-      renderPopperTo = _React$useState[0],
-      setRenderPopperTo = _React$useState[1];
-
-  var setPopperInnerRef = function setPopperInnerRef(popperNode) {
-    if (popperNode) {
-      if (popperRef.current === null) {
-        var anchorNode = relativeTo ? relativeTo.current || relativeTo : anchorRef.current;
-        popperRef.current = createPopper(anchorNode, popperNode, {
-          placement: placement,
-          // PopperJS is written in Flow and TS isn't playing nice :(
-          // @ts-ignore
-          modifiers: getModifiers({
-            matchWidths: matchWidths,
-            offset: offset,
-            keepInView: keepInView,
-            shouldFlip: shouldFlip
-          })
-        });
-
-        if (unwireTabOrder.current) {
-          unwireTabOrder.current();
-        }
-
-        unwireTabOrder.current = rewireTabOrder(popperNode);
-
-        if (lockScrollWhileOpen) {
-          if (unlockScroll.current) {
-            unlockScroll.current();
-          }
-
-          unlockScroll.current = lockScroll(popperNode);
-        }
-      }
-    } else {
-      cleanup();
-    }
-
-    if (typeof innerRef === 'function') {
-      innerRef(popperNode);
-    } else if (innerRef != null && innerRef.current) {
-      innerRef.current = popperNode;
-    }
-  };
-
-  var cleanup = function cleanup() {
-    if (popperRef.current) {
-      popperRef.current.destroy();
-      popperRef.current = null;
-    }
-
-    if (unwireTabOrder.current) {
-      unwireTabOrder.current();
-      unwireTabOrder.current = null;
-    }
-
-    if (unlockScroll.current) {
-      unlockScroll.current();
-      unlockScroll.current = null;
-    }
-  };
-
-  var requestClose = function requestClose(event) {
-    if (event.key === 'Escape' && onRequestClose) {
-      if (open) {
-        event.nativeEvent.stopImmediatePropagation();
-      }
-
-      onRequestClose();
-    }
-
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  }; // cleanup when open has changed to `false` and on component unmount
-
-
-  React.useEffect(function () {
-    return function () {
-      if (open === false) {
-        cleanup();
-      }
-    };
-  }, [open]); // reposition the popover if an update in React occured while open
-  // for instance this can happen when selecting multiple items in a menu and the anchor grows/shrinks
-
-  React.useEffect(function () {
-    if (open && popperRef.current) {
-      popperRef.current.update();
-    }
-  }); // by default this will make sure popovers render in the same fixed area as the anchor
-
-  React.useEffect(function () {
-    if (renderPopperTo === undefined && anchorElement) {
-      setRenderPopperTo(getFixedParent(anchorElement));
-    }
-  }, [anchorElement]); // carried over from previous implementation, used exclusively in Dropdown
-
-  React.useImperativeHandle(ref, function () {
-    return {
-      focusAnchor: function focusAnchor() {
-        if (anchorRef.current && anchorRef.current.focus) {
-          anchorRef.current.focus();
-        }
-      }
-    };
-  });
-  return /*#__PURE__*/React.createElement(Portal, {
-    renderTo: renderPopperTo
-  }, typeof anchorElement === 'function' ? anchorElement({
-    innerRef: function innerRef(node) {
-      return anchorRef.current = node;
-    },
-    onKeyDown: requestClose
-  }) : /*#__PURE__*/React.cloneElement(anchorElement, {
-    innerRef: function innerRef(node) {
-      var _anchorElement$props$;
-
-      anchorRef.current = node;
-
-      if (typeof anchorElement.props.innerRef === 'function') {
-        anchorElement.props.innerRef(node);
-      } else if ((_anchorElement$props$ = anchorElement.props.innerRef) != null && _anchorElement$props$.current) {
-        anchorElement.props.innerRef.current = node;
-      }
-    },
-    onKeyDown: function onKeyDown(event) {
-      requestClose(event);
-
-      if (anchorElement.props.onKeyDown) {
-        anchorElement.props.onKeyDown(event);
-      }
-    }
-  }), open ? /*#__PURE__*/React.createElement(Element, _objectSpread({
-    innerRef: setPopperInnerRef,
-    width: 'auto',
-    onKeyDown: function (_onKeyDown) {
-      function onKeyDown(_x) {
-        return _onKeyDown.apply(this, arguments);
-      }
-
-      onKeyDown.toString = function () {
-        return _onKeyDown.toString();
-      };
-
-      return onKeyDown;
-    }(function (event) {
-      requestClose(event);
-
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-    }),
-    // ideally this should be pulled out to something like ThemeProvider for predictable z indices
-    style: {
-      zIndex: zIndex
-    }
-  }, themeProps)) : null);
-});
-Popover.displayName = 'Popover';

package/dist/esm/Popover/Popover.test.js

@@ -1,51 +0,0 @@
-import React, { useState } from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
-import { Box, Text, Button, Popover } from '..';
-
-var PopBasic = function PopBasic(_ref) {
-  var children = _ref.children;
-
-  var _useState = useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  return /*#__PURE__*/React.createElement(Box, {
-    id: "container"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    open: open,
-    offset: 1,
-    renderTo: "#container",
-    anchorElement: /*#__PURE__*/React.createElement(Button, {
-      title: "Toggle",
-      onClick: function onClick() {
-        return setOpen(!open);
-      },
-      id: "anchor-element"
-    })
-  }, children));
-};
-
-var _ref2 = /*#__PURE__*/React.createElement(PopBasic, null, /*#__PURE__*/React.createElement(Box, null));
-
-describe('Popover', function () {
-  it('should not render string in closed Popover', function () {
-    var string = 'Test Text';
-    render( /*#__PURE__*/React.createElement(PopBasic, null, /*#__PURE__*/React.createElement(Text, null, string)));
-    expect(screen.queryByText(string)).toBeNull();
-  });
-  it('should render string in open Popover', function () {
-    var string = 'Test Text';
-    render( /*#__PURE__*/React.createElement(PopBasic, null, /*#__PURE__*/React.createElement(Text, null, string)));
-    var openPopover = screen.getByRole('button');
-    userEvent.click(openPopover);
-    expect(screen.getByText(string)).toBeInTheDocument();
-  });
-  it('should focus open button on click', function () {
-    render(_ref2);
-    var openPopover = screen.getByRole('button');
-    userEvent.click(openPopover);
-    expect(openPopover).toHaveFocus();
-  });
-});

package/dist/esm/Popover/index.js

@@ -1,2 +0,0 @@
-export * from './Popover';
-export { Popover as default } from './Popover';

package/dist/esm/Popover/rewireTabOrder.js

@@ -1,102 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { tabbable } from 'tabbable';
-var TAB_KEY = 9;
-
-function getNextActiveElement(node, startNode) {
-  if (startNode === void 0) {
-    startNode = null;
-  }
-
-  var tabbables = tabbable(node.parentNode);
-  var nodeToStartAt = startNode || node;
-  var nextTabbable = tabbables[tabbables.indexOf(nodeToStartAt) + 1];
-
-  if (!nextTabbable && node !== document.body) {
-    return getNextActiveElement(node.parentNode, nodeToStartAt);
-  }
-
-  return nextTabbable;
-}
-
-var RewireTabOrder = /*#__PURE__*/function () {
-  function RewireTabOrder(node) {
-    var _this = this;
-
-    _defineProperty(this, "tabbables", []);
-
-    _defineProperty(this, "firstFocusableElement", null);
-
-    _defineProperty(this, "lastFocusableElement", null);
-
-    _defineProperty(this, "originalActiveElement", null);
-
-    _defineProperty(this, "nextActiveElement", null);
-
-    _defineProperty(this, "moveFocusToTargetFromTriggerElement", function (event) {
-      if (!event.shiftKey && event.keyCode === TAB_KEY) {
-        event.preventDefault();
-
-        if (_this.tabbables.includes(_this.nextActiveElement)) {
-          _this.nextActiveElement.focus();
-        } else {
-          _this.firstFocusableElement.focus();
-        }
-      }
-    });
-
-    _defineProperty(this, "moveFocusToTargetFromFirstElement", function (event) {
-      if (event.target === _this.firstFocusableElement && event.shiftKey && event.keyCode === TAB_KEY) {
-        event.preventDefault();
-
-        _this.lastFocusableElement.focus();
-      }
-    });
-
-    _defineProperty(this, "moveFocusToTargetFromLastElement", function (event) {
-      if (event.target === _this.lastFocusableElement && !event.shiftKey && event.keyCode === TAB_KEY) {
-        event.preventDefault();
-
-        _this.firstFocusableElement.focus();
-      }
-    });
-
-    if (node) {
-      this.tabbables = tabbable(node);
-
-      if (this.tabbables.length > 0) {
-        this.init();
-      }
-    }
-  }
-
-  var _proto = RewireTabOrder.prototype;
-
-  _proto.init = function init() {
-    this.firstFocusableElement = this.tabbables[0];
-    this.lastFocusableElement = this.tabbables[this.tabbables.length - 1];
-    this.originalActiveElement = document.activeElement;
-    this.nextActiveElement = getNextActiveElement(this.originalActiveElement);
-    this.originalActiveElement.addEventListener('keydown', this.moveFocusToTargetFromTriggerElement);
-    this.firstFocusableElement.addEventListener('keydown', this.moveFocusToTargetFromFirstElement);
-    this.lastFocusableElement.addEventListener('keydown', this.moveFocusToTargetFromLastElement);
-  };
-
-  _proto.destroy = function destroy() {
-    if (this.tabbables.length === 0) {
-      return;
-    }
-
-    this.originalActiveElement.removeEventListener('keydown', this.moveFocusToTargetFromTriggerElement);
-    this.firstFocusableElement.removeEventListener('keydown', this.moveFocusToTargetFromFirstElement);
-    this.lastFocusableElement.removeEventListener('keydown', this.moveFocusToTargetFromLastElement);
-  };
-
-  return RewireTabOrder;
-}();
-
-export default (function (node) {
-  var unwireTabOrder = new RewireTabOrder(node);
-  return function () {
-    return unwireTabOrder.destroy();
-  };
-});

package/dist/esm/Popover/utils.js

@@ -1,63 +0,0 @@
-import maxSize from 'popper-max-size-modifier';
-export function getModifiers(_ref) {
-  var matchWidths = _ref.matchWidths,
-      offset = _ref.offset,
-      keepInView = _ref.keepInView,
-      shouldFlip = _ref.shouldFlip;
-  return [// https://popper.js.org/docs/v2/modifiers/community-modifiers/
-  maxSize, {
-    name: 'applyMaxSize',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['maxSize'],
-    fn: function fn(_ref2) {
-      var state = _ref2.state;
-      var height = state.modifiersData.maxSize.height;
-      state.styles.popper.maxHeight = height + "px";
-    }
-  }, {
-    name: 'matchWidths',
-    enabled: Boolean(matchWidths),
-    phase: 'write',
-    requires: ['computeStyles'],
-    fn: function fn() {},
-    effect: function effect(_ref3) {
-      var state = _ref3.state;
-      var offsetWidth = state.elements.reference.offsetWidth;
-
-      if (matchWidths === 'minimum') {
-        if (offsetWidth > state.elements.popper.offsetWidth) {
-          state.elements.popper.style.minWidth = offsetWidth + "px";
-        }
-      } else {
-        state.elements.popper.style.width = offsetWidth + "px";
-      }
-    }
-  }, {
-    name: 'offset',
-    options: {
-      offset: [0, offset]
-    }
-  }, {
-    name: 'preventOverflow',
-    enabled: keepInView
-  }, {
-    name: 'flip',
-    enabled: shouldFlip
-  }];
-}
-export function getFixedParent(node) {
-  var offsetParent = node.offsetParent;
-
-  if (offsetParent) {
-    var offsetParentStyles = getComputedStyle(offsetParent);
-
-    if (offsetParentStyles.position !== 'fixed') {
-      return getFixedParent(offsetParent);
-    } else {
-      return offsetParent;
-    }
-  } else {
-    return null;
-  }
-}

package/dist/esm/Portal/Portal.js

@@ -1,168 +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 * as React from 'react';
-import { createPortal } from 'react-dom';
-import { getThemeDataAttribute } from '../ThemeProvider/styles';
-import { ThemeContext } from '@emotion/react';
-
-/** Accepts any additional HTML attributes. */
-var Portal = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Portal, _React$Component);
-
-  function Portal() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "context", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "_portalNode", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_needsUpdate", false);
-
-    _defineProperty(_assertThisInitialized(_this), "_updated", false);
-
-    return _this;
-  }
-
-  var _proto = Portal.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    var secondChild = this._getSecondChild();
-
-    if (secondChild) {
-      this._setupPortal();
-
-      this._updatePortal();
-    }
-  };
-
-  _proto.componentDidUpdate = function componentDidUpdate() {
-    var secondChild = this._getSecondChild();
-
-    if (secondChild && !this._portalNode) {
-      this._setupPortal();
-    } else if (!secondChild && this._portalNode) {
-      this._destroyPortal();
-    }
-
-    if (secondChild) {
-      this._updatePortal();
-    }
-
-    if (this._needsUpdate) {
-      if (this._updated) {
-        if (this.props.onUpdate) {
-          this.props.onUpdate();
-        }
-
-        this._updated = false;
-        this._needsUpdate = false;
-      } else {
-        this.forceUpdate();
-        this._updated = true;
-      }
-    }
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this._destroyPortal();
-  };
-
-  _proto._getSecondChild = function _getSecondChild() {
-    return React.Children.toArray(this.props.children)[1];
-  };
-
-  _proto._getRenderToNode = function _getRenderToNode() {
-    var renderTo = this.props.renderTo;
-
-    if (typeof renderTo === 'string') {
-      return document.querySelector(renderTo);
-    } else {
-      return renderTo || document.body;
-    }
-  };
-
-  _proto._setupPortal = function _setupPortal() {
-    if (typeof document !== 'undefined') {
-      this._portalNode = document.createElement(this.props.renderTag);
-
-      this._getRenderToNode().appendChild(this._portalNode);
-
-      if (this.props.getPortalNode) {
-        this.props.getPortalNode(this._portalNode);
-      }
-    }
-
-    this.forceUpdate();
-    this._needsUpdate = true;
-  };
-
-  _proto._updatePortal = function _updatePortal() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        renderTo = _this$props.renderTo,
-        renderTag = _this$props.renderTag,
-        onUpdate = _this$props.onUpdate,
-        getPortalNode = _this$props.getPortalNode,
-        style = _this$props.style,
-        children = _this$props.children,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["renderTo", "renderTag", "onUpdate", "getPortalNode", "style", "children"]);
-
-    Object.keys(restProps).forEach(function (key) {
-      _this2._portalNode.setAttribute(key, restProps[key]);
-    });
-
-    this._portalNode.classList.add('tapestry-react-reset');
-
-    this._portalNode.setAttribute(getThemeDataAttribute(this.context.id), 'true');
-
-    if (style) {
-      Object.keys(style).forEach(function (key) {
-        _this2._portalNode.style[key] = style[key];
-      });
-    }
-  };
-
-  _proto._renderPortal = function _renderPortal(component) {
-    return /*#__PURE__*/createPortal(component, this._portalNode);
-  };
-
-  _proto._destroyPortal = function _destroyPortal() {
-    if (this._portalNode) {
-      this._portalNode.parentNode.removeChild(this._portalNode);
-
-      if (this.props.getPortalNode) {
-        this.props.getPortalNode(null);
-      }
-    }
-
-    this._portalNode = null;
-  };
-
-  _proto.render = function render() {
-    var _React$Children$toArr = React.Children.toArray(this.props.children),
-        firstChild = _React$Children$toArr[0],
-        secondChild = _React$Children$toArr[1];
-
-    return this._portalNode ? /*#__PURE__*/React.createElement(React.Fragment, null, firstChild, this._renderPortal(secondChild)) : firstChild;
-  };
-
-  return Portal;
-}(React.Component);
-
-_defineProperty(Portal, "defaultProps", {
-  renderTag: 'div',
-  renderTo: null
-});
-
-_defineProperty(Portal, "contextType", ThemeContext);
-
-export { Portal };

package/dist/esm/Portal/index.js

@@ -1,2 +0,0 @@
-export * from './Portal';
-export { Portal as default } from './Portal';

package/dist/esm/Progress/Progress.js

@@ -1,39 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import Box from '../Box';
-import { useThemeProps } from '../system';
-
-function Progress(_ref) {
-  var value = _ref.value,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["value"]);
-
-  var _useThemeProps = useThemeProps('progress', restProps),
-      _useThemeProps$active = _useThemeProps.activeColor,
-      activeColor = _useThemeProps$active === void 0 ? 'primary' : _useThemeProps$active,
-      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeColor"]);
-
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    role: "progressbar",
-    "aria-valuenow": value,
-    width: "100%",
-    height: 0.5,
-    radius: 6,
-    position: "relative",
-    overflow: "hidden",
-    backgroundColor: "grey-3"
-  }, themeProps), /*#__PURE__*/React.createElement(Box, {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    transformOrigin: "center left",
-    backgroundColor: activeColor,
-    style: {
-      transform: "scaleX(" + value / 100 + ")"
-    }
-  }));
-}
-
-export default Progress;

package/dist/esm/Progress/index.js

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