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

package/dist/esm/Badge/Badge.js

@@ -1,124 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-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 React, { cloneElement } from 'react';
-import Box from '../Box';
-import { getForegroundColor, useBoxSize, useThemeProps } from '../system';
-import StackView from '../StackView';
-import Text from '../Text';
-import { stopPropagationClick } from '../utils';
-
-function Badge(_ref) {
-  var children = _ref.children,
-      renderLeft = _ref.renderLeft,
-      renderRight = _ref.renderRight,
-      onClick = _ref.onClick,
-      title = _ref.title,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "renderLeft", "renderRight", "onClick", "title"]);
-
-  var _useThemeProps = useThemeProps('badge', restProps),
-      _useThemeProps$color = _useThemeProps.color,
-      color = _useThemeProps$color === void 0 ? {
-    foreground: 'foreground',
-    background: 'surfaceTertiary'
-  } : _useThemeProps$color,
-      _useThemeProps$radius = _useThemeProps.radius,
-      radius = _useThemeProps$radius === void 0 ? 3 : _useThemeProps$radius,
-      _useThemeProps$size = _useThemeProps.size,
-      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
-      _useThemeProps$square = _useThemeProps.square,
-      square = _useThemeProps$square === void 0 ? false : _useThemeProps$square,
-      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["color", "radius", "size", "square"]);
-
-  var badgeProps = _objectSpread({
-    color: color,
-    radius: radius,
-    size: size,
-    square: square
-  }, themeProps);
-
-  badgeProps.backgroundColor = color.background || color;
-  badgeProps.color = color.foreground || getForegroundColor(color);
-
-  var _useBoxSize = useBoxSize(badgeProps.size),
-      boxSize = _useBoxSize.boxSize,
-      fontSize = _useBoxSize.fontSize,
-      lineHeight = _useBoxSize.lineHeight,
-      paddingHorizontal = _useBoxSize.paddingHorizontal,
-      paddingHorizontalDense = _useBoxSize.paddingHorizontalDense,
-      paddingVertical = _useBoxSize.paddingVertical;
-
-  var textStyle = {
-    as: 'span',
-    fontWeight: 'inherit',
-    lineHeight: 'inherit',
-    color: 'inherit'
-  };
-
-  if (badgeProps.square || badgeProps.radius === 'circle') {
-    badgeProps.width = boxSize;
-    badgeProps.height = boxSize;
-  }
-
-  if (badgeProps.radius === 'circle') {
-    textStyle.position = 'absolute';
-    textStyle.top = '50%';
-    textStyle.left = '50%';
-    textStyle.transform = 'translate(-50%, -50%)';
-  }
-
-  badgeProps.paddingLeft = renderLeft ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
-  badgeProps.paddingRight = renderRight ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense; // The `square` prop is no longer needed and should not get
-  // passed to `<StackView>` since it's not one of its props
-  // or a standard HTML attribute.
-
-  delete badgeProps.square;
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    inline: true,
-    axis: "horizontal",
-    alignment: "center",
-    distribution: "center",
-    fontSize: fontSize,
-    lineHeight: lineHeight,
-    minHeight: boxSize,
-    paddingVertical: paddingVertical,
-    fill: "currentColor",
-    textAlign: "center",
-    position: "relative",
-    cursor: "default",
-    outline: 0,
-    focus: {
-      backgroundColor: 'highlightSecondary'
-    },
-    onClick: stopPropagationClick(onClick)
-  }, badgeProps), renderLeft && /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: boxSize,
-    height: boxSize,
-    position: "absolute",
-    top: 0,
-    left: 0
-  }, typeof renderLeft === 'string' ? renderLeft : /*#__PURE__*/cloneElement(renderLeft, {
-    size: renderLeft.props && renderLeft.props.size || badgeProps.size
-  })), typeof title === 'undefined' ? children : /*#__PURE__*/React.createElement(Text, textStyle, title), renderRight && /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: boxSize,
-    height: boxSize,
-    position: "absolute",
-    top: 0,
-    right: 0
-  }, typeof renderRight === 'string' ? renderRight : /*#__PURE__*/cloneElement(renderRight, {
-    size: renderRight.props && renderRight.props.size || badgeProps.size
-  })));
-}
-
-export default Badge;

package/dist/esm/Badge/Status.js

@@ -1,98 +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";
-import React, { Component } from 'react';
-import { getColor } from '../system';
-import Icon from '../Icon';
-import Badge from './Badge';
-var statuses = {
-  error: {
-    color: 'error',
-    icon: 'general.x'
-  },
-  success: {
-    color: 'success',
-    icon: 'general.check'
-  }
-};
-
-/**
- * Used to show a reaction to saving user data
- */
-var Status = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Status, _Component);
-
-  function Status() {
-    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), "timeout", null);
-
-    return _this;
-  }
-
-  var _proto = Status.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.requestClear();
-  };
-
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (lastProps.status !== this.props.status) {
-      this.requestClear();
-    }
-  };
-
-  _proto.requestClear = function requestClear() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-
-    this.timeout = setTimeout(this.props.onClearRequest, 1800);
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        status = _this$props.status,
-        light = _this$props.light,
-        onClearRequest = _this$props.onClearRequest,
-        props = _objectWithoutPropertiesLoose(_this$props, ["status", "light", "onClearRequest"]);
-
-    if (!status) {
-      return null;
-    } else {
-      var _statuses$status = statuses[status],
-          color = _statuses$status.color,
-          icon = _statuses$status.icon;
-      return /*#__PURE__*/React.createElement(Badge, _extends({
-        paddingRight: 1,
-        radius: "pill",
-        renderLeft: /*#__PURE__*/React.createElement(Icon, {
-          name: icon
-        }),
-        color: light ? {
-          background: 'light',
-          foreground: getColor(color)
-        } : getColor(color),
-        fontWeight: 600
-      }, props));
-    }
-  };
-
-  return Status;
-}(Component);
-
-_defineProperty(Status, "defaultProps", {
-  title: '',
-  size: 'sm'
-});
-
-Status.displayName = 'Badge.Status';
-export default Status;

package/dist/esm/Badge/index.js

@@ -1,4 +0,0 @@
-import Badge from './Badge';
-import Status from './Status';
-Badge.Status = Status;
-export default Badge;

package/dist/esm/Box/Box.js

@@ -1,35 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-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; }
-
-/** @jsxRuntime classic */
-
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import * as React from 'react';
-import splitStyles from '../system/split-styles';
-import { useVariant } from '../VariantProvider';
-var defaultElement = 'div';
-/**
- * Box is the base component that everything builds from. It is responsible for processing all style props.
- */
-
-export function Box(_ref) {
-  var as = _ref.as,
-      innerRef = _ref.innerRef,
-      inline = _ref.inline,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "innerRef", "inline"]);
-
-  var Element = as || defaultElement;
-  var variant = useVariant();
-  return jsx(Element, _extends({
-    ref: innerRef
-  }, splitStyles(_objectSpread({
-    display: inline ? 'inline-block' : 'block',
-    variant: variant
-  }, props))));
-}

package/dist/esm/Box/index.js

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

package/dist/esm/Button/Button.js

@@ -1,301 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-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 { useBoxSize, useThemeValue } from '../system';
-import Icon from '../Icon';
-import Link from '../Link';
-import Spinner from '../Spinner';
-import { StackView } from '../StackView';
-import Tooltip from '../Tooltip';
-import { mergeProps } from '../utils';
-import { useAccessibilityViolation } from '../hooks/use-accessibility-violation';
-import Input from './Input';
-
-var _ref2 = /*#__PURE__*/React.createElement(Link, {
-  external: true,
-  to: "https://planningcenter.github.io/tapestry-react/button#tooltip",
-  weight: 700
-}, "tooltip");
-
-var _ref3 = /*#__PURE__*/React.createElement(Link, {
-  external: true,
-  to: "https://planningcenter.github.io/tapestry-react/button#title",
-  weight: 700
-}, "title");
-
-export function Button(_ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      external = _ref.external,
-      icon = _ref.icon,
-      iconLeft = _ref.iconLeft,
-      iconRight = _ref.iconRight,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      size = _ref.size,
-      spinner = _ref.spinner,
-      square = _ref.square,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'default' : _ref$theme,
-      title = _ref.title,
-      to = _ref.to,
-      tooltip = _ref.tooltip,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      variant = _ref.variant,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "disabled", "external", "icon", "iconLeft", "iconRight", "onClick", "onKeyDown", "size", "spinner", "square", "theme", "title", "to", "tooltip", "type", "variant"]);
-
-  var buttonThemes = useThemeValue('button.themes');
-
-  var _useBoxSize = useBoxSize(size),
-      boxSize = _useBoxSize.boxSize,
-      fontSize = _useBoxSize.fontSize,
-      lineHeight = _useBoxSize.lineHeight,
-      paddingHorizontal = _useBoxSize.paddingHorizontal,
-      paddingHorizontalDense = _useBoxSize.paddingHorizontalDense,
-      paddingVertical = _useBoxSize.paddingVertical;
-
-  var buttonProps = {
-    alignment: 'center',
-    as: restProps.href || to ? 'a' : 'button',
-    axis: 'horizontal',
-    distribution: 'center',
-    fontSize: fontSize,
-    fontWeight: 700,
-    inline: true,
-    lineHeight: lineHeight,
-    position: 'relative',
-    radius: 3,
-    strokeAlign: 'inside',
-    strokeWeight: 1,
-    userSelect: 'none',
-    zIndex: 1,
-    type: type
-  };
-  var spinnerColor;
-
-  if (theme) {
-    var buttonTheme = buttonThemes[theme];
-
-    if (buttonTheme) {
-      var buttonThemeVariant = buttonTheme[variant || 'fill'];
-
-      if (buttonThemeVariant) {
-        buttonProps = _objectSpread(_objectSpread({}, buttonProps), buttonThemeVariant);
-      } else {
-        console.warn("Could not find \"" + variant + "\" in \"" + theme + "\" theme. Check your ThemeProvider and make sure \"" + variant + "\" variant exists in \"" + theme + "\".");
-      }
-    } else if (theme === 'false') {
-      console.warn("The string \"false\" is not a valid theme. Please pass a boolean %cfalse%c instead.", 'color:red', 'color:inherit');
-    } else {
-      console.warn("Could not find \"" + theme + "\" in button.themes. Check your ThemeProvider and make sure \"" + theme + "\" exists.");
-    }
-  } // normalize strings that should end up as objects
-
-
-  if (typeof icon === 'string') {
-    icon = {
-      name: icon
-    };
-  }
-
-  if (typeof iconLeft === 'string') {
-    iconLeft = {
-      name: iconLeft
-    };
-  }
-
-  if (typeof iconRight === 'string') {
-    iconRight = {
-      name: iconRight
-    };
-  }
-
-  if (typeof tooltip === 'string') {
-    tooltip = {
-      title: tooltip
-    };
-  } // if using an icon only button, apply dense padding and possibly an aria label
-
-
-  if (icon) {
-    paddingHorizontal = paddingHorizontalDense;
-    buttonProps['aria-label'] = tooltip ? tooltip['title'] : title;
-  } // square width and height if applicable props present
-
-
-  if (square) {
-    buttonProps.width = boxSize;
-    buttonProps.height = boxSize;
-  } else if (icon) {
-    buttonProps.minWidth = boxSize;
-    buttonProps.minHeight = boxSize;
-  } // handle padding based on the incoming radius or whether icons are present or not
-
-
-  if (restProps['radius'] === 'pill') {
-    buttonProps.paddingHorizontal = paddingHorizontal * 1.25;
-  } else if (restProps['radius'] === 'pill-left') {
-    buttonProps.paddingLeft = paddingHorizontal * 1.25;
-    buttonProps.paddingRight = paddingHorizontal;
-  } else if (restProps['radius'] === 'pill-right') {
-    buttonProps.paddingLeft = paddingHorizontal;
-    buttonProps.paddingRight = paddingHorizontal * 1.25;
-  } else if (!(icon && !iconLeft && !iconRight)) {
-    buttonProps.paddingHorizontal = paddingHorizontal;
-    buttonProps.paddingVertical = paddingVertical;
-  } // clear text and/or icons when spinner is present
-
-
-  if (spinner) {
-    spinnerColor = buttonProps.color;
-    buttonProps.color = 'transparent';
-
-    if (icon) {
-      icon['color'] = 'transparent';
-    }
-
-    if (iconLeft) {
-      iconLeft['color'] = 'transparent';
-    }
-
-    if (iconRight) {
-      iconRight['color'] = 'transparent';
-    }
-  }
-
-  if (disabled) {
-    var themeData = buttonThemes[theme];
-
-    if (themeData) {
-      var variantData = themeData[variant];
-
-      if (variantData && variantData.disabled) {
-        buttonProps = _objectSpread(_objectSpread({}, buttonProps), variantData.disabled);
-      } else {
-        buttonProps.opacity = 0.65;
-      }
-    }
-
-    buttonProps['aria-disabled'] = true;
-    buttonProps.cursor = 'not-allowed';
-
-    buttonProps.onClick = function (event) {
-      return event.preventDefault();
-    };
-
-    buttonProps.onKeyDown = function (event) {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-      }
-    };
-  } // don't apply hover/active styles or events when disabled or spinner is present
-
-
-  if (disabled || spinner) {
-    buttonProps.hover = undefined;
-    buttonProps.active = undefined;
-  } else {
-    buttonProps.focus = _objectSpread({
-      zIndex: 5
-    }, buttonProps.focus);
-    buttonProps.cursor = 'pointer';
-    buttonProps.touchAction = 'manipulation';
-    buttonProps.onClick = onClick;
-
-    buttonProps.onKeyDown = function (event) {
-      if (onClick && (event.key === 'Enter' || event.key === ' ')) {
-        event.preventDefault();
-        onClick(event);
-      }
-
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-    };
-  } // apply rel and target for external links
-
-
-  if (external) {
-    buttonProps.rel = 'noopener noreferrer';
-    buttonProps.target = '_blank';
-  } // apply href value when specified
-
-
-  if (to) {
-    restProps['href'] = to;
-  } // remove `type` if either `to` or `href` is specified
-
-
-  if (to || restProps.href) {
-    buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
-      type: null
-    });
-  } // apply stroke defaults and higher z-index when hovering to show outline in group properly
-
-
-  if (variant === 'outline') {
-    buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
-      hover: _objectSpread({
-        strokeAlign: 'inside',
-        strokeWeight: 1,
-        zIndex: 2
-      }, buttonProps.hover)
-    });
-  } // pass to if as is defined
-
-
-  if (restProps.as) {
-    buttonProps.to = to; // remove type if it is not a button
-
-    if (restProps.as !== 'button') {
-      buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
-        type: null
-      });
-    }
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (icon && !(title || tooltip && tooltip.title)) {
-      var _useAccessibilityViol = useAccessibilityViolation( /*#__PURE__*/React.createElement(React.Fragment, null, "Icon only buttons must define either a", ' ', _ref2, ' ', "or", ' ', _ref3, ' ', "prop."), "Tapestry-React: <Button/> icon only buttons must define either a \"tooltip\" or \"title\" prop for proper accessibility."),
-          tooltipProps = _useAccessibilityViol.tooltipProps,
-          wrapperProps = _useAccessibilityViol.wrapperProps;
-
-      tooltip = tooltipProps;
-      restProps = mergeProps(restProps, wrapperProps);
-    }
-
-    if (buttonProps.type && restProps.as && restProps.as !== 'button') {
-      console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
-    }
-  }
-
-  return /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(StackView, _extends({}, buttonProps, restProps, {
-    css: {
-      '&:focus-visible': _objectSpread({}, buttonProps.focusVisible)
-    }
-  }), iconLeft && /*#__PURE__*/React.createElement(Icon, _extends({
-    size: size,
-    color: buttonProps.color,
-    marginRight: paddingHorizontalDense
-  }, iconLeft)), icon ? /*#__PURE__*/React.createElement(Icon, _extends({
-    size: size,
-    color: buttonProps.color
-  }, icon)) : title || children, iconRight && /*#__PURE__*/React.createElement(Icon, _extends({
-    size: size,
-    color: buttonProps.color,
-    marginLeft: paddingHorizontalDense
-  }, iconRight)), spinner && /*#__PURE__*/React.createElement(Spinner, _extends({
-    size: size,
-    color: spinnerColor
-  }, spinner, {
-    center: true
-  }))));
-}
-Button.Input = Input;