@planningcenter/tapestry-react 3.0.0 → 4.0.0-rc.2

package/dist/esm/Badge/Badge.js

@@ -1,126 +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';
-
-var Badge = function Badge(_ref) {
-  var _renderLeft$props, _renderRight$props;
-
-  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
-  }, /*#__PURE__*/React.isValidElement(renderLeft) ? /*#__PURE__*/cloneElement(renderLeft, {
-    size: (renderLeft == null ? void 0 : (_renderLeft$props = renderLeft.props) == null ? void 0 : _renderLeft$props.size) || badgeProps.size
-  }) : renderLeft), 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
-  }, /*#__PURE__*/React.isValidElement(renderRight) ? /*#__PURE__*/cloneElement(renderRight, {
-    size: (renderRight == null ? void 0 : (_renderRight$props = renderRight.props) == null ? void 0 : _renderRight$props.size) || badgeProps.size
-  }) : renderRight));
-};
-
-export default Badge;

package/dist/esm/Badge/Status.js

@@ -1,72 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useEffect, useState } from 'react';
-import { getColor } from '../system';
-import Icon from '../Icon';
-import { default as Badge } from './Badge';
-var statuses = {
-  error: {
-    color: 'error',
-    icon: 'general.x'
-  },
-  success: {
-    color: 'success',
-    icon: 'general.check'
-  }
-};
-
-var Status = function Status(_ref) {
-  var light = _ref.light,
-      onClearRequest = _ref.onClearRequest,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'sm' : _ref$size,
-      status = _ref.status,
-      title = _ref.title,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["light", "onClearRequest", "size", "status", "title"]);
-
-  var _useState = useState(null),
-      timeoutId = _useState[0],
-      setTimeoutId = _useState[1];
-
-  useEffect(function () {
-    var requestClear = function requestClear() {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-
-      setTimeoutId(setTimeout(onClearRequest, 1800));
-    };
-
-    requestClear();
-    return function () {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [status]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  if (!status) {
-    return null;
-  } else {
-    var _statuses$status = statuses[status],
-        color = _statuses$status.color,
-        icon = _statuses$status.icon;
-    return /*#__PURE__*/React.createElement(Badge, _extends({
-      color: light ? {
-        background: 'light',
-        foreground: getColor(color)
-      } : getColor(color),
-      fontWeight: 600,
-      paddingRight: 1,
-      radius: "pill",
-      renderLeft: /*#__PURE__*/React.createElement(Icon, {
-        name: icon
-      }),
-      size: size,
-      title: title
-    }, restProps));
-  }
-};
-
-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,33 +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; }
-
-/** @jsx jsx */
-import * as React from 'react';
-import { jsx } from '@emotion/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 var Box = function Box(_ref) {
-  var as = _ref.as,
-      inline = _ref.inline,
-      innerRef = _ref.innerRef,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "inline", "innerRef"]);
-
-  var variant = useVariant();
-  var Element = as || defaultElement;
-  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,302 +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 { designTokens } from '../designTokens';
-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: designTokens.button.borderRadius,
-    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;