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

package/dist/esm/Radio/Radio.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useEffect, useState, useRef } from 'react';
+import mitt from 'mitt';
+import Box from '../Box';
+import Icon from '../Icon';
+import StackView from '../StackView';
+import Text from '../Text';
+import VariantProvider from '../VariantProvider';
+import { useThemeValue } from '../system';
+var iconPaths = {
+  fill: 'tapestry.radio0',
+  checked: 'tapestry.radio1'
+};
+var radioEmitter = mitt();
+
+var Radio = function Radio(_ref) {
+  var checked = _ref.checked,
+      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 = _objectWithoutPropertiesLoose(_ref, ["checked", "disabled", "id", "label", "name", "onBlur", "onChange", "onFocus", "size", "value"]);
+
+  var radioTheme = useThemeValue('radio');
+  var inputRef = useRef();
+
+  var _useState = useState(false),
+      localChecked = _useState[0],
+      setLocalChecked = _useState[1];
+
+  var _useState2 = 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
+
+
+  useEffect(function () {
+    function handleChange(target) {
+      setLocalChecked(target === inputRef.current);
+    }
+
+    radioEmitter.on(name, handleChange);
+    return function () {
+      radioEmitter.off(name, handleChange);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(VariantProvider, {
+    checked: checked === undefined ? localChecked : checked,
+    focus: focus
+  }, /*#__PURE__*/React.createElement(StackView, _extends({
+    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.createElement(Box, {
+    innerRef: inputRef,
+    as: "input" // Type '{ innerRef: MutableRefObject<undefined>; as: string; type: string; id: string; name: string; checked: boolean; value: any; disabled: boolean; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onFocus: (event: FocusEvent<...>) => void; onBlur: (event: FocusEvent<...>) => void; position: "absolute"; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any> & HTMLAttributes<any> & ImgHTMLAttributes<any> & { children?: any; ... 5 more ...; mediaQueries?: object; } & ... 4 more ... & Variants<...>'.
+    // @ts-ignore
+    ,
+    type: "radio",
+    id: String(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.createElement(Icon, {
+    className: "tapestry-react-Radio-Icon",
+    size: size
+  }, /*#__PURE__*/React.createElement(Icon.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.createElement(Icon.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.createElement(Text, {
+    fontSize: 4,
+    lineHeight: 2.5,
+    marginLeft: 0.5
+  }, label)));
+};
+
+export default Radio;

package/dist/esm/Radio/index.js

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

package/dist/esm/RangeSlider/RangeSlider.js

@@ -0,0 +1,214 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useRef, useState } from 'react';
+import { clamp, snap } from '@popmotion/popcorn';
+import Box from '../Box';
+import { useMeasure } from '../hooks';
+import { useThemeProps } from '../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 = _objectWithoutPropertiesLoose(props, ["min", "max", "step", "disabled", "value", "onChange"]);
+
+  var _useThemeProps = useThemeProps('rangeSlider', restProps),
+      _useThemeProps$varian = _useThemeProps.variant,
+      variant = _useThemeProps$varian === void 0 ? {} : _useThemeProps$varian,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["variant"]);
+
+  var snapTo = snap(step);
+  var sliderRef = useRef();
+  var trackRef = useRef();
+  var thumbRef = useRef();
+  var startPositionRef = useRef();
+  var currentValueRef = useRef();
+
+  var _useMeasure = useMeasure(),
+      useMeasureRef = _useMeasure[0],
+      useMeasureEffect = _useMeasure[1];
+
+  var _useState = useState(0),
+      sliderSize = _useState[0],
+      setSliderSize = _useState[1];
+
+  var _useState2 = useState(0),
+      thumbSize = _useState2[0],
+      setThumbSize = _useState2[1];
+
+  var upperBound = sliderSize - thumbSize;
+
+  function trimAlignValue(value) {
+    return snapTo(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.createElement(Box, _extends({
+    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.createElement(Box, _extends({
+    innerRef: trackRef,
+    height: 0.5,
+    radius: 6,
+    overflow: "hidden",
+    backgroundColor: "grey-3",
+    position: "relative"
+  }, variant.track), /*#__PURE__*/React.createElement(Box, _extends({
+    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.createElement(Box, _extends({
+    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)));
+}
+
+export default RangeSlider;

package/dist/esm/RangeSlider/index.js

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

package/dist/esm/ScreenReader/ScreenReader.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Box from '../Box';
+
+function ScreenReader(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    css: {
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      border: 0,
+      position: 'absolute',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      overflow: 'hidden',
+      '&:focus-within': {
+        width: 'auto',
+        height: 'auto',
+        margin: 0,
+        clip: 'auto',
+        position: 'static',
+        overflow: 'initial'
+      }
+    }
+  }, props));
+}
+
+export default ScreenReader;

package/dist/esm/ScreenReader/index.js

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

package/dist/esm/Scrim/Scrim.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import * as React from 'react';
+import StackView from '../StackView';
+import { useThemeProps } from '../system';
+var Scrim = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+  var ref = _ref2.ref,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["ref"]);
+
+  React.useLayoutEffect(function () {
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, []);
+
+  var _useThemeProps = useThemeProps('scrim', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["zIndex"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    innerRef: ref,
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: zIndex,
+    overflow: "auto" // @ts-ignore
+    ,
+    backgroundColor: "hsla(0,0%,0%,0.4)"
+  }, themeProps));
+});
+export { Scrim };

package/dist/esm/Scrim/index.js

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

package/dist/esm/Section/Section.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Heading from '../Heading';
+import Toolbar from '../Toolbar';
+import StackView from '../StackView';
+import { useThemeProps } from '../system';
+
+function Section(_ref) {
+  var _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      children = _ref.children,
+      count = _ref.count,
+      helpContent = _ref.helpContent,
+      onStatusClearRequest = _ref.onStatusClearRequest,
+      status = _ref.status,
+      title = _ref.title,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["actions", "children", "count", "helpContent", "onStatusClearRequest", "status", "title"]);
+
+  var _useThemeProps = useThemeProps('section', restProps),
+      countColor = _useThemeProps.countColor,
+      headingProps = _useThemeProps.headingProps,
+      toolbarProps = _useThemeProps.toolbarProps,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["countColor", "headingProps", "toolbarProps"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    as: "section"
+  }, themeProps), /*#__PURE__*/React.createElement(Toolbar, _extends({
+    title: /*#__PURE__*/React.createElement(Heading, _extends({
+      level: 3
+    }, headingProps), title),
+    helpContent: helpContent,
+    actions: actions,
+    count: count,
+    countColor: countColor,
+    status: status,
+    onStatusClearRequest: onStatusClearRequest,
+    marginBottom: 2
+  }, toolbarProps)), children);
+}
+
+export default Section;

package/dist/esm/Section/index.js

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

package/dist/esm/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState, useEffect } from 'react';
+import Button from '../Button';
+import InputBox from '../Input/InputBox';
+import { navigateSize } from '../system';
+import { useThemeProps } from '../system';
+
+function SegmentedControl(props, ref) {
+  var getActiveIndex = useCallback(function (props) {
+    return props.activeSegment === undefined ? 0 : props.segments.indexOf(props.activeSegment);
+  });
+  var inputBoxRef = useRef(null);
+
+  var _useThemeProps = useThemeProps('segmentedControl', props),
+      activeSegment = _useThemeProps.activeSegment,
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
+      disabled = _useThemeProps.disabled,
+      onChange = _useThemeProps.onChange,
+      segments = _useThemeProps.segments,
+      _useThemeProps$segmen = _useThemeProps.segmentBasis,
+      segmentBasis = _useThemeProps$segmen === void 0 ? 'auto' : _useThemeProps$segmen,
+      _useThemeProps$size = _useThemeProps.size,
+      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeSegment", "color", "disabled", "onChange", "segments", "segmentBasis", "size"]);
+
+  var _useState = useState(getActiveIndex(props)),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1];
+
+  var handleKeyDown = useCallback(function (event) {
+    if (onChange && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+      var amountToMove = event.key === 'ArrowLeft' ? -1 : 1;
+      var nextIndex = activeIndex + amountToMove;
+      event.preventDefault();
+      changeSegment(nextIndex);
+    }
+  });
+  var changeSegment = useCallback(function (index) {
+    var nextSegment = segments[index];
+
+    if (nextSegment) {
+      if (activeSegment === undefined) {
+        setActiveIndex(index);
+      }
+
+      if (onChange) {
+        onChange(nextSegment.title || nextSegment);
+      }
+
+      focus(index);
+    }
+  });
+  var focus = useCallback(function (index) {
+    return inputBoxRef.current.focus(index);
+  });
+  var blur = useCallback(function () {
+    return inputBoxRef.current.blur();
+  });
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
+  useEffect(function () {
+    var newActiveIndex = getActiveIndex(props);
+
+    if (activeIndex !== newActiveIndex) {
+      setActiveIndex(newActiveIndex);
+    }
+  }, [activeSegment]);
+  return /*#__PURE__*/React.createElement(InputBox, _extends({
+    ref: inputBoxRef,
+    size: size,
+    includeSpacing: true,
+    evenPadding: true,
+    role: "group",
+    cursor: "initial",
+    disabled: disabled
+  }, restProps), segments.map(function (segment, segmentIndex) {
+    var title = segment.title,
+        restSegmentProps = _objectWithoutPropertiesLoose(segment, ["title"]);
+
+    var buttonProps = title ? restSegmentProps : {};
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      key: segmentIndex,
+      grow: 1,
+      size: navigateSize(size, -1),
+      basis: segmentBasis,
+      theme: segmentIndex === activeIndex ? color : undefined,
+      variant: segmentIndex === activeIndex ? 'fill' : 'naked',
+      title: title || segment,
+      disabled: disabled,
+      onKeyDown: handleKeyDown,
+      onClick: function onClick() {
+        return segmentIndex !== activeIndex && changeSegment(segmentIndex);
+      }
+    }, buttonProps));
+  }));
+}
+
+SegmentedControl = /*#__PURE__*/forwardRef(SegmentedControl);
+export default SegmentedControl;

package/dist/esm/SegmentedControl/index.js

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