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

package/dist/cjs/Wizard/index.js

@@ -1,14 +0,0 @@
-"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

@@ -1,37 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-"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

@@ -1,87 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-"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

@@ -1,79 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-"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

@@ -1,29 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-"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

@@ -1,26 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-"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

@@ -1,125 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-"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

@@ -1,58 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-"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;
-}