feat(dashboard,ui): DateFilter should open correctly (#9775)

.changeset/perfect-ravens-allow.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/dashboard": patch
+"@medusajs/ui": patch
+---
+
+fix(dashboard,ui): DateFilter should remain open

packages/admin/dashboard/src/components/table/data-table/data-table-filter/date-filter.tsx

@@ -9,8 +9,8 @@ import { useTranslation } from "react-i18next"
 import { useDate } from "../../../../hooks/use-date"
 import { useSelectedParams } from "../hooks"
 import { useDataTableFilterContext } from "./context"
-import { IFilter } from "./types"
 import FilterChip from "./filter-chip"
+import { IFilter } from "./types"
 
 type DateFilterProps = IFilter
 
@@ -97,7 +97,9 @@ export const DateFilter = ({
 
   const displayValue = getDisplayValueFromPresets() || getCustomDisplayValue()
 
-  const [previousValue, setPreviousValue] = useState<string | undefined>(displayValue)
+  const [previousValue, setPreviousValue] = useState<string | undefined>(
+    displayValue
+  )
 
   const handleRemove = () => {
     selectedParams.delete()
@@ -210,6 +212,7 @@ export const DateFilter = ({
                   </div>
                   <div className="px-2 py-1">
                     <DatePicker
+                      modal
                       maxValue={customEndValue}
                       value={customStartValue}
                       onChange={(d) => handleCustomDateChange(d, "start")}
@@ -224,6 +227,7 @@ export const DateFilter = ({
                   </div>
                   <div className="px-2 py-1">
                     <DatePicker
+                      modal
                       minValue={customStartValue}
                       value={customEndValue || undefined}
                       onChange={(d) => {

packages/design-system/ui/src/components/date-picker/date-picker.tsx

@@ -1,6 +1,10 @@
 "use client"
 
-import { CalendarDate, CalendarDateTime, getLocalTimeZone } from "@internationalized/date"
+import {
+  CalendarDate,
+  CalendarDateTime,
+  getLocalTimeZone,
+} from "@internationalized/date"
 import { CalendarMini, Clock, XMarkMini } from "@medusajs/icons"
 import { cva } from "cva"
 import * as React from "react"
@@ -38,10 +42,14 @@ type DatePickerValueProps = {
   granularity?: Granularity
   size?: "base" | "small"
   className?: string
+  modal?: boolean
 }
 
 interface DatePickerProps
-  extends Omit<BaseDatePickerProps<CalendarDateTime | CalendarDate>, keyof DatePickerValueProps>,
+  extends Omit<
+      BaseDatePickerProps<CalendarDateTime | CalendarDate>,
+      keyof DatePickerValueProps
+    >,
     DatePickerValueProps {}
 
 const datePickerStyles = (
@@ -72,16 +80,27 @@ const datePickerStyles = (
     },
   })
 
-const HAS_TIME = new Set<Granularity>(["hour","minute", "second"])
+const HAS_TIME = new Set<Granularity>(["hour", "minute", "second"])
 
-const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({
+const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
       size = "base",
       shouldCloseOnSelect = true,
       className,
+      modal = false,
       ...props
-}, ref) => {
-  const [value, setValue] = React.useState<CalendarDateTime | CalendarDate | null | undefined>(
-    getDefaultCalendarDateFromDate(props.value, props.defaultValue, props.granularity)
+    },
+    ref
+  ) => {
+    const [value, setValue] = React.useState<
+      CalendarDateTime | CalendarDate | null | undefined
+    >(
+      getDefaultCalendarDateFromDate(
+        props.value,
+        props.defaultValue,
+        props.granularity
+      )
     )
 
     const innerRef = React.useRef<HTMLDivElement>(null)
@@ -100,8 +119,16 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({
       useDatePicker(_props, state, innerRef)
 
     React.useEffect(() => {
-    setValue(props.value ? updateCalendarDateFromDate(value, props.value, props.granularity) : null)
-    state.setValue(props.value ? updateCalendarDateFromDate(value, props.value, props.granularity) : null)
+      setValue(
+        props.value
+          ? updateCalendarDateFromDate(value, props.value, props.granularity)
+          : null
+      )
+      state.setValue(
+        props.value
+          ? updateCalendarDateFromDate(value, props.value, props.granularity)
+          : null
+      )
     }, [props.value])
 
     function clear(e: React.MouseEvent<HTMLButtonElement>) {
@@ -123,7 +150,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({
     const Icon = hasTime ? Clock : CalendarMini
 
     return (
-    <Popover open={state.isOpen} onOpenChange={state.setOpen}>
+      <Popover modal={modal} open={state.isOpen} onOpenChange={state.setOpen}>
         <Popover.Anchor asChild>
           <div
             ref={ref}
@@ -168,7 +195,8 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({
         </Popover.Content>
       </Popover>
     )
-})
+  }
+)
 DatePicker.displayName = "DatePicker"
 
 function convertProps(
@@ -200,10 +228,16 @@ function convertProps(
 
   return {
     ...rest,
-    onChange: onChange as BaseDatePickerProps<CalendarDateTime | CalendarDate>["onChange"],
+    onChange: onChange as BaseDatePickerProps<
+      CalendarDateTime | CalendarDate
+    >["onChange"],
     isDateUnavailable,
-    minValue: minValue ? createCalendarDateFromDate(minValue, props.granularity) : minValue,
-    maxValue: maxValue ? createCalendarDateFromDate(maxValue, props.granularity) : maxValue,
+    minValue: minValue
+      ? createCalendarDateFromDate(minValue, props.granularity)
+      : minValue,
+    maxValue: maxValue
+      ? createCalendarDateFromDate(maxValue, props.granularity)
+      : maxValue,
   }
 }