@northlight/ui 2.43.1 → 2.43.3

package/lib/components/date-picker/components/date-field/trigger.tsx

@@ -1,24 +1,44 @@
-import React, { useRef } from 'react'
+import React, { KeyboardEventHandler, useRef } from 'react'
 import { CalendarDuo } from '@northlight/icons'
-import { useButton } from '@react-aria/button'
 import { Button } from '../../../button'
 import { TriggerProps } from './types'
 import { Icon } from '../../../icon'
 
 export const Trigger = (props: TriggerProps) => {
-  const { isDisabled, handleClick } = props
+  const {
+    id,
+    'aria-haspopup': ariaHasPopup,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    'aria-expanded': ariaExpanded,
+    isDisabled,
+    handleClick,
+  } = props
   const ref = useRef<HTMLButtonElement>(null)
-  const { buttonProps } = useButton(props, ref)
+
+  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleClick()
+    }
+  }
 
   return (
     <Button
-      { ...buttonProps }
       ref={ ref }
+      id={ id }
+      aria-haspopup={ ariaHasPopup }
+      aria-label={ ariaLabel }
+      aria-labelledby={ ariaLabelledBy }
+      aria-describedby={ ariaDescribedBy }
+      aria-expanded={ ariaExpanded }
       size="sm"
       boxSize={ 8 }
       variant="ghost"
       isDisabled={ isDisabled }
-      onPointerDown={ handleClick }
+      onClick={ handleClick }
+      onKeyDown={ handleKeyDown }
       pointerEvents={ isDisabled ? 'none' : 'auto' }
     >
       <Icon as={ CalendarDuo } />

package/lib/components/date-picker/components/date-field/types.ts

@@ -20,6 +20,7 @@ export interface StyledFieldProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode
   variant?: 'outline' | 'filled'
 }
+
 export interface TriggerProps extends AriaButtonProps {
   handleClick: () => void
 }

package/lib/components/date-picker/date-picker/date-picker.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { useMultiStyleConfig } from '@chakra-ui/react'
+import { useMultiStyleConfig, useOutsideClick } from '@chakra-ui/react'
 import { useDatePicker } from '@react-aria/datepicker'
 import { useDatePickerState } from '@react-stately/datepicker'
 import { FocusScope } from '@react-aria/focus'
@@ -63,6 +63,7 @@ import { DatePickerLocaleWrapper } from './date-picker-locale-wrapper'
  */
 export const DatePicker = (props: DatePickerProps) => {
   const {
+    'data-testid': dataTestId,
     isDisabled,
     isClearable = true,
     resetDate,
@@ -71,49 +72,243 @@ export const DatePicker = (props: DatePickerProps) => {
     minValue,
     variant = 'outline',
     firstDayOfWeek = 'monday',
+    value,
+    defaultValue,
+    onChange,
+    maxValue,
+    isReadOnly,
+    isRequired,
+    placeholderValue,
+    isDateUnavailable,
+    granularity,
+    hourCycle,
+    shouldForceLeadingZeros,
+    pageBehavior,
+    defaultOpen,
+    onOpenChange,
+    label,
+    description,
+    errorMessage,
+    id,
+    name,
+    autoFocus,
+    onFocus,
+    onBlur,
+    onFocusChange,
+    onKeyDown,
+    onKeyUp,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    'aria-details': ariaDetails,
   } = props
   const ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  const dialogRef = useRef() as React.MutableRefObject<HTMLDivElement>
   const { group } = useMultiStyleConfig('DatePicker')
 
   const state = useDatePickerState({
-    ...props,
+    value,
+    defaultValue,
+    onChange,
+    minValue,
+    maxValue,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    isInvalid,
+    placeholderValue,
+    isDateUnavailable,
+    granularity,
+    hourCycle,
+    shouldForceLeadingZeros,
+    defaultOpen,
+    onOpenChange,
     shouldCloseOnSelect: false,
     hideTimeZone: true,
   })
 
   const { buttonProps, fieldProps, calendarProps, groupProps, dialogProps } =
     useDatePicker(
-      { ...props, minValue: minValue || parseDate('1994-03-08') },
+      {
+        value,
+        defaultValue,
+        onChange,
+        minValue: minValue || parseDate('1994-03-08'),
+        maxValue,
+        isDisabled,
+        isReadOnly,
+        isRequired,
+        isInvalid,
+        placeholderValue,
+        isDateUnavailable,
+        granularity,
+        hourCycle,
+        shouldForceLeadingZeros,
+        pageBehavior,
+        defaultOpen,
+        onOpenChange,
+        label,
+        description,
+        errorMessage,
+        id,
+        name,
+        autoFocus,
+        onFocus,
+        onBlur,
+        onFocusChange,
+        onKeyDown,
+        onKeyUp,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-describedby': ariaDescribedBy,
+        'aria-details': ariaDetails,
+      },
       state,
       ref
     )
 
-  const togglePopup = () => state.setOpen(!state.isOpen)
+  const {
+    id: buttonId,
+    'aria-haspopup': buttonAriaHasPopup,
+    'aria-label': buttonAriaLabel,
+    'aria-labelledby': buttonAriaLabelledBy,
+    'aria-describedby': buttonAriaDescribedBy,
+    'aria-expanded': buttonAriaExpanded,
+  } = buttonProps
+
+  const {
+    id: dialogId,
+    'aria-labelledby': dialogAriaLabelledBy,
+  } = dialogProps
+
+  const {
+    autoFocus: calAutoFocus,
+    value: calValue,
+    onChange: calOnChange,
+    minValue: calMinValue,
+    maxValue: calMaxValue,
+    isDisabled: calIsDisabled,
+    isReadOnly: calIsReadOnly,
+    isDateUnavailable: calIsDateUnavailable,
+    defaultFocusedValue: calDefaultFocusedValue,
+    isInvalid: calIsInvalid,
+    errorMessage: calErrorMessage,
+  } = calendarProps
+
+  const {
+    id: fieldId,
+    'aria-describedby': fieldAriaDescribedBy,
+    'aria-labelledby': fieldAriaLabelledBy,
+    value: fieldValue,
+    onChange: fieldOnChange,
+    minValue: fieldMinValue,
+    maxValue: fieldMaxValue,
+    placeholderValue: fieldPlaceholderValue,
+    hideTimeZone: fieldHideTimeZone,
+    hourCycle: fieldHourCycle,
+    shouldForceLeadingZeros: fieldShouldForceLeadingZeros,
+    granularity: fieldGranularity,
+    isDisabled: fieldIsDisabled,
+    isReadOnly: fieldIsReadOnly,
+    isRequired: fieldIsRequired,
+    isInvalid: fieldIsInvalid,
+    autoFocus: fieldAutoFocus,
+    name: fieldName,
+    ...restFieldProps
+  } = fieldProps
+
+  const {
+    role: groupRole,
+    id: groupId,
+    'aria-disabled': groupAriaDisabled,
+    'aria-labelledby': groupAriaLabelledBy,
+    'aria-describedby': groupAriaDescribedBy,
+    onKeyDown: groupOnKeyDown,
+    onKeyUp: groupOnKeyUp,
+    onFocus: groupOnFocus,
+    onBlur: groupOnBlur,
+    onPointerDown: groupOnPointerDown,
+    onClick: groupOnClick,
+  } = groupProps
+
+  const togglePopup = () => {
+    state.setOpen(!state.isOpen)
+  }
+
+  useOutsideClick({
+    ref: dialogRef,
+    handler: (event) => {
+      if (ref.current?.contains(event.target as Node)) return
+      state.setOpen(false)
+    },
+  })
 
   return (
     <Popover
       isOpen={ state.isOpen }
       onClose={ () => state.setOpen(false) }
+      closeOnBlur={ false }
       placement="bottom-end"
     >
       <PopoverAnchor>
-        <HStack minW={ 56 }>
-          <InputGroup { ...groupProps } ref={ ref } __css={ group }>
+        <HStack minW={ 56 } data-testid={ dataTestId }>
+          <InputGroup
+            role={ groupRole }
+            id={ groupId }
+            aria-disabled={ groupAriaDisabled }
+            aria-labelledby={ groupAriaLabelledBy }
+            aria-describedby={ groupAriaDescribedBy }
+            onKeyDown={ groupOnKeyDown }
+            onKeyUp={ groupOnKeyUp }
+            onFocus={ groupOnFocus }
+            onBlur={ groupOnBlur }
+            onPointerDown={ groupOnPointerDown }
+            onClick={ groupOnClick }
+            ref={ ref }
+            __css={ group }
+          >
             <StyledField
               isDisabled={ isDisabled }
               isInvalid={ isInvalid }
               variant={ variant }
             >
-              <Box paddingInlineStart="1a" paddingInlineEnd={ 10 }>
-                <DateField { ...fieldProps } dateFormat={ dateFormat } />
+              <Box paddingInlineStart="1a" data-testid="date-picker-input-field" paddingInlineEnd={ 10 }>
+                <DateField
+                  { ...restFieldProps }
+                  id={ fieldId }
+                  aria-describedby={ fieldAriaDescribedBy }
+                  aria-labelledby={ fieldAriaLabelledBy }
+                  value={ fieldValue }
+                  onChange={ fieldOnChange }
+                  minValue={ fieldMinValue }
+                  maxValue={ fieldMaxValue }
+                  placeholderValue={ fieldPlaceholderValue }
+                  hideTimeZone={ fieldHideTimeZone }
+                  hourCycle={ fieldHourCycle }
+                  shouldForceLeadingZeros={ fieldShouldForceLeadingZeros }
+                  granularity={ fieldGranularity }
+                  isDisabled={ fieldIsDisabled }
+                  isReadOnly={ fieldIsReadOnly }
+                  isRequired={ fieldIsRequired }
+                  isInvalid={ fieldIsInvalid }
+                  autoFocus={ fieldAutoFocus }
+                  name={ fieldName }
+                  dateFormat={ dateFormat }
+                />
               </Box>
             </StyledField>
             <InputRightElement
               sx={ { height: '100%', paddingRight: '1' } }
               zIndex={ 0 }
+              data-testid="date-picker-trigger"
             >
               <Trigger
-                { ...buttonProps }
+                id={ buttonId }
+                aria-haspopup={ buttonAriaHasPopup }
+                aria-label={ buttonAriaLabel }
+                aria-labelledby={ buttonAriaLabelledBy }
+                aria-describedby={ buttonAriaDescribedBy }
+                aria-expanded={ buttonAriaExpanded }
                 isDisabled={ isDisabled }
                 handleClick={ togglePopup }
               />
@@ -132,10 +327,29 @@ export const DatePicker = (props: DatePickerProps) => {
         </HStack>
       </PopoverAnchor>
       { state.isOpen && (
-        <PopoverContent { ...dialogProps } ref={ ref } w={ 64 } border="none">
+        <PopoverContent
+          id={ dialogId }
+          aria-labelledby={ dialogAriaLabelledBy }
+          ref={ dialogRef }
+          w={ 64 }
+          border="none"
+        >
           <FocusScope contain={ true } restoreFocus={ true }>
             <DatePickerLocaleWrapper firstDayOfWeek={ firstDayOfWeek }>
-              <Calendar { ...calendarProps } firstDayOfWeek={ firstDayOfWeek } />
+              <Calendar
+                autoFocus={ calAutoFocus }
+                value={ calValue }
+                onChange={ calOnChange }
+                minValue={ calMinValue }
+                maxValue={ calMaxValue }
+                isDisabled={ calIsDisabled }
+                isReadOnly={ calIsReadOnly }
+                isDateUnavailable={ calIsDateUnavailable }
+                defaultFocusedValue={ calDefaultFocusedValue }
+                isInvalid={ calIsInvalid }
+                errorMessage={ calErrorMessage }
+                firstDayOfWeek={ firstDayOfWeek }
+              />
             </DatePickerLocaleWrapper>
           </FocusScope>
         </PopoverContent>

package/lib/components/date-picker/date-picker/date-range-picker.tsx

@@ -1,7 +1,8 @@
 import React, { useRef } from 'react'
+import { FocusScope } from '@react-aria/focus'
 import { useDateRangePickerState } from '@react-stately/datepicker'
 import { useDateRangePicker } from '@react-aria/datepicker'
-import { useMultiStyleConfig } from '@chakra-ui/react'
+import { useMultiStyleConfig, useOutsideClick } from '@chakra-ui/react'
 import { CheckSolid, XCloseSolid } from '@northlight/icons'
 import { identity, isNil } from 'ramda'
 import { DateValue, parseDate } from '@internationalized/date'
@@ -116,8 +117,14 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
     'data-testid': dataTestId,
     defaultOpen = false,
     onOpenChange,
+    placeholderValue,
+    isDateUnavailable,
+    allowsNonContiguousRanges,
+    startName,
+    endName,
   } = props
   const ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  const dialogRef = useRef() as React.MutableRefObject<HTMLDivElement>
   const { group } = useMultiStyleConfig('DatePicker')
   const parsedProps = {
     onChange: (date: DateRange) => {
@@ -137,9 +144,9 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
     maxValue: parsedProps.maxValue,
     isDisabled,
     isInvalid,
-    placeholderValue: props.placeholderValue,
-    isDateUnavailable: props.isDateUnavailable,
-    allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+    placeholderValue,
+    isDateUnavailable,
+    allowsNonContiguousRanges,
     shouldCloseOnSelect: false,
     hideTimeZone: true,
     defaultOpen,
@@ -164,26 +171,121 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
       value: parseValue(value) as { start: DateValue, end: DateValue },
       minValue: parsedProps.minValue || parseDate('1994-03-08'),
       maxValue: parsedProps.maxValue,
-      placeholderValue: props.placeholderValue,
-      isDateUnavailable: props.isDateUnavailable,
-      allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+      placeholderValue,
+      isDateUnavailable,
+      allowsNonContiguousRanges,
       isDisabled,
       isInvalid,
-      startName: props.startName,
-      endName: props.endName,
+      startName,
+      endName,
       'aria-label': 'Date range picker',
-      ...(!isNil(dataTestId) && { 'data-testid': dataTestId }),
     },
     state,
     ref
   )
 
-  const togglePopup = () => state.setOpen(!state.isOpen)
+  const {
+    id: buttonId,
+    'aria-haspopup': buttonAriaHasPopup,
+    'aria-label': buttonAriaLabel,
+    'aria-labelledby': buttonAriaLabelledBy,
+    'aria-describedby': buttonAriaDescribedBy,
+    'aria-expanded': buttonAriaExpanded,
+  } = buttonProps
+
+  const {
+    role: groupRole,
+    id: groupId,
+    'aria-disabled': groupAriaDisabled,
+    'aria-labelledby': groupAriaLabelledBy,
+    'aria-describedby': groupAriaDescribedBy,
+    onKeyDown: groupOnKeyDown,
+    onKeyUp: groupOnKeyUp,
+    onFocus: groupOnFocus,
+    onBlur: groupOnBlur,
+    onPointerDown: groupOnPointerDown,
+    onClick: groupOnClick,
+  } = groupProps
+
+  const {
+    id: startFieldId,
+    'aria-describedby': startFieldAriaDescribedBy,
+    'aria-labelledby': startFieldAriaLabelledBy,
+    value: startFieldValue,
+    onChange: startFieldOnChange,
+    minValue: startFieldMinValue,
+    maxValue: startFieldMaxValue,
+    placeholderValue: startFieldPlaceholderValue,
+    hideTimeZone: startFieldHideTimeZone,
+    hourCycle: startFieldHourCycle,
+    shouldForceLeadingZeros: startFieldShouldForceLeadingZeros,
+    granularity: startFieldGranularity,
+    isDisabled: startFieldIsDisabled,
+    isReadOnly: startFieldIsReadOnly,
+    isRequired: startFieldIsRequired,
+    isInvalid: startFieldIsInvalid,
+    autoFocus: startFieldAutoFocus,
+    name: startFieldName,
+    ...restStartFieldProps
+  } = startFieldProps
+
+  const {
+    id: endFieldId,
+    'aria-describedby': endFieldAriaDescribedBy,
+    'aria-labelledby': endFieldAriaLabelledBy,
+    value: endFieldValue,
+    onChange: endFieldOnChange,
+    minValue: endFieldMinValue,
+    maxValue: endFieldMaxValue,
+    placeholderValue: endFieldPlaceholderValue,
+    hideTimeZone: endFieldHideTimeZone,
+    hourCycle: endFieldHourCycle,
+    shouldForceLeadingZeros: endFieldShouldForceLeadingZeros,
+    granularity: endFieldGranularity,
+    isDisabled: endFieldIsDisabled,
+    isReadOnly: endFieldIsReadOnly,
+    isRequired: endFieldIsRequired,
+    isInvalid: endFieldIsInvalid,
+    name: endFieldName,
+    ...restEndFieldProps
+  } = endFieldProps
+
+  const {
+    id: dialogId,
+    'aria-labelledby': dialogAriaLabelledBy,
+  } = dialogProps
+
+  const {
+    autoFocus: calAutoFocus,
+    value: calValue,
+    onChange: calOnChange,
+    minValue: calMinValue,
+    maxValue: calMaxValue,
+    isDisabled: calIsDisabled,
+    isReadOnly: calIsReadOnly,
+    isDateUnavailable: calIsDateUnavailable,
+    allowsNonContiguousRanges: calAllowsNonContiguousRanges,
+    defaultFocusedValue: calDefaultFocusedValue,
+    isInvalid: calIsInvalid,
+    errorMessage: calErrorMessage,
+  } = calendarProps
+
+  const togglePopup = () => {
+    state.setOpen(!state.isOpen)
+  }
 
   const handleClose = () => {
     state.setOpen(false)
   }
 
+  useOutsideClick({
+    ref: dialogRef,
+    handler: (event) => {
+      if (ref.current?.contains(event.target as Node)) return
+      state.setOpen(false)
+    },
+  })
+
   const ResetButton = CustomResetButton || (
     <IconButton
       aria-label="reset-date"
@@ -237,25 +339,86 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
     <Popover
       isOpen={ state.isOpen }
       onClose={ handleModalClose }
+      closeOnBlur={ false }
       placement="bottom-start"
     >
       <PopoverAnchor>
-        <HStack>
-          <InputGroup { ...groupProps } ref={ ref } __css={ group }>
+        <HStack data-testid={ dataTestId }>
+          <InputGroup
+            role={ groupRole }
+            id={ groupId }
+            aria-disabled={ groupAriaDisabled }
+            aria-labelledby={ groupAriaLabelledBy }
+            aria-describedby={ groupAriaDescribedBy }
+            onKeyDown={ groupOnKeyDown }
+            onKeyUp={ groupOnKeyUp }
+            onFocus={ groupOnFocus }
+            onBlur={ groupOnBlur }
+            onPointerDown={ groupOnPointerDown }
+            onClick={ groupOnClick }
+            ref={ ref }
+            __css={ group }
+          >
             <StyledField
               isDisabled={ isDisabled }
               isInvalid={ isInvalid }
               variant={ variant }
             >
-              <HStack paddingInlineStart="1a" paddingInlineEnd={ 10 }>
-                <DateField { ...startFieldProps } dateFormat={ dateFormat } />
+              <HStack paddingInlineStart="1a" data-test-id="daterange-picker-input-field" paddingInlineEnd={ 10 }>
+                <DateField
+                  { ...restStartFieldProps }
+                  id={ startFieldId }
+                  aria-describedby={ startFieldAriaDescribedBy }
+                  aria-labelledby={ startFieldAriaLabelledBy }
+                  value={ startFieldValue }
+                  onChange={ startFieldOnChange }
+                  minValue={ startFieldMinValue }
+                  maxValue={ startFieldMaxValue }
+                  placeholderValue={ startFieldPlaceholderValue }
+                  hideTimeZone={ startFieldHideTimeZone }
+                  hourCycle={ startFieldHourCycle }
+                  shouldForceLeadingZeros={ startFieldShouldForceLeadingZeros }
+                  granularity={ startFieldGranularity }
+                  isDisabled={ startFieldIsDisabled }
+                  isReadOnly={ startFieldIsReadOnly }
+                  isRequired={ startFieldIsRequired }
+                  isInvalid={ startFieldIsInvalid }
+                  autoFocus={ startFieldAutoFocus }
+                  name={ startFieldName }
+                  dateFormat={ dateFormat }
+                />
                 <P>-</P>
-                <DateField { ...endFieldProps } dateFormat={ dateFormat } />
+                <DateField
+                  { ...restEndFieldProps }
+                  id={ endFieldId }
+                  aria-describedby={ endFieldAriaDescribedBy }
+                  aria-labelledby={ endFieldAriaLabelledBy }
+                  value={ endFieldValue }
+                  onChange={ endFieldOnChange }
+                  minValue={ endFieldMinValue }
+                  maxValue={ endFieldMaxValue }
+                  placeholderValue={ endFieldPlaceholderValue }
+                  hideTimeZone={ endFieldHideTimeZone }
+                  hourCycle={ endFieldHourCycle }
+                  shouldForceLeadingZeros={ endFieldShouldForceLeadingZeros }
+                  granularity={ endFieldGranularity }
+                  isDisabled={ endFieldIsDisabled }
+                  isReadOnly={ endFieldIsReadOnly }
+                  isRequired={ endFieldIsRequired }
+                  isInvalid={ endFieldIsInvalid }
+                  name={ endFieldName }
+                  dateFormat={ dateFormat }
+                />
               </HStack>
             </StyledField>
-            <InputRightElement sx={ { height: '100%', paddingRight: '1' } }>
+            <InputRightElement data-test-id="daterange-picker-trigger" sx={ { height: '100%', paddingRight: '1' } }>
               <Trigger
-                { ...buttonProps }
+                id={ buttonId }
+                aria-haspopup={ buttonAriaHasPopup }
+                aria-label={ buttonAriaLabel }
+                aria-labelledby={ buttonAriaLabelledBy }
+                aria-describedby={ buttonAriaDescribedBy }
+                aria-expanded={ buttonAriaExpanded }
                 isDisabled={ isDisabled }
                 handleClick={ togglePopup }
               />
@@ -294,21 +457,39 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
       </PopoverAnchor>
       <PortalWrapper renderInPortal={ renderInPortal }>
         { state.isOpen && (
-          <PopoverContent { ...dialogProps } ref={ ref } w="max-content">
-            <DatePickerLocaleWrapper firstDayOfWeek={ firstDayOfWeek }>
-              <RangeCalendar
-                { ...calendarProps }
-                resetDate={ cancelOrResetDateChange }
-                handleClose={ handleModalClose }
-                fiscalStartMonth={ fiscalStartMonth || 0 }
-                fiscalStartDay={ fiscalStartDay || 0 }
-                isClearable={ isClearable }
-                firstDayOfWeek={ firstDayOfWeek }
-                onSave={ onSave }
-                clearButtonLabel={ clearButtonLabel }
-                buttonLabel={ buttonLabel }
-              />
-            </DatePickerLocaleWrapper>
+          <PopoverContent
+            id={ dialogId }
+            aria-labelledby={ dialogAriaLabelledBy }
+            ref={ dialogRef }
+            w="max-content"
+          >
+            <FocusScope contain={ true } restoreFocus={ true }>
+              <DatePickerLocaleWrapper firstDayOfWeek={ firstDayOfWeek }>
+                <RangeCalendar
+                  autoFocus={ calAutoFocus }
+                  value={ calValue }
+                  onChange={ calOnChange }
+                  minValue={ calMinValue }
+                  maxValue={ calMaxValue }
+                  isDisabled={ calIsDisabled }
+                  isReadOnly={ calIsReadOnly }
+                  isDateUnavailable={ calIsDateUnavailable }
+                  allowsNonContiguousRanges={ calAllowsNonContiguousRanges }
+                  defaultFocusedValue={ calDefaultFocusedValue }
+                  isInvalid={ calIsInvalid }
+                  errorMessage={ calErrorMessage }
+                  resetDate={ cancelOrResetDateChange }
+                  handleClose={ handleModalClose }
+                  fiscalStartMonth={ fiscalStartMonth || 0 }
+                  fiscalStartDay={ fiscalStartDay || 0 }
+                  isClearable={ isClearable }
+                  firstDayOfWeek={ firstDayOfWeek }
+                  onSave={ onSave }
+                  clearButtonLabel={ clearButtonLabel }
+                  buttonLabel={ buttonLabel }
+                />
+              </DatePickerLocaleWrapper>
+            </FocusScope>
           </PopoverContent>
         ) }
       </PortalWrapper>

package/lib/components/date-picker/types.ts

@@ -29,7 +29,9 @@ interface DatePickerSettings {
 
 export interface DatePickerProps
   extends Omit<AriaDatePickerProps<DateValue>, 'firstDayOfWeek'>,
-  DatePickerSettings {}
+  DatePickerSettings {
+  'data-testid': string
+}
 
 export interface DateRangePickerProps
   extends Omit<AriaDateRangePickerProps<DateValue>, 'firstDayOfWeek' | 'onChange' | 'value' | 'minValue' | 'maxValue'>,

package/lib/hooks/use-arrow-focus/index.ts

@@ -6,7 +6,7 @@ export const useArrowFocus = (columns: number) => {
     focusPrevious: previous,
     focusFirst,
     focusLast,
-  } = useFocusManager()
+  } = useFocusManager()!
 
   const defaultOpts = {
     ArrowRight: {