@planningcenter/tapestry-react 2.7.0 → 2.8.1

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
 
@@ -256,14 +256,13 @@ export function Button({
 
   if (disabled) {
     buttonProps.opacity = 0.65
-  
-    if (buttonProps.type === "button" || buttonProps.type === "reset") {
-      buttonProps.disabled = true
-    } else if (buttonProps.type === "submit") {
-      buttonProps['aria-disabled'] = true
-      buttonProps.cursor = 'not-allowed'
-      buttonProps.onClick = (event) => event.preventDefault()
-      buttonProps.onKeyDown = (event) => event.preventDefault()
+    buttonProps['aria-disabled'] = true
+    buttonProps.cursor = 'not-allowed'
+    buttonProps.onClick = (event) =>  event.preventDefault()
+    buttonProps.onKeyDown = (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+      }
     }
   }
 

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/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,131 @@ 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 handleNavigationChangeFromCalendar = useCallback(
+    (date) => {
+      setDate(date)
+    },
+    [setDate]
+  )
+
+  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 +222,12 @@ function DateField({
           <Calendar
             size="sm"
             {...calendarProps}
-            initialDate={value}
+            date={value}
             selected={value}
             minDate={minDate}
             maxDate={maxDate}
-            onDateSelect={handleDateSelect}
+            onDateSelect={handleDateSelectedFromCalendar}
+            onDateChange={handleNavigationChangeFromCalendar}
           />
         </Popover>
       )}

package/src/DateField/parse.test.ts

@@ -0,0 +1,76 @@
+import { format } from 'date-fns'
+import { parseDate, isValidDate, parseMonth } from './parse'
+
+describe('isValidDate', () => {
+  const validDates = [
+    'jun 6, 2022',
+    'June-06-2022',
+    '6-6-2022',
+    '6/6/2022',
+    '06-06-2022',
+    '2022-06-26', // year, month, day
+    '2022/6/1', // year, month, day
+  ]
+
+  validDates.forEach((date) => {
+    it(`returns true for "${date}"`, () => {
+      expect(isValidDate(date)).toBe(true)
+    })
+  })
+
+  const invalidDates = [
+    'June-06-22',
+    '13-6-2022',
+    'June 6 2022',
+    '2022/6/1/1',
+    '2022-15-06',
+  ]
+
+  invalidDates.forEach((date) => {
+    it(`returns false for "${date}"`, () => {
+      expect(isValidDate(date)).toBe(false)
+    })
+  })
+})
+
+describe('parseDate', () => {
+  const dates = [
+    ['January 31, 2022', 'January 31, 2022'],
+    ['jun 9, 2022', 'June 09, 2022'],
+    ['June-09-2022', 'June 09, 2022'],
+    ['6-9-2022', 'June 09, 2022'],
+    ['6/9/2022', 'June 09, 2022'],
+    ['06-09-2022', 'June 09, 2022'],
+    ['2022-06-26', 'June 26, 2022'],
+    ['2022/6/1', 'June 01, 2022', 'MMMM dd, yyyy'],
+    ['15/6/2022', 'June 15, 2022', 'dd/MM/YYYY'],
+    ['1/6/2022', 'June 01, 2022', 'dd MMMM, yyyy'],
+    ['15-aug-2023', 'August 15, 2023', 'dd MMMM, yyyy'],
+    ['15 August, 2023', 'August 15, 2023', 'dd MMMM, yyyy'],
+  ]
+
+  dates.forEach(([date, expected, dateFormat]) => {
+    it(`returns ${expected} for "${date}"`, () => {
+      expect(
+        format(parseDate({ date, format: dateFormat }), 'MMMM dd, yyyy')
+      ).toEqual(expected)
+    })
+  })
+})
+
+describe('parseMonth', () => {
+  const months: [string, number][] = [
+    ['jan', 1],
+    ['feb', 2],
+    ['December', 12],
+    ['2', 2],
+    ['12', 12],
+    ['05', 5],
+  ]
+
+  months.forEach(([month, expected]) => {
+    it(`returns ${expected} for "${month}"`, () => {
+      expect(parseMonth(month)).toBe(expected)
+    })
+  })
+})