fix: date range pickers enable input field to trigger dialogue (#191)

* chore: remove unused var * fix: date picker fixes * fix: use correct hook
saas-js · Jan 12, 2024 · 66d2335 · 66d2335 · vercel · Jan 12, 2024
1 parent 829a336
commit 66d2335
Show file tree

Hide file tree

Showing 15 changed files with 231 additions and 107 deletions.
diff --git a/.changeset/hip-panthers-unite.md b/.changeset/hip-panthers-unite.md
@@ -0,0 +1,5 @@
+---
+'@saas-ui/date-picker': patch
+---
+
+Improved DatePicker to enable keyboard navigation on calendar days after opening
diff --git a/.changeset/khaki-bears-obey.md b/.changeset/khaki-bears-obey.md
@@ -0,0 +1,5 @@
+---
+'@saas-ui/date-picker': patch
+---
+
+Fixed issue where date picker dialog would not open using keyboard controls
diff --git a/apps/website/public/blog.xml b/apps/website/public/blog.xml
@@ -20,6 +20,16 @@
     <category>nextjs</category><category>react</category><category>next app router</category><category>saas ui</category><category>dashboard</category><category>app development</category>
   </item>
 
+  <item>
+    <guid>https://saas-ui.dev/blog/introducing-charts-for-chakra-ui</guid>
+    <title>Introducing 4 new Open Source data visualization components for Chakra UI.</title>
+    <link>https://saas-ui.dev/blog/introducing-charts-for-chakra-ui</link>
+    <description>Build beautiful metrics dashboards faster with Area, Bar, Line and Sparkline charts for Chakra UI.</description>
+    <pubDate>Fri, 12 Jan 2024 00:00:00 GMT</pubDate>
+    <author>hello@saas-ui.dev (Eelco Wiersma)</author>
+
+  </item>
+
   <item>
     <guid>https://saas-ui.dev/blog/introducing-glass-theme-for-chakra-ui</guid>
     <title>Introducing the new Glass theme for Chakra UI</title>
@@ -68,16 +78,6 @@
     <pubDate>Fri, 24 Nov 2023 00:00:00 GMT</pubDate>
     <author>hello@saas-ui.dev (Eelco Wiersma)</author>
 
-  </item>
-
-  <item>
-    <guid>https://saas-ui.dev/blog/introducing-charts-for-chakra-ui</guid>
-    <title>Introducing 4 new Open Source data visualization components for Chakra UI.</title>
-    <link>https://saas-ui.dev/blog/introducing-charts-for-chakra-ui</link>
-    <description>Build beautiful metrics dashboards faster with Area, Bar, Line and Sparkline charts for Chakra UI.</description>
-    <pubDate>Fri, 12 Jan 2024 00:00:00 GMT</pubDate>
-    <author>hello@saas-ui.dev (Eelco Wiersma)</author>
-
   </item>
 
     </channel>

diff --git a/packages/pro b/packages/pro
diff --git a/packages/saas-ui-charts/src/area-chart.tsx b/packages/saas-ui-charts/src/area-chart.tsx
@@ -69,7 +69,6 @@ export const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
       yAxisWidth = 40,
       legendHeight = 32,
       animationDuration = 500,
-      name,
       valueFormatter,
       variant = 'gradient',
       tooltipContent,

diff --git a/packages/saas-ui-date-picker/package.json b/packages/saas-ui-date-picker/package.json
@@ -65,6 +65,7 @@
     "@react-aria/calendar": "^3.5.3",
     "@react-aria/datepicker": "^3.9.0",
     "@react-aria/i18n": "^3.9.0",
+    "@react-aria/interactions": "^3.20.1",
     "@react-stately/calendar": "^3.4.2",
     "@react-stately/datepicker": "^3.9.0",
     "@saas-ui/core": "workspace:*",

diff --git a/packages/saas-ui-date-picker/src/button.tsx b/packages/saas-ui-date-picker/src/button.tsx
@@ -7,6 +7,7 @@ import {
   IconButtonProps,
 } from '@chakra-ui/react'
 import { callAllHandlers } from '@chakra-ui/utils'
+import { Pressable } from '@react-aria/interactions'
 
 interface FieldButtonProps extends ButtonProps {
   onPress?(e: any): void
@@ -15,25 +16,26 @@ interface FieldButtonProps extends ButtonProps {
 
 export const FieldButton = forwardRef<FieldButtonProps, 'button'>(
   (props, ref) => {
-    const { onPress: onClick, onFocusChange, onFocus, onBlur, ...rest } = props
+    const { onPress, onFocusChange, onFocus, onBlur, ...rest } = props
 
     return (
-      <Button
-        ref={ref}
-        size="sm"
-        h="1.75rem"
-        mr="2"
-        onClick={onClick}
-        onFocus={() =>
-          callAllHandlers(() => onFocusChange?.(true), props.onFocus)
-        }
-        onBlur={() =>
-          callAllHandlers(() => onFocusChange?.(false), props.onBlur)
-        }
-        {...rest}
-      >
-        {props.children}
-      </Button>
+      <Pressable onPress={onPress}>
+        <Button
+          ref={ref}
+          size="sm"
+          h="1.75rem"
+          mr="2"
+          onFocus={() =>
+            callAllHandlers(() => onFocusChange?.(true), props.onFocus)
+          }
+          onBlur={() =>
+            callAllHandlers(() => onFocusChange?.(false), props.onBlur)
+          }
+          {...rest}
+        >
+          {props.children}
+        </Button>
+      </Pressable>
     )
   }
 )
@@ -44,21 +46,24 @@ export interface NavButtonProps extends IconButtonProps {
 }
 
 export const NavButton = forwardRef<NavButtonProps, 'button'>((props, ref) => {
-  const { onPress: onClick, onFocusChange, onFocus, onBlur, ...rest } = props
+  const { onPress, onFocusChange, onFocus, onBlur, ...rest } = props
 
   return (
-    <IconButton
-      ref={ref}
-      size="sm"
-      variant="ghost"
-      onClick={onClick}
-      onFocus={() =>
-        callAllHandlers(() => onFocusChange?.(true), props.onFocus)
-      }
-      onBlur={() => callAllHandlers(() => onFocusChange?.(false), props.onBlur)}
-      {...rest}
-    >
-      {props.children}
-    </IconButton>
+    <Pressable onPress={onPress}>
+      <IconButton
+        ref={ref}
+        size="sm"
+        variant="ghost"
+        onFocus={() =>
+          callAllHandlers(() => onFocusChange?.(true), props.onFocus)
+        }
+        onBlur={() =>
+          callAllHandlers(() => onFocusChange?.(false), props.onBlur)
+        }
+        {...rest}
+      >
+        {props.children}
+      </IconButton>
+    </Pressable>
   )
 })
diff --git a/packages/saas-ui-date-picker/src/date-input.tsx b/packages/saas-ui-date-picker/src/date-input.tsx
@@ -7,14 +7,20 @@ import {
   InputRightElement,
   Portal,
   SystemCSSProperties,
+  useMergeRefs,
+  usePopoverContext,
 } from '@chakra-ui/react'
 
 import { FieldButton } from './button'
 import { DatePickerCalendar } from './calendar'
 import { DateField, DatePickerTimeField } from './date-field'
-import { DatePickerDialog, DatePickerTrigger } from './date-picker-dialog'
+import {
+  DatePickerAnchor,
+  DatePickerDialog,
+  DatePickerDialogProps,
+} from './date-picker-dialog'
 import { DatePicker, DatePickerProps } from './date-picker'
-import { useDatePickerContext } from './date-picker-context'
+import { useDatePickerContext, useDatePickerInput } from './date-picker-context'
 import { SegmentedInput } from './segmented-input'
 import { CalendarIcon } from './icons'
 
@@ -28,6 +34,14 @@ export interface DateInputProps extends DatePickerProps {
    * Also accepts a `z-index` value that will be passed to the dialog.
    */
   portal?: boolean | SystemCSSProperties['zIndex']
+  /**
+   * The DatePickerInput props.
+   */
+  inputProps?: DatePickerInputProps
+  /**
+   * The DatePickerDialog props.
+   */
+  dialogProps?: DatePickerDialogProps
 }
 
 /**
@@ -36,12 +50,21 @@ export interface DateInputProps extends DatePickerProps {
  * @see Docs https://saas-ui.dev/docs/date-time/date-picker-input
  */
 export const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
-  const { children, calendarIcon, size, variant, portal, ...rest } = props
+  const {
+    children,
+    calendarIcon,
+    size,
+    variant,
+    inputProps,
+    dialogProps,
+    portal,
+    ...rest
+  } = props
 
   const zIndex = typeof portal === 'boolean' ? undefined : portal
 
   const dialog = (
-    <DatePickerDialog zIndex={zIndex}>
+    <DatePickerDialog zIndex={zIndex} {...dialogProps}>
       <>
         <DatePickerCalendar />
         {children}
@@ -56,6 +79,7 @@ export const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
         size={size}
         variant={variant}
         ref={ref}
+        {...inputProps}
       />
 
       {portal ? <Portal>{dialog}</Portal> : dialog}
@@ -107,17 +131,22 @@ export const DatePickerInput = forwardRef<DatePickerInputProps, 'div'>(
       fieldProps,
       buttonProps,
       datePickerRef,
-    } = useDatePickerContext()
+    } = useDatePickerInput()
 
     const themeProps = { size, variant }
 
     return (
-      <InputGroup {...rest} {...groupProps} {...themeProps} ref={datePickerRef}>
-        <SegmentedInput {...themeProps}>
-          <DateField locale={locale} {...fieldProps} ref={ref} />
-        </SegmentedInput>
-        <InputRightElement py="1">
-          <DatePickerTrigger>
+      <DatePickerAnchor>
+        <InputGroup
+          ref={datePickerRef}
+          {...rest}
+          {...groupProps}
+          {...themeProps}
+        >
+          <SegmentedInput {...themeProps}>
+            <DateField ref={ref} locale={locale} {...fieldProps} />
+          </SegmentedInput>
+          <InputRightElement py="1">
             <FieldButton
               variant="ghost"
               flex="1"
@@ -127,9 +156,9 @@ export const DatePickerInput = forwardRef<DatePickerInputProps, 'div'>(
             >
               {calendarIcon || <CalendarIcon />}
             </FieldButton>
-          </DatePickerTrigger>
-        </InputRightElement>
-      </InputGroup>
+          </InputRightElement>
+        </InputGroup>
+      </DatePickerAnchor>
     )
   }
 )

diff --git a/packages/saas-ui-date-picker/src/date-picker-context.tsx b/packages/saas-ui-date-picker/src/date-picker-context.tsx
@@ -20,6 +20,7 @@ import {
   now,
 } from '@internationalized/date'
 import { isDateInRange } from './date-utils'
+import { usePopoverContext } from '@chakra-ui/react'
 
 export const [DatePickerStylesProvider, useDatePickerStyles] = createContext<
   Record<string, SystemStyleObject>
@@ -77,8 +78,76 @@ export const useDateRangePickerContext = () => {
 }
 
 export const useDatePickerDialog = () => {
-  const { dialogProps } = useContext()
-  return { dialogProps }
+  const { dialogProps, state, datePickerRef } = useContext()
+
+  React.useEffect(() => {
+    if (state.isOpen) {
+      setTimeout(() => {
+        const parent = datePickerRef.current?.parentNode
+        const el =
+          parent?.querySelector<HTMLElement>('[data-selected]') ||
+          parent?.querySelector<HTMLElement>('[data-today]') ||
+          parent?.querySelector<HTMLElement>(
+            'td button:not([aria-disabled="true"])'
+          )
+
+        el?.focus()
+      }, 0)
+    }
+  }, [datePickerRef, state.isOpen])
+
+  return {
+    dialogProps: {
+      ...dialogProps,
+    },
+  }
+}
+
+export const useDatePickerInput = () => {
+  const popover = usePopoverContext()
+  const { onClick, ...triggerProps } = popover.getTriggerProps()
+
+  const context = useDatePickerContext()
+
+  const { state, locale, groupProps, datePickerRef } = context
+
+  const buttonProps = {
+    ...context.buttonProps,
+    ...triggerProps,
+  }
+
+  return {
+    fieldProps: context.fieldProps,
+    groupProps,
+    buttonProps,
+    datePickerRef,
+    locale,
+    state,
+  }
+}
+
+export const useDateRangePickerInput = () => {
+  const popover = usePopoverContext()
+  const { onClick, ...triggerProps } = popover.getTriggerProps()
+
+  const context = useDateRangePickerContext()
+
+  const { state, locale, groupProps, datePickerRef } = context
+
+  const buttonProps = {
+    ...context.buttonProps,
+    ...triggerProps,
+  }
+
+  return {
+    groupProps,
+    buttonProps,
+    datePickerRef,
+    locale,
+    state,
+    startFieldProps: context.startFieldProps,
+    endFieldProps: context.endFieldProps,
+  }
 }
 
 export interface UseCalenderCellProps extends AriaCalendarCellProps {
@@ -99,8 +168,6 @@ export const useCalendarCell = (
     isSelected,
     isInvalid,
     formattedDate,
-    isDisabled,
-    isFocused,
     isOutsideVisibleRange,
     isUnavailable,
   } = useAriaCalendarCell({ date }, state, ref)

diff --git a/packages/saas-ui-date-picker/src/date-picker-dialog.tsx b/packages/saas-ui-date-picker/src/date-picker-dialog.tsx
@@ -27,7 +27,7 @@ export interface DatePickerDialogProps
 }
 
 export const DatePickerDialog: React.FC<DatePickerDialogProps> = (props) => {
-  const { children, hideArrow, ...rest } = props
+  const { children, hideArrow = true, ...rest } = props
 
   const { dialogProps } = useDatePickerDialog()
   const styles = useDatePickerStyles()