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

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

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import Mousetrap from 'mousetrap';
+export function useKeyboardShortcuts(keyboardShortcuts, data) {
+  function bindKeyboardShortcuts() {
+    if (keyboardShortcuts) {
+      Object.keys(keyboardShortcuts).forEach(function (key) {
+        return Mousetrap.bind(key, keyboardShortcuts[key].bind(null, data));
+      });
+    }
+  }
+
+  function unbindKeyboardShortcuts() {
+    if (keyboardShortcuts) {
+      Object.keys(keyboardShortcuts).forEach(function (key) {
+        return Mousetrap.unbind(key);
+      });
+    }
+  }
+
+  useEffect(function () {
+    return function () {
+      unbindKeyboardShortcuts();
+    };
+  }, []);
+  return {
+    bindKeyboardShortcuts: bindKeyboardShortcuts,
+    unbindKeyboardShortcuts: unbindKeyboardShortcuts
+  };
+}

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

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import mitt from 'mitt';
+var animationId = null;
+var emitter = mitt();
+
+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 ResizeObserver(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]}
+ */
+
+export 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 = mitt();
+    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/esm/hooks/use-media-query.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react';
+export 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 = useState(getMatches(query)),
+      matches = _useState[0],
+      setMatches = _useState[1];
+
+  var handleChange = useCallback(function () {
+    setMatches(getMatches(query));
+  }, [query]);
+  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/esm/hooks/use-roving-index.js

@@ -0,0 +1,53 @@
+import { useCallback, useState } from '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,
+ * }}
+ */
+
+export 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 = useState(defaultIndex),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1];
+
+  var getWrappedIndex = useCallback(function (nextIndex) {
+    return wrap ? (nextIndex % maxIndex + maxIndex) % maxIndex : nextIndex > maxIndex ? maxIndex : nextIndex < 0 ? 0 : nextIndex;
+  }, [maxIndex, wrap]);
+  return {
+    activeIndex: activeIndex,
+    moveActiveIndex: useCallback(function (amountToMove) {
+      setActiveIndex(function (currentIndex) {
+        return getWrappedIndex(currentIndex + amountToMove);
+      });
+    }, [getWrappedIndex]),
+    setActiveIndex: useCallback(function (nextIndex) {
+      setActiveIndex(getWrappedIndex(nextIndex));
+    }, [getWrappedIndex]),
+    moveBackwardDisabled: activeIndex <= 0,
+    moveForwardDisabled: activeIndex >= maxIndex
+  };
+}

package/dist/esm/hooks/useConstant.js

@@ -0,0 +1,15 @@
+// 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.
+import * as React from 'react';
+export default function useConstant(fn) {
+  var ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}

package/dist/esm/index.d.js

@@ -0,0 +1,116 @@
+export var designSystem;
+export var hooks;
+export var server;
+export var utils;
+export var Avatar;
+export var Badge;
+export var Calendar;
+export var CheckboxCard;
+export var CheckboxGroup;
+export var ChurchCenterStatus;
+export var Collapse;
+export var ColumnView;
+export var Combobox;
+export var DataTable;
+export var DateField;
+export var DragDrop;
+export var Drawer;
+export var Dropdown;
+export var EditActions;
+export var Field;
+export var Form;
+export var FieldSet;
+export var Heading;
+export var HelperDrawer;
+export var Highlight;
+export var Icon;
+export var Link;
+export var LinkList;
+export var Logo;
+export var Menu;
+export var Modal;
+export var NumberField;
+export var PageActions;
+export var PageBody;
+export var PageButton;
+export var PageDropdown;
+export var PageHeader;
+export var PageTab;
+export var PageTabList;
+export var PageTitle;
+export var PageToolbar;
+export var PagerView;
+export var Pagination;
+export var Progress;
+export var Radio;
+export var RangeSlider;
+export var ScreenReader;
+export var Section;
+export var HeadingUppercase;
+export var SegmentedControl;
+export var SegmentedTabs;
+export var Sidebar;
+export var StepperField;
+export var StepperProgress;
+export var Summary;
+export var Table;
+export var Tabs;
+export var TabNav;
+export var TextArea;
+export var TimeField;
+export var ToggleSwitch;
+export var Toolbar;
+export var TokenInput;
+export var Tooltip;
+export var VariantProvider;
+export var Wizard; // ============
+// Manual Types
+// ===========
+// These are components written in JS, where we can provide very small (one prop at a time) useful
+// typings for consumers.
+// ============
+
+// ========
+// Checkbox
+// ========
+export var Checkbox; // =====
+// Input
+// =====
+
+export var Input; // ====
+// List
+// ====
+
+export var List; // ======
+// Select
+// ======
+
+export var Select; // ========
+// Sortable
+// ========
+
+export var Sortable; // =====================
+// Typescript Components
+// =====================
+
+export * from './Alert';
+export * from './Box';
+export * from './Button';
+export * from './Card';
+export * from './Dialog';
+export * from './Divider';
+export * from './FilterLayout';
+export * from './GridView';
+export * from './Group';
+export * from './Popover';
+export * from './Portal';
+export * from './Scrim';
+export * from './Spinner';
+export * from './StackView';
+export * from './Tab';
+export * from './TabNav';
+export * from './Text';
+export * from './TileView';
+export * from './ToggleSwitch';
+export * from './ThemeProvider';
+export * from './WrapView';

package/dist/esm/index.js

@@ -0,0 +1,89 @@
+import 'focus-options-polyfill';
+import 'focus-visible';
+import * as _designSystem from './system';
+export { _designSystem as designSystem };
+import * as _hooks from './hooks';
+export { _hooks as hooks };
+import * as _server from './server';
+export { _server as server };
+import * as _utils from './utils';
+export { _utils as utils };
+export { default as ActionsDropdown } from './ActionsDropdown';
+export { default as Alert } from './Alert';
+export { default as Avatar } from './Avatar';
+export { default as Badge } from './Badge';
+export { default as Box } from './Box';
+export { default as Button } from './Button';
+export { default as Calendar } from './Calendar';
+export { default as Card } from './Card';
+export { default as Checkbox } from './Checkbox';
+export { default as CheckboxCard } from './CheckboxCard';
+export { default as CheckboxGroup } from './CheckboxGroup';
+export { default as ChurchCenterStatus } from './ChurchCenterStatus';
+export { default as Collapse } from './Collapse';
+export { default as ColumnView } from './ColumnView';
+export { default as Combobox } from './Combobox';
+export { default as DataTable } from './DataTable';
+export { default as DateField } from './DateField';
+export { default as Dialog } from './Dialog';
+export { default as Divider } from './Divider';
+export { default as DragDrop } from './DragDrop';
+export { default as Drawer } from './Drawer';
+export { default as Dropdown } from './Dropdown';
+export { default as EditActions } from './EditActions';
+export { default as Field } from './Field';
+export { default as Form } from './Form';
+export { default as FieldSet } from './FieldSet';
+export { default as FilterLayout } from './FilterLayout';
+export { default as GridView } from './GridView';
+export { default as Group } from './Group';
+export { default as Heading } from './Heading';
+export { default as HelperDrawer } from './HelperDrawer';
+export { default as Highlight } from './Highlight';
+export { default as Icon } from './Icon';
+export { default as Input } from './Input';
+export { default as Link } from './Link';
+export { default as LinkList } from './LinkList';
+export { default as List } from './List';
+export { default as Logo } from './Logo';
+export { default as Menu } from './Menu';
+export { default as Modal } from './Modal';
+export { default as NumberField } from './NumberField';
+export { PageActions, PageBody, PageButton, PageDropdown, PageHeader, PageTab, PageTabList, PageTitle, PageToolbar } from './Page';
+export { default as PagerView } from './PagerView';
+export { default as Pagination } from './Pagination';
+export { default as Popover } from './Popover';
+export { default as Portal } from './Portal';
+export { default as Progress } from './Progress';
+export { default as Radio } from './Radio';
+export { default as RangeSlider } from './RangeSlider';
+export { default as ScreenReader } from './ScreenReader';
+export { default as Scrim } from './Scrim';
+export { default as Section } from './Section';
+export { default as HeadingUppercase } from './HeadingUppercase';
+export { default as SegmentedControl } from './SegmentedControl';
+export { default as SegmentedTabs } from './SegmentedTabs';
+export { default as Select } from './Select';
+export { default as Sidebar } from './Sidebar';
+export { default as Sortable } from './Sortable';
+export { default as Spinner } from './Spinner';
+export { default as StackView } from './StackView';
+export { default as StepperField } from './StepperField';
+export { default as StepperProgress } from './StepperProgress';
+export { default as Summary } from './Summary';
+export { default as Tab } from './Tab';
+export { default as TabNav } from './TabNav';
+export { default as Table } from './Table';
+export { default as Tabs } from './Tabs';
+export { default as Text } from './Text';
+export { default as TextArea } from './TextArea';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as TileView } from './TileView';
+export { default as TimeField } from './TimeField';
+export { default as ToggleSwitch } from './ToggleSwitch';
+export { default as Toolbar } from './Toolbar';
+export { default as TokenInput } from './TokenInput';
+export { default as Tooltip } from './Tooltip';
+export { default as VariantProvider } from './VariantProvider';
+export { default as Wizard } from './Wizard';
+export { default as WrapView } from './WrapView';

package/dist/esm/server.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ThemeProvider from './ThemeProvider';
+export var styleElement = /*#__PURE__*/React.createElement("style", {
+  id: "tapestry-react-style",
+  dangerouslySetInnerHTML: {
+    __html: ThemeProvider.styleReset
+  }
+});
+export var themeInitializerElement = /*#__PURE__*/React.createElement("script", {
+  dangerouslySetInnerHTML: {
+    __html: ThemeProvider.themeInitializerScript
+  }
+});

package/dist/esm/system/box-sizes.js

@@ -0,0 +1,57 @@
+export var boxSizes = {
+  xs: {
+    boxSize: 2.5,
+    fontSize: 5,
+    lineHeight: 2.5,
+    paddingHorizontalDense: 0.5,
+    paddingHorizontal: 0.75,
+    paddingVertical: 0,
+    radius: 2.5
+  },
+  sm: {
+    boxSize: 3,
+    fontSize: 5,
+    lineHeight: 2.5,
+    paddingHorizontalDense: 0.5,
+    paddingHorizontal: 1,
+    paddingVertical: 0.25,
+    radius: 3
+  },
+  md: {
+    boxSize: 4,
+    fontSize: 4,
+    lineHeight: 3,
+    paddingHorizontalDense: 1,
+    paddingHorizontal: 1.375,
+    paddingVertical: 0.5,
+    radius: 4
+  },
+  lg: {
+    boxSize: 5,
+    fontSize: 3,
+    lineHeight: 4,
+    paddingHorizontalDense: 1,
+    paddingHorizontal: 1.75,
+    paddingVertical: 0.5,
+    radius: 5
+  },
+  xl: {
+    boxSize: 8,
+    fontSize: 1,
+    lineHeight: 5,
+    paddingHorizontalDense: 2,
+    paddingHorizontal: 2.25,
+    paddingVertical: 1.5,
+    radius: 6
+  },
+  xxl: {
+    boxSize: 14
+  }
+};
+export function getBoxSize(size) {
+  if (size === void 0) {
+    size = 'md';
+  }
+
+  return boxSizes[size] || {};
+}