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

package/dist/cjs/Portal/Portal.js

@@ -1,176 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.Portal = void 0;
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactDom = require("react-dom");
-
-var _styles = require("../ThemeProvider/styles");
-
-var _react2 = require("@emotion/react");
-
-/** Accepts any additional HTML attributes. */
-var Portal = /*#__PURE__*/function (_React$Component) {
-  (0, _inheritsLoose2["default"])(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;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "context", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_portalNode", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_needsUpdate", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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 = (0, _objectWithoutPropertiesLoose2["default"])(_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((0, _styles.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__*/(0, _reactDom.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);
-
-exports.Portal = Portal;
-(0, _defineProperty2["default"])(Portal, "defaultProps", {
-  renderTag: 'div',
-  renderTo: null
-});
-(0, _defineProperty2["default"])(Portal, "contextType", _react2.ThemeContext);

package/dist/cjs/Portal/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-var _exportNames = {};
-exports["default"] = void 0;
-
-var _Portal = require("./Portal");
-
-exports["default"] = _Portal.Portal;
-Object.keys(_Portal).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Portal[key]) return;
-  exports[key] = _Portal[key];
-});

package/dist/cjs/Progress/Progress.js

@@ -1,51 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _system = require("../system");
-
-function Progress(_ref) {
-  var value = _ref.value,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value"]);
-
-  var _useThemeProps = (0, _system.useThemeProps)('progress', restProps),
-      _useThemeProps$active = _useThemeProps.activeColor,
-      activeColor = _useThemeProps$active === void 0 ? 'primary' : _useThemeProps$active,
-      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeColor"]);
-
-  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
-    role: "progressbar",
-    "aria-valuenow": value,
-    width: "100%",
-    height: 0.5,
-    radius: 6,
-    position: "relative",
-    overflow: "hidden",
-    backgroundColor: "grey-3"
-  }, themeProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    transformOrigin: "center left",
-    backgroundColor: activeColor,
-    style: {
-      transform: "scaleX(" + value / 100 + ")"
-    }
-  }));
-}
-
-var _default = Progress;
-exports["default"] = _default;

package/dist/cjs/Progress/index.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _Progress = _interopRequireDefault(require("./Progress"));
-
-var _default = _Progress["default"];
-exports["default"] = _default;

package/dist/cjs/Radio/Radio.js

@@ -1,158 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _mitt = _interopRequireDefault(require("mitt"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _VariantProvider = _interopRequireDefault(require("../VariantProvider"));
-
-var _system = require("../system");
-
-var iconPaths = {
-  fill: 'tapestry.radio0',
-  checked: 'tapestry.radio1'
-};
-var radioEmitter = (0, _mitt["default"])();
-
-function Radio(_ref) {
-  var checked = _ref.checked,
-      css = _ref.css,
-      disabled = _ref.disabled,
-      id = _ref.id,
-      label = _ref.label,
-      name = _ref.name,
-      _onBlur = _ref.onBlur,
-      _onChange = _ref.onChange,
-      _onFocus = _ref.onFocus,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xs' : _ref$size,
-      value = _ref.value,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["checked", "css", "disabled", "id", "label", "name", "onBlur", "onChange", "onFocus", "size", "value"]);
-  var radioTheme = (0, _system.useThemeValue)('radio');
-  var inputRef = (0, _react.useRef)();
-
-  var _useState = (0, _react.useState)(false),
-      localChecked = _useState[0],
-      setLocalChecked = _useState[1];
-
-  var _useState2 = (0, _react.useState)(false),
-      focus = _useState2[0],
-      setFocus = _useState2[1]; // Because radio components are grouped by the name prop we use an event emitter
-  // as a way to toggle the state between each one
-
-
-  (0, _react.useEffect)(function () {
-    function handleChange(target) {
-      setLocalChecked(target === inputRef.current);
-    }
-
-    radioEmitter.on(name, handleChange);
-    return function () {
-      radioEmitter.off(name, handleChange);
-    };
-  }, []);
-  return /*#__PURE__*/_react["default"].createElement(_VariantProvider["default"], {
-    checked: checked === undefined ? localChecked : checked,
-    focus: focus
-  }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-    as: label ? 'label' : 'span',
-    inline: true,
-    axis: "horizontal",
-    alignment: "center",
-    shrink: 0,
-    opacity: disabled ? 0.5 : undefined,
-    cursor: disabled ? 'not-allowed' : undefined,
-    position: "relative"
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    innerRef: inputRef,
-    as: "input",
-    type: "radio",
-    id: id,
-    name: name,
-    checked: checked,
-    value: value,
-    disabled: disabled,
-    onChange: function onChange(event) {
-      radioEmitter.emit(name, event.target);
-      _onChange && _onChange(event);
-    },
-    onFocus: function onFocus(event) {
-      setFocus(true);
-      _onFocus && _onFocus(event);
-    },
-    onBlur: function onBlur(event) {
-      setFocus(false);
-      _onBlur && _onBlur(event);
-    },
-    position: "absolute",
-    top: 0,
-    left: 0,
-    zIndex: 0,
-    opacity: 0
-  }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    className: "tapestry-react-Radio-Icon",
-    size: size
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
-    name: iconPaths.fill,
-    fill: radioTheme.fill,
-    stroke: radioTheme.stroke,
-    transform: "scale(1)",
-    transformOrigin: "center center",
-    transition: "all 180ms ease-out",
-    variants: {
-      hover: {
-        transform: 'scale(1.125)'
-      },
-      focus: {
-        transform: 'scale(1.125)',
-        stroke: radioTheme.focusStroke
-      },
-      active: {
-        transform: 'scale(1)'
-      },
-      checked: {
-        fill: radioTheme.checkedFill,
-        stroke: radioTheme.checkedStroke
-      }
-    }
-  }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
-    name: iconPaths.checked,
-    fill: "#fff",
-    transform: "scale(0)",
-    transformOrigin: "center center",
-    transition: "all 180ms ease-out",
-    variants: {
-      checked: {
-        visibility: 'visible',
-        transform: 'scale(1)',
-        transition: 'all 120ms ease-out'
-      }
-    }
-  })), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    fontSize: 4,
-    lineHeight: 2.5,
-    marginLeft: 0.5
-  }, label)));
-}
-
-var _default = Radio;
-exports["default"] = _default;

package/dist/cjs/Radio/index.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _Radio = _interopRequireDefault(require("./Radio"));
-
-var _default = _Radio["default"];
-exports["default"] = _default;

package/dist/cjs/RangeSlider/RangeSlider.js

@@ -1,230 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _popcorn = require("@popmotion/popcorn");
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _hooks = require("../hooks");
-
-var _system = require("../system");
-
-function RangeSlider(props) {
-  var _props$min = props.min,
-      min = _props$min === void 0 ? 0 : _props$min,
-      _props$max = props.max,
-      max = _props$max === void 0 ? 100 : _props$max,
-      _props$step = props.step,
-      step = _props$step === void 0 ? 1 : _props$step,
-      disabled = props.disabled,
-      value = props.value,
-      onChange = props.onChange,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["min", "max", "step", "disabled", "value", "onChange"]);
-
-  var _useThemeProps = (0, _system.useThemeProps)('rangeSlider', restProps),
-      _useThemeProps$varian = _useThemeProps.variant,
-      variant = _useThemeProps$varian === void 0 ? {} : _useThemeProps$varian,
-      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["variant"]);
-
-  var snapTo = (0, _popcorn.snap)(step);
-  var sliderRef = (0, _react.useRef)();
-  var trackRef = (0, _react.useRef)();
-  var thumbRef = (0, _react.useRef)();
-  var startPositionRef = (0, _react.useRef)();
-  var currentValueRef = (0, _react.useRef)();
-
-  var _useMeasure = (0, _hooks.useMeasure)(),
-      useMeasureRef = _useMeasure[0],
-      useMeasureEffect = _useMeasure[1];
-
-  var _useState = (0, _react.useState)(0),
-      sliderSize = _useState[0],
-      setSliderSize = _useState[1];
-
-  var _useState2 = (0, _react.useState)(0),
-      thumbSize = _useState2[0],
-      setThumbSize = _useState2[1];
-
-  var upperBound = sliderSize - thumbSize;
-
-  function trimAlignValue(value) {
-    return snapTo((0, _popcorn.clamp)(min, max, value));
-  }
-
-  function getPointerPosition(event) {
-    if (event.touches) {
-      return event.touches[0].pageX;
-    } else {
-      return event.pageX;
-    }
-  }
-
-  function getOffsetFromValue(value) {
-    var range = max - min;
-    var ratio = (value - min) / range;
-    return ratio * upperBound;
-  }
-
-  function getValueFromOffset(offset) {
-    var ratio = offset / upperBound;
-    return ratio * (max - min) + min;
-  }
-
-  function getOffsetFromPosition(position) {
-    var sliderRect = sliderRef.current.getBoundingClientRect();
-    var sliderMin = sliderRect.left;
-    var windowOffset = window.pageXOffset;
-    var sliderStart = windowOffset + sliderMin;
-    var pixelOffset = position - sliderStart - thumbSize / 2;
-    return pixelOffset;
-  }
-
-  function getValueFromPosition(position) {
-    var diffValue = position / (sliderSize - thumbSize) * (max - min);
-    return trimAlignValue(currentValueRef.current + diffValue);
-  }
-
-  function handleThumbKeyDown(event) {
-    if (event.ctrlKey || event.shiftKey || event.altKey) {
-      return;
-    }
-
-    switch (event.key) {
-      case 'ArrowLeft':
-      case 'ArrowDown':
-      case 'Left':
-      case 'Down':
-        event.preventDefault();
-        onChange(trimAlignValue(value - step));
-        break;
-
-      case 'ArrowRight':
-      case 'ArrowUp':
-      case 'Right':
-      case 'Up':
-        event.preventDefault();
-        onChange(trimAlignValue(value + step));
-        break;
-
-      case 'Home':
-        event.preventDefault();
-        onChange(min);
-        break;
-
-      case 'End':
-        event.preventDefault();
-        onChange(max);
-        break;
-
-      default:
-    }
-  }
-
-  function handleTrackPointerDown(event) {
-    var position = getPointerPosition(event);
-    var valueAtPosition = trimAlignValue(getValueFromOffset(getOffsetFromPosition(position)));
-    startPositionRef.current = position;
-    currentValueRef.current = valueAtPosition;
-    document.addEventListener('mousemove', handlePointerMove);
-    document.addEventListener('mouseup', handlePointerUp);
-    document.addEventListener('mouseleave', handlePointerUp);
-    document.addEventListener('touchmove', handlePointerMove);
-    document.addEventListener('touchend', handlePointerUp);
-    document.addEventListener('touchcancel', handlePointerUp);
-    event.preventDefault();
-    thumbRef.current.focus();
-    onChange(valueAtPosition);
-  }
-
-  function handlePointerMove(event) {
-    var position = getPointerPosition(event);
-    var positionDifference = position - startPositionRef.current;
-    var nextValue = getValueFromPosition(positionDifference);
-    event.preventDefault();
-    onChange(nextValue);
-  }
-
-  function handlePointerUp() {
-    document.removeEventListener('mousemove', handlePointerMove);
-    document.removeEventListener('mouseup', handlePointerUp);
-    document.removeEventListener('mouseleave', handlePointerUp);
-    document.removeEventListener('touchmove', handlePointerMove);
-    document.removeEventListener('touchend', handlePointerUp);
-    document.removeEventListener('touchcancel', handlePointerUp);
-  }
-
-  useMeasureRef(sliderRef);
-  useMeasureEffect(function () {
-    var sliderRect = sliderRef.current.getBoundingClientRect();
-    var sliderMin = sliderRect.left;
-    var sliderMax = sliderRect.right;
-    var thumbRect = thumbRef.current.getBoundingClientRect();
-    var thumbSize = thumbRect.width;
-    setSliderSize(Math.abs(sliderMax - sliderMin));
-    setThumbSize(thumbSize);
-  }, []);
-  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
-    innerRef: sliderRef,
-    width: "100%",
-    paddingVertical: 0.5,
-    position: "relative",
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    opacity: disabled ? 0.65 : undefined,
-    onMouseDown: disabled ? undefined : handleTrackPointerDown,
-    onTouchStart: disabled ? undefined : handleTrackPointerDown
-  }, themeProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
-    innerRef: trackRef,
-    height: 0.5,
-    radius: 6,
-    overflow: "hidden",
-    backgroundColor: "grey-3",
-    position: "relative"
-  }, variant.track), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    transformOrigin: "center left",
-    backgroundColor: "primary",
-    style: {
-      transform: "scaleX(" + (1 - (upperBound - getOffsetFromValue(value)) / (sliderSize - thumbSize)) + ")"
-    }
-  }, variant.progress))), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
-    innerRef: thumbRef,
-    tabIndex: 0,
-    role: "slider",
-    "aria-valuenow": value,
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-disabled": disabled,
-    onKeyDown: disabled ? undefined : handleThumbKeyDown,
-    width: 1.5,
-    height: 1.5,
-    radius: "circle",
-    position: "absolute",
-    top: "50%",
-    left: 0,
-    backgroundColor: "grey-1",
-    stroke: "grey-6",
-    strokeWeight: 1,
-    style: {
-      transform: "translate(" + getOffsetFromValue(value) + "px, -50%)"
-    }
-  }, variant.thumb)));
-}
-
-var _default = RangeSlider;
-exports["default"] = _default;

package/dist/cjs/RangeSlider/index.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _RangeSlider = _interopRequireDefault(require("./RangeSlider"));
-
-var _default = _RangeSlider["default"];
-exports["default"] = _default;