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

package/src/RangeSlider/RangeSlider.mdx

@@ -11,18 +11,16 @@ render(() => {
   const [volume, setVolume] = React.useState(50)
   const muted = volume === 0
   return (
-    <ThemeProvider theme={{ icons }}>
-      <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
-        <Icon>
-          <Icon.Path name="services.volume0" />
-          <Icon.Path name="services.volume1" visible={muted} />
-          <Icon.Path name="services.volume2" visible={!muted} />
-          <Icon.Path name="services.volume3" visible={!muted && volume > 50} />
-        </Icon>
-        <RangeSlider value={volume} onChange={setVolume} />
-        <Text>{volume}</Text>
-      </StackView>
-    </ThemeProvider>
+    <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
+      <Icon>
+        <Icon.Path name="services.volume0" />
+        <Icon.Path name="services.volume1" visible={muted} />
+        <Icon.Path name="services.volume2" visible={!muted} />
+        <Icon.Path name="services.volume3" visible={!muted && volume > 50} />
+      </Icon>
+      <RangeSlider value={volume} onChange={setVolume} />
+      <Text>{volume}</Text>
+    </StackView>
   )
 })
 ```

package/src/Scrim/Scrim.mdx

@@ -3,6 +3,7 @@ title: Scrim
 category: Overlays
 summary: Scrims are used to display focused content like alerts, modals, or media previews.
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: scrim
 ---
 
 ```jsx live

package/src/Scrim/Scrim.tsx

@@ -1,33 +1,38 @@
 import * as React from 'react'
 
 import StackView from '../StackView'
+import { useThemeProps } from '../system'
 
 type ScrimProps = {
   /** Gain access to the internal ref. */
-  ref?: any,
-  children?: any,
+  ref?: any
+  children?: any
 }
 
-const Scrim = React.forwardRef(function (props: ScrimProps, _ref: any) {
+const Scrim = React.forwardRef(function (
+  { ref, ...restProps }: ScrimProps,
+  _ref: any
+) {
   React.useLayoutEffect(() => {
     document.body.style.overflow = 'hidden'
     return () => {
       document.body.style.overflow = ''
     }
   }, [])
+  const { zIndex = 10000, ...themeProps } = useThemeProps('scrim', restProps)
   return (
     <StackView
-      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}
     />
   )
 })

package/src/Sidebar/Sidebar.mdx

@@ -1,7 +1,6 @@
 ---
 title: Sidebar
 category: General
-propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Spinner/Spinner.tsx

@@ -3,6 +3,7 @@ import { keyframes } from '@emotion/react'
 
 import { Box } from '../Box'
 import { useThemeProps } from '../system'
+import { StyleProps } from '../index'
 
 const rotate = keyframes({
   '100%': { transform: 'rotate(360deg)' },
@@ -37,7 +38,7 @@ export type SpinnerProps = {
    * Secondary color of spinner.
    */
   trackColor?: string
-}
+} & StyleProps & React.HTMLAttributes<HTMLElement>
 
 export function Spinner({
   center,

package/src/ThemeProvider/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
 import { CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { merge } from 'lodash'
+import { Box, BoxProps } from '../Box'
 
 import defaultTheme from '../system/default-theme'
 import { flattenPalette } from '../system'
@@ -16,6 +17,10 @@ export const cache = createCache({
   key: 'tapestry-react',
 })
 
+function mergeIntoNewObject(...merges: object[]) {
+  return merge({}, ...merges)
+}
+
 export const themeStorage = {
   get: () => window.localStorage.getItem(STORAGE_KEY),
   set: (value) => window.localStorage.setItem(STORAGE_KEY, value),
@@ -38,28 +43,31 @@ function mergeThemes(a: Theme = {}, b: Theme = {}) {
     button: {
       ...a.button,
       ...b.button,
-      themes: merge(a.button?.themes || {}, b.button?.themes || {}),
+      themes: mergeIntoNewObject(a.button?.themes || {}, b.button?.themes || {}),
     },
-    colors: merge(
+    colors: mergeIntoNewObject(
       flattenPalette(a.colors || {}),
       flattenPalette(b.colors || {})
     ),
     spinner: {
       ...a.spinner,
       ...b.spinner,
-      sizes: merge(a.spinner?.sizes || {}, b.spinner?.sizes || {}),
-      thickness: merge(a.spinner?.thickness || {}, b.spinner?.thickness || {}),
+      sizes: mergeIntoNewObject(a.spinner?.sizes || {}, b.spinner?.sizes || {}),
+      thickness: mergeIntoNewObject(a.spinner?.thickness || {}, b.spinner?.thickness || {}),
     },
   }
 }
 
+type Props = {
+  theme?: Theme
+  children: React.ReactNode
+} & BoxProps
+
 export function ThemeProvider({
   theme = emptyTheme,
   children,
-}: {
-  theme?: Theme
-  children: React.ReactNode
-}) {
+  ...boxProps
+}: Props) {
   const [mergedTheme, setMergedTheme] = useState(() =>
     mergeThemes(defaultTheme, theme)
   )
@@ -76,9 +84,13 @@ export function ThemeProvider({
   return (
     <CacheProvider value={cache}>
       <EmotionThemeProvider theme={mergedTheme}>
-        <div {...{ [`${getThemeDataAttribute(mergedTheme.id)}`]: true }}>
+        <Box
+          className="tapestry-react-reset"
+          {...boxProps}
+          {...{ [`${getThemeDataAttribute(mergedTheme.id)}`]: true }}
+        >
           {children}
-        </div>
+        </Box>
       </EmotionThemeProvider>
     </CacheProvider>
   )

package/src/ThemeProvider/styles.ts

@@ -39,23 +39,37 @@ ${getRootStyles(null, defaultColorProperties)}
 
 .tapestry-react-reset {
   appearance: none;
+  background-color: transparent;
+  border-width: 0px;
+  border-style: solid;
+  border-color: transparent;
+  box-sizing: border-box;
+  color: inherit;
   box-sizing: border-box;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   font-weight: 400;
-  text-decoration: none;
-  flex: 0 0 auto;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
   min-width: 0px;
   min-height: 0px;
-  padding: 0px;
-  margin: 0px;
-  border: 0px solid transparent;
-  background-color: transparent;
-  color: inherit;
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  text-decoration: none;
 }
 
 .tapestry-react-reset::-moz-focus-inner {
-  padding: 0px;
-  border: 0px;
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  border: none;
 }
 
 .tapestry-react-reset:focus:not(.focus-visible) {
@@ -70,9 +84,6 @@ ${getRootStyles(null, defaultColorProperties)}
 // 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}`)

package/src/TimeField/TimeField.js

@@ -230,7 +230,7 @@ class TimeField extends Component<Props> {
             highlightOnInteraction
             value={this.state.meridiem}
             grow={0}
-            width={3}
+            width="2em"
             textAlign="center"
             aria-label="AM/PM"
             onChange={noop} // prevent React warnings

package/src/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@ import React, {
   Children,
   cloneElement,
   forwardRef,
+  useRef,
   useState,
   useCallback,
   useImperativeHandle,
@@ -124,8 +125,8 @@ function Tooltip(props: Props, ref) {
   let isPageInView = true
   let isFocused = false
   let isMouseDown = false
-  let openTimeoutId = null
-  let closeTimeoutId = null
+  let openTimeoutId = useRef(null)
+  let closeTimeoutId = useRef(null)
 
   // prevents tooltips showing when focused and navigating back to a page after leaving
   const cleanupPageViewChange = useCallback(
@@ -137,21 +138,21 @@ function Tooltip(props: Props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close)
     return () => {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close)
-      clearTimeout(openTimeoutId)
-      clearTimeout(closeTimeoutId)
+      clearTimeout(openTimeoutId.current)
+      clearTimeout(closeTimeoutId.current)
       cleanupPageViewChange()
     }
   }, [])
 
   const open = () => {
-    clearTimeout(closeTimeoutId)
-    closeTimeoutId = null
+    clearTimeout(closeTimeoutId.current)
+    closeTimeoutId.current = null
     setIsPopoverOpen(true)
   }
 
   const close = () => {
-    clearTimeout(openTimeoutId)
-    openTimeoutId = null
+    clearTimeout(openTimeoutId.current)
+    openTimeoutId.current = null
     setIsPopoverOpen(false)
   }
 
@@ -179,24 +180,25 @@ function Tooltip(props: Props, ref) {
 
   const createOpenTimeout = useCallback(() => {
     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(() => open(), instantDelay ? 0 : openDelay)
+        openTimeoutId.current = setTimeout(
+          () => open(),
+          instantDelay ? 0 : openDelay
+        )
       }
     }
   })
 
   const createCloseTimeout = useCallback(() => {
     startGlobalTimeout()
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId)
-      openTimeoutId = null
-      closeTimeoutId = setTimeout(() => {
-        close()
-      }, closeDelay)
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current)
+      openTimeoutId.current = null
+      closeTimeoutId.current = setTimeout(() => close(), closeDelay)
     }
   })
 

package/src/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/src/system/split-styles.js

@@ -1,7 +1,7 @@
 import { stylePropNames, pseudoPropNames } from './style-names'
 import { parsePluginStyles } from './parse-styles'
 
-export default function ({
+export default function SplitStyles({
   className,
   mediaQueries = {},
   plugin,
@@ -26,7 +26,9 @@ export default function ({
   }
   return {
     ...restProps,
-    className: className ? `tapestry-react-reset ${className}` : `tapestry-react-reset`,
+    className: className
+      ? `tapestry-react-reset ${className}`
+      : `tapestry-react-reset`,
     css: (theme) => {
       const propStyles = {}
       for (const prop in styleProps) {