@planningcenter/tapestry-react 2.6.0-rc.0 → 2.6.0-rc.10

package/dist/esm/Modal/Modal.js

@@ -5,6 +5,7 @@ import Box from '../Box';
 import Scrim from '../Scrim';
 import { useDocumentEvent } from '../hooks';
 import { trapFocus } from '../utils';
+import { useThemeProps } from '../system';
 
 function Modal(_ref) {
   var children = _ref.children,
@@ -13,6 +14,11 @@ function Modal(_ref) {
       open = _ref.open,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "closeOnOutsideClick", "onRequestClose", "open"]);
 
+  var _useThemeProps = useThemeProps('modal', restProps),
+      _useThemeProps$scrimP = _useThemeProps.scrimProps,
+      scrimProps = _useThemeProps$scrimP === void 0 ? {} : _useThemeProps$scrimP,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["scrimProps"]);
+
   var modalRef = useRef(null);
   useLayoutEffect(function () {
     if (open) {
@@ -29,22 +35,24 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Scrim, {
+  return /*#__PURE__*/React.createElement(Scrim, _extends({
     alignment: "center",
     onMouseDown: function onMouseDown(event) {
       if (closeOnOutsideClick && event.currentTarget === event.target) {
         onRequestClose();
       }
     }
-  }, /*#__PURE__*/React.createElement(Box, _extends({
+  }, scrimProps), /*#__PURE__*/React.createElement(Box, _extends({
+    backgroundColor: "surface",
+    boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
     innerRef: modalRef,
-    width: "100%",
-    maxWidth: 60,
-    padding: 2,
     margin: 4,
-    backgroundColor: "surface",
-    radius: 3
-  }, restProps), children));
+    maxWidth: 60,
+    padding: 4,
+    paddingBottom: 3,
+    radius: 8,
+    width: "100%"
+  }, themeProps), children));
 }
 
 export default Modal;

package/dist/esm/Popover/Popover.js

@@ -12,6 +12,7 @@ import Portal from '../Portal';
 import { lockScroll } from '../utils';
 import rewireTabOrder from './rewireTabOrder';
 import { getFixedParent, getModifiers } from './utils';
+import { useThemeProps } from '../system';
 export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var anchorElement = _ref.anchorElement,
       _ref$as = _ref.as,
@@ -34,6 +35,11 @@ export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       shouldFlip = _ref$shouldFlip === void 0 ? false : _ref$shouldFlip,
       restProps = _objectWithoutPropertiesLoose(_ref, ["anchorElement", "as", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "offset", "open", "onKeyDown", "onRequestClose", "placement", "relativeTo", "renderTo", "shouldFlip"]);
 
+  var _useThemeProps = useThemeProps('popover', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["zIndex"]);
+
   var anchorRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var unlockScroll = React.useRef(null);
@@ -194,8 +200,8 @@ export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     // ideally this should be pulled out to something like ThemeProvider for predictable z indices
     style: {
-      zIndex: 10000
+      zIndex: zIndex
     }
-  }, restProps)) : null);
+  }, themeProps)) : null);
 });
 Popover.displayName = 'Popover';

package/dist/esm/Portal/Portal.js

@@ -4,6 +4,8 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import { getThemeDataAttribute } from '../ThemeProvider/styles';
+import { ThemeContext } from '@emotion/react';
 
 /** Accepts any additional HTML attributes. */
 var Portal = /*#__PURE__*/function (_React$Component) {
@@ -18,6 +20,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
 
+    _defineProperty(_assertThisInitialized(_this), "context", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "_portalNode", null);
 
     _defineProperty(_assertThisInitialized(_this), "_needsUpdate", false);
@@ -116,6 +120,10 @@ var Portal = /*#__PURE__*/function (_React$Component) {
       _this2._portalNode.setAttribute(key, restProps[key]);
     });
 
+    this._portalNode.classList.add('tapestry-react-reset');
+
+    this._portalNode.setAttribute(getThemeDataAttribute(this.context.id), 'true');
+
     if (style) {
       Object.keys(style).forEach(function (key) {
         _this2._portalNode.style[key] = style[key];
@@ -155,4 +163,6 @@ _defineProperty(Portal, "defaultProps", {
   renderTo: null
 });
 
+_defineProperty(Portal, "contextType", ThemeContext);
+
 export { Portal };

package/dist/esm/Scrim/Scrim.js

@@ -1,24 +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';
-var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
+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: props.ref,
+    innerRef: ref,
     position: "fixed",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: 10000,
+    zIndex: zIndex,
     overflow: "auto" // @ts-ignore
     ,
     backgroundColor: "hsla(0,0%,0%,0.4)"
-  }, props));
+  }, themeProps));
 });
 export { Scrim };

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -1,3 +1,5 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 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; }
@@ -9,6 +11,7 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { merge } from 'lodash';
+import { Box } from '../Box';
 import defaultTheme from '../system/default-theme';
 import { flattenPalette } from '../system';
 import { objectToCSSProperties, shallowEqual } from '../utils';
@@ -17,6 +20,15 @@ var STORAGE_KEY = 'tapestry-react-theme';
 export var cache = createCache({
   key: 'tapestry-react'
 });
+
+function mergeIntoNewObject() {
+  for (var _len = arguments.length, merges = new Array(_len), _key = 0; _key < _len; _key++) {
+    merges[_key] = arguments[_key];
+  }
+
+  return merge.apply(void 0, [{}].concat(merges));
+}
+
 export var themeStorage = {
   get: function get() {
     return window.localStorage.getItem(STORAGE_KEY);
@@ -41,12 +53,12 @@ function mergeThemes(a, b) {
 
   return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
     button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
-      themes: merge(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+      themes: mergeIntoNewObject(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
     }),
-    colors: merge(flattenPalette(a.colors || {}), flattenPalette(b.colors || {})),
+    colors: mergeIntoNewObject(flattenPalette(a.colors || {}), flattenPalette(b.colors || {})),
     spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
-      sizes: merge(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
-      thickness: merge(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
+      sizes: mergeIntoNewObject(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
+      thickness: mergeIntoNewObject(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
     })
   });
 }
@@ -56,7 +68,8 @@ export function ThemeProvider(_ref) {
 
   var _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? emptyTheme : _ref$theme,
-      children = _ref.children;
+      children = _ref.children,
+      boxProps = _objectWithoutPropertiesLoose(_ref, ["theme", "children"]);
 
   var _useState = useState(function () {
     return mergeThemes(defaultTheme, theme);
@@ -76,7 +89,9 @@ export function ThemeProvider(_ref) {
     value: cache
   }, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
     theme: mergedTheme
-  }, /*#__PURE__*/React.createElement("div", (_ref2 = {}, _ref2["" + getThemeDataAttribute(mergedTheme.id)] = true, _ref2), children)));
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    className: "tapestry-react-reset"
+  }, boxProps, (_ref2 = {}, _ref2["" + getThemeDataAttribute(mergedTheme.id)] = true, _ref2)), children)));
 }
 ThemeProvider.cache = cache;
 ThemeProvider.setRootStyles = setRootStyles;

package/dist/esm/ThemeProvider/styles.js

@@ -24,15 +24,12 @@ export var setRootStyles = function setRootStyles(themeId, styles) {
   sheet.insertRule(styleString, 0);
 };
 export var defaultColorProperties = objectToCSSProperties('colors', flattenPalette(defaultTheme.colors));
-export var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+export var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  background-color: transparent;\n  border-width: 0px;\n  border-style: solid;\n  border-color: transparent;\n  box-sizing: border-box;\n  color: inherit;\n  box-sizing: border-box;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  margin-top: 0;\n  margin-right: 0;\n  margin-bottom: 0;\n  margin-left: 0;\n  min-width: 0px;\n  min-height: 0px;\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  text-decoration: none;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  border: none;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
 ).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
 
 function ensureStyleElement(themeId) {
-  // we use our own global style implementation in place of Emotion Global
-  // so we can have more control over when styles are injected since multiple
-  // Providers can be used on a page
   if (typeof window !== 'undefined' && !document.getElementById("tapestry-react-style-" + themeId)) {
     var styleElement = document.createElement('style');
     styleElement.id = "tapestry-react-style-" + themeId;

package/dist/esm/TimeField/TimeField.js

@@ -208,7 +208,7 @@ var TimeField = /*#__PURE__*/function (_Component) {
       highlightOnInteraction: true,
       value: this.state.meridiem,
       grow: 0,
-      width: 3,
+      width: "2em",
       textAlign: "center",
       "aria-label": "AM/PM",
       onChange: noop // prevent React warnings

package/dist/esm/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { Children, cloneElement, forwardRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
+import React, { Children, cloneElement, forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
 import mitt from 'mitt';
 import Popover from '../Popover';
 import { composeEvents, pageViewChange } from '../utils';
@@ -44,8 +44,8 @@ function Tooltip(props, ref) {
   var isPageInView = true;
   var isFocused = false;
   var isMouseDown = false;
-  var openTimeoutId = null;
-  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+  var openTimeoutId = useRef(null);
+  var closeTimeoutId = useRef(null); // prevents tooltips showing when focused and navigating back to a page after leaving
 
   var cleanupPageViewChange = useCallback(pageViewChange(function (inView) {
     return setTimeout(function () {
@@ -61,21 +61,21 @@ function Tooltip(props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
-      clearTimeout(openTimeoutId);
-      clearTimeout(closeTimeoutId);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
       cleanupPageViewChange();
     };
   }, []);
 
   var open = function open() {
-    clearTimeout(closeTimeoutId);
-    closeTimeoutId = null;
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
     setIsPopoverOpen(true);
   };
 
   var close = function close() {
-    clearTimeout(openTimeoutId);
-    openTimeoutId = null;
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
     setIsPopoverOpen(false);
   };
 
@@ -103,13 +103,13 @@ function Tooltip(props, ref) {
   var createOpenTimeout = useCallback(function () {
     clearGlobalTimeout();
 
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId);
-      closeTimeoutId = null;
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
 
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS');
-        openTimeoutId = setTimeout(function () {
+        openTimeoutId.current = setTimeout(function () {
           return open();
         }, instantDelay ? 0 : openDelay);
       }
@@ -118,11 +118,11 @@ function Tooltip(props, ref) {
   var createCloseTimeout = useCallback(function () {
     startGlobalTimeout();
 
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId);
-      openTimeoutId = null;
-      closeTimeoutId = setTimeout(function () {
-        close();
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
       }, closeDelay);
     }
   });

package/dist/esm/index.d.js

@@ -5,7 +5,6 @@ export var utils;
 export var Avatar;
 export var Badge;
 export var Calendar;
-export var Checkbox;
 export var CheckboxCard;
 export var CheckboxGroup;
 export var ChurchCenterStatus;
@@ -27,11 +26,19 @@ export var Highlight;
 export var Icon;
 export var Link;
 export var LinkList;
-export var List;
 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;
@@ -42,9 +49,7 @@ export var Section;
 export var HeadingUppercase;
 export var SegmentedControl;
 export var SegmentedTabs;
-export var Select;
 export var Sidebar;
-export var Sortable;
 export var StepperField;
 export var StepperProgress;
 export var Summary;
@@ -56,7 +61,36 @@ export var Toolbar;
 export var TokenInput;
 export var Tooltip;
 export var VariantProvider;
-export var Wizard;
+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';
@@ -65,7 +99,6 @@ export * from './Divider';
 export * from './FilterLayout';
 export * from './GridView';
 export * from './Group';
-export * from './Input';
 export * from './Popover';
 export * from './Portal';
 export * from './Scrim';

package/dist/esm/system/split-styles.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { stylePropNames, pseudoPropNames } from './style-names';
 import { parsePluginStyles } from './parse-styles';
-export default function (_ref) {
+export default function SplitStyles(_ref) {
   var className = _ref.className,
       _ref$mediaQueries = _ref.mediaQueries,
       mediaQueries = _ref$mediaQueries === void 0 ? {} : _ref$mediaQueries,

package/dist/types/Button/Button.d.ts

@@ -60,6 +60,10 @@ declare type ButtonProps = {
      * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
      */
     to?: string;
+    /**
+     * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
+     */
+    href?: string;
     /**
      * Wraps button in a [`<Tooltip />`](./tooltip). Accepts any valid Tooltip props.
      */

package/dist/types/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import { ColorProp } from '../index';
+import { ColorProp, StyleProps } from '../index';
 export declare type DividerProps = {
     /**
      * The direction the dividing line should span.
@@ -16,7 +16,7 @@ export declare type DividerProps = {
      * The size of the line in pixels
      */
     size?: number;
-};
+} & StyleProps;
 /**
  * Used to break up content
  */

package/dist/types/Portal/Portal.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Theme } from '../index';
 export declare type PortalProps = {
     children: any;
     /** Styles to apply to the portal root element. */
@@ -18,6 +19,8 @@ declare class Portal extends React.Component<PortalProps> {
         renderTag: string;
         renderTo: any;
     };
+    static contextType: import("react").Context<object>;
+    context: React.ContextType<React.Context<Theme>>;
     _portalNode: HTMLElement;
     _needsUpdate: boolean;
     _updated: boolean;

package/dist/types/Spinner/Spinner.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+import { StyleProps } from '../index';
 export declare type SpinnerProps = {
     /**
      * Uses position absolute and transforms to position in the center of a relative parent.
@@ -19,5 +21,5 @@ export declare type SpinnerProps = {
      * Secondary color of spinner.
      */
     trackColor?: string;
-};
+} & StyleProps & React.HTMLAttributes<HTMLElement>;
 export declare function Spinner({ center, size, thickness, ...props }: SpinnerProps): JSX.Element;

package/dist/types/ThemeProvider/ThemeProvider.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { BoxProps } from '../Box';
 import { Theme } from '../index';
 import { setRootStyles, styleReset } from './styles';
 export declare const cache: import("@emotion/utils").EmotionCache;
@@ -7,10 +8,11 @@ export declare const themeStorage: {
     set: (value: any) => void;
 };
 export declare const themeInitializerScript: string;
-export declare function ThemeProvider({ theme, children, }: {
+declare type Props = {
     theme?: Theme;
     children: React.ReactNode;
-}): JSX.Element;
+} & BoxProps;
+export declare function ThemeProvider({ theme, children, ...boxProps }: Props): JSX.Element;
 export declare namespace ThemeProvider {
     var cache: import("@emotion/utils").EmotionCache;
     var setRootStyles: (themeId: any, styles: any) => void;

package/dist/types/index.d.ts

@@ -259,6 +259,10 @@ export type CommonProps = React.RefAttributes<any> &
   React.HTMLAttributes<any> &
   any
 
+export type CommonComponent = React.FC<CommonProps>
+export type CommonPropsWith<T extends object> = Omit<CommonProps, keyof T> & T
+export type CommonComponentWith<T extends object> = React.FC<CommonPropsWith<T>>
+
 export const designSystem: any
 export const hooks: any
 export const server: any
@@ -267,7 +271,6 @@ export const utils: any
 export const Avatar: React.FC<CommonProps>
 export const Badge: React.FC<CommonProps>
 export const Calendar: React.FC<CommonProps>
-export const Checkbox: React.FC<CommonProps>
 export const CheckboxCard: React.FC<CommonProps>
 export const CheckboxGroup: React.FC<CommonProps>
 export const ChurchCenterStatus: React.FC<CommonProps>
@@ -289,11 +292,19 @@ export const Highlight: React.FC<CommonProps>
 export const Icon: React.FC<CommonProps>
 export const Link: React.FC<CommonProps>
 export const LinkList: React.FC<CommonProps>
-export const List: React.FC<CommonProps>
 export const Logo: React.FC<CommonProps>
 export const Menu: React.FC<CommonProps>
 export const Modal: React.FC<CommonProps>
 export const NumberField: React.FC<CommonProps>
+export const PageActions: CommonComponent
+export const PageBody: CommonComponent
+export const PageButton: CommonComponent
+export const PageDropdown: CommonComponent
+export const PageHeader: CommonComponent
+export const PageTab: CommonComponent
+export const PageTabList: CommonComponent
+export const PageTitle: CommonComponent
+export const PageToolbar: CommonComponent
 export const PagerView: React.FC<CommonProps>
 export const Pagination: React.FC<CommonProps>
 export const Progress: React.FC<CommonProps>
@@ -304,9 +315,7 @@ export const Section: React.FC<CommonProps>
 export const HeadingUppercase: React.FC<CommonProps>
 export const SegmentedControl: React.FC<CommonProps>
 export const SegmentedTabs: React.FC<CommonProps>
-export const Select: React.FC<CommonProps>
 export const Sidebar: React.FC<CommonProps>
-export const Sortable: React.FC<CommonProps>
 export const StepperField: React.FC<CommonProps>
 export const StepperProgress: React.FC<CommonProps>
 export const Summary: React.FC<CommonProps>
@@ -320,6 +329,67 @@ export const Tooltip: React.FC<CommonProps>
 export const VariantProvider: React.FC<CommonProps>
 export const Wizard: React.FC<CommonProps>
 
+// ============
+// Manual Types
+// ===========
+// These are components written in JS, where we can provide very small (one prop at a time) useful
+// typings for consumers.
+// ============
+
+type HTMLInputWrapperComponent = CommonComponentWith<{
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}>
+
+// ========
+// Checkbox
+// ========
+
+export const Checkbox: HTMLInputWrapperComponent
+
+// =====
+// Input
+// =====
+
+export const Input: HTMLInputWrapperComponent & {
+  Inline: HTMLInputWrapperComponent
+  Input: HTMLInputWrapperComponent
+  InputBox: CommonComponent
+  InputField: HTMLInputWrapperComponent
+  InputLabel: CommonComponent
+}
+
+// ====
+// List
+// ====
+
+export const List: CommonComponent & { Item: CommonComponent }
+
+// ======
+// Select
+// ======
+
+export const Select: CommonComponent & {
+  Inline: CommonComponent
+  Option: CommonComponent
+  OptionGroup: CommonComponent
+  Value: CommonComponent
+  toggleValue: (...args: unknown) => unknown
+}
+
+// ========
+// Sortable
+// ========
+
+export const Sortable: CommonComponent & {
+  SortableManager: CommonComponent
+  SortableList: CommonComponent
+  SortableItem: CommonComponent
+}
+
+// =====================
+// Typescript Components
+// =====================
+
 export * from './Alert'
 export * from './Box'
 export * from './Button'
@@ -328,7 +398,6 @@ export * from './Divider'
 export * from './FilterLayout'
 export * from './GridView'
 export * from './Group'
-export * from './Input'
 export * from './Popover'
 export * from './Portal'
 export * from './Scrim'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.0-rc.0",
+  "version": "2.6.0-rc.10",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",
@@ -76,7 +76,7 @@
     "husky": "^4.3.8",
     "is-ci-cli": "^2.2.0",
     "jest": "^26.6.3",
-    "jest-canvas-mock": "2.3.1",
+    "jest-canvas-mock": "^2.5.0",
     "jest-watch-typeahead": "0.6.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -106,6 +106,6 @@
     "stylefire": "^7.0.3",
     "tabbable": "^6.0.0",
     "tiny-spring": "^1.0.0",
-    "zustand": "^4.1.1"
+    "zustand": "^4.3.7"
   }
 }