@planningcenter/tapestry-react 2.10.0-rc.8 → 2.10.0

package/dist/esm/Group/Group.js

@@ -0,0 +1,43 @@
+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 from 'react';
+import StackView from '../StackView';
+import { useThemeValue } from '../system';
+import { cloneChildren } from '../utils';
+export function Group(_ref) {
+  var _ref$axis = _ref.axis,
+      axis = _ref$axis === void 0 ? 'horizontal' : _ref$axis,
+      childProps = _ref.childProps,
+      children = _ref.children,
+      radius = _ref.radius,
+      spacing = _ref.spacing,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["axis", "childProps", "children", "radius", "spacing"]);
+
+  var themeRadius = useThemeValue('group.radius');
+  var radiusValue = radius != null ? radius : themeRadius;
+  var isHorizontalLayout = axis === 'horizontal';
+  var startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop';
+  var endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom';
+  var marginBottom = isHorizontalLayout ? 0 : '-1px';
+  var marginRight = isHorizontalLayout ? '-1px' : 0;
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: axis,
+    spacing: spacing
+  }, restProps), cloneChildren(children, function (child, _ref2) {
+    var _objectSpread2;
+
+    var firstChild = _ref2.firstChild,
+        lastChild = _ref2.lastChild;
+    return _objectSpread(_objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2), !spacing && !lastChild && {
+      marginBottom: marginBottom
+    }), !spacing && !lastChild && {
+      marginRight: marginRight
+    });
+  }));
+}

package/dist/esm/Group/index.js

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

package/dist/esm/Heading/Heading.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Text from '../Text';
+import { useThemeValue } from '../system';
+
+var Heading = function Heading(_ref) {
+  var _ref$level = _ref.level,
+      level = _ref$level === void 0 ? 1 : _ref$level,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["level"]);
+
+  var headingTheme = useThemeValue('heading');
+  var lineHeights = useThemeValue('lineHeights');
+  var index = level - 1;
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "h" + level,
+    fontSize: index,
+    lineHeight: lineHeights[index] + 'px'
+  }, headingTheme, restProps));
+};
+
+export default Heading;

package/dist/esm/Heading/index.js

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

package/dist/esm/HeadingUppercase/HeadingUppercase.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Text from '../Text';
+import { useThemeProps } from '../system';
+
+var HeadingUppercase = function HeadingUppercase(_ref) {
+  var children = _ref.children,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  var themeProps = useThemeProps('HeadingUppercase', restProps);
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "span",
+    color: "foregroundSecondary",
+    cursor: "default",
+    fontSize: 5,
+    fontWeight: 700,
+    margin: 0,
+    shrink: 0,
+    uppercase: true
+  }, themeProps), children);
+};
+
+export default HeadingUppercase;

package/dist/esm/HeadingUppercase/index.js

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

package/dist/esm/HelperDrawer/HelperDrawer.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useCallback, useEffect, useState } from 'react';
+import Button from '../Button';
+import Card from '../Card';
+import Collapse from '../Collapse';
+var drawerToggles = {};
+
+function Toggle(_ref) {
+  var drawerId = _ref.drawerId,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["drawerId"]);
+
+  var handleClick = useCallback(function (event) {
+    var drawerToggle = drawerToggles[drawerId];
+
+    if (drawerToggle) {
+      event.preventDefault();
+      drawerToggle();
+    }
+  }, [drawerId]);
+  return jsx(Button, _extends({
+    icon: {
+      name: 'general.outlinedInfoCircle'
+    },
+    tooltip: {
+      title: 'More info'
+    },
+    size: "xs",
+    theme: false,
+    color: "foregroundSecondary",
+    hover: {
+      backgroundColor: 'highlight'
+    },
+    onClick: handleClick,
+    "data-helper-drawer-toggle": true
+  }, restProps));
+}
+
+function HelperDrawer(_ref2) {
+  var children = _ref2.children,
+      id = _ref2.id,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["children", "id"]);
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  useEffect(function () {
+    drawerToggles[id] = function () {
+      return setOpen(function (open) {
+        return !open;
+      });
+    };
+
+    return function () {
+      delete drawerToggles[id];
+    };
+  }, [id]);
+  return jsx(Collapse, {
+    open: open,
+    lazy: true,
+    css: {
+      width: '100%'
+    }
+  }, jsx(Card, _extends({
+    subdued: true,
+    padding: 1,
+    fontSize: 4
+  }, restProps), children));
+}
+
+HelperDrawer.Toggle = Toggle;
+export default HelperDrawer;

package/dist/esm/HelperDrawer/index.js

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

package/dist/esm/Highlight/Highlight.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Text from '../Text';
+import { useThemeProps } from '../system';
+import { markFuzzyMatchSubstring, markStartsWithMatchSubstring } from './utils';
+
+/**
+ * Highlight or mark letters in a string using a provided query.
+ */
+var Highlight = function Highlight(_ref) {
+  var _ref$marker = _ref.marker,
+      marker = _ref$marker === void 0 ? markStartsWithMatchSubstring : _ref$marker,
+      query = _ref.query,
+      text = _ref.text,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["marker", "query", "text"]);
+
+  var _useThemeProps = useThemeProps('highlight', restProps),
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["color"]);
+
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "span"
+  }, themeProps), marker(text, query).map(function (part, index) {
+    return /*#__PURE__*/React.createElement(Text, {
+      key: index,
+      inline: true,
+      as: part.highlight ? 'mark' : 'span',
+      color: part.highlight ? color : undefined,
+      backgroundColor: "transparent",
+      fontWeight: "inherit",
+      fontSize: "inherit"
+    }, part.text);
+  }));
+};
+
+Highlight.FUZZY = markFuzzyMatchSubstring;
+Highlight.STARTS_WITH = markStartsWithMatchSubstring;
+export default Highlight;

package/dist/esm/Highlight/index.js

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

package/dist/esm/Highlight/utils.js

@@ -0,0 +1,46 @@
+// inspired by: https://github.com/enigma-io/boundless/blob/master/packages/boundless-typeahead/index.js
+var matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g;
+
+function escapeStringRegexp(string) {
+  return string.replace(matchOperatorsRegex, '\\$&');
+}
+
+export function markFuzzyMatchSubstring(text, query) {
+  var fragments = text.split(new RegExp('(' + escapeStringRegexp(query) + ')', 'ig'));
+  var seekValue = query.toLowerCase();
+  var threshold = fragments.length;
+  var i = -1;
+
+  while (++i < threshold) {
+    var fragment = fragments[i];
+    fragments[i] = {
+      text: fragment.replace(/ /g, "\xA0"),
+      highlight: fragment.toLowerCase() === seekValue
+    };
+  }
+
+  return fragments;
+}
+export function markStartsWithMatchSubstring(text, query) {
+  var seekValue = query.toLowerCase();
+  var indexStart = text.toLowerCase().indexOf(seekValue);
+  var indexEnd = indexStart + seekValue.length;
+
+  if (indexStart === -1) {
+    return [{
+      text: text,
+      highlight: false
+    }];
+  }
+
+  return [{
+    text: text.slice(0, indexStart).replace(/ /g, "\xA0"),
+    highlight: false
+  }, {
+    text: text.slice(indexStart, indexEnd).replace(/ /g, "\xA0"),
+    highlight: true
+  }, {
+    text: text.slice(indexEnd).replace(/ /g, "\xA0"),
+    highlight: false
+  }];
+}

package/dist/esm/Icon/Icon.js

@@ -0,0 +1,46 @@
+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 { useThemeValue } from '../system';
+var sizes = {
+  xxs: '8px',
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '18px',
+  xl: '32px',
+  xxl: '48px'
+};
+
+var Icon = function Icon(_ref) {
+  var _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["name", "size", "color", "children"]);
+
+  var themeProps = useThemeValue('icon');
+  var pathData = useThemeValue(['icons'].concat(name.split('.')));
+  var iconSize = sizes[size] || size;
+  var childrenToRender = name ? /*#__PURE__*/React.createElement("path", {
+    d: pathData
+  }) : children;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "svg",
+    viewBox: "0 0 16 16",
+    width: iconSize,
+    height: iconSize,
+    basis: iconSize,
+    grow: 0,
+    shrink: 0,
+    fill: color,
+    fillRule: "evenodd",
+    children: childrenToRender
+  }, themeProps, props));
+};
+
+export default Icon;

package/dist/esm/Icon/Path.js

@@ -0,0 +1,23 @@
+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 { useThemeValue } from '../system';
+
+function Path(_ref) {
+  var _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["name", "color"]);
+
+  var pathData = useThemeValue(['icons'].concat(name.split('.')));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "path",
+    d: pathData,
+    fill: color
+  }, restProps));
+}
+
+Path.displayName = 'Icon.Path';
+export default Path;

package/dist/esm/Icon/Status.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Icon from './Icon';
+import Path from './Path';
+var STATUS_VARIANTS = {
+  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) {
+  var color = props.color,
+      variant = props.variant,
+      variantFilled = props.variantFilled,
+      restProps = _objectWithoutPropertiesLoose(props, ["color", "variant", "variantFilled"]);
+
+  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.createElement(Icon, _extends({
+    name: variantIcon,
+    color: variantColor
+  }, restProps), /*#__PURE__*/React.createElement(Path, {
+    name: "tapestry.radio0",
+    color: color
+  }));
+}
+
+Status.displayName = 'Icon.Status';
+export default Status;

package/dist/esm/Icon/index.js

@@ -0,0 +1,6 @@
+import Icon from './Icon';
+import Path from './Path';
+import Status from './Status';
+Icon.Path = Path;
+Icon.Status = Status;
+export default Icon;

package/dist/esm/Input/Inline.js

@@ -0,0 +1,50 @@
+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 from 'react';
+import InputField from './InputField';
+import { designTokens } from '../designTokens';
+
+function Inline(_ref) {
+  var light = _ref.light,
+      hover = _ref.hover,
+      focus = _ref.focus,
+      _ref$highlightColor = _ref.highlightColor,
+      highlightColor = _ref$highlightColor === void 0 ? light ? 'light-0' : 'highlight' : _ref$highlightColor,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["light", "hover", "focus", "highlightColor"]);
+
+  var pseudoStyles = restProps.readOnly || restProps.disabled ? {} : {
+    backgroundColor: highlightColor
+  };
+
+  if (restProps.disabled) {
+    restProps.cursor = 'not-allowed';
+    restProps.tabIndex = undefined;
+    restProps.opacity = 0.64;
+  } else if (hover || focus) {
+    restProps = _objectSpread(_objectSpread({}, restProps), pseudoStyles);
+  }
+
+  return /*#__PURE__*/React.createElement(InputField, _extends({
+    autoWidth: true,
+    backgroundColor: "transparent",
+    color: light ? 'light-9' : 'foreground',
+    focus: pseudoStyles,
+    grow: 0,
+    hover: pseudoStyles,
+    marginHorizontal: -0.5,
+    paddingHorizontal: 0.5,
+    paddingVertical: 0,
+    placeholderColor: light ? 'light-5' : 'foregroundTertiary',
+    radius: designTokens.input.borderRadius,
+    stroke: undefined
+  }, restProps));
+}
+
+Inline.displayName = 'Input.Inline';
+export default Inline;

package/dist/esm/Input/Input.js

@@ -0,0 +1,118 @@
+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 InputBox from './InputBox';
+import InputField from './InputField';
+
+var Input = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Input, _Component);
+
+  function Input() {
+    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), "setInputNode", function (node) {
+      _this.inputNode = node;
+    });
+
+    return _this;
+  }
+
+  var _proto = Input.prototype;
+
+  _proto.focus = function focus() {
+    this.inputNode.focus();
+  };
+
+  _proto.blur = function blur() {
+    this.inputNode.blur();
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        backgroundColor = _this$props.backgroundColor,
+        color = _this$props.color,
+        autoComplete = _this$props.autoComplete,
+        autoFocus = _this$props.autoFocus,
+        autoWidth = _this$props.autoWidth,
+        defaultValue = _this$props.defaultValue,
+        disabled = _this$props.disabled,
+        focus = _this$props.focus,
+        hover = _this$props.hover,
+        id = _this$props.id,
+        min = _this$props.min,
+        minLength = _this$props.minLength,
+        max = _this$props.max,
+        maxLength = _this$props.maxLength,
+        name = _this$props.name,
+        onBlur = _this$props.onBlur,
+        onChange = _this$props.onChange,
+        onFocus = _this$props.onFocus,
+        onKeyDown = _this$props.onKeyDown,
+        onKeyUp = _this$props.onKeyUp,
+        placeholder = _this$props.placeholder,
+        placeholderColor = _this$props.placeholderColor,
+        readOnly = _this$props.readOnly,
+        highlightOnInteraction = _this$props.highlightOnInteraction,
+        type = _this$props.type,
+        value = _this$props.value,
+        required = _this$props.required,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value", "required"]);
+
+    var ariaLabel = restProps['aria-label'];
+
+    if (ariaLabel) {
+      delete restProps['aria-label'];
+    }
+
+    return /*#__PURE__*/React.createElement(InputBox, _extends({
+      disabled: disabled,
+      backgroundColor: backgroundColor,
+      color: color,
+      focus: focus,
+      hover: hover
+    }, restProps), /*#__PURE__*/React.createElement(InputField, {
+      "aria-label": ariaLabel,
+      width: "100%",
+      textOverflow: "ellipsis",
+      innerRef: this.setInputNode,
+      backgroundColor: "transparent",
+      color: "inherit",
+      id: id,
+      autoComplete: autoComplete,
+      autoFocus: autoFocus,
+      autoWidth: autoWidth,
+      type: type,
+      name: name,
+      disabled: disabled,
+      readOnly: readOnly,
+      highlightOnInteraction: highlightOnInteraction,
+      placeholder: placeholder,
+      placeholderColor: placeholderColor,
+      defaultValue: defaultValue,
+      min: min,
+      minLength: minLength,
+      max: max,
+      maxLength: maxLength,
+      value: value,
+      onChange: onChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      required: required
+    }));
+  };
+
+  return Input;
+}(Component);
+
+export default Input;