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

package/dist/cjs/Wizard/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Wizard = _interopRequireDefault(require("./Wizard"));
+
+var _Step = _interopRequireDefault(require("./Step"));
+
+_Wizard["default"].Step = _Step["default"];
+var _default = _Wizard["default"];
+exports["default"] = _default;

package/dist/cjs/WrapView/WrapView.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.WrapView = WrapView;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _system = require("../system");
+
+function WrapView(_ref) {
+  var children = _ref.children,
+      spacing = _ref.spacing,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "spacing"]);
+  var styles = {
+    basis: '100%'
+  };
+
+  if (spacing) {
+    styles.gap = (0, _system.spacingValue)(spacing);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal"
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    wrap: true,
+    axis: "horizontal",
+    css: styles
+  }, children));
+}

package/dist/cjs/WrapView/index.js

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

package/dist/cjs/designTokens/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.designTokens = void 0;
+
+var _tokens = _interopRequireDefault(require("@planningcenter/tapestry-design-tokens/dist/js/tokens.module"));
+
+var colors = {
+  black10: 'hsl(0 0% 0% / 0.1)',
+  black40: 'hsl(0 0% 0% / 0.4)',
+  black60: 'hsl(0 0% 0% / 0.6)',
+  black80: 'hsl(0 0% 0% / 0.8)',
+  black: 'hsl(0 0% 0%)',
+  lightNeutral07: 'hsl(0 0% 7%)',
+  lightNeutral12: 'hsl(0 0% 12%)',
+  lightNeutral15: 'hsl(0 0% 15%)',
+  lightNeutral17: 'hsl(0 0% 17%)',
+  lightNeutral19: 'hsl(0 0% 19%)',
+  lightNeutral24: 'hsl(0 0% 24%)',
+  lightNeutral32: 'hsl(0 0% 32%)',
+  // NOTE: lightNeutral40 is NOT in Neutral (Grays) in Figma
+  lightNeutral40: 'hsl(0 0% 40%)',
+  lightNeutral45: 'hsl(0 0% 45%)',
+  lightNeutral50: 'hsl(0 0% 50%)',
+  lightNeutral62: 'hsl(0 0% 62%)',
+  lightNeutral68: 'hsl(0 0% 68%)',
+  lightNeutral81: 'hsl(0 0% 81%)',
+  lightNeutral88: 'hsl(0 0% 88%)',
+  lightNeutral93: 'hsl(0 0% 93%)',
+  lightNeutral95: 'hsl(0 0% 95%)',
+  lightNeutral97: 'hsl(0 0% 97%)',
+  lightNeutral98: 'hsl(0 0% 98%)',
+  lightNeutral100: 'hsl(0 0% 100%)',
+  white45: 'hsl(0 0% 100% / 0.45)',
+  white: 'hsl(0 0% 100%)'
+};
+var designTokens = {
+  button: {
+    borderRadius: _tokens["default"].button.borderRadius.value
+  },
+  input: {
+    borderRadius: 4
+  },
+  tabNav: {
+    desktop: {
+      paddingX: 24,
+      selectedTabBackgroundColor: colors.white,
+      spacing: 8
+    },
+    mobile: {
+      backgroundColor: colors.white,
+      borderBottomColor: colors.lightNeutral88,
+      borderBottomStyle: 'solid',
+      borderBottomWidth: 1,
+      paddingX: 16,
+      spacing: 20
+    },
+    tab: {
+      badgeBackgroundColor: colors.black10,
+      badgeFontSize: 12,
+      badgeTextColor: colors.black80,
+      disabledTextColor: colors.black40,
+      iconColor: colors.lightNeutral40,
+      selectedTextColor: colors.black80,
+      textColor: colors.black60,
+      desktop: {
+        activeTextColor: colors.black80,
+        borderRadiusTop: 4,
+        defaultBackgroundColor: colors.white45,
+        hoverTextColor: colors.black80,
+        fontSize: 14,
+        height: 40,
+        paddingX: 16
+      },
+      mobile: {
+        borderBottomWidth: 3,
+        fontSize: 16,
+        height: 44,
+        paddingBottom: 10,
+        paddingTop: 7
+      }
+    }
+  }
+};
+exports.designTokens = designTokens;

package/dist/cjs/hooks/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useRovingIndex = exports.useMediaQuery = exports.useMeasure = exports.useKeyboardShortcuts = exports.useId = exports.useHover = exports.useFocus = exports.useDocumentEvent = void 0;
+
+var _useDocumentEvent = require("./use-document-event");
+
+exports.useDocumentEvent = _useDocumentEvent.useDocumentEvent;
+
+var _useFocus = require("./use-focus");
+
+exports.useFocus = _useFocus.useFocus;
+
+var _useHover = require("./use-hover");
+
+exports.useHover = _useHover.useHover;
+
+var _useId = require("./use-id");
+
+exports.useId = _useId.useId;
+
+var _useKeyboardShortcuts = require("./use-keyboard-shortcuts");
+
+exports.useKeyboardShortcuts = _useKeyboardShortcuts.useKeyboardShortcuts;
+
+var _useMeasure = require("./use-measure");
+
+exports.useMeasure = _useMeasure.useMeasure;
+
+var _useMediaQuery = require("./use-media-query");
+
+exports.useMediaQuery = _useMediaQuery.useMediaQuery;
+
+var _useRovingIndex = require("./use-roving-index");
+
+exports.useRovingIndex = _useRovingIndex.useRovingIndex;

package/dist/cjs/hooks/use-accessibility-violation.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports.useAccessibilityViolation = useAccessibilityViolation;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+/**
+ * Provide an on-screen and optional console accessibilty violation.
+ */
+function useAccessibilityViolation(
+/** Content to be displayed in tooltip when hovering element. */
+tooltipContent,
+/** Content to be displayed in the console with a reference to the element. */
+consoleContent) {
+  if (process.env.NODE_ENV === 'production') {
+    return {};
+  } else {
+    var wrapperRef = React.useRef(null);
+    var tooltipProps = {
+      title: /*#__PURE__*/React.createElement(_StackView["default"], {
+        width: 32,
+        spacing: 1,
+        cursor: "default"
+      }, /*#__PURE__*/React.createElement(_StackView["default"], {
+        axis: "horizontal",
+        alignment: "center",
+        spacing: 1
+      }, /*#__PURE__*/React.createElement(_Icon["default"], {
+        name: "general.exclamationCircle",
+        size: "md",
+        color: "error"
+      }), /*#__PURE__*/React.createElement(_Text["default"], {
+        fontSize: 3,
+        weight: 500
+      }, "Accessibility Violation")), /*#__PURE__*/React.createElement(_Text["default"], {
+        fontSize: 3,
+        lineHeight: 3
+      }, tooltipContent)),
+      openDelay: 0,
+      closeDelay: 300,
+      popoverProps: {
+        textAlign: 'left',
+        paddingHorizontal: 2,
+        paddingVertical: 2,
+        backgroundColor: 'surface',
+        color: 'foreground',
+        stroke: 'separator',
+        strokeWeight: 1,
+        elevation: 2
+      }
+    };
+    var wrapperProps = {
+      innerRef: wrapperRef,
+      stroke: 'error',
+      strokeAlign: 'outside',
+      strokeWeight: 4
+    };
+    React.useEffect(function () {
+      if (wrapperRef.current) {
+        console.error(consoleContent, wrapperRef.current);
+      }
+    }, []);
+    return {
+      tooltipProps: tooltipProps,
+      wrapperProps: wrapperProps
+    };
+  }
+}

package/dist/cjs/hooks/use-document-event.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useDocumentEvent = useDocumentEvent;
+
+var _react = require("react");
+
+/**
+ * Provide a callback for any document event type.
+ *
+ * @event {string} type - A valid [DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
+ * @param {Function} callback - Callback when specified event type occurs.
+ *
+ * @example
+ *
+ * function App() {
+ *   useDocumentEvent('keydown', event => {
+ *     console.log(`${event.key} pressed`)
+ *   })
+ *   return <div>App</div>
+ * }
+ */
+function useDocumentEvent(type, callback) {
+  var savedCallback = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(function () {
+    savedCallback.current = callback;
+  }, [callback]);
+  (0, _react.useEffect)(function () {
+    function handleEvent(event) {
+      savedCallback.current(event);
+    }
+
+    document.addEventListener(type, handleEvent);
+    return function () {
+      document.removeEventListener(type, handleEvent);
+    };
+  }, []);
+}

package/dist/cjs/hooks/use-focus.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useFocus = useFocus;
+
+var _react = require("react");
+
+/**
+ * Determines when one or many elements take focus.
+ *
+ * @returns {{ focus: boolean, focusProps: Object }}
+ */
+function useFocus() {
+  var _useState = (0, _react.useState)(false),
+      focus = _useState[0],
+      setFocus = _useState[1];
+
+  return {
+    focus: focus,
+    focusProps: {
+      onFocus: function onFocus() {
+        return setFocus(true);
+      },
+      onBlur: function onBlur() {
+        return setFocus(false);
+      }
+    }
+  };
+}

package/dist/cjs/hooks/use-hover.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useHover = useHover;
+
+var _react = require("react");
+
+function useHover() {
+  var _useState = (0, _react.useState)(false),
+      hover = _useState[0],
+      setHover = _useState[1];
+
+  return {
+    hover: hover,
+    hoverProps: {
+      onMouseEnter: function onMouseEnter() {
+        return setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHover(false);
+      }
+    }
+  };
+}

package/dist/cjs/hooks/use-id.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useId = useId;
+
+var _react = require("react");
+
+// this will eventually be replaced with useOpaqueIdentifier once it is stable:
+// https://github.com/facebook/react/pull/17322
+var idCounter = 1;
+/**
+ * Generates a unique id based on the provided prefix.
+ * Be aware using the same prefix elsewhere _does not_ generate a unique id.
+ * @param {string} prefix
+ * @returns {string} unique prefixed id
+ */
+
+function useId(prefix) {
+  var id = (0, _react.useRef)(null);
+
+  if (id.current === null) {
+    id.current = prefix + "-" + idCounter++;
+  }
+
+  return id.current;
+}

package/dist/cjs/hooks/use-keyboard-shortcuts.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useKeyboardShortcuts = useKeyboardShortcuts;
+
+var _react = require("react");
+
+var _mousetrap = _interopRequireDefault(require("mousetrap"));
+
+function useKeyboardShortcuts(keyboardShortcuts, data) {
+  function bindKeyboardShortcuts() {
+    if (keyboardShortcuts) {
+      Object.keys(keyboardShortcuts).forEach(function (key) {
+        return _mousetrap["default"].bind(key, keyboardShortcuts[key].bind(null, data));
+      });
+    }
+  }
+
+  function unbindKeyboardShortcuts() {
+    if (keyboardShortcuts) {
+      Object.keys(keyboardShortcuts).forEach(function (key) {
+        return _mousetrap["default"].unbind(key);
+      });
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      unbindKeyboardShortcuts();
+    };
+  }, []);
+  return {
+    bindKeyboardShortcuts: bindKeyboardShortcuts,
+    unbindKeyboardShortcuts: unbindKeyboardShortcuts
+  };
+}

package/dist/cjs/hooks/use-measure.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports.useMeasure = useMeasure;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+var _mitt = _interopRequireDefault(require("mitt"));
+
+var animationId = null;
+var emitter = (0, _mitt["default"])();
+
+var handleMeasure = function handleMeasure() {
+  if (animationId === null) {
+    animationId = window.requestAnimationFrame(function () {
+      emitter.emit('measure');
+      window.requestAnimationFrame(function () {
+        animationId = null;
+      });
+    });
+  }
+};
+
+var mutationObserver = typeof window === 'undefined' ? {} : new MutationObserver(handleMeasure);
+var resizeObserver = typeof window === 'undefined' ? {} : new _resizeObserverPolyfill["default"](handleMeasure);
+/**
+ * Creates a set of hooks to help manage collecting and using measurements
+ * from one or many components.
+ *
+ * @example
+ *
+ * function Singular({ ref, value }) {
+ *   const [useMeasureRef, useMeasureEffect] = useMeasure()
+ *   useMeasureRef(ref)
+ *   useMeasureEffect(([node]) => {
+ *     console.log(node)
+ *   }, [value])
+ *   return <div />
+ * }
+ *
+ * function Parent({ children }) {
+ *   const [useMeasureRef, useMeasureEffect] = useMeasure()
+ *   useMeasureEffect(nodes => {
+ *     console.log(nodes)
+ *   }, [])
+ *   return (
+ *     <div>
+ *       {Children.map(children, child =>
+ *         React.cloneElement(child, { useMeasureRef })
+ *       )}
+ *     </div>
+ *   )
+ * }
+ *
+ * function Child({ useMeasureRef }) {
+ *   const ref = useMeasureRef(ref)
+ *   return <div ref={ref} />
+ * }
+ *
+ * @returns {[(ref?: React.RefObject) => React.RefObject, (onMeasure: Function, dependencies: Array) => void]}
+ */
+
+function useMeasure() {
+  var refs = React.useRef([]);
+  var storeRef = React.useCallback(function (node) {
+    if (refs.current.indexOf(node) === -1) {
+      refs.current.push(node);
+    }
+  }, []);
+  var refsEmitter = React.useMemo(function () {
+    var emitter = (0, _mitt["default"])();
+    emitter.on('storeRef', storeRef);
+    return emitter;
+  }, []);
+  var useMeasureRef = React.useCallback(function (ref) {
+    var measureRef = ref || React.useRef();
+    var connected = React.useRef(false);
+    React.useLayoutEffect(function () {
+      var node = measureRef.current;
+      mutationObserver.observe(node, {
+        characterData: true,
+        childList: true,
+        subtree: true
+      });
+      resizeObserver.observe(node);
+      return function () {
+        resizeObserver.unobserve(node);
+      };
+    }, []);
+    React.useLayoutEffect(function () {
+      refsEmitter.emit('storeRef', measureRef.current);
+    });
+    return measureRef;
+  }, []);
+  var useMeasureEffect = React.useCallback(function (onMeasure, dependencies) {
+    React.useLayoutEffect(function () {
+      function handleMeasure() {
+        onMeasure([].concat(refs.current));
+      }
+
+      handleMeasure();
+      emitter.on('measure', handleMeasure);
+      return function () {
+        emitter.off('measure', handleMeasure);
+      };
+    }, dependencies);
+    React.useLayoutEffect(function () {
+      return function () {
+        refs.current = [];
+      };
+    });
+    React.useEffect(function () {
+      return function () {
+        refsEmitter.off('storeRef', storeRef);
+      };
+    }, []);
+  }, []);
+  return [useMeasureRef, useMeasureEffect];
+}

package/dist/cjs/hooks/use-media-query.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useMediaQuery = useMediaQuery;
+
+var _react = require("react");
+
+function useMediaQuery(query) {
+  var getMatches = function getMatches(query) {
+    // Prevents SSR issues
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      return window.matchMedia(query).matches;
+    }
+
+    return false;
+  };
+
+  var _useState = (0, _react.useState)(getMatches(query)),
+      matches = _useState[0],
+      setMatches = _useState[1];
+
+  var handleChange = (0, _react.useCallback)(function () {
+    setMatches(getMatches(query));
+  }, [query]);
+  (0, _react.useEffect)(function () {
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      var matchMedia = window.matchMedia(query); // Triggered at the first client-side load and if query changes
+
+      handleChange(); // Listen to matchMedia
+
+      if (matchMedia.addListener) {
+        matchMedia.addListener(handleChange);
+      } else {
+        matchMedia.addEventListener('change', handleChange);
+      }
+
+      return function () {
+        if (matchMedia.removeListener) {
+          matchMedia.removeListener(handleChange);
+        } else {
+          matchMedia.removeEventListener('change', handleChange);
+        }
+      };
+    }
+  }, [handleChange, query]);
+  return matches;
+}

package/dist/cjs/hooks/use-roving-index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useRovingIndex = useRovingIndex;
+
+var _react = require("react");
+
+/**
+ * Manages a set of indices that need to wrap or be contained.
+ *
+ * @example
+ *
+ * const {
+ *   activeIndex,
+ *   moveActiveIndex,
+ * } = useRovingIndex({ maxIndex: items.length - 1 })
+ *
+ * @param {{
+ *   maxIndex: number,
+ *   defaultIndex?: number,
+ *   wrap?: boolean
+ * }} [options]
+ * @returns {{
+ *   activeIndex: number,
+ *   moveActiveIndex: (amountToMove: number) => void,
+ *   setActiveIndex: (nextIndex: number) => void,
+ *   moveBackwardDisabled: boolean,
+ *   moveForwardDisabled: boolean,
+ * }}
+ */
+function useRovingIndex(_ref) {
+  var maxIndex = _ref.maxIndex,
+      _ref$defaultIndex = _ref.defaultIndex,
+      defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+      _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? false : _ref$wrap;
+
+  var _useState = (0, _react.useState)(defaultIndex),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1];
+
+  var getWrappedIndex = (0, _react.useCallback)(function (nextIndex) {
+    return wrap ? (nextIndex % maxIndex + maxIndex) % maxIndex : nextIndex > maxIndex ? maxIndex : nextIndex < 0 ? 0 : nextIndex;
+  }, [maxIndex, wrap]);
+  return {
+    activeIndex: activeIndex,
+    moveActiveIndex: (0, _react.useCallback)(function (amountToMove) {
+      setActiveIndex(function (currentIndex) {
+        return getWrappedIndex(currentIndex + amountToMove);
+      });
+    }, [getWrappedIndex]),
+    setActiveIndex: (0, _react.useCallback)(function (nextIndex) {
+      setActiveIndex(getWrappedIndex(nextIndex));
+    }, [getWrappedIndex]),
+    moveBackwardDisabled: activeIndex <= 0,
+    moveForwardDisabled: activeIndex >= maxIndex
+  };
+}

package/dist/cjs/hooks/useConstant.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = useConstant;
+
+var React = _interopRequireWildcard(require("react"));
+
+// A copy/paste of the source of the `use-constant` package.
+// https://github.com/Andarist/use-constant/blob/main/src/index.ts
+// This is done to reduce dependencies.
+function useConstant(fn) {
+  var ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}