@planningcenter/tapestry-react 2.6.2 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.2",
+  "version": "2.8.0",
   "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",
@@ -38,8 +38,8 @@
   "peerDependencies": {
     "@emotion/cache": "10.x",
     "@emotion/react": "^11.10.5",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": ">=16.8.0 <19",
+    "react-dom": ">=16.8.0 <19"
   },
   "devDependencies": {
     "@babel/cli": "7.12.17",
@@ -63,7 +63,6 @@
     "@types/react-dom": "^18.0.8",
     "babel-eslint": "10.1.0",
     "chokidar-cli": "^2.1.0",
-    "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^8.2.0",
     "eslint": "7.20.0",
     "eslint-config-react-app": "6.0.0",
@@ -88,8 +87,8 @@
     "typescript": "^4.1.5"
   },
   "dependencies": {
-    "@planningcenter/icons": "^14.12.0",
-    "@planningcenter/react-beautiful-dnd": "^13.2.1",
+    "@planningcenter/icons": "^14.18.1",
+    "@planningcenter/react-beautiful-dnd": "^13.3.0",
     "@popmotion/popcorn": "^0.4.4",
     "@popperjs/core": "^2.11.6",
     "@react-hook/window-size": "^3.1.1",

package/src/Button/Button.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, createEvent } from '@testing-library/react'
 import { Button } from './Button'
 
 it(`should render as <button> with type="button" by default`, () => {
@@ -14,6 +14,44 @@ it(`should render as <button> with type="submit"`, () => {
   expect(button.getAttribute('type')).toEqual('submit')
 })
 
+it(`if "disabled" prop is provided, set "aria-disabled" attribute`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  expect(button.getAttribute("aria-disabled")).toEqual("true")
+  expect(button.disabled).toBe(false)
+})
+
+it(`if "disabled" prop is provided, prevent "Click" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const clickEvent = createEvent.click(button)
+  fireEvent(button, clickEvent)
+
+  expect(clickEvent.defaultPrevented).toBe(true)
+})
+
+it(`if "disabled" prop is provided, prevent keyDown "Enter" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const keyDownEvent = createEvent.keyDown(button, { key: 'Enter' })
+  fireEvent(button, keyDownEvent)
+
+  expect(keyDownEvent.defaultPrevented).toBe(true)
+})
+
+it(`if "disabled" prop is provided, prevent keyDown "Space" event from firing`, () => {
+  const { container } = render(<Button disabled />)
+  const button = container.querySelector('button')
+
+  const keyDownEvent = createEvent.keyDown(button, { key: ' ' })
+  fireEvent(button, keyDownEvent)
+
+  expect(keyDownEvent.defaultPrevented).toBe(true)
+})
+
 it(`should render title`, () => {
   const title = 'Hello'
   const { getByText } = render(<Button title={title} />)

package/src/Button/Button.tsx

@@ -16,7 +16,7 @@ type ButtonProps = {
   children?: any
 
   /**
-   * Disables button by removing click handlers and making the button transparent.
+   * "Soft disables" button by adding an `aria-disabled` attribute and preventing `onClick` and `keyDown` events for "space" / "enter". This approach allows composing components (such as `Tooltip`) to still bubble up their events, while ensuring that clicking the button or submitting a form is prevented.
    */
   disabled?: boolean
 
@@ -254,11 +254,16 @@ export function Button({
     }
   }
 
-  // don't allow interacting with button when disabled
   if (disabled) {
+    buttonProps.opacity = 0.65
     buttonProps['aria-disabled'] = true
     buttonProps.cursor = 'not-allowed'
-    buttonProps.opacity = 0.65
+    buttonProps.onClick = (event) =>  event.preventDefault()
+    buttonProps.onKeyDown = (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+      }
+    }
   }
 
   // don't apply hover/active styles or events when disabled or spinner is present

package/src/Calendar/Calendar.js

@@ -220,34 +220,36 @@ const Calendar = forwardRef(
         >
           <StackView axis="horizontal" spacing={0.5}>
             <Box
-              as="button"
               aria-label={isMonthsView ? 'Choose dates' : 'Choose month'}
-              padding={0.25}
-              fontSize={headerFontSize}
-              lineHeight={3}
-              radius={3}
-              cursor="pointer"
+              as="button"
               backgroundColor={hover ? 'highlight' : 'transparent'}
+              cursor="pointer"
+              fontSize={headerFontSize}
               hover={{ backgroundColor: 'highlightSecondary' }}
+              lineHeight={3}
               onClick={() => {
                 setCurrentView(isMonthsView ? 'calendar' : 'months')
               }}
+              padding={0.25}
+              radius={3}
+              tabIndex={-1}
             >
               {format(currentDate, 'MMMM')}
             </Box>
             <Box
-              as="button"
               aria-label={isYearsView ? 'Choose dates' : 'Choose year'}
-              padding={0.25}
-              fontSize={headerFontSize}
-              lineHeight={3}
-              radius={3}
-              cursor="pointer"
+              as="button"
               backgroundColor={hover ? 'highlight' : 'transparent'}
+              cursor="pointer"
+              fontSize={headerFontSize}
               hover={{ backgroundColor: 'highlightSecondary' }}
+              lineHeight={3}
               onClick={() => {
                 setCurrentView(isYearsView ? 'calendar' : 'years')
               }}
+              padding={0.25}
+              radius={3}
+              tabIndex={-1}
             >
               {currentYear}
             </Box>
@@ -260,29 +262,32 @@ const Calendar = forwardRef(
             }}
           >
             <Button
-              title="Previous month"
-              icon={{ name: 'general.leftChevron', size: "xxs" }}
               disabled={
                 isYearsView
                   ? currentYear <= minYear
                   : isSameMonth(currentDate, minDate)
               }
+              icon={{ name: 'general.leftChevron', size: 'xxs' }}
               onClick={() => navigateCalendar(-1)}
+              tabIndex={-1}
+              title="Previous month"
             />
             <Button
-              tooltip={{ title: 'Today' }}
               icon={{ name: 'tapestry.radio1' }}
               onClick={() => setDate(TODAY, true)}
+              tabIndex={-1}
+              tooltip={{ title: 'Today' }}
             />
             <Button
-              title="Next month"
-              icon={{ name: 'general.rightChevron', size: "xxs"}}
               disabled={
                 isYearsView
                   ? currentYear >= maxYear
                   : isSameMonth(currentDate, maxDate)
               }
+              icon={{ name: 'general.rightChevron', size: 'xxs' }}
               onClick={() => navigateCalendar(1)}
+              tabIndex={-1}
+              title="Next month"
             />
           </Group>
         </StackView>

package/src/Combobox/ComboboxInput.js

@@ -10,6 +10,7 @@ import React, {
 
 import Input from '../Input'
 import ItemListContext from '../ItemList/ItemListContext'
+import { ItemListController } from '../ItemList'
 import { useThemeProps } from '../system'
 
 type Props = {
@@ -64,77 +65,90 @@ function ComboboxInput(props: Props, ref) {
   }))
 
   const itemList = useContext(ItemListContext)
-  const { highlightedItemId, id } = itemList
 
   useEffect(() => {
     setTimeout(() => {
       itemList.setHighlightedIndex(0)
     })
-  }, [itemList.items])
+  }, [itemList])
 
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      itemList.moveHighlightedIndex(-1, { contain: false })
-    }
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      itemList.moveHighlightedIndex(1, { contain: false })
-    }
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      itemList.selectHighlightedItem()
-    }
-    if (onKeyDown) {
-      onKeyDown(e)
-    }
-    if (onClose && e.key === 'Tab') {
-      onClose()
-    }
-  })
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        itemList.moveHighlightedIndex(-1, { contain: false })
+      }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        itemList.moveHighlightedIndex(1, { contain: false })
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        itemList.selectHighlightedItem()
+      }
+      if (onKeyDown) {
+        onKeyDown(e)
+      }
+      if (onClose && e.key === 'Tab') {
+        onClose()
+      }
+    },
+    [itemList, onClose, onKeyDown]
+  )
 
-  const handleDocumentKeyDown = useCallback((e) => {
-    if (onClear && e.key === 'Escape') {
-      onClear()
-    }
-  })
+  const handleDocumentKeyDown = useCallback(
+    (e) => {
+      if (onClear && e.key === 'Escape') {
+        onClear()
+      }
+    },
+    [onClear]
+  )
 
   return (
-    <Input.InputBox
-      innerRef={innerRef}
-      size={size}
-      disabled={disabled}
-      isLoading={isLoading}
-      onClear={onClear}
-      {...restProps}
-      grow={1}
-    >
-      <Input.InputField
-        innerRef={(node) => {
-          inputNode.current = node
-        }}
-        grow={1}
-        role="combobox"
-        autoComplete="off"
-        aria-autocomplete="list"
-        aria-controls={id}
-        aria-expanded={isOpen}
-        aria-activedescendant={highlightedItemId}
-        autoFocus={autoFocus}
-        type={type}
-        name={name}
-        disabled={disabled}
-        readOnly={readOnly}
-        placeholder={placeholder}
-        defaultValue={defaultValue}
-        value={value}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onKeyDown={handleKeyDown}
-        onKeyUp={onKeyUp}
-      />
-    </Input.InputBox>
+    <ItemListController>
+      {(itemList) => {
+        const { highlightedItemId, id } = itemList
+
+        return (
+          <Input.InputBox
+            innerRef={innerRef}
+            size={size}
+            disabled={disabled}
+            isLoading={isLoading}
+            onClear={onClear}
+            {...restProps}
+            grow={1}
+          >
+            <Input.InputField
+              innerRef={(node) => {
+                inputNode.current = node
+              }}
+              grow={1}
+              role="combobox"
+              autoComplete="off"
+              aria-autocomplete="list"
+              aria-controls={id}
+              aria-expanded={isOpen}
+              aria-activedescendant={highlightedItemId}
+              autoFocus={autoFocus}
+              type={type}
+              name={name}
+              disabled={disabled}
+              readOnly={readOnly}
+              placeholder={placeholder}
+              defaultValue={defaultValue}
+              value={value}
+              onChange={onChange}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onKeyDown={handleKeyDown}
+              onKeyUp={onKeyUp}
+            />
+          </Input.InputBox>
+        )
+      }}
+    </ItemListController>
   )
 }
 ComboboxInput = forwardRef(ComboboxInput)

package/src/DataTable/DataTable.js

@@ -436,12 +436,13 @@ const DataTable = (props: Props) => {
         >
           {(provided) => (
             <div
+              className={css(getVariant('body'))}
+              data-dnd-ignore-scrollable
               ref={(ref) => {
                 bodyRef.current = ref
                 provided.innerRef(ref)
               }}
               role="rowgroup"
-              className={css(getVariant('body'))}
               {...provided.droppableProps}
             >
               <BodyRows {...bodyRowsProps} />

package/src/DateField/DateField.mdx

@@ -17,3 +17,18 @@ render(() => {
   )
 })
 ```
+
+### Example with day/month/year format
+
+```jsx live
+render(() => {
+  const [date, setDate] = React.useState(Calendar.TODAY)
+  return (
+    <DateField
+      value={date}
+      formatValue="dd/MM/yyyy"
+      onChange={(date) => setDate(date)}
+    />
+  )
+})
+```

package/src/DateField/{DateField.js → DateField.tsx}

@@ -1,6 +1,5 @@
 // @flow
-import React, { useState, useCallback, useRef } from 'react'
-import { format } from 'date-fns'
+import React, { useState, useCallback, useMemo, useRef } from 'react'
 
 import Card from '../Card'
 import Calendar from '../Calendar'
@@ -10,62 +9,64 @@ import Input from '../Input/Input'
 import Popover from '../Popover'
 import { generateId } from '../utils'
 import { useThemeProps } from '../system'
+import { useArrowKeysToNavigateCalendar } from './useArrowKeysToNavigateCalendar'
+import { useEditableDate } from './useEditableDate'
 
 export type DateFieldProps = {
   /**
    * Format the displayed date using date-fns [format](https://date-fns.org/v2.0.0-alpha.9/docs/format) function.
    */
-  formatValue: string,
+  formatValue: string
 
   /**
    * Controls the initial Popover state: open or closed (default).
    */
-  defaultOpen: boolean,
+  defaultOpen: boolean
 
   /**
    * The minimum date that can be chosen.
    */
-  minDate: Date,
+  minDate: Date
 
   /**
    * The maximum date that can be chosen.
    */
-  maxDate: Date,
+  maxDate: Date
 
   /**
    * Called when a date has been selected.
    */
-  onChange: (date: Date) => null,
+  onChange: (date: Date) => null
 
   /**
    * Determines where the popover is placed.
    */
-  placement: string,
+  placement: string
 
   /**
    * The date that will be selected.
    */
-  value: Date,
+  value: Date
 
   /**
    * Locks external scrollbars when open.
    */
-  lockScrollWhileOpen?: boolean,
+  lockScrollWhileOpen?: boolean
 
   /**
    * Attempts to keep popover in view clipping edges if too large.
    */
-  keepInView?: boolean,
+  keepInView?: boolean
 
   /**
    * Accepts any valid [Calendar](/calendar) props.
    */
-  calendarProps?: object,
+  calendarProps?: object
 
   /**
    * Accepts any valid [Popover](/popover) props.
    */
-  popoverProps?: object,
+  popoverProps?: object
 }
 
 function DateField({
@@ -89,81 +90,124 @@ function DateField({
     trackColor,
     ...restProps
   } = useThemeProps('dateField', props)
-  let canClosePopover = true
   const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen)
   const id = generateId('datefield')
   const popover = useRef(null)
   const inputWrapper = useRef(null)
 
+  const focusInput = useCallback(() => {
+    const input = inputWrapper.current.querySelector('input')
+    if (input.focus) {
+      input.focus()
+    }
+  }, [])
+
   const openPopover = useCallback(() => {
     setIsPopoverOpen(true)
-  })
+  }, [])
 
   const closePopover = useCallback(() => {
-    if (canClosePopover) {
-      setIsPopoverOpen(false)
-    }
+    setIsPopoverOpen(false)
+  }, [])
+
+  const dateValidator = useCallback(
+    (date: Date) => {
+      if (!date) return false
+      if (minDate && date < minDate) return false
+      if (maxDate && date > maxDate) return false
+      return true
+    },
+    [minDate, maxDate]
+  )
+
+  const {
+    formattedDate,
+    setDate,
+    clearKeyBuffer,
+    invalidKeyBuffer,
+  } = useEditableDate({
+    date: value,
+    dateFormat: formatValue,
+    dateValidator,
+    onChange,
   })
 
-  const togglePopover = useCallback(() => {
-    if (isPopoverOpen) {
+  const handleDateSelectedFromCalendar = useCallback(
+    (date) => {
+      focusInput()
+      setDate(date)
       closePopover()
-    } else {
-      openPopover()
-    }
+    },
+    [focusInput, setDate, closePopover]
+  )
+
+  const navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
+    date: value,
+    calendarIsOpen: isPopoverOpen,
+    openCalendar: openPopover,
+    onChange: setDate,
   })
 
-  const handleDateSelect = useCallback((date) => {
-    const input = inputWrapper.current.querySelector('input')
-    if (input.focus) {
-      input.focus()
-    }
-    if (onChange) {
-      onChange(date)
-    }
+  const handleInputOnChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setDate(event.currentTarget.value)
+    },
+    [setDate]
+  )
+
+  const handleOnBlur = useCallback(() => {
+    clearKeyBuffer()
     closePopover()
-  })
+  }, [clearKeyBuffer, closePopover])
+
+  const inputColors = useMemo(() => {
+    if (invalidKeyBuffer) {
+      return { color: 'error-darker', backgroundColor: 'error-lighter' }
+    } else {
+      return {}
+    }
+  }, [invalidKeyBuffer])
 
   return (
-    <FocusGroup onBlur={closePopover}>
+    <FocusGroup onBlur={handleOnBlur}>
       {({ requestBlur, setRef }) => (
         <Popover
           {...popoverProps}
           ref={(component) => {
             popover.current = component
           }}
+          as={Card}
+          elevation={2}
           innerRef={(node) => {
             popover.current = node
             setRef(`${id}-popover`)(node)
           }}
-          as={Card}
-          tabIndex={-1}
-          elevation={2}
-          onBlur={requestBlur}
           keepInView={keepInView}
           lockScrollWhileOpen={lockScrollWhileOpen}
-          placement={placement}
-          open={isPopoverOpen}
+          onBlur={requestBlur}
           onRequestClose={closePopover}
+          open={isPopoverOpen}
+          placement={placement}
+          tabIndex={-1}
           anchorElement={
             <Input
               innerRef={(node) => {
                 inputWrapper.current = node
                 setRef(`${id}-input`)(node)
               }}
-              readOnly
-              value={value ? format(value, formatValue) : ''}
+              onBlur={requestBlur}
+              onFocus={openPopover}
+              onChange={handleInputOnChange}
+              onKeyDown={navigateCalendarWithArrowKeys}
+              value={formattedDate}
               renderRight={
-                <Icon name="general.calendar" color="foregroundTertiary" />
+                <Icon
+                  name="general.calendar"
+                  color="foregroundTertiary"
+                  onClick={openPopover}
+                />
               }
-              onClick={togglePopover}
-              onBlur={requestBlur}
-              onKeyDown={(event) => {
-                if (event.key === ' ') {
-                  event.preventDefault()
-                  togglePopover()
-                }
-              }}
+              {...inputColors}
               {...restProps}
             />
           }
@@ -171,11 +215,11 @@ function DateField({
           <Calendar
             size="sm"
             {...calendarProps}
-            initialDate={value}
+            date={value}
             selected={value}
             minDate={minDate}
             maxDate={maxDate}
-            onDateSelect={handleDateSelect}
+            onDateSelect={handleDateSelectedFromCalendar}
           />
         </Popover>
       )}